/* Reji Live — SAHNE GRAFIKLERI (izleyicinin gordugu bilesenler)
 * ============================================================================
 * Alt bant, KJ, kayan yazi, yorum karti ve anket/quiz karti burada TEK kez
 * tanimli. Iki yerde ayni sinifla ciziliyor:
 *
 *   1. Sahne motoru (live/stage.html) -- yayin ve kayit, 1920x1080 uzayi
 *   2. Studyo panellerindeki onizleme kartlari (pro.html) -- ayni bilesen
 *      buyutulup kucultulerek
 *
 * Neden tek dosya: "kartta gordugun = yayinda cikan" (SPEC 2.7). Iki ayri
 * kopya zamanla ayrisir; panelde guzel duran bant yayinda baska gorunurdu.
 *
 * Olcu birimi --u: 1920 genisligin 1/1920'si. Sahnede --u = 1px; bir kartta
 * `container-type:inline-size; --u: calc(100cqw / 700)` gibi verilir.
 * Tema, bilesenin atasindaki [data-theme] ile secilir (block|bubble|classic|minimal).
 * Renkler asagidaki tokenlardan; --brand markanin rengi (live_brands.brand_color).
 * ========================================================================== */

/* Inter, sahne yazi tipi: egress'in Chrome'unda sistem fontu yok, Google
   Fonts'a da gitmiyoruz (yayin makinesi dis kaynaga bagli kalmasin).
   Degisken font: tek dosya 100-900 arasi tum kalinliklar. Turkce ğ, ş, İ
   latin-ext'te; ı latin'de. Lisans: /fonts/Inter-OFL.txt (SIL OFL 1.1). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: block;
    font-weight: 100 900;
    src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: block;
    font-weight: 100 900;
    src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --brand: #7c6cf0;
    --u: 1px;
    --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --g-ease: cubic-bezier(.16, 1, .3, 1);
    /* Yazi */
    --g-ink: #ffffff;
    --g-ink-2: #e8e8f2;
    --g-ink-mute: rgba(255, 255, 255, .72);
    --g-ink-dark: #0b0e16;
    /* Zeminler (plakalar) */
    --g-plate: rgba(8, 10, 16, .92);
    --g-plate-2: rgba(8, 10, 16, .78);
    --g-plate-glass: rgba(8, 10, 16, .88);
    --g-plate-soft: rgba(8, 10, 16, .5);
    --g-glass: rgba(10, 13, 22, .7);
    --g-deep: #05070d;
    --g-deep-fade: rgba(5, 7, 13, .2);
    --g-paper: #ffffff;
    --g-chip: rgba(255, 255, 255, .12);
    --g-chip-2: rgba(255, 255, 255, .14);
    --g-track: rgba(255, 255, 255, .10);
    --g-shadow: rgba(0, 0, 0, .35);
    --g-shadow-2: rgba(0, 0, 0, .45);
    --g-text-shadow: rgba(0, 0, 0, .85);
    /* Durum renkleri */
    --g-win: #22c55e;
    --g-amber: #f59e0b;
    --g-on-amber: #1a1204;
}

/* ---- ALT BANT (isim-unvan superi) --------------------------------------- */
.lt {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    font-family: var(--g-font); max-width: calc(1150 * var(--u));
}
.lt-t {
    font-size: calc(44 * var(--u)); font-weight: 700; line-height: 1.12;
    padding: calc(18 * var(--u)) calc(32 * var(--u));
    color: var(--g-ink); background: var(--brand);
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lt-s {
    font-size: calc(27 * var(--u)); font-weight: 500; line-height: 1.2;
    padding: calc(12 * var(--u)) calc(32 * var(--u));
    color: var(--g-ink-2); background: var(--g-plate-glass);
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lt-s:empty { display: none; }
[data-theme="classic"] .lt-t { background: var(--g-plate); border-left: calc(8 * var(--u)) solid var(--brand); }
[data-theme="classic"] .lt-s { background: var(--g-plate-2); border-left: calc(8 * var(--u)) solid var(--brand); }
[data-theme="bubble"] .lt-t { border-radius: calc(36 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)) 0; }
[data-theme="bubble"] .lt-s { border-radius: 0 0 calc(28 * var(--u)) calc(28 * var(--u)); }
[data-theme="minimal"] .lt-t {
    background: none; padding-left: 0; text-shadow: 0 2px 14px var(--g-text-shadow);
    border-bottom: calc(5 * var(--u)) solid var(--brand); padding-bottom: calc(10 * var(--u));
}
[data-theme="minimal"] .lt-s { background: none; padding-left: 0; text-shadow: 0 2px 12px var(--g-text-shadow); }

/* ---- KJ (solda etiket, yaninda tek satir konu) --------------------------- */
.kj {
    display: inline-flex; align-items: stretch; height: calc(64 * var(--u));
    font-family: var(--g-font); max-width: 100%;
    box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) var(--g-shadow);
}
.kj-l {
    display: flex; align-items: center; flex: none;
    padding: 0 calc(24 * var(--u));
    background: var(--brand); color: var(--g-ink);
    font-weight: 800; font-size: calc(24 * var(--u)); letter-spacing: .06em; white-space: nowrap;
}
.kj-l:empty { display: none; }
.kj-x {
    display: flex; align-items: center; min-width: 0;
    padding: 0 calc(28 * var(--u));
    background: var(--g-paper); color: var(--g-ink-dark);
    font-weight: 700; font-size: calc(30 * var(--u)); white-space: nowrap;
}
.kj-x span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="classic"] .kj-x { background: var(--g-plate); color: var(--g-ink); }
[data-theme="bubble"] .kj { border-radius: 999px; overflow: hidden; }
[data-theme="minimal"] .kj { box-shadow: none; }
[data-theme="minimal"] .kj-x { background: var(--g-plate-soft); color: var(--g-ink); }

/* ---- KAYAN YAZI -----------------------------------------------------------
   Solda sabit etiket cipi, metin onun altindan gecmez (etiket ayri katman).
   Uc stil: bar (dolu serit) | glass (buzlu cam) | line (ince cizgi).        */
.tk {
    position: relative; display: flex; align-items: stretch; overflow: hidden;
    height: calc(72 * var(--u)); font-family: var(--g-font);
}
.tk-l {
    flex: none; display: flex; align-items: center; position: relative; z-index: 2;
    padding: 0 calc(28 * var(--u));
    background: var(--g-paper); color: var(--g-ink-dark);
    font-weight: 800; font-size: calc(24 * var(--u)); letter-spacing: .08em; white-space: nowrap;
}
.tk-l:empty { display: none; }
.tk-v { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.tk-tr { display: flex; white-space: nowrap; will-change: transform; animation: g-tick 38s linear infinite; }
.tk-tr span {
    flex: none; white-space: nowrap;
    padding: 0 calc(70 * var(--u)) 0 calc(40 * var(--u));
    font-size: calc(29 * var(--u)); font-weight: 600; line-height: 1; color: var(--g-ink);
    /* Kisa metinde iki kopya toplami sahne genisligini gecmezse serit
       donerken ORTADA BOSLUK olusuyor; her kopyaya en az yarim sahne. */
    min-width: calc(960 * var(--u));
}
.tk[data-style="bar"] { background: linear-gradient(100deg, var(--brand), color-mix(in oklab, var(--brand) 60%, var(--g-deep))); }
.tk[data-style="glass"] {
    background: var(--g-glass); backdrop-filter: blur(14px);
    border-top: calc(3 * var(--u)) solid var(--brand);
}
.tk[data-style="glass"] .tk-l { background: var(--brand); color: var(--g-ink); }
.tk[data-style="line"] {
    background: linear-gradient(to top, var(--g-plate), var(--g-deep-fade));
    border-bottom: calc(5 * var(--u)) solid var(--brand);
}
.tk[data-style="line"] .tk-l { background: none; color: var(--brand); }
@keyframes g-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- YORUM KARTI ----------------------------------------------------------- */
.cm {
    display: flex; gap: calc(22 * var(--u)); align-items: flex-start;
    padding: calc(22 * var(--u)) calc(34 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    background: var(--g-plate); border-left: calc(8 * var(--u)) solid var(--brand);
    max-width: calc(1120 * var(--u)); font-family: var(--g-font);
    box-shadow: 0 calc(14 * var(--u)) calc(50 * var(--u)) var(--g-shadow);
}
[data-theme="bubble"] .cm { border-radius: calc(44 * var(--u)); border-left: 0; padding-left: calc(28 * var(--u)); }
[data-theme="block"] .cm { background: var(--g-paper); border-left: 0; box-shadow: inset 0 calc(-8 * var(--u)) 0 var(--brand); }
[data-theme="block"] .cm-t { color: var(--g-ink-dark); }
[data-theme="block"] .cm-n { color: var(--brand); }
.cm-av {
    position: relative; overflow: hidden; flex: none;
    width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: calc(30 * var(--u)); color: var(--g-ink);
}
.cm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-b0 { min-width: 0; }
.cm-n {
    display: flex; gap: calc(12 * var(--u)); align-items: center;
    font-weight: 700; font-size: calc(27 * var(--u));
    color: color-mix(in oklab, var(--brand) 45%, var(--g-ink));
}
.cm-b {
    font-weight: 800; font-size: calc(18 * var(--u)); letter-spacing: .04em;
    padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u));
    background: var(--g-chip-2); color: var(--g-ink);
}
.cm-b.sc { background: var(--g-amber); color: var(--g-on-amber); }
.cm-b:empty { display: none; }
.cm-t {
    margin-top: calc(6 * var(--u));
    font-weight: 500; font-size: calc(34 * var(--u)); line-height: 1.3; color: var(--g-ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}

/* ---- ANKET / QUIZ KARTI ------------------------------------------------------ */
.pcard {
    position: relative; width: calc(620 * var(--u));
    padding: calc(34 * var(--u)); border-radius: calc(22 * var(--u));
    background: var(--g-plate-glass); backdrop-filter: blur(12px);
    font-family: var(--g-font); color: var(--g-ink);
    box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) var(--g-shadow-2);
}
[data-theme="block"] .pcard { border-radius: 0; border-top: calc(8 * var(--u)) solid var(--brand); }
.pc-tag {
    display: inline-flex; align-items: center;
    padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u));
    background: var(--brand); color: var(--g-ink);
    font-weight: 800; font-size: calc(19 * var(--u)); letter-spacing: .14em;
}
.pc-q {
    margin: calc(20 * var(--u)) 0 calc(26 * var(--u));
    font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1.25; overflow-wrap: anywhere;
}
.pcard.has-timer .pc-q { padding-right: calc(80 * var(--u)); }
.pc-o { margin-bottom: calc(18 * var(--u)); transition: opacity .4s var(--g-ease); }
.pc-row {
    display: flex; align-items: center; gap: calc(12 * var(--u));
    margin-bottom: calc(9 * var(--u));
    font-weight: 600; font-size: calc(26 * var(--u));
}
.pc-row .pc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row .lt2 {
    flex: none; display: grid; place-items: center;
    width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(8 * var(--u));
    background: var(--g-chip); font-weight: 800; font-size: calc(22 * var(--u));
}
.pc-row .pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-bar { height: calc(14 * var(--u)); border-radius: 999px; background: var(--g-track); overflow: hidden; }
.pc-bar i {
    display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand);
    transition: width .7s var(--g-ease);
}
.pc-o.win .pc-bar i, .pc-o.win .lt2 { background: var(--g-win); }
.pc-o.dim { opacity: .35; }
.pc-f {
    margin-top: calc(24 * var(--u));
    font-weight: 500; font-size: calc(22 * var(--u)); color: var(--g-ink-mute);
    font-variant-numeric: tabular-nums;
}
.pc-timer {
    position: absolute; right: calc(34 * var(--u)); top: calc(30 * var(--u));
    width: calc(64 * var(--u)); height: calc(64 * var(--u));
}
.pc-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pc-timer circle { fill: none; stroke-width: 4; }
.pc-timer .pc-ring { stroke: var(--g-track); }
.pc-timer .pc-arc { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pc-timer b {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 800; font-size: calc(24 * var(--u)); font-variant-numeric: tabular-nums;
}