/* 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).
 *
 * TASARIM DILI (2026-11-05, kullanici: "KJ yapin cok estetik degil... StreamYard
 * tarzi olmus; bir animasyonla surekli bir sekil sukul olsa; yorumlarin arkasinda
 * box shadow efekti ya da 2026 trendi ne ise"):
 *   - Katmanli yumusak golgeler + marka renginde hafif isilti (renkli golge),
 *   - yuvarlak geometri, siki tipografi (Inter degisken),
 *   - "canli" vurgular: nabiz noktasi (KJ, kayan yazi, anket), ses cubuklari
 *     (isim etiketi, stage.html), donen halka (yorum avatari), parlama gecisi
 *     (alt bant basligi),
 *   - yaylanan giris (stage.html: --g-spring), hizli cikis.
 * BASARIM (egress yazilim cizimi yapiyor, 1080p30): yalnizca transform ve
 * opacity animasyonu; backdrop-filter / filter:blur YOK (cam gorunumu yari
 * saydam degrade + ic isik cizgisiyle). Golgeler bir kez cizilir; surekli
 * animasyonlar kucuk katmanlarda. Azaltilmis harekette hepsi durur.
 * Tema farklari: block = marka bloklari + beyaz KJ (varsayilan, herkeste),
 * bubble = hap/balon, classic = koyu plakalar + marka seridi, minimal = plakasiz.
 * ========================================================================== */

/* 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);
    --g-ease-in: cubic-bezier(.5, 0, .75, 0);
    /* Yay: hafif (yuzde 8) asma, sonra yerine oturur. linear() desteklemeyen
       Chrome'da ayni hissi veren cubic-bezier. */
    --g-spring: cubic-bezier(.34, 1.3, .64, 1);
    --g-spring-dur: .7s;
    /* Yazi */
    --g-ink: #ffffff;
    --g-ink-2: #e8e8f2;
    --g-ink-mute: rgba(255, 255, 255, .72);
    --g-ink-dark: #0b0e16;
    --g-ink-dark-2: #3a4152;
    /* 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-glass-top: rgba(28, 32, 47, .93);
    --g-glass-bot: rgba(8, 10, 17, .95);
    --g-deep: #05070d;
    --g-deep-fade: rgba(5, 7, 13, .2);
    --g-paper: #ffffff;
    --g-paper-2: #eef1f7;
    --g-chip: rgba(255, 255, 255, .12);
    --g-chip-2: rgba(255, 255, 255, .14);
    --g-track: rgba(255, 255, 255, .10);
    --g-hl: rgba(255, 255, 255, .14);         /* ic ust isik cizgisi */
    --g-hl-brand: rgba(255, 255, 255, .30);
    --g-edge: rgba(255, 255, 255, .07);       /* sac teli kenar */
    --g-shade: rgba(0, 0, 0, .18);
    --g-shadow: rgba(0, 0, 0, .35);
    --g-shadow-2: rgba(0, 0, 0, .45);
    --g-shadow-3: rgba(0, 0, 0, .55);
    --g-text-shadow: rgba(0, 0, 0, .85);
    --g-sheen: rgba(255, 255, 255, .34);
    /* Kucuk kisi kutusu cercevesi (stage.html .slot.is-framed; PiP, alt serit
       kutulari): yuvarlak kose, ince acik kenar, katmanli yumusak golge. */
    --g-tile-radius: calc(16 * var(--u));
    --g-tile-edge: rgba(255, 255, 255, .3);
    --g-tile-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .28),
                     0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, .55);
    /* Durum renkleri */
    --g-win: #22c55e;
    --g-win-2: #16a34a;
    --g-amber: #f59e0b;
    --g-on-amber: #1a1204;
    --g-yt: #ff0033;
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --g-spring: linear(0, 0.037 2.5%, 0.129 5%, 0.253 7.5%, 0.392 10%, 0.531 12.5%, 0.661 15%, 0.775 17.5%,
            0.871 20%, 0.947 22.5%, 1.003 25%, 1.043 27.5%, 1.068 30%, 1.084 35%, 1.072 40%, 1.05 45%,
            1.028 50%, 1.01 55%, 0.999 60%, 0.993 70%, 0.996 80%, 1);
    }
}

/* Marka rengine bagli belirtecler BILESENIN KENDISINDE: --brand sahnede
   .stage'e, kartlarda listeye yaziliyor; :root'ta tanimlansalar varsayilan
   moru kullanirlardi. */
.lt, .kj, .tk, .cm, .pcard, .slot__name {
    --g-brand-hi: color-mix(in oklab, var(--brand) 76%, #ffffff);
    --g-brand-lo: color-mix(in oklab, var(--brand) 70%, #000000);
    --g-brand-grad: linear-gradient(135deg, var(--g-brand-hi) 0%, var(--brand) 44%, var(--g-brand-lo) 100%);
    --g-brand-glow: color-mix(in oklab, var(--brand) 55%, transparent);
    --g-glass-grad: linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, var(--g-glass-top)) 0%, var(--g-glass-bot) 100%);
    --g-paper-grad: linear-gradient(180deg, var(--g-paper) 0%, var(--g-paper-2) 100%);
}

/* ---- Canli vurgular (yalnizca transform/opacity) ------------------------- */
@keyframes g-pulse {
    0% { transform: scale(1); opacity: .75; }
    70%, 100% { transform: scale(2.7); opacity: 0; }
}
@keyframes g-sheen {
    0% { transform: translateX(-140%) skewX(-18deg); }
    20%, 100% { transform: translateX(380%) skewX(-18deg); }
}
@keyframes g-spin { to { transform: rotate(1turn); } }
@keyframes g-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- ALT BANT (isim-unvan superi) ---------------------------------------
   Baslik marka blogunda (degrade + ic isik + parlama gecisi), unvan koyu cam
   plakada; ikisi ust uste, aralarinda ince bosluk. */
.lt {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));
    font-family: var(--g-font); max-width: calc(1150 * var(--u));
}
.lt-t {
    position: relative; overflow: hidden;
    font-size: calc(44 * var(--u)); font-weight: 750; line-height: 1.12; letter-spacing: -.012em;
    padding: calc(16 * var(--u)) calc(32 * var(--u)) calc(18 * var(--u));
    color: var(--g-ink); background: var(--g-brand-grad);
    border-radius: calc(14 * var(--u));
    text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) var(--g-shade);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand), inset 0 calc(-1 * var(--u)) 0 var(--g-shade),
                0 calc(2 * var(--u)) calc(4 * var(--u)) var(--g-shade),
                0 calc(14 * var(--u)) calc(32 * var(--u)) calc(-6 * var(--u)) var(--g-shadow-2),
                0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) var(--g-brand-glow);
    white-space: nowrap; max-width: 100%; text-overflow: ellipsis;
}
/* Parlama gecisi: 8 sn'de bir baslik plakasinin ustunden ince bir isik gecer. */
.lt-t::after {
    content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 26%;
    background: linear-gradient(90deg, transparent, var(--g-sheen), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: g-sheen 8s cubic-bezier(.45, 0, .2, 1) 1.4s infinite;
    pointer-events: none;
}
.lt-s {
    font-size: calc(27 * var(--u)); font-weight: 550; line-height: 1.2;
    padding: calc(11 * var(--u)) calc(28 * var(--u)) calc(12 * var(--u));
    color: var(--g-ink-2); background: var(--g-glass-grad);
    border-radius: calc(12 * var(--u));
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl), inset 0 0 0 calc(1 * var(--u)) var(--g-edge),
                0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-6 * var(--u)) var(--g-shadow-2);
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lt-s:empty { display: none; }
[data-theme="classic"] .lt-t, [data-theme="classic"] .lt-s {
    border-radius: calc(6 * var(--u));
    padding-left: calc(40 * var(--u));
    background: var(--g-glass-grad);
    box-shadow: inset calc(8 * var(--u)) 0 0 var(--brand), inset 0 calc(1 * var(--u)) 0 var(--g-hl),
                0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-6 * var(--u)) var(--g-shadow-2);
    text-shadow: none;
}
[data-theme="classic"] .lt-t::after { display: none; }
[data-theme="bubble"] .lt-t { border-radius: 999px; padding-left: calc(38 * var(--u)); padding-right: calc(38 * var(--u)); }
[data-theme="bubble"] .lt-s { border-radius: 999px; margin-left: calc(18 * var(--u)); padding-left: calc(26 * var(--u)); padding-right: calc(26 * var(--u)); }
[data-theme="minimal"] .lt-t {
    background: linear-gradient(var(--brand), var(--brand)) left bottom / 100% calc(5 * var(--u)) no-repeat;
    border-radius: 0; padding: 0 0 calc(12 * var(--u)); box-shadow: none; overflow: visible;
    text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) var(--g-text-shadow);
}
[data-theme="minimal"] .lt-t::after { display: none; }
[data-theme="minimal"] .lt-s {
    background: none; padding-left: 0; box-shadow: none; border-radius: 0;
    text-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) var(--g-text-shadow);
}

/* ---- KJ (solda etiket, yaninda tek satir konu) ---------------------------
   Etiket marka blogu + nabiz noktasi; konu beyaz plakada (block). Tumu tek
   yuvarlak govde, altinda katmanli golge. */
.kj {
    display: inline-flex; align-items: stretch; height: calc(64 * var(--u));
    font-family: var(--g-font); max-width: 100%;
    border-radius: calc(14 * var(--u));
    box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) var(--g-shade),
                0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-8 * var(--u)) var(--g-shadow-2);
}
/* Nabiz noktasi zeminde cizili (radial), genisleyip sonen halka ::after,
   9 sn'de bir etiketin ustunden gecen parlama ::before. --kj-dot: noktanin
   merkezi (tema kaydirabilir). */
.kj-l {
    --kj-dot: calc(29 * var(--u));
    position: relative; overflow: hidden;
    display: flex; align-items: center; flex: none;
    padding: 0 calc(26 * var(--u)) 0 calc(var(--kj-dot) + calc(21 * var(--u)));
    background:
        radial-gradient(circle at var(--kj-dot) 50%, var(--g-ink) 0 calc(6 * var(--u)), transparent calc(6.8 * var(--u))),
        radial-gradient(circle at var(--kj-dot) 50%, rgba(255, 255, 255, .34) 0, transparent calc(15 * var(--u))),
        var(--g-brand-grad);
    color: var(--g-ink);
    border-radius: calc(14 * var(--u)) 0 0 calc(14 * var(--u));
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand);
    font-weight: 800; font-size: calc(23 * var(--u)); letter-spacing: .08em; white-space: nowrap;
    text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) var(--g-shade);
}
.kj-l::before {
    content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
    background: linear-gradient(90deg, transparent, var(--g-sheen), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: g-sheen 9s cubic-bezier(.45, 0, .2, 1) 2.4s infinite;
    pointer-events: none;
}
.kj-l::after {
    content: ''; position: absolute; left: calc(var(--kj-dot) - calc(6 * var(--u))); top: 50%;
    width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u));
    border-radius: 50%; background: var(--g-ink);
    animation: g-pulse 2.2s cubic-bezier(.2, .6, .35, 1) infinite;
    pointer-events: none;
}
.kj-l:empty { display: none; }
.kj-x {
    position: relative; display: flex; align-items: center; min-width: 0;
    padding: 0 calc(30 * var(--u)) 0 calc(26 * var(--u));
    background: var(--g-paper-grad); color: var(--g-ink-dark);
    border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
    box-shadow: inset 0 calc(-3 * var(--u)) 0 color-mix(in oklab, var(--brand) 85%, #ffffff);
    font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: -.006em; white-space: nowrap;
}
.kj-l:empty + .kj-x { border-radius: calc(14 * var(--u)); }
.kj-x span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="classic"] .kj { border-radius: calc(6 * var(--u)); }
[data-theme="classic"] .kj-l { border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u)); }
[data-theme="classic"] .kj-x {
    background: var(--g-glass-grad); color: var(--g-ink); border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0;
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl), inset 0 0 0 calc(1 * var(--u)) var(--g-edge);
}
[data-theme="bubble"] .kj { border-radius: 999px; }
[data-theme="bubble"] .kj-l { --kj-dot: calc(34 * var(--u)); border-radius: 999px 0 0 999px; }
[data-theme="bubble"] .kj-x { border-radius: 0 999px 999px 0; padding-right: calc(36 * var(--u)); box-shadow: none; }
[data-theme="bubble"] .kj-l:empty + .kj-x { border-radius: 999px; }
[data-theme="minimal"] .kj { box-shadow: none; border-radius: calc(10 * var(--u)); }
[data-theme="minimal"] .kj-l { border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u)); }
[data-theme="minimal"] .kj-x {
    background: var(--g-plate-soft); color: var(--g-ink); border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
    box-shadow: none; text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) var(--g-text-shadow);
}

/* ---- KAYAN YAZI -----------------------------------------------------------
   Solda sabit etiket cipi (nabiz noktali), metin onun altindan gecmez
   (etiket ayri katman). Uc stil: bar (dolu serit) | glass (koyu cam) |
   line (ince cizgi). Glass eskiden backdrop-filter ile buzlanıyordu: yazilim
   cizimde her karede 1920x72 bulaniklastirma demekti; artik yari saydam
   degrade (gorunum ayni, maliyet yok).                                       */
.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; gap: calc(12 * var(--u)); position: relative; z-index: 2;
    padding: 0 calc(30 * var(--u)) 0 calc(26 * var(--u));
    background: var(--g-paper-grad); color: var(--g-ink-dark);
    border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
    box-shadow: calc(10 * var(--u)) 0 calc(26 * var(--u)) calc(-8 * var(--u)) var(--g-shadow-2);
    font-weight: 800; font-size: calc(23 * var(--u)); letter-spacing: .1em; white-space: nowrap;
}
.tk-l::before {
    content: ''; flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
    background: var(--brand);
}
.tk-l::after {
    content: ''; position: absolute; left: calc(26 * var(--u)); top: 50%;
    width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5.5 * var(--u));
    border-radius: 50%; background: var(--brand);
    animation: g-pulse 2.2s cubic-bezier(.2, .6, .35, 1) .6s infinite;
    pointer-events: none;
}
.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); letter-spacing: -.003em;
    /* 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(90deg, var(--g-brand-lo) 0%, var(--brand) 34%, color-mix(in oklab, var(--brand) 58%, var(--g-deep)) 100%);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand);
}
.tk[data-style="bar"] .tk-tr span { text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) var(--g-shade); }
.tk[data-style="glass"] {
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, rgba(18, 22, 34, .86)) 0%, rgba(6, 8, 14, .92) 100%);
    box-shadow: inset 0 calc(3 * var(--u)) 0 var(--brand), inset 0 calc(4 * var(--u)) 0 var(--g-hl);
}
.tk[data-style="glass"] .tk-l { background: var(--g-brand-grad); color: var(--g-ink); box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand), calc(10 * var(--u)) 0 calc(26 * var(--u)) calc(-8 * var(--u)) var(--g-shadow-2); }
.tk[data-style="glass"] .tk-l::before, .tk[data-style="glass"] .tk-l::after { background: var(--g-ink); }
.tk[data-style="line"] {
    background: linear-gradient(to top, var(--g-plate), var(--g-deep-fade));
    box-shadow: inset 0 calc(-5 * var(--u)) 0 var(--brand);
}
.tk[data-style="line"] .tk-l { background: none; color: var(--g-ink); box-shadow: none; }
[data-theme="classic"] .tk-l { border-radius: 0; }
[data-theme="bubble"] .tk-l { border-radius: 0 999px 999px 0; padding-right: calc(36 * var(--u)); }

/* ---- YORUM KARTI -----------------------------------------------------------
   Koyu cam kart (marka tonlu) + altinda marka renginde isilti; avatarin
   etrafinda yavasca donen marka halkasi; adin yaninda rozet ve platform
   isareti (YouTube). Super Chat'te isilti ve vurgu kehribar. */
.cm {
    position: relative; display: flex; gap: calc(24 * var(--u)); align-items: flex-start;
    padding: calc(22 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u));
    max-width: calc(1120 * var(--u)); font-family: var(--g-font);
    border-radius: calc(24 * var(--u));
    background: var(--g-glass-grad);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl), inset 0 0 0 calc(1 * var(--u)) var(--g-edge),
                0 calc(2 * var(--u)) calc(6 * var(--u)) var(--g-shadow),
                0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-10 * var(--u)) var(--g-shadow-3),
                0 calc(30 * var(--u)) calc(64 * var(--u)) calc(-24 * var(--u)) var(--g-brand-glow);
}
.cm.is-sc { --g-brand-glow: rgba(245, 158, 11, .5); }
/* Ust kenarda ince marka isik cizgisi (kartin "canli" kenari). */
.cm::before {
    content: ''; position: absolute; top: 0; left: calc(28 * var(--u)); right: calc(28 * var(--u)); height: calc(2 * var(--u));
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--g-brand-hi) 30%, var(--brand) 70%, transparent);
    opacity: .9; pointer-events: none;
}
.cm.is-sc::before { background: linear-gradient(90deg, transparent, #fcd34d 30%, var(--g-amber) 70%, transparent); }
.cm-av {
    position: relative; flex: none;
    width: calc(84 * var(--u)); height: calc(84 * var(--u));
}
/* Donen halka: konik degrade daire avatarin arkasinda doner (8 sn tur). */
.cm-av::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brand), var(--g-brand-hi) 22%, var(--g-ink) 30%, var(--brand) 46%, var(--g-brand-lo) 72%, var(--brand));
    animation: g-spin 8s linear infinite;
}
.cm.is-sc .cm-av::before { background: conic-gradient(from 0deg, var(--g-amber), #fde68a 25%, var(--g-ink) 32%, var(--g-amber) 50%, #b45309 75%, var(--g-amber)); }
.cm-ph {
    position: absolute; inset: calc(5 * var(--u)); border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    font-weight: 700; font-size: calc(28 * var(--u)); color: var(--g-ink); letter-spacing: .02em;
    box-shadow: 0 0 0 calc(3 * var(--u)) var(--g-glass-top);
}
.cm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-b0 { min-width: 0; padding-top: calc(4 * var(--u)); }
.cm-n {
    display: flex; gap: calc(12 * var(--u)); align-items: center; min-width: 0;
    font-weight: 700; font-size: calc(26 * var(--u)); letter-spacing: -.004em;
    color: color-mix(in oklab, var(--brand) 38%, var(--g-ink));
}
.cm-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-p { flex: none; display: block; width: calc(30 * var(--u)); height: calc(21 * var(--u)); }
.cm-p svg { display: block; width: 100%; height: 100%; }
.cm-b {
    flex: none;
    font-weight: 800; font-size: calc(17 * var(--u)); letter-spacing: .05em; text-transform: uppercase;
    padding: calc(4 * var(--u)) calc(11 * var(--u)); border-radius: 999px;
    background: var(--g-chip-2); color: var(--g-ink);
    box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--g-edge);
}
.cm-b.sc { background: linear-gradient(180deg, #fbbf24, var(--g-amber)); color: var(--g-on-amber); text-transform: none; letter-spacing: .01em; box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) calc(-4 * var(--u)) rgba(245, 158, 11, .7); }
.cm-b:empty { display: none; }
.cm-t {
    margin-top: calc(8 * var(--u));
    font-weight: 500; font-size: calc(34 * var(--u)); line-height: 1.3; color: var(--g-ink); letter-spacing: -.008em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}
[data-theme="block"] .cm { border-radius: calc(22 * var(--u)); }
[data-theme="bubble"] .cm { border-radius: calc(44 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u)) calc(12 * var(--u)); padding-left: calc(26 * var(--u)); }
[data-theme="bubble"] .cm::before { left: calc(44 * var(--u)); right: calc(44 * var(--u)); }
[data-theme="classic"] .cm {
    border-radius: calc(8 * var(--u)); padding-left: calc(34 * var(--u));
    box-shadow: inset calc(8 * var(--u)) 0 0 var(--brand), inset 0 calc(1 * var(--u)) 0 var(--g-hl),
                0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-10 * var(--u)) var(--g-shadow-3);
}
[data-theme="classic"] .cm::before { display: none; }
[data-theme="minimal"] .cm {
    background: var(--g-plate-soft); border-radius: calc(20 * var(--u));
    box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-12 * var(--u)) var(--g-shadow-2);
}
[data-theme="minimal"] .cm::before { display: none; }
[data-theme="minimal"] .cm-ph { box-shadow: none; }
[data-theme="minimal"] .cm-t { text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) var(--g-text-shadow); }

/* ---- ANKET / QUIZ KARTI ------------------------------------------------------
   Kompakt kart: sahnede sag altta, 1920'nin ~%28'i (540 birim), yukseklik
   icerige gore. Eskiden 620 birimdi ve kameralar %60'a kuculuyordu; kayitta
   kart kamerayla ayni boyda gorunuyordu (kullanici, 2026-11-05). Uzun soru
   en fazla 5 satir (form 140 karakter; sunucu 200'e kadar kabul ediyor).
   Yorum karti ile ayni koyu cam + marka isiltisi; acik ankette etiketin
   nabzi atar. backdrop-filter kaldirildi (yazilim cizimde her kare bulaniklastirma). */
.pcard {
    position: relative; width: calc(540 * var(--u));
    padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u));
    border-radius: calc(22 * var(--u));
    background: var(--g-glass-grad);
    font-family: var(--g-font); color: var(--g-ink);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl), inset 0 0 0 calc(1 * var(--u)) var(--g-edge),
                0 calc(2 * var(--u)) calc(6 * var(--u)) var(--g-shadow),
                0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-10 * var(--u)) var(--g-shadow-3),
                0 calc(30 * var(--u)) calc(64 * var(--u)) calc(-24 * var(--u)) var(--g-brand-glow);
}
[data-theme="block"] .pcard { border-radius: calc(18 * var(--u)); }
[data-theme="bubble"] .pcard { border-radius: calc(32 * var(--u)); }
[data-theme="classic"] .pcard {
    border-radius: calc(8 * var(--u));
    box-shadow: inset 0 calc(5 * var(--u)) 0 var(--brand), inset 0 calc(6 * var(--u)) 0 var(--g-hl),
                0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-10 * var(--u)) var(--g-shadow-3);
}
[data-theme="minimal"] .pcard { background: var(--g-plate-soft); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-12 * var(--u)) var(--g-shadow-2); }
.pc-tag {
    position: relative; display: inline-flex; align-items: center; gap: calc(9 * var(--u));
    padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
    background: var(--g-brand-grad); color: var(--g-ink);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand), 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) var(--g-brand-glow);
    font-weight: 800; font-size: calc(16 * var(--u)); letter-spacing: .14em;
}
.pc-tag::before {
    content: ''; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%;
    background: var(--g-ink);
}
/* Oylama acikken nokta nabiz atar. */
.pcard.is-open .pc-tag::after {
    content: ''; position: absolute; left: calc(12 * var(--u)); top: 50%;
    width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(-4 * var(--u));
    border-radius: 50%; background: var(--g-ink);
    animation: g-pulse 2.2s cubic-bezier(.2, .6, .35, 1) .3s infinite;
}
.pc-q {
    margin: calc(14 * var(--u)) 0 calc(18 * var(--u));
    font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1.24; letter-spacing: -.01em; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard.has-timer .pc-q { padding-right: calc(66 * var(--u)); }
.pc-o { margin-bottom: calc(13 * var(--u)); transition: opacity .4s var(--g-ease); }
.pc-row {
    display: flex; align-items: center; gap: calc(10 * var(--u));
    margin-bottom: calc(8 * var(--u));
    font-weight: 600; font-size: calc(22 * 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(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(9 * var(--u));
    background: var(--g-chip); font-weight: 800; font-size: calc(18 * var(--u));
    box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--g-edge);
}
.pc-row .pct { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; }
.pc-bar {
    height: calc(10 * var(--u)); border-radius: 999px; background: var(--g-track); overflow: hidden;
    box-shadow: inset 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .25);
}
.pc-bar i {
    display: block; width: 0; height: 100%; border-radius: inherit; background: var(--g-brand-grad);
    box-shadow: inset 0 calc(1 * var(--u)) 0 var(--g-hl-brand);
    transition: width .7s var(--g-ease);
}
.pc-o.win .pc-bar i { background: linear-gradient(90deg, var(--g-win-2), var(--g-win)); }
.pc-o.win .lt2 { background: var(--g-win); box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) calc(-4 * var(--u)) rgba(34, 197, 94, .8); }
.pc-o.dim { opacity: .35; }
.pc-f {
    margin-top: calc(16 * var(--u));
    font-weight: 500; font-size: calc(18 * var(--u)); color: var(--g-ink-mute);
    font-variant-numeric: tabular-nums;
}
.pc-timer {
    position: absolute; right: calc(24 * var(--u)); top: calc(20 * var(--u));
    width: calc(54 * var(--u)); height: calc(54 * 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(20 * var(--u)); font-variant-numeric: tabular-nums;
}

/* Azaltilmis hareket: surekli vurgular durur (kayan yazi icerik oldugu icin akar). */
@media (prefers-reduced-motion: reduce) {
    .lt-t::after, .kj-l::before, .kj-l::after, .tk-l::after, .pcard.is-open .pc-tag::after, .cm-av::before { animation: none; }
    .lt-t::after, .kj-l::before, .kj-l::after, .tk-l::after, .pcard.is-open .pc-tag::after { opacity: 0; }
}