/* Prototype C -- "Yönetici Turu": page + HUD additions on top of core/hud.css (dark glass panels, warm amber accent). */
html, body { margin: 0; height: 100%; background: #0d1426; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; }
#stage { position: absolute; inset: 0; }
#boot { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; font-size: 15px; background: #0d1426; z-index: 30; transition: opacity .7s; text-align: center; }
#boot.off { opacity: 0; pointer-events: none; }
#boot b { display: block; font-size: 22px; margin-bottom: 6px; color: #f8fafc; }
#err { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 40; color: #fecaca; background: rgba(127, 29, 29, .92); padding: 10px 14px; border-radius: 10px; display: none; font-size: 13px; }

/* ---- counters (top right) ---- */
@media (min-width: 901px) { body .data-pill { top: 88px; } }   /* sayaçlar bu ofiste daha yüksek: etiket panellerin hemen altında, sağ kenarı hizalı */
.c-counters { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; max-width: calc(100% - 28px); }
.c-count { padding: 7px 14px 8px; min-width: 116px; position: relative; transition: box-shadow .4s, transform .4s; }
.c-count span { display: block; color: #94a3b8; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.c-count b { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.c-count i { font-style: normal; font-size: 12px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.c-count[data-k="done"] b { color: #4ade80; } .c-count[data-k="bugs"] b { color: #fb7185; } .c-count[data-k="prod"] b { color: #fbbf24; } .c-count[data-k="active"] b { color: #38bdf8; }
.c-count.bump { animation: cbump .7s ease-out; }
@keyframes cbump { 0% { transform: scale(1.09); box-shadow: 0 0 0 0 rgba(251, 191, 36, .55), 0 6px 24px rgba(2, 6, 23, .35); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(251, 191, 36, 0), 0 6px 24px rgba(2, 6, 23, .35); } }

/* ---- milestone banner (top centre) ---- */
.c-banner { position: absolute; left: 50%; top: 82px; transform: translate(-50%, -14px); opacity: 0; transition: opacity .7s, transform .7s; text-align: center; padding: 10px 34px 12px; border-radius: 18px; background: rgba(12, 18, 32, .88); border: 1px solid rgba(148, 163, 184, .3); box-shadow: 0 14px 44px rgba(2, 6, 23, .55); pointer-events: none; max-width: min(92%, 640px); }
.c-banner.on { opacity: 1; transform: translate(-50%, 0); }
.c-banner small { display: block; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #fbbf24; font-weight: 650; }
.c-banner b { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.c-banner em { display: block; font-style: normal; font-size: 12px; color: #cbd5e1; }
.c-banner.t-milestone { border-color: #fbbf24; background: linear-gradient(100deg, rgba(120, 53, 15, .94), rgba(30, 27, 75, .94)); }
.c-banner.t-good { border-color: #4ade80; } .c-banner.t-good small { color: #86efac; }
.c-banner.t-bad { border-color: #f87171; background: rgba(127, 29, 29, .93); } .c-banner.t-bad small { color: #fecaca; }

/* ---- narration caption ---- */
.c-caption { position: absolute; left: 50%; bottom: 112px; transform: translate(-50%, 10px); opacity: 0; transition: opacity .6s, transform .6s; width: max-content; max-width: min(94%, 940px); box-sizing: border-box; padding: 11px 24px 10px 20px; border-radius: 14px; background: rgba(2, 6, 23, .84); border: 1px solid rgba(148, 163, 184, .2); border-left: 5px solid #64748b; pointer-events: none; text-align: left; box-shadow: 0 10px 34px rgba(2, 6, 23, .5); }
.c-caption.on { opacity: 1; transform: translate(-50%, 0); }
.c-cap-main { display: flex; align-items: center; gap: 12px; }
.c-chip { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.c-cap-text { font-size: 21px; font-weight: 600; line-height: 1.3; color: #f8fafc; }
.c-cap-sub { font-size: 12px; color: #94a3b8; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-caption.t-bad { border-left-color: #f87171; } .c-caption.t-good { border-left-color: #4ade80; } .c-caption.t-info { border-left-color: #38bdf8; }
.c-caption.t-warn { border-left-color: #fbbf24; } .c-caption.t-milestone { border-left-color: #fbbf24; background: linear-gradient(100deg, rgba(88, 40, 10, .9), rgba(15, 23, 42, .9)); }
.c-caption.t-bad .c-cap-text { color: #fecaca; }

/* ---- camera tag, cut dip, intro / outro card ---- */
.c-shot { position: absolute; left: 14px; bottom: 92px; font-size: 11.5px; color: #cbd5e1; background: rgba(2, 6, 23, .6); padding: 4px 12px; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-cut { position: absolute; inset: 0; background: #05080f; opacity: 0; pointer-events: none; transition: opacity .9s; }
.c-cut.on { opacity: .9; transition: opacity .2s; }
.c-card { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .6s, transform .6s; text-align: center; padding: 20px 46px 22px; border-radius: 22px; background: rgba(8, 12, 24, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(251, 191, 36, .38); box-shadow: 0 24px 70px rgba(2, 6, 23, .6); pointer-events: none; max-width: min(92%, 680px); }
.c-card.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.c-card.outro { pointer-events: auto; }
.c-card small { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #fbbf24; font-weight: 650; }
.c-card > b { display: block; font-size: 32px; font-weight: 700; margin: 4px 0 6px; color: #f8fafc; }
.c-card > span { display: block; font-size: 13.5px; color: #cbd5e1; line-height: 1.45; }
.c-sum { display: flex; justify-content: center; gap: 28px; margin: 12px 0 14px; }
.c-sum b { display: block; font-size: 34px; font-weight: 700; color: #4ade80; } .c-sum div:nth-child(2) b { color: #fb7185; } .c-sum div:nth-child(3) b { color: #fbbf24; }
.c-sum span { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .6px; }
.c-card button { font: inherit; cursor: pointer; border: 0; border-radius: 999px; padding: 8px 22px; background: #fbbf24; color: #1c1203; font-weight: 650; }
.c-card button:hover { background: #fcd34d; }

/* ---- control bar ---- */
.c-bar { gap: 14px; padding-top: 14px; align-items: center; }
.c-grp { display: flex; flex-direction: column; gap: 3px; flex: none; }
.c-grp label { font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase; color: #8190a5; padding-left: 8px; }
.c-seg { display: flex; background: rgba(148, 163, 184, .12); border-radius: 999px; padding: 2px; }
.c-seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 999px; color: #cbd5e1; font-weight: 600; font-size: 12.5px; line-height: 1.15; white-space: nowrap; }
.c-seg button small { display: block; font-size: 9.5px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.c-seg button:hover { background: rgba(148, 163, 184, .16); }
.c-grp:nth-of-type(1) .c-seg button.on { background: #6366f1; color: #fff; }
.c-grp:nth-of-type(2) .c-seg button.on { background: #f59e0b; color: #1c1203; }
.c-slider { min-width: 160px; }
.c-ticks .hud-tick.major { height: 16px; top: 3px; width: 4px; }
.c-ticks .hud-tick.t-DEPLOY-PROD { height: 20px; top: 0; }
.c-mark { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: #fde68a; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.c-mark.fail { color: #fca5a5; }
.c-clock { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 150px; }
.c-clock > div { text-align: right; }
.c-sun { width: 22px; height: 22px; color: #fbbf24; flex: none; } .c-sun svg { width: 22px; height: 22px; display: block; } .c-sun.night { color: #a5b4fc; }
.c-clock small .gap { color: #fbbf24; }
.c-live { flex: none; display: inline-flex; }

/* ---- narrower screens ---- */
@media (max-width: 1180px) {
  .c-count { min-width: 96px; padding: 6px 11px; } .c-count b { font-size: 22px; }
  .c-cap-text { font-size: 19px; }
  .c-clock { min-width: 120px; }
}
@media (max-width: 960px) {
  .c-counters { top: 72px; left: 14px; right: 14px; max-width: none; } .c-count { flex: 1; min-width: 0; padding: 5px 9px; } .c-count b { font-size: 18px; } .c-count span { font-size: 9.5px; letter-spacing: .3px; }
  .c-banner { top: 138px; padding: 8px 20px 10px; } .c-banner b { font-size: 20px; }
  .c-bar { flex-wrap: wrap; gap: 8px 10px; padding: 12px 10px 9px; left: 8px; right: 8px; bottom: 8px; }
  .c-slider { order: 9; flex-basis: 100%; height: 26px; } .c-slider input::-webkit-slider-thumb { margin-top: 6px; } .c-slider .hud-track { top: 11px; } .c-ticks .hud-tick { top: 3px; height: 10px; }
  .c-clock { margin-left: auto; min-width: 0; }
  .c-caption { bottom: 150px; max-width: 94%; } .c-cap-text { font-size: 16px; }
  .c-shot { display: none; }
  .c-card { top: 40%; padding: 16px 24px 18px; } .c-card > b { font-size: 24px; }
}
@media (max-width: 600px) {
  .c-grp label { display: none; } .c-seg button { padding: 4px 8px; font-size: 11.5px; } .c-seg button small { display: none; }
  .c-live { display: none; } .c-count span { font-size: 8.5px; } .c-caption { padding: 8px 14px 8px 12px; } .c-chip { display: none; }
  .c-clock > div small { display: none; }
}

/* title bar: logo only, a little larger than the shared default */
.c-brand { padding: 7px 9px; }
.c-brand .hud-logo { height: 42px; padding: 6px 14px; }
.c-brand .hud-logo img { height: 30px; }
@media (max-width: 600px) { .c-brand .hud-logo { height: 34px; padding: 4px 10px; } .c-brand .hud-logo img { height: 24px; } }