/* ═══════════════════════════════════════════════════════════════
   cinema.css — ABYS Orbit ortak sinematik katman
   index.html + dashboard.html (ileride game.html) ortak kullanır.
   Mevcut style.css / dashboard.css ÜZERİNE LAYER eder, üzerine yazmaz.
   ─────────────────────────────────────────────────────────────── */

/* ── Fontlar: yerel Eurostile (style.css/dashboard.css'teki @font-face ile aynı doküman) ── */

:root {
    --font-hero:  'Roboto Condensed', 'Ubuntu', sans-serif;
    --font-num:   'Roboto Condensed', 'Ubuntu', monospace;
    --cinema-cyan:  #00d8ff;
    --cinema-gold:  #ffce6a;
    --cinema-red:   #ff3355;
    --cinema-green: #4dffaa;
}

/* ── Vanta arka plan konteyneri (en altta, dokunulmaz) ── */
#vanta-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, #04122a 0%, #02060e 70%, #000 100%);
}
/* Cinema aktifken body solid bg'sini şeffaflaştır ki Vanta görünsün */
body.cinema-ready {
    background: transparent !important;
}
/* Vanta DOTS ile birlikte starCanvas çok hafif kalsın — DOTS yıldız yerine geçiyor */
#starCanvas {
    position: fixed; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: screen;
}
/* Vanta'nın renklerini koyu kalpte tutsun diye ek vignette + alt karartma */
#vanta-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.45) 70%,
            rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}
/* Tüm sayfa içeriği vanta'nın üstünde kalsın */
body > *:not(#vanta-bg):not(#starCanvas) { position: relative; z-index: 2; }

/* ── Hero başlık tipografisi (Eurostile) ── */
.cinema-hero {
    font-family: var(--font-hero) !important;
    letter-spacing: 4px;
    text-shadow:
        0 0 6px var(--cinema-cyan),
        0 0 18px rgba(0,216,255,0.55),
        0 0 38px rgba(0,150,255,0.35);
}
.cinema-num {
    font-family: var(--font-num) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

/* ── Scanline overlay (CRT efekti) ── */
.cinema-scanlines {
    position: relative;
    overflow: hidden;
}
.cinema-scanlines::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.025) 0px,
        rgba(255,255,255,0.025) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.55;
}

.cinema-hex-frame {
    position: relative;
    padding: 1px;
}
.cinema-hex-frame::before,
.cinema-hex-frame::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--cinema-cyan);
    box-shadow: 0 0 6px var(--cinema-cyan);
    opacity: 0.85;
    pointer-events: none;
}
.cinema-hex-frame::before { top: -1px; left: -1px;  border-right: none; border-bottom: none; }
.cinema-hex-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.cinema-cta {
    position: relative;
    font-family: var(--font-hero) !important;
    letter-spacing: 3px;
    color: #07101e;
    background: linear-gradient(180deg, #6cffaf 0%, #1fb775 50%, #0a7a48 100%);
    border: 1px solid #2fff9a;
    border-radius: 4px;
    padding: 12px 32px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.18) inset,
        0 0 16px rgba(47,255,154,0.55),
        0 0 32px rgba(47,255,154,0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    overflow: hidden;
}
.cinema-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.28) inset,
        0 0 22px rgba(47,255,154,0.75),
        0 0 48px rgba(47,255,154,0.35);
}
.cinema-cta:active { transform: translateY(0); filter: brightness(0.95); }
.cinema-cta::after {
    /* Yatay parıltı sweep */
    content: '';
    position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%
    );
    transform: skewX(-22deg);
    animation: cinemaSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cinemaSweep {
    0%   { left: -120%; }
    60%  { left: 130%;  }
    100% { left: 130%;  }
}

/* Mavi varyant (giriş, devam butonları) */
.cinema-cta.cyan {
    color: #02141f;
    background: linear-gradient(180deg, #7be9ff 0%, #1f9ed4 50%, #0a5d8c 100%);
    border-color: #4bc8ff;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.18) inset,
        0 0 16px rgba(0,200,255,0.55),
        0 0 32px rgba(0,200,255,0.25);
}
.cinema-cta.cyan:hover {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.28) inset,
        0 0 22px rgba(0,200,255,0.75),
        0 0 48px rgba(0,200,255,0.35);
}

/* ── Hover-tilt hazırlığı (vanilla-tilt) ── */
.cinema-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── GSAP reveal başlangıç durumları (FOUC önler) ── */
.cinema-fade-in,
.cinema-slide-up,
.cinema-slide-left { opacity: 0; }
.cinema-ready .cinema-fade-in,
.cinema-ready .cinema-slide-up,
.cinema-ready .cinema-slide-left { opacity: 1; } /* fallback (JS yoksa) */

/* ── Vignette (köşeleri karartır, odağı merkezde tutar) ── */
.cinema-vignette {
    position: fixed; inset: 0; z-index: 3;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 45%,
        rgba(0,0,0,0.65) 100%
    );
}
/* Cinema ready iken body ARKA PLANINA derin gradient — Vanta yine üstünde durur
   ama paneller hep daha koyu zemin üzerinde okunaklı kalır. */
body.cinema-ready::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 1; /* Vanta üstü, içerik altı */
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 30%,
            rgba(0, 30, 60, 0.25) 0%,
            transparent 60%),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* ══════════════════════════════════════════════════════════════
   • İki tonlu lacivert/çelik gradient gövde
   • Üst ve alt kenarda parlak çelik şerit (highlight)
   • Köşelerde "vida" hex işaretleri (görsel ağırlık)
   • Sağ-alt diagonal kesim opsiyonu (sci-fi feel)
   ─────────────────────────────────────────────────────────────── */
.cinema-panel {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(8, 22, 42, 0.96) 0%,
            rgba(4, 12, 24, 0.96) 50%,
            rgba(8, 22, 42, 0.96) 100%);
    border: 1px solid rgba(38, 96, 150, 0.55);
    border-radius: 3px;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.18) inset,   /* üst highlight */
        0 -1px 0 rgba(0, 0, 0, 0.6) inset,         /* alt gölge */
        0 8px 24px rgba(0, 0, 0, 0.55),            /* dış gölge */
        0 0 0 1px rgba(0, 0, 0, 0.4);              /* dış çizgi */
    padding: 14px 16px;
}
/* Üst dekoratif çelik şerit */
.cinema-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(120, 220, 255, 0.85) 50%,
        transparent 100%);
    pointer-events: none;
}
/* Köşelerde "vida" — küçük cyan kareler */
.cinema-panel::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 6px; height: 6px;
    background: rgba(0, 200, 255, 0.6);
    box-shadow:
        calc(100% + 4px - 6px) 0 0 0 rgba(0, 200, 255, 0.6),
        0 calc(var(--ph,0) - 0px) 0 0 transparent;
    border-radius: 1px;
    pointer-events: none;
}

.cinema-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -14px -16px 12px;
    padding: 8px 14px;
    background: linear-gradient(180deg,
        rgba(0, 60, 110, 0.6) 0%,
        rgba(0, 30, 60, 0.6) 100%);
    border-bottom: 1px solid rgba(0, 140, 200, 0.5);
    box-shadow: 0 1px 0 rgba(120, 220, 255, 0.25) inset;
}
.cinema-panel-head .ttl {
    font-family: var(--font-hero);
    font-size: 11px;
    letter-spacing: 3px;
    color: #c5e8ff;
    text-shadow: 0 0 6px rgba(0, 200, 255, 0.55);
    text-transform: uppercase;
}
.cinema-panel-head .ttl i { margin-right: 6px; color: var(--cinema-cyan); }
.cinema-panel-head .meta {
    font-family: var(--font-num);
    font-size: 11px;
    color: rgba(160, 200, 240, 0.7);
}

/* Diagonal-cut sağ alt köşe (sci-fi feel) */
.cinema-panel.cut-br {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* Hover'da hafif parlatma (interactive panel) */
.cinema-panel.interactive { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.cinema-panel.interactive:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(150, 230, 255, 0.28) inset,
        0 -1px 0 rgba(0, 0, 0, 0.6) inset,
        0 14px 32px rgba(0, 0, 0, 0.7),
        0 0 22px rgba(0, 180, 255, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   INDEX (LOGIN) — center-panel'i metalik görünüme çevir
   ─────────────────────────────────────────────────────────────── */
body.cinema-ready .center-panel {
    background:
        linear-gradient(180deg,
            rgba(8, 22, 42, 0.94) 0%,
            rgba(3, 10, 22, 0.96) 100%) !important;
    border: 1px solid rgba(0, 140, 200, 0.55) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.7) inset,
        0 0 32px rgba(0, 120, 200, 0.18),
        0 22px 60px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(3px);
}
/* Üst dekoratif çelik şerit */
body.cinema-ready .center-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(120, 220, 255, 0.9) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 5;
}
/* Top bar (üst saydam navigasyon) — daha koyu, çelik şerit alt */
body.cinema-ready .top-bar {
    background: linear-gradient(180deg,
        rgba(2, 8, 18, 0.82) 0%,
        rgba(0, 4, 12, 0.6) 100%) !important;
    border-bottom: 1px solid rgba(0, 140, 200, 0.32) !important;
    box-shadow: 0 1px 0 rgba(120, 200, 255, 0.18) inset !important;
}
/* Quick-login form input alanları — kompakt metalik */
body.cinema-ready .quick-login input,
body.cinema-ready .quick-login button {
    background: rgba(2, 10, 22, 0.85) !important;
    border: 1px solid rgba(0, 140, 200, 0.4) !important;
    color: var(--cinema-cyan) !important;
}

/* Hero side gemiler — biraz daha dramatik glow + filter */
body.cinema-ready .hero-side-img {
    filter:
        drop-shadow(0 0 24px rgba(0, 200, 255, 0.55))
        drop-shadow(0 0 60px rgba(0, 130, 220, 0.35))
        contrast(1.05) saturate(1.1);
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD MEVCUT KARTLARINA METAL OVERRIDE
   (dashboard.css'i değiştirmeden cinema layer override)
   ─────────────────────────────────────────────────────────────── */
body.cinema-ready .dash-card,
body.cinema-ready .panel,
body.cinema-ready .skylab-card,
body.cinema-ready .shop-detail-panel,
body.cinema-ready .shop-sidebar,
body.cinema-ready .shop-grid-area,
body.cinema-ready .shop-wrapper {
    background:
        linear-gradient(180deg,
            rgba(6, 18, 36, 0.94) 0%,
            rgba(3, 10, 22, 0.94) 100%) !important;
    border-color: rgba(38, 96, 150, 0.55) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.16) inset,
        0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Dashboard topbar — koyu metal yapalım */
body.cinema-ready .dash-topbar {
    background:
        linear-gradient(180deg,
            rgba(2, 10, 22, 0.98) 0%,
            rgba(0, 4, 12, 0.98) 100%) !important;
    border-bottom: 1px solid rgba(0, 140, 200, 0.4) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.15) inset,
        0 4px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Sidebar koyu metal */
body.cinema-ready .dash-sidebar {
    background:
        linear-gradient(180deg,
            rgba(2, 10, 22, 0.96) 0%,
            rgba(0, 4, 12, 0.96) 100%) !important;
    border-right: 1px solid rgba(0, 140, 200, 0.35) !important;
}

/* Sidebar menü öğeleri — aktifte parlak cyan kenar */
body.cinema-ready .sidebar-item {
    border-left: 3px solid transparent;
    transition: all 0.18s;
}
body.cinema-ready .sidebar-item:hover {
    background: rgba(0, 60, 110, 0.22) !important;
    border-left-color: rgba(0, 180, 255, 0.5);
}
body.cinema-ready .sidebar-item.active {
    background: linear-gradient(90deg,
        rgba(0, 100, 180, 0.35) 0%,
        rgba(0, 30, 60, 0.0) 100%) !important;
    border-left-color: var(--cinema-cyan);
    box-shadow: inset 0 0 16px rgba(0, 180, 255, 0.18);
}

/* HIZLI İSTATİSTİKLER tarzı stat kutuları — koyu metal göbek */
body.cinema-ready .stat-card,
body.cinema-ready .stats-box,
body.cinema-ready .info-tile {
    background:
        linear-gradient(180deg,
            rgba(8, 24, 46, 0.95) 0%,
            rgba(2, 8, 18, 0.95) 100%) !important;
    border: 1px solid rgba(38, 96, 150, 0.45) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.15) inset,
        0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Büyük "OYNA" CTA'sını yeşil parıltıyla güçlendir */
body.cinema-ready #playBtn,
body.cinema-ready .btn-play,
body.cinema-ready button[onclick*="launchGame"] {
    background: linear-gradient(180deg, #6cffaf 0%, #1fb775 50%, #0a7a48 100%) !important;
    border: 1px solid #2fff9a !important;
    color: #07101e !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.2) inset,
        0 0 18px rgba(47,255,154,0.55),
        0 0 36px rgba(47,255,154,0.28) !important;
}
body.cinema-ready #playBtn:hover,
body.cinema-ready .btn-play:hover,
body.cinema-ready button[onclick*="launchGame"]:hover {
    filter: brightness(1.12);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.3) inset,
        0 0 26px rgba(47,255,154,0.8),
        0 0 56px rgba(47,255,154,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   MODAL OVERLAY — viewport tam ortası, topbar üstünde
   (Cinema sonrası bazı modal'lar sayfa altına kayıyor görünüyordu;
    aşağıdaki override her zaman fixed viewport + tam karartma garantiler.)
   ─────────────────────────────────────────────────────────────── */
.cinema-ready .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9000 !important;                    /* topbar (200) ve her şeyin üstünde */
    background: rgba(0, 5, 15, 0.88) !important; /* daha opak — content arkadan okunmasın */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto;                            /* uzun modal'lar scroll edilebilsin */
    padding: 24px;
}
/* Modal kutusunun kendisi: ortalanmış, metalik */
.cinema-ready .modal-overlay > .modal {
    margin: auto !important;
    background:
        linear-gradient(180deg,
            rgba(8, 22, 42, 0.98) 0%,
            rgba(3, 10, 22, 0.99) 100%) !important;
    border: 1px solid rgba(0, 140, 200, 0.55) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.7) inset,
        0 0 32px rgba(0, 120, 200, 0.22),
        0 22px 60px rgba(0, 0, 0, 0.75) !important;
}

/* ══════════════════════════════════════════════════════════════
   BAN (erişim engeli) OVERLAY — modal-overlay ile AYNI containing-block
   düzeltmesi. Kendi .ban-overlay class'ı olduğu için yukarıdaki
   .modal-overlay kuralına girmiyordu → body>* position:relative kuralı
   fixed'i eziyor, modal sayfa sonuna kayıyordu. Aynı fix uygulanır.
   ─────────────────────────────────────────────────────────────── */
.cinema-ready .ban-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9600 !important;              /* toast (9500) ve modal (9000) üstünde — kritik engel */
}
.cinema-ready .ban-overlay.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════════
   TOP BAR — dil dropdown'ı tıklanabilir kalsın. body>* kuralı topbar'ı
   z-index:2 stacking-context'ine hapsediyordu → açılan dil menüsü (kendi
   z-index:99999'una rağmen) topbar context'i içinde kalıp, DOM'da SONRA
   gelen hero-content (z-index:2) tarafından örtülüyor, tıklama arka plana
   gidiyordu. Topbar'ı hero'nun üstüne çıkar (modallar 9000+ hâlâ üstte).
   ─────────────────────────────────────────────────────────────── */
body.cinema-ready .top-bar { z-index: 500 !important; }

/* ══════════════════════════════════════════════════════════════
   TOAST — viewport üst-ortasına banner-style
   (Eskiden bottom-right'taydı; cinema layer'dan sonra body
    containing-block sorunu yüzünden sayfa sonuna kayıyordu.)
   ─────────────────────────────────────────────────────────────── */
body.cinema-ready #toast {
    position: fixed !important;
    top: 72px !important;                  /* topbar altında, navigasyona yapışık değil */
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9500 !important;              /* modal-overlay (9000) hariç en üstte */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: none;
    max-width: 90vw;
}
body.cinema-ready #toast .toast-item {
    background:
        linear-gradient(180deg,
            rgba(8, 22, 42, 0.96) 0%,
            rgba(3, 10, 22, 0.96) 100%) !important;
    border: 1px solid rgba(0, 140, 200, 0.6) !important;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.22) inset,
        0 6px 22px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(0, 180, 255, 0.18) !important;
    padding: 10px 18px !important;
    font-family: var(--font-num) !important;
    color: #cde7fa !important;
    animation: cinemaToastIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2),
               cinemaToastOut 0.28s ease-in 2.85s forwards !important;
}
body.cinema-ready #toast .toast-item.error {
    border-color: rgba(255, 120, 140, 0.7) !important;
    box-shadow:
        0 1px 0 rgba(255, 180, 200, 0.22) inset,
        0 6px 22px rgba(80, 0, 20, 0.55),
        0 0 18px rgba(255, 60, 90, 0.22) !important;
    color: #ffd0d8 !important;
}
body.cinema-ready #toast .toast-item.success {
    border-color: rgba(80, 255, 160, 0.7) !important;
    box-shadow:
        0 1px 0 rgba(160, 255, 200, 0.22) inset,
        0 6px 22px rgba(0, 60, 20, 0.55),
        0 0 18px rgba(60, 220, 120, 0.22) !important;
    color: #c5ffe0 !important;
}
@keyframes cinemaToastIn {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes cinemaToastOut {
    to { transform: translateY(-14px); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   IN-GAME CONFIRM (cinema.confirm) — native confirm() yerine
   sinematik onay kutusu (auction "hemen al" gibi alanlar için)
   ─────────────────────────────────────────────────────────────── */
#cinemaConfirm {
    position: fixed; inset: 0; z-index: 9200;
    background: rgba(0, 5, 15, 0.78);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
}
#cinemaConfirm.show { display: flex; }
#cinemaConfirm .cc-box {
    width: min(420px, 92vw);
    background:
        linear-gradient(180deg,
            rgba(8, 22, 42, 0.98) 0%,
            rgba(3, 10, 22, 0.99) 100%);
    border: 1px solid rgba(0, 140, 200, 0.6);
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(120, 200, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.7) inset,
        0 0 32px rgba(0, 120, 200, 0.22),
        0 22px 60px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    animation: ccPop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes ccPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
#cinemaConfirm .cc-head {
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(0,60,110,0.6), rgba(0,30,60,0.6));
    border-bottom: 1px solid rgba(0, 140, 200, 0.5);
    box-shadow: 0 1px 0 rgba(120, 220, 255, 0.25) inset;
    font-family: var(--font-hero);
    font-size: 11px;
    letter-spacing: 3px;
    color: #c5e8ff;
    text-shadow: 0 0 6px rgba(0, 200, 255, 0.55);
    text-transform: uppercase;
}
#cinemaConfirm .cc-body {
    padding: 18px 18px 6px;
    font-family: var(--font-num);
    font-size: 13px;
    color: #cde7fa;
    line-height: 1.55;
    text-align: center;
}
#cinemaConfirm .cc-btns {
    display: flex; gap: 8px; padding: 14px 18px 18px;
}
#cinemaConfirm .cc-btn {
    flex: 1; padding: 9px;
    font-family: var(--font-num); font-size: 12px;
    letter-spacing: 1.5px; cursor: pointer; border-radius: 3px;
    transition: filter 0.15s, transform 0.15s;
}
#cinemaConfirm .cc-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
#cinemaConfirm .cc-btn.ok {
    background: linear-gradient(180deg, #6cffaf 0%, #1fb775 50%, #0a7a48 100%);
    border: 1px solid #2fff9a;
    color: #07101e;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 14px rgba(47,255,154,0.45);
}
#cinemaConfirm .cc-btn.no {
    background: rgba(0, 10, 22, 0.6);
    border: 1px solid rgba(120, 160, 200, 0.4);
    color: #cde7fa;
}
#cinemaConfirm .cc-btn.no:hover { background: rgba(0, 30, 60, 0.7); }

/* ── Sayfa geçiş overlay'i (dashboard → game.html cinematic) ── */
#cinema-transition {
    position: fixed; inset: 0; z-index: 9999;
    background: radial-gradient(circle at center, #001a35 0%, #000 100%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.45s ease;
}
#cinema-transition.show { opacity: 1; pointer-events: auto; }
#cinema-transition .ct-core {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,220,255,0.85), transparent 70%);
    box-shadow: 0 0 60px rgba(0,220,255,0.85), 0 0 160px rgba(0,150,255,0.45);
    animation: ctCorePulse 1.4s ease-in-out infinite;
}
@keyframes ctCorePulse {
    0%, 100% { transform: scale(1);   filter: brightness(1);    }
    50%      { transform: scale(1.18); filter: brightness(1.4);  }
}
#cinema-transition .ct-label {
    position: absolute;
    top: 62%; left: 50%; transform: translateX(-50%);
    font-family: var(--font-hero);
    font-size: 13px; letter-spacing: 6px;
    color: rgba(160,230,255,0.95);
    text-shadow: 0 0 12px rgba(0,200,255,0.7);
}