/* ═══════════════════════════════════════════════════════════════════
   cark.css — Çarkıfelek oyuncu sayfası (?page=cark)    11.10.2026 carkifelek
   Görünüm /root/site-yedek/cark/lunapark.src.html'den (gece lunaparkı:
   tente → ampullü tabela → büfe [çark | bilet gişesi] → LED kayan yazı →
   ödül tabelası + çevirmelerim).

   KURAL (sözleşme §5.2):
   - Bütün renk ve yazı tipleri .cark-sayfa ALTINDA değişken. :root ve body'ye
     DOKUNULMAZ. Tema değişimi = .cark-sayfa[data-tema="..."] altında
     değişkenleri ezmek (aşağıda örnek: "sade").
   - JS (assets/js/cark.js) yalnız data-cark-* niteliklerine bağlanır; buradaki
     sınıf adları serbestçe değişebilir. Canvas renkleri de buradan okunur:
     --cark-kademe-*, --cark-cerceve*, --cark-ampul-*, --cark-yazi, --cark-vurgu …
   - .cark-dekor-* = süs (aria-hidden, boş kap). Silinse de işlev bozulmaz.
   - Tailwind (tw.css) sınıfı yok; hepsi "cark-" önekli. .b3 içeren kapta
     soy 'span' seçicisi yazılmadı (.b3__yuz bozulmasın).
   - Ampul/yanıp sönme: her durum en az 170 ms (WCAG 2.3.1, saniyede ≤3 kez).
   - JS durumları data-* ile yazar (sınıf değil): fiş [data-durum=bos|bekliyor|kazanc|buyuk|notr]
     + [data-yeni], çark [data-donuyor], tabela [data-cosku], bilet [data-yirtik], LED [data-durdu],
     kök [data-deneme=zorunlu|secili]. Tema bunları serbestçe biçimler.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TEMA DEĞİŞKENLERİ: lunapark (varsayılan) ─────────────────────── */
.cark-sayfa {
    color-scheme: dark;
    /* zemin + yüzey */
    --cark-gece: #140B2E;
    --cark-gece-2: #21134A;
    --cark-gece-3: #2E1B64;
    --cark-krem: #FFF3DC;
    --cark-kirmizi: #E23B4E;
    --cark-kirmizi-derin: #8E1A2B;
    --cark-altin: #FFC93C;
    --cark-altin-derin: #B7791F;
    --cark-nane: #33D1B5;
    --cark-nane-koyu: #08332C;
    --cark-mor: #9B5DE5;
    --cark-yazi: #FFF7EA;
    --cark-soluk: #CDBDEB;
    --cark-murekkep: #2A1206;
    --cark-ahsap-1: #4A2C17;
    --cark-ahsap-2: #3A2110;
    --cark-ahsap-kenar: #241208;
    --cark-ahsap-ic: #6B4426;
    --cark-ahsap-yazi: #E8D3B4;
    --cark-hata: #FFC2C9;
    --cark-led-zemin: #0B0612;
    --cark-altin-acik: #FFF7C2;
    --cark-nadir: #FFE58A;
    --cark-ayak-1: #5A3A1A;
    --cark-ayak-2: #7A5228;
    --cark-led-kenar: #3A2A10;
    --cark-led-dugme: #160C22;
    --cark-led-yazi: #FFB938;
    --cark-led-vurgu: #FF5E6C;
    --cark-parlama: rgba(255, 236, 150, .6);

    /* yazı tipleri (Bungee'leri index.php yalnız bu sayfada yükler) */
    --cark-f-tabela: 'Bungee', Impact, 'Arial Black', sans-serif;   /* 12.10.2026: Bungee Shade (oyuk gölge) yerine dolu harf — Kadir beğenmedi */
    --cark-f-baslik: 'Bungee', Impact, 'Arial Black', sans-serif;
    --cark-f-piksel: var(--font-display, 'Monocraft', 'Montserrat', monospace);
    --cark-f-govde: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* çark canvas'ı (cark.js getComputedStyle ile okur) */
    --cark-kademe-para: #1B6CA8;
    --cark-kademe-kese: #2F9E44;
    --cark-kademe-elmas: #E23B4E;
    --cark-kademe-altin: #F08C00;
    --cark-kademe-ametist: #7B2CBF;
    --cark-kademe-buyuk: #E8A317;
    --cark-cerceve: #E23B4E;
    --cark-cerceve-2: #FFF3DC;
    --cark-kontur: #1A1200;
    --cark-ampul-acik: #FFF6C2;
    --cark-ampul-kapali: #6E500E;
    --cark-gobek: #F2C230;
    --cark-vurgu: #FFC93C;               /* işaretçi gövdesi */
    --cark-isaretci-kenar: #3A1A00;
    --cark-isaretci-parlak: #FFF0A0;
    /* arka plan sahnesi (süs): gök bantları üstten alta, ışık zinciri renkleri */
    --cark-sahne-gok: #0A0520 #0F0828 #150B33 #1B0E3D #221248 #2A1654 #331A5E #3B1E66;
    --cark-sahne-isik: #FF5E6C #FFC93C #33D1B5 #B57BFF;

    position: relative;
    width: 100%;
    overflow: hidden;
    overflow: clip;
    background: var(--cark-gece);
    color: var(--cark-yazi);
    font-family: var(--cark-f-govde);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: normal;
}
.cark-sayfa *, .cark-sayfa *::before, .cark-sayfa *::after { box-sizing: border-box; }
.cark-sayfa h1, .cark-sayfa h2, .cark-sayfa h3, .cark-sayfa p { margin: 0; letter-spacing: normal; }
.cark-sayfa p { color: inherit; }
.cark-sayfa ul { margin: 0; padding: 0; list-style: none; }

/* ── ÖRNEK İKİNCİ TEMA: "sade" (cark.src.html'in sitenin kendi dili) ──
   data-tema="sade" yazılırsa lunapark süsleri gizlenir, renkler sitenin
   koyu zemin + tek sarısına döner. Kadir lunaparkı onaylarsa silinebilir. */
.cark-sayfa[data-tema="sade"] {
    --cark-gece: #08090C; --cark-gece-2: #12141A; --cark-gece-3: #1A1D25;
    --cark-kirmizi: #E0483F; --cark-kirmizi-derin: #8C221B; --cark-altin: #FACC15; --cark-altin-derin: #A87F06;
    --cark-nane: #93C572; --cark-yazi: #F2F3F5; --cark-soluk: #9EA3AD;
    --cark-ahsap-1: #12141A; --cark-ahsap-2: #12141A; --cark-ahsap-kenar: #1A1D25; --cark-ahsap-ic: #26262D; --cark-ahsap-yazi: #9EA3AD;
    --cark-f-tabela: var(--font-display, 'Monocraft', monospace); --cark-f-baslik: var(--font-display, 'Monocraft', monospace);
    --cark-kademe-para: #2F7D32; --cark-kademe-kese: #1F68AC; --cark-kademe-elmas: #127A70;
    --cark-kademe-altin: #B0800E; --cark-kademe-ametist: #762ABA; --cark-kademe-buyuk: #AA221E;
    --cark-cerceve: #3B2A17; --cark-cerceve-2: #5A4126; --cark-vurgu: #FACC15;
}
.cark-sayfa[data-tema="sade"] .cark-dekor-gece,
.cark-sayfa[data-tema="sade"] .cark-dekor-tente,
.cark-sayfa[data-tema="sade"] .cark-dekor-bufe-tente,
.cark-sayfa[data-tema="sade"] .cark-dekor-ampuller { display: none; }

/* ── SÜS: gece sahnesi (piksel canvas) + çadır saçağı ─────────────── */
.cark-dekor-gece { position: absolute; left: 0; right: 0; top: 0; height: 100vh; min-height: 520px; max-height: 980px; z-index: 0; pointer-events: none; }
.cark-dekor-gece canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cark-dekor-gece::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(color-mix(in srgb, var(--cark-gece) 15%, transparent), color-mix(in srgb, var(--cark-gece) 55%, transparent) 55%, var(--cark-gece)); }
.cark-dekor-tente { position: relative; z-index: 1; height: 44px;
    background: repeating-linear-gradient(90deg, var(--cark-kirmizi) 0 36px, var(--cark-krem) 36px 72px);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.cark-dekor-tente::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--cark-kirmizi-derin); box-shadow: 0 3px 0 var(--cark-altin); }
.cark-dekor-tente::after { content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 18px;
    background: radial-gradient(circle at 18px 0, var(--cark-kirmizi) 17px, transparent 17.5px) 0 0 / 72px 18px repeat-x,
                radial-gradient(circle at 54px 0, var(--cark-krem) 17px, transparent 17.5px) 0 0 / 72px 18px repeat-x;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }

.cark-ic { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 38px 16px 72px; display: grid; gap: 34px; }

/* ── ampullü tabela ───────────────────────────────────────────────── */
.cark-giris { display: grid; justify-items: center; gap: 14px; text-align: center; }
.cark-tabela { position: relative; max-width: 100%; padding: 26px clamp(22px, 5vw, 56px) 22px;
    background: linear-gradient(var(--cark-kirmizi), var(--cark-kirmizi-derin));
    border: 6px solid var(--cark-altin);
    box-shadow: 0 0 0 6px var(--cark-kirmizi-derin), 0 18px 40px rgba(0, 0, 0, .5), 0 0 60px color-mix(in srgb, var(--cark-altin) 25%, transparent);
    transition: box-shadow .3s ease; }
.cark-tabela h1 { font-family: var(--cark-f-tabela); font-weight: 400; font-size: clamp(32px, 8.4vw, 86px); line-height: 1;
    color: var(--cark-altin); letter-spacing: 1px; text-shadow: 0 0 18px color-mix(in srgb, var(--cark-altin) 45%, transparent); overflow-wrap: anywhere; }
/* 12.10.2026 carkifelek (3.): Kadir "neon ışıklar ile yapabilirsin" → NEON TABELA; (4.) "farklı renkler olsun" +
   "yazı tipi kalın olsun bir tık" → HER HARF AYRI RENK neon tüp (pembe · altın · turkuaz · yeşil · mor, sırayla),
   tüp kalınlığı Tilt Neon'un 0,09em çizgisine +0,03em kontur (font tek ağırlıklı).
   Neon koyu zeminde parlar: tabelanın içi gece moru (altın çerçeve + ampuller aynı). Ç var (ölçüldü; 10 harf 5,35em).
   Açılışta harfler soldan sağa sırayla "yanar" (her harf 2 kez titrer, ≤3/sn), sonra her biri kendi
   fazında yavaş nefes alır; azaltılmış harekette animasyon yok. h1'in adı aria-label, harf span'ları aria-hidden.
   ⚠ background-clip:text KULLANMA (negatif z'li pseudo'lar dolgunun üstüne biner — 1. sürümün hatası). */
.cark-sayfa[data-tema="lunapark"] .cark-tabela {
    background: radial-gradient(ellipse at 50% 45%, #2B0C36 0%, #19071F 58%, #0D0313 100%); }
.cark-sayfa[data-tema="lunapark"] .cark-tabela h1 { position: relative; isolation: isolate; white-space: nowrap;
    font-family: 'Tilt Neon', 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: 400; font-synthesis: none;
    font-size: clamp(28px, 10.5vw, 104px); line-height: 1.2; letter-spacing: .08em; padding-left: .08em;
    color: #FFF4FA; text-shadow: none; }
.cark-sayfa[data-tema="lunapark"] .cark-tabela h1::after { content: ""; position: absolute; inset: -20% 4%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(190, 120, 255, .22), rgba(190, 120, 255, .08) 60%, rgba(190, 120, 255, 0)); }
.cark-neon-harf { --nc: 255, 46, 140; --nk: #FFE0F0;
    display: inline-block; color: var(--nk); -webkit-text-fill-color: var(--nk); -webkit-text-stroke: .03em var(--nk);
    text-shadow: 0 0 1px #FFFFFF, 0 0 .05em rgb(var(--nc)), 0 0 .12em rgb(var(--nc)), 0 0 .26em rgb(var(--nc)),
        0 0 .5em rgba(var(--nc), .75), 0 0 .9em rgba(var(--nc), .45);
    animation: carkNeonAc 1.1s linear both, carkNeonNefes 3.2s ease-in-out 2s infinite alternate; }
/* aynı özellik (opacity): nefes, yanma bittikten SONRA başlar (gecikmeler ≥ 2 sn), yoksa yanmayı ezerdi */
.cark-neon-harf:nth-child(5n+1) { --nc: 255, 46, 140; --nk: #FFE0F0; }   /* pembe */
.cark-neon-harf:nth-child(5n+2) { --nc: 255, 184, 0;  --nk: #FFF3C4; }   /* altın */
.cark-neon-harf:nth-child(5n+3) { --nc: 0, 212, 255;  --nk: #DDFAFF; }   /* turkuaz */
.cark-neon-harf:nth-child(5n+4) { --nc: 70, 255, 60;  --nk: #E4FFE0; }   /* yeşil */
.cark-neon-harf:nth-child(5n)   { --nc: 176, 84, 255; --nk: #F1E2FF; }   /* mor */
.cark-neon-harf:nth-child(1)  { animation-delay: 0s, 2.0s; }
.cark-neon-harf:nth-child(2)  { animation-delay: .09s, 2.6s; }
.cark-neon-harf:nth-child(3)  { animation-delay: .18s, 3.3s; }
.cark-neon-harf:nth-child(4)  { animation-delay: .27s, 2.3s; }
.cark-neon-harf:nth-child(5)  { animation-delay: .36s, 3.9s; }
.cark-neon-harf:nth-child(6)  { animation-delay: .45s, 2.9s; }
.cark-neon-harf:nth-child(7)  { animation-delay: .54s, 2.1s; }
.cark-neon-harf:nth-child(8)  { animation-delay: .63s, 3.6s; }
.cark-neon-harf:nth-child(9)  { animation-delay: .72s, 2.5s; }
.cark-neon-harf:nth-child(10) { animation-delay: .81s, 3.1s; }
.cark-tabela[data-cosku] .cark-neon-harf { animation-duration: 1.1s, .6s; }
@keyframes carkNeonAc { 0% { opacity: .1; } 15% { opacity: 1; } 28% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes carkNeonNefes { from { opacity: 1; } to { opacity: .7; } }   /* 1'den başlar: yanma bitince sıçrama yok */
@media (prefers-reduced-motion: reduce) { .cark-neon-harf { animation: none; } }
@media (forced-colors: active) {
    .cark-neon-harf { -webkit-text-fill-color: CanvasText; color: CanvasText; -webkit-text-stroke: 0; text-shadow: none; }
    .cark-sayfa[data-tema="lunapark"] .cark-tabela h1::after { display: none; }
}
.cark-dekor-ampuller { position: absolute; inset: -6px; pointer-events: none; }
.cark-dekor-ampuller > i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--cark-ampul-acik); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--cark-ampul-acik) 90%, transparent);
    animation: carkAmpul 1.2s steps(1) infinite; }
.cark-dekor-ampuller > i:nth-child(3n+2) { animation-delay: .4s; }
.cark-dekor-ampuller > i:nth-child(3n) { animation-delay: .8s; }
/* her durum ≥170 ms: 1.2 s'de açık 0,79 s / kapalı 0,41 s; coşkuda 0,52 s → 0,34 / 0,18 s */
@keyframes carkAmpul { 0%, 66% { background: var(--cark-ampul-acik); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--cark-ampul-acik) 90%, transparent); }
    67%, 100% { background: var(--cark-ampul-kapali); box-shadow: none; } }
.cark-tabela[data-cosku] { box-shadow: 0 0 0 6px var(--cark-kirmizi-derin), 0 18px 40px rgba(0, 0, 0, .5), 0 0 90px color-mix(in srgb, var(--cark-altin) 70%, transparent); }
.cark-tabela[data-cosku] .cark-dekor-ampuller > i { animation-duration: .52s; animation-delay: 0s; }
.cark-tabela[data-cosku] .cark-dekor-ampuller > i:nth-child(2n) { animation-delay: .26s; }
.cark-kurdele { position: relative; display: inline-block; max-width: 100%; padding: 8px 34px; background: var(--cark-nane); color: var(--cark-nane-koyu);
    font-family: var(--cark-f-baslik); font-size: clamp(12px, 2.6vw, 16px); letter-spacing: .5px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }

/* yönetici rozeti / deneme anahtarı */
.cark-deneme-rozet, .cark-deneme-anahtar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
    max-width: 100%; padding: 8px 14px; font-size: 13px; font-weight: 600; line-height: 1.45;
    background: color-mix(in srgb, var(--cark-led-zemin) 78%, transparent); border: 2px dashed var(--cark-altin); color: var(--cark-krem); }
.cark-deneme-rozet > b { font-family: var(--cark-f-baslik); font-weight: 400; color: var(--cark-altin); letter-spacing: .5px; }
.cark-deneme-rozet > a { color: var(--cark-nane); text-decoration: underline; text-underline-offset: 2px; }
.cark-deneme-anahtar { cursor: pointer; border-style: solid; border-color: color-mix(in srgb, var(--cark-altin) 45%, transparent); }
.cark-deneme-anahtar > input { width: 18px; height: 18px; accent-color: var(--cark-altin); cursor: pointer; margin: 0; }
.cark-deneme-anahtar > small { color: var(--cark-soluk); font-size: 12px; }

/* ── büfe ─────────────────────────────────────────────────────────── */
.cark-bufe { position: relative; padding-top: 52px; min-width: 0; }
.cark-dekor-bufe-tente { position: absolute; left: -10px; right: -10px; top: 0; height: 40px; z-index: 1;
    background: repeating-linear-gradient(90deg, var(--cark-altin) 0 28px, var(--cark-kirmizi) 28px 56px); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.cark-dekor-bufe-tente::after { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 14px;
    background: radial-gradient(circle at 14px 0, var(--cark-altin) 13px, transparent 13.5px) 0 0 / 56px 14px repeat-x,
                radial-gradient(circle at 42px 0, var(--cark-kirmizi) 13px, transparent 13.5px) 0 0 / 56px 14px repeat-x; }
.cark-bufe-ic { position: relative; display: grid; gap: 28px; align-items: center;
    padding: clamp(24px, 4vw, 40px) clamp(14px, 3vw, 32px) 28px;
    background: linear-gradient(var(--cark-gece-3), var(--cark-gece-2));
    border: 4px solid var(--cark-altin-derin); border-top: 0; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
@media (min-width: 900px) { .cark-bufe-ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* çark */
.cark-alan { display: grid; justify-items: center; min-width: 0; }
.cark-tekerlek { position: relative; width: min(92vw, 520px); max-width: 100%; aspect-ratio: 1; }
.cark-tekerlek::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; z-index: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--cark-altin) 35%, transparent), color-mix(in srgb, var(--cark-kirmizi) 12%, transparent) 70%, transparent); transition: opacity .3s; }
.cark-tekerlek[data-donuyor]::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--cark-altin) 55%, transparent), color-mix(in srgb, var(--cark-kirmizi) 20%, transparent) 70%, transparent); }
.cark-don { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.cark-don > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cark-piksel { image-rendering: crisp-edges; image-rendering: pixelated; }
.cark-isaretci { position: absolute; z-index: 3; top: -4%; left: calc(50% - 22px); display: block; width: 44px; height: 50px;
    image-rendering: pixelated; transform-origin: 50% 12%; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55)); }
.cark-dekor-ayak { position: relative; z-index: 0; width: 34%; height: 46px; margin-top: -10px;
    background: linear-gradient(90deg, var(--cark-ayak-1), var(--cark-ayak-2) 50%, var(--cark-ayak-1)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cark-dekor-taban { width: min(70%, 320px); height: 14px; background: var(--cark-altin-derin);
    box-shadow: inset 0 4px 0 var(--cark-altin), 0 8px 0 rgba(0, 0, 0, .3); }

/* bilet gişesi */
.cark-gise { display: grid; gap: 16px; min-width: 0; }
.cark-gise-baslik { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--cark-altin); }
.cark-cuzdan { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cark-cuzdan-oge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; background: var(--cark-krem); color: var(--cark-murekkep);
    font-weight: 700; font-size: 13px; line-height: 1.3;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; }
.cark-cuzdan-oge > b { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 15px; color: var(--cark-kirmizi-derin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cark-kilit-not { flex-basis: 100%; font-size: 12.5px; color: var(--cark-soluk); }

.cark-biletler { display: grid; gap: 14px; }
.cark-bilet { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; width: 100%;
    padding: 14px 26px; border: 0; border-radius: 0; cursor: pointer; text-align: left; text-decoration: none;
    font: inherit; font-family: var(--cark-f-govde); line-height: 1.3;
    background: var(--cark-altin); color: var(--cark-murekkep); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18);
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
    transition: transform .12s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; }
.cark-bilet-kocan { font-family: var(--cark-f-baslik); font-size: 22px; line-height: 1; padding-right: 14px; border-right: 3px dashed color-mix(in srgb, var(--cark-murekkep) 35%, transparent); text-align: center; }
.cark-bilet-kocan > small { display: block; font-family: var(--cark-f-govde); font-weight: 800; font-size: 10px; letter-spacing: 2px; margin-top: 4px; }
.cark-bilet-govde { display: grid; gap: 2px; min-width: 0; }
.cark-bilet-govde > b { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 20px; line-height: 1.1; }
.cark-bilet-alt { font-size: 12.5px; font-weight: 700; opacity: .82; }
.cark-bilet-kirmizi { background: var(--cark-kirmizi); color: var(--cark-krem); }
.cark-bilet-kirmizi .cark-bilet-kocan { border-right-color: color-mix(in srgb, var(--cark-krem) 40%, transparent); }
.cark-bilet-giris { background: var(--cark-nane); color: var(--cark-nane-koyu); }
.cark-bilet:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-3px) rotate(-1deg); filter: brightness(1.06); }
.cark-bilet-giris, .cark-bilet-giris:hover, .cark-bilet-giris:focus { color: var(--cark-nane-koyu); }
.cark-bilet:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.cark-bilet:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--cark-krem), inset 0 0 0 7px var(--cark-murekkep); }
/* 11.10.2026 carkifelek (inceleme UI-2): JS düğmeyi aria-disabled ile kapatır (odak düğmede kalır); disabled yalnız JS yokken */
.cark-bilet:disabled, .cark-bilet[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(.8) brightness(.65); }
.cark-bilet[data-yirtik] { animation: carkYirt .32s ease-out; }
@keyframes carkYirt { 0% { transform: none; } 35% { transform: translateY(3px) scale(.96) rotate(1.5deg); } 100% { transform: none; } }
/* deneme modunda biletler çizgili: gerçek çevirmeyle karışmasın */
.cark-sayfa[data-deneme] .cark-bilet:not(.cark-bilet-giris) { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .08) 0 10px, transparent 10px 20px); }
.cark-sayfa[data-deneme] .cark-bilet-govde > b::after { content: " · DENEME"; font-size: 12px; letter-spacing: .5px; }

.cark-js-yok { font-size: 13px; font-weight: 600; color: var(--cark-hata); }
.cark-yetmiyor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; font-weight: 600; color: var(--cark-hata); }
.cark-yetmiyor[hidden] { display: none; }
.cark-yetmiyor > a { font-family: var(--cark-f-baslik); font-size: 13px; padding: 7px 14px; background: var(--cark-nane); color: var(--cark-nane-koyu); text-decoration: none; }
.cark-yetmiyor > a:hover { filter: brightness(1.08); color: var(--cark-nane-koyu); }
.cark-yetmiyor > a:focus-visible { outline: 3px solid var(--cark-krem); outline-offset: 2px; }

/* sonuç fişi (data-cark-sonuc, aria-live) */
.cark-fis { min-height: 128px; padding: 16px 18px; display: grid; gap: 8px; align-content: center; background: var(--cark-krem); color: var(--cark-murekkep);
    border: 3px dashed color-mix(in srgb, var(--cark-murekkep) 30%, transparent); background-clip: padding-box; }
.cark-fis-bos { font-weight: 600; font-size: 14px; }
.cark-fis-deneme { justify-self: start; font-family: var(--cark-f-baslik); font-size: 11px; letter-spacing: 1px; padding: 2px 8px; background: var(--cark-murekkep); color: var(--cark-altin); }
.cark-fis-tekrar { font-size: 12.5px; font-weight: 600; opacity: .8; }
.cark-fis-satir { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cark-fis-satir > canvas { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.cark-fis-metin { display: grid; gap: 2px; min-width: 0; }
.cark-fis-baslik { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--cark-kirmizi-derin); }
.cark-fis[data-durum="notr"] .cark-fis-baslik { font-family: var(--cark-f-govde); font-weight: 800; font-size: 17px; color: var(--cark-murekkep); }
.cark-fis-aciklama { font-size: 13px; font-weight: 600; opacity: .85; }
.cark-fis-rozet { justify-self: start; font-family: var(--cark-f-baslik); font-size: 12px; letter-spacing: .5px; padding: 2px 8px; background: var(--cark-kirmizi-derin); color: var(--cark-altin); }
.cark-fis[data-durum="buyuk"] { background: radial-gradient(circle at 30% 20%, var(--cark-altin-acik), var(--cark-altin)); border-color: var(--cark-kirmizi-derin); }
.cark-fis-liste { display: grid; gap: 4px; }
.cark-fis-liste > li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.cark-fis-liste > li > canvas { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.cark-fis-liste > li.cark-en { color: var(--cark-kirmizi-derin); }
.cark-fis[data-yeni] { animation: carkFisBas .55s steps(9) both; }
@keyframes carkFisBas { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* uyarı (data-cark-uyari, role=alert) — .b3 içerebilir: soy span seçicisi YOK */
.cark-uyari { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.45;
    color: var(--cark-hata); background: color-mix(in srgb, var(--cark-led-zemin) 60%, transparent); border-left: 4px solid var(--cark-kirmizi); }
.cark-uyari[hidden] { display: none; }
.cark-uyari-metin { margin: 0; }
.cark-uyari-bag { color: var(--cark-nane); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.cark-uyari-bag:hover { color: var(--cark-krem); }

.cark-kurallar { display: grid; gap: 4px; font-size: 12.5px; color: var(--cark-soluk); }
.cark-kurallar > li::before { content: "★ "; color: var(--cark-altin); }

/* ── LED kayan yazı: son kazananlar ───────────────────────────────── */
.cark-led { position: relative; display: flex; align-items: stretch; min-height: 50px; overflow: hidden;
    background: var(--cark-led-zemin); border: 4px solid var(--cark-led-kenar); box-shadow: inset 0 0 0 2px #000, 0 10px 24px rgba(0, 0, 0, .4); }
.cark-led::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, transparent 55%, rgba(0, 0, 0, .55) 56%) 0 0 / 4px 4px; }
.cark-led-etiket { position: relative; z-index: 2; flex: none; display: grid; place-items: center; padding: 0 14px; background: var(--cark-kirmizi);
    color: var(--cark-krem); font-family: var(--cark-f-baslik); font-weight: 400; font-size: 12px; line-height: 1.2; letter-spacing: 1px; text-align: center;
    box-shadow: 6px 0 12px rgba(0, 0, 0, .5); }
.cark-led-pencere { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; padding: 12px 0; }
.cark-led-iz { display: flex; width: max-content; gap: 48px; padding-left: 100%; animation: carkKay 34s linear infinite;
    font-family: var(--cark-f-piksel); font-weight: 900; font-size: 16px; color: var(--cark-led-yazi); text-shadow: 0 0 6px color-mix(in srgb, var(--cark-led-yazi) 85%, transparent); white-space: nowrap; }
.cark-led-iz > li > b { color: var(--cark-led-vurgu); text-shadow: 0 0 6px color-mix(in srgb, var(--cark-led-vurgu) 85%, transparent); font-weight: 900; }
.cark-led-iz > li.cark-led-bos { font-family: var(--cark-f-govde); font-weight: 600; font-size: 14px; text-shadow: none; }
.cark-led-pencere:hover .cark-led-iz, .cark-led-pencere:focus-within .cark-led-iz, .cark-led[data-durdu] .cark-led-iz { animation-play-state: paused; }
@keyframes carkKay { to { transform: translateX(-100%); } }
.cark-led-dur { position: relative; z-index: 2; flex: none; width: 44px; border: 0; border-left: 2px solid var(--cark-led-kenar); background: var(--cark-led-dugme); color: var(--cark-led-yazi);
    font: 700 13px/1 var(--cark-f-govde); cursor: pointer; }
.cark-led-dur:hover { color: var(--cark-krem); }
.cark-led-dur:focus-visible { outline: 3px solid var(--cark-krem); outline-offset: -3px; border-radius: 0; }

/* ── ödül tabelası + çevirmelerim (ahşap tabelalar) ────────────────── */
.cark-ikili { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.cark-ahsap { display: grid; gap: 12px; min-width: 0; padding: 20px; color: var(--cark-krem);
    background: linear-gradient(var(--cark-ahsap-1), var(--cark-ahsap-2)); border: 5px solid var(--cark-ahsap-kenar);
    box-shadow: inset 0 0 0 3px var(--cark-ahsap-ic), 0 16px 34px rgba(0, 0, 0, .45); }
.cark-ahsap h2 { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--cark-altin); text-shadow: 2px 2px 0 #000; }
.cark-alt-baslik { font-size: 12.5px; color: var(--cark-ahsap-yazi); margin-top: -6px; }
.cark-liste { display: grid; gap: 2px; }
.cark-liste > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; }
.cark-liste > li > canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.cark-liste-ad { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 700; }
.cark-liste-ad > small { font-weight: 600; color: var(--cark-ahsap-yazi); font-size: 12px; }
.cark-liste-sag { font-variant-numeric: tabular-nums; font-family: var(--cark-f-piksel); font-weight: 900; font-size: 13px; color: var(--cark-altin); text-align: right; white-space: nowrap; }
.cark-liste > li.cark-nadir .cark-liste-ad { color: var(--cark-nadir); }
.cark-liste > li.cark-deneme-satir { opacity: .7; }
.cark-liste-noktali .cark-liste-ad::after { content: ""; flex: 1 1 24px; border-bottom: 2px dotted color-mix(in srgb, var(--cark-krem) 25%, transparent); transform: translateY(-4px); }
.cark-bos-durum { font-size: 13.5px; color: var(--cark-ahsap-yazi); padding: 6px 2px; }
.cark-ozet { font-size: 12.5px; color: var(--cark-ahsap-yazi); border-top: 1px solid color-mix(in srgb, var(--cark-krem) 15%, transparent); padding-top: 10px; }
.cark-ozet > b { color: var(--cark-krem); font-weight: 700; }

/* ── kurulum / hata kartı (yalnız yönetici ya da hata durumunda) ───── */
.cark-kart { max-width: 640px; margin: 0 auto; padding: 24px; display: grid; gap: 12px; justify-items: start;
    background: color-mix(in srgb, var(--cark-led-zemin) 82%, transparent); border: 3px solid var(--cark-altin-derin); color: var(--cark-krem); }
.cark-kart h1, .cark-kart h2 { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--cark-altin); }
.cark-kart p { font-size: 14px; color: var(--cark-soluk); }
.cark-kart code { font-family: ui-monospace, monospace; font-size: 13px; color: var(--cark-krem); background: rgba(255, 255, 255, .06); padding: 1px 5px; }
.cark-kart-bag { margin-top: 4px; }

/* ── efekt katmanı (parlama). JS onu <html>'e taşır (body zoom 1.08) → .cark-sayfa dışı ── */
.cark-efekt { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 39; opacity: 0; }
.cark-efekt[hidden] { display: none; }


/* ── tek sütun (900 px altı) ───────────────────────────────────────────
   11.10.2026 carkifelek (inceleme UI-1): çark → fiş → uyarı → biletler art arda; cüzdan (bakiye/hak)
   biletlerin ALTINA iner. Böylece telefonda çarkın durduğu an ile sonuç fişi aynı ekranda.
   Yalnız görsel sıra: DOM sırası (ve odak sırası) masaüstüyle aynı, cüzdanda odaklanan öğe yok. */
@media (max-width: 899.98px) {
    .cark-gise > .cark-cuzdan { order: 1; }
    .cark-gise > .cark-kurallar { order: 2; }
}

/* ── telefon ──────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .cark-ic { padding-top: 30px; gap: 28px; }
    .cark-bilet { padding: 12px 20px; gap: 12px; }
    .cark-bilet-govde > b { font-size: 18px; }
    .cark-led-etiket { font-size: 10px; padding: 0 10px; max-width: 92px; }
    .cark-ahsap { padding: 16px; }
}

/* ── hareketi azalt: dönüş/ampul/kayan yazı/fiş baskısı yok ───────── */
/* 12.10.2026 carkifelek: ihtimaller penceresi (<dialog>; sayfada tablo yok, kurallardaki bağlantı açar) */
.cark-ihtimal-pencere { position: fixed; inset: 0; margin: auto; width: min(92vw, 460px); height: fit-content; max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; background: transparent; color: var(--cark-krem); }
.cark-ihtimal-pencere:not([open]) { display: none; }
.cark-ihtimal-pencere::backdrop { background: rgba(10, 4, 20, .72); }
.cark-ihtimal-kapat { justify-self: center; min-height: 44px; padding: 8px 22px; font-family: var(--cark-f-baslik); font-size: 14px; cursor: pointer;
    color: var(--cark-murekkep); background: var(--cark-krem); border: 3px solid var(--cark-murekkep); box-shadow: 0 3px 0 var(--cark-murekkep); }
.cark-ihtimal-kapat:focus-visible { outline: 3px solid var(--cark-altin); outline-offset: 2px; }
.cark-ihtimal-bag { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.cark-ihtimal-bag:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 12.10.2026 carkifelek: ses aç/kapat düğmesi (büfenin sağ üst köşesi) */
.cark-ses { position: absolute; top: 6px; right: 6px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center;
    font-size: 16px; color: var(--cark-murekkep); background: var(--cark-krem); border: 3px solid var(--cark-murekkep);
    box-shadow: 0 3px 0 var(--cark-murekkep); cursor: pointer; }
.cark-ses[hidden] { display: none; }
.cark-ses[aria-pressed="false"] { opacity: .7; }
.cark-ses:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cark-murekkep); }
.cark-ses:focus-visible { outline: 3px solid var(--cark-altin); outline-offset: 2px; }

/* 12.10.2026 carkifelek: çevirme onayı (<dialog>) — krem bilet kartı */
/* sitenin sıfırlaması (margin: 0) <dialog>'un tarayıcı ortalamasını bozuyordu → ortalama açıkça (Kadir: "tam ortasına gelsin") */
.cark-onay { position: fixed; inset: 0; margin: auto; width: min(92vw, 380px); height: fit-content; max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; background: transparent; color: var(--cark-murekkep); }
.cark-onay:not([open]) { display: none; }
.cark-onay::backdrop { background: rgba(10, 4, 20, .72); }
.cark-onay-ic { display: grid; gap: 12px; padding: 22px 20px 20px; text-align: center; background: var(--cark-krem);
    border: 4px solid var(--cark-murekkep); box-shadow: 0 0 0 4px var(--cark-altin), 0 18px 40px rgba(0, 0, 0, .55); }
.cark-onay-ust { font-family: var(--cark-f-baslik); font-size: 12px; letter-spacing: 2px; color: var(--cark-kirmizi-derin); }
.cark-onay-baslik { font-family: var(--cark-f-baslik); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--cark-murekkep); }
.cark-onay-metin { font-size: 15px; line-height: 1.45; }
.cark-onay-dugmeler { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 4px; }
.cark-onay-dugmeler > button { min-height: 48px; padding: 10px 12px; font-family: var(--cark-f-baslik); font-size: 15px; cursor: pointer;
    border: 3px solid var(--cark-murekkep); box-shadow: 0 4px 0 var(--cark-murekkep); }
.cark-onay-dugmeler > button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cark-murekkep); }
.cark-onay-dugmeler > button:focus-visible { outline: 3px solid var(--cark-kirmizi); outline-offset: 3px; }
.cark-onay-hayir { background: #E9DCC4; color: var(--cark-murekkep); }
.cark-onay-evet { background: var(--cark-altin); color: var(--cark-murekkep); }
.cark-onay[open] { animation: carkOnayAc .18s ease-out; }
@keyframes carkOnayAc { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cark-onay[open] { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    .cark-dekor-ampuller > i { animation: none; }
    .cark-led-iz { animation: none; padding-left: 16px; flex-wrap: wrap; width: auto; gap: 6px 28px; white-space: normal; }
    .cark-led-dur { display: none; }
    .cark-bilet, .cark-tabela { transition: none; }
    .cark-fis[data-yeni], .cark-bilet[data-yirtik] { animation: none; }
}