/* ==========================================================================
   OYUNKASA — Dark "kasa" kimlik + tema katmanı (store.css'ten SONRA yüklenir)
   Obsidian zemin · iris aksiyon · altın vurgu · mint "stokta/anında" sinyali.
   Klişe yasak: neon glow yok, cam efekti yok, gradyan metin yok.
   ========================================================================== */
:root{
    /* --- açık-tema tint token'larını yüzeyle karıştır (dark düzeltme) --- */
    --mercan-sis: color-mix(in srgb, var(--mercan) 18%, var(--yuzey));
    --indigo-sis: color-mix(in srgb, var(--indigo) 22%, var(--yuzey));
    --safran-sis: color-mix(in srgb, var(--vurgu, var(--mercan)) 16%, var(--yuzey));
    --nx-kobalt-sis: color-mix(in srgb, var(--mercan) 16%, var(--yuzey));
    --nx-ink-sis: color-mix(in srgb, #0e1420 55%, var(--bg));
    --gece-sis: color-mix(in srgb, #0e1420 60%, var(--bg));

    /* --- OYUNKASA kimlik jetonları --- */
    --obsidyen: #0a0d14;
    --panel: #0e1420;            /* koyu bantlar (eski --gece) */
    --yuzey-2: #1b2332;          /* yükseltilmiş yüzey */
    --yuzey-3: #232e40;
    --iris: var(--indigo);       /* #6d5efc aksiyon */
    --iris-2: #8f83ff;
    --altin: var(--mercan);      /* #f5b93c vurgu */
    --mint: var(--basari);       /* #2fd39a stokta/anında */
    --gece: #0e1420;

    /* --- dark, glow'suz gölge sistemi --- */
    --golge: 0 1px 2px rgba(0,0,0,.45);
    --golge-orta: 0 8px 24px rgba(0,0,0,.5);
    --golge-yuksek: 0 22px 56px rgba(0,0,0,.6);
    --golge-kart: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 34px rgba(0,0,0,.5);
    --hat-parlak: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
}

/* ---- taban zemin dokusu: ince ızgara + köşe ışıması (statik, glow değil) ---- */
body{
    background:
        radial-gradient(1100px 620px at 82% -8%, color-mix(in srgb,var(--iris) 12%, transparent), transparent 60%),
        radial-gradient(900px 520px at -6% 4%, color-mix(in srgb,var(--altin) 7%, transparent), transparent 55%),
        var(--obsidyen);
    background-attachment: fixed;
}

/* ---- seçim + kaydırma çubuğu ---- */
::selection{ background:color-mix(in srgb,var(--iris) 45%, transparent); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:var(--yuzey-3) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--yuzey-3); border-radius:20px; border:2px solid var(--obsidyen); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---- eyebrow: altın mono, ince kural çizgisi ---- */
.eyebrow{ color:var(--altin); letter-spacing:.16em; }

/* ---- kartlar / yüzeyler ---- */
.kart,.panel,.kutu,.urun-kart,.blok,.bilgi-kart,.oz-kart{
    background:var(--yuzey); border-color:var(--cizgi);
}
.urun-kart{ box-shadow:none; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.urun-kart:hover{ border-color:color-mix(in srgb,var(--iris) 55%, var(--cizgi)); box-shadow:var(--golge-orta); transform:translateY(-3px); }

/* görsel kutuları: dark, açık kart yerine */
.urun-gorsel,.nx-spot-gorsel,.kv-magaza-logo,.kv-satici-logo{
    background:var(--yuzey-2) !important; color:var(--ink);
}
.urun-gorsel{ border-bottom:1px solid var(--cizgi) !important; }

/* ---- form kontrolleri: dark ---- */
input,select,textarea,
.arama-form,.kv-hero-arama,.pdp-abone-siklik select,.ab-siklik select,.nx-slot-alan select,.nx-slot-alan input{
    background:var(--yuzey-2) !important; color:var(--ink) !important;
    border-color:var(--cizgi) !important;
}
input::placeholder,textarea::placeholder{ color:color-mix(in srgb,var(--gri) 85%, transparent); }
.arama-form:focus-within{ background:var(--yuzey-2) !important; border-color:var(--iris) !important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--iris) 22%, transparent) !important; }
select option{ background:var(--panel); color:var(--ink); }

/* ---- butonlar ---- */
.buton-birincil{ background:var(--iris); color:#fff; border-color:transparent; }
.buton-birincil:hover{ background:var(--iris-2); }
.buton-vurgu{ background:var(--altin); color:#12121a; border-color:transparent; font-weight:700; }
.buton-vurgu:hover{ background:color-mix(in srgb,var(--altin) 88%, #fff); }
.buton-hayalet,.buton-cizgi,.buton-ikincil{
    background:transparent; color:var(--ink); border:1px solid var(--cizgi);
}
.buton-hayalet:hover,.buton-cizgi:hover,.buton-ikincil:hover{ border-color:var(--iris); color:#fff; background:color-mix(in srgb,var(--iris) 14%, transparent); }

/* ---- rozetler ---- */
.rozet-mercan,.rozet-indigo{ color:#12121a; }
.rozet-mercan{ background:var(--altin); }
.rozet-stok,.rozet-aninda{ background:color-mix(in srgb,var(--mint) 18%, var(--yuzey)); color:var(--mint); border:1px solid color-mix(in srgb,var(--mint) 40%, transparent); }

/* ---- header / footer / açılır menü ---- */
.site-header,.ust-bar,.header,header.site,.mega-nav,.acilir,.dropdown,.mega,.sepet-onizleme{
    background:color-mix(in srgb,var(--panel) 92%, transparent);
    border-color:var(--cizgi); color:var(--ink);
    backdrop-filter:saturate(1.1) blur(8px);
}
.site-footer,footer.site,.footer{ background:var(--panel); border-top:1px solid var(--cizgi); color:var(--gri); }
.site-footer a{ color:var(--gri); }
.site-footer a:hover{ color:var(--altin); }

/* ---- duyuru şeridi ---- */
.duyuru-serit{ background:linear-gradient(90deg,var(--iris),color-mix(in srgb,var(--iris) 55%, var(--panel))); }

/* ---- beyaz-kart artıkları (store.css hardcode) düzelt ---- */
.favori-mini,.nx-cip,.nx-firsat-liste .urun-kart,.nx-kopilot{ background:var(--yuzey-2) !important; color:var(--ink); }
.nx-cip{ border-color:var(--cizgi); }
.nx-kopilot{ border-color:var(--cizgi) !important; box-shadow:var(--golge-orta) !important; }
.cerez-switch span::before{ background:#fff; }
.ab-rozet.ab-iptal{ background:var(--yuzey-3); color:var(--gri); }
.kv-satici-cta .buton{ background:var(--altin); color:#12121a; border-color:transparent; }
.kv-satici-logo{ border:2px solid var(--cizgi) !important; }

/* ---- koyu bantlar: obsidyen panel + ince üst çizgi ---- */
.slayt-icerik,.bant-koyu,.nx-koyu,.kv-satici{ color:#fff; }
.bant-koyu,.nx-koyu{ background:var(--panel); border:1px solid var(--cizgi); }

/* ---- linkler / vurgu metni ---- */
a:hover{ color:var(--altin); }
.fiyat,.tutar,.para{ color:var(--ink); }
.eski-fiyat{ color:var(--gri); }
.indirim,.iskonto{ color:var(--mint); }

/* ---- ayraç çizgileri ---- */
hr,.ayrac{ border-color:var(--cizgi); background:var(--cizgi); }

/* ---- flash mesajları dark ---- */
.flash-basari{ background:color-mix(in srgb,var(--basari) 16%, var(--yuzey)) !important; border-color:color-mix(in srgb,var(--basari) 45%, transparent) !important; color:var(--mint) !important; }
.flash-hata,.flash-uyari{ background:color-mix(in srgb,var(--uyari) 15%, var(--yuzey)) !important; border-color:color-mix(in srgb,var(--uyari) 45%, transparent) !important; color:color-mix(in srgb,var(--uyari) 70%, #fff) !important; }
.flash-bilgi{ background:var(--indigo-sis) !important; border-color:color-mix(in srgb,var(--iris) 40%, transparent) !important; color:var(--iris-2) !important; }

/* ==========================================================================
   OYUNKASA — ANASAYFA epin bölümleri (.ok-*)
   ========================================================================== */

/* hero: nx-hero'nun dark-on-dark başlığını düzelt + eyebrow altın */
.nx-hero{ background:transparent !important; color:var(--ink) !important; padding:clamp(28px,5vw,60px) 0 clamp(24px,4vw,44px); }
.nx-hero-eyebrow{ color:var(--altin) !important; font-family:var(--font-display); letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; gap:10px; }
.nx-hero-eyebrow::before{ content:''; width:26px; height:1px; background:var(--altin); display:inline-block; }
.ok-hero-baslik{ color:var(--ink) !important; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-.02em; margin:14px 0 12px; }
.nx-hero-alt{ color:var(--gri) !important; font-size:1.02rem; max-width:36em; }

.ok-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 6px; }
.buton-buyuk{ padding:0 22px; height:52px; font-size:.98rem; }

.ok-guven-serit{ display:flex; gap:20px; flex-wrap:wrap; margin:14px 0 4px; }
.ok-guven-serit span{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:var(--gri); font-family:var(--font-display); font-weight:500; }
.ok-guven-serit span svg{ color:var(--mint); }

.nx-cipler{ margin-top:18px; }
.nx-hero-ist{ margin-top:24px; gap:28px; }
.nx-hero-ist b{ color:var(--altin) !important; }
.nx-hero-ist span{ color:var(--gri) !important; }

/* hero sağ: kasa vitrini kartı */
.ok-vitrin{ display:block; background:linear-gradient(180deg,var(--yuzey-2),var(--yuzey)); border:1px solid var(--cizgi); border-radius:calc(var(--r-kart) + 4px); padding:20px; box-shadow:var(--golge-yuksek); position:relative; overflow:hidden; }
.ok-vitrin::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--iris),var(--altin)); }
.ok-vitrin .nx-spot-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.nx-canli{ display:inline-flex; align-items:center; gap:6px; color:var(--mint); font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; }
.ok-vitrin-stok{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--gri); background:color-mix(in srgb,var(--mint) 12%, transparent); padding:4px 10px; border-radius:999px; border:1px solid color-mix(in srgb,var(--mint) 26%, transparent); }
.ok-vitrin-marka{ font-family:var(--font-display); font-weight:600; color:var(--altin); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.ok-vitrin-ad{ color:var(--ink) !important; font-size:1.5rem; margin:4px 0 12px; line-height:1.15; }
.ok-vitrin-teslim{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--gri); background:var(--panel); border:1px solid var(--cizgi); border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.ok-vitrin-teslim svg{ color:var(--iris-2); flex:none; }
.ok-vitrin .nx-spot-alt{ display:flex; justify-content:space-between; align-items:flex-end; }
.ok-vitrin .nx-spot-fiyat b{ font-size:1.7rem; color:var(--ink); font-family:var(--font-display); }
.ok-vitrin .nx-spot-fiyat s{ color:var(--gri); font-size:.9rem; margin-right:6px; }
.nx-spot-dus{ display:inline-flex; align-items:center; gap:5px; color:#12121a; background:var(--altin); font-weight:700; font-size:.76rem; padding:4px 9px; border-radius:8px; }
.ok-vitrin-btn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; height:48px; background:var(--iris); color:#fff; border-radius:var(--buton-radius); font-family:var(--font-display); font-weight:600; transition:background .18s ease; }
.ok-vitrin:hover .ok-vitrin-btn{ background:var(--iris-2); }

/* oyun/platform ızgarası */
.ok-oyun-izgara{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ok-oyun-kart{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px 16px; background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.ok-oyun-kart:hover{ border-color:color-mix(in srgb,var(--iris) 55%,var(--cizgi)); transform:translateY(-3px); background:var(--yuzey-2); }
.ok-oyun-ikon{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--iris) 16%, var(--yuzey-2)); color:var(--iris-2); border:1px solid color-mix(in srgb,var(--iris) 30%, transparent); }
.ok-oyun-kart:hover .ok-oyun-ikon{ background:var(--iris); color:#fff; }
.ok-oyun-ad{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:.98rem; }
.ok-oyun-meta{ font-size:.78rem; color:var(--gri); }

/* nasıl çalışır bandı */
.ok-nasil-bant{ background:var(--panel); border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi); padding:clamp(36px,5vw,64px) 0; margin:clamp(28px,4vw,52px) 0; }
.ok-nasil{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ok-nasil-adim{ position:relative; padding:24px; background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); }
.ok-nasil-no{ position:absolute; top:18px; right:20px; font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:color-mix(in srgb,var(--iris) 22%, transparent); line-height:1; }
.ok-nasil-ikon{ width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--altin) 16%, var(--yuzey-2)); color:var(--altin); border:1px solid color-mix(in srgb,var(--altin) 30%, transparent); margin-bottom:16px; }
.ok-nasil-adim b{ display:block; font-family:var(--font-display); font-size:1.14rem; color:var(--ink); margin-bottom:6px; }
.ok-nasil-adim p{ color:var(--gri); font-size:.92rem; margin:0; }

/* cüzdan bandı */
.ok-cuzdan{ display:flex; align-items:center; gap:24px; padding:clamp(24px,3vw,36px); border-radius:calc(var(--r-kart) + 6px); background:linear-gradient(120deg,color-mix(in srgb,var(--iris) 24%, var(--panel)),var(--panel) 62%); border:1px solid color-mix(in srgb,var(--iris) 32%, var(--cizgi)); position:relative; overflow:hidden; }
.ok-cuzdan::after{ content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--altin) 18%,transparent),transparent 70%); }
.ok-cuzdan-ikon{ width:66px; height:66px; flex:none; display:grid; place-items:center; border-radius:16px; background:var(--altin); color:#12121a; }
.ok-cuzdan-metin{ flex:1; }
.ok-cuzdan-metin h2{ color:#fff; margin:4px 0 8px; }
.ok-cuzdan-metin p{ color:color-mix(in srgb,#fff 80%, var(--iris)); margin:0; max-width:56ch; }
.ok-cuzdan-metin .eyebrow{ color:var(--altin) !important; }
.ok-cuzdan .buton{ flex:none; position:relative; z-index:2; }

/* bayi bandı */
.ok-bayi{ display:flex; align-items:center; gap:28px; padding:clamp(24px,3vw,40px); border-radius:calc(var(--r-kart) + 6px); background:var(--yuzey); border:1px solid var(--cizgi); }
.ok-bayi-metin{ flex:1; }
.ok-bayi-metin h2{ color:var(--ink); margin:4px 0 8px; }
.ok-bayi-metin p{ color:var(--gri); margin:0 0 14px; max-width:60ch; }
.ok-bayi-ozellik{ display:flex; gap:16px; flex-wrap:wrap; }
.ok-bayi-ozellik span{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:var(--ink); font-family:var(--font-display); font-weight:500; }
.ok-bayi-ozellik svg{ color:var(--iris-2); }
.ok-bayi .buton{ flex:none; }

/* orta banner dark */
.ok-orta-banner{ display:block; background:var(--panel) !important; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:clamp(28px,4vw,48px); }
.ok-orta-banner h2{ color:#fff; }
.ok-orta-banner p{ color:var(--gri); }

/* responsive */
@media (max-width:1080px){ .ok-oyun-izgara{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:860px){
    .ok-nasil{ grid-template-columns:1fr; }
    .ok-cuzdan,.ok-bayi{ flex-direction:column; align-items:flex-start; }
    .ok-oyun-izgara{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){ .ok-oyun-izgara{ grid-template-columns:repeat(2,1fr); } .ok-hero-cta .buton{ flex:1; } }

/* ---- ürün kartı: kapak sanatı olmayan epin ürünleri için CSS kapak ---- */
.ok-kapak{ position:relative; width:100%; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:16px; overflow:hidden; background:
    radial-gradient(120% 90% at 80% 12%, color-mix(in srgb, var(--kapak-renk) 42%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--kapak-renk) 20%, #0c1119), #0b0f17 72%); }
.ok-kapak::before{ content:''; position:absolute; inset:0; background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--kapak-renk) 8%, transparent) 0 2px, transparent 2px 12px); opacity:.5; }
.ok-kapak-marka{ position:relative; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--kapak-renk) 70%, #fff); margin-bottom:6px; }
.ok-kapak-kupur{ position:relative; font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,3vw,1.5rem); line-height:1.1; color:#fff; letter-spacing:-.01em; }
.ok-kapak-ikon{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb, var(--kapak-renk) 26%, transparent); color:color-mix(in srgb,var(--kapak-renk) 80%, #fff); border:1px solid color-mix(in srgb,var(--kapak-renk) 40%, transparent); }
.kapak-a{ --kapak-renk:#6d5efc; }
.kapak-b{ --kapak-renk:#f5b93c; }
.kapak-c{ --kapak-renk:#2fd39a; }
.kapak-d{ --kapak-renk:#ff6a8a; }
.kapak-e{ --kapak-renk:#3ad0e0; }
.kapak-f{ --kapak-renk:#ff8a4c; }

/* ---- ürün sayfası (pdp) epin dokunuşları ---- */
.pdp-galeri-tek{ grid-template-columns:1fr !important; }
.ok-kapak-buyuk{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.ok-kapak-buyuk .ok-kapak-kupur{ font-size:clamp(1.6rem,4vw,2.6rem); }
.ok-kapak-buyuk .ok-kapak-marka{ font-size:.86rem; }
.ok-kapak-buyuk .ok-kapak-ikon{ width:46px; height:46px; right:16px; bottom:16px; }
.pdp-ana-gorsel{ background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kart); overflow:hidden; }
.pdp-kucukler .kucuk-resim{ background:var(--yuzey-2) !important; border-color:var(--cizgi) !important; }

.pdp-canli-serit{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 14px; }
.pdp-sinyal{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gri); background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:999px; padding:6px 12px; }
.pdp-sinyal b{ color:var(--ink); }
.pdp-sinyal.canli::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 60%,transparent); }
.pdp-sinyal.canli b{ color:var(--mint); }
.pdp-sinyal.acil{ color:var(--altin); border-color:color-mix(in srgb,var(--altin) 34%,transparent); background:color-mix(in srgb,var(--altin) 12%,var(--yuzey-2)); }
.pdp-sinyal.acil b,.pdp-sinyal.acil svg{ color:var(--altin); }
.pdp-sinyal svg{ color:var(--mint); }

.pdp-guvence{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.pdp-guvence li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--gri); }
.pdp-guvence li b{ color:var(--ink); }
.pdp-guvence svg{ color:var(--iris-2); flex:none; margin-top:1px; }

.pdp-abone{ background:var(--yuzey-2); border:1px solid color-mix(in srgb,var(--altin) 26%,var(--cizgi)); border-radius:var(--r-kart); padding:16px; margin-top:14px; }
.pdp-abone-etiket{ color:var(--altin); font-weight:600; }
.pdp-abone-fiyat{ color:var(--ink); font-weight:700; }
.pdp-abone-aciklama{ color:var(--gri); font-size:.86rem; }

/* ---- teslim edilen kodlar (siparis-tamam / siparislerim) ---- */
.ok-kodlar{ text-align:left; margin:22px 0; padding:20px; background:var(--yuzey-2); border:1px solid color-mix(in srgb,var(--mint) 26%,var(--cizgi)); border-radius:var(--r-kart); }
.ok-kodlar-bas{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; color:var(--mint); margin-bottom:14px; }
.ok-kod-satir{ padding:12px 0; border-bottom:1px solid var(--cizgi); }
.ok-kod-satir:last-of-type{ border-bottom:none; }
.ok-kod-ust{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; }
.ok-kod-urun{ font-weight:600; color:var(--ink); font-size:.94rem; }
.ok-kod-skt{ font-size:.76rem; color:var(--gri); }
.ok-kod-kutu{ display:flex; gap:10px; align-items:stretch; }
.ok-kod-deger{ flex:1; display:flex; align-items:center; font-family:'Chakra Petch',ui-monospace,monospace; font-size:1.05rem; letter-spacing:.06em; color:#fff; background:var(--panel); border:1px dashed color-mix(in srgb,var(--mint) 40%,var(--cizgi)); border-radius:10px; padding:12px 16px; word-break:break-all; user-select:all; }
.ok-kod-kopya{ flex:none; white-space:nowrap; }
.ok-kod-not{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:.8rem; color:var(--gri); }
.ok-kod-not svg{ color:var(--altin); flex:none; }

/* ---- bakiye yükleme (top-up) ---- */
.ok-bakiye-yukle-btn{ margin-top:14px; }
.ok-yukle-ust{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:22px; background:var(--yuzey-2); border:1px solid var(--cizgi); border-radius:var(--r-kart); margin-bottom:20px; }
.ok-yukle-bakiye{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--altin); font-weight:700; }
.ok-yukle-ust p{ flex:1; min-width:240px; color:var(--gri); margin:0; font-size:.92rem; }
.ok-yukle-form{ background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:22px; }
.ok-yukle-paketler{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 22px; }
.ok-yukle-paket{ cursor:pointer; }
.ok-yukle-paket input{ position:absolute; opacity:0; pointer-events:none; }
.ok-yukle-paket-ic{ display:flex; flex-direction:column; gap:3px; padding:16px; border:1.5px solid var(--cizgi); border-radius:var(--r-kart); background:var(--yuzey-2); transition:border-color .16s ease, background .16s ease; text-align:center; }
.ok-yukle-paket-ic b{ font-family:var(--font-display); font-size:1.25rem; color:var(--ink); }
.ok-yukle-paket-ic em{ font-style:normal; font-size:.8rem; color:var(--mint); font-weight:600; }
.ok-yukle-paket-ic em.ok-yukle-nobonus{ color:var(--gri); font-weight:400; }
.ok-yukle-paket-ic small{ color:var(--gri); font-size:.76rem; }
.ok-yukle-paket input:checked + .ok-yukle-paket-ic{ border-color:var(--altin); background:color-mix(in srgb,var(--altin) 12%, var(--yuzey-2)); }
.ok-yukle-paket input:focus-visible + .ok-yukle-paket-ic{ outline:2px solid var(--iris); outline-offset:2px; }
.ok-yukle-ozel{ display:block; margin-bottom:18px; }
.ok-yukle-ozel input{ width:100%; margin-top:6px; }
.ok-yukle-alt{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--cizgi); }
.ok-yukle-toplam span{ display:block; font-size:.8rem; color:var(--gri); }
.ok-yukle-toplam b{ font-family:var(--font-display); font-size:1.5rem; color:var(--mint); }
.ok-yukle-not{ display:flex; align-items:center; gap:8px; margin:16px 0 0; font-size:.8rem; color:var(--gri); }
.ok-yukle-not svg{ color:var(--iris-2); }
@media (max-width:560px){ .ok-yukle-paketler{ grid-template-columns:repeat(2,1fr); } }

/* ---- bayi paneli ---- */
.ok-bayi-durum{ text-align:center; padding:48px 24px; background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); max-width:640px; margin:20px auto; }
.ok-bayi-durum-ikon{ display:inline-grid; place-items:center; width:70px; height:70px; border-radius:18px; background:color-mix(in srgb,var(--iris) 16%,var(--yuzey-2)); color:var(--iris-2); margin-bottom:16px; }
.ok-bayi-durum h2{ color:var(--ink); margin-bottom:8px; }
.ok-bayi-durum p{ color:var(--gri); max-width:46ch; margin:0 auto 20px; }
.ok-bayi-kartlar{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.ok-bayi-kart{ padding:18px; background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); display:flex; flex-direction:column; gap:2px; }
.ok-bayi-kart span{ font-size:.82rem; color:var(--gri); }
.ok-bayi-kart b{ font-family:var(--font-display); font-size:1.5rem; color:var(--altin); }
.ok-bayi-kart small{ font-size:.76rem; color:var(--gri); }
.ok-bayi-kart a{ font-size:.82rem; color:var(--iris-2); margin-top:2px; }
.ok-bayi-anahtar-kart,.ok-bayi-dok,.ok-bayi-siparisler{ background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:22px; margin-bottom:20px; }
.ok-bayi-bas{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ok-bayi-bas h3{ display:flex; align-items:center; gap:8px; color:var(--ink); }
.ok-api-alan{ display:block; margin-bottom:16px; font-size:.86rem; color:var(--gri); }
.ok-api-kutu{ display:flex; gap:10px; align-items:center; margin-top:6px; }
.ok-api-kutu code{ flex:1; font-family:ui-monospace,monospace; background:var(--panel); border:1px solid var(--cizgi); border-radius:9px; padding:11px 14px; color:#fff; word-break:break-all; user-select:all; font-size:.9rem; }
.ok-api-gizli code{ color:var(--gri); letter-spacing:2px; }
.ok-api-uyari{ display:block; color:var(--altin); margin-top:6px; font-size:.78rem; }
.ok-bayi-dok h3,.ok-bayi-siparisler h3{ color:var(--ink); margin-bottom:10px; }
.ok-bayi-dok h4{ color:var(--ink); margin:18px 0 8px; }
.ok-bayi-dok p{ color:var(--gri); font-size:.9rem; }
.ok-bayi-dok code{ background:var(--panel); border:1px solid var(--cizgi); border-radius:6px; padding:2px 7px; font-family:ui-monospace,monospace; color:var(--iris-2); font-size:.86rem; }
.ok-dok-tablo{ overflow-x:auto; margin:12px 0; }
.ok-dok-tablo code{ white-space:nowrap; }
.ok-kod-ornek{ background:var(--panel); border:1px solid var(--cizgi); border-radius:10px; padding:16px; overflow-x:auto; }
.ok-kod-ornek code{ background:none; border:none; padding:0; color:#cdd6e6; font-size:.84rem; line-height:1.6; white-space:pre; display:block; }
@media (max-width:720px){ .ok-bayi-kartlar{ grid-template-columns:1fr; } }

/* ---- mobil taşma düzeltmeleri (grid blowout önleme) ---- */
html,body{ overflow-x:clip; max-width:100%; }
.nx-hero-ic > *,.ok-nasil > *,.ok-oyun-izgara > *,.ok-bayi-kartlar > *,.nx-neden > *,.ok-yukle-paketler > *{ min-width:0; }
.nx-hero h1,.ok-hero-baslik,.ok-vitrin-ad,.nx-hero-alt{ overflow-wrap:anywhere; }
.ok-vitrin,.ok-cuzdan,.ok-bayi{ max-width:100%; }
.ok-kod-deger,.ok-api-kutu code{ overflow-wrap:anywhere; }
@media (max-width:620px){
    .ok-hero-cta .buton{ flex:1 1 auto; justify-content:center; }
    .ok-guven-serit{ gap:12px; }
    .nx-hero-ist{ gap:18px; }
}

/* ---- checkout dijital teslimat bloğu ---- */
.ok-dijital-teslim{ display:flex; gap:14px; align-items:flex-start; padding:16px; background:color-mix(in srgb,var(--mint) 10%,var(--yuzey-2)); border:1px solid color-mix(in srgb,var(--mint) 30%,var(--cizgi)); border-radius:var(--r-kart); margin-bottom:12px; }
.ok-dijital-ikon{ flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--mint) 20%,transparent); color:var(--mint); }
.ok-dijital-teslim b{ color:var(--ink); display:block; margin-bottom:2px; }
.ok-dijital-teslim p{ color:var(--gri); font-size:.88rem; margin:0; }