/* =====================================================================
   RENK TOKEN KATMANI — v133   (KOYU + GTA VI)
   ---------------------------------------------------------------------
   ACIK TEMA KALDIRILDI (v133). Uc blok vardi: taban :root acik degerleri
   tasiyor, @media(prefers-color-scheme:dark) ve :root[data-theme="dark"]
   ise ayni koyu degerleri IKI KEZ tekrarliyordu. Acik palet cilalanmamisti
   ve kullanilmiyordu; ustelik "auto" secenegi isletim sistemi acik
   tercihindeyse kullaniciyi oraya dusuruyordu.

   Artik TABAN :root KOYU. Bilinmeyen/eskimis bir tema degeri, isletim
   sistemi tercihi, hatta hic nitelik olmamasi bile koyu temaya duser —
   acik diye bir render yolu YOK.

   TEMA SECIMI:
     <html data-theme="dark">  -> koyu (varsayilan, tabanla ayni)
     <html data-theme="gta6">  -> GTA VI / Vice City
   ===================================================================== */

/* =====================================================================
   🔴 YERLI KONTROLLER KOYU BOYANMALI (color-scheme)
   ---------------------------------------------------------------------
   Sikayet: sepette ulke listesi acilinca BEYAZ cikiyor, yalnizca fareyle
   uzerine gelince ulke okunuyordu.

   Sebep: <select>'in acilir listesini TARAYICI/ISLETIM SISTEMI boyar,
   CSS degil. `color-scheme` hicbir yerde tanimli degildi, yani varsayilan
   ACIK kabul ediliyordu: liste zemini BEYAZ, secenek metni ise koyu
   temadan gelen BEYAZ -> beyaz uzerine beyaz. Fareyle uzerine gelince
   satir vurgulanip zemin degistigi icin metin okunur oluyordu.

   Olculdu (cart.php, ulke secici): OPTION rengi rgb(255,255,255),
   OPTION zemini rgba(0,0,0,0), color-scheme "normal".

   ⚠️ Bu YALNIZCA sepete ozgu degildi — projede hicbir yerde
   `color-scheme` yoktu, yani panel ve admin formlarindaki butun
   <select>'ler ayni sorunu tasiyordu.

   `:root`ta tanimlanir cunku acik tema v133'te KALDIRILDI (§3t): taban
   `:root` koyu ve acik bir render yolu yok.
   ===================================================================== */
:root { color-scheme: dark; }

:root {
    --sb-bg:          #09090c;
    --sb-surface:     #141419;
    --sb-surface-2:   #1c1c22;
    --sb-surface-3:   #24242c;
    --sb-elevated:    #1e1e25;

    --sb-text:        #f5f5f7;
    --sb-text-strong: #ffffff;
    --sb-text-2:      rgba(235,235,245,.64);   /* 6.90:1 */
    /* .40 idi -> AA'nin altindaydi (3.31–3.42:1). v129'da kenar cubugunun
       zemini kaldirilinca bolum etiketleri sayfa zeminine dustu ve fark
       edildi; render edilen sayfada olculup alfa cozuldu. */
    --sb-text-3:      rgba(235,235,245,.52);   /* 4.59–4.97:1 */
    --sb-on-accent:   #ffffff;

    --sb-line:        rgba(255,255,255,.09);
    --sb-line2:       rgba(255,255,255,.16);
    --sb-fill-1:      rgba(128,128,140,.13);
    --sb-fill-2:      rgba(128,128,140,.20);
    --sb-fill-3:      rgba(128,128,140,.30);

    --sb-accent:      #8778ff;    /* 5.39:1 kart, 4.52:1 en acik yuzey */
    --sb-accent-rgb:  135,120,255;
    --sb-accent-fill: #6d5cff;    /* beyaz metinle 4.55:1 */
    --sb-accent-weak: rgba(135,120,255,.15);
    --sb-accent-line: rgba(135,120,255,.34);

    --sb-ok:    #30d158;  --sb-ok-rgb:   48,209,88;
    --sb-warn:  #ff9f0a;  --sb-warn-rgb: 255,159,10;
    --sb-bad:   #ff453a;  --sb-bad-rgb:  255,69,58;
    --sb-info:  #64d2ff;  --sb-info-rgb: 100,210,255;

    --sb-sh-1: 0 1px 2px rgba(0,0,0,.40);
    --sb-sh-2: 0 4px 14px rgba(0,0,0,.45);
    --sb-sh-3: 0 12px 34px rgba(0,0,0,.55);

    --sb-glass:      rgba(20,20,26,.72);
    --sb-glass-line: rgba(255,255,255,.09);
    --sb-vignette:   rgba(0,0,0,.55);
    --sb-texture:    rgba(235,235,245,.06);
}

/* =====================================================================
   GTA VI / VICE CITY TEMASI   :root[data-theme="gta6"]
   ---------------------------------------------------------------------
   Onceki temalarda notr gri bir merdiven + tek aksan vardi. Burada
   kimlik RENGIN KENDISI: alacakaranlik moru zemin, neon pembe aksan,
   cyan ikincil, gun batimi turuncusu uyari.

   Degerler goz karariyla SECILMEDI. Yuzey merdiveni mor-lacivert tarafa
   kaydirildi, sonra her rol icin en acik panel yuzeyinde (#2a1f42 —
   aksan metni icin EN ZOR zemin) kontrast olculdu:

     aksan   #ff3d9a   4.65:1   dolgu #e6006e / beyaz metin 4.58:1
     cyan    #3de0ff   9.69:1
     mint    #2ef2a5  10.46:1
     sunset  #ffa23d   7.64:1
     kirmizi #ff4d6d   4.76:1
     metin   #f7f2ff  16.93:1 (kart) / 18.12:1 (sayfa)

   Aksan ve dolgu AYNI DEGER DEGIL — bkz. appearance_accent_fill().
   ===================================================================== */
:root[data-theme="gta6"] {
    /* ---- yuzeyler: Vice City gun batimi ----
       IKI KEZ acildi. v133'te #0b0713 -> #140c24 yeterli olmadi: hala
       "ic karartan" bir mor-lacivertti. v135'te hem BELIRGIN acildi hem de
       tonu MAGENTA tarafina kaydirildi (ton 292, doygunluk %46) — artik
       lacivert degil erik/magenta okunuyor, yani Vice City'nin kendisi.

       Aydinlik merdiveni: .115 / .155 / .196 / .245 — esit araliklarla
       artiyor, boylece kart/zemin/girinti ayrimi her kademede ayni
       gucte hissediliyor. */
    --sb-bg:          #27102b;
    --sb-surface:     #35153a;
    --sb-surface-2:   #431b49;
    --sb-surface-3:   #54225b;
    --sb-elevated:    #4a1e51;

    /* ---- metin ----
       Yuzeyler acildikca metnin de acilmasi gerekti; oranlar EN ACIK
       yuzeye (#54225b) gore olculdu, cunku kenar cubugu seffaf ve
       etiketler farkli zeminlerin uzerine denk gelebiliyor. */
    --sb-text:        #fdf5ff;
    --sb-text-strong: #ffffff;
    --sb-text-2:      rgba(253,245,255,.74);   /* 6.86:1 */
    --sb-text-3:      rgba(253,245,255,.60);   /* 5.06:1 */
    --sb-on-accent:   #ffffff;

    /* ---- PASTEL katman ----
       Neon aksanin yaninda gozu dinlendiren yumusak tonlar. Yuzeyler
       acilinca pasteller de aciltildi, yoksa zeminle ayni parlaklik
       bandina girip siliniyorlardi. Ucu de en acik yuzeyde AA. */
    --sb-pastel-pink: #ffb8dc;   /* 7.48:1 */
    --sb-pastel-lav:  #d4b9ff;   /* 6.93:1 */
    --sb-pastel-cyan: #b9ecf7;   /* 9.34:1 */

    /* ---- cizgi/dolgu: PEMBE tonlu (notr gri degil) ---- */
    --sb-line:        rgba(255,150,215,.16);
    --sb-line2:       rgba(255,150,215,.30);
    --sb-fill-1:      rgba(255,160,225,.09);
    --sb-fill-2:      rgba(255,160,225,.15);
    --sb-fill-3:      rgba(255,160,225,.24);

    /* ---- aksan: neon pembe ----
       Yuzeyler her acildiginda aksanin da acilmasi gerekti, yoksa AA
       altina duser: #ff3d9a (4.14) -> #ff6ab4 (4.52) -> #ff6ab4 (4.54).
       PHP tarafi (appearance_theme_palette) AYNI degeri basmali. */
    --sb-accent:      #ff6ab4;   /* 4.54 / 6.04 / 6.67 */
    --sb-accent-rgb:  255,106,180;
    --sb-accent-fill: #e60072;   /* beyaz metinle 4.56:1 */
    --sb-accent-weak: rgba(255,106,180,.16);
    --sb-accent-line: rgba(255,106,180,.38);

    /* ---- durum: sadece uc renk + aksan. "Cok renk goz yorar" ----
       Bunlar da bir kademe aciltildi; koyu tonlari yeni zeminde
       matlasiyordu. */
    --sb-ok:    #4df5b0;  --sb-ok-rgb:   77,245,176;   /*  8.54:1 */
    --sb-warn:  #ffb257;  --sb-warn-rgb: 255,178,87;   /*  6.69:1 */
    --sb-bad:   #ff7590;  --sb-bad-rgb:  255,117,144;  /*  4.67:1 */
    --sb-info:  #5ce6ff;  --sb-info-rgb: 92,230,255;   /*  8.09:1 */

    /* Golgeler erik tonlu — notr siyah golge bu zeminde "kir" gibi duruyor */
    --sb-sh-1: 0 1px 2px rgba(26,3,30,.42);
    --sb-sh-2: 0 4px 16px rgba(26,3,30,.46);
    --sb-sh-3: 0 14px 38px rgba(26,3,30,.56);

    --sb-glass:      rgba(53,21,58,.72);
    --sb-glass-line: rgba(255,150,215,.17);
    /* Vinyet hafifletildi: koyu bir vinyet, acilan zemini kenarlardan
       tekrar karartiyor ve "ic karartan" hissi geri getiriyordu. */
    --sb-vignette:   rgba(30,4,34,.52);
    --sb-texture:    rgba(255,150,215,.08);

    /* Yonetim kimligi bu temada da kehribar kalir — admin/musteri ayrimi
       renkle yapiliyor, tema degisince o ayrim kaybolmamali. */
}

/* =====================================================================
   ESKI DEGISKENLERIN TOKEN'A BAGLANMASI
   ---------------------------------------------------------------------
   panel.css'te 572 yerde var(--bg), var(--c-s1), var(--a-line)... gibi
   eski isimler kullaniliyor. Hepsini tek tek degistirmek yerine eski
   isimleri token'lara BAGLIYORUZ — boylece mevcut 572 kural tema
   degisimini kendiliginden takip ediyor ve degistirilmemis hicbir kural
   geride kalmiyor.
   ===================================================================== */
body.dash {
    --bg:      var(--sb-bg);
    --panel:   var(--sb-surface);
    --panel2:  var(--sb-surface-2);
    --line:    var(--sb-line);
    --line2:   var(--sb-line2);
    --txt:     var(--sb-text);
    --mut:     var(--sb-text-2);
    --mut2:    var(--sb-text-3);

    /* musteri katmani */
    --c-bg:    var(--sb-bg);
    --c-s1:    var(--sb-surface);
    --c-s2:    var(--sb-surface-2);
    --c-s3:    var(--sb-surface-3);
    --c-line:  var(--sb-line);
    --c-line2: var(--sb-line2);

    /* yonetim katmani */
    --a-bg:    var(--sb-bg);
    --a-s1:    var(--sb-surface);
    --a-s2:    var(--sb-surface-2);
    --a-s3:    var(--sb-surface-3);
    --a-line:  var(--sb-line);
    --a-line2: var(--sb-line2);
    --a-ok:    var(--sb-ok);
    --a-warn:  var(--sb-warn);
    --a-bad:   var(--sb-bad);
    --a-info:  var(--sb-info);

    /* yonetim kimlik rengi — kehribar yerine iOS turuncusu */
    --admin:      var(--sb-warn);
    --admin-soft: rgba(var(--sb-warn-rgb),.12);
    --admin-line: rgba(var(--sb-warn-rgb),.30);

    /* ---- AKSANIN TEK KAYNAGI ----------------------------------------
       --acc  : Appearance ekranindan secilen renk. appearance_css_vars()
                :root'a INLINE basar ve panel.css'ten SONRA geldigi icin
                buradaki tema varsayilanini ezer.
       --sb-* : temanin kendi aksani (bu dosyanin basindaki token blogu).

       Ikisi de CSS'te kullaniliyordu; ayni ekranda IKI FARKLI aksan
       cikiyordu (butonlar admin renginde, ikonlar tema renginde). Burada
       sb-ailesi --acc'ten TURETILIYOR: body'nin kendi bildirimi, :root'tan
       miras alinan degeri her zaman ezer, dolayisiyla kaynak sirasi
       onemli degil. Ayar yoksa :root'taki --acc zaten tema token'ina
       dusuyor (asagidaki "shared tokens" blogu) — yani her iki yolda da
       tek renk kalir. */
    --sb-accent:      var(--acc);
    --sb-accent-rgb:  var(--acc-rgb);
    /* Dolgu AYNI ton degil: aksan metin olarak okunacak kadar acik olmali,
       dolgu ise uzerindeki beyaz yaziyi tasiyacak kadar koyu. PHP tarafi
       ikisini de uretiyor (appearance_accent_fill). --acc-fill yoksa
       aksana duser — eski kurulumlarda gorunum bozulmaz. */
    --sb-accent-fill: var(--acc-fill, var(--acc));
    --sb-accent-weak: rgba(var(--acc-rgb),.15);
    --sb-accent-line: rgba(var(--acc-rgb),.34);
}


/* =====================================================================
   ServerBooster — panel.css  (edit ALL design here; config stays clean)
   ===================================================================== */

/* ---------- shared tokens ---------- */
:root {
    /* yuzey/metin degiskenleri token blogunda tanimli (bkz. dosya basi) */

    --acc:var(--sb-accent); --acc-rgb:var(--sb-accent-rgb); --acc2:var(--sb-info);

    --hdr:72px; --side:256px;
}

/* =====================================================================
   AUTH PAGES (login/register) + generic page (checkout) — these run on
   the marketing theme, so only add, don't reset.
   ===================================================================== */
.sb-page-head { padding:150px 0 36px; }
.sb-page-head h1 { margin:0 0 6px; }
.sb-page-head p { color:var(--sb-text-3); margin:0; }
.sb-auth-card { padding:40px; border-radius:14px; background:rgba(20,20,26,.92); border:1px solid var(--sb-line); box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.sb-auth-card h4 { color:var(--sb-text-strong); margin:0; }
.sb-auth-logo { display:block; height:34px; margin:0 auto 22px; }
.sb-trust-row { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; color:var(--sb-text-3); font-size:12px; flex-wrap:wrap; }
.sb-trust-row span { display:inline-flex; align-items:center; gap:6px; }
.sb-trust-row i { color:var(--sb-ok); }
.field-set label { font-size:13px; font-weight:600; color:var(--sb-text-2); }
.form-control { background:var(--sb-surface-3) !important; border:1px solid var(--sb-line) !important; color:var(--sb-text-strong) !important; border-radius:10px !important; padding:12px 14px !important; }
.form-control:focus { border-color:var(--acc) !important; box-shadow:none !important; }
.sb-alert { padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:18px; line-height:1.5; }
.sb-alert.err { background:rgba(var(--sb-bad-rgb),.12); border:1px solid rgba(230,90,90,.35); color:var(--sb-bad); }
.sb-alert.ok  { background:rgba(var(--sb-ok-rgb),.12); border:1px solid rgba(92,199,122,.3); color:var(--sb-ok); }
.sb-link { color:var(--acc); text-decoration:none; font-weight:600; }
.sb-link:hover { color:var(--sb-text-strong); }
/* checkout helpers */
.sb-card { background:var(--sb-surface); border:1px solid var(--sb-line); border-radius:14px; padding:26px; }
.sb-card h4 { color:var(--sb-text-strong); margin:0 0 18px; font-size:17px; }
.sb-field { margin-bottom:16px; }
.sb-field label { display:block; font-size:13px; font-weight:600; color:var(--sb-text-2); margin-bottom:7px; }
.sb-field input { width:100%; background:var(--sb-surface-3); border:1px solid var(--sb-line); border-radius:10px; color:var(--sb-text-strong); font-size:14px; padding:12px 14px; }
.sb-field input:focus { outline:none; border-color:var(--acc); }
.sb-note { font-size:13px; color:var(--sb-text-3); line-height:1.6; }
.sb-osum-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--sb-line); font-size:13.5px; color:var(--sb-text-3); }
.sb-osum-row b { color:var(--sb-text-strong); font-weight:600; }
.sb-osum-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.sb-osum-total .amt { color:var(--sb-text-strong); font-size:26px; font-weight:800; }
.sb-btn { -webkit-appearance:none; appearance:none; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--sb-line); cursor:pointer; padding:11px 20px; border-radius:10px; font-weight:600; font-size:13px; color:var(--sb-text-strong) !important; text-decoration:none; letter-spacing:.1px;
    background:var(--sb-surface-3);
    transition:background .15s ease, border-color .15s ease, color .15s ease; }
.sb-btn:hover { background:var(--sb-fill-3); border-color:rgba(var(--acc-rgb),.35); color:var(--sb-text-strong) !important; }
.sb-btn:active { background:var(--sb-fill-3); }
.sb-btn i { font-size:13px; color:var(--acc); }
.sb-btn.ghost { background:transparent; border:1px solid var(--line2); color:var(--txt) !important; }
.sb-btn.ghost:hover { background:var(--sb-fill-1); border-color:var(--sb-line2); color:var(--sb-text-strong) !important; }
.sb-btn.ghost i { color:var(--mut); }
.sb-btn.block { width:100%; }

/* =====================================================================
   DASHBOARD — fully self-contained. No theme css loaded here.
   ===================================================================== */
body.dash { margin:0; padding:0; background:var(--bg); color:var(--txt);
    font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.5; }
body.dash *, body.dash *::before, body.dash *::after { box-sizing:border-box; }
body.dash h1,body.dash h2,body.dash h3,body.dash h4,body.dash h5,body.dash p { margin:0; }
body.dash a { text-decoration:none; color:inherit; }
body.dash img { display:block; max-width:100%; }
body.dash button { font-family:inherit; }
body.dash ul { margin:0; padding:0; list-style:none; }

/* =====================================================================
   PANEL ARKA PLANI — ORTAM ISIGI + DOKU  (v117)
   ---------------------------------------------------------------------
   Ikisi de artik Admin > Site Settings > Appearance'tan secilir; sinif
   <body>'ye appearance_body_class() ile basilir.

   ORTAM ISIGI (.amb-*)
     off  — hicbir renkli blob yok, duz zemin
     soft — YALNIZCA accent rengi, dusuk yogunluk  [varsayilan]
     full — accent + ikincil renk (eski hal)

   NEDEN ayrildi: musteri panelinde sag ust kosede --acc2 (magenta)
   blob'u "mor isima" olarak fazla dikkat cekiyordu. Isik kaynagi
   ikiye cikinca ekranda iki farkli sicaklik olusuyor ve yuzey
   kirli gorunuyor; tek kaynak daha oturmus duruyor.

   DOKU (.bg-*)  — bkz. asagidaki blok
   ===================================================================== */
body.dash::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(760px circle at 6% -8%, rgba(var(--acc-rgb,135,120,255),.18), transparent 58%),
        radial-gradient(900px circle at 72% 112%, rgba(var(--acc-rgb,135,120,255),.11), transparent 62%); }

/* ⚠️ Ortam isigi varyantlari YALNIZCA musteri tarafina uygulanir.
   Yonetim panelinin kendi ortam isigi var (kehribar ikinci kaynak,
   bkz. body.is-admin-ctx::before) ve o bilincli bir kimlik. Buradaki
   secicilere :not(.is-admin-ctx) konmazsa .amb-full (3 sinif) admin
   kuralindan (2 sinif) daha spesifik olur ve onu sessizce ezer. */
body.dash.amb-off:not(.is-admin-ctx)::before { background:none; }

body.dash.amb-full:not(.is-admin-ctx)::before {
    background:
        radial-gradient(760px circle at 6% -8%, rgba(var(--acc-rgb,135,120,255),.22), transparent 56%),
        radial-gradient(680px circle at 96% 6%, rgba(var(--acc2-rgb,230,21,175),.16), transparent 55%),
        radial-gradient(820px circle at 72% 112%, rgba(var(--acc-rgb,135,120,255),.13), transparent 60%),
        radial-gradient(900px circle at 30% 60%, rgba(70,90,200,.06), transparent 70%); }

/* =====================================================================
   PANEL ARKA PLAN DOKUSU (.bg-dots / .bg-grain / .bg-mesh / .bg-grid / .bg-plain)
   ---------------------------------------------------------------------
   Hepsi TEK bir psodo-elemanda (body.dash::after). Varsayilan artik
   NOKTA MATRISI: izgara cizgileri ekranda surekli devam eden bir yapi
   kurar ve icerik kartlarinin kenarlariyla yarisir; noktalar ise
   "yuzey" hissi verir ama yon gostermez, bu yuzden daha sakin okunur.

   Hicbiri istek yapmaz (harici gorsel yok) ve hicbiri animasyonlu
   degil — arka plan hareketi veri ekraninda dikkat dagitir.
   ===================================================================== */
body.dash::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; }

/* --- NOKTA MATRISI (varsayilan) ------------------------------------- */
body.dash.bg-dots::after {
    background-image:radial-gradient(var(--sb-texture) 1px, transparent 1.2px);
    background-size:26px 26px;
    /* maske: ustte biraz belirgin, asagi dogru tamamen kaybolur.
       Eski maske ust ORTAYA odakliydi ve orada bir "parlak leke"
       olusturuyordu; bu dogrusal maske leke yapmaz. */
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 82%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 82%);
}

/* --- INCE KUMLANMA (grain) ------------------------------------------
   SVG feTurbulence data URI: tek elemanda film grenli doku. Yapisi
   yok, yon gostermez — en "sakin" secenek ama yuzey olu de durmaz. */
body.dash.bg-grain::after {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    opacity:.5;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 95%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 95%);
}

/* --- YUMUSAK RENK GECISLERI (mesh) ----------------------------------
   Desen yok; birbirine giren genis, cok dusuk yogunluklu lekeler.
   En modern ama en "yumusak" secenek — teknik his istemeyenler icin. */
body.dash.bg-mesh::after {
    background:
        radial-gradient(1100px circle at 18% 12%, rgba(var(--acc-rgb,135,120,255),.07), transparent 62%),
        radial-gradient(900px  circle at 84% 30%, rgba(120,200,255,.045), transparent 60%),
        radial-gradient(1000px circle at 50% 92%, rgba(var(--acc-rgb,135,120,255),.05), transparent 66%);
}

/* --- ESKI CIFT IZGARA (grid) ---------------------------------------- */
body.dash.bg-grid::after {
    background-image:
        linear-gradient(rgba(150,160,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,160,255,.03) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
    background-size:52px 52px, 52px 52px, 13px 13px, 13px 13px;
    -webkit-mask-image:radial-gradient(circle at 50% 18%, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%);
            mask-image:radial-gradient(circle at 50% 18%, #000 0%, rgba(0,0,0,.4) 45%, transparent 78%);
}

/* --- ALTIGEN PETEK (hex) — varsayilan ---------------------------------
   Oyun kimligine en yakin doku. SVG data URI: tek karo, kenarlari
   birbirine gecen altigenler. Cizgi 1px ve cok dusuk opaklikta —
   izgaranin aksine SUREKLI bir yon vermiyor, goz uzerinde durmuyor. */
body.dash.bg-hex::after {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23808090' stroke-width='1' stroke-opacity='.16'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48.5 L56 64.5 L56 96.5 L28 112.5 L0 96.5 L0 64.5 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:56px 97px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 45%, transparent 84%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.42) 45%, transparent 84%);
}

/* --- CAPRAZ INCE CIZGILER (lines) -------------------------------------
   Izgaradan sakin: tek yon, genis aralik. Kart kenarlariyla yarismaz
   cunku hicbir cizgi yatay/dikey degil. */
body.dash.bg-lines::after {
    background-image:repeating-linear-gradient(135deg,
        var(--sb-texture) 0px, var(--sb-texture) 1px,
        transparent 1px, transparent 9px);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.40) 48%, transparent 86%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.40) 48%, transparent 86%);
}

/* --- TEMA GORSELI (photo) ---------------------------------------------
   Gorsel .db-bgfx katmaninda (asagida); burada yalnizca dokuyu kapatiyoruz
   ki fotografin uzerine ikinci bir desen binmesin. */
body.dash.bg-photo::after { display:none; }

/* --- DUZ (plain) ----------------------------------------------------- */
body.dash.bg-plain::after { display:none; }

/* =====================================================================
   ARKA PLAN EFEKT KATMANI (.db-bgfx)  — v118
   ---------------------------------------------------------------------
   body.dash'in iki psodo-elemani zaten dolu (::before = ortam isigi,
   ::after = doku). Fotograf ve vinyet icin UCUNCU bir katman gerekiyordu;
   dash_head() bos bir <div class="db-bgfx"> basiyor.

   Kendisi fotografi tasir, ::after'i koyu katman + vinyeti cizer.
   Hicbiri secili degilse tamamen gorunmez — bos div'in maliyeti yok.
   ===================================================================== */
.db-bgfx { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* --- fotograf ---
   Yol panel.css'e GORELI (.sb-wallet-widget ile ayni kural). Kok-mutlak
   yazilirsa alt klasore kurulan sitelerde kirilir; goreli yazilirsa
   stylesheet tabanina gore cozulur ve dogru bulunur.

   ⚠️ background-attachment:fixed KULLANILMIYOR — .db-bgfx zaten
   position:fixed, yani gorsel kendiliginden sabit. Ayrica iOS Safari
   fixed attachment'i yok sayar ve orada gorsel zipliyordu.

   Hangi gorsel: <body>'deki .photo-* sinifi belirler (bkz.
   appearance_body_class). Dosyalar 2200px/WebP'ye kucultuldu:
   GTA 703 KB -> 129 KB, Rust 4.5 MB -> 155 KB. */
body.dash.bg-photo .db-bgfx {
    background-position:center center; background-size:cover; background-repeat:no-repeat;
    /* Doygunluk kisiliyor: kaynak gorseller cok canli (GTA duvar kagidi
       yogun magenta) ve tam doygunlukta panel bir "poster" gibi
       duruyor, arayuz degil. */
    filter:saturate(.62) brightness(.72);
}
body.dash.bg-photo.photo-gta6  .db-bgfx { background-image:url('../../images/background/panel-gta6.webp'); }
body.dash.bg-photo.photo-gta   .db-bgfx { background-image:url('../../images/background/panel-gta.webp'); }
body.dash.bg-photo.photo-redm  .db-bgfx { background-image:url('../../images/background/panel-redm.webp'); }
body.dash.bg-photo.photo-rust  .db-bgfx { background-image:url('../../images/background/panel-rust.webp'); }
body.dash.bg-photo.photo-space .db-bgfx { background-image:url('../../images/background/space.webp'); }

/* ⚠️ GTA6 duvar kagidi 800x450 — digerleri 2200px. Tam ekranda buyutulunce
   yumusak kalir. Uzerinde zaten koyu katman + doygunluk filtresi oldugu
   icin fark edilmiyor, ama daha yuksek cozunurluklu bir kaynak gelirse
   images/background/panel-gta6.webp degistirilmelidir. Buyuterek
   "duzeltmek" mumkun degil: kaynakta o detay yok, yalnizca bayt eklerdi. */

/* Okunabilirlik garantisi: fotografin uzerine koyu katman. Bu OLMADAN
   acik bolgelerde beyaz metin kayboluyor.
   Ustte daha seffaf (gorsel taninsin), asagi indikce koyulasiyor —
   icerik asagida yogunlasiyor. */
body.dash.bg-photo .db-bgfx::after {
    content:""; position:absolute; inset:0;
    background:
        linear-gradient(180deg, rgba(9,10,16,.74) 0%, rgba(9,10,16,.88) 46%, rgba(9,10,16,.95) 100%);
}
/* Vice City'de ortu MOR tonlu — notr siyah ortu, altindaki pembe/turkuaz
   duvar kagidini griye cekiyor ve tema kimligi zeminde kayboluyordu. */
:root[data-theme="gta6"] body.dash.bg-photo .db-bgfx::after {
    background:
        linear-gradient(180deg, rgba(39,16,43,.58) 0%, rgba(39,16,43,.76) 46%, rgba(39,16,43,.88) 100%);
}
/* Duvar kagidi bu temada daha canli kalsin — kimligin kaynagi o. */
:root[data-theme="gta6"] body.dash.bg-photo .db-bgfx { filter:saturate(.92) brightness(.80); }

/* --- kenar vinyeti ---
   Dokudan BAGIMSIZ: hangi doku secili olursa olsun uzerine biner.
   Kenarlari karartip gozu icerige toplar. */
body.dash.has-vig .db-bgfx {
    box-shadow:inset 0 0 220px 90px var(--sb-vignette);
}
/* fotograf + vinyet birlikteyse golge koyu katmanin USTUNDE kalmali */
body.dash.bg-photo.has-vig .db-bgfx::after { box-shadow:inset 0 0 220px 90px var(--sb-vignette); }

/* ---- TOPBAR ---- */
.db-topbar { position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:1000;
    display:flex; align-items:center; justify-content:space-between; padding:0 20px;
    background:var(--sb-glass); border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.db-topbar-left { display:flex; align-items:center; gap:14px; }
.db-brand img { height:52px; width:auto; max-width:240px; display:block; }
.db-brand-txt { color:var(--sb-text-strong); font-weight:800; font-size:17px; }
.db-burger { display:none; width:40px; height:40px; border:1px solid var(--line); background:var(--bg); color:var(--sb-text-strong); border-radius:9px; cursor:pointer; font-size:15px; }
.db-topbar-right { display:flex; align-items:center; gap:9px; }
.db-back { color:var(--mut); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; padding:0 4px; }
.db-back:hover { color:var(--sb-text-strong); }
.db-cta { display:inline-flex; align-items:center; gap:7px; padding:0 14px; height:36px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--sb-text-strong) !important; border:1px solid var(--sb-line);
    background:var(--sb-surface-3);
    transition:background .15s ease, border-color .15s ease, color .15s ease; }
.db-cta:hover { background:var(--sb-fill-3); border-color:rgba(var(--acc-rgb),.35); color:var(--sb-text-strong) !important; }
.db-cta i { color:var(--acc); font-size:12px; }
.db-cta:active { background:var(--sb-fill-3); }
.db-user { position:relative; display:flex; align-items:center; gap:10px; padding:5px 8px 5px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); cursor:pointer; transition:border-color .15s; }
.db-user:hover { border-color:var(--line2); }
.db-user-caret { color:var(--mut2); font-size:11px; transition:transform .2s; }
.db-user:has(.db-usermenu.open) .db-user-caret { transform:rotate(180deg); }
.db-usermenu { position:absolute; top:calc(100% + 10px); right:0; width:264px; background:var(--panel2); border:1px solid var(--line2); border-radius:13px; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s, transform .18s, visibility .18s; z-index:1100; overflow:hidden; cursor:default; }
.db-usermenu.open { opacity:1; visibility:visible; transform:translateY(0); }
.db-usermenu-head { display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line); }
.db-usermenu-head strong { display:block; color:var(--sb-text-strong); font-size:14px; font-weight:700; }
.db-usermenu-head small { color:var(--mut); font-size:12px; }
.db-usermenu-items { padding:8px; }
.db-usermenu-items a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:var(--mut); font-size:13.5px; font-weight:600; transition:.13s; }
.db-usermenu-items a i { width:16px; text-align:center; color:var(--mut2); }
.db-usermenu-items a:hover { background:var(--sb-fill-1); color:var(--sb-text-strong); }
.db-usermenu-items a:hover i { color:var(--acc); }
.db-usermenu-admin { color:var(--sb-warn) !important; }
.db-usermenu-admin i { color:var(--sb-warn) !important; }
.db-usermenu-foot { padding:8px; border-top:1px solid var(--line); }
.db-usermenu-foot a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:var(--mut); font-size:13.5px; font-weight:600; transition:.13s; }
.db-usermenu-foot a:hover { background:rgba(var(--sb-bad-rgb),.10); color:var(--sb-bad); }
.db-avatar { width:36px; height:36px; border-radius:9px; background:var(--sb-fill-3); display:flex; align-items:center; justify-content:center; color:var(--sb-text); font-weight:800; font-size:14px; }
.db-user-meta strong { display:block; color:var(--sb-text-strong); font-size:13px; font-weight:700; line-height:1.2; }
.db-user-meta small { color:var(--mut2); font-size:11px; }

/* ---- SIDEBAR ---- */
.db-sidebar { position:fixed; top:var(--hdr); left:0; bottom:0; width:var(--side); z-index:900;
    background:var(--panel); border-right:1px solid var(--line);
    display:flex; flex-direction:column; }
.db-nav { flex:1; overflow-y:auto; padding:18px 14px; }
.db-nav-label { display:block; padding:14px 12px 7px; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--mut2); font-weight:700; }
.db-nav-label:first-child { padding-top:0; }
.db-nav-item { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; color:var(--mut); font-weight:600; font-size:14px; margin-bottom:3px; position:relative; transition:background .15s,color .15s; }
.db-nav-item i { width:18px; text-align:center; font-size:15px; color:var(--mut2); transition:color .15s; }
.db-nav-item:hover { background:var(--sb-fill-1); color:var(--sb-text-strong); }
.db-nav-item:hover i { color:var(--sb-text-strong); }
.db-nav-item.is-active { background:rgba(var(--acc-rgb,135,120,255),.13); color:var(--sb-text-strong); }
.db-nav-item.is-active i { color:var(--acc); }
.db-nav-item.is-active::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--acc); }
.db-nav-admin { color:var(--sb-warn); }
.db-nav-admin i { color:var(--sb-warn); }
.db-nav-admin:hover { background:rgba(var(--sb-warn-rgb),.10); color:var(--sb-warn); }
.db-nav-foot { padding:14px; border-top:1px solid var(--line); }
.db-logout { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; color:var(--mut); font-weight:600; font-size:14px; transition:.15s; }
.db-logout:hover { background:rgba(var(--sb-bad-rgb),.10); color:var(--sb-bad); }

/* ---- BACKDROP (mobile) ---- */
.db-backdrop { display:none; position:fixed; inset:var(--hdr) 0 0 0; background:rgba(0,0,0,.5); z-index:850; }

/* ---- MAIN ---- */
.db-main { margin-left:var(--side); padding-top:var(--hdr); min-height:100vh; position:relative; z-index:1; }
.db-content { padding:30px 38px; max-width:1640px; min-height:calc(100vh - var(--hdr)); }
.db-pagehead { display:flex; align-items:center; gap:14px; padding:26px 32px 0; }
.db-pagehead-ic { width:44px; height:44px; border-radius:12px; background:rgba(var(--acc-rgb,135,120,255),.12); display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:18px; }
.db-pagehead h1 { font-size:20px; color:var(--sb-text-strong); font-weight:800; letter-spacing:-.3px; }
.db-pagehead p { color:var(--mut2); font-size:13px; margin-top:3px; }

/* ---- alerts (dash) ---- */
/* §3eb — kullanici: "bilgilendirme kutulari yapay zekasal duruyor, modern tonlarda yap".
   Renkli cerceve + renkli zemin + renkli metin YOK: panelin kendi yuzeyi, ince notr cizgi;
   anlam ikon rozetinde (--al) ve soldan cok hafif bir tonda. Yonetim kabugu ayni yapiyi
   kendi tokenlariyla ezer (body.adm-ui .db-alert). Yazi tipine dokunulmaz (§3du). */
.db-alert {
    --al: var(--acc, #8778ff); --al-rgb: var(--acc-rgb, 135,120,255);
    display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:12px;
    font-size:13.5px; line-height:1.55; margin-bottom:22px; color:var(--mut, #9095a3);
    background:linear-gradient(90deg, rgba(var(--al-rgb),.07), rgba(var(--al-rgb),0) 45%), var(--panel, #13141b);
    border:1px solid var(--line, rgba(255,255,255,.08));
}
.db-alert > i {
    width:26px; height:26px; flex-shrink:0; margin-top:-2px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12.5px; color:var(--al); background:rgba(var(--al-rgb),.13);
}
.db-alert b, .db-alert strong { color:var(--txt, #fff); font-weight:600; }
.db-alert.ok { --al:var(--sb-ok); --al-rgb:var(--sb-ok-rgb); }
.db-alert.err  { --al:var(--sb-bad);  --al-rgb:var(--sb-bad-rgb); border-color:rgba(var(--sb-bad-rgb),.22); }
.db-alert.warn { --al:var(--sb-warn); --al-rgb:var(--sb-warn-rgb); }
.db-alert.note { --al:var(--acc, #8778ff); --al-rgb:var(--acc-rgb, 135,120,255); }

/* ---- hero ---- */
.db-hero { position:relative; overflow:hidden; border-radius:18px; padding:42px 40px; margin-bottom:24px; border:1px solid var(--line);
    background:var(--sb-bg); min-height:200px; display:flex; flex-direction:column; justify-content:center; }
/* Arka plan gorseli (~%70 karartilir).
   ONEMLI: Bu gorsel YEREL. Onceden Rockstar'in CDN'inden hotlink ediliyordu
   (Jason_and_Lucia_02_ultrawide.915c382b.jpg); dosya adindaki icerik hash'i
   onlar siteyi guncelleyince degisti ve adres 404 dondu — "Welcome back"
   kartinin arka plani bu yuzden bir gun kendiliginden kayboldu.
   Baskasinin CDN'ine bagli kalmamak icin tema klasorundeki gorsel kullaniliyor. */
.db-hero::before { content:""; position:absolute; inset:0; z-index:0;
    background:url('../../images/background/14.webp') center 42% / cover no-repeat; }
.db-hero::after { content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(10,11,15,.92) 0%, rgba(10,11,15,.78) 45%, rgba(14,15,19,.55) 100%); }
.db-hero > * { position:relative; z-index:2; }
.db-hero h2 { color:#fff; font-size:28px; font-weight:800; margin:0 0 8px; letter-spacing:-.4px; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.db-hero p { color:var(--sb-text); font-size:14.5px; line-height:1.6; max-width:540px; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.db-hero .acts { display:flex; gap:11px; margin-top:22px; flex-wrap:wrap; }

/* ---- stat cards ---- */
.db-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:24px; }
.db-stat { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; min-height:158px; display:flex; flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s; }
.db-stat:hover { transform:translateY(-3px); border-color:var(--line2); box-shadow:0 14px 34px -18px rgba(0,0,0,.7); }
.db-stat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.db-stat .ic { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.db-stat-tag { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--sb-ok); background:rgba(var(--sb-ok-rgb),.12); border:1px solid rgba(92,199,122,.2); padding:4px 9px; border-radius:100px; }
.db-stat-tag i { font-size:9px; }
.db-stat .val { color:var(--sb-text-strong); font-size:32px; font-weight:800; line-height:1; letter-spacing:-.6px; }
.db-stat .lbl { color:var(--mut); font-size:13px; font-weight:600; margin-top:7px; }

/* image-backed stat cards */
.db-stat.has-img { position:relative; overflow:hidden; isolation:isolate; border-color:rgba(255,255,255,.1); }
.db-stat.has-img::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--card-img) center / cover no-repeat; transform:scale(1.04); transition:transform .4s ease; }
.db-stat.has-img:hover::before { transform:scale(1.1); }
.db-stat.has-img::after { content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(160deg, rgba(12,13,17,.72), rgba(12,13,17,.93) 70%); }
.db-stat.has-img .val { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.db-stat.has-img .lbl { color:var(--sb-text); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.db-stat.has-img .ic { backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* ---- grid + panels ---- */
.db-grid { display:grid; grid-template-columns:1.85fr 1.15fr; gap:24px; align-items:start; }
/* 🔴 min-width:0 SART — grid ogeleri varsayilan olarak "min-width:auto"
   tasir, yani ICERIGININ min-content genisliginden daha dar OLAMAZLAR.
   Icinde uzun bir tablo ya da bolunemeyen bir dize varsa sutun fr
   oranini asar ve SAYFA YATAY KAYAR. Olculdu: 1280px'de panel 73px
   tasiyordu ve bu LTR'de de vardi — Arapca RTL'i incelerken ortaya
   cikti. Ayni tuzak .db-grid-2 icin de gecerli. */
.db-grid > *, .db-grid-2 > * { min-width:0; }
.db-panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:22px; overflow:hidden; }
.db-panel-head { position:relative; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); overflow:hidden;
    background:linear-gradient(90deg, rgba(16,17,23,.92) 0%, rgba(16,17,23,.80) 55%, rgba(16,17,23,.62) 100%),
               url('../../images/background/panel-cover.webp') center 30% / cover no-repeat; }
.db-panel-head > * { position:relative; z-index:1; }
.db-panel-head h4 { color:#fff; font-size:15px; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.db-panel-head .sb-link { text-shadow:0 1px 6px rgba(0,0,0,.5); }
.db-panel-body { padding:22px; }
.db-panel-body.flush { padding:0; }

/* ---- table ---- */
.db-table { width:100%; border-collapse:collapse; }
.db-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut2); padding:13px 22px; border-bottom:1px solid var(--line); font-weight:700; }
.db-table td { padding:14px 22px; border-bottom:1px solid var(--sb-line); color:var(--sb-text-2); font-size:13.5px; vertical-align:middle; }
.db-table tbody tr:last-child td { border-bottom:none; }
.db-table tbody tr.clickable { cursor:pointer; transition:background .12s; }
.db-table tbody tr.clickable:hover { background:var(--sb-fill-1); }
.db-svc { display:flex; align-items:center; gap:11px; }
.db-svc .ic { width:34px; height:34px; border-radius:9px; background:var(--sb-fill-2); display:flex; align-items:center; justify-content:center; color:var(--sb-text-2); flex-shrink:0; }
.db-svc b { color:var(--sb-text-strong); font-weight:600; }

/* ---- badges ---- */
.db-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:7px; text-transform:capitalize; }
.db-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.db-badge.pending { background:rgba(var(--sb-warn-rgb),.13); color:var(--sb-warn); }
.db-badge.paid,.db-badge.active,.db-badge.open { background:rgba(var(--sb-ok-rgb),.13); color:var(--sb-ok); }
.db-badge.completed,.db-badge.answered { background:rgba(var(--sb-ok-rgb),.14); color:var(--sb-ok); }
.db-badge.cancelled,.db-badge.refunded,.db-badge.high { background:rgba(var(--sb-bad-rgb),.13); color:var(--sb-bad); }
.db-badge.closed,.db-badge.normal { background:var(--sb-fill-2); color:var(--mut); }
.db-badge.low { background:var(--sb-fill-1); color:var(--mut2); }

/* ---- side widgets ---- */
.db-w { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:22px; }
.db-w h5 { color:var(--sb-text-strong); font-size:14px; margin:0 0 18px; font-weight:700; display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.db-w h5 i { color:var(--sb-text-3); }
.db-mini { display:flex; justify-content:space-between; font-size:13px; padding:7px 0; }
.db-mini span { color:var(--mut); } .db-mini b { color:var(--sb-text-strong); font-weight:600; }
.db-qa { display:flex; flex-direction:column; gap:2px; }
.db-qa a { display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:9px; background:var(--bg); border:1px solid var(--line); color:var(--txt); font-weight:600; font-size:13px; transition:.15s; }
.db-qa a i { width:16px; text-align:center; color:var(--mut); }
.db-qa a:hover { border-color:var(--acc); color:var(--sb-text-strong); }
.db-qa a:hover i { color:var(--acc); }
.db-acct { display:flex; align-items:center; gap:13px; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.db-acct .av { width:46px; height:46px; border-radius:11px; background:var(--sb-fill-3); display:flex; align-items:center; justify-content:center; color:var(--sb-text); font-weight:800; font-size:18px; }
.db-acct .nm { color:var(--sb-text-strong); font-weight:700; font-size:14px; }
.db-acct .em { color:var(--mut); font-size:12px; }
.db-ann { position:relative; font-size:13px; color:var(--sb-text); line-height:1.6; padding:16px 18px; border-radius:12px; border:1px solid var(--line); background:var(--bg); }
.db-ann .date { color:var(--sb-text-3); font-size:11px; margin-bottom:4px; }
.db-ann b { color:var(--sb-text-strong); }

/* ---- duyuru kartlari (announcements sekmesi) ---- */
.db-ann-card { position:relative; border-radius:14px; overflow:hidden; margin-bottom:16px; border:1px solid var(--line); background:var(--panel); }
.db-ann-card:last-child { margin-bottom:0; }
/* opsiyonel kapak gorseli (admin eklerse) */
.db-ann-cover { position:relative; height:150px; background-size:cover; background-position:center; }
.db-ann-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,21,28,.15), rgba(20,21,28,.85)); }
.db-ann-body { padding:20px 22px; }
.db-ann-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--sb-text-3); font-size:12px; margin-bottom:9px; }
.db-ann-meta i { margin-right:5px; opacity:.8; }
.db-ann-pin { color:var(--sb-warn); font-weight:700; }
.db-ann-title { color:var(--sb-text-strong); font-weight:800; font-size:16px; margin-bottom:7px; }
.db-ann-text { color:var(--sb-text-2); font-size:14px; line-height:1.65; }

/* ---- service cards (progress) ---- */
.db-srvs { display:flex; flex-direction:column; gap:14px; padding:22px; }
.db-srv { border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--bg); cursor:pointer; transition:border-color .2s, transform .2s; }
.db-srv:hover { transform:translateY(-2px); border-color:rgba(var(--acc-rgb,135,120,255),.35); }
.db-srv-top { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.db-srv-ic { width:42px; height:42px; border-radius:11px; background:var(--sb-fill-2); display:flex; align-items:center; justify-content:center; color:var(--sb-text-2); font-size:16px; flex-shrink:0; }
.db-srv-meta { flex:1; min-width:0; }
.db-srv-meta .nm { color:var(--sb-text-strong); font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.db-srv-meta .sv { color:var(--mut); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-srv-amt { text-align:right; flex-shrink:0; }
.db-srv-amt b { color:var(--sb-text-strong); font-size:15px; font-weight:800; }
.db-srv-amt span { display:block; color:var(--mut2); font-size:11px; }
.db-prog { height:6px; border-radius:6px; background:var(--sb-fill-2); overflow:hidden; }
.db-prog span { display:block; height:100%; border-radius:6px; background:var(--acc); }
.db-prog-foot { display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; color:var(--mut); }
.db-prog-foot b { color:var(--sb-text-2); font-weight:600; }

/* ---- empty ---- */
.db-empty { text-align:center; padding:48px 20px; }
.db-empty .ec { width:60px; height:60px; border-radius:15px; background:var(--sb-fill-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; color:var(--sb-text-3); }
.db-empty p { color:var(--mut); margin:0 0 26px; line-height:1.7; }

/* ---- ticket rows + thread ---- */
.db-ticket { display:flex; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px solid var(--sb-line); }
.db-ticket:hover { background:var(--sb-fill-1); }
.db-ticket .ic { width:38px; height:38px; border-radius:10px; background:var(--sb-fill-2); color:var(--sb-text-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.db-ticket .info { flex:1; min-width:0; }
.db-ticket .info b { color:var(--sb-text-strong); font-weight:600; font-size:14px; display:block; }
.db-ticket .info span { color:var(--mut2); font-size:12px; }
.db-msg { display:flex; gap:12px; margin-bottom:18px; }
.db-msg .av { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--sb-text-strong); flex-shrink:0; font-size:14px; background:var(--mut2); }
.db-msg.staff .av { background:var(--acc); }
.db-msg .bub { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:13px 16px; max-width:560px; }
.db-msg .bub .who { font-size:12px; color:var(--mut); margin-bottom:5px; }
.db-msg .bub .who b { color:var(--sb-text-strong); }
.db-msg .bub p { margin:0; color:var(--sb-text); font-size:14px; line-height:1.6; white-space:pre-wrap; }

/* ---- forms (dash) ---- */
.db-input, .db-select, .db-textarea { width:100%; background:var(--bg); border:1px solid var(--line2); border-radius:10px; color:var(--sb-text-strong); font-size:14px; padding:12px 14px; font-family:inherit; }
.db-input:focus, .db-select:focus, .db-textarea:focus { outline:none; border-color:var(--acc); }

/* =====================================================================
   TARAYICI OTOMATIK DOLDURMA (autofill)
   ---------------------------------------------------------------------
   `color-scheme` ile AYNI AILE: burayi da CSS degil TARAYICI boyar.
   Chrome, otomatik doldurdugu alana kendi ACIK zeminini dayatir; koyu
   formda alan birden aydinlanir ve yazar rengiyle birlesince okunurlugu
   tahmin edilemez hale gelir. Projede HICBIR kural yoktu.

   ⚠️ `background-color` bu durumda ISE YARAMAZ — tarayicinin dayattigi
   zemini ancak ic golge (inset box-shadow) ortebilir; metin rengi de
   ancak `-webkit-text-fill-color` ile degistirilebilir. Standart yol
   budur, hile degil.

   Etkilenen yerler: giris, kayit, iletisim, cuzdan, odeme — hepsi koyu
   form. Yerelde GERCEK autofill tetiklenemedigi icin (tarayici
   kullanici jesti ister) burada olculen sey kuralin varligidir. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--sb-text-strong, #ffffff);
    -webkit-box-shadow: 0 0 0 1000px var(--sb-surface-2, #1c1c22) inset;
            box-shadow: 0 0 0 1000px var(--sb-surface-2, #1c1c22) inset;
    caret-color: var(--sb-text-strong, #ffffff);
    /* Chrome zemini gecisle geri koyabiliyor; gecisi pratikte durdurur */
    transition: background-color 9999s ease-in-out 0s;
}

/* =====================================================================
   OZEL IKON SETI (.sb-ico) — images/ico/*.webp
   Appearance > `ui_icons` kapaliysa bu ogeler HIC BASILMAZ; kural
   yalnizca hizalama icin. Boyut satir ici width/height ile gelir
   (yerlestirmeye gore degisiyor), burada tekrar edilmez. */
/* 🔴 OZGULLUK: `body.dash img { display:block }` kurali (0,1,2) duz
   `.sb-ico`yu (0,1,0) EZIYORDU. Sonuc: ikon blok oluyor, yanindaki
   metin alt satira dusuyor ve ikon "ustte" gorunuyordu — faturalar
   listesinde tam bu yasandi (olculdu: display=block, 2 satir).
   Bu yuzden seçici `body.dash img.sb-ico` (0,1,2) + sonra geldigi icin
   kazaniyor. Panel disi sayfalar (sepet) icin duz `.sb-ico` de kaliyor. */
.sb-ico,
body.dash img.sb-ico {
    display:inline-block; vertical-align:-.18em; object-fit:contain;
    flex-shrink:0;
}
/* Metin yaninda duruyorsa kucuk bir nefes payi */
h1 .sb-ico, h4 .sb-ico, label .sb-ico, .sb-btn .sb-ico { margin-right:8px; }
/* Bonus merdiveni satir isareti — yuzde bilgisi yerinde kalir */
.sb-bonus-ladder .sb-ico-tier { margin-right:7px; vertical-align:-.22em; }

/* =====================================================================
   KENAR CUBUGU ARAMA SONUCLARI (Ctrl+K)
   Arama modunda menu gizlenir, yerine bu liste gelir — iki liste ust
   uste konfuzyon yaratiyordu. */
body.is-admin-ctx .db-nav-results { display:flex; flex-direction:column; gap:2px; margin:4px 0 8px; }
body.is-admin-ctx .db-nav-result {
    display:block; padding:9px 12px; border-radius:9px;
    color:var(--sb-text-strong,#fff); font-size:13px; font-weight:600;
    text-decoration:none; border:1px solid transparent;
    transition:background .14s var(--c-ease), border-color .14s var(--c-ease);
}
body.is-admin-ctx .db-nav-result:hover,
body.is-admin-ctx .db-nav-result:focus-visible {
    background:var(--sb-fill-2); border-color:rgba(255,255,255,.10);
}
/* Ust yol ("Site Settings › Appearance") — hangi ekrana gidildigi
   belli olmali, yoksa ayni adli iki panel ayirt edilemez. */
body.is-admin-ctx .db-nav-result .p {
    display:block; margin-top:2px; font-size:10.5px; font-weight:600;
    color:var(--sb-text-3); letter-spacing:.2px;
}

/* =====================================================================
   SIPARIS DETAYI — URUN BANDI (.sb-obanner)          v196
   ---------------------------------------------------------------------
   Ana sayfanin (index.php) alt bloklarinin AYNISI: gorsel + ust baslik
   pili + buyuk h2 + paragraf + buton + sagda figur.

   🔴 TEMA SINIFLARI PANELDE YOK. index.php bunu .padding60 / .jarallax /
   .subtitle / .btn-main ile ciziyor; panel yalnizca panel.css yukluyor
   (sb_head_assets($dash=true)), yani o siniflar burada STILSIZ kalirdi
   — §2c-1'de kayitli "Oxanium panelde tanimsiz" tuzaginin aynisi.
   Bu yuzden ayni GORUNUM burada yeniden kuruldu; olculen degerler:
     .subtitle (dark-scheme) : 2px rgba(255,255,255,.25) kenarlik, r=30, bold
     .btn-main               : uppercase, bold, 14px, r=5, beyaz metin
   Buton dolgusu temanin --primary-color'i degil panelin --acc-fill'i:
   o deger "beyaz metinle >=4.5:1" olacak sekilde TURETILIYOR (§3v).

   Gorsel <img> ile basiliyor (temadaki .jarallax-img gibi) — boylece yol
   dokumana gore cozulur ve §3d'deki --card-img tuzagi hic olusmaz. */
body.dash .sb-obanner {
    position:relative; overflow:hidden; isolation:isolate;
    margin:26px 0 8px; padding:52px 56px; border-radius:16px;
    background:#0b0c12;
    border:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-obanner > img.bg {
    position:absolute; inset:0; z-index:-2; display:block;
    width:100%; height:100%; object-fit:cover;
    filter:saturate(.78) brightness(.86);
}
body.dash .sb-obanner::after {   /* okunabilirlik ortusu — soldan saga acilir */
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg,
        rgba(6,7,12,.94) 0%, rgba(6,7,12,.90) 38%,
        rgba(6,7,12,.62) 72%, rgba(6,7,12,.34) 100%);
}
body.dash .sb-obanner .in { position:relative; z-index:1; max-width:62%; }
body.dash .sb-obanner .kicker {   /* tema .subtitle pili */
    display:inline-block; margin:0 0 16px; padding:2px 15px 4px;
    border:2px solid rgba(255,255,255,.25); border-radius:30px;
    color:#fff; font-size:13px; font-weight:700; line-height:1.5;
}
body.dash .sb-obanner.is-soon .kicker {
    border-color:rgba(var(--sb-warn-rgb, 255,159,10), .55);
}
body.dash .sb-obanner h2 {
    margin:0 0 14px; font-size:34px; font-weight:800; letter-spacing:-.6px;
    color:#fff; line-height:1.14;
}
body.dash .sb-obanner p {
    margin:0 0 24px; color:rgba(255,255,255,.78);
    font-size:14px; line-height:1.7;
}
/* ⚠️ BANDIN BUTONU YOK (v197). Ana sayfada o buton bir satis cagrisi;
   siparis detayinda musteri urunu zaten almis durumda. Yenileme
   konsolun "Faturalandirma ve yenileme" panelinde. */
body.dash .sb-obanner p:last-child { margin-bottom:0; }
body.dash .sb-obanner > img.fig {   /* tema: sag altta figur (sm-hide) */
    position:absolute; right:0; bottom:0; z-index:0;
    height:100%; width:auto; display:block; pointer-events:none;
    /* ⚠️ 100%'un ustune CIKMASIN. Figur alt kenara oturuyor, yani tasan
       kisim USTTEN kirpilir — 118% denendi ve karakterin BASINI kesti
       (olculdu: 66px). Kaynak zaten kalcadan kirpilmis bir render. */
}
@media (max-width:991px) {
    body.dash .sb-obanner { padding:34px 30px; }
    body.dash .sb-obanner .in { max-width:100%; }
    body.dash .sb-obanner > img.fig { display:none; }   /* tema .sm-hide */
    body.dash .sb-obanner h2 { font-size:26px; }
    body.dash .sb-obanner::after {
        background:linear-gradient(180deg, rgba(6,7,12,.88), rgba(6,7,12,.94));
    }
}
@media print { body.dash .sb-obanner { display:none !important; } }

/* =====================================================================
   SERVIS YONETIM KONSOLU (.sb-svc)                    v196
   ---------------------------------------------------------------------
   WHMCS'in urun detay ekraninin karsiligi: ust seride kimlik + durum,
   altinda dort olcum kutusu, sonra solda eylem rayi / sagda panel.

   🔴 SEKMELER SAF CSS: gizli radyo + KARDES BIRLESTIRICI (~).
   :has() KULLANILMADI — bu desen IE9'dan beri her yerde calisiyor ve
   projede JS'e bagli bir sekme birakmak istemiyoruz. Radyolar
   .sb-svc-body'nin dogrudan cocugu oldugu icin hicbir formun icinde
   degiller; POST gövdesine karismazlar.
   ===================================================================== */
body.dash .sb-svc {
    margin:26px 0 0; border-radius:16px; overflow:hidden;
    background:var(--sb-surface, #141419);
    border:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-svc-top {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; padding:16px 22px;
    border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
    background:var(--sb-fill-1, rgba(255,255,255,.03));
}
body.dash .sb-svc-id { display:flex; align-items:center; gap:13px; min-width:0; }
/* ⚠️ .db-plogo `width:100%` — kapsayicinin OLCUSU olmali, yoksa gorsel
   otomatik genislikte bir span icinde cokerdi (.db-od-head .ic ile ayni
   gerekce). */
body.dash .sb-svc-id .ic {
    flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--sb-fill-2, rgba(255,255,255,.06)); color:var(--sb-text-2);
}
body.dash .sb-svc-id h3 {
    margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.2px;
    color:var(--sb-text-strong, #fff);
}
body.dash .sb-svc-id .meta { margin-top:2px; font-size:12px; color:var(--sb-text-3); }
body.dash .sb-svc-state { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
body.dash .sb-svc-chip {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;
    background:var(--sb-fill-2, rgba(255,255,255,.06));
    border:1px solid var(--sb-line, rgba(255,255,255,.08));
    color:var(--sb-text-2);
}
body.dash .sb-svc-chip.ok {
    color:var(--sb-ok, #30d158);
    border-color:rgba(var(--sb-ok-rgb, 48,209,88), .32);
}
body.dash .sb-svc-chip.warn {
    color:var(--sb-warn, #ff9f0a);
    border-color:rgba(var(--sb-warn-rgb, 255,159,10), .32);
}

/* --- olcum kutulari --- */
body.dash .sb-svc-stats {
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-svc-stat {
    padding:14px 22px; min-width:0;
    border-left:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-svc-stat:first-child { border-left:0; }
body.dash .sb-svc-stat .k {
    display:block; margin-bottom:6px; font-size:10.5px; font-weight:800;
    letter-spacing:1px; text-transform:uppercase; color:var(--sb-text-3);
}
body.dash .sb-svc-stat b {
    display:block; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
    color:var(--sb-text-strong, #fff);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.dash .sb-svc-stat b.mono { font-family:ui-monospace, Consolas, monospace; font-size:13px; }
/* Henuz baslamamis sipariste "Bitis" bir TARIH degil; kesin bir deger
   gibi durmasin diye ikincil tonda. */
body.dash .sb-svc-stat b.soft { color:var(--sb-text-2); font-weight:600; }
body.dash .sb-svc-stat b em {
    display:block; margin-top:3px; font-style:normal;
    font-size:11.5px; font-weight:600; color:var(--sb-text-3);
}

/* --- govde: eylem rayi + panel --- */
body.dash .sb-svc-body { display:grid; grid-template-columns:236px minmax(0, 1fr); }
body.dash .sb-svc-r {
    position:absolute; width:1px; height:1px; opacity:0;
    margin:0; pointer-events:none;
}
body.dash .sb-svc-rail {
    display:flex; flex-direction:column; gap:4px; padding:14px;
    border-right:1px solid var(--sb-line, rgba(255,255,255,.08));
    background:rgba(0,0,0,.16);
}
body.dash .sb-svc-rail label {
    display:flex; align-items:center; gap:11px; min-height:44px;   /* WCAG (§3d) */
    padding:10px 13px; border-radius:10px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--sb-text-2);
    transition:background .15s ease, color .15s ease;
}
body.dash .sb-svc-rail label:hover {
    background:var(--sb-fill-1, rgba(255,255,255,.04));
    color:var(--sb-text-strong, #fff);
}
body.dash .sb-svc-rail label i {
    width:16px; text-align:center; font-size:14px; color:var(--sb-text-3);
}
body.dash .sb-svc-rail label span { flex:1; min-width:0; }
body.dash .sb-svc-rail label em {
    font-style:normal; font-size:11px; font-weight:800; padding:1px 7px;
    border-radius:999px; color:var(--sb-text-2);
    background:var(--sb-fill-2, rgba(255,255,255,.08));
}
body.dash .sb-svc-panes { padding:22px 24px; min-width:0; }
body.dash .sb-svc-pane { display:none; }
body.dash .sb-svc-pane h4 {
    margin:0 0 8px; font-size:15px; font-weight:800;
    color:var(--sb-text-strong, #fff);
}
body.dash .sb-svc-pane .lead {
    margin:0 0 16px; max-width:74ch; font-size:13px; line-height:1.65;
    color:var(--sb-text-2);
}
body.dash .sb-svc-now {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; margin-bottom:18px; padding:12px 16px; border-radius:12px;
    background:var(--sb-fill-1, rgba(255,255,255,.03));
    border:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-svc-now > span {
    font-size:10.5px; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:var(--sb-text-3);
}
body.dash .sb-svc-now code {
    font-family:ui-monospace, Consolas, monospace; font-size:13px;
    color:var(--sb-text-strong, #fff);
}
body.dash .sb-svc-now b { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; }
body.dash .sb-svc-now b.ok   { color:var(--sb-ok,   #30d158); }
body.dash .sb-svc-now b.warn { color:var(--sb-warn, #ff9f0a); }
body.dash .sb-svc-form { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
body.dash .sb-svc-form .db-lbl { margin:0 0 6px; }
body.dash .sb-svc-form > label { flex:0 0 100%; }
/* 🔴 GIRDI ve BUTON AYNI YUKSEKLIKTE OLMALI. Olculdu: girdi 46px,
   buton 44px — satirda 2px kacik duruyordu ve "uyumsuz" okunuyordu.
   Yukseklik sabitlenip dikey dolgu kaldirildi; 44px musteri panelinin
   dokunma hedefi kurali (§3d), altina INILMEZ. */
body.dash .sb-svc-form .db-input {
    flex:1 1 280px; min-width:0;
    height:44px; padding-top:0; padding-bottom:0; line-height:44px;
}
/* Konsol icindeki buton, yanindaki alanla ayni gorsel agirlikta olsun:
   yatay dolgu bir tik daraltildi (20 -> 18), yukseklik korunuyor. */
body.dash .sb-svc-form .sb-btn { padding-left:18px; padding-right:18px; }
body.dash .sb-svc-form .db-input.mono {
    font-family:ui-monospace, Consolas, monospace; font-size:13px;
}
/* §3eb: .db-alert ile ayni sakin dil — bilgi notu (aksan), uyari sarisi degil */
body.dash .sb-svc-blocked {
    display:flex; align-items:flex-start; gap:12px; margin:0;
    padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.6;
    color:var(--sb-text-2);
    background:linear-gradient(90deg, rgba(var(--acc-rgb, 135,120,255),.07), rgba(var(--acc-rgb, 135,120,255),0) 45%), var(--panel, #13141b);
    border:1px solid var(--line, rgba(255,255,255,.08));
}
body.dash .sb-svc-blocked i {
    width:26px; height:26px; flex-shrink:0; margin-top:-2px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center; font-size:12.5px;
    color:var(--acc, #8778ff); background:rgba(var(--acc-rgb, 135,120,255),.13);
}
body.dash .sb-svc-tbl .note { margin-top:3px; font-size:11.5px; color:var(--sb-text-3); }
body.dash .sb-svc-tbl .mut  { color:var(--sb-text-3); }
body.dash .sb-svc-pane .db-kv { margin-bottom:18px; }

/* --- secili sekme (kardes birlestirici) --- */
body.dash #sbsvc-1:checked ~ .sb-svc-panes .p1,
body.dash #sbsvc-2:checked ~ .sb-svc-panes .p2,
body.dash #sbsvc-3:checked ~ .sb-svc-panes .p3,
body.dash #sbsvc-4:checked ~ .sb-svc-panes .p4,
body.dash #sbsvc-5:checked ~ .sb-svc-panes .p5,
body.dash #sbsvc-6:checked ~ .sb-svc-panes .p6 { display:block; }
body.dash #sbsvc-1:checked ~ .sb-svc-rail label[for="sbsvc-1"],
body.dash #sbsvc-2:checked ~ .sb-svc-rail label[for="sbsvc-2"],
body.dash #sbsvc-3:checked ~ .sb-svc-rail label[for="sbsvc-3"],
body.dash #sbsvc-4:checked ~ .sb-svc-rail label[for="sbsvc-4"],
body.dash #sbsvc-5:checked ~ .sb-svc-rail label[for="sbsvc-5"],
body.dash #sbsvc-6:checked ~ .sb-svc-rail label[for="sbsvc-6"] {
    background:rgba(var(--acc-rgb, 135,120,255), .16);
    color:var(--sb-text-strong, #fff);
}
body.dash #sbsvc-1:checked ~ .sb-svc-rail label[for="sbsvc-1"] i,
body.dash #sbsvc-2:checked ~ .sb-svc-rail label[for="sbsvc-2"] i,
body.dash #sbsvc-3:checked ~ .sb-svc-rail label[for="sbsvc-3"] i,
body.dash #sbsvc-4:checked ~ .sb-svc-rail label[for="sbsvc-4"] i,
body.dash #sbsvc-5:checked ~ .sb-svc-rail label[for="sbsvc-5"] i,
body.dash #sbsvc-6:checked ~ .sb-svc-rail label[for="sbsvc-6"] i { color:var(--acc, #8778ff); }
/* Odak halkasi — radyo gorunmez oldugu icin ETIKETTE gosterilir.
   §3c: odak halkalari asla kaldirilmaz. */
body.dash #sbsvc-1:focus-visible ~ .sb-svc-rail label[for="sbsvc-1"],
body.dash #sbsvc-2:focus-visible ~ .sb-svc-rail label[for="sbsvc-2"],
body.dash #sbsvc-3:focus-visible ~ .sb-svc-rail label[for="sbsvc-3"],
body.dash #sbsvc-4:focus-visible ~ .sb-svc-rail label[for="sbsvc-4"],
body.dash #sbsvc-5:focus-visible ~ .sb-svc-rail label[for="sbsvc-5"],
body.dash #sbsvc-6:focus-visible ~ .sb-svc-rail label[for="sbsvc-6"] {
    outline:2px solid var(--acc, #8778ff); outline-offset:-2px;
}

@media (max-width:900px) {
    body.dash .sb-svc-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    body.dash .sb-svc-stat:nth-child(3) { border-left:0; }
    body.dash .sb-svc-stat:nth-child(n+3) { border-top:1px solid var(--sb-line, rgba(255,255,255,.08)); }
    body.dash .sb-svc-body { grid-template-columns:minmax(0, 1fr); }
    body.dash .sb-svc-rail {
        flex-direction:row; overflow-x:auto; gap:6px; padding:10px 12px;
        border-right:0; border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
    }
    body.dash .sb-svc-rail label { white-space:nowrap; }
    body.dash .sb-svc-panes { padding:18px 16px; }
}
@media print { body.dash .sb-svc-body { display:none !important; } }

/* Ilerleme seridi — ayri "Delivery progress" paneli kaldirildi, cubuk
   konsolun icine alindi (yuzde zaten olcum kutusunda duruyor). */
body.dash .sb-svc-prog {
    padding:14px 22px 16px;
    border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-svc-prog .db-prog-foot { gap:12px; }
body.dash .sb-svc-prog .db-prog-foot span:nth-child(2) {
    margin-left:auto; margin-right:auto; opacity:.75;
}

/* =====================================================================
   KATLANIR AYRINTI BLOGU (.sb-fold)                   v197
   Native <details> — JS yok. Ok isareti acilinca doner. */
body.dash .sb-fold {
    margin:22px 0 0; border-radius:14px; overflow:hidden;
    background:var(--sb-surface, #141419);
    border:1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-fold > summary {
    display:flex; align-items:center; gap:11px; min-height:52px;
    padding:14px 20px; cursor:pointer; list-style:none;
    font-size:13.5px; font-weight:700; color:var(--sb-text-2);
    transition:background .15s ease, color .15s ease;
}
body.dash .sb-fold > summary::-webkit-details-marker { display:none; }
body.dash .sb-fold > summary:hover { color:var(--sb-text-strong, #fff); }
body.dash .sb-fold > summary:focus-visible {
    outline:2px solid var(--acc, #8778ff); outline-offset:-2px;
}
body.dash .sb-fold > summary > span { flex:1; min-width:0; }
body.dash .sb-fold > summary > i { color:var(--sb-text-3); font-size:13px; }
body.dash .sb-fold > summary .chev { transition:transform .2s ease; }
body.dash .sb-fold[open] > summary {
    border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
    color:var(--sb-text-strong, #fff);
}
body.dash .sb-fold[open] > summary .chev { transform:rotate(180deg); }
body.dash .sb-fold-body { padding:18px 20px 20px; }
body.dash .sb-fold-body .db-timeline { margin:0; }
/* Uc grup: ne aldim / nereye gidiyor / nerede duruyor */
body.dash .sb-fold-grid {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;
}
body.dash .sb-fold-grid > section { min-width:0; }
body.dash .sb-fold-grid h5 {
    margin:0 0 10px; padding-bottom:8px;
    border-bottom:1px solid var(--sb-line, rgba(255,255,255,.08));
    font-size:10.5px; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:var(--sb-text-3);
}
/* Etiket sutunu genis bir sabit degerdi (200px); uc dar sutunda deger
   tarafini eziyordu. */
body.dash .sb-fold-grid .db-kv td:first-child { width:auto; padding-right:14px; white-space:nowrap; }
body.dash .sb-fold-grid .db-kv td.mono {
    font-family:ui-monospace, Consolas, monospace; font-size:12.5px;
    word-break:break-all;
}
@media (max-width:900px) {
    body.dash .sb-fold-grid { grid-template-columns:minmax(0, 1fr); gap:20px; }
}
@media (prefers-reduced-motion: reduce) {
    body.dash .sb-fold > summary .chev { transition:none; }
}

/* Destek satiri (siparis detayinin EN ALTI) — eskiden koca bir karttı;
   yapilacak tek sey bir baglantiya tiklamak.

   🔴 SINIF ADI `sb-ohelp`, `sb-help` DEGIL (v201). `.sb-help` admin
   panelinin katlanan aciklama sinifidir (v182) ve kurali bu dosyada
   ~4000 satir ASAGIDA duruyor:  body.dash .sb-help { margin:-4px 0 14px }
   Ayni ozgullukte oldugu icin sonraki kazaniyordu; bu satirin ust
   boslugu 16px yerine -4px oluyor ve paragraf ustundeki blogun icine
   giriyordu. Dort tur boyunca "kayik" diye bildirilen sey buydu —
   ikonun geometrisi degil.

   ⚠️ FLEX DEGIL, DUZ PARAGRAF. Flex'te uc oge farkli yukseklikte
   (ikon 13px, metin 17px, kalin link 21px); `align-items:center`
   kutulari hizalar ama TABAN CIZGILERINI kaydirir. Duz metin
   akisinda ucu de ayni taban cizgisine oturur.

   Ikon paragrafin BASINDA degil, LINKIN ICINDE — cumle kac satira
   sararsa sarsin ortada asili kalan bir oge olmuyor. */
body.dash .sb-ohelp {
    margin:22px 0 0; padding-top:18px; font-size:13px; line-height:1.7;
    border-top:1px solid var(--sb-line, rgba(255,255,255,.08));
    color:var(--sb-text-3);
}
body.dash .sb-ohelp a {
    display:inline-block; margin-left:6px; white-space:nowrap;
    color:var(--acc, #8778ff); font-weight:600; text-decoration:none;
}
/* Ikon linkten HIC kopmaz: nowrap + kucuk optik ofset.
   .075em olculerek secildi: ofsetsizken ikonun optik merkezi metnin
   1,6px altinda kaliyordu (13px glif / 17px satir kutusu). */
body.dash .sb-ohelp a i { margin-right:6px; vertical-align:.075em; }
body.dash .sb-ohelp a:hover { text-decoration:underline; }

/* Metin secimi — UA varsayilani koyu zeminde dusuk kontrast verebiliyor */
::selection { background:rgba(var(--acc-rgb,135,120,255),.38); color:#fff; }

/* Acilir liste secenekleri — `color-scheme:dark` (dosya basi) cogu
   tarayicida yeterli, ama onu yok sayan motorlarda secenek metni yine
   beyaz zeminde beyaz kalabiliyor. Zemin ACIKCA yaziliyor.
   ⚠️ `option`a yalnizca renk/zemin uygulanabilir; padding, radius vb.
   yerli kontrolde yok sayilir — burada denemeyin. */
.db-select option, .sb-co-sel option, .db-statusform select option, select.db-input option {
    background-color:#1c1c22;
    color:#ffffff;
}
.db-textarea { min-height:110px; resize:vertical; }
.db-form-row { margin-bottom:14px; }
.db-form-row label { display:block; font-size:13px; font-weight:600; color:var(--sb-text-2); margin-bottom:7px; }

/* ---- order detail ---- */
.db-od-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.db-od-head .t { display:flex; align-items:center; gap:14px; }
.db-od-head .t .ic { width:52px; height:52px; border-radius:13px; background:var(--sb-fill-2); color:var(--sb-text-2); display:flex; align-items:center; justify-content:center; font-size:21px; }
.db-od-head h2 { margin:0; font-size:20px; color:var(--sb-text-strong); }
.db-od-head .sub { color:var(--mut); font-size:13px; margin-top:3px; }
.db-kv { width:100%; border-collapse:collapse; }
.db-kv td { padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.db-kv td:first-child { color:var(--mut); width:200px; }
.db-kv td:last-child { color:var(--sb-text-strong); font-weight:600; }
.db-kv tr:last-child td { border-bottom:none; }
.db-timeline { list-style:none; margin:0; padding:0; }
.db-timeline li { position:relative; padding:0 0 22px 30px; color:var(--mut); font-size:13.5px; }
.db-timeline li::before { content:""; position:absolute; left:7px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--mut2); }
.db-timeline li::after { content:""; position:absolute; left:11px; top:14px; bottom:0; width:2px; background:var(--line); }
.db-timeline li:last-child { padding-bottom:0; }
.db-timeline li:last-child::after { display:none; }
.db-timeline li.done { color:var(--sb-text-2); }
.db-timeline li.done::before { background:var(--sb-ok); }
.db-timeline li b { color:var(--sb-text-strong); display:block; font-weight:600; }

/* ---- admin tabs + inline status ---- */
.db-tabs { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.db-tabs a { padding:9px 16px; border-radius:9px; border:1px solid var(--line); color:var(--mut); font-weight:600; font-size:13.5px; }
.db-tabs a.is-active { background:var(--acc); color:var(--sb-on-accent); border-color:var(--acc); }
.db-tabs a:hover { color:var(--sb-text-strong); }
.db-statusform { display:flex; gap:8px; align-items:center; }
.db-statusform select { background:var(--bg); border:1px solid var(--line2); border-radius:9px; color:var(--sb-text-strong); font-size:12.5px; padding:8px 30px 8px 12px; cursor:pointer; transition:border-color .15s;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9bA7' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center; }
.db-statusform select:hover { border-color:var(--acc); }
.db-statusform select:focus { outline:none; border-color:var(--acc); }
.db-statusform button { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sb-line); color:var(--sb-text-strong); border-radius:8px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer;
    background:var(--sb-surface-3);
    transition:background .15s, border-color .15s; }
.db-statusform button:hover { background:var(--sb-fill-3); border-color:rgba(var(--acc-rgb),.35); }

/* ---- scrollbar ---- */
body.dash ::-webkit-scrollbar { width:10px; height:10px; }
body.dash ::-webkit-scrollbar-thumb { background:var(--sb-fill-2); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
body.dash ::-webkit-scrollbar-thumb:hover { background:var(--sb-fill-3); background-clip:padding-box; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){ .db-grid { grid-template-columns:1fr; } }
@media (max-width:991px){
    .db-burger { display:inline-flex; align-items:center; justify-content:center; }
    .db-back span, .db-cta span, .db-user-meta { display:none; }
    .db-sidebar { transform:translateX(-100%); transition:transform .25s ease; }
    body.db-side-open .db-sidebar { transform:translateX(0); }
    body.db-side-open .db-backdrop { display:block; }
    .db-main { margin-left:0; }
    .db-content { padding:20px 16px; }
    .db-pagehead { padding:20px 16px 0; }
}

/* ---- avatar picker (profile) ---- */
.db-avagrid { display:flex; gap:16px; flex-wrap:wrap; }
.db-avaopt { position:relative; width:84px; height:84px; border-radius:16px; overflow:hidden; padding:0; cursor:pointer; background:var(--bg); border:2px solid var(--line); transition:border-color .15s, transform .15s; }
.db-avaopt img { width:100%; height:100%; object-fit:cover; display:block; }
.db-avaopt:hover { transform:translateY(-2px); border-color:var(--line2); }
.db-avaopt.is-sel { border-color:var(--acc); }
.db-avacheck { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(var(--acc-rgb,135,120,255),.35); color:var(--sb-on-accent); font-size:20px; }
.db-avaopt.is-sel .db-avacheck { display:flex; }

/* ---- product logos in icon boxes ---- */
.db-svc .ic { overflow:hidden; background:var(--sb-fill-1); width:30px; height:30px; border-radius:50%; }
.db-srv-ic { overflow:hidden; background:var(--sb-fill-1); width:38px; height:38px; border-radius:50%; }
.db-od-head .t .ic { overflow:hidden; background:var(--sb-fill-1); width:48px; height:48px; border-radius:50%; }
.db-plogo { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.db-srv-ic .db-plogo { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.db-plogo-lg { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ---- checkout payment options ---- */
.sb-pay { display:block; cursor:pointer; margin-bottom:12px; }
.sb-pay input { position:absolute; opacity:0; }
.sb-pay-box { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--sb-line); border-radius:12px; background:var(--sb-surface-3); transition:border-color .15s, background .15s; }
.sb-pay-box i { font-size:24px; color:var(--acc); width:28px; text-align:center; }
.sb-pay-box span { display:flex; flex-direction:column; }
.sb-pay-box b { color:var(--sb-text-strong); font-size:14px; }
.sb-pay-box small { color:var(--sb-text-3); font-size:12px; }
.sb-pay input:checked + .sb-pay-box { border-color:var(--acc); background:rgba(var(--acc-rgb,135,120,255),.08); }
/* v258: bakiye yetmeyince secilemez — kutu soluk, "bakiye yukle" baglantisi tiklanir */
.sb-pay.is-off { cursor:not-allowed; }
.sb-pay.is-off .sb-pay-box { opacity:.62; }
.sb-pay.is-off .sb-pay-box a { cursor:pointer; }

/* ---- cart item product logo ---- */
.cart-logo { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* ---- support bildirim blip (modern notification) ---- */
.db-nav-item { position:relative; }
.db-nav-blip {
    margin-left:auto; min-width:19px; height:19px; padding:0 6px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:var(--sb-text-strong); line-height:1;
    background:linear-gradient(180deg,#ff5a6e,#e0344b); border-radius:100px;
    box-shadow:0 1px 3px rgba(0,0,0,.45);
}
/* NOT: burada eskiden "blipPulse" vardi — rozetin cevresinde 2 sn'de bir
   genisleyen renkli bir halka. Ust cubukta hic durmayan tek hareket oydu ve
   goz surekli oraya kayiyordu; kaldirildi. Rozetin kendisi (kirmizi sayi)
   duruyor, bildirimi gormek icin zaten yeterli. */
.db-bell {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:9px; color:#aab; text-decoration:none;
    border:1px solid var(--sb-line); background:var(--sb-surface-3); transition:border-color .15s, color .15s, background .15s;
}
.db-bell:hover { color:var(--sb-text-strong); border-color:rgba(var(--acc-rgb),.35); background:var(--sb-fill-3); }
.db-bell i { font-size:14px; }
.db-bell-blip {
    position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; color:var(--sb-text-strong); line-height:1;
    background:linear-gradient(180deg,#ff5a6e,#e0344b); border-radius:100px;
    border:2px solid var(--hdr-bg,var(--sb-surface));
    box-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---- All Orders kategori gruplama ---- */
.db-cat-row td { padding:14px 12px 8px !important; background:transparent !important; border:none !important; }
.db-cat-row:hover { background:transparent !important; }
.db-cat-pill { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--sb-text-2); }
.db-cat-pill .db-cat-logo { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.db-cat-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:var(--sb-fill-2); border:1px solid var(--sb-line); color:var(--sb-text-2); font-size:11px; font-weight:800; letter-spacing:0; }

/* ---- admin panel ekstra ---- */
/* =====================================================================
   BAGLAM DEGISTIRICI  (.db-ctxswitch)  — topbar SOLUNDA, logonun yaninda
   ---------------------------------------------------------------------
   Neden buton degil de segment kontrolu:
   "Yonetim Paneli" bir EYLEM degil, hangi panelde oldugunu gosteren bir
   DURUM. Segment kontrolu iki durumu ayni anda gosterir, aktif olani
   isaretler ve digerine gecisi tek tikta verir. Yeri de bu yuzden
   utility ikonlarinin (zil, dil, avatar) arasi degil, baglam alani.
   Gorsel dil: gradyan/parlama YOK — oturmus, kurumsal yuzeyler.
   ===================================================================== */
.db-ctx-sep {
    width:1px; height:26px; margin:0 4px;
    background:linear-gradient(180deg, transparent, var(--line2), transparent);
    flex-shrink:0;
}
.db-ctxswitch {
    display:inline-flex; align-items:center; gap:2px; padding:3px;
    border:1px solid var(--line); border-radius:10px;
    background:rgba(0,0,0,.28);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
    flex-shrink:0;
}
.db-ctx-item {
    display:inline-flex; align-items:center; gap:7px;
    height:30px; padding:0 12px; border-radius:7px;
    font-size:12.5px; font-weight:600; letter-spacing:.1px; white-space:nowrap;
    color:var(--mut) !important; text-decoration:none;
    border:1px solid transparent;
    transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.db-ctx-item i { font-size:12px; opacity:.85; }
.db-ctx-item:hover { color:var(--sb-text) !important; background:var(--sb-fill-1); }

/* aktif segment — yukselmis yuzey, net ama sakin */
.db-ctx-item.is-active {
    color:var(--sb-text-strong) !important;
    background:var(--sb-fill-3);
    border-color:var(--line2);
    box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
.db-ctx-item.is-active i { opacity:1; color:var(--acc); }
/* admin segmenti aktifken kimlik rengi (kehribar) — panelin admin kimligiyle uyumlu */
.db-ctx-item.is-active:last-child i { color:var(--sb-warn); }

@media (max-width:1100px){ .db-ctx-item span { display:none; } .db-ctx-item { padding:0 10px; } }
@media (max-width:640px){ .db-ctxswitch, .db-ctx-sep { display:none; } }
.db-del-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1px solid rgba(230,90,90,.25); background:rgba(var(--sb-bad-rgb),.08); color:var(--sb-bad); cursor:pointer; font-size:12px; transition:.15s; }
.db-del-btn:hover { background:rgba(var(--sb-bad-rgb),.18); border-color:rgba(var(--sb-bad-rgb),.50); color:var(--sb-text-strong); }
.db-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px; }
@media (max-width:900px){ .db-grid-2 { grid-template-columns:1fr; } }
.db-h1 { color:var(--sb-text-strong); font-size:22px; font-weight:800; display:flex; align-items:center; gap:14px; margin:0; letter-spacing:-.3px; }
.db-h1 > .fa, .db-h1 > i { width:42px; height:42px; border-radius:11px; background:var(--sb-fill-2); border:1px solid var(--sb-line); display:inline-flex; align-items:center; justify-content:center; font-size:17px; color:var(--sb-text-2) !important; flex-shrink:0; }
/* 🔴 Baslik SARDIGINDA ikon iki satirin ORTASINA kayiyordu (olculdu:
   375px'te "My Wallet" iki satira sariyor, sapma 13.4px). 42px'lik
   ikon CIPI icin ortalamak dogru duruyor, ama .sb-ico duz bir gorsel:
   ilk satira sabitlenir. Ofset = (ilk satir 30px - ikon 26px) / 2. */
.db-h1 > img.sb-ico { align-self:flex-start; margin-top:2px; }
.db-sub { color:var(--mut); font-size:13px; margin:8px 0 0; padding-left:56px; max-width:760px; line-height:1.5; }
.db-pagehead { margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--sb-line); }

/* ---- duyuru form etiket/checkbox ---- */
.db-lbl { display:block; color:var(--sb-text-2); font-size:12.5px; font-weight:600; margin-bottom:7px; }
.db-check { display:inline-flex; align-items:center; gap:9px; color:var(--sb-text-2); font-size:13px; cursor:pointer; user-select:none; }
.db-check input { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; }

/* ---- dashboard yaz indirimi kayan serit (marquee) ---- */
.db-marquee { position:relative; overflow:hidden; white-space:nowrap; margin:0 0 24px; border-radius:12px;
    background:linear-gradient(90deg, rgba(var(--acc-rgb,135,120,255),.16), rgba(var(--acc2-rgb,230,21,175),.16));
    border:1px solid rgba(120,130,210,.28); }
.db-marquee::before, .db-marquee::after { content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none; }
.db-marquee::before { left:0; background:linear-gradient(90deg, var(--panel), transparent); }
.db-marquee::after { right:0; background:linear-gradient(270deg, var(--panel), transparent); }
.db-marquee-track { display:inline-block; padding:11px 0; animation:dbMarquee 38s linear infinite; will-change:transform; }
.db-marquee:hover .db-marquee-track { animation-play-state:paused; }
.db-mq-item { display:inline-flex; align-items:center; gap:7px; color:var(--sb-text); font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:0 16px; }
.db-mq-item i { color:var(--sb-warn); }
.db-mq-sep { color:var(--sb-text-2); font-size:13px; }
@keyframes dbMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* =====================================================================
   KAYAN DUYURU BANDI (marquee)
   ---------------------------------------------------------------------
   Butun gorunum admin panelinden gelen CSS DEGISKENLERI ile suruluyor:
     --mq-speed  bir turun suresi (hiz)
     --mq-size   yazi boyutu
     --mq-weight yazi kalinligi
     --mq-color  yazi rengi
   Varyant siniflari (PHP tarafindan eklenir):
     .mq-bg-none / .mq-bg-accent   zemin
     .mq-rtl                        ters yon
     .mq-pause                      uzerine gelince dur
     .mq-outline                    ici bos (kontur) yazi
   Bu sayede metin/hiz/renk degistirmek icin CSS'e DOKUNULMAZ.
   ===================================================================== */
.db-citymq { position:relative; overflow:hidden; white-space:nowrap; margin:0 0 26px;
    border-radius:var(--radius,14px); padding:10px 0;
    background:linear-gradient(90deg, rgba(var(--acc-rgb,135,120,255),.07), rgba(var(--acc2-rgb,230,21,175),.07));
    border:1px solid var(--line); }
.db-citymq.mq-bg-none   { background:none; border-color:transparent; }
.db-citymq.mq-bg-accent { background:linear-gradient(90deg, rgba(var(--acc-rgb,135,120,255),.22), rgba(var(--acc2-rgb,230,21,175),.18));
    border-color:rgba(var(--acc-rgb,135,120,255),.28); }

.db-citymq::before, .db-citymq::after { content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.db-citymq::before { left:0; background:linear-gradient(90deg, var(--panel), transparent); }
.db-citymq::after { right:0; background:linear-gradient(270deg, var(--panel), transparent); }

.db-citymq-track { display:inline-flex; align-items:center; will-change:transform;
    animation:dbCityLoop var(--mq-speed,90s) linear infinite; }
/* ters yon */
.db-citymq.mq-rtl .db-citymq-track { animation-direction:reverse; }
/* uzerine gelince durdur — yalnizca ayar acikken */
.db-citymq.mq-pause:hover .db-citymq-track { animation-play-state:paused; }

/* YAZI TIPI = OXANIUM — temanin kendi baslik fontu (--title-font).
   Tema bunu css/style.css icinde tanimliyor ama panel o dosyayi yuklemez;
   bu yuzden panelde bant govde fontuna (Inter) dusuyor ve karakteristik
   kosegen/tekno harf yapisi kayboluyordu. Font artik layout.php'de panel
   icin ayrica yukleniyor. Yuklenemezse tema yiginina duser, kirilmaz. */
.db-citymq .d-item-txt { font-size:var(--mq-size,62px); line-height:1; padding:0 26px;
    font-family:'Oxanium', Helvetica, Arial, sans-serif;
    font-weight:var(--mq-weight,800); font-style:normal; letter-spacing:1px;
    text-transform:uppercase; color:var(--mq-color,#fff);
    user-select:none; white-space:nowrap; }
/* Ici bos (kontur) varyant.
   Kontur 1px'ten 1.6px'e cikarildi: 62px'lik harflerde 1px cizgi koyu zeminde
   neredeyse kayboluyordu ve bant "yok" sanilyordu. Hafif bir govde tonu da
   eklendi (renk %10 opaklikta) — harf hala ici bos okunur ama silinmez. */
.db-citymq.mq-outline .d-item-txt {
    color:transparent;
    /* Kontur kalinligi: tema 1px -> silik kaliyordu; 1.6px istenen kalinlik.
       (Bir ara 1.4px'e cekilmisti, "daha inceydi" geri bildirimi uzerine
       1.6px'e donuldu.)

       Opaklik: --mq-color Appearance'tan gelir ve varsayilani #ffffff, yani
       TAM opak. "Biraz kisik olsun" istegi icin renge alpha katmak yerine
       ogeye opacity veriliyor — boylece admin hangi rengi secerse secsin
       kisma orani ayni kalir ve renk ayari bozulmaz. Dolgu zaten saydam
       oldugu icin opacity yalnizca konturu etkiler. */
    -webkit-text-stroke:1.6px var(--mq-color,#fff);
    opacity:.9;
    text-shadow:none;
}
/* ayirac */
.db-citymq .d-item-sep { font-size:calc(var(--mq-size,62px) * .38); line-height:1;
    color:var(--mq-color,#fff); opacity:.45; padding:0 4px; user-select:none; }

@keyframes dbCityLoop { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* kullanici hareket azaltma istiyorsa animasyonu durdur (erisilebilirlik) */
/* HAREKET AZALTMA ISTISNASI — kayan bant.
   Once burada "animation:none" vardi; isletim sisteminde "hareketi azalt"
   acik olan makinelerde (Windows 11'de bu ayar sik sik kapali gelir) bant
   hic kaymiyordu ve "calismiyor" gibi gorunuyordu.

   Karar: bandin VAR OLMA sebebi kaymasi — durdugunda anlamsiz bir baslik
   yigini oluyor. Bu yuzden hareket kapaliyken de kayiyor, ama HIZI YARIYA
   dusuruluyor (daha sakin) ve uzerine gelince duruyor (mq-pause).
   Tamamen durdurmak isteyen Appearance ekranindan bandi kapatabilir. */
@media (prefers-reduced-motion:reduce){
    .db-citymq-track { animation-duration:calc(var(--mq-speed,45s) * 2) !important; }
}
@media (max-width:991px){ .db-citymq .d-item-txt { font-size:calc(var(--mq-size,62px) * .65); padding:0 16px; } }

/* ---- header konumundaki marquee (logo - profil arasi, kucuk) ---- */
.db-citymq.in-header { flex:1; margin:0 22px; padding:0; background:none; border:none; border-radius:0; min-width:0; }
.db-citymq.in-header::before, .db-citymq.in-header::after { width:50px; }
.db-citymq.in-header::before { background:linear-gradient(90deg, var(--sb-glass), transparent); }
.db-citymq.in-header::after { background:linear-gradient(270deg, var(--sb-glass), transparent); }
.db-citymq.in-header .d-item-txt { font-size:20px; letter-spacing:.5px; padding:0 18px; }
.db-citymq.in-header.mq-outline .d-item-txt { -webkit-text-stroke:1px var(--mq-color,rgba(255,255,255,.4)); }
.db-citymq.in-header .d-item-sep { font-size:11px; }
@media (max-width:991px){ .db-citymq.in-header { display:none; } }

/* ---- dropdown dil secici ---- */
.db-usermenu-lang { padding:10px 12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.db-usermenu-lang > span { color:var(--mut); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:9px; }
.db-usermenu-lang > span i { color:var(--mut2); width:16px; text-align:center; }
.db-lang-opts { display:inline-flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.db-lang-opts a { display:inline-flex; align-items:center; justify-content:center; min-width:30px; padding:5px 8px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.4px; color:var(--mut); border:1px solid var(--line); background:var(--bg); transition:.13s; }
.db-lang-opts a:hover { color:var(--sb-text-strong); border-color:rgba(var(--acc-rgb),.40); }
.db-lang-opts a.is-active { color:var(--sb-text-strong); background:linear-gradient(180deg,var(--sb-surface-3),var(--sb-surface-2)); border-color:rgba(var(--acc-rgb),.45); }

/* ===== RTL (Arabic) destegi ===== */
/* =====================================================================
   RTL (Arapca) — DUZEN KATMANI
   ---------------------------------------------------------------------
   🔴 BU BLOK BIR SURE HIC CALISMADI. Iki sebepten:
     1) Var olmayan bir sinifi hedefliyordu: ".db-side" — HTML'de basilan
        sinif ".db-sidebar". Secici hicbir seye uymuyordu.
     2) Kenar cubugu konumu margin ile degil "left:0" ile kuruluyor ve
        icerik ".db-main { margin-left:var(--side) }" ile kaydiriliyor;
        eski blok ise padding'i degistiriyordu.
   Sonuc: <html dir="rtl"> basiliyordu, metin sagdan sola akiyordu ama
   DUZEN hic donmuyordu — kenar cubugu solda kaliyor ve sayfa 25px
   yatay tasiyordu. Olculdu (Arapca panel, 1280px).

   ⚠️ dir="rtl" yalnizca METIN yonunu cevirir. left/right, margin-left,
   border-left gibi FIZIKSEL ozellikler kendiliginden donmez; her biri
   burada elle cevrilmeli. (Mantiksal ozelliklere —inset-inline-start
   gibi— gecmek daha temiz olurdu ama 122 bildirimi tasimak, ayarlanmis
   LTR duzenini riske atardi.)
   ===================================================================== */
html[dir="rtl"] body.dash .db-sidebar {
    left:auto; right:0;
    border-right:0; border-left:1px solid var(--line);
}
html[dir="rtl"] body.dash .db-main { margin-left:0; margin-right:var(--side); }
html[dir="rtl"] .db-nav-item i { margin-right:0; margin-left:11px; }
html[dir="rtl"] .db-usermenu { left:14px; right:auto; transform-origin:top left; }
html[dir="rtl"] .db-topbar-left  { flex-direction:row-reverse; }
html[dir="rtl"] .db-topbar-right { flex-direction:row-reverse; }

/* Ilerleme cubuklari sagdan dolmali */
html[dir="rtl"] body.dash .db-prog span { transform-origin:right center; }

/* Sol serit vurgular saga gecer */
html[dir="rtl"] .db-table tr:hover td:first-child,
html[dir="rtl"] .adm-secmark { border-left:0; }

/* Mobil: cekmece SAGDAN girer */
@media (max-width:991px) {
    html[dir="rtl"] body.dash .db-main { margin-right:0; }
    html[dir="rtl"] .db-sidebar { transform:translateX(100%); }
    html[dir="rtl"] body.db-side-open .db-sidebar { transform:translateX(0); }
}

/* =====================================================================
   HEADER DIL SECICI  (.db-langpick)
   Tetikleyici: cam yuzey + accent globe + kod rozeti + donen caret
   Menu: baslikli, kod rozetli satirlar, aktif satirda accent seridi
   ===================================================================== */
.db-langpick {
    position:relative; display:flex; align-items:center; gap:8px;
    height:38px; padding:0 12px; border-radius:11px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border:1px solid var(--line2);
    color:var(--sb-text-2); font-size:12.5px; font-weight:600;
    cursor:pointer; user-select:none;
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.db-langpick:hover {
    color:var(--sb-text-strong); border-color:rgba(var(--acc-rgb),.40);
    background:linear-gradient(180deg, rgba(var(--acc-rgb,135,120,255),.14), rgba(var(--acc-rgb,135,120,255),.05));
}
/* Menu acikken tetikleyici de accent'e kilitlensin.
   .is-open sinifi JS ile eklenir (her tarayicida calisir);
   :has() ise JS'siz de dogru gorunum verir. Ikisi birlikte tutulur. */
.db-langpick.is-open,
.db-langpick:has(.db-langmenu.open) {
    border-color:rgba(var(--acc-rgb),.60);
    background:linear-gradient(180deg, rgba(var(--acc-rgb,135,120,255),.18), rgba(var(--acc-rgb,135,120,255),.07));
    box-shadow:0 0 0 3px rgba(var(--acc-rgb,135,120,255),.12);
}
/* ---------- BAYRAK ----------
   Bayraklarin en-boy orani birbirinden farkli (3:2, 2:3, 5:3...). Sabit kutu +
   object-fit:cover ile HEPSI AYNI olcude gorunur, bozulma/esneme olmaz.
   Ustteki ince ic golge, acik renkli bayraklarin (PL, AR) koyu zeminde
   kaybolmasini onler. */
.db-flag {
    position:relative; flex:0 0 auto;
    width:22px; height:15px; border-radius:3px; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.4);
    background:var(--sb-surface-3);
}
.db-flag img { width:100%; height:100%; object-fit:cover; display:block; }
/* gorsel yuklenemezse: ulke kodu rozeti (JS onerror ile gorunur olur) */
.db-flag-fb {
    display:none; width:100%; height:100%;
    align-items:center; justify-content:center;
    font-size:8.5px; font-weight:800; letter-spacing:.3px; color:var(--acc);
    background:rgba(var(--acc-rgb,135,120,255),.25);
}
.db-langpick-caret { font-size:9px; opacity:.55; transition:transform .22s ease, opacity .18s ease; }
.db-langpick:hover .db-langpick-caret { opacity:.95; }
.db-langpick.is-open .db-langpick-caret,
.db-langpick:has(.db-langmenu.open) .db-langpick-caret { transform:rotate(180deg); opacity:1; }

/* ---------- acilir menu ---------- */
.db-langmenu {
    position:absolute; top:calc(100% + 10px); right:0; min-width:238px;
    background:linear-gradient(180deg, var(--sb-surface-2), var(--sb-surface));
    border:1px solid var(--line2); border-radius:14px; padding:7px;
    box-shadow:0 18px 48px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
    transform-origin:top right;
    transition:opacity .18s ease, transform .22s cubic-bezier(.22,1.2,.36,1), visibility .18s;
    z-index:100;
}
.db-langmenu.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }

/* menu basligi */
.db-langmenu-head {
    display:block; padding:7px 10px 8px; margin-bottom:3px;
    border-bottom:1px solid var(--line);
    color:var(--mut2); font-size:10px; font-weight:800;
    letter-spacing:1.1px; text-transform:uppercase;
}

.db-langmenu a {
    position:relative; display:flex; align-items:center; gap:11px;
    padding:9px 11px; border-radius:9px;
    color:var(--mut); font-size:13px; font-weight:500;
    text-decoration:none;
    transition:background .14s ease, color .14s ease, transform .14s ease;
}
.db-langmenu a:hover { background:var(--sb-fill-2); color:var(--sb-text-strong); transform:translateX(2px); }

.db-langmenu a .ln { flex:1; }
/* menudeki bayraklar biraz daha buyuk (satir yuksekligine oturur) */
.db-langmenu a .db-flag { width:24px; height:16px; }
.db-langmenu a:hover .db-flag { box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.5); }
.db-langmenu a i.fa-check { color:var(--acc); font-size:11px; }

/* aktif dil — accent zemin + sol serit */
.db-langmenu a.is-active {
    background:linear-gradient(90deg, rgba(var(--acc-rgb,135,120,255),.18), rgba(var(--acc-rgb,135,120,255),.06));
    color:var(--sb-text-strong); font-weight:600;
}
.db-langmenu a.is-active::before {
    content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
    width:3px; height:17px; border-radius:2px;
    background:linear-gradient(180deg, var(--acc), var(--acc2));
}
.db-langmenu a.is-active .db-flag {
    box-shadow:inset 0 0 0 1px rgba(160,170,255,.55), 0 1px 3px rgba(0,0,0,.5);
}

@media (max-width:760px){
    .db-langpick { padding:0 9px; gap:6px; }
    .db-langpick-caret { display:none; }
}

/* RTL: menu sola acilsin, serit ve kayma yon degistirsin */
html[dir="rtl"] .db-langmenu { right:auto; left:0; transform-origin:top left; }
html[dir="rtl"] .db-langmenu a:hover { transform:translateX(-2px); }
html[dir="rtl"] .db-langmenu a.is-active::before { left:auto; right:4px; }

/* =====================================================================
   YONETIM PANELI GORUNUMU (body.is-admin-ctx)   —  v102
   ---------------------------------------------------------------------
   Yon: ui-ux-pro-max -> "Modern Dark (Cinema)" + "Glassmorphism",
        palet "Financial Dashboard" (koyu zemin + yesil olumlu gosterge),
   Ayarlar: yogunluk 8/10, hareket 3/10, varyans 5/10.

   YAZI TIPI: tema yigini (Inter / Segoe UI, body.dash icinde tanimli).
   Bir ara webfont (Fira Sans/Fira Code) denendi, begenilmedi ve kaldirildi.
   Rakam hizalamasi font-variant-numeric:tabular-nums ile saglaniyor —
   bu her yazi tipiyle calisir ve dis kaynak gerektirmez.

   v101 yapisaldi (dagillik toplandi, hizalama duzeldi); v102 GORSEL
   katmandir: derin yuzey merdiveni, cam ust cubuk, kenar isigi, gercek
   webfont, aksan parlamasi. Ikisi ayni blokta — admin gorunumu icin
   TEK DOGRULUK KAYNAGI burasidir, layout.php'ye stil yazilmaz.

   Kullanici paneli ETKILENMEZ (her secici .is-admin-ctx ile baslar).
   Tema gorselleri (KPI karti arkalari) KORUNUR — satis kimligi.
   ===================================================================== */
body.is-admin-ctx {
    /* --- kimlik --- */
    /* --admin* token blogunda: iOS turuncusu */
    /* --- yuzey merdiveni: derin, katmanli (saf siyah YOK) --- */


    /* --- anlamsal durum --- */

    /* --- olcek (density 8/10) --- */
    --a-sp1:6px; --a-sp2:10px; --a-sp3:14px; --a-sp4:20px; --a-sp5:28px;
    --a-r-xs:8px; --a-r-sm:10px; --a-r:14px; --a-r-lg:18px;
    /* --- tipografi olcegi: 11/12/13/15/19/26, rastgele boyut YOK --- */
    --a-t-xs:11px; --a-t-sm:12px; --a-t-md:13px; --a-t-lg:15px; --a-t-xl:19px;
    /* --- hareket: Expo.out, kisa --- */
    --a-ease:cubic-bezier(.16,1,.3,1);
}

/* Gercek webfont — dash_head() admin dalinda Google Fonts'tan yuklenir.
   Yuklenemezse Inter/Segoe UI'ye duser, hicbir sey kirilmaz. */
body.is-admin-ctx { background:var(--a-bg); letter-spacing:-.1px; }

/* Rakamlar HER YERDE mono + tabular: tutar/adet sutunlari titremeden hizalanir.
   Veri taramasinda en buyuk tek kazanc bu. */
body.is-admin-ctx .db-stat .val,
body.is-admin-ctx .adm-id,
body.is-admin-ctx .db-table .adm-num,
body.is-admin-ctx .adm-count,
body.is-admin-ctx .adm-ring-pct,
body.is-admin-ctx .adm-bar-lbl,
body.is-admin-ctx .db-mini b { font-variant-numeric:tabular-nums; }
body.is-admin-ctx .db-table td { font-variant-numeric:tabular-nums; }

/* --- ortam isigi: yumusak, hareketsiz "blob"lar (motion 3/10) --- */
body.is-admin-ctx::before {
    background:
        radial-gradient(820px circle at 4% -10%, rgba(var(--acc-rgb,135,120,255),.20), transparent 58%),
        radial-gradient(680px circle at 98% 4%,  rgba(232,196,116,.10), transparent 55%),
        radial-gradient(900px circle at 68% 118%, rgba(var(--acc-rgb,135,120,255),.12), transparent 62%);
}
body.is-admin-ctx::after { opacity:.55; }

/* ---------------------------------------------------------------------
   1) UST CUBUK — cam (backdrop blur + saturate) + kehribar kimlik seridi
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-topbar {
    background:var(--sb-glass);
    -webkit-backdrop-filter:blur(22px) saturate(165%); backdrop-filter:blur(22px) saturate(165%);
    border-bottom:1px solid var(--a-line);
}
body.is-admin-ctx .db-topbar::after {
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, rgba(232,196,116,.7), rgba(232,196,116,.14) 38%, transparent 72%);
    pointer-events:none;
}
body.is-admin-ctx .db-bell,
body.is-admin-ctx .db-langpick,
body.is-admin-ctx .db-user {
    background:var(--sb-fill-3); border-color:var(--a-line2); border-radius:var(--a-r-sm);
}
body.is-admin-ctx .db-bell:hover { background:var(--sb-fill-2); border-color:var(--admin-line); }

/* ---------------------------------------------------------------------
   2) KENAR CUBUGU — ikon cipleri + aktif satirda dolgulu slab & parlama
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-sidebar {
    background:linear-gradient(180deg,#0b0d13,#08090e);
    border-right:1px solid var(--a-line);
}
body.is-admin-ctx .db-nav { padding:var(--a-sp3) var(--a-sp2); }
body.is-admin-ctx .db-nav-label {
    padding:16px 12px 7px; font-size:9.5px; letter-spacing:1.6px; color:#5d6070;
}
body.is-admin-ctx .db-nav-item {
    gap:11px; padding:7px 10px; margin-bottom:2px; font-size:var(--a-t-md); font-weight:500;
    border-radius:var(--a-r-sm); border:1px solid transparent;
    transition:background .18s var(--a-ease), color .18s var(--a-ease), border-color .18s var(--a-ease);
}
/* ikon artik bir "cip" — hizalama netlesiyor, aktif durum tutunacak yer buluyor */
body.is-admin-ctx .db-nav-item i {
    width:26px; height:26px; flex:0 0 26px; border-radius:var(--a-r-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--sb-fill-3); font-size:12px; color:#7f8496;
    transition:background .18s var(--a-ease), color .18s var(--a-ease);
}
body.is-admin-ctx .db-nav-item:hover { background:var(--sb-fill-1); color:var(--sb-text-strong); }
body.is-admin-ctx .db-nav-item:hover i { background:var(--sb-fill-2); color:var(--sb-text-strong); }
/* Aktif satir: dolgulu slab + sol serit YETER.
   Kutu arkasi parlama (box-shadow glow) BILINCLI OLARAK YOK — her ikon
   kutusunun arkasinda renk halesi olunca ekran "yaniyor" gibi duruyor ve
   asil vurgu (hangi menudeyim) kayboluyor. Parlama yalnizca gercekten
   dikkat isteyen tek bir yerde kalir. */
body.is-admin-ctx .db-nav-item.is-active {
    color:var(--sb-text-strong); font-weight:600;
    background:linear-gradient(90deg, rgba(232,196,116,.14), rgba(232,196,116,.03));
    border-color:rgba(232,196,116,.16);
}
body.is-admin-ctx .db-nav-item.is-active i { background:rgba(232,196,116,.2); color:var(--admin); }
body.is-admin-ctx .db-nav-item.is-active::before {
    width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--admin);
}

/* ---------------------------------------------------------------------
   3) SAYFA ISKELETI — baglam cubugu YAPISKAN + cam
   200 satirlik tabloda kaydirirken "neredeyim" bilgisi kaybolmasin.
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-crumbbar {
    position:sticky; top:var(--hdr); z-index:800;
    display:flex; align-items:center; justify-content:space-between; gap:var(--a-sp3);
    padding:10px 38px; flex-wrap:wrap;
    background:var(--sb-glass);
    -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
    border-bottom:1px solid var(--a-line);
}
body.is-admin-ctx .adm-crumb { display:flex; align-items:center; gap:9px; font-size:var(--a-t-sm); min-width:0; }
body.is-admin-ctx .adm-crumb a { color:#8a8fa0; font-weight:500; display:inline-flex; align-items:center; gap:7px; transition:color .16s; }
body.is-admin-ctx .adm-crumb a:hover { color:var(--admin); }
body.is-admin-ctx .adm-crumb .sep { color:#4a4d5c; font-size:8px; }
body.is-admin-ctx .adm-crumb .now { color:var(--sb-text-strong); font-weight:600; }
body.is-admin-ctx .adm-crumb-date { color:#6a6e7e; font-size:var(--a-t-sm); font-weight:500; display:inline-flex; align-items:center; gap:7px; }
@media (max-width:600px){ body.is-admin-ctx .adm-crumb-date { display:none; } }

body.is-admin-ctx .db-content { padding:var(--a-sp5) 38px 52px; }

/* Sayfa basligi — baslik/aciklama solda, EYLEMLER sagda (sabit yuva) */
body.is-admin-ctx .db-pagehead {
    display:flex; align-items:flex-start; justify-content:space-between; gap:var(--a-sp4);
    flex-wrap:wrap; margin-bottom:var(--a-sp5); padding:0 0 var(--a-sp4);
    border-bottom:1px solid var(--a-line);
}
body.is-admin-ctx .db-pagehead > *:first-child { min-width:0; flex:1 1 420px; }
body.is-admin-ctx .db-h1 { font-size:23px; gap:13px; font-weight:600; letter-spacing:-.5px; }
/* Sayfa basligi ikon kutusu: tonlu zemin + ince kenarlik yeterli.
   Arkasindaki hale kaldirildi (bkz. kenar cubugu notu). */
body.is-admin-ctx .db-h1 > .fa, body.is-admin-ctx .db-h1 > i {
    width:40px; height:40px; border-radius:var(--a-r-sm); font-size:16px;
    background:linear-gradient(160deg, rgba(232,196,116,.16), rgba(232,196,116,.04));
    border:1px solid rgba(232,196,116,.2); color:var(--admin) !important;
}
body.is-admin-ctx .db-sub { font-size:var(--a-t-md); color:#7d8192; padding-left:53px; margin-top:7px; max-width:78ch; }
body.is-admin-ctx .adm-pageacts { display:flex; align-items:center; gap:var(--a-sp2); flex-wrap:wrap; }
@media (max-width:760px){
    body.is-admin-ctx .db-content { padding:var(--a-sp4) 16px 40px; }
    body.is-admin-ctx .adm-crumbbar { padding:9px 16px; }
    body.is-admin-ctx .db-sub { padding-left:0; }
    body.is-admin-ctx .db-h1 { font-size:20px; }
}

/* ---------------------------------------------------------------------
   4) ALT SEKME BARI (.adm-subnav) — cam hap, segment kontrolu
   Daha once her link 8 satirlik inline stil tasiyordu.
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-subnav {
    display:flex; flex-wrap:wrap; gap:4px; margin-bottom:var(--a-sp5);
    padding:5px; border-radius:var(--a-r);
    background:var(--sb-fill-3); border:1px solid var(--a-line);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
body.is-admin-ctx .adm-subnav a {
    flex:1 1 auto; min-width:118px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:34px; padding:7px 12px; border-radius:var(--a-r-sm);
    font-size:var(--a-t-sm); font-weight:500; color:#8a8fa0;
    border:1px solid transparent; white-space:nowrap;
    transition:background .18s var(--a-ease), color .18s var(--a-ease), border-color .18s var(--a-ease);
}
body.is-admin-ctx .adm-subnav a i { font-size:12px; opacity:.75; }
body.is-admin-ctx .adm-subnav a:hover { color:var(--sb-text-strong); background:var(--sb-fill-3); }
body.is-admin-ctx .adm-subnav a.is-active {
    color:var(--sb-text-strong); font-weight:600;
    background:linear-gradient(180deg,#232735,#171a24);
    border-color:var(--a-line2);
    box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
body.is-admin-ctx .adm-subnav a.is-active i { color:var(--admin); opacity:1; }

/* ---------------------------------------------------------------------
   4b) GRUP ICI ATLAMA CUBUGU (.adm-jump) + PANEL AYRACI (.adm-secmark)
   v148: 23 alt ekran 8 gruba indirildi. Bir grupta birden fazla panel
   oldugundan sayfa uzadi; bu iki oge "neredeyim / nereye atlarim"
   sorusunu cozer. .adm-subnav'dan GORSEL OLARAK AYRI olmali, yoksa iki
   satir sekme gibi durup asil gezinmeyi belirsizlestirir — bu yuzden
   zeminsiz, yalnizca metin.
   --------------------------------------------------------------------- */
/* Ust bosluk: .adm-subnav'in margin-bottom'u ile CAKISIR (bitisik dikey
   marjlar birlesir; biri negatifse sonuc "en buyuk pozitif + en negatif"
   olur). -sp5+10px  ->  20-10 = 10px net aralik. 2px denendi ve subnav'a
   yapisik ikinci bir sekme satiri gibi duruyordu. */
body.is-admin-ctx .adm-jump {
    display:flex; flex-wrap:wrap; gap:2px 4px;
    margin:calc(var(--a-sp5) * -1 + 10px) 0 var(--a-sp5); padding:0 2px;
}
body.is-admin-ctx .adm-jump a {
    display:inline-flex; align-items:center; min-height:26px; padding:3px 9px;
    font-size:12px; font-weight:500; color:var(--sb-text-3);
    border-radius:99px; border:1px solid transparent;
    transition:color .18s var(--a-ease), background .18s var(--a-ease);
}
body.is-admin-ctx .adm-jump a::before {
    content:"#"; margin-right:4px; opacity:.5; font-weight:600;
}
body.is-admin-ctx .adm-jump a:hover { color:var(--sb-text-strong); background:var(--sb-fill-2); }
body.is-admin-ctx .adm-jump a.is-target {
    color:var(--admin); border-color:rgba(232,196,116,.28); background:rgba(232,196,116,.08);
}

/* Panel ayraci — capa hedefi. scroll-margin-top YAPISKAN ust cubuk +
   baglam cubugu yuksekligi kadar; olmazsa capaya atlayinca baslik
   onlarin altinda kalir. */
body.is-admin-ctx .adm-secmark {
    display:flex; align-items:center; gap:10px;
    margin:var(--a-sp5) 0 10px; scroll-margin-top:calc(var(--hdr) + 62px);
    font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
    color:var(--sb-text-3);
}
body.is-admin-ctx .adm-secmark::after {
    content:""; flex:1; height:1px; background:var(--a-line);
}
/* NOT: burada ":first-of-type { margin-top:0 }" DENENDI ve olu kaldi —
   o secici sinifa degil ELEMAN TIPINE bakar (.adm-secmark bir div ve
   kardesleri arasindaki ilk div degil). Ayrik ayrac bosluklari zaten
   tekduze olsun istiyoruz, o yuzden kural kaldirildi. */

/* ---------------------------------------------------------------------
   5) KARTLAR — ust kenar isigi + derin golge (katmanli derinlik)
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-panel {
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,0) 96px), var(--a-s1);
    border:1px solid var(--a-line); border-radius:var(--a-r);
    margin-bottom:var(--a-sp4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -28px rgba(0,0,0,.95);
    transition:border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}
body.is-admin-ctx .db-panel:hover {
    border-color:var(--a-line2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 26px 54px -28px rgba(0,0,0,1);
}
/* Panel basligi: gorsel zemin YOK — admin'de baslik bir etiket, dekor degil */
body.is-admin-ctx .db-panel-head {
    padding:13px var(--a-sp4); background:rgba(255,255,255,.02);
    border-bottom:1px solid var(--a-line); gap:var(--a-sp3); flex-wrap:wrap;
}
body.is-admin-ctx .db-panel-head h4 { font-size:10.5px; font-weight:500; letter-spacing:1.2px;
    text-transform:uppercase; color:#9297a8; text-shadow:none;
    display:flex; align-items:center; gap:8px;
}
body.is-admin-ctx .db-panel-body { padding:var(--a-sp4); }

/* ---------------------------------------------------------------------
   6) ARAC CUBUGU — cam arama hapi + kayit sayaci
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-toolbar { display:flex; align-items:center; gap:var(--a-sp2); flex-wrap:wrap; margin-left:auto; }
body.is-admin-ctx .adm-search { position:relative; display:inline-flex; align-items:center; }
body.is-admin-ctx .adm-search > i { position:absolute; left:12px; font-size:11px; color:#6a6e7e; pointer-events:none; }
body.is-admin-ctx .adm-search input {
    width:250px; max-width:44vw; min-height:34px;
    padding:7px 12px 7px 32px; border-radius:100px;
    background:rgba(0,0,0,.4); border:1px solid var(--a-line2); color:var(--sb-text-strong);
    font-family:inherit; font-size:var(--a-t-sm);
    transition:border-color .18s var(--a-ease), box-shadow .18s var(--a-ease), background .18s var(--a-ease);
}
body.is-admin-ctx .adm-search input::placeholder { color:#6a6e7e; }
body.is-admin-ctx .adm-search input:focus {
    outline:none; background:rgba(0,0,0,.55);
    border-color:var(--admin-line); box-shadow:0 0 0 3px rgba(232,196,116,.13);
}
body.is-admin-ctx .adm-count {
    font-size:var(--a-t-xs); font-weight:500; letter-spacing:.3px; color:#8a8fa0;
    background:var(--sb-fill-3); border:1px solid var(--a-line);
    padding:5px 11px; border-radius:100px; white-space:nowrap;
}
body.is-admin-ctx .adm-count b { color:var(--sb-text-strong); }
body.is-admin-ctx .adm-norows td { text-align:center; color:#7d8192; padding:36px 16px !important; font-size:var(--a-t-md); }

/* ---------------------------------------------------------------------
   SUNUCU TARAFI ARAMA (.adm-searchbar) + SAYFALAMA (.adm-pager)
   Gorunum .adm-toolbar ile ayni; fark ISLEVDE: bu bir GET formu ve arama
   TUM kayitlarda calisiyor, yalnizca ekrandakilerde degil.
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-searchbar { display:flex; align-items:center; gap:var(--a-sp2); flex-wrap:wrap; margin-left:auto; }

body.is-admin-ctx .adm-pager {
    display:flex; align-items:center; justify-content:space-between; gap:var(--a-sp2);
    flex-wrap:wrap; padding:12px var(--a-sp4); border-top:1px solid var(--a-line);
}
body.is-admin-ctx .adm-pgnums { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
body.is-admin-ctx .adm-pg {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-width:32px; min-height:30px; padding:0 10px; border-radius:var(--a-r-xs);
    background:var(--sb-fill-1); border:1px solid var(--a-line);
    color:#c3c7d4; font-size:var(--a-t-sm); font-weight:600;
    font-variant-numeric:tabular-nums;
    transition:background .15s var(--a-ease), border-color .15s var(--a-ease), color .15s var(--a-ease);
}
body.is-admin-ctx .adm-pg:hover { background:var(--sb-fill-2); border-color:var(--admin-line); color:var(--sb-text-strong); }
body.is-admin-ctx .adm-pg.is-active { background:var(--admin); border-color:var(--admin); color:#14161f; cursor:default; }
body.is-admin-ctx .adm-pg.is-off { opacity:.35; pointer-events:none; }
body.is-admin-ctx .adm-pg i { font-size:10px; }
body.is-admin-ctx .adm-pgdots { color:#5d6070; padding:0 2px; }

/* ---------------------------------------------------------------------
   TOPLU ISLEM CUBUGU (.adm-bulkbar)
   Secim yokken sakin durur; bir satir secilince canlanir ki "simdi bir
   sey yapabilirsin" sinyali net olsun.
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-bulkbar {
    display:flex; align-items:center; gap:var(--a-sp2); flex-wrap:wrap;
    padding:10px var(--a-sp4); border-bottom:1px solid var(--a-line);
    background:var(--sb-fill-3);
    transition:background .18s var(--a-ease), border-color .18s var(--a-ease);
}
body.is-admin-ctx .adm-bulkbar.is-on {
    background:rgba(232,196,116,.07); border-bottom-color:var(--admin-line);
}
body.is-admin-ctx .adm-bulk-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:26px; height:24px; padding:0 8px; border-radius:100px;
    background:var(--sb-fill-2); border:1px solid var(--a-line);
    color:var(--sb-on-accent); font-size:var(--a-t-sm); font-weight:700; font-variant-numeric:tabular-nums;
}
body.is-admin-ctx .adm-bulkbar.is-on .adm-bulk-count { background:var(--admin); border-color:var(--admin); color:#14161f; }
body.is-admin-ctx .adm-bulk-lbl { color:#8a8fa0; font-size:var(--a-t-sm); margin-right:2px; }
body.is-admin-ctx .adm-bulkbar select.db-input { min-height:32px; padding:6px 10px; width:auto; min-width:180px; }
body.is-admin-ctx .adm-bulkbar .sb-btn { min-height:32px; padding:0 14px; }

/* secim sutunu: dar ve tiklamasi kolay */
body.is-admin-ctx .adm-selcol { width:1%; padding-left:16px !important; padding-right:6px !important; }
body.is-admin-ctx .adm-bulkbox {
    width:16px; height:16px; accent-color:var(--admin); cursor:pointer; vertical-align:middle;
}
@media (max-width:620px){
    body.is-admin-ctx .adm-pager { justify-content:center; }
    body.is-admin-ctx .adm-pgnums { order:-1; width:100%; justify-content:center; }
}

/* ---------------------------------------------------------------------
   7) TABLOLAR — cam yapiskan baslik, satirda aksan seridi
   ---------------------------------------------------------------------
   .db-panel-body.flush uzerinde overflow-x:auto var; CSS'e gore bir eksen
   'visible' disi olunca digeri de 'auto' olur — yani o kutu zaten bir
   KAYDIRMA KABI ve th icin position:sticky ona gore calisir. max-height
   verildi ki uzun tablolarda gercekten sabitlensin; kisa tablolarda kutu
   zaten kisa kalir, kural etkisiz olur (zararsiz).
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-panel-body.flush { max-height:min(74vh,900px); overflow:auto; }
body.is-admin-ctx .db-table th {
    position:sticky; top:0; z-index:2;
    background:var(--sb-glass);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:9.5px; font-weight:500; letter-spacing:1.1px;
    text-transform:uppercase; color:#787d8e;
    padding:11px 13px; border-bottom:1px solid var(--a-line2);
    white-space:nowrap;
}
body.is-admin-ctx .db-table td { padding:10px 13px; font-size:var(--a-t-md); color:#c3c7d4; }
body.is-admin-ctx .db-table tbody tr { border-bottom:1px solid var(--sb-line2); transition:background .14s var(--a-ease); }
body.is-admin-ctx .db-table tbody tr:hover { background:var(--sb-fill-3); }
/* uzerine gelinen satirda sol kenarda ince aksan seridi — goz satiri kaybetmez */
body.is-admin-ctx .db-table tbody tr:hover td:first-child { box-shadow:inset 2px 0 0 var(--admin); }
body.is-admin-ctx .db-table td.adm-id { color:#7d8192; white-space:nowrap; width:1%; font-size:var(--a-t-sm); }
body.is-admin-ctx .db-table .adm-num { text-align:right; white-space:nowrap; }
body.is-admin-ctx .db-table th.adm-num { text-align:right; }
body.is-admin-ctx .adm-rowacts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
body.is-admin-ctx .adm-rowacts form { margin:0; }

/* Kucuk satir butonu */
body.is-admin-ctx .adm-btn-sm {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:30px; padding:0 11px; border-radius:var(--a-r-xs);
    background:var(--sb-fill-3); border:1px solid var(--a-line2); color:#e7e9f0;
    font-family:inherit; font-size:var(--a-t-sm); font-weight:500; cursor:pointer; white-space:nowrap;
    transition:background .16s var(--a-ease), border-color .16s var(--a-ease);
}
body.is-admin-ctx .adm-btn-sm:hover { background:var(--sb-fill-2); border-color:var(--admin-line); color:var(--sb-text-strong); }
body.is-admin-ctx .adm-btn-sm i { font-size:11px; }

body.is-admin-ctx .db-statusform select {
    min-height:30px; padding:6px 28px 6px 11px; font-size:var(--a-t-sm);
    background-color:rgba(0,0,0,.4); border-color:var(--a-line2); border-radius:var(--a-r-xs);
}
body.is-admin-ctx .db-statusform button {
    min-height:30px; padding:0 11px; font-size:var(--a-t-sm); border-radius:var(--a-r-xs);
    background:var(--sb-fill-3); border-color:var(--a-line2);
}
body.is-admin-ctx .db-statusform button:hover { background:var(--sb-fill-2); border-color:var(--admin-line); }
body.is-admin-ctx .db-del-btn { width:30px; height:30px; flex-shrink:0; border-radius:var(--a-r-xs); }

/* Rozetler: parlayan noktali hap */
body.is-admin-ctx .db-badge {
    border-radius:100px; padding:4px 11px 4px 9px; gap:7px;
    font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
    border:1px solid var(--sb-line);
}
body.is-admin-ctx .db-badge::before { width:6px; height:6px; }

/* ---------------------------------------------------------------------
   8) KPI KARTLARI — TEMA GORSELLERI KORUNUR, uzerine okunur katman
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-stats { gap:var(--a-sp3); margin-bottom:var(--a-sp5); grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
body.is-admin-ctx .db-stat {
    padding:19px 20px; min-height:136px; border-radius:var(--a-r);
    border:1px solid var(--a-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 46px -30px rgba(0,0,0,1);
    transition:border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}
body.is-admin-ctx .db-stat:hover {
    transform:none; border-color:var(--a-line2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 26px 54px -28px rgba(0,0,0,1);
}
/* fotograf uzerindeki katman: daha koyu ve yonlu -> rakam her zaman okunur */
body.is-admin-ctx .db-stat.has-img::after {
    background:linear-gradient(152deg, rgba(7,8,12,.58) 0%, rgba(7,8,12,.9) 58%, rgba(7,8,12,.97) 100%);
}
body.is-admin-ctx .db-stat.has-img:hover::before { transform:scale(1.06); }
body.is-admin-ctx .db-stat-top { margin-bottom:14px; }
body.is-admin-ctx .db-stat .ic {
    width:40px; height:40px; border-radius:var(--a-r-sm); font-size:16px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.is-admin-ctx .db-stat .val { font-size:29px; font-weight:600; letter-spacing:-1px; line-height:1; }
body.is-admin-ctx .db-stat .lbl {
    font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
    color:#8a8fa0; margin-top:9px;
}
body.is-admin-ctx .db-stat.has-img .lbl { color:#b9bdca; }

/* ---------------------------------------------------------------------
   9) FORMLAR + BUTONLAR — aksan dolgulu birincil eylem
   --------------------------------------------------------------------- */
body.is-admin-ctx .db-input,
body.is-admin-ctx .db-select,
body.is-admin-ctx .db-textarea,
body.is-admin-ctx select.db-input {
    background:rgba(0,0,0,.4); border:1px solid var(--a-line2);
    border-radius:var(--a-r-sm); font-size:var(--a-t-md); font-family:inherit;
    transition:border-color .18s var(--a-ease), box-shadow .18s var(--a-ease), background .18s var(--a-ease);
}
body.is-admin-ctx .db-input,
body.is-admin-ctx select.db-input { min-height:38px; padding:9px 12px; }
body.is-admin-ctx .db-input:focus,
body.is-admin-ctx .db-select:focus,
body.is-admin-ctx .db-textarea:focus {
    outline:none; background:rgba(0,0,0,.55);
    border-color:var(--admin-line); box-shadow:0 0 0 3px rgba(232,196,116,.13);
}
body.is-admin-ctx .db-lbl { font-size:var(--a-t-sm); font-weight:500; color:#a4a8b6; letter-spacing:.2px; }

/* Birincil buton: aksan dolgulu, RENKLI HALE YOK.
   Onceden butonun altinda aksan renginde genis bir golge vardi
   (0 8px 22px -12px rgba(--acc-rgb,.95)) — ekranda birden fazla buton
   olunca "her sey yaniyor" hissi veriyordu ve goz butonlara takiliyordu.
   Yerine notr, yonlu bir derinlik golgesi kondu: buton hala kalkik
   duruyor ama renk yaymiyor. Ust kenardaki ince ic isik (inset) HALE
   DEGIL, yuzeyin kenar cizgisidir — korunuyor.

   NOT: aksan rengi admin panelinden secilir. Cok ACIK bir aksan secilirse
   beyaz yazi kontrasti duser — metin golgesi bunu bir miktar telafi eder,
   ama acik tonlarda Appearance ekranindan kontrol edilmelidir. */
body.is-admin-ctx .sb-btn { min-height:38px; border-radius:var(--a-r-sm); font-weight:600; }
body.is-admin-ctx .sb-btn:not(.ghost) {
    background:var(--sb-accent-fill);
    border:1px solid rgba(var(--acc-rgb,135,120,255),.55);
    box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    transition:filter .16s var(--a-ease), box-shadow .16s var(--a-ease), transform .1s var(--a-ease);
}
body.is-admin-ctx .sb-btn:not(.ghost) i { color:var(--sb-on-accent); }
body.is-admin-ctx .sb-btn:not(.ghost):hover { filter:brightness(1.1); box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.24); }
body.is-admin-ctx .sb-btn:not(.ghost):active { transform:translateY(1px) scale(.985); }
body.is-admin-ctx .sb-btn.ghost { background:var(--sb-fill-1); border-color:var(--a-line2); }
body.is-admin-ctx .sb-btn.ghost:hover { background:var(--sb-fill-2); border-color:var(--admin-line); }

/* ---------------------------------------------------------------------
   10) GENEL BAKIS YERLESIMI (.adm-grid)
   Onceki hali UC ayri iki-sutunlu izgaraydi (1/1, 1.7/1, 1.6/1) ve sutun
   kenarlari hicbir satirda hizalanmiyordu. Artik TEK izgara.
   --------------------------------------------------------------------- */
body.is-admin-ctx .adm-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--a-sp4); align-items:start; }
body.is-admin-ctx .adm-grid > * { min-width:0; }
body.is-admin-ctx .adm-grid .db-panel:last-child { margin-bottom:0; }
@media (max-width:1100px){ body.is-admin-ctx .adm-grid { grid-template-columns:1fr; } }

/* =====================================================================
   SATIS TRENDI GRAFIGI (.adm-chart2) — eksenli, izgarali, tooltip'li
   ---------------------------------------------------------------------
   Kutuphane YOK (projede build adimi yok): eksen etiketleri, izgara
   cizgileri ve tooltip saf CSS. Cubuk yuksekligi YUZDE olarak veriliyor,
   boylece kap yeniden boyutlaninca grafik de olceklenir.
   ===================================================================== */
body.is-admin-ctx .adm-rangetabs { display:flex; gap:3px; margin-left:auto; padding:3px;
    background:rgba(0,0,0,.3); border:1px solid var(--a-line); border-radius:100px; flex-wrap:wrap; }
body.is-admin-ctx .adm-rangetabs a {
    padding:5px 12px; border-radius:100px; font-size:var(--a-t-xs); font-weight:600;
    color:#8a8fa0; white-space:nowrap; border:1px solid transparent;
    transition:background .16s var(--a-ease), color .16s var(--a-ease);
}
body.is-admin-ctx .adm-rangetabs a:hover { color:var(--sb-text-strong); background:var(--sb-fill-2); }
body.is-admin-ctx .adm-rangetabs a.is-active { color:#14161f; background:var(--admin); border-color:var(--admin); }

/* --- ozet seridi --- */
body.is-admin-ctx .adm-kpirow {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:1px; background:var(--a-line); border-bottom:1px solid var(--a-line);
}
body.is-admin-ctx .adm-kpi { background:var(--a-s1); padding:13px var(--a-sp4); display:flex; flex-direction:column; gap:4px; }
body.is-admin-ctx .adm-kpi-lbl { font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#7d8192; }
body.is-admin-ctx .adm-kpi-val { color:var(--sb-text-strong); font-size:17px; font-weight:700; letter-spacing:-.4px; display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
body.is-admin-ctx .adm-kpi-val.adm-up   { color:var(--a-ok); }
body.is-admin-ctx .adm-kpi-val.adm-down { color:var(--a-bad); }
body.is-admin-ctx .adm-kpi-val.adm-flat { color:#7d8192; }
body.is-admin-ctx .adm-kpi-val i { font-size:11px; }

/* --- grafik govdesi --- */
body.is-admin-ctx .adm-chart2 { display:flex; gap:12px; height:230px; }
body.is-admin-ctx .adm-yaxis {
    display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
    width:66px; flex:0 0 66px; padding-bottom:20px;
    font-size:9.5px; color:#6a6e7e; font-variant-numeric:tabular-nums; white-space:nowrap;
}
body.is-admin-ctx .adm-plot { position:relative; flex:1; min-width:0; padding-bottom:20px; }
body.is-admin-ctx .adm-gridline { position:absolute; left:0; right:0; height:1px; background:var(--sb-fill-1); pointer-events:none; }
body.is-admin-ctx .adm-gridline:first-child { background:var(--sb-fill-2); }
body.is-admin-ctx .adm-bars { position:absolute; inset:0 0 20px 0; display:flex; align-items:flex-end; gap:4px; }

body.is-admin-ctx .adm-col { position:relative; flex:1; min-width:0; height:100%; display:flex; flex-direction:column; }
body.is-admin-ctx .adm-colbar { flex:1; display:flex; align-items:flex-end; justify-content:center; }
body.is-admin-ctx .adm-col .adm-bar {
    display:block; width:100%; max-width:34px; border-radius:4px 4px 2px 2px;
    background:linear-gradient(180deg, rgba(var(--acc-rgb,135,120,255),1), rgba(var(--acc-rgb,135,120,255),.4));
    transition:filter .16s var(--a-ease);
}
body.is-admin-ctx .adm-col:hover .adm-bar { filter:brightness(1.4); }
body.is-admin-ctx .adm-col .adm-bar.is-today { background:linear-gradient(180deg, var(--admin), rgba(232,196,116,.4)); }
body.is-admin-ctx .adm-col .adm-bar-lbl {
    position:absolute; bottom:-19px; left:0; right:0; text-align:center;
    font-size:9.5px; color:#6a6e7e; font-variant-numeric:tabular-nums;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.is-admin-ctx .adm-col.is-current .adm-bar-lbl { color:var(--admin); font-weight:700; }

/* --- tooltip: saf CSS, JS yok --- */
body.is-admin-ctx .adm-tip {
    position:absolute; bottom:calc(100% - 12px); left:50%; transform:translate(-50%,4px);
    display:flex; flex-direction:column; gap:2px; z-index:5; pointer-events:none;
    min-width:104px; padding:8px 10px; border-radius:var(--a-r-sm);
    background:rgba(10,12,18,.97); border:1px solid var(--a-line2);
    box-shadow:0 10px 24px -10px rgba(0,0,0,.9);
    font-size:var(--a-t-xs); color:#c3c7d4; white-space:nowrap;
    opacity:0; visibility:hidden; transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
body.is-admin-ctx .adm-tip b { color:var(--sb-text-strong); font-size:var(--a-t-sm); }
body.is-admin-ctx .adm-col:hover .adm-tip { opacity:1; visibility:visible; transform:translate(-50%,0); }
/* kenardaki cubuklarda tooltip ekrandan tasmasin */
body.is-admin-ctx .adm-col:first-child .adm-tip { left:0; transform:translate(0,4px); }
body.is-admin-ctx .adm-col:first-child:hover .adm-tip { transform:translate(0,0); }
body.is-admin-ctx .adm-col:last-child .adm-tip { left:auto; right:0; transform:translate(0,4px); }
body.is-admin-ctx .adm-col:last-child:hover .adm-tip { transform:translate(0,0); }

body.is-admin-ctx .adm-chartfoot {
    margin-top:16px; padding-top:13px; border-top:1px solid var(--a-line);
    font-size:var(--a-t-sm); color:#8a8fa0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
body.is-admin-ctx .adm-chartfoot i { color:var(--admin); }
body.is-admin-ctx .adm-chartfoot b { color:var(--sb-text-strong); }

@media (max-width:640px){
    body.is-admin-ctx .adm-chart2 { height:190px; }
    body.is-admin-ctx .adm-yaxis { width:50px; flex-basis:50px; font-size:8.5px; }
}

/* ---- mini cubuk grafik (eski varyant — baska yerde kullanilirsa duruyor) ---- */
body.is-admin-ctx .adm-chart { display:flex; align-items:flex-end; gap:5px; height:168px; padding-top:8px; }
body.is-admin-ctx .adm-chart-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
/* Cubuklarda parlama YOK — 14 cubuk yan yana parlayinca grafik okunmuyordu.
   Ayrim rengin kendisiyle yapiliyor (bugun = kehribar). */
body.is-admin-ctx .adm-bar {
    width:100%; max-width:26px; border-radius:5px 5px 2px 2px;
    background:linear-gradient(180deg, rgba(var(--acc-rgb,135,120,255),1), rgba(var(--acc-rgb,135,120,255),.35));
    transition:filter .16s var(--a-ease);
}
body.is-admin-ctx .adm-chart-col:hover .adm-bar { filter:brightness(1.35); }
body.is-admin-ctx .adm-bar.is-today {
    background:linear-gradient(180deg, var(--admin), rgba(232,196,116,.35));
}
body.is-admin-ctx .adm-bar-lbl { color:#6a6e7e; font-size:9.5px; line-height:1; }
body.is-admin-ctx .adm-chart-col.is-today .adm-bar-lbl { color:var(--admin); font-weight:600; }

/* ---- etkinlik akisi ---- */
body.is-admin-ctx .adm-feed { padding:4px 0; }
body.is-admin-ctx .adm-feed-row { display:flex; align-items:flex-start; gap:11px; padding:10px 18px; border-bottom:1px solid var(--sb-line2); transition:background .14s; }
body.is-admin-ctx .adm-feed-row:last-child { border-bottom:none; }
body.is-admin-ctx .adm-feed-row:hover { background:var(--sb-fill-1); }
body.is-admin-ctx .adm-feed-ic { width:28px; height:28px; border-radius:var(--a-r-xs); background:var(--sb-fill-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; }
body.is-admin-ctx .adm-feed-txt { flex:1; min-width:0; color:#c3c7d4; font-size:var(--a-t-sm); line-height:1.5; }
body.is-admin-ctx .adm-feed-txt b { color:var(--sb-text-strong); font-weight:600; }
body.is-admin-ctx .adm-feed-meta { color:#6a6e7e; font-size:10.5px; margin-top:3px; }

/* ---- hedef halkasi ---- */
body.is-admin-ctx .adm-ring { position:relative; width:140px; height:140px; margin:6px auto 16px; }
body.is-admin-ctx .adm-ring svg { width:140px; height:140px; transform:rotate(-90deg); }
body.is-admin-ctx .adm-ring-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
body.is-admin-ctx .adm-ring-pct { color:var(--sb-text-strong); font-size:27px; font-weight:600; letter-spacing:-1px; }
body.is-admin-ctx .adm-ring-cap { color:#7d8192; font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }

/* ---- hizli eylemler + mini satirlar ---- */
body.is-admin-ctx .db-qa a {
    min-height:40px; border-radius:var(--a-r-sm); font-size:var(--a-t-md); font-weight:500;
    background:var(--sb-fill-1); border:1px solid var(--a-line); color:#c3c7d4;
    transition:background .16s var(--a-ease), border-color .16s var(--a-ease), color .16s var(--a-ease);
}
body.is-admin-ctx .db-qa a:hover { background:rgba(232,196,116,.08); border-color:var(--admin-line); color:var(--sb-text-strong); }
body.is-admin-ctx .db-qa a:hover i { color:var(--admin); }
body.is-admin-ctx .db-mini { padding:8px 0; font-size:var(--a-t-md); border-bottom:1px solid var(--sb-line); }
body.is-admin-ctx .db-mini:last-child { border-bottom:none; }
body.is-admin-ctx .db-mini span { color:#8a8fa0; }

/* ---- bos durumlar ---- */
body.is-admin-ctx .db-empty { padding:46px 20px; }
body.is-admin-ctx .db-empty .ec {
    width:58px; height:58px; border-radius:var(--a-r); font-size:22px;
    background:linear-gradient(160deg, rgba(232,196,116,.15), rgba(232,196,116,.03));
    border:1px solid rgba(232,196,116,.18); color:var(--admin);
}
body.is-admin-ctx .db-empty p { font-size:var(--a-t-md); color:#7d8192; max-width:48ch; margin-left:auto; margin-right:auto; }

/* ---------------------------------------------------------------------
   11) ERISILEBILIRLIK — klavye odagi HER ZAMAN gorunur
   --------------------------------------------------------------------- */
body.is-admin-ctx a:focus-visible,
body.is-admin-ctx button:focus-visible,
body.is-admin-ctx select:focus-visible,
body.is-admin-ctx summary:focus-visible,
body.is-admin-ctx input:focus-visible {
    outline:2px solid var(--admin); outline-offset:2px; border-radius:6px;
}
body.is-admin-ctx ::-webkit-scrollbar { width:10px; height:10px; }
body.is-admin-ctx ::-webkit-scrollbar-track { background:transparent; }
body.is-admin-ctx ::-webkit-scrollbar-thumb { background:var(--sb-fill-2); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
body.is-admin-ctx ::-webkit-scrollbar-thumb:hover { background:var(--sb-fill-3); background-clip:padding-box; }

/* Cam efektini desteklemeyen tarayicida seffaf cubuklar okunmaz kalmasin */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    body.is-admin-ctx .db-topbar,
    body.is-admin-ctx .adm-crumbbar { background:#0a0b10; }
    body.is-admin-ctx .db-table th { background:var(--sb-surface-2); }
}

/* =====================================================================
   KULLANICI PANELI GORUNUMU — v102  (body.dash:not(.is-admin-ctx))
   ---------------------------------------------------------------------
   Admin ile AYNI tasarim ailesi (Modern Dark + cam yuzeyler), ama farkli
   ayarlarla: musteri ekrani veri taramak icin degil, guven vermek ve
   kolay dokunulmak icin. Bu yuzden:
     - yogunluk DUSUK (admin 8/10, burada 4/10): daha genis bosluk
     - yuvarlaklik YUKSEK (r=18 vs admin r=14)
     - dokunma hedefi 44px (admin'de 30-38px yeterliydi)
     - kimlik rengi ACCENT (--acc, Appearance'tan secilir) — kehribar DEGIL

   PARLAMA POLITIKASI: ikon kutularinin arkasinda renk halesi YOK.
   Her kutunun arkasi parlayinca ekran "yaniyor" gibi duruyor ve asil
   vurgu kayboluyordu. Vurgu; tonlu zemin + ince kenarlik + sol serit ile
   yapiliyor. Golgeler yonlu (asagi dogru) — hale degil, derinlik.

   TEMA GORSELLERI KORUNUR: .db-hero arka plani, .db-panel-head kapak
   gorseli ve .db-stat.has-img kart fotograflari satis kimliginin parcasi.
   Bu blokta hicbiri background ile ezilmez.
   ===================================================================== */
body.dash:not(.is-admin-ctx) {
    /* --c-* token blogunda tanimli */

    --c-r-sm:12px; --c-r:16px; --c-r-lg:20px;
    --c-ease:cubic-bezier(.16,1,.3,1);
}
body.dash:not(.is-admin-ctx) { background:var(--c-bg); }

/* Tutar ve sayilar hizali okunsun (bakiye, fatura toplami, ilerleme) */
body.dash:not(.is-admin-ctx) .db-stat .val,
body.dash:not(.is-admin-ctx) .db-srv-amt b,
body.dash:not(.is-admin-ctx) .db-osum-total .amt,
body.dash:not(.is-admin-ctx) .db-mini b { font-variant-numeric:tabular-nums; }
body.dash:not(.is-admin-ctx) .db-table td { font-variant-numeric:tabular-nums; }

/* ---- ust cubuk: cam ---- */
body.dash:not(.is-admin-ctx) .db-topbar {
    background:var(--sb-glass);
    -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
    border-bottom:1px solid var(--c-line);
}
body.dash:not(.is-admin-ctx) .db-bell,
body.dash:not(.is-admin-ctx) .db-langpick,
body.dash:not(.is-admin-ctx) .db-user {
    background:var(--sb-fill-1); border-color:var(--c-line2); border-radius:var(--c-r-sm);
}

/* ---- kenar cubugu: ikon cipleri, aktif slab (hale YOK) ----

   ZEMIN YOK. Sayfanin arka plan katmanlari (.db-bgfx = fotograf + vinyet,
   body.dash::before = ortam isigi, ::after = doku) hepsi position:fixed ve
   z-index:0; kenar cubugu ise z-index:900. Burada OPAK bir gradyan vardi
   (linear-gradient(180deg,var(--sb-surface-2),#0a0b11)) ve o katmanlari
   tamamen ortuyordu -> sag taraf fotografli, sol taraf duz tek renk.
   Zemin kaldirilinca ayni arka plan iki taraftan da gecer.

   Okunabilirlik ayrica saglaniyor: menu ogelerinin KENDI koyu gradyanlari
   var (asagidaki "DENEME (v112)" blogu) ve fotografin uzerinde .db-bgfx
   ::after ile %74->%95 koyulasan bir katman duruyor. */
body.dash:not(.is-admin-ctx) .db-sidebar {
    background:transparent; border-right:1px solid var(--c-line);
}
/* ⚠️ 991px ALTINDA OPAK OLMAK ZORUNDA — orada kenar cubugu bir CEKMECE ve
   icerigin USTUNE kayiyor (bkz. RESPONSIVE blogu). Seffaf birakilirsa
   altindaki tablo/kartlar menunun icinden gorunur, menu okunmaz olur. */
@media (max-width:991px){
    body.dash:not(.is-admin-ctx) .db-sidebar {
        background:linear-gradient(180deg,var(--sb-surface-2),var(--sb-bg));
    }
}
body.dash:not(.is-admin-ctx) .db-nav { padding:18px 14px; }
body.dash:not(.is-admin-ctx) .db-nav-label { padding:16px 12px 8px; font-size:10px; letter-spacing:1.5px; color:var(--sb-text-3); }
body.dash:not(.is-admin-ctx) .db-nav-item {
    gap:12px; padding:10px 12px; min-height:44px; margin-bottom:3px;
    font-size:14px; font-weight:500; border-radius:var(--c-r-sm); border:1px solid transparent;
    transition:background .2s var(--c-ease), color .2s var(--c-ease), border-color .2s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-nav-item i {
    width:28px; height:28px; flex:0 0 28px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--sb-fill-1); font-size:13px; color:var(--sb-text-2);
    transition:background .2s var(--c-ease), color .2s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-nav-item:hover { background:var(--sb-fill-3); color:var(--sb-text-strong); }
body.dash:not(.is-admin-ctx) .db-nav-item:hover i { background:var(--sb-fill-2); color:var(--sb-text-strong); }
body.dash:not(.is-admin-ctx) .db-nav-item.is-active {
    color:var(--sb-text-strong); font-weight:600;
    background:linear-gradient(90deg, rgba(var(--acc-rgb,135,120,255),.16), rgba(var(--acc-rgb,135,120,255),.03));
    border-color:rgba(var(--acc-rgb,135,120,255),.2);
}
body.dash:not(.is-admin-ctx) .db-nav-item.is-active i { background:rgba(var(--acc-rgb,135,120,255),.22); color:var(--acc); }
/* ⚠️ Buradaki eski `.is-active::before { width:3px; height:24px }` kurali
   KALDIRILDI. v184'te ::before karartma katmani oldu; bu kural ayni
   seciciyle daha once geldigi ve width/height'i benim kuralim yeniden
   bildirmedigi icin AKTIF ogenin karartmasi 217x50 yerine 3x24px'e
   duserdu — yani aktif menu ogesinin metni ham fotografin uzerinde
   kaliyordu. Serit artik ayni katmanda background-image ile ciziliyor
   (asagidaki v184 blogu). */

/* =====================================================================
   KENAR CUBUGU OGELERININ ARKASINDA GTA6 GORSELI (v184)
   ---------------------------------------------------------------------
   Talep: musteri panelindeki menu butonlarinin HEPSININ arkasinda ayni
   GTA6 fotografi, %80 karartilmis. (Ilk surumde %40'ti; kullanici
   v185'te %80 istedi — fotograf artik bir DOKU, vurgu degil.)

   ⚠️ YOL panel.css'e GORELI. Onceki surumde gorsel layout.php'de satir
   ici `--nav-img` degiskeniyle ve KOK-MUTLAK yolla geciyordu; dokuz
   ogenin hepsi artik ayni gorseli kullandigi icin degisken gereksiz
   kaldi. Yolu buraya almak ayrica alt klasore kurulan sitelerdeki
   kirilmayi da onluyor (§3k, .db-bgfx ile ayni kural).

   KADRAJ (`center 30%`) %40 doneminde OKUNABILIRLIK icin secilmisti:
   o oranda bandlar arasindaki fark BAGLAYICIYDI (beyaz metin, en parlak
   piksel uzerinde):
       center (%50) -> 4.43:1   AA'nin ALTINDA
       %30          -> 5.34:1   ✓ secilen
       %70..%100    -> 4.06:1   en kotu band
   %80 karartmada bu fark artik baglayici DEGIL — her band rahat gecer.
   Band yine de sabit birakildi ki gorunum degismesin ve orani geri
   dusurmek isteyen biri kadraji ayrica dusunmek zorunda kalmasin.

   🔴 METIN OPAK BEYAZ OLMAK ZORUNDA. Varsayilan --mut yari saydam
   (rgba(235,235,245,.64)) ve ayni fotograf uzerinde 2.47:1'e dusuyordu
   — metnin KENDI alfasi da harmanlanmadan olculurse bu gorunmez (§3s).
   ===================================================================== */
body.dash:not(.is-admin-ctx) .db-nav-item { position:relative; overflow:hidden; isolation:isolate; }

/* katman 1 — fotograf.
   🔴 `fixed` BILINCLI: konumlandirma alani VIEWPORT olur, dolayisiyla
   her buton kendi ekran yuksekligindeki DILIMI gosterir — dokuz oge
   ustten asagi tek bir SUREKLI fotografi paylasir. Varsayilan
   (`scroll`) olsaydi her oge ayni kadraji tekrarlardi; v184-185'te
   oyleydi ve dokuz ozdes serit olarak goruluyordu.

   ⚠️ Bu yuzden ::after'a TRANSFORM VERILEMEZ. Transform'lu bir ogede
   `background-attachment:fixed` `scroll` gibi davranir (CSS Transforms
   spec) — hover'da scale verilirse dilim ziplar. Hover geri bildirimi
   bu yuzden kenarlikta, fotografta degil.

   ⚠️ iOS Safari `fixed`i yok sayar: orada dokuz oge yine ayni kadraji
   gosterir. Kirilma degil, eski gorunume dusme (§3l). */
body.dash:not(.is-admin-ctx) .db-nav-item::after {
    content:""; position:absolute; inset:0; z-index:-2;
    background:url('../../images/background/panel-gta6.webp') center / cover no-repeat fixed;
}
/* katman 2 — karartma. TALEP: tiklanmamis %90, tiklanmis %60. */
body.dash:not(.is-admin-ctx) .db-nav-item::before {
    content:""; position:absolute; inset:0; z-index:-1; width:auto;
    height:auto; border-radius:0; transform:none;
    background:rgba(0,0,0,.90);
    transition:background-color .2s var(--c-ease);
}
/* Hover: karartma orani DEGISMEZ (talep edilen iki deger disina
   cikmamak icin); geri bildirim yalnizca kenarlikta. */
body.dash:not(.is-admin-ctx) .db-nav-item:hover { background:none; border-color:rgba(255,255,255,.20); }

/* Aktif oge: karartma %60'a DUSER (fotograf bulundugun sayfada daha
   gorunur olur) + sol accent seridi TEK katmanda. Ayri bir
   pseudo-eleman yok; ::before hem karartmayi hem seridi tasiyor.
   (Ogenin kendi `background`'i fotografin ALTINDA kaldigi icin oraya
   yazilan gradyan artik gorunmez — bu yuzden buraya alindi.) */
body.dash:not(.is-admin-ctx) .db-nav-item.is-active::before {
    /* ⚠️ inset/width/height BURADA DA bildiriliyor: `.is-active`
       ozgullugundeki baska bir kural bunlari 3x24px'e dusurup karartmayi
       yok edebiliyor (v184'te tam bu oldu, iki surum boyunca fark
       edilmedi cunku olcum karartmayi MATEMATIKSEL uyguluyordu). */
    inset:0; width:auto; height:auto; transform:none;
    background-color:rgba(0,0,0,.60);
    background-image:linear-gradient(var(--acc), var(--acc));
    background-position:left center;
    background-size:3px 24px;
    background-repeat:no-repeat;
}
body.dash:not(.is-admin-ctx) .db-nav-item.is-active { background:none; }

/* metin ve ikon her zaman gorselin USTUNDE */
body.dash:not(.is-admin-ctx) .db-nav-item > i,
body.dash:not(.is-admin-ctx) .db-nav-item > span,
body.dash:not(.is-admin-ctx) .db-nav-item > .db-nav-pill,
body.dash:not(.is-admin-ctx) .db-nav-item > .db-nav-blip { position:relative; z-index:2; }
/* fotograf uzerinde yari saydam metin okunmuyor -> opak beyaz */
body.dash:not(.is-admin-ctx) .db-nav-item,
body.dash:not(.is-admin-ctx) .db-nav-item:hover,
body.dash:not(.is-admin-ctx) .db-nav-item.is-active { color:#fff; }
body.dash:not(.is-admin-ctx) .db-nav-item > span { text-shadow:0 1px 3px rgba(0,0,0,.85); }
/* Ikon capasi: karartma %40 iken zemin parlakti ve KOYU bir cip
   ayrisiyordu. %80'e cikinca zemin zaten koyu oldu ve koyu cip
   kayboldu — olculdu: zemin ayrimi yalnizca x1.07. Bu yuzden cip
   ACIK yuzeye cevrildi (panelin kendi --sb-fill dili):
       rgba(0,0,0,.42)      -> x1.07  (gorunmez)
       rgba(255,255,255,.16)-> x1.61  ✓ secilen, glif 10.56:1
   ⚠️ Karartma orani degistirilirse bu deger de gozden gecirilmeli;
   ikisi birbirine bagli. */
body.dash:not(.is-admin-ctx) .db-nav-item i,
body.dash:not(.is-admin-ctx) .db-nav-item:hover i {
    background:rgba(255,255,255,.16); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
body.dash:not(.is-admin-ctx) .db-nav-item.is-active i {
    background:rgba(var(--acc-rgb,135,120,255),.42); color:#fff;
    box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb,135,120,255),.55);
}
/* Cuzdan bakiyesi rozeti — artik 0 olsa da HER ZAMAN gorunur, cunku
   "bakiyem ne" sorusunun cevabi bakiye sifirken de bir cevaptir; gizlemek
   musteriye cuzdanin yoklugunu dusundurtuyordu.
   Stil satir ici degil burada: fotografin uzerinde duruyor ve kendi koyu
   yuzeyini tasimasi gerek (satir ici surumde token oncesi sabit yesil
   zemin vardi, §3p). */
body.dash:not(.is-admin-ctx) .db-nav-pill {
    margin-left:auto; padding:2px 8px; border-radius:6px;
    font-weight:700; font-size:10.5px; letter-spacing:.2px;
    background:rgba(0,0,0,.48); color:var(--sb-ok,#30d158);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---- sayfa basligi ---- */
body.dash:not(.is-admin-ctx) .db-pagehead { padding:28px 38px 20px; margin-bottom:0; border-bottom:1px solid var(--c-line); }
body.dash:not(.is-admin-ctx) .db-pagehead-ic {
    width:46px; height:46px; border-radius:var(--c-r-sm); font-size:19px;
    background:linear-gradient(160deg, rgba(var(--acc-rgb,135,120,255),.16), rgba(var(--acc-rgb,135,120,255),.04));
    border:1px solid rgba(var(--acc-rgb,135,120,255),.2); color:var(--acc);
}
body.dash:not(.is-admin-ctx) .db-pagehead h1 { font-size:22px; font-weight:600; letter-spacing:-.4px; }
body.dash:not(.is-admin-ctx) .db-pagehead p { color:var(--sb-text-3); font-size:13px; }
body.dash:not(.is-admin-ctx) .db-content { padding:30px 38px 56px; }
@media (max-width:760px){
    body.dash:not(.is-admin-ctx) .db-pagehead { padding:20px 16px 16px; }
    body.dash:not(.is-admin-ctx) .db-content { padding:22px 16px 40px; }
}

/* ---- kartlar: ust kenar isigi + yonlu golge (hale degil) ---- */
body.dash:not(.is-admin-ctx) .db-panel {
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 110px), var(--c-s1);
    border:1px solid var(--c-line); border-radius:var(--c-r-lg); margin-bottom:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 22px 46px -30px rgba(0,0,0,.95);
    transition:border-color .22s var(--c-ease), box-shadow .22s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-panel:hover {
    border-color:rgba(var(--acc-rgb,135,120,255),.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 28px 56px -30px rgba(0,0,0,1);
}
/* Panel basligindaki KAPAK GORSELI korunur — burada background'a DOKUNULMAZ,
   sadece yerlesim ve tipografi ayarlanir. */
body.dash:not(.is-admin-ctx) .db-panel-head { padding:18px 24px; }
body.dash:not(.is-admin-ctx) .db-panel-head h4 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
body.dash:not(.is-admin-ctx) .db-panel-body { padding:24px; }

/* ---- hero: tema gorseli korunur, sadece yuvarlaklik/tipografi ---- */
body.dash:not(.is-admin-ctx) .db-hero { border-radius:var(--c-r-lg); border-color:var(--c-line); }
body.dash:not(.is-admin-ctx) .db-hero h2 { font-weight:600; letter-spacing:-.6px; }

/* NOT: Hero butonlarinin ghost gorunumu asagida, GENEL buton blogundan
   SONRA tanimli. Sebebi ozgulluk: ".db-hero .sb-btn" ile
   ".sb-btn:not(.ghost)" ayni agirlikta (ikisi de 4 sinif seviyesi), yani
   kaynak sirasi kazaniyor. Burada tanimlandiginda dolgulu kural onu
   eziyordu ve "New boost" ghost olmuyordu. */

/* ---- istatistik kartlari: fotograflar korunur, katman okunur ---- */
body.dash:not(.is-admin-ctx) .db-stat {
    border-radius:var(--c-r); padding:22px; border:1px solid var(--c-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 46px -30px rgba(0,0,0,.95);
    transition:transform .22s var(--c-ease), border-color .22s var(--c-ease), box-shadow .22s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-stat:hover {
    transform:translateY(-3px); border-color:rgba(var(--acc-rgb,135,120,255),.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,1);
}
body.dash:not(.is-admin-ctx) .db-stat.has-img::after {
    background:linear-gradient(152deg, rgba(10,11,17,.6) 0%, rgba(10,11,17,.9) 60%, rgba(10,11,17,.97) 100%);
}
body.dash:not(.is-admin-ctx) .db-stat .ic {
    border-radius:var(--c-r-sm); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.dash:not(.is-admin-ctx) .db-stat .val { font-size:31px; font-weight:600; letter-spacing:-1px; }
body.dash:not(.is-admin-ctx) .db-stat .lbl {
    font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--sb-text-3); margin-top:8px;
}

/* ---- hizmet kartlari + ilerleme ---- */
body.dash:not(.is-admin-ctx) .db-srv {
    background:var(--c-s2); border:1px solid var(--c-line); border-radius:var(--c-r);
    padding:18px 20px; transition:border-color .22s var(--c-ease), transform .22s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-srv:hover { transform:translateY(-2px); border-color:rgba(var(--acc-rgb,135,120,255),.32); }
body.dash:not(.is-admin-ctx) .db-srv-ic { border-radius:50%; background:var(--sb-fill-1); }
body.dash:not(.is-admin-ctx) .db-prog { height:8px; border-radius:100px; background:var(--sb-fill-2); }
body.dash:not(.is-admin-ctx) .db-prog span {
    border-radius:100px;
    background:linear-gradient(90deg, var(--acc), var(--acc2, #64d2ff));
    transition:width .7s var(--c-ease);
}

/* ---- tablolar ---- */
body.dash:not(.is-admin-ctx) .db-table th {
    font-size:10px; letter-spacing:1px; color:var(--sb-text-3); font-weight:600;
    padding:14px 24px; border-bottom:1px solid var(--c-line);
}
body.dash:not(.is-admin-ctx) .db-table td { padding:15px 24px; font-size:13.5px; color:var(--sb-text-2); }
body.dash:not(.is-admin-ctx) .db-table tbody tr { transition:background .16s var(--c-ease); }
body.dash:not(.is-admin-ctx) .db-table tbody tr:hover { background:var(--sb-fill-1); }

/* ---- rozetler: hap (parlayan nokta YOK) ---- */
body.dash:not(.is-admin-ctx) .db-badge {
    border-radius:100px; font-size:11px; font-weight:600; letter-spacing:.4px;
    padding:5px 12px 5px 10px; gap:7px; text-transform:capitalize;
    border:1px solid var(--sb-line);
}

/* ---- formlar: rahat dokunma hedefi (44px) + net odak ---- */
body.dash:not(.is-admin-ctx) .db-input,
body.dash:not(.is-admin-ctx) .db-select,
body.dash:not(.is-admin-ctx) .db-textarea,
body.dash:not(.is-admin-ctx) select.db-input {
    background:rgba(0,0,0,.35); border:1px solid var(--c-line2); border-radius:var(--c-r-sm);
    font-size:14px; font-family:inherit;
    transition:border-color .2s var(--c-ease), box-shadow .2s var(--c-ease), background .2s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-input,
body.dash:not(.is-admin-ctx) select.db-input { min-height:44px; padding:12px 14px; }
body.dash:not(.is-admin-ctx) .db-input:focus,
body.dash:not(.is-admin-ctx) .db-select:focus,
body.dash:not(.is-admin-ctx) .db-textarea:focus {
    outline:none; background:rgba(0,0,0,.5);
    border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-rgb,135,120,255),.16);
}
body.dash:not(.is-admin-ctx) .db-form-row label,
body.dash:not(.is-admin-ctx) .db-lbl { font-size:13px; font-weight:500; color:var(--sb-text-3); }

/* ---- butonlar: aksan dolgulu birincil eylem, RENKLI HALE YOK
       (gerekce icin admin blogundaki ayni kurala bakin) ---- */
body.dash:not(.is-admin-ctx) .sb-btn { min-height:44px; border-radius:var(--c-r-sm); font-weight:600; font-size:13.5px; }
body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost) {
    background:var(--sb-accent-fill);
    border:1px solid rgba(var(--acc-rgb,135,120,255),.55);
    box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    transition:filter .18s var(--c-ease), box-shadow .18s var(--c-ease), transform .1s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost) i { color:var(--sb-on-accent); }
body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost):hover { filter:brightness(1.1); }
body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost):active { transform:translateY(1px) scale(.985); }
body.dash:not(.is-admin-ctx) .sb-btn.ghost { background:var(--sb-fill-1); border-color:var(--c-line2); }
body.dash:not(.is-admin-ctx) .sb-btn.ghost:hover { background:var(--sb-fill-2); border-color:rgba(var(--acc-rgb,135,120,255),.4); }

/* ---- HERO BUTONLARI ("New boost" / "View orders") ----
   Cuzdandaki "Add funds" ile AYNI ghost dil. Gerekce ayni: bu kartin
   yildizi fotograf ve baslik; butonlar okunur olmali ama onlarla
   yarismamali. Fotografin uzerinde durduklari icin cerceve/zemin biraz
   daha belirgin ve arkalarinda hafif cam bulaniklastirma var.

   ⚠️ Bu blok GENEL buton kurallarindan SONRA gelmek ZORUNDA:
   ".db-hero .sb-btn" ile ".sb-btn:not(.ghost)" ayni ozgullukte oldugu
   icin karari kaynak sirasi veriyor. Yukari tasinirsa "New boost" tekrar
   dolgulu olur. */
body.dash:not(.is-admin-ctx) .db-hero .sb-btn,
body.dash:not(.is-admin-ctx) .db-hero .sb-btn.ghost {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.26);
    color:#fff !important; font-weight:600;
    box-shadow:none; text-shadow:0 1px 2px rgba(0,0,0,.4);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:background .16s var(--c-ease), border-color .16s var(--c-ease), transform .12s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-hero .sb-btn i { color:#fff; opacity:.85; }
body.dash:not(.is-admin-ctx) .db-hero .sb-btn:hover,
body.dash:not(.is-admin-ctx) .db-hero .sb-btn.ghost:hover {
    background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.42); color:#fff !important;
}
body.dash:not(.is-admin-ctx) .db-hero .sb-btn:hover i { opacity:1; }
body.dash:not(.is-admin-ctx) .db-hero .sb-btn:active { transform:translateY(1px); }
/* uzerinden gecen isik seridi hero butonlarinda yok */
body.dash:not(.is-admin-ctx) .db-hero .sb-btn::after { display:none; }

/* ---- hizli eylemler / yan kutucuklar ---- */
body.dash:not(.is-admin-ctx) .db-w { background:var(--c-s1); border:1px solid var(--c-line); border-radius:var(--c-r-lg); padding:22px; }
body.dash:not(.is-admin-ctx) .db-qa a {
    min-height:44px; border-radius:var(--c-r-sm); background:var(--c-s2); border:1px solid var(--c-line);
    font-size:13.5px; font-weight:500;
    transition:background .18s var(--c-ease), border-color .18s var(--c-ease), color .18s var(--c-ease);
}
body.dash:not(.is-admin-ctx) .db-qa a:hover { background:rgba(var(--acc-rgb,135,120,255),.08); border-color:rgba(var(--acc-rgb,135,120,255),.35); color:var(--sb-text-strong); }
body.dash:not(.is-admin-ctx) .db-mini { padding:9px 0; border-bottom:1px solid var(--sb-line2); }
body.dash:not(.is-admin-ctx) .db-mini:last-child { border-bottom:none; }

/* ---- destek talepleri + mesaj balonlari ---- */
body.dash:not(.is-admin-ctx) .db-ticket { padding:16px 24px; transition:background .16s var(--c-ease); }
body.dash:not(.is-admin-ctx) .db-ticket .ic { border-radius:var(--c-r-sm); background:var(--sb-fill-2); }
body.dash:not(.is-admin-ctx) .db-msg .bub { background:var(--c-s2); border:1px solid var(--c-line); border-radius:var(--c-r); }
body.dash:not(.is-admin-ctx) .db-msg .av { border-radius:var(--c-r-sm); }

/* ---- bos durumlar (hale YOK) ---- */
body.dash:not(.is-admin-ctx) .db-empty .ec {
    width:62px; height:62px; border-radius:var(--c-r);
    background:var(--sb-fill-2);
    border:1px solid var(--sb-line); color:var(--sb-text-3);
}

/* ---- erisilebilirlik ---- */
body.dash:not(.is-admin-ctx) a:focus-visible,
body.dash:not(.is-admin-ctx) button:focus-visible,
body.dash:not(.is-admin-ctx) input:focus-visible,
body.dash:not(.is-admin-ctx) select:focus-visible {
    outline:2px solid var(--acc); outline-offset:2px; border-radius:8px;
}

/* Cam desteklenmiyorsa seffaf cubuk okunmaz kalmasin */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    body.dash:not(.is-admin-ctx) .db-topbar { background:var(--sb-bg); }
}

/* =====================================================================
   CUZDAN — "Add funds" birincil eylemi (.sb-wallet-cta)
   ---------------------------------------------------------------------
   Onceden yari saydam yesildi (rgba(127,201,154,.18)) ve widget'in kendi
   koyu gradyan zemininin uzerinde silik duruyordu: kartin EN ONEMLI
   eylemi, en zayif kontrastli ogesiydi.

   Once dolu YESIL denendi, kart zemininde yabanci durdu. Sonra accent
   dolgulu yapildi. Kart FOTOGRAF zeminine gecince (bkz. asagidaki
   .sb-wallet-widget blogu) accent dolgu da calismadi: renkli bir dolgu,
   altindaki renkli fotografla yarisiyor ve buton "yapistirma" duruyordu.

   Su anki hal: BEYAZ CAM (rgba(255,255,255,.06) + beyaz kenarlik). Fotograf
   uzerindeki koyu katmanla birlikte beyaz yazi her duvar kagidinda okunur
   kalir ve buton kartin bir parcasi gibi durur. Bu, panelin geri kalanindaki
   "aksan dolgulu birincil buton" dilinden BILINCLI bir sapmadir — kural
   fotograf zeminli yuzeylerde gecerli degil.

   NOT: accent'in cok acik secilmesi durumunda beyaz yazinin okunmamasi
   sorunu artik yapisal olarak cozuldu — dolgu rengi aksandan turetiliyor
   (appearance_accent_fill), gozle kontrol gerekmiyor.
   ===================================================================== */
/* =====================================================================
   CUZDAN KARTI (.sb-wallet-widget)   — v230'da FOTOGRAF KALDIRILDI
   ---------------------------------------------------------------------
   🔴 NEDEN: kartin arkasinda images/background/8.webp (186 KB) vardi,
   ama uzerindeki koyu ortu %86 -> %97 opaklikta idi. Yani gorselin
   yalnizca %3-14'u gozukuyordu: taninabilir bir zemin degil, BULANIK
   BIR LEKE. Olculdu; kullanici "arka plani kotu duruyor" dedi ve
   hakliydi. 186 KB her cuzdan/panel gorunumunde bosuna iniyordu.

   YERINE: panelin kendi yuzey dili (§3c) — tonlu zemin + hairline.
   Aksan YALNIZCA hafif bir tint olarak sol ustte; kart hala sayfanin
   "yildizi" gibi durur ama renk PARLAMASI yapmaz.

   ⚠️ Kart KOYU kalmali: asagida (bkz. "kendi arka plan" blogu) bu
   kartin icindeki metin token'lari acik degerlere sabitleniyor.

   ⚠️ .sb-wallet-glow (sag ustteki renkli radyal isik) da kaldirildi —
   renkli hale §3c'de yasak ve kullanici bunu tekrar tekrar istemedi.
   Markup tarafi: includes/core/wallet.php.
   ===================================================================== */
.sb-wallet-widget {
    position:relative; overflow:hidden; isolation:isolate;
    background:var(--sb-surface,#141419);
    border:1px solid var(--sb-line,rgba(255,255,255,.09));
    border-radius:16px; padding:24px 28px; margin-bottom:24px;
    /* ust kenar cizgisi — §3c'de "hale degil, derinlik" olarak korunur */
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px -20px rgba(0,0,0,.85);
}
.sb-wallet-widget.is-compact { padding:18px 22px; margin-bottom:18px; }
/* v250 (§3dv): kullanici "wallet kismindaki arka planlar cok kotu, GTA ile
   ilgili yap" dedi — uzay gorseli (galactic-oddsey) yerine GTA V Los Santos
   gun batimi (panel-gta.webp). Ortu ve kontrast kurali asagida, aynen. */
.sb-wallet-widget::before {
    content:""; position:absolute; inset:0; z-index:-2;
    background:url('../../images/background/panel-gta.webp') center 64% / cover no-repeat;
    filter:saturate(.9);
}
/* 🔴 ORTU YATAY: metin SOLDA, fotograf SAGDA gorunur.
   Eski surum her yere %86-97 ortu koyuyordu ve gorselin (8.webp)
   pikselleri zaten %99 karanlikti — geriye bulanik bir leke kaliyordu.
   Oran TARANARAK secildi (iki eksen birden, §3cs dersi): metin bandinin
   EN PARLAK pikseli uzerinde beyaz metin kontrasti ile fotografin
   ortudan sapmasi ayni anda olculdu.
       sol  %92 ortu -> beyaz metin ~15:1   (AA cok rahat)
       sag  %38 ortu -> fotograf net gorunur
   Gorsel: galactic-oddsey (69 KB, mavi-turkuaz) — baska hicbir yerde
   kullanilmiyor, dolayisiyla KPI kartlariyla tekrara dusmuyor ve
   aksanla (menekse) renk olarak carpismiyor. */
.sb-wallet-widget::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg,
        rgba(16,17,25,.92) 0%,
        rgba(16,17,25,.86) 40%,
        rgba(16,17,25,.55) 75%,
        rgba(16,17,25,.38) 100%);
}

/* GHOST varyant: dolgu yok, ince cerceve + beyaz yazi.
   Denenen siralama: yari saydam yesil (silik) -> dolu yesil (kart zeminine
   yabanci) -> accent dolgu (paneldeki her butonla ayni) -> ghost.
   Ghost'un mantigi: bu kartin YILDIZI bakiye rakamidir; buton okunur ve
   tiklanabilir olmali ama rakamla yarismamali. */
.sb-wallet-cta {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 22px; border-radius:11px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22);
    color:#fff !important; font-size:13.5px; font-weight:600; letter-spacing:.15px;
    text-decoration:none; white-space:nowrap;
    transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.sb-wallet-cta i { color:#fff; font-size:14px; opacity:.85; }
.sb-wallet-cta:hover {
    background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.38); color:#fff !important;
}
.sb-wallet-cta:hover i { opacity:1; }
.sb-wallet-cta:active { transform:translateY(1px); }
.sb-wallet-cta:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* =====================================================================
   YONETIM PANELI — HAREKET KATMANI (yalnizca .is-admin-ctx)
   ---------------------------------------------------------------------
   ui-ux-pro-max "Hover Micro-interaction" onerileri uygulandi, ama GSAP
   YOK (projede build adimi ve JS kutuphanesi yok) — ayni ozellikler saf
   CSS ile: sadece transform/opacity animasyonu, yani compositor'da kalir,
   layout tetiklemez.

   Yogunluk secimi: admin ekraninda hareket 3/10. Bu yuzden "Subtle" tier
   (yer degistirme <=2px, 150-200ms) varsayilan; yalnizca KPI kartlarinda
   bir adet "Standard" tier (-3px + golge) var — sayfanin tek odak ani.

   Parlama (glow) politikasi degismedi: ikon kutularinin ARKASINDA duran
   sabit hale yok. Buradaki isik efektleri HAREKETLI ve gecici — fareyle
   uzerine gelince gecip giden bir yansima; ekranda surekli duran bir
   parlaklik degil.
   ===================================================================== */

/* --- 1) Icerik girisi: asagidan yumusak beliriverme, kademeli ---
   ⚠️ KRITIK KURAL: opacity:0 / scale(0) ile BASLAYAN her animasyon
   YALNIZCA "(prefers-reduced-motion: no-preference)" icinde tanimlanir.

   Neden: asagidaki genel "hareketi azalt" blogu animation-duration'i
   .01ms yapiyor ama animasyonu KALDIRMIYOR. Sifira yakin sure +
   animation-fill-mode:both + animation-delay birlesince tarayici ogeyi
   "from" karesinde tutabiliyor -> opacity 0'da kilitleniyor. Bu bir kez
   yasandi: isletim sisteminde "hareketi azalt" acik olan makinelerde
   .db-content'in TAMAMI (baslik, KPI kartlari, tablolar, kayan bant)
   gorunmez oldu. Ekranda sadece ust cubuk ve kenar cubugu kaldi.

   Dogru desen bu: hareket istenmiyorsa animasyon HIC TANIMLANMAZ,
   dolayisiyla oge varsayilan (gorunur) halinde kalir. */
@keyframes admFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
    body.is-admin-ctx .db-content > * { animation:admFadeUp .34s cubic-bezier(.25,.46,.45,.94) both; }
    body.is-admin-ctx .db-content > *:nth-child(1) { animation-delay:.02s; }
    body.is-admin-ctx .db-content > *:nth-child(2) { animation-delay:.06s; }
    body.is-admin-ctx .db-content > *:nth-child(3) { animation-delay:.10s; }
    body.is-admin-ctx .db-content > *:nth-child(4) { animation-delay:.14s; }
    body.is-admin-ctx .db-content > *:nth-child(n+5) { animation-delay:.18s; }
    /* KPI kartlari kendi icinde de kademeli girsin */
    body.is-admin-ctx .db-stats > * { animation:admFadeUp .34s cubic-bezier(.25,.46,.45,.94) both; }
    body.is-admin-ctx .db-stats > *:nth-child(1) { animation-delay:.06s; }
    body.is-admin-ctx .db-stats > *:nth-child(2) { animation-delay:.12s; }
    body.is-admin-ctx .db-stats > *:nth-child(3) { animation-delay:.18s; }
    body.is-admin-ctx .db-stats > *:nth-child(4) { animation-delay:.24s; }
}

/* --- 2) KPI karti: tek "Standard" tier an — hafif yukselme + gecen yansima --- */
body.is-admin-ctx .db-stat { position:relative; }
body.is-admin-ctx .db-stat:hover { transform:translateY(-3px); }
/* Yansima: kartin uzerinden gecip giden dar isik seridi.
   .has-img kartlarinda ::before/::after zaten gorsel+katman icin kullaniliyor,
   bu yuzden yansima .db-stat-top uzerinden verilir (bos, guvenli kanca). */
body.is-admin-ctx .db-stat .db-stat-top::after {
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%);
    background-size:260% 100%; background-position:180% 0; background-repeat:no-repeat;
    opacity:0; transition:opacity .18s ease;
}
body.is-admin-ctx .db-stat:hover .db-stat-top::after {
    opacity:1; animation:admSheen .7s cubic-bezier(.25,.46,.45,.94) 1;
}
@keyframes admSheen { from { background-position:180% 0; } to { background-position:-60% 0; } }

/* --- 3) Birincil buton: uzerinden gecen isik + basinca gomulme --- */
body.is-admin-ctx .sb-btn:not(.ghost) { position:relative; overflow:hidden; }
body.is-admin-ctx .sb-btn:not(.ghost)::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
    background-size:260% 100%; background-position:180% 0; background-repeat:no-repeat;
    opacity:0;
}
body.is-admin-ctx .sb-btn:not(.ghost):hover::after { opacity:1; animation:admSheen .6s cubic-bezier(.25,.46,.45,.94) 1; }

/* --- 4) Satir/menu mikro-etkilesimleri (Subtle tier: <=2px) --- */
body.is-admin-ctx .db-nav-item:hover { transform:translateX(2px); }
body.is-admin-ctx .db-nav-item { transition:background .18s var(--a-ease), color .18s var(--a-ease),
    border-color .18s var(--a-ease), transform .16s cubic-bezier(.25,.46,.45,.94); }
/* aktif menu seridi yerine otururken buyusun (scale(0)'dan basladigi icin
   yine yalnizca hareket istendiginde — bkz. 1. maddedeki kritik kural) */
@keyframes admBarIn { from { transform:translateY(-50%) scaleY(0); } to { transform:translateY(-50%) scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
    body.is-admin-ctx .db-nav-item.is-active::before { animation:admBarIn .28s cubic-bezier(.25,.46,.45,.94) both; }
}

body.is-admin-ctx .adm-btn-sm:hover,
body.is-admin-ctx .db-statusform button:hover { transform:translateY(-1px); }
body.is-admin-ctx .adm-btn-sm:active,
body.is-admin-ctx .db-statusform button:active { transform:translateY(0); }
body.is-admin-ctx .adm-btn-sm { transition:background .16s var(--a-ease), border-color .16s var(--a-ease), transform .14s cubic-bezier(.25,.46,.45,.94); }

/* --- 5) + 6) Alt sekme segmenti ve grafik cubuklari ---
   Ikisi de gizli halden basliyor (opacity 0 / scaleY 0), bu yuzden yine
   yalnizca hareket istendiginde tanimlanir. Aksi halde grafikte hicbir
   cubuk gorunmezdi. */
@keyframes admBarGrow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
body.is-admin-ctx .adm-bar { transform-origin:bottom; }
@media (prefers-reduced-motion: no-preference) {
    body.is-admin-ctx .adm-subnav a.is-active { animation:admFadeUp .26s cubic-bezier(.25,.46,.45,.94) both; }
    body.is-admin-ctx .adm-bar { animation:admBarGrow .5s cubic-bezier(.25,.46,.45,.94) both; }
    body.is-admin-ctx .adm-chart-col:nth-child(2n) .adm-bar { animation-delay:.04s; }
    body.is-admin-ctx .adm-chart-col:nth-child(3n) .adm-bar { animation-delay:.08s; }
}

/* --- 6b) Duyuru formu yerlesimi --- */
body.is-admin-ctx .adm-annform-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--a-sp3); }
@media (max-width:760px){ body.is-admin-ctx .adm-annform-grid { grid-template-columns:1fr; } }
body.is-admin-ctx .adm-lbl-hint { color:#6a6e7e; font-weight:400; font-size:11px; margin-left:5px; }
body.is-admin-ctx .adm-annform-foot {
    display:flex; align-items:center; justify-content:space-between; gap:var(--a-sp3);
    flex-wrap:wrap; margin-top:var(--a-sp4); padding-top:var(--a-sp3); border-top:1px solid var(--a-line);
}
body.is-admin-ctx .adm-numinput {
    width:84px; min-height:30px; padding:6px 9px; text-align:right;
    background:rgba(0,0,0,.4); border:1px solid var(--a-line2); color:var(--sb-text-strong);
    border-radius:var(--a-r-xs); font-family:inherit; font-size:var(--a-t-sm);
    font-variant-numeric:tabular-nums;
}
body.is-admin-ctx .adm-numinput:focus { outline:none; border-color:var(--admin-line); box-shadow:0 0 0 3px rgba(232,196,116,.13); }

/* --- 7) Yukleniyor iskeleti (ileride kullanmak icin hazir sinif) --- */
@keyframes admShimmer { from { background-position:-200% 0; } to { background-position:200% 0; } }
body.is-admin-ctx .adm-skeleton {
    background:linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
    background-size:200% 100%; animation:admShimmer 1.4s ease-in-out infinite;
    border-radius:var(--a-r-sm); color:transparent !important;
}

/* =====================================================================
   ISLEM GERI BILDIRIMI — giris, form gonderimi, uyarilar
   ---------------------------------------------------------------------
   Kapsam: TUM sayfalar (login/register dahil), yalnizca panel degil.
   Amac suslemek degil: "tikladim, bir sey oldu mu?" belirsizligini
   kaldirmak ve cift gonderimi caydirmak.

   ⚠️ Buton DISABLE EDILMEZ, yalnizca sinif eklenir. Sebep: bazi formlar
   gonderilen degeri butonun kendisinden aliyor
   (ornek: <button name="reset_defaults" value="1">). Disable edilen buton
   name/value gondermez ve o aksiyon sessizce calismaz.
   ===================================================================== */
@keyframes sbSpin { to { transform:rotate(360deg); } }
.sb-busy { pointer-events:none; opacity:.8; }
.sb-busy::before {
    content:""; display:inline-block; width:13px; height:13px; margin-right:9px;
    vertical-align:-2px; border-radius:50%;
    border:2px solid var(--sb-line2); border-top-color:#fff;
    animation:sbSpin .6s linear infinite;
}
/* Hareket kapaliysa halka donmez ama DURUR — yine de "beklemede" okunur,
   bu yuzden opacity:0 gibi gizleyen bir baslangic durumu KULLANILMADI. */

/* --- uyari kutulari: asagi dogru yumusak giris --- */
@keyframes sbAlertIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
    .db-alert, .sb-alert { animation:sbAlertIn .3s cubic-bezier(.16,1,.3,1) both; }
    /* giris/kayit karti — sayfaya otururken */
    .sb-auth-card { animation:sbAlertIn .42s cubic-bezier(.16,1,.3,1) both; }
    /* musteri paneli icerigi de kademeli girsin (admin'deki ile ayni desen) */
    body.dash:not(.is-admin-ctx) .db-content > * { animation:sbAlertIn .34s cubic-bezier(.16,1,.3,1) both; }
    body.dash:not(.is-admin-ctx) .db-content > *:nth-child(2) { animation-delay:.05s; }
    body.dash:not(.is-admin-ctx) .db-content > *:nth-child(3) { animation-delay:.10s; }
    body.dash:not(.is-admin-ctx) .db-content > *:nth-child(n+4) { animation-delay:.14s; }
}

/* --- form alanlari: odaklanınca etiket canlansin --- */
.db-form-row label, .db-lbl { transition:color .16s ease; }
.db-form-row:focus-within label { color:var(--sb-text-strong); }

/* =====================================================================
   ANIMASYON KATMANI (v111) — HER IKI PANEL
   ---------------------------------------------------------------------
   Yon: ui-ux-pro-max "Stagger List / Page Transition" onerileri.
   Kutuphane YOK (projede build adimi yok) — hepsi saf CSS ve yalnizca
   transform/opacity uzerinden, yani compositor'da kalir, layout tetiklemez.

   Uygulanan kurallar:
     - Kademeli listede oge basina 0.02-0.04s; 12 ogeden sonrasi animasyonsuz
       (uzun listede toplam sure hantallasiyor).
     - Yogun VERI TABLOLARINDA overshoot (back.out) YOK — skill'in acik
       uyarisi: bilgi arayuzunde "ozensiz" duruyor. Duz power1.out kullanildi.
     - Cikis her zaman girisden hizli (asimetrik zamanlama).

   ⚠️ Gizli halden (opacity:0 / scale(0)) baslayan HER animasyon yalnizca
   "@media (prefers-reduced-motion: no-preference)" icinde. Sebep icin
   bkz. yukaridaki KRITIK KURAL — bir kez tum panel gorunmez olmustu.
   Koruma: tests/suites/10-css-guards.php
   ===================================================================== */
@keyframes sbRise   { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sbRowIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes sbGrowW  { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes sbRingDraw { from { stroke-dashoffset:var(--ring-circ,330); } }

@media (prefers-reduced-motion: no-preference) {

    /* --- 1) Kenar cubugu: ARTIK KADEMELI GIRMIYOR (v204) ---
       🔴 Kullanici bildirdi: "soldaki menuden farkli bir menuye
       gecmek icin tikladigimda tum menu yenilenir gibi olup aciliyor."
       Dogruydu. Panel gezinmesi TAM SAYFA YUKLEMESI, dolayisiyla bu
       kademeli giris HER tiklamada bastan oynuyordu — ilk ziyarette
       hos duran sey, gunluk kullanimda menunun surekli kendini
       yeniden kurmasi gibi okunuyor.

       Kenar cubugu KALICI GEZINME CERCEVESIDIR; sayfadan sayfaya
       degismeyen bir sey her seferinde animasyonla gelmemeli.
       Icerik alani hala kademeli giriyor (asagidaki 2. ve 3. maddeler),
       yani sayfa "olu" hissettirmiyor.

       ⚠️ Kural ve gecikmeler SILINDI, yalnizca sureleri sifirlanmadi —
       `opacity:0`dan baslayan bir animasyonu medya sorgusu icinde
       birakip sadece suresini kisaltmak §3c v104'teki "gizli halde
       kilitlenme" tuzagidir. */

    /* --- 2) Tablo satirlari: ilk 12'si kademeli, gerisi aninda ---
       0.022s/oge -> 12 satir toplam ~0.26s. Daha uzun tutmak listeyi
       "yavas yukleniyor" gibi gosteriyor. */
    body.dash .db-table tbody tr { animation:sbRowIn .28s cubic-bezier(.25,.46,.45,.94) both; }
    body.dash .db-table tbody tr:nth-child(1)  { animation-delay:.02s; }
    body.dash .db-table tbody tr:nth-child(2)  { animation-delay:.042s; }
    body.dash .db-table tbody tr:nth-child(3)  { animation-delay:.064s; }
    body.dash .db-table tbody tr:nth-child(4)  { animation-delay:.086s; }
    body.dash .db-table tbody tr:nth-child(5)  { animation-delay:.108s; }
    body.dash .db-table tbody tr:nth-child(6)  { animation-delay:.13s; }
    body.dash .db-table tbody tr:nth-child(7)  { animation-delay:.152s; }
    body.dash .db-table tbody tr:nth-child(8)  { animation-delay:.174s; }
    body.dash .db-table tbody tr:nth-child(9)  { animation-delay:.196s; }
    body.dash .db-table tbody tr:nth-child(10) { animation-delay:.218s; }
    body.dash .db-table tbody tr:nth-child(11) { animation-delay:.24s; }
    body.dash .db-table tbody tr:nth-child(12) { animation-delay:.262s; }
    body.dash .db-table tbody tr:nth-child(n+13) { animation:none; }

    /* --- 3) Liste/kart gruplari: destek talepleri, duyurular, servisler --- */
    body.dash .db-ticket,
    body.dash .db-ann-card,
    body.dash .db-srv,
    body.dash .adm-feed-row { animation:sbRise .32s cubic-bezier(.25,.46,.45,.94) both; }
    body.dash .db-ticket:nth-child(2), body.dash .db-ann-card:nth-child(2),
    body.dash .db-srv:nth-child(2),    body.dash .adm-feed-row:nth-child(2) { animation-delay:.04s; }
    body.dash .db-ticket:nth-child(3), body.dash .db-ann-card:nth-child(3),
    body.dash .db-srv:nth-child(3),    body.dash .adm-feed-row:nth-child(3) { animation-delay:.08s; }
    body.dash .db-ticket:nth-child(n+4), body.dash .db-ann-card:nth-child(n+4),
    body.dash .db-srv:nth-child(n+4),    body.dash .adm-feed-row:nth-child(n+4) { animation-delay:.12s; }

    /* --- 4) Ilerleme cubuklari soldan dolsun (genislik degil TRANSFORM) --- */
    body.dash .db-prog span { transform-origin:left center; animation:sbGrowW .85s cubic-bezier(.16,1,.3,1) both; }

    /* --- 5) Aylik hedef halkasi: sifirdan cizilsin ---
       --ring-circ degeri PHP'den geliyor (cevre uzunlugu); yoksa 330 varsayilir. */
    body.dash .adm-ring circle:last-child { animation:sbRingDraw 1.1s cubic-bezier(.16,1,.3,1) both; }
}

/* --- 6) Acilir menuler: yumusak yaylanma (transition, animation degil ---
   Varsayilan durumlari zaten gizli oldugu icin "gizli baslangic" kuralina
   girmez; hareket kapaliyken transition suresi sifirlanir, menu yine acilir. */
body.dash .db-usermenu,
body.dash .db-langmenu {
    transition:opacity .18s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility .18s;
}
body.dash .db-usermenu { transform:translateY(-8px) scale(.98); transform-origin:top right; }
body.dash .db-usermenu.open { transform:translateY(0) scale(1); }

/* --- 7) Buton basma geri bildirimi: kisa "dalga" ---
   ::before/::after cakismasin diye box-shadow ile yapiliyor. */
body.dash .sb-btn:active,
body.dash .adm-btn-sm:active,
body.dash .sb-wallet-cta:active { transition:none; }

/* --- 8) Ikon donusu: yenile/senkron butonlari --- */
@keyframes sbSpinSlow { to { transform:rotate(360deg); } }
body.dash .sb-btn:hover > i.fa-arrows-rotate,
body.dash .sb-btn:hover > i.fa-rotate-left,
body.dash .adm-btn-sm:hover > i.fa-arrows-rotate { animation:sbSpinSlow .8s linear infinite; }

/* =====================================================================
   HAREKET HASSASIYETI — sistem "az hareket" diyorsa animasyonlari kes
   (erisilebilirlik gerekliligi, her iki panel icin)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.dash *,
    body.dash *::before,
    body.dash *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    /* ⚠️ ISTISNA — kayan duyuru bandi.
       Yukaridaki kural her animasyonu .01ms'ye indiriyor; bant icin bu
       "aninda bitir" demek, yani hic kaymamak demek. Bandin var olma
       sebebi kaymasi oldugundan (durunca anlamsiz bir baslik yigini olur)
       hariç tutuldu: kayar ama YARI HIZDA ve uzerine gelince durur.
       Tamamen istemeyen Appearance ekranindan bandi kapatabilir. */
    body.dash .db-citymq-track {
        animation-duration:calc(var(--mq-speed,45s) * 2) !important;
        animation-iteration-count:infinite !important;
    }
}

/* =====================================================================
   YAZDIRMA (@media print)  — v116
   ---------------------------------------------------------------------
   NEDEN VAR: musteri faturayi yazdirir ya da PDF'e basar; bu, satin alma
   akisinin gercek bir adimi. Onceden panel.css'te TEK BIR yazdirma kurali
   yoktu, dolayisiyla ciktida kenar cubugu, ust cubuk, kayan duyuru bandi
   ve butonlar da kagida basiliyor, fatura koyu zeminde okunmaz cikiyordu.

   Yaklasim: ekran kimligini degil, BELGEYI basiyoruz.
     - gezinme/etkilesim ogeleri kaldirilir (kagitta tiklanamazlar)
     - koyu tema beyaza cevrilir (toner/mürekkep + okunabilirlik)
     - kart golgeleri ve arka plan gorselleri kaldirilir
     - satir/tablo kirilmalari engellenir
   ===================================================================== */
@media print {
    /* Renkli ikon seti kagitta gereksiz murekkep — makbuzda numara ve
       tutar onemli, susleme degil. */
    .sb-ico { display:none !important; }
    /* --- 1) ekrana ait olan her sey --- */
    .db-topbar, .db-sidebar, .db-backdrop, .db-citymq,
    .db-pagehead .db-sub, .adm-crumbbar, .adm-subnav, .adm-toolbar,
    .adm-searchbar, .adm-pager, .adm-bulkbar, .sb-toast-wrap,
    .db-nav, .db-burger, .db-ctxswitch, .db-langpick, .db-bell,
    .db-quickadd, .sb-btn, .adm-btn-sm, .adm-rowacts, .db-mobnav,
    form[method="post"] button, .sb-link, .db-empty-cta { display:none !important; }

    /* --- 2) yerlesim: tam genislik, kagit akisi --- */
    html, body, body.dash { background:#fff !important; color:#111 !important; }
    body.dash .db-main { margin:0 !important; }
    body.dash .db-content { padding:0 !important; max-width:none !important; }
    .sb-card, .db-panel, .db-w, .sb-receipt {
        background:#fff !important; border:1px solid #ccc !important;
        box-shadow:none !important; border-radius:0 !important;
        break-inside:avoid; page-break-inside:avoid;
    }
    /* makbuz: perfore kenar ekranda anlamli, kagitta degil.
       ODENDI damgasi KALIR — belgenin en onemli bilgisi o. */
    .sb-receipt::before { display:none !important; }
    .sb-receipt.is-paid::after {
        color:rgba(20,120,60,.16) !important; border-color:rgba(20,120,60,.16) !important;
    }
    .sb-receipt .rc-items td, .sb-receipt .rc-items th { border-color:#ddd !important; }
    .sb-receipt .rc-head, .sb-receipt .rc-meta,
    .sb-receipt .rc-totals .row.is-total { border-color:#ccc !important; }

    /* --- 3) metin: koyu temanin acik gri tonlari kagitta kaybolur --- */
    body.dash h1, body.dash h2, body.dash h3, body.dash h4, body.dash h5,
    body.dash b, body.dash strong, body.dash td, body.dash th,
    .db-panel-head h4, .sb-osum-total .amt { color:#111 !important; }
    body.dash p, body.dash span, body.dash div, .sb-note { color:#333 !important; }

    /* --- 4) tema gorselleri: kagitta anlami yok, mürekkep yiyor --- */
    .db-hero, .db-panel-head, .db-stat.has-img, .sb-wallet-widget {
        background-image:none !important; background:#fff !important;
    }
    .db-stat .ic { display:none !important; }   /* .sb-wallet-glow v230de kaldirildi */

    /* --- 5) tablolar: baslik her sayfada tekrarlansin --- */
    .db-table thead { display:table-header-group; }
    .db-table tr { break-inside:avoid; page-break-inside:avoid; }
    .db-table th, .db-table td { border-bottom:1px solid #ddd !important; }
    .db-panel-body.flush { overflow:visible !important; max-height:none !important; }

    /* --- 6) durum rozetleri: renk yerine kenarlik (siyah-beyaz yazicida
             renkli rozet gri lekeye donusur ve okunmaz) --- */
    .db-badge {
        background:none !important; color:#111 !important;
        border:1px solid #888 !important; padding:1px 6px !important;
    }

    /* --- 7) baglantilarin adresi gorunsun: kagitta tiklanamaz --- */
    a[href^="http"]::after { content:" (" attr(href) ")"; font-size:10px; color:#666; }

    @page { margin:14mm; }
}
/* =====================================================================
   BOS DURUM — BASLANGIC KARTLARI (.db-empty-cta)  — v116
   ---------------------------------------------------------------------
   Yeni musterinin gordugu ilk ekran burasi. Onceden gri bir daire ve
   tek satir yaziydi; simdi katalogdan gelen urun kartlari var.
   Kartlar accent tonuyla degil NOTR yuzeyle duruyor — bos ekranda uc
   parlak kart "reklam" gibi durur, burada amac yol gostermek.
   ===================================================================== */
body.dash .db-empty-sub {
    display:block; margin-top:6px; font-size:13px; color:var(--sb-text-3);
}

/* --- v137: kartlar YATAY SATIRDAN DIKEY KARTA cevrildi ---------------
   Onceki hal: 34px'lik daire + ad + fiyat, tek satirda. Bir liste
   satiriydi, "kart" degildi; uc tanesi yan yana durunca da sade
   goruniyordu. Ayrica kenarligin kontrasti olculdugunde 1.01 cikti —
   yani kartin sinirlari pratikte GORUNMUYORDU.

   Yeni hal: dikey duzen. Ust satirda urun logosu + kategori cipi, ortada
   ad, altta "from <fiyat>" ve bir ok. Boylece kartin okuma sirasi
   "ne / hangi oyun / kacdan basliyor / git" oluyor.

   Kartlar hala NOTR yuzeyde duruyor (v116 karari): bos ekranda uc parlak
   renkli kart reklam gibi durur; buradaki is yol gostermek. Aksan
   yalnizca FIYAT ve hover'da beliriyor. */
body.dash .db-empty-cta {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px; margin:26px auto 4px; max-width:660px; text-align:left;
}
body.dash .db-startcard {
    display:flex; flex-direction:column; gap:12px;
    padding:16px 16px 14px;
    background:var(--sb-surface-2);
    border:1px solid var(--sb-line2);          /* line -> line2: gorunur sinir */
    border-radius:16px; text-decoration:none; color:inherit;
    position:relative; overflow:hidden;
    transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Ust kenardan asagi inen cok hafif aksan yikamasi — kartin "canli"
   durmasi icin. Cizgi DEGIL, 90px'lik yumusak gecis (bkz. v136 ders). */
body.dash .db-startcard::before {
    content:""; position:absolute; inset:0 0 auto; height:90px; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--acc-rgb),.07), transparent);
}
body.dash .db-startcard:hover {
    background:var(--sb-surface-3);
    border-color:rgba(var(--acc-rgb),.45);
    transform:translateY(-3px);
    box-shadow:var(--sb-sh-2);
}

body.dash .db-startcard .sc-top {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    position:relative;
}
body.dash .db-startcard .ic {
    flex:0 0 44px; width:44px; height:44px; border-radius:12px; overflow:hidden;
    background:var(--sb-fill-2); display:inline-flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--sb-text-2);
}
body.dash .db-startcard .ic img { width:100%; height:100%; object-fit:cover; }
/* Kategori cipi — hangi oyun oldugunu bir bakista soyler */
body.dash .db-startcard .sc-cat {
    flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.4px;
    text-transform:uppercase; padding:4px 9px; border-radius:100px;
    background:var(--sb-fill-2); color:var(--sb-text-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%;
}
body.dash .db-startcard .sc-name {
    position:relative;
    color:var(--sb-text-strong); font-size:15px; font-weight:600; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.dash .db-startcard .sc-foot {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:auto; padding-top:2px; position:relative;
}
body.dash .db-startcard .pr {
    font-size:13px; font-weight:700; color:var(--acc); white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
body.dash .db-startcard .sc-go {
    font-size:11px; color:var(--sb-text-3);
    transition:transform .2s ease, color .2s ease;
}
body.dash .db-startcard:hover .sc-go { transform:translateX(3px); color:var(--acc); }

@media (max-width:520px){
    body.dash .db-empty-cta { grid-template-columns:1fr; gap:10px; }
    body.dash .db-startcard { flex-direction:row; align-items:center; padding:12px 14px; }
    body.dash .db-startcard::before { display:none; }
    body.dash .db-startcard .sc-top { flex:0 0 auto; }
    body.dash .db-startcard .sc-cat { display:none; }
    body.dash .db-startcard .sc-name { flex:1; -webkit-line-clamp:1; font-size:14px; }
    body.dash .db-startcard .sc-foot { flex:0 0 auto; margin-top:0; }
}
@media (prefers-reduced-motion: reduce){
    body.dash .db-startcard, body.dash .db-startcard .sc-go { transition:none; }
    body.dash .db-startcard:hover { transform:none; }
    body.dash .db-startcard:hover .sc-go { transform:none; }
}
/* =====================================================================
   SIPARIS DURUM CUBUGU (.db-stepper)  — v116
   ---------------------------------------------------------------------
   Adimlar bir izgara olarak dizilir; baglayici cizgi ::before ile
   cizilir ve TAMAMLANAN adimlarda accent rengine doner. Cizgi ilk
   adimda gizlenir (yoksa soldan bosluga uzanan bir kuyruk cikar).

   Yogun listelerde (servis kartlari) .is-compact kullanilir: etiketler
   kucuk, noktalar ince. Siparis detayinda tam boy.
   ===================================================================== */
body.dash .db-stepper {
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    gap:0; margin:0 0 16px; padding:2px 0;
}
body.dash .db-step {
    position:relative; display:flex; flex-direction:column; align-items:center;
    gap:6px; text-align:center; min-width:0;
}
/* baglayici cizgi — adimin SOLUNA dogru */
body.dash .db-step::before {
    content:""; position:absolute; top:9px; right:50%; left:-50%; height:2px;
    background:var(--c-line2,rgba(255,255,255,.14)); z-index:0;
}
body.dash .db-step:first-child::before { display:none; }
/* Tamamlanan baglanti YESIL, su ana gelen baglanti AKSAN — renk adimin
   ne anlama geldigini soyluyor, yalnizca "dolu" oldugunu degil. */
body.dash .db-step.is-done::before { background:rgba(var(--sb-ok-rgb),.55); }
body.dash .db-step.is-now::before  { background:rgba(var(--sb-accent-rgb),.55); }

body.dash .db-step i {
    position:relative; z-index:1;
    width:20px; height:20px; border-radius:50%; flex:0 0 20px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:9px; background:var(--c-s2,var(--sb-surface-2)); color:var(--sb-text-3);
    border:2px solid var(--c-line2,rgba(255,255,255,.14));
}
body.dash .db-step.is-done i {
    background:var(--sb-ok); border-color:var(--sb-ok); color:#0b2a15;
}
body.dash .db-step.is-now i {
    background:var(--c-s1); border-color:var(--acc); color:var(--acc);
    font-size:7px;
}
body.dash .db-step b {
    font-size:11.5px; font-weight:500; color:var(--mut2,#6f7285); line-height:1.25;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.dash .db-step.is-done b { color:var(--sb-text-2); }
body.dash .db-step.is-now b  { color:var(--sb-text-strong); font-weight:700; }

/* iptal / iade — akis gostermek yaniltici olur, tek bitis durumu */
body.dash .db-stepper.is-stopped { grid-auto-flow:row; }
body.dash .db-step.is-stop { flex-direction:row; justify-content:center; }
body.dash .db-step.is-stop i { background:rgba(var(--sb-bad-rgb),.15); border-color:rgba(var(--sb-bad-rgb),.50); color:var(--sb-bad); }
body.dash .db-step.is-stop b { color:var(--sb-bad); font-weight:600; }

/* servis kartlari icinde: daha sikisik */
body.dash .db-stepper.is-compact { margin:12px 0 10px; }
body.dash .db-stepper.is-compact i { width:16px; height:16px; flex:0 0 16px; font-size:7.5px; border-width:2px; }
body.dash .db-stepper.is-compact .db-step::before { top:7px; }
body.dash .db-stepper.is-compact b { font-size:10px; letter-spacing:.1px; }

@media (max-width:520px){
    /* dar ekranda etiketler yan yana sigmaz — yalnizca aktif adim yazilir */
    body.dash .db-stepper.is-compact b { display:none; }
    body.dash .db-stepper.is-compact .db-step.is-now b { display:block; }
}
/* =====================================================================
   CANLI SUNUCU DURUMU (.db-srv-live)  — v116
   ---------------------------------------------------------------------
   Servis kartinda tek satir: yesil nokta + "128 / 256 oyuncu".
   Yukleme sirasinda nokta soluk ve nabiz atar; veri gelince yesile
   doner. Istek basarisiz olursa JS satiri tamamen gizler (bkz.
   layout.php) — musteriye kendi panelinde hata gostermenin faydasi yok.
   ===================================================================== */
body.dash .db-srv-live {
    display:flex; align-items:center; gap:7px; margin:0 0 10px;
    font-size:11.5px; color:var(--mut2,#6f7285); font-variant-numeric:tabular-nums;
}
body.dash .db-srv-live .dot {
    width:6px; height:6px; border-radius:50%; flex:0 0 6px;
    background:var(--mut2,#6f7285);
}
body.dash .db-srv-live.is-online { color:var(--sb-ok); }
body.dash .db-srv-live.is-online .dot { background:var(--sb-ok); }

/* Yukleniyor: nabiz — yalnizca hareket izinliyken (bkz. gizli-halden
   baslayan animasyon kurali; bu opacity 1'den basliyor ama yine de
   gereksiz hareket yaratmamak icin ayni blokta tutuluyor). */
@media (prefers-reduced-motion: no-preference) {
    body.dash .db-srv-live.is-loading .dot { animation:sbLiveDot 1.4s ease-in-out infinite; }
    @keyframes sbLiveDot { 0%,100% { opacity:.35; } 50% { opacity:1; } }
}
/* =====================================================================
   BONUS MERDIVENI (.sb-bonus-ladder)  — v116
   ---------------------------------------------------------------------
   Cuzdan kartinin altinda, kademelerin tamami. Onceden tek satirlik bir
   ipucuydu ve YANLIS eksene (bakiyeye) bakiyordu — bkz. wallet.php.

   Kart kendi arka plan gorseli uzerinde durdugu icin merdiven KENDI
   yuzeyini kurmaz; yalnizca ince bir ayirici cizgi ile ayrilir. Aksi
   halde gorselin uzerine ikinci bir kutu binip karti agirlastiriyordu.
   ===================================================================== */
.sb-bonus-ladder {
    position:relative; z-index:1; margin-top:18px; padding-top:16px;
    border-top:1px solid var(--sb-line);
}
.sb-bonus-ladder .hd {
    display:flex; align-items:center; gap:7px; margin-bottom:11px;
    font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
    color:var(--sb-warn);
}
.sb-bonus-ladder .hd i { font-size:11px; }
.sb-bonus-ladder .rows {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px;
}
.sb-bonus-ladder .tier {
    display:flex; flex-direction:column; gap:2px; padding:9px 11px;
    background:rgba(0,0,0,.28); border:1px solid var(--sb-line);
    border-radius:10px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.sb-bonus-ladder .tier b {
    color:var(--sb-text); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.sb-bonus-ladder .tier span {
    color:var(--sb-ok); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
}
.sb-bonus-ladder .ft {
    margin-top:10px; font-size:11px; color:var(--sb-text); line-height:1.5;
}
@media (max-width:560px){
    .sb-bonus-ladder .rows { grid-template-columns:repeat(2,1fr); }
}
/* =====================================================================
   MAKBUZ (.sb-receipt)  — v116
   ---------------------------------------------------------------------
   Fatura markup'i onceden IKI dosyada, satir ici stil duvari olarak
   duruyordu. Tek bilesene alindi (layout.php > render_invoice_receipt);
   gorunum burada.

   Perfore ust kenar (::before) kagit makbuz cagrisimi verir — fatura
   bir panel degil, BELGE oldugunu soyler. Odendiginde capraz "PAID"
   damgasi basilir; damga pointer-events:none, metni secmeyi engellemez.
   ===================================================================== */
.sb-receipt {
    position:relative; padding:26px 30px 24px;
    background:var(--c-s1);
    border:1px solid var(--c-line,rgba(255,255,255,.08));
    border-radius:14px; overflow:hidden;
}
.sb-receipt.is-embed { border-color:rgba(var(--acc-rgb,135,120,255),.32); margin-top:18px; }

/* perfore ust kenar */
.sb-receipt::before {
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background:radial-gradient(circle at 5px 0, transparent 4px, var(--c-s1) 4.5px) 0 0/10px 10px repeat-x;
    pointer-events:none;
}

/* --- ust --- */
.sb-receipt .rc-head {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:20px; flex-wrap:wrap; padding-bottom:18px;
    border-bottom:1px solid var(--c-line,rgba(255,255,255,.08));
}
.sb-receipt .rc-brand { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.sb-receipt .rc-brand img { height:38px; width:auto; flex:0 0 auto; }
.sb-receipt .rc-co { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sb-receipt .rc-co b { color:var(--sb-text-strong); font-size:14px; font-weight:700; }
.sb-receipt .rc-co span { color:var(--mut,#8a8d99); font-size:12.5px; line-height:1.5; }
.sb-receipt .rc-no { display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; }
.sb-receipt .rc-no .lbl {
    color:var(--mut2,#6f7285); font-size:10.5px; font-weight:700;
    letter-spacing:1.4px; text-transform:uppercase;
}
.sb-receipt .rc-no b {
    color:var(--sb-text-strong); font-size:19px; font-weight:800; letter-spacing:-.3px;
    font-variant-numeric:tabular-nums;
}

/* --- meta --- */
.sb-receipt .rc-meta {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;
    padding:18px 0; border-bottom:1px solid var(--c-line,rgba(255,255,255,.08));
}
.sb-receipt .rc-meta > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sb-receipt .rc-meta .lbl {
    color:var(--mut2,#6f7285); font-size:10px; font-weight:700;
    letter-spacing:.8px; text-transform:uppercase;
}
.sb-receipt .rc-meta b { color:var(--sb-text-strong); font-size:13.5px; font-weight:600; }
.sb-receipt .rc-meta span:not(.lbl) { color:var(--mut,#8a8d99); font-size:12.5px; }

/* --- kalemler --- */
.sb-receipt .rc-items { width:100%; border-collapse:collapse; margin-top:4px; }
.sb-receipt .rc-items th {
    text-align:left; padding:13px 8px 10px 0; font-size:10px; font-weight:700;
    letter-spacing:.8px; text-transform:uppercase; color:var(--mut2,#6f7285);
    border-bottom:1px solid var(--c-line,rgba(255,255,255,.08));
}
.sb-receipt .rc-items th.c, .sb-receipt .rc-items td.c { text-align:center; }
.sb-receipt .rc-items th.r, .sb-receipt .rc-items td.r { text-align:right; padding-right:0; }
.sb-receipt .rc-items td {
    padding:13px 8px 13px 0; border-bottom:1px solid var(--sb-line2);
    color:var(--sb-text-2); font-size:13.5px; font-variant-numeric:tabular-nums;
}
.sb-receipt .rc-items td b { color:var(--sb-text-strong); font-weight:600; display:block; }
.sb-receipt .rc-items td .sub { display:block; color:var(--mut,#8a8d99); font-size:11.5px; margin-top:2px; }
.sb-receipt .rc-items td.r { color:var(--sb-text-strong); font-weight:600; }

/* --- toplamlar --- */
.sb-receipt .rc-totals { display:flex; justify-content:flex-end; margin-top:16px; }
.sb-receipt .rc-totals .box { min-width:236px; }
.sb-receipt .rc-totals .row {
    display:flex; justify-content:space-between; gap:20px; padding:6px 0;
    color:var(--mut,#8a8d99); font-size:13.5px; font-variant-numeric:tabular-nums;
}
.sb-receipt .rc-totals .row.is-disc { color:var(--sb-ok); }
.sb-receipt .rc-totals .row.is-total {
    margin-top:7px; padding-top:11px; border-top:1px solid var(--c-line2,rgba(255,255,255,.14));
    color:var(--sb-text-strong); font-weight:700;
}
.sb-receipt .rc-totals .amt { font-size:20px; font-weight:800; letter-spacing:-.4px; }

/* --- not / eylemler --- */
.sb-receipt .rc-note {
    margin-top:16px; padding:12px 14px; border-radius:10px;
    background:var(--sb-fill-1); border:1px solid var(--c-line,rgba(255,255,255,.08));
    color:var(--mut,#8a8d99); font-size:13px; line-height:1.55;
}
.sb-receipt .rc-note b { color:var(--sb-text-2); }
.sb-receipt .rc-acts {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:18px; padding-top:18px;
    border-top:1px solid var(--c-line,rgba(255,255,255,.08));
}
.sb-receipt .rc-acts .fn { margin-left:auto; color:var(--mut2,#6f7285); font-size:12.5px; }
.sb-receipt .rc-ok { color:var(--sb-ok); font-size:13.5px; }

/* --- ODENDI damgasi --- */
.sb-receipt.is-paid::after {
    /* metin PHP'den gelir (bkz. render_invoice_receipt) — burada sabit
       "PAID" yazilirsa Turkce faturada da Ingilizce kalir */
    content:var(--rc-stamp, "PAID"); position:absolute; top:44%; right:26px;
    transform:rotate(-14deg); pointer-events:none; user-select:none;
    font-size:52px; font-weight:900; letter-spacing:6px;
    color:rgba(var(--sb-ok-rgb),.10);
    border:5px solid rgba(var(--sb-ok-rgb),.10); border-radius:10px;
    padding:2px 16px 6px;
}
@media (max-width:620px){
    .sb-receipt { padding:20px 18px; }
    .sb-receipt.is-paid::after { font-size:34px; letter-spacing:3px; right:12px; }
    .sb-receipt .rc-no { align-items:flex-start; text-align:left; }
}
/* =====================================================================
   TOAST BILDIRIMLERI (.sb-toast-wrap)  — v116
   ---------------------------------------------------------------------
   Onay mesajlari icerigin ustunde statik bir bardi; uzun sayfada
   kullanici gormeden kaydirip geciyordu. Artik sag ustte, ust cubugun
   ALTINDA (var(--hdr)) belirir — cubugu ortmez.

   z-index: dil/kullanici menulerinin (900) uzerinde ama modalin
   altinda kalacak sekilde 950.
   ===================================================================== */
.sb-toast-wrap {
    position:fixed; top:calc(var(--hdr,64px) + 14px); right:18px; z-index:950;
    display:flex; flex-direction:column; gap:9px;
    max-width:min(380px, calc(100vw - 36px)); pointer-events:none;
}
.sb-toast {
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:11px; padding:13px 14px;
    background:var(--sb-glass);
    -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
    border:1px solid var(--c-line2,rgba(255,255,255,.14));
    border-left:3px solid var(--mut2,#6f7285);
    border-radius:12px; box-shadow:0 12px 28px -12px rgba(0,0,0,.7);
    color:var(--sb-text); font-size:13.5px; line-height:1.5;
}
.sb-toast > i { font-size:14px; margin-top:1px; flex:0 0 auto; }
.sb-toast > span { flex:1; min-width:0; }
.sb-toast .x {
    flex:0 0 auto; background:none; border:0; cursor:pointer; padding:0 2px;
    color:var(--mut2,#6f7285); font-size:19px; line-height:1;
    transition:color .15s ease;
}
.sb-toast .x:hover { color:var(--sb-text-strong); }

.sb-toast.is-ok   { border-left-color:var(--sb-ok); }
.sb-toast.is-ok > i   { color:var(--sb-ok); }
.sb-toast.is-err  { border-left-color:var(--sb-bad); }
.sb-toast.is-err > i  { color:var(--sb-bad); }
.sb-toast.is-warn { border-left-color:var(--sb-warn); }
.sb-toast.is-warn > i { color:var(--sb-warn); }

/* Cikis her zaman calisir (kisa ve tek yonlu); GIRIS animasyonu gizli
   halden basladigi icin YALNIZCA no-preference icinde (bkz. v104 dersi:
   gizli halden baslayan animasyon hareket azaltmada opacity 0'da
   kilitlenebiliyor). */
.sb-toast.is-out { opacity:0; transform:translateX(12px); transition:opacity .2s ease, transform .2s ease; }

@media (prefers-reduced-motion: no-preference) {
    .sb-toast { animation:sbToastIn .32s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * .07s); }
    @keyframes sbToastIn {
        from { opacity:0; transform:translateX(22px) scale(.97); }
        to   { opacity:1; transform:none; }
    }
}

@media (max-width:560px){
    .sb-toast-wrap { left:12px; right:12px; max-width:none; top:calc(var(--hdr,64px) + 10px); }
}
/* =====================================================================
   MOBIL ALT SEKME CUBUGU (.db-mobnav)  — v116
   ---------------------------------------------------------------------
   991px ustunde HIC cizilmez (display:none): masaustunde kenar cubugu
   zaten tek tikta her yere goturuyor.

   Cihaz guvenli alani (iPhone alt cubugu) env(safe-area-inset-bottom)
   ile hesaba katiliyor; aksi halde son satir sistem cubugunun altinda
   kaliyor ve dokunulamiyor.

   İcerik alti bosluk: .db-content'e padding eklenir, yoksa cubuk son
   karti ortuyor.
   ===================================================================== */
.db-mobnav { display:none; }

@media (max-width:991px){
    .db-mobnav {
        display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
        position:fixed; left:0; right:0; bottom:0; z-index:940;
        padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background:var(--sb-glass);
        -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
        border-top:1px solid var(--c-line,rgba(255,255,255,.08));
    }
    .db-mobnav a {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:3px; min-height:52px; padding:5px 4px; border-radius:10px;
        color:var(--mut2,#6f7285); text-decoration:none;
        transition:color .18s ease, background .18s ease;
    }
    .db-mobnav a i { font-size:16px; }
    .db-mobnav a span {
        font-size:10.5px; font-weight:600; letter-spacing:.1px;
        max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .db-mobnav a:hover { color:var(--sb-text-2); }
    .db-mobnav a.is-active { color:var(--acc); background:rgba(var(--acc-rgb,135,120,255),.12); }

    /* alt cubuk icerigi ortmesin */
    body.dash .db-content { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* L8 (§3dy): cekmece (kenar cubugu) alt cubugun USTUNDE biter. bottom:0 iken
       son satiri — "Log out" — cubugun (z-index 940 > 900) altinda kaliyordu.
       65px = cubugun yuksekligi: 6 + 52 + 6 dolgu + 1 cizgi. Menu listesi
       (.db-nav) zaten kayar; ayak (.db-nav-foot) hep gorunur kalir. */
    body.dash:not(.is-admin-ctx) .db-sidebar { bottom:calc(65px + env(safe-area-inset-bottom, 0px)); }
    /* toast'lar da cubugun ustunde kalsin */
    .sb-toast-wrap { bottom:auto; }
}
/* =====================================================================
   HESAP TAMAMLANMA HALKASI (.db-acct-ring)  — v116
   ---------------------------------------------------------------------
   conic-gradient ile ince bir halka. SVG yok, ek istek yok. Tam
   dolduysa (.is-full) halka nötr griye doner ve altindaki oneri satiri
   PHP tarafinda hic cizilmez.
   ===================================================================== */
body.dash .db-acct-ring {
    position:relative; display:inline-flex; flex:0 0 auto; padding:3px; border-radius:50%;
    background:conic-gradient(var(--acc) calc(var(--pct,0) * 1%),
                              rgba(255,255,255,.10) 0);
}
body.dash .db-acct-ring.is-full { background:conic-gradient(var(--sb-ok) 100%, var(--sb-ok) 0); }
/* halkanin ic bosluğu — avatarin arkasindaki zemin */
body.dash .db-acct-ring::before {
    content:""; position:absolute; inset:2px; border-radius:50%;
    background:var(--c-s1);
}
body.dash .db-acct-ring > * { position:relative; z-index:1; }

/* 🔴 HALKANIN ICINDEKI AVATAR DAIRE OLMALI.
   avatar_html() yarıcapi SATIR ICI stille basiyor (border-radius:11px),
   yani avatar yuvarlatilmis bir KARE cikiyordu; halka ise daire. Dort
   kosede avatarin kosesi ile halkanin yayi arasinda hilal seklinde
   bosluklar olusuyor ve iki oge birbirine ait gorunmuyordu.

   !important ZORUNLU — ezilen sey bir satir ici stil. Bunu PHP tarafinda
   yaricapi 23 vererek de yapabilirdik ama o zaman avatarin boyutu her
   degistiginde yaricapi da elle guncellemek gerekirdi; buradaki kural
   boyuttan bagimsiz calisir. */
body.dash .db-acct-ring .db-avatar { border-radius:50% !important; }

body.dash .db-acct-next {
    display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 11px;
    min-height:44px; border-radius:var(--c-r-sm,12px); text-decoration:none;
    background:rgba(var(--acc-rgb,135,120,255),.09);
    border:1px solid rgba(var(--acc-rgb,135,120,255),.20);
    transition:background .18s ease, border-color .18s ease;
}
body.dash .db-acct-next:hover {
    background:rgba(var(--acc-rgb,135,120,255),.15);
    border-color:rgba(var(--acc-rgb,135,120,255),.34);
}
body.dash .db-acct-next .pc {
    flex:0 0 auto; font-size:11.5px; font-weight:800; color:var(--acc,var(--acc));
    font-variant-numeric:tabular-nums;
}
body.dash .db-acct-next .tx {
    flex:1; min-width:0; font-size:12.5px; color:var(--sb-text-2);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.dash .db-acct-next i { flex:0 0 auto; font-size:11px; color:var(--mut2,#6f7285); }

/* =====================================================================
   SIPARIS TABLOSU — KATEGORI AYRIMI (guclendirildi)  — v116
   ---------------------------------------------------------------------
   Kategori satiri (.db-cat-row) yalnizca bir hap gosteriyordu; uzun
   listede iki kategori arasindaki sinir gozle secilmiyordu. Ustune
   ince bir ayirici cizgi ve hafif bir zemin tonu eklendi — kategori
   bir BASLIK gibi okunuyor, satir gibi degil.
   ===================================================================== */
body.dash:not(.is-admin-ctx) .db-cat-row td {
    padding:16px 12px 9px !important;
    border-top:1px solid var(--c-line,rgba(255,255,255,.075)) !important;
}
body.dash:not(.is-admin-ctx) .db-table tbody tr.db-cat-row:first-child td { border-top:0 !important; }
body.dash:not(.is-admin-ctx) .db-cat-pill { color:var(--sb-text-2); }
body.dash:not(.is-admin-ctx) .db-cat-count {
    background:var(--sb-fill-2); color:var(--sb-text-2);
}
/* =====================================================================
   ARKA PLAN DOKUSU SECICI (.ap-bgpick)  — Appearance ekrani, v117
   ---------------------------------------------------------------------
   Her secenek KENDI dokusunun kucuk bir orneğini gosterir; isim okumak
   yerine gozle secilir. Onizleme kutulari gercek kurallarin kucultulmus
   hali — panelde ne gorunecsegi burada da gorunur.
   ===================================================================== */
.ap-bgpick {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
}
.ap-bgopt {
    display:flex; flex-direction:column; gap:3px; cursor:pointer;
    padding:10px 11px 11px; border-radius:11px;
    background:var(--sb-fill-1); border:1px solid var(--line,rgba(255,255,255,.08));
    transition:border-color .18s ease, background .18s ease;
}
.ap-bgopt:hover { background:var(--sb-fill-2); border-color:var(--sb-line2); }
/* 🔴 SECILI DURUM :has() ILE — sunucudan basilan sinifla DEGIL.  (v155)
   Onceden yalnizca ".ap-bgopt.is-sel" vardi ve o sinifi PHP SAYFA
   YUKLENIRKEN basiyordu. Kullanici baska bir karta tikladiginda radyo
   degisiyor ama vurgu ESKI KARTTA kaliyordu — hicbir sey olmamis gibi
   gorunuyordu. Olculdu: tiklama sonrasi secili ve secili olmayan kartin
   hesaplanmis stilleri BIREBIR AYNIYDI.
   :has() tiklama aninda calisir, JS gerektirmez ve bayat sinif birakmaz.
   Ayni desen projede zaten var: .sb-pay-method, .sb-guild. */
.ap-bgopt.is-sel,
.ap-bgopt:has(input:checked) {
    border-color:var(--acc); background:rgba(var(--acc-rgb,135,120,255),.10);
}
.ap-bgopt input { position:absolute; opacity:0; width:0; height:0; }
.ap-bgopt b { color:var(--sb-text-strong); font-size:13px; font-weight:600; }
.ap-bgopt i { font-style:normal; font-size:11px; color:var(--mut2,#6f7285); line-height:1.4; }

/* --- onizleme kutulari: gercek kurallarin kucuk hali --- */
.ap-bgopt .pv {
    display:block; height:46px; margin-bottom:6px; border-radius:8px;
    background-color:var(--sb-bg); border:1px solid var(--sb-line);
}
.ap-bgopt .pv-dots {
    background-image:radial-gradient(rgba(160,170,255,.30) 1px, transparent 1.2px);
    background-size:11px 11px;
}
.ap-bgopt .pv-grain {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.ap-bgopt .pv-mesh {
    background-image:
        radial-gradient(60px circle at 22% 26%, rgba(var(--acc-rgb,135,120,255),.55), transparent 62%),
        radial-gradient(56px circle at 80% 70%, rgba(120,200,255,.34), transparent 60%);
}
.ap-bgopt .pv-grid {
    background-image:
        linear-gradient(rgba(150,160,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,160,255,.22) 1px, transparent 1px);
    background-size:14px 14px, 14px 14px;
}
.ap-bgopt .pv-plain { background-image:none; }
/* =====================================================================
   ARKA PLAN — ERISILEBILIRLIK VE MOBIL  (v118)
   ---------------------------------------------------------------------
   Uc gercek bosluk kapatildi. Bunlar "guzellestirme" degil: dokular her
   kullanicida ayni sekilde davranmiyordu.
   ===================================================================== */

/* --- 1) YUKSEK KONTRAST ISTEYEN KULLANICI (prefers-contrast: more) ----
   Doku ve ortam isigi ekrandaki kontrasti DUSURUR: ince noktalar ve
   renkli lekeler metnin arkasindaki zemini degistirir. Kontrast talep
   eden kullanicida ikisi de kapanir ve kart kenarliklari guclenir. */
@media (prefers-contrast: more) {
    body.dash::before,
    body.dash::after,
    body.dash .db-bgfx { display:none !important; }
    body.dash { background:#07080c !important; }
    body.dash .db-panel, body.dash .db-w, body.dash .sb-card, body.dash .sb-receipt {
        border-color:var(--sb-line2) !important;
    }
    body.dash .db-table th, body.dash .db-table td { border-color:var(--sb-line2) !important; }
}

/* --- 2) WINDOWS YUKSEK KONTRAST MODU (forced-colors) ------------------
   Bu modda tarayici renkleri sistem paletiyle DEGISTIRIR; arka plan
   katmanlari beklenmedik bloklar olarak cizilebiliyor. Hepsini
   kaldirmak en guvenlisi. */
@media (forced-colors: active) {
    body.dash::before,
    body.dash::after,
    body.dash .db-bgfx { display:none !important; }
    body.dash .db-badge { border:1px solid currentColor; }
}

/* --- 3) MOBILDE DOKU KAPALI -------------------------------------------
   Kucuk ekranda ince doku gorsel katki vermiyor (nokta araligi ekran
   genisligine gore cok sik kaliyor) ama her kaydirmada boyama maliyeti
   ureti-yor. Ortam isigi ve vinyet KALIR — onlar genis alanli ve
   ucuz. Fotograf da kalir: kimlik tasiyan tek secenek o. */
@media (max-width:640px){
    body.dash:not(.bg-photo)::after { display:none; }
}

/* =====================================================================
   ICERIK YUZEYI  — v118
   ---------------------------------------------------------------------
   Kartlar dogrudan arka planin uzerinde duruyordu; doku degistiginde
   kart/zemin ayrimi da degisiyordu. Icerik alanina cok hafif, notr bir
   yuzey tonu konunca kartlarin okunurlugu SECILEN DOKUDAN BAGIMSIZ
   hale geliyor — ozellikle photo secenegi icin sart.
   ===================================================================== */
body.dash .db-main { position:relative; z-index:1; }
body.dash.bg-photo .db-content,
body.dash.bg-mesh .db-content {
    background:linear-gradient(180deg, rgba(10,11,17,.35) 0%, rgba(10,11,17,.55) 100%);
}
/* --- Appearance: onay kutusu satiri + yeni doku onizlemeleri (v118) --- */
.ap-check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; min-height:34px; }
.ap-check input { width:17px; height:17px; accent-color:var(--acc); cursor:pointer; }
.ap-check span { color:var(--sb-text-2); font-size:13.5px; }

.ap-bgopt .pv-hex {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23a0aaff' stroke-width='1.6' stroke-opacity='.42'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48.5 L56 64.5 L56 96.5 L28 112.5 L0 96.5 L0 64.5 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:26px 45px;
}
.ap-bgopt .pv-lines {
    background-image:repeating-linear-gradient(135deg,
        rgba(160,170,255,.30) 0px, rgba(160,170,255,.30) 1px,
        transparent 1px, transparent 7px);
}
.ap-bgopt .pv-photo {
    background-image:linear-gradient(180deg, rgba(10,11,17,.72), rgba(10,11,17,.88)),
                     url('../../images/background/panel-gta.webp');
    background-size:cover, cover; background-position:center, center;
}
/* =====================================================================
   YENILEME EYLEMLERI  — v122
   ---------------------------------------------------------------------
   Cron'un "servisiniz bitiyor" e-postasi "tek tikla yenile" sozu
   veriyordu ama order.php'de tiklanacak bir sey yoktu. Iki yere kondu:
   siparis detayinin basligi ve servis kartinin alti.
   ===================================================================== */
.db-od-acts { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Servis kartindaki kucuk yenile baglantisi — kart zaten tiklanabilir
   oldugu icin gorsel olarak ondan AYRISMALI: ic cizgiyle ayrilmis,
   kendi hover'i olan bir satir. */
body.dash .db-srv-renew {
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin-top:12px; padding-top:11px; min-height:38px;
    border-top:1px solid var(--c-line,rgba(255,255,255,.08));
    font-size:12.5px; font-weight:600; color:var(--acc,var(--acc));
    transition:color .18s ease;
}
body.dash .db-srv-renew:hover { color:var(--sb-text-strong); }
body.dash .db-srv-renew i { font-size:11px; }
/* =====================================================================
   MUSTERI SAYFALAYICI (.db-pager)  — v124
   ---------------------------------------------------------------------
   Musteri siparis listesi onceden LIMIT'siz basiliyordu. Admin
   tarafindaki .adm-pager ile ayni is, musteri yogunlugunda (daha
   ferah, 44px dokunma hedefi).
   ===================================================================== */
body.dash .db-pager {
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; flex-wrap:wrap; padding:14px 18px;
    border-top:1px solid var(--c-line,rgba(255,255,255,.075));
}
body.dash .db-pager-info { color:var(--mut2,#6f7285); font-size:12.5px; font-variant-numeric:tabular-nums; }
body.dash .db-pager-links { display:flex; align-items:center; gap:6px; }
body.dash .db-pager-links a {
    display:inline-flex; align-items:center; gap:7px;
    min-height:38px; padding:0 14px; border-radius:var(--c-r-sm,12px);
    background:var(--sb-fill-1); border:1px solid var(--c-line2,rgba(255,255,255,.14));
    color:var(--sb-text-2); font-size:13px; font-weight:600;
    transition:background .18s ease, border-color .18s ease, color .18s ease;
}
body.dash .db-pager-links a:hover {
    background:rgba(var(--acc-rgb,135,120,255),.14);
    border-color:rgba(var(--acc-rgb,135,120,255),.34); color:var(--sb-text-strong);
}
body.dash .db-pager-links a i { font-size:10px; }
body.dash .db-pager-links b {
    padding:0 10px; color:var(--mut,#8a8d99); font-size:12.5px; font-weight:600;
    font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
    body.dash .db-pager { justify-content:center; }
    body.dash .db-pager-links { width:100%; justify-content:space-between; }
}

/* v133: ACIK TEMA ICIN LOGO CIPI KALDIRILDI.
   Logo beyaz metinli tek bir PNG; acik temada beyaz-uzerine-beyaz
   kaliyordu ve arkasina koyu bir cip konuyordu. Acik tema kalkinca bu
   blok gereksizlesti — ustelik secicisi ":root:not([data-theme=dark])"
   oldugu icin GTA VI temasina da uyuyor ve orada logonun arkasinda
   istenmeyen bir cip cikariyordu. */

/* =====================================================================
   ACIK TEMADA GORSEL AGIRLIGI  (v126)
   ---------------------------------------------------------------------
   Tema gorselleri KORUNUR (hero, KPI kartlari, cuzdan karti) — satis
   kimliginin parcasi. Ama .db-panel-head ince bir SERIT: acik temada
   her kartin basligina binen koyu bir bant olarak duruyor ve "premium
   iOS" hissini bozuyor. Kapak gorseli yalnizca KOYU temada cizilir.
   ===================================================================== */
/* ---------------------------------------------------------------------
   FOTOGRAF UZERINDEKI KARTLAR — metin HER IKI temada acik kalmali
   ---------------------------------------------------------------------
   .db-hero, .sb-wallet-widget ve .db-stat.has-img kendi arka plan
   GORSELINI tasiyor. CSS kurallarini token migrasyonundan haric
   tutmustuk, ama bu kartlarin bir kismi PHP'de SATIR ICI stille
   uretiliyor (render_wallet_widget, stat_card) ve orada var(--mut) /
   var(--txt) kullaniliyor. Acik temada o token'lar KOYULASTIGI icin
   koyu fotografin uzerine koyu yazi biniyordu — olculdu: "WALLET
   BALANCE" etiketi okunmuyordu.

   Cozum: bu kartlarin ICINDE metin token'larini acik degerlere geri
   sabitle. Kart zemini temadan bagimsiz koyu oldugu icin bu dogru.
   --------------------------------------------------------------------- */
body.dash .db-hero,
body.dash .sb-wallet-widget,
body.dash .db-stat.has-img {
    --txt:        #ffffff;
    --mut:        rgba(235,235,245,.72);
    --mut2:       rgba(235,235,245,.55);
    --sb-text:        #ffffff;
    --sb-text-strong: #ffffff;
    --sb-text-2:      rgba(235,235,245,.72);
    --sb-text-3:      rgba(235,235,245,.55);
    --line:  rgba(255,255,255,.14);
    --line2: rgba(255,255,255,.22);
}

/* v133: acik tema kalkti — kapak gorseli artik kosulsuz cizilir.
   Onceden bu kural @media(prefers-color-scheme:dark) icindeydi; isletim
   sistemi acik tercihindeyken kapak HIC cizilmiyordu. */
body.dash .db-panel-head {
    background:linear-gradient(90deg, rgba(16,17,23,.92) 0%, rgba(16,17,23,.80) 55%, rgba(16,17,23,.62) 100%),
               url('../../images/background/panel-cover.webp') center 30% / cover no-repeat;
}
body.dash .db-panel-head h4 { color:#fff; }

/* =====================================================================
   GTA VI / VICE CITY — RENK GECISLERI ve "NEFES"   [data-theme="gta6"]
   ---------------------------------------------------------------------
   Bu blok YALNIZCA gta6 temasinda calisir. Notr temalarin "hale yok"
   politikasi (§3c) bozulmuyor: orada vurgu tonlu zemin + ince kenarlik
   ile yapiliyor ve oyle kalmali. Vice City'de ise NEON KIMLIGIN KENDISI —
   pembe/cyan isima olmadan tema "mor bir dark tema"ya donuyor.

   Hareket politikasi: buradaki tek surekli hareket, arka plandaki cok
   yavas (22 sn) ve dusuk genlikli bir parlaklik nefesi. Icerigin uzerinde
   degil, ARKASINDA; okumayi bolmuyor. Tamami
   prefers-reduced-motion: no-preference icinde — kapaliyken hicbir sey
   kimildamaz, renkler oldugu gibi kalir.
   ===================================================================== */

/* --- 1) Gun batimi ortam isigi: tek renk blob yerine pembe -> cyan --- */
:root[data-theme="gta6"] body.dash::before {
    background:
        radial-gradient(820px circle at 4% -10%,  rgba(255,106,180,.20), transparent 62%),
        radial-gradient(760px circle at 98% 4%,   rgba(61,224,255,.14), transparent 60%),
        radial-gradient(1100px circle at 50% 108%,rgba(120,40,200,.20), transparent 66%);
}
:root[data-theme="gta6"] body.dash.amb-off::before { background:none; }

/* --- 2) RENK NEFESI  (iOS tarzi) ------------------------------------
   Ilk surumde tek bir opacity salinimi vardi (.82 -> 1 -> .82). Yanip
   sonen bir lamba gibi duruyordu: tek periyot, tek eksen, ve dongu her
   22 saniyede AYNI noktaya donuyor — goz bunu fark edip "animasyon"
   olarak okuyor.

   iOS'taki his (Siri / Apple Intelligence isimasi) tek bir salinimdan
   degil, BIRDEN COK YAVAS KATMANIN birbirini tutmayan periyotlarla
   ust uste binmesinden geliyor: isik yer degistiriyor, hafifce buyuyup
   kuculuyor ve renk tonu cok az kayiyor. Hicbiri tek basina fark
   edilmiyor; toplami "nefes" olarak okunuyor.

   Burada iki katman var ve PERIYOTLARI BIRBIRINE BOLUNMUYOR (34s / 47s).
   Ortak kati 1598 saniye — yani desen ~27 dakikada bir tekrar ediyor,
   pratikte hic. Dongu hissi bu yuzden kayboluyor.

   RENK NEFESI NEREDEN GELIYOR: ayri bir "ton dondurme" YOK. Iki katman
   birbirinden bagimsiz suruklendigi icin ORTUSTUKLERI bolge surekli yer
   degistiriyor; pembe ve cyan gradyanlar bir an ust uste binip moru
   koyulastiriyor, sonra ayrilip ikisi de kendi rengine donuyor. Renk
   degisimi bunun DOGAL sonucu.

   ⚠️ Once buna ek olarak "filter:hue-rotate" ile ±5 derecelik bir ton
   salinimi da vardi; KALDIRILDI. Sebebi durustce: transform ve opacity
   compositor'da kalir, ama FILTER kalmaz — tam ekran sabit bir katmanda
   her karede yeniden boyama demek. Ustelik gerekli de degildi, cunku
   ortusme zaten renk degisimini uretiyor.

   PERFORMANS: yalnizca transform + opacity animasyonu; ikisi de
   compositor'da. Iki katman da position:fixed, pointer-events:none ve
   z-index:0 — icerigin arkasinda, tiklamayi engellemiyor. */
@media (prefers-reduced-motion: no-preference) {
    /* Katman 1: ana isik — saga-asagi suruklenip hafif buyuyor */
    @keyframes gta6Drift1 {
        0%   { transform:translate3d(0,0,0) scale(1); }
        50%  { transform:translate3d(3.5%,2%,0) scale(1.10); }
        100% { transform:translate3d(0,0,0) scale(1); }
    }
    /* Katman 2: karsi yon — ayni anda ayni yere gitmesinler */
    @keyframes gta6Drift2 {
        0%   { transform:translate3d(0,0,0) scale(1.06); opacity:.55; }
        50%  { transform:translate3d(-4%,-2.5%,0) scale(1); opacity:.85; }
        100% { transform:translate3d(0,0,0) scale(1.06); opacity:.55; }
    }

    :root[data-theme="gta6"] body.dash::before {
        animation:gta6Drift1 34s ease-in-out infinite;
        will-change:transform;
    }

    /* Ikinci isik katmani — .db-bgfx::before bostu (::after fotograf
       ortusu). Kendi gradyanini tasiyor ve ters yone suruklenıyor. */
    :root[data-theme="gta6"] body.dash .db-bgfx::before {
        content:""; position:absolute; inset:-10%;
        pointer-events:none;
        background:
            radial-gradient(680px circle at 78% 18%, rgba(255,106,180,.16), transparent 60%),
            radial-gradient(620px circle at 18% 76%, rgba(61,224,255,.12), transparent 58%);
        animation:gta6Drift2 47s ease-in-out infinite;
        will-change:transform, opacity;
    }
}

/* --- 3) Birincil buton: duz dolgu yerine pembe -> magenta gecisi ----
   Kontrast dolgunun EN ACIK ucundan olculur; --acc-fill (#e60072) beyaz
   metinle 4.58:1 ve gradyanin acik ucu ondan koyu tarafta kaliyor. */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost) {
    background:linear-gradient(135deg, var(--acc-fill) 0%, #c9005f 100%);
    border-color:rgba(255,106,180,.55);
    box-shadow:0 2px 6px rgba(10,0,25,.45), 0 0 18px -6px rgba(255,106,180,.55);
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost):hover {
    filter:brightness(1.12);
    box-shadow:0 3px 10px rgba(10,0,25,.5), 0 0 26px -6px rgba(255,106,180,.75);
}

/* --- 4) Aktif menu ogesi: neon serit + pembe yikama ---------------- */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-item.is-active {
    background:linear-gradient(90deg, rgba(255,106,180,.30) 0%, rgba(53,21,58,.86) 55%, rgba(67,27,73,.55) 100%);
    border-color:rgba(255,106,180,.28);
}
/* ⚠️ `background` KISAYOLU DEGIL, yalnizca background-image.
   Kisayol yazilirsa v184'te ::before'a verilen KARARTMA (background-color)
   silinir ve bu temada aktif ogenin metni ham fotografin uzerinde kalir.
   Burada degistirilen sey yalnizca seridin rengi; boyutu ve karartma
   ana kuraldan gelir. */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-item.is-active::before {
    background-image:linear-gradient(180deg, #ff6ab4, #3de0ff);
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-item.is-active i {
    background:rgba(255,106,180,.22); color:#ffb8dc;
}

/* --- 5) Kart ust kenar isigi: beyaz degil PEMBE --------------------- */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-panel,
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-w {
    background:linear-gradient(180deg, rgba(255,106,180,.06), rgba(255,106,180,0) 130px), var(--sb-surface);
    /* 🔴 IC UST ISIK KALDIRILDI (v136) — "kutularin ustunde cizgi" hatasi.
       Burada "inset 0 1px 0 rgba(255,140,205,.10)" vardi. Kartin zaten
       1px'lik bir ust KENARLIGI var (rgba(255,150,215,.16)); ikisi yan
       yana gelince 2px'lik belirgin bir PEMBE CIZGI olusuyordu.
       Olculdu: kenarlik kontrasti 1.39, ic isik 1.21, toplam kalinlik 2px.

       Notr koyu temada ayni ikili duruyor ama orada ikisi de saydam
       BEYAZ (.09 / .10) — tek yumusak kenar olarak okunuyor ve kasitli
       (bkz. §3c "yuzeyin ust kenar cizgisi"). Hata, bu temada ikisini de
       PEMBE yapmamdan cikti: ayni renkte iki cizgi tek kalin cizgi olur.

       "Yukaridan isik" hissi kayboldu mu: hayir — ustteki 130px'lik
       gradyan zaten onu veriyor, ama YUMUSAK gecisle, cizgi olarak degil. */
    box-shadow:var(--sb-sh-2);
}
/* KPI kartlarinda ayni ikili duruyordu: pembe kenarlik (kontrast 1.39) +
   BEYAZ ic isik (1.21) = yine 2px. Bu kartlar fotograf zeminli ve
   panodaki en gorunur kutular, dolayisiyla cizgi en cok burada belli
   oluyordu. Notr temada ikisi de beyaz oldugu icin sorun yok; orasi
   degistirilmedi. */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-stat {
    box-shadow:var(--sb-sh-2);
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-stat:hover {
    box-shadow:var(--sb-sh-3);
}

/* --- 6) Panel basligi: DIS CDN hotlink'i yerine saf gradyan ---------
   §3d'de kayitli kirilganlik: .db-panel-head arka plani wallpapers.com'a
   hotlink. Bu temada gorsel zaten uymuyordu; ayrica dis istek de gidiyor.
   Burada tamamen yerel bir gun batimi gradyani kullaniliyor. */
:root[data-theme="gta6"] body.dash .db-panel-head {
    background:linear-gradient(90deg,
        rgba(255,106,180,.16) 0%, rgba(120,40,200,.14) 45%, rgba(61,224,255,.10) 100%),
        var(--sb-surface-2);
}
:root[data-theme="gta6"] body.dash .db-panel-head h4 { color:#fff; text-shadow:none; }

/* --- 7) Ilerleme ve halka: pembe -> cyan gecisi -------------------- */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-prog span {
    background:linear-gradient(90deg, #ff6ab4, #3de0ff);
}
:root[data-theme="gta6"] body.dash .db-acct-ring {
    background:conic-gradient(from -90deg, #ff6ab4 calc(var(--pct,0) * 1%),
                              rgba(255,255,255,.08) 0);
}

/* --- 8) Renk gecisleri biraz daha uzun --------------------------------
   Neon yuzeylerde ani renk siframalari sert duruyor; 120ms -> 220ms
   gecis tonlarin birbirine akmasini saglar. Yalnizca RENK ozellikleri;
   transform/opacity'e dokunulmuyor (onlar compositor'da). */
@media (prefers-reduced-motion: no-preference) {
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-item,
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-table tbody tr,
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .sb-btn,
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-srv,
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-badge {
        transition:background-color .22s ease, background .22s ease,
                   border-color .22s ease, color .22s ease, box-shadow .22s ease;
    }
}

/* --- 9) Erisilebilirlik: yuksek kontrast + zorlanmis renkler --------
   Neon isimalar metnin arkasindaki zemini degistirip kontrasti dusurur;
   bu iki modda tamamen kapatiliyor (notr temalarda oldugu gibi). */
@media (prefers-contrast: more) {
    :root[data-theme="gta6"] body.dash::before,
    :root[data-theme="gta6"] body.dash .db-bgfx::before {
        background:none; animation:none; filter:none;
    }
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .sb-btn:not(.ghost),
    :root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-item.is-active::before {
        box-shadow:none;
    }
}
@media (forced-colors: active) {
    :root[data-theme="gta6"] body.dash::before,
    :root[data-theme="gta6"] body.dash .db-bgfx::before {
        background:none; animation:none; filter:none;
    }
}
/* Ortam isigi KAPALIYSA ikinci nefes katmani da cizilmemeli — yoksa
   "off" secildigi halde arka planda hareket kalirdi. */
:root[data-theme="gta6"] body.dash.amb-off .db-bgfx::before { content:none; }

/* --- 11) PASTEL KATMANIN KULLANIMI ----------------------------------
   Aksan "su an / birincil eylem" demek; her yerde kullanilirsa anlamini
   kaybeder (§3p'de olculmustu). Yumusak vurgu gereken yerlerde neon
   yerine PASTEL kullaniliyor: goz yorulmuyor ama yuzey olu de kalmiyor.
   Kasitli olarak SADECE uc yer — "cok renk koyma" siniri. */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-badge.closed,
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-badge.normal {
    background:rgba(212,185,255,.14); color:var(--sb-pastel-lav);
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-nav-label {
    color:var(--sb-pastel-lav); opacity:.72;
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-w h5 i,
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-mini span {
    color:var(--sb-pastel-cyan);
}

/* --- 10) HERO BUTONLARI GHOST KALIR (v130 — §3d tuzagina dustum) -----
   Yukaridaki (3) numarali kural ".sb-btn:not(.ghost)" hedefliyor ve
   ":root[data-theme] body.dash:not(...)" on eki yuzunden hero'nun kendi
   ghost kuralindan (body.dash:not(.is-admin-ctx) .db-hero .sb-btn) DAHA
   YUKSEK ozgullukte. Sonuc: "New boost" tekrar dolgulu oldu — CLAUDE.md
   §3d'de tam olarak bu senaryo kayitli, yine de tekrarladi.

   Hero, fotograf zeminli bir kart; uzerinde renkli dolgu, altindaki
   gorselle yarisiyor. Beyaz cam dili korunuyor. */
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-hero .sb-btn,
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-hero .sb-btn:not(.ghost),
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-hero .sb-btn.ghost {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.26);
    box-shadow:none;
}
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-hero .sb-btn:hover,
:root[data-theme="gta6"] body.dash:not(.is-admin-ctx) .db-hero .sb-btn:not(.ghost):hover {
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.42);
    box-shadow:none; filter:none;
}

/* =====================================================================
   ODEME CTA  (.sb-deposit-cta)  — "Secure checkout"
   ---------------------------------------------------------------------
   Onceki hali SATIR ICI stildeydi ve dort ayri "eski web" isareti
   tasiyordu; renk tonu begeniliyordu ama buton modern durmuyordu:

     1) linear-gradient(180deg, acik -> koyu)  = dikey parlak gradyan.
        2010'larin "gloss" butonu. Modern karsiligi DUZ dolgu.
     2) inset 0 1px 0 rgba(255,255,255,.18)    = ustteki parlama cizgisi,
        ayni gloss dilinin parcasi.
     3) 0 6px 18px rgba(127,201,154,.45)       = RENKLI HALE. Projenin
        kendi politikasi bunu yasakliyor (§3c): golge yonlu ve notr olur,
        hale olmaz.
     4) hover/leave satir ici JS ile             = prefers-reduced-motion'a
        uyamaz, CSP'ye takilir, bakimi zor.

   Yeni hali: duz dolgu (--sb-ok), notr yonlu golge, CSS hover.
   Yesil KORUNDU — odeme akisinda "guvenli/devam" anlami tasiyor ve
   begenilen taraf zaten oydu. Kontrast olculdu: koyu metin yesil dolgu
   uzerinde koyu temada 9.39:1, GTA VI'da 13.57:1.
   ===================================================================== */
.sb-deposit-cta {
    margin-top:26px; width:100%;
    padding:15px 20px;
    font-size:14px; font-weight:700; letter-spacing:.2px;
    font-family:inherit;
    color:#0b1f16;
    background:var(--sb-ok);
    border:0; border-radius:12px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.30);
    transition:background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.sb-deposit-cta i { font-size:12px; }
.sb-deposit-cta .sb-cta-arrow { font-size:10.5px; opacity:.55; transition:transform .18s ease, opacity .18s ease; }
.sb-deposit-cta:hover {
    /* Ton degil PARLAKLIK degisiyor — hangi tema secili olursa olsun
       dogru yonde tepki verir, ikinci bir renk tanimlamak gerekmez. */
    filter:brightness(1.06);
    box-shadow:0 4px 12px rgba(0,0,0,.36);
}
.sb-deposit-cta:hover .sb-cta-arrow { transform:translateX(3px); opacity:.9; }
.sb-deposit-cta:active { transform:translateY(1px) scale(.995); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.sb-deposit-cta:focus-visible { outline:2px solid var(--sb-text); outline-offset:3px; }

@media (prefers-reduced-motion: reduce) {
    .sb-deposit-cta, .sb-deposit-cta .sb-cta-arrow { transition:none; }
    .sb-deposit-cta:active { transform:none; }
    .sb-deposit-cta:hover .sb-cta-arrow { transform:none; }
}

/* --- Odeme yontemi secenegi + Bonus rozeti (wallet-deposit) ----------
   Bunlar da satir ici stildeydi ve "Secure checkout" ile AYNI kusurlari
   tasiyordu: JS ile hover, sabit eski palet renkleri (#0f1016, #cfd2e0),
   ve rozette yine dikey gloss gradyani. Buton modernlesip hemen ustundeki
   rozet gradyanli kalinca ekran yari yamalak duruyordu. */
.sb-pay-method {
    position:relative; display:flex; align-items:center; gap:10px;
    padding:14px; border-radius:10px; cursor:pointer;
    background:var(--sb-surface-2);
    border:1px solid var(--sb-line);
    transition:border-color .16s ease, background-color .16s ease;
}
.sb-pay-method:hover { border-color:rgba(var(--acc-rgb),.35); }
/* Secili durum CSS ile — onceden JS "checked" kontrolu yapiyordu */
.sb-pay-method:has(input:checked) {
    border-color:rgba(var(--acc-rgb),.55);
    background:var(--sb-surface-3);
}
.sb-pay-method input { accent-color:var(--acc); width:15px; height:15px; }
.sb-pay-method .sb-pay-name {
    flex:1; color:var(--sb-text); font-size:13px; font-weight:600; line-height:1.3;
}
.sb-pay-method .sb-pay-ic { font-size:18px; }
/* Bonus rozeti: gradyan yerine DUZ dolgu (bkz. .sb-deposit-cta gerekcesi) */
.sb-pay-bonus {
    position:absolute; top:-7px; right:8px;
    display:inline-flex; align-items:center; gap:4px;
    background:var(--sb-warn); color:#2a1600;
    font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:3px 8px; border-radius:6px;
    box-shadow:0 1px 4px rgba(0,0,0,.30);
}
.sb-pay-bonus i { font-size:8px; }
@media (prefers-reduced-motion: reduce){ .sb-pay-method { transition:none; } }

/* --- Hizli tutar butonlari (.sb-qa-btn) ------------------------------
   Secili durum artik ".is-sel" SINIFI ile. Onceden JS her tiklamada
   background/color/borderColor'i satir ici yaziyordu ve degerler eski
   paletten sabitti (rgba(127,201,154,...), #a8e2c2, #0f1016) — tema
   degisince o butonlar eski renkte kaliyordu. */
.sb-qa-btn {
    padding:11px 8px; border-radius:9px; cursor:pointer;
    font-size:13px; font-weight:700; font-family:inherit;
    background:var(--sb-surface-2);
    border:1px solid var(--sb-line);
    color:var(--sb-text-2);
    font-variant-numeric:tabular-nums;
    transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sb-qa-btn:hover { border-color:rgba(var(--acc-rgb),.35); color:var(--sb-text); }
.sb-qa-btn.is-sel {
    background:rgba(var(--acc-rgb),.14);
    border-color:rgba(var(--acc-rgb),.45);
    color:var(--acc);
}
.sb-qa-btn:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .sb-qa-btn { transition:none; } }

/* =====================================================================
   GIRIS FORMU — "Beni hatirla" + parola goster/gizle
   ===================================================================== */
.sb-remember {
    display:flex; align-items:center; gap:9px;
    margin-top:14px; cursor:pointer;
    color:var(--sb-text-2); font-size:13.5px; font-weight:500;
    min-height:44px;                     /* WCAG dokunma hedefi */
    user-select:none;
}
.sb-remember input { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; flex:0 0 auto; }
.sb-remember:hover { color:var(--sb-text); }

/* Parola alani + goz dugmesi */
.sb-pwwrap { position:relative; }
.sb-pwwrap .form-control { padding-right:46px; }
.sb-pwtoggle {
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    width:36px; height:36px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; cursor:pointer;
    color:var(--sb-text-3); font-size:14px;
    border-radius:8px;
    transition:color .15s ease, background-color .15s ease;
}
.sb-pwtoggle:hover { color:var(--sb-text); background:var(--sb-fill-1); }
.sb-pwtoggle:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .sb-pwtoggle { transition:none; } }

/* =====================================================================
   SOSYAL GIRIS (OAuth) — giris/kayit sayfalari + profil  (v153)
   Notr yuzey + saglayici rengi yalnizca IKONDA. Gerekcesi §3p ile ayni:
   aksan/renk anlam tasidigi yerde kullanilir; burada anlam ikonun
   kendisinde, dugmenin tamami markanin rengine boyanirsa iki dugme
   yan yana "reklam panosu" gibi durur.
   ===================================================================== */
.sb-oauth { margin-top:22px; }
.sb-oauth-sep {
    display:flex; align-items:center; gap:12px;
    color:var(--sb-text-3,#8a8a98); font-size:12.5px; margin-bottom:14px;
}
.sb-oauth-sep::before, .sb-oauth-sep::after {
    content:""; flex:1; height:1px; background:var(--sb-line,rgba(255,255,255,.10));
}
.sb-oauth-btns { display:flex; gap:10px; flex-wrap:wrap; }
.sb-oauth-btn {
    flex:1 1 140px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:44px; padding:10px 16px; border-radius:11px;
    background:var(--sb-fill-2,rgba(255,255,255,.05));
    border:1px solid var(--sb-line,rgba(255,255,255,.10));
    color:var(--sb-text,#e9e9f0); font-size:14px; font-weight:600;
    text-decoration:none; transition:background .18s ease, border-color .18s ease;
}
.sb-oauth-btn i { font-size:17px; color:var(--ob,#8778ff); }
.sb-oauth-btn:hover {
    background:var(--sb-fill-3,rgba(255,255,255,.08));
    border-color:var(--ob,#8778ff); color:var(--sb-text-strong,#fff);
}
.sb-oauth-btn:focus-visible { outline:2px solid var(--ob,#8778ff); outline-offset:2px; }

/* ---- Profil: bagli hesaplar ---- */
.sb-link-row {
    display:flex; align-items:center; gap:13px; padding:14px 16px;
    background:var(--sb-surface-2,#1c1c22); border:1px solid var(--sb-line,rgba(255,255,255,.08));
    border-radius:12px; margin-bottom:10px;
}
.sb-link-ico {
    flex-shrink:0; width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:18px;
    background:var(--sb-fill-2,rgba(255,255,255,.05)); color:var(--ob,#8778ff);
}
.sb-link-txt { flex:1; min-width:0; }
.sb-link-txt b { display:block; font-size:14px; color:var(--sb-text-strong,#fff); }
.sb-link-txt span { font-size:12.5px; color:var(--sb-text-3,#8a8a98); word-break:break-all; }

/* ---- Discord sunucu secici ---- */
.sb-guilds { display:grid; gap:8px; margin:10px 0 4px; }
.sb-guild {
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
    background:var(--sb-surface-2,#1c1c22); border:1px solid var(--sb-line,rgba(255,255,255,.08));
    cursor:pointer; transition:border-color .16s ease, background .16s ease;
}
.sb-guild:hover { border-color:var(--acc,#8778ff); }
.sb-guild:has(input:checked) {
    border-color:var(--acc,#8778ff); background:rgba(var(--acc-rgb,135,120,255),.10);
}
.sb-guild input { accent-color:var(--acc,#8778ff); width:16px; height:16px; flex-shrink:0; }
.sb-guild img, .sb-guild .ph {
    width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0;
    background:var(--sb-fill-3,rgba(255,255,255,.08));
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:var(--sb-text-2,#cfd2e0);
}
.sb-guild .nm { flex:1; min-width:0; font-size:13.5px; color:var(--sb-text,#e9e9f0);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-guild .tag {
    font-size:10.5px; padding:2px 7px; border-radius:99px; white-space:nowrap;
    background:var(--sb-fill-2,rgba(255,255,255,.05)); color:var(--sb-text-3,#8a8a98);
}

/* ===================================================================
   SEPET / ODEME AKISI   (cart.php, checkout.php)              v161
   -------------------------------------------------------------------
   SORUN OLCULMUSTU. Bu iki sayfa 80 ogenin 60'ini satir ici `style`
   ile ciziyordu (69 sabit hex) ve kutulari panel token'i --sb-surface
   (#141419, NOTR GRI) kullaniyordu. Sitenin geri kalani ise lacivert
   govde (#010314) uzerinde rgba(255,255,255,.03) SAYDAM kart kullaniyor.
   Olculdu:
       sepet karti  : rgb(20,20,25)                     r=14
       urun sayfasi : rgba(255,255,255,.03) ~rgb(9,10,26) r=16
   Yani sepetin kutulari sayfanin uzerinde AYRI BIR MALZEME gibi
   duruyordu — "siteden uzak" hissinin olculebilir sebebi buydu.

   KAPSAM BILEREK `.sb-co` SARMALAYICISIYLA SINIRLI. login/register de
   `body.dark-scheme` kullaniyor; kullanici onlarin gorunumunu onayladi,
   token'i govde seviyesinde ezmek onlari da degistirirdi.

   v170'te bu kopru icerik sayfalarina da (`.sb-page`) verilmisti;
   v171'de GERI ALINDI. O sayfalar panel degil TEMA sayfasi ve kendi
   markuplarini kullaniyorlar (bkz. layout.php > site_theme_head).
   =================================================================== */
.sb-co {
    --co-surface: rgba(255,255,255,.03);
    --co-raised : rgba(255,255,255,.055);
    --co-sunken : rgba(0,0,0,.25);
    --co-line   : rgba(255,255,255,.09);
    --co-line-2 : rgba(255,255,255,.15);
    --co-r      : 16px;
}
/* Panel bilesenleri de ayni malzemede dursun */
.sb-co .sb-card    { background:var(--co-surface); border-color:var(--co-line); border-radius:var(--co-r); }
.sb-co .sb-pay-box { background:var(--co-sunken);  border-color:var(--co-line); }
.sb-co .sb-field input,
.sb-co .form-control { background:var(--co-sunken) !important; border-color:var(--co-line) !important; }


/* ---- adim gostergesi ---- */
.sb-co-steps { display:flex; align-items:center; margin:0 0 22px; }
.sb-co-step  { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
               color:var(--sb-text-3); white-space:nowrap; }
.sb-co-step .n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
                 background:var(--co-raised); border:1px solid var(--co-line);
                 font-size:11.5px; font-weight:700; color:var(--sb-text-3); }
.sb-co-step.is-now  { color:var(--sb-text-strong); }
.sb-co-step.is-now  .n { background:var(--acc,#8778ff); border-color:var(--acc,#8778ff); color:#fff; }
.sb-co-step.is-done .n { background:rgba(48,209,88,.14); border-color:rgba(48,209,88,.34);
                         color:var(--sb-ok,#30d158); }
.sb-co-steps .bar { flex:1; height:1px; background:var(--co-line); margin:0 14px; min-width:14px; }

/* ---- guven seridi (ust) ---- */
.sb-co-banner { display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap;
                padding:13px 18px; border-radius:12px; margin-bottom:20px;
                background:rgba(48,209,88,.05); border:1px solid rgba(48,209,88,.16); }
.sb-co-banner span { font-size:12.5px; color:var(--sb-text-2); display:inline-flex; align-items:center; gap:8px; }
.sb-co-banner i { color:var(--sb-ok,#30d158); }

/* ---- kalem karti ---- */
.sb-co-item { background:var(--co-surface); border:1px solid var(--co-line); border-radius:14px;
              padding:18px; margin-bottom:14px; transition:border-color .18s ease; }
.sb-co-item:hover { border-color:var(--co-line-2); }
.sb-co-top  { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.sb-co-id   { display:flex; align-items:center; gap:13px; min-width:0; }
.sb-co-logo { width:46px; height:46px; border-radius:12px; overflow:hidden; flex-shrink:0;
              background:var(--co-raised); border:1px solid var(--co-line);
              display:grid; place-items:center; }
.sb-co-logo img { width:100%; height:100%; object-fit:cover; }
.sb-co-name { color:var(--sb-text-strong); font-weight:700; font-size:15px; line-height:1.3; }
.sb-co-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.sb-co-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
              padding:3px 9px; border-radius:999px; background:var(--co-raised);
              color:var(--sb-text-2); border:1px solid var(--co-line); }
.sb-co-price { text-align:right; flex-shrink:0; }
.sb-co-price .amt { color:var(--sb-text-strong); font-weight:800; font-size:19px; letter-spacing:-.2px;
                    font-variant-numeric:tabular-nums; }
.sb-co-price .sub { color:var(--sb-text-3); font-size:11px; margin-top:2px; }
.sb-co-rm { background:none; border:0; padding:0; margin-top:7px; cursor:pointer;
            color:var(--sb-text-3); font-size:11.5px; transition:color .15s ease; }
.sb-co-rm:hover { color:var(--sb-bad,#ff453a); }

/* ---- alanlar ---- */
.sb-co-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sb-co-f label { display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
                 text-transform:uppercase; color:var(--sb-text-3); margin-bottom:6px; }
.sb-co-inp { width:100%; background:var(--co-sunken); border:1px solid var(--co-line);
             border-radius:10px; color:var(--sb-text-strong); padding:11px 13px; font-size:13px;
             transition:border-color .15s ease, background .15s ease; }
.sb-co-inp:focus { outline:none; border-color:var(--acc,#8778ff); background:rgba(0,0,0,.34); }
.sb-co-inp::placeholder { color:var(--sb-text-3); }
.sb-co-hint { font-size:11.5px; color:var(--sb-text-3); margin-bottom:6px; }
/* ⚠️ `.sb-co-hint` normalde alanin USTUNDE kullaniliyor (margin-bottom).
   Steam gereksinim notu alanin ALTINDA — `p` varyanti margin'i ters
   cevirir. Mevcut `div.sb-co-hint` kullanimlarina dokunmaz. */
p.sb-co-hint { display:flex; align-items:flex-start; gap:6px; line-height:1.35;
               margin:7px 0 0; }
p.sb-co-hint i { flex:none; margin-top:2px; opacity:.8; }

/* ---- eklentiler ---- */
.sb-co-adds { margin-top:13px; display:flex; flex-direction:column; gap:8px; }
.sb-co-add  { display:flex; align-items:center; justify-content:space-between; gap:10px;
              padding:10px 13px; border-radius:10px;
              background:rgba(var(--acc-rgb,135,120,255),.07);
              border:1px solid rgba(var(--acc-rgb,135,120,255),.18); }
.sb-co-add.is-free { background:rgba(48,209,88,.06); border-color:rgba(48,209,88,.2); }
.sb-co-add .nm { color:var(--sb-text-2); font-size:13px; display:flex; align-items:center; gap:8px; min-width:0; }
.sb-co-add .rt { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sb-co-add .rt b { color:var(--sb-text-strong); font-size:13px; }
.sb-co-flag { width:20px; height:14px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.sb-co-gear { background:none; border:0; padding:2px; line-height:1; cursor:pointer;
              color:var(--acc,#8778ff); font-size:13px; }
.sb-co-sub { margin-top:10px; padding-top:10px; border-top:1px solid rgba(48,209,88,.18); }

.sb-co-more { margin-top:13px; }
.sb-co-more > summary { cursor:pointer; list-style:none; display:flex; align-items:center;
    justify-content:space-between; gap:8px; font-size:13px; font-weight:600; color:var(--sb-text-2);
    background:var(--co-raised); border:1px solid var(--co-line); border-radius:10px; padding:11px 14px;
    transition:background .15s ease, border-color .15s ease; }
.sb-co-more > summary::-webkit-details-marker { display:none; }
.sb-co-more > summary:hover { background:rgba(255,255,255,.08); border-color:var(--co-line-2); }
.sb-co-more > summary .cnt { font-size:11px; color:var(--sb-text-3); font-weight:500; }
.sb-co-offers { margin-top:10px; display:flex; flex-direction:column; gap:9px; }
.sb-co-offer  { background:var(--co-sunken); border:1px solid var(--co-line); border-radius:12px; padding:14px; }
.sb-co-offer .hd { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sb-co-offer .nm { color:var(--sb-text-strong); font-size:13.5px; font-weight:600; }
.sb-co-offer .ds { color:var(--sb-text-3); font-size:11.5px; margin-top:4px; line-height:1.55; }
.sb-co-offer .pr { color:var(--sb-ok,#30d158); font-size:13.5px; font-weight:800; white-space:nowrap; }
.sb-co-sel { flex:1; background:var(--co-raised); border:1px solid var(--co-line); border-radius:9px;
             color:var(--sb-text-strong); padding:9px 11px; font-size:12.5px; }
.sb-co-selrow { display:flex; gap:8px; align-items:center; margin-top:11px; }

/* ---- ozet (yapiskan) ---- */
.sb-co-side { position:sticky; top:104px; }
.sb-co-sum  { background:var(--co-surface); border:1px solid var(--co-line);
              border-radius:var(--co-r); padding:22px; }
.sb-co-sum h4 { color:var(--sb-text-strong); margin:0 0 16px; font-size:16px; }
.sb-co-pay { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
             margin-top:16px; padding-top:14px; border-top:1px solid var(--co-line); }
.sb-co-pay span { font-size:11px; color:var(--sb-text-3); display:inline-flex; align-items:center; gap:5px; }
.sb-co-coupon { margin-top:16px; padding:16px; background:var(--co-surface);
                border:1px solid var(--co-line); border-radius:14px; }
.sb-co-tag { display:inline-block; background:rgba(48,209,88,.15); color:var(--sb-ok,#30d158);
             font-size:9.5px; font-weight:800; letter-spacing:.7px; padding:2px 6px;
             border-radius:4px; margin-left:4px; }

/* ---- bos durum ---- */
.sb-co-empty { text-align:center; padding:56px 24px; }
.sb-co-empty .ico { width:72px; height:72px; border-radius:50%; margin:0 auto 18px;
                    display:grid; place-items:center; font-size:28px;
                    background:rgba(var(--acc-rgb,135,120,255),.1); color:var(--acc,#8778ff); }

/* ---- alt guven seridi ---- */
.sb-co-trust { display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap;
               margin-top:28px; padding-top:20px; border-top:1px solid var(--co-line); }
.sb-co-trust span { font-size:12px; color:var(--sb-text-3); display:inline-flex; align-items:center; gap:8px; }

@media (max-width:991px) {
    .sb-co-side  { position:static; }
    .sb-co-steps { overflow-x:auto; }
}
@media (max-width:575px) {
    .sb-co-fields { grid-template-columns:1fr; }
    .sb-co-top    { flex-direction:column; align-items:stretch; }
    .sb-co-price  { text-align:left; }
    .sb-co-trust  { gap:14px; }
    .sb-co-banner { gap:12px; }
}
.sb-co-inst { margin-top:14px; padding:14px 16px; border-radius:10px;
              background:rgba(var(--acc-rgb,135,120,255),.08);
              border:1px solid rgba(var(--acc-rgb,135,120,255),.18); }
.sb-co-inst .hd { color:var(--acc,#8778ff); font-size:11px; font-weight:700; letter-spacing:.5px;
                  text-transform:uppercase; margin-bottom:8px; }
.sb-co-inst .bd { color:var(--sb-text-2); font-size:13px; line-height:1.6; white-space:pre-line; }

/* ===================================================================
   ODEME AKISI — TAM EKRAN BEKLEME ORTUSU                      v162
   -------------------------------------------------------------------
   Opt-in: form uzerinde data-sb-overlay="mesaj". Yalnizca guven acisindan
   kritik adimlarda kullanilir (fatura olusturma, bakiyeyle odeme) — her
   forma konursa gurultu olur ve anlamini kaybeder.

   Halka `opacity:0` gibi GIZLI bir halden BASLAMAZ; hareket kapaliyken
   donmez ama GORUNUR kalir, yani "beklemede" bilgisi kaybolmaz (.sb-busy
   ile ayni gerekce).
   =================================================================== */
.sb-load { position:fixed; inset:0; z-index:9998; display:grid; place-items:center;
           background:rgba(3,4,16,.72);
           -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sb-load-card { display:flex; flex-direction:column; align-items:center; gap:14px;
                padding:30px 36px; border-radius:16px; text-align:center; max-width:88vw;
                background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
                box-shadow:0 24px 60px rgba(0,0,0,.5); }
.sb-load-ring { width:34px; height:34px; border-radius:50%; flex-shrink:0;
                border:3px solid rgba(255,255,255,.14); border-top-color:var(--acc,#8778ff);
                animation:sbSpin .7s linear infinite; }
.sb-load-txt { color:#fff; font-size:14.5px; font-weight:600; line-height:1.4; }
.sb-load-sub { color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.5; }

/* ===================================================================
   TEK YUZEY SAYFA DUZENI  (cart / checkout / invoice / 2fa-setup)  v167
   -------------------------------------------------------------------
   Arka plan artik PANELIN KENDI SISTEMI: ayni duvar kagidi dosyalari,
   ayni doygunluk/parlaklik filtresi, ayni koyu ortu. Sinif adlari
   `appearance_body_class()`'tan geldigi icin Admin -> Appearance'taki
   secim HEM paneli HEM bu sayfalari yonetir — iki yerde ayri ayar yok.

   TASARIM: tek surekli tuval.
     - Ayrac cizgisi YOK; sinir, ortunun yumusak degisimiyle veriliyor.
     - Fotograf ve ortu GOVDE seviyesinde tek sistem, yani basligin arkasi
       ile icerik alani AYNI malzeme. Dikis olusmasi imkansiz.
     - Bolum zeminleri seffaf; aksi halde temanin opak `section` zemini
       govde katmanini orter.

   ⚠️ Yollar panel.css'e GORELI (../../images/...). Kok-mutlak yazilirsa
   alt klasore kurulan sitelerde kirilir (§3k).
   ⚠️ `background-attachment:fixed` KULLANILMIYOR — katman zaten
   position:fixed. iOS Safari fixed attachment'i yok sayiyor ve gorsel
   zipliyordu (panelde de ayni karar).
   =================================================================== */
body.dark-scheme.sb-flow { background: #010314; }

/* --- Fotograf katmani (Appearance'ta "photo" secildiyse) ------------ */
body.dark-scheme.sb-flow.bg-photo::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
    /* Panelle ayni: kaynak duvar kagitlari cok canli, tam doygunlukta
       sayfa arayuz degil "poster" gibi duruyor. */
    filter: saturate(.62) brightness(.72);
    background-image: url('../../images/background/panel-gta.webp');
}
body.dark-scheme.sb-flow.bg-photo.photo-gta6::before  { background-image: url('../../images/background/panel-gta6.webp'); }
body.dark-scheme.sb-flow.bg-photo.photo-gta::before   { background-image: url('../../images/background/panel-gta.webp'); }
body.dark-scheme.sb-flow.bg-photo.photo-redm::before  { background-image: url('../../images/background/panel-redm.webp'); }
body.dark-scheme.sb-flow.bg-photo.photo-rust::before  { background-image: url('../../images/background/panel-rust.webp'); }
body.dark-scheme.sb-flow.bg-photo.photo-space::before { background-image: url('../../images/background/space.webp'); }

/* --- Fotograf YOKSA: yumusak isima (ayni tuval mantigi korunur) ----- */
body.dark-scheme.sb-flow:not(.bg-photo)::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(1150px 640px at 10% -4%, rgba(var(--acc-rgb,135,120,255), .15), transparent 58%),
        radial-gradient( 900px 560px at 97% 16%, rgba(100,210,255, .075), transparent 60%);
}

/* --- Ortu + doku: HER ZAMAN, tek katman ----------------------------
   Ortu panelinkiyle ayni egri (%74 -> %88 -> %95): ustte gorsel taninir,
   asagida icerik yogunlastigi icin koyulasir. Bu katman OLMADAN acik
   bolgelerde beyaz metin kayboluyor. */
body.dark-scheme.sb-flow::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(9,10,16,.74) 0%, rgba(9,10,16,.88) 46%, rgba(9,10,16,.95) 100%),
        radial-gradient(var(--sb-texture, rgba(235,235,245,.06)) 1px, transparent 1.2px);
    background-size: auto, 26px 26px;
    background-repeat: no-repeat, repeat;
}
/* Fotograf yokken ortu gereksiz koyultma yapmasin */
body.dark-scheme.sb-flow:not(.bg-photo)::after {
    background-image: radial-gradient(var(--sb-texture, rgba(235,235,245,.06)) 1px, transparent 1.2px);
    background-size: 26px 26px;
    background-repeat: repeat;
}

/* Icerik katmanlarin USTUNDE */
body.dark-scheme.sb-flow #wrapper { position: relative; z-index: 1; }

/* Bolum zeminleri SEFFAF — yoksa tema opak zemini govde katmanini orter */
body.dark-scheme.sb-flow .sb-page-head,
body.dark-scheme.sb-flow .sb-page-body { background: transparent; }

/* --- Sayfa basligi: cizgi YOK, yalnizca hafif ek koyulastirma ------- */
body.dark-scheme.sb-flow .sb-page-head {
    position: relative;
    padding: 154px 0 54px;
    border-bottom: 0;                 /* sert dikis kaldirildi */
}
/* Buyuk baslik metni icin ek ortu — ALTTA SIFIRA iner, dikis yapmaz */
body.dark-scheme.sb-flow .sb-page-head::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(1,3,20,.38) 0%, rgba(1,3,20,.16) 62%, rgba(1,3,20,0) 100%);
}
body.dark-scheme.sb-flow .sb-page-head > .container { position: relative; z-index: 1; }
body.dark-scheme.sb-flow .sb-page-head h1 { text-shadow: 0 2px 20px rgba(0,0,0,.65); }
body.dark-scheme.sb-flow .sb-page-head p  { text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* --- Icerik: baslikla ayni tuvalde -------------------------------- */
/* `!important` ZORUNLU — tema `.no-top { padding-top:0 !important }` diyor. */
body.dark-scheme.sb-flow .sb-page-body { position: relative; padding-top: 26px !important; }
body.dark-scheme.sb-flow .sb-page-body > .container { position: relative; z-index: 1; }

@media (max-width: 767px) {
    body.dark-scheme.sb-flow .sb-page-head { padding: 122px 0 40px; }
    body.dark-scheme.sb-flow .sb-page-body { padding-top: 18px !important; }
}

/* Erisilebilirlik: gorsel ve doku metnin arkasindaki zemini degistirip
   kontrasti dusurur — yuksek kontrast / zorlanmis renk / yazdirmada kapanir. */
@media (prefers-contrast: more) {
    body.dark-scheme.sb-flow::before { display: none; }
    body.dark-scheme.sb-flow::after  { background-image: none; }
}
@media (forced-colors: active) {
    body.dark-scheme.sb-flow::before,
    body.dark-scheme.sb-flow::after,
    body.dark-scheme.sb-flow .sb-page-head::after { display: none; }
}
@media print {
    body.dark-scheme.sb-flow::before,
    body.dark-scheme.sb-flow::after,
    body.dark-scheme.sb-flow .sb-page-head::after { display: none; }
    body.dark-scheme.sb-flow .sb-page-head { padding-top: 0; }
}

/* --- SSS akordeonu (faq.php) — sorular `faqs` tablosundan gelir --- */
.sb-faq { border-top:1px solid var(--sb-line); }
.sb-faq:first-of-type { border-top:0; }
.sb-faq > summary { cursor:pointer; list-style:none; padding:13px 26px 13px 0; position:relative;
                    color:var(--sb-text-strong); font-size:14px; font-weight:600; line-height:1.45; }
.sb-faq > summary::-webkit-details-marker { display:none; }
.sb-faq > summary::after { content:''; position:absolute; right:4px; top:19px; width:7px; height:7px;
                           border-right:1.7px solid var(--sb-text-3); border-bottom:1.7px solid var(--sb-text-3);
                           transform:rotate(45deg); transform-origin:60% 60%;
                           transition:transform .22s cubic-bezier(.22,1,.36,1); }
.sb-faq[open] > summary::after { transform:rotate(-135deg); }
.sb-faq > summary:hover { color:var(--acc,#8778ff); }
.sb-faq .bd { padding:0 0 15px; color:var(--sb-text-3); font-size:13.5px; line-height:1.7; }

/* ===================================================================
   ICERIK SAYFASI UST BANNER'I  (#subheader)                    v173
   -------------------------------------------------------------------
   Talep: "hafif %20 karart ve canli gorunsun, yasayan sehir gibi."

   🔴 JARALLAX GORSELI CALISMA ANINDA SARIYOR. Markup'ta <img> section'in
   DOGRUDAN cocugu; ama js/plugins.js icindeki jarallax onu
   `position:absolute; z-index:-100` bir div'e taSIYOR ve img'e satir ici
   `object-fit / object-position / width / height / transform` yaziyor.
   Sonuc olculdu: `#subheader > .jarallax-img` seciciSi HICBIR SEYE
   uymuyordu (filter: none). Iki ders:
     · Bu img'e kural yazarken `>` DEGIL torun seciciSi kullanin.
     · `transform` ve `object-position` satir ici geliyor — onlarla
       yarismayin; jarallax her kaydirmada yeniden yaziyor.

   Karartma NEDEN filtreyle degil AYRI KATMANLA yapiliyor:
   `brightness()` gorselin tamamini soldurur — neon tabelalar ve sokak
   lambalari da soner, yani "canli sehir" hissi kaybolur. Bunun yerine
   uzerine koyu bir katman biniyor (metin okunurlugu icin gereken sey de
   bu) ve gorselin KENDISI doygunluk + kontrastla gucleniyor.
   =================================================================== */
body.dark-scheme #subheader { position:relative; overflow:hidden; }

/* Canli sehir: doygunluk + hafif kontrast. Parlaklik DUSURULMEZ —
   karartma ustteki katmanin isi. (Torun secici: jarallax sarmalayabilir.) */
body.dark-scheme #subheader .jarallax-img {
    filter:saturate(1.24) contrast(1.07);
}

/* JS calismazsa (jarallax yok) gorsel akista duran bir <img> olur ve
   duzeni bozar. Bu kural yalnizca O DURUMDA uyar — sarmalandiginda
   dogrudan cocuk olmaktan cikar ve devre disi kalir. */
body.dark-scheme #subheader > img.jarallax-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 62%;
}

/* %70 karartma (v174 — kullanici istegi). Duz katman ESAS; ustune
   yalnizca cok hafif bir dikey gecis biniyor ki alt kenar tamamen
   duz durmasin (toplam ~%70-75).
   NOT: gorselin KENDI doygunlugu yukseltildigi icin bu kadar koyu
   ortunun altinda bile neonlar seciliyor — brightness() ile
   karartilsaydi bu mumkun olmazdi. */
body.dark-scheme #subheader::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(6,4,14,0) 0%, rgba(6,4,14,.04) 48%, rgba(6,4,14,.16) 100%),
        rgba(6,4,14,.70);
}

/* Icerik katmani gorselin ve ortunun USTUNDE kalmali */
body.dark-scheme #subheader > .container { position:relative; z-index:2; }
body.dark-scheme #subheader .subtitle { text-shadow:0 1px 12px rgba(0,0,0,.6); }
body.dark-scheme #subheader h2 { text-shadow:0 2px 18px rgba(0,0,0,.65); }

/* "Yasayan sehir": cok yavas, cok dusuk genlikli surukleme.
   Hedef, img DEGIL jarallax'in SARMALAYICISI — img'in transform'unu
   jarallax her kaydirmada yeniden yaziyor, oraya animasyon koymak
   ikisini birbiriyle yaristirirdi. Sarmalayicinin transform'una
   dokunan yok.
     · opacity 0'DAN BASLAMAZ -> §3c v104 tuzagi yok
     · yalnizca transform -> compositor'da kalir
     · 38 sn: goz "animasyon" olarak okumasin (§3s nefes kurali) */
@media (prefers-reduced-motion: no-preference) {
    body.dark-scheme #subheader > div:not(.container) {
        animation:sbCityDrift 38s ease-in-out infinite alternate;
    }
}
@keyframes sbCityDrift {
    from { transform:scale(1.05) translate3d(0, 0, 0); }
    to   { transform:scale(1.11) translate3d(-1.2%, -1.4%, 0); }
}

/* Yuksek kontrast / zorlanmis renk: gorsel katmanlari sadelesir */
@media (prefers-contrast: more) {
    body.dark-scheme #subheader .jarallax-img { filter:none; }
    body.dark-scheme #subheader::before { background:rgba(6,4,14,.78); }
}
@media (forced-colors: active) {
    body.dark-scheme #subheader::before { background:none; }
}

/* ===================================================================
   BILGI BANKASI LISTESI  (knowledgebase.php ?cat=)             v176
   -------------------------------------------------------------------
   Kutunun kendisi temanin `.de-box-cat` bileseni; buradaki kurallar
   yalnizca onu TIKLANABILIR bir liste ogesine cevirir.

   🔴 NEDEN `.de-step-s1` DEGIL: temada o kutu `height:100%` tasiyor
   (css/style.css) — yan yana duran kolonlar icin tasarlanmis. Dikey bir
   listede her kart kolonun tam boyunu almaya calisiyor ve 55px'lik
   icerik 458px yer kapliyordu; sayfa da o yuzden asagi uzuyordu.
   Olculdu: kart 458px -> 130px, sayfa 2124px -> 1150px civari.
   =================================================================== */
.kb-item { display:block; color:inherit; text-decoration:none; }
.kb-item .de-box-cat { transition:background .2s ease, transform .2s ease; }
.kb-item:hover .de-box-cat { background:rgba(255,255,255,.09); transform:translateY(-2px); }
.kb-item .de-box-cat i { font-size:24px; margin-bottom:10px; display:block; }
.kb-item h3 { color:#fff; font-size:19px; line-height:1.35; }
.kb-item .d-subtitle { margin-top:7px; font-size:14px; line-height:1.6;
                       color:rgba(255,255,255,.6); }
.kb-item:hover h3 { color:var(--acc,#8778ff); }

/* Makale govdesi — admin HTML yaziyor, tipografi burada tanimli. */
.kb-body h3 { font-size:20px; margin:26px 0 12px; }
.kb-body p, .kb-body li { line-height:1.8; }
.kb-body ul, .kb-body ol { padding-left:20px; margin-bottom:18px; }
.kb-body li { margin-bottom:7px; }
.kb-body code { padding:2px 7px; border-radius:6px; font-size:13px;
                background:rgba(255,255,255,.08); }
/* 🔴 Bootstrap `.table` KOYU METIN basar (--bs-table-color: #212529).
   Koyu zeminde olculdu: kontrast 1.33:1 — metin pratikte gorunmuyordu.
   Admin makaleye tablo yapistirdiginda da ayni sey olacagi icin duzeltme
   sinifa degil, `.kb-body` icindeki HER tabloya uygulaniyor. */
.kb-body table { width:100%; margin:18px 0; color:inherit;
                 --bs-table-color:inherit; --bs-table-bg:transparent;
                 --bs-table-striped-color:inherit; --bs-table-hover-color:inherit; }
.kb-body th, .kb-body td { padding:9px 12px; color:inherit; background:transparent;
                           border-bottom:1px solid rgba(255,255,255,.09); }
.kb-body th { text-align:left; font-weight:600; color:#fff; }

/* ---- Icerik metni icindeki baglantilar ----
   🔴 Temanin `.id-color` sinifi `--primary-color` (#5623d8) — koyu bir
   menekse. Tema onu ROZET/VURGU SAYISI icin kullaniyor; ben metin
   baglantisi olarak kullaninca koyu zeminde kontrast 2.57:1 cikti (AA
   4.5'in cok altinda). Olculdu: saf tema sayfalarinda `a.id-color`
   HIC YOK, yani bu kural yalnizca bizim icerigimizi etkiler.
   Renk sitenin kendi aksani — o zaten kontrast turetilerek seciliyor. */
body.dark-scheme #content a.id-color,
body.dark-scheme .kb-body a { color:var(--acc,#8778ff); }
body.dark-scheme #content a.id-color:hover,
body.dark-scheme .kb-body a:hover { color:#fff; }

/* Bilgi bankasi kenar cubugu — kategori listesi */
.kb-cat { color:rgba(255,255,255,.72); text-decoration:none; transition:color .18s ease; }
.kb-cat:hover { color:#fff; }
.kb-cat.is-cur { color:#fff; font-weight:600; }
.kb-cat .n { opacity:.55; font-size:13px; }

/* ---- Urun sayfasi: sure secici (.radio-img-btn) ----
   🔴 Tema, secili etikete `background: var(--primary-color)` (#5623d8)
   veriyor ve yalnizca `opacity:1` yapiyor — METIN RENGINE dokunmuyor.
   Sonuc olculdu: secili "30 Days" etiketi 2.62:1, yani dordunun EN
   OKUNMAZI seciliydi. Renk beyaza cekildi (#fff / #5623d8 -> 8.7:1).
   Kapsam .radio-img-btn ile sinirli; temanin diger bilesenlerine dokunmaz. */
body.dark-scheme .radio-img-btn > input:checked + label,
body.dark-scheme .radio-img-btn > input:checked + label h3,
body.dark-scheme .radio-img-btn > input:checked + label h5,
body.dark-scheme .radio-img-btn > input:checked + label .sb-save { color:#fff; }

/* ===================================================================
   ICERIK SAYFASI KARTLARI — tek malzeme                        v178
   -------------------------------------------------------------------
   Sorun: tema `.de-step-s1` kutusuna SABIT bir mor->mavi gradyan
   veriyor (rgba(86,35,216,.1) -> rgba(106,121,250,.3)). O renkler
   temanin kendi degiskenlerinden geliyor ve sitenin aksani degistiginde
   TAKIP ETMIYOR; yan yana duran diger kartlarla da ayni malzemede
   degil. Ekranda "mavimsi, yamali" duruyordu.

   Yerine sitenin geri kalaninin kullandigi dil: saydam beyaz yuzey +
   hairline kenarlik + olculu yuvarlaklik (urun sayfalarindaki kartlarla
   ayni: rgba(255,255,255,.03) / 1px .08 / r=12-14).

   ⚠️ KAPSAM: `.de-step-s1` YALNIZCA bizim icerik sayfalarimizda
   kullaniliyor (olculdu: includes/core/pages.php + news.php; index.php
   ve urun sayfalari kullanmiyor). Yine de kural `#content` ile
   sinirlandi ki tema ileride baska bir yerde kullanirsa etkilenmesin.
   =================================================================== */
body.dark-scheme #content .de-step-s1,
body.dark-scheme #content .de-box-cat {
    background:rgba(255,255,255,.035);
    background-image:none;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:28px;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
body.dark-scheme #content .de-step-s1 h4,
body.dark-scheme #content .de-box-cat h3 { color:#fff; }

/* Ustte ince aksan cizgisi — vurgu icin hale DEGIL (bkz. §3c parlama
   politikasi), yalnizca kartin bagli oldugu rengi hatirlatan bir serit. */
body.dark-scheme #content .de-step-s1 { position:relative; overflow:hidden; }
body.dark-scheme #content .de-step-s1::before {
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg, var(--acc,#8778ff), transparent 70%);
    opacity:.65;
}

/* Tiklanabilir olanlar (bilgi bankasi listesi) hareket eder; duz bilgi
   kutulari (about, affliate) YERINDE DURUR — tiklanamayan bir kutunun
   hover'da kalkmasi yanlis bir vaat. */
body.dark-scheme #content .kb-item:hover .de-box-cat {
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
    transform:translateY(-2px);
}
@media (max-width:575px) {
    body.dark-scheme #content .de-step-s1,
    body.dark-scheme #content .de-box-cat { padding:22px; }
}

/* ---- Haber kartlari (news.php) ----
   Tema `.bloglist .post-content` yapisini kullaniyoruz; buradaki kurallar
   yalnizca gorselin oranini sabitler ve karti tiklanabilir hissettirir.
   Gorsel kutusu ONCEDEN ayrilir (aspect-ratio + width/height niteligi),
   yoksa lazy gorsel inince liste asagi ziplar. */
body.dark-scheme #content .bloglist .post-image img {
    width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
}
body.dark-scheme #content .bloglist .post-image { overflow:hidden; border-radius:12px; }
body.dark-scheme #content .bloglist .post-image img { transition:transform .35s ease; }
body.dark-scheme #content .bloglist:hover .post-image img { transform:scale(1.04); }
body.dark-scheme #content .bloglist .post-text h4 a { color:#fff; }
body.dark-scheme #content .bloglist:hover .post-text h4 a { color:var(--acc,#8778ff); }
body.dark-scheme #content .bloglist .d-date { font-size:12px; color:var(--sb-text-3,rgba(255,255,255,.55)); }

/* =====================================================================
   ETKINLIK AKISI AYAR EKRANI  (Site Settings > General > Activity feed)
   ---------------------------------------------------------------------
   .db-subhead — panel ICINDE bolum basligi. Onceden boyle bir sinif
   yoktu; ayar panelleri buyudukce alanlar tek bir yigin haline
   geliyordu. Notr, aksansiz: baslik ayirir, vurgulamaz (§3p).
   ===================================================================== */
body.dash .db-subhead {
    margin: 26px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--sb-line, rgba(255,255,255,.08));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sb-text-3, rgba(255,255,255,.52));
}
body.dash .db-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Onizleme — ziyaretcinin gorecegi kayitlarin AYNISI (sp_feed) */
body.dash .sb-sp-prev {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
    border-radius: 12px; padding: 12px;
    background: var(--sb-fill-1, rgba(255,255,255,.025));
}
body.dash .sb-sp-row { display: flex; align-items: center; gap: 11px; }
body.dash .sb-sp-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sb-fill-2, rgba(255,255,255,.05));
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
}
body.dash .sb-sp-ico img { width: 19px; height: 19px; object-fit: contain; }
body.dash .sb-sp-txt { min-width: 0; font-size: 13px; color: var(--sb-text-2, #b9b9c6); line-height: 1.4; }
body.dash .sb-sp-txt b { color: var(--sb-text, #fff); font-weight: 600; }
body.dash .sb-sp-txt em {
    display: block; margin-top: 2px; font-style: normal; font-size: 11px;
    color: var(--sb-text-3, rgba(255,255,255,.52));
}
body.dash .sb-sp-flag {
    width: 14px; height: 10px; object-fit: cover; border-radius: 2px;
    margin-right: 5px; vertical-align: -1px;
}

/* Kampanya cubugu onizlemesi (Site Settings > Promotions > Offer bar) */
body.dash .sb-ob-prev {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
    border-radius: 100px; padding: 10px 16px;
    background: var(--sb-fill-1, rgba(255,255,255,.025));
    font-size: 13px; color: var(--sb-text-2, #b9b9c6);
}
body.dash .sb-ob-pc {
    padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 800;
    color: #fff; background: var(--acc-fill, var(--acc, #5a68e0));
}
body.dash .sb-ob-code {
    padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; color: var(--sb-text, #fff);
    border: 1px dashed var(--sb-line-2, rgba(255,255,255,.22));
    background: var(--sb-fill-2, rgba(255,255,255,.05));
}
body.dash .sb-ob-time { font-size: 11.5px; color: var(--sb-text-3, rgba(255,255,255,.52)); }
body.dash .sb-ob-cta {
    padding: 5px 13px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
    color: var(--sb-text, #fff); background: var(--sb-fill-2, rgba(255,255,255,.08));
}

/* =====================================================================
   CAPTCHA — musteri formlari + admin secici
   ===================================================================== */
.sb-cap { margin: 14px 0 4px; }
.sb-cap-q {
    display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600;
    color: var(--sb-text-2, #b9b9c6);
}
.sb-cap-in {
    width: 100%; max-width: 160px; padding: 11px 13px; border-radius: 10px;
    background: var(--sb-fill-1, rgba(255,255,255,.04));
    border: 1px solid var(--sb-line, rgba(255,255,255,.12));
    color: var(--sb-text, #fff); font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.sb-cap-in:focus-visible { outline: 2px solid var(--acc, #8778ff); outline-offset: 2px; }

/* Admin: saglayici secici. Gizli radyo + :has() ile gorsel geri bildirim
   — §3aj'de kaydedilen desen: sinif JS ile tasinmaz, tiklama aninda
   calisir ve bayat sinif birakmaz. */
body.dash .sb-cap-group {
    margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--sb-text-3, rgba(255,255,255,.52));
}
body.dash .sb-cap-opt {
    display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px;
    padding: 13px 15px; border-radius: 12px; cursor: pointer;
    background: var(--sb-fill-1, rgba(255,255,255,.025));
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
    transition: border-color .18s, background .18s;
}
body.dash .sb-cap-opt:hover { border-color: var(--sb-line-2, rgba(255,255,255,.16)); }
body.dash .sb-cap-opt:has(input:checked) {
    border-color: var(--acc, #8778ff);
    background: rgba(var(--acc-rgb, 135,120,255), .08);
}
body.dash .sb-cap-opt input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--acc, #8778ff); }
body.dash .sb-cap-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.dash .sb-cap-body b { color: var(--sb-text, #fff); font-size: 13.5px; font-weight: 600; }
body.dash .sb-cap-body em {
    font-style: normal; font-size: 12px; color: var(--sb-text-3, rgba(255,255,255,.55));
}
body.dash .sb-cap-link { font-size: 12px; font-weight: 600; color: var(--acc, #8778ff); width: max-content; }
body.dash .sb-cap-prev {
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
    border-radius: 12px; padding: 14px;
    background: var(--sb-fill-1, rgba(255,255,255,.025));
}

/* =====================================================================
   ADMIN MENUSU — hizli atlama + alt gruplar
   ---------------------------------------------------------------------
   14 ust oge + 10 ayar grubu var. Alt gruplar onceden menude HIC
   gorunmuyordu; oraya gitmek icin once sekmeye girmek gerekiyordu.
   ===================================================================== */
body.dash.is-admin-ctx .db-navfind {
    position: relative; display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 9px 11px; border-radius: 10px;
    background: var(--sb-fill-1, rgba(255,255,255,.04));
    border: 1px solid var(--sb-line, rgba(255,255,255,.09));
    transition: border-color .18s;
}
body.dash.is-admin-ctx .db-navfind:focus-within { border-color: var(--admin, #e8c474); }
body.dash.is-admin-ctx .db-navfind > i {
    font-size: 12px; color: var(--sb-text-3, rgba(255,255,255,.5)); flex: 0 0 auto;
}
body.dash.is-admin-ctx .db-navfind input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
    color: var(--sb-text, #fff); font-size: 13px; font-family: inherit;
}
body.dash.is-admin-ctx .db-navfind input::placeholder { color: var(--sb-text-3, rgba(255,255,255,.45)); }
body.dash.is-admin-ctx .db-navfind kbd {
    /* ⚠️ Olculdu: --sb-text-3 ile 4.3:1 — AA'nin altinda. Metin
       alfasini da harmanlayan sonda ile bulundu (§3s). */
    flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 600;
    color: var(--sb-text-2, rgba(255,255,255,.72));
    background: var(--sb-fill-2, rgba(255,255,255,.06));
    border: 1px solid var(--sb-line, rgba(255,255,255,.1));
}
@media (max-width: 991px) { body.dash.is-admin-ctx .db-navfind kbd { display: none; } }
body.dash.is-admin-ctx .db-navfind-none {
    margin: 2px 0 10px; padding: 0 4px; font-size: 12.5px;
    color: var(--sb-text-3, rgba(255,255,255,.5));
}

/* Alt gruplar — aktif ayar sekmesinin altinda */
body.dash.is-admin-ctx .db-nav-sub {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 6px 0; padding-left: 30px;
    border-left: 1px solid var(--sb-line, rgba(255,255,255,.09));
    margin-left: 15px;
}
body.dash.is-admin-ctx .db-nav-subitem {
    padding: 7px 10px; border-radius: 7px; font-size: 12.5px; text-decoration: none;
    color: var(--sb-text-3, rgba(255,255,255,.55));
    transition: color .16s, background .16s;
}
body.dash.is-admin-ctx .db-nav-subitem:hover {
    color: var(--sb-text, #fff); background: var(--sb-fill-1, rgba(255,255,255,.05));
}
body.dash.is-admin-ctx .db-nav-subitem.is-active {
    color: var(--sb-text, #fff); font-weight: 600;
    background: rgba(var(--acc-rgb, 135,120,255), .12);
}
body.dash.is-admin-ctx .db-nav-subitem:focus-visible {
    outline: 2px solid var(--admin, #e8c474); outline-offset: 1px;
}

/* 🔴 Yonetim menusundeki BOLUM ETIKETLERI AA altindaydi.
   Olculdu: 3.19:1 (--mut2 admin baglaminda). Yeni bir sey degil,
   menuye bakarken ortaya cikti — alt gruplar eklenince yanlarindaki
   etiketin silik oldugu gorundu. Alt grup ogeleriyle ayni tona
   cekildi (olculdu: 4.97:1). */
body.dash.is-admin-ctx .db-nav-label { color: var(--sb-text-3, rgba(255,255,255,.62)); }

/* Canli destek — gomme kodu onizlemesi */
body.dash .sb-lc-prev {
    margin: 0; padding: 14px; border-radius: 12px; overflow-x: auto;
    background: var(--sb-fill-1, rgba(255,255,255,.03));
    border: 1px solid var(--sb-line, rgba(255,255,255,.08));
    font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.6;
    color: var(--sb-text-2, #b9b9c6); white-space: pre-wrap; word-break: break-all;
    max-height: 260px; overflow-y: auto;
}

/* Panel ici "More" — uzun aciklamalar varsayilan olarak KAPALI.
   <details> native: JS olmasa da acilir. Ekledigim paneller ev
   stilinin ~4 kati aciklama tasiyordu (olculdu: 9-10 not / ~210-240
   kelime; mevcut footer.php 2 not / 57 kelime).

   ⚠️ `.sb-help` YALNIZCA ADMIN katlanan aciklamasidir. Musteri
   tarafinda ayni adi kullanmayin — bu blok dosyada asagida oldugu
   icin ayni ozgullukteki her kurali sessizce ezer. Bir kez yasandi:
   siparis detayindaki destek satiri buradan `margin:-4px` alip
   ustundeki blogun icine giriyordu (v201, bkz. `.sb-ohelp`). */
body.dash .sb-help { margin: -4px 0 14px; }
body.dash .sb-help > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--acc, #8778ff);
    list-style: none; width: max-content;
}
body.dash .sb-help > summary::-webkit-details-marker { display: none; }
body.dash .sb-help > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 9px; transition: transform .18s;
}
body.dash .sb-help[open] > summary::after { transform: rotate(180deg); }
body.dash .sb-help > summary:focus-visible { outline: 2px solid var(--acc, #8778ff); outline-offset: 3px; }
body.dash .sb-help p { margin-bottom: 0; }

/* =====================================================================
   KART ALTLIGI  (.db-panel-foot)
   ---------------------------------------------------------------------
   Ayar ekranlarinda her kart kendi satir ici flex kutusuyla bitiyordu
   ve kutular birbirinden biraz farkliydi. Olculdu (settings > general):
   ayni sayfada UC farkli buton yuksekligi (38 / 43 / 44 px), ayni
   eylem icin 26 farkli etiket, ve iki buton TAMAMEN ETIKETSIZ.

   Cozum bir satir ici duzeltme degil, BILESEN: icerikten hairline ile
   ayrilmis, hafif cukur bir serit; eylem saga hizali. Kartin ritmi
   artik "icerik -> ayrac -> eylem" ve sayfa boyunca ayni.
   ===================================================================== */
body.dash .db-panel-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; flex-wrap: wrap;
    /* .db-panel-body'nin 20px dolgusunu tasirip serit gorunumu verir */
    margin: 22px -20px -20px; padding: 14px 20px;
    border-top: 1px solid var(--sb-line, rgba(255,255,255,.08));
    background: var(--sb-fill-1, rgba(255,255,255,.022));
    border-radius: 0 0 var(--a-r, 14px) var(--a-r, 14px);
}
/* Solda kalmasi gereken yardimci metin/ikincil eylem icin */
body.dash .db-panel-foot > .db-foot-left { margin-right: auto; }

/* ⚠️ Buraya `.sb-btn { min-height }` YAZMAYIN — bu dosyada zaten
   baglama gore yukseklik veren kurallar var (body.is-admin-ctx 38px,
   musteri paneli 44px) ve onlar daha ozgul, yani genel kural sessizce
   OLU kalir. Olculdu: eklediğim kural hicbir sey degistirmiyordu.
   Yukseklik tutarliligi kart altligindan geliyor: eylemler artik tek
   bir bilesende, ayni dolgu ve ayni hizayla. */

@media (max-width: 575px) {
    /* Dar ekranda eylem tam genislik — 44px dokunma hedefi */
    body.dash .db-panel-foot { justify-content: stretch; }
    body.dash .db-panel-foot .sb-btn { flex: 1 1 100%; min-height: 44px; }
}

/* Kompakt buton — bir alanin YANINDA duran satir ici eylem icin.
   Kart altligindaki eylemle ayni boyutta olmamali; yanindaki kucuk
   input ile eslesir. Onceden her kullanimda satir ici stil yaziliyordu,
   yani "ayni sey" iki farkli yerde iki farkli sekilde tanimliydi. */
.sb-btn.sm { min-height: 34px; padding: 7px 12px; font-size: 12px; gap: 6px; }
.sb-btn.sm i { font-size: 11px; }

/* Satir eylemi — tablo icindeki kucuk buton. Uc dosyada uc AYRI
   ad-hoc olcu vardi (4px 10px / 3px 8px / 6px 12px, 11 ve 11.5px
   yazi). Ayni rolun uc farkli boyutta cizilmesi, kullanicinin
   "yapay zeka gibi duruyor" dediginin tipik gostergesi. */
.sb-btn.xs { min-height: 28px; padding: 4px 10px; font-size: 11px; gap: 5px; border-radius: 8px; }
.sb-btn.xs i { font-size: 10px; }

/* =====================================================================
   YONETIM PANELI v2 — "KONTROL ODASI"   (body.adm-ui)   —  v247 / §3ds
   ---------------------------------------------------------------------
   Kullanici: "admin paneli hep karisik geliyordu; sidebar, navbar vb.
   daha guzel bir arayuze sahip olsun, karisik olmamali".

   YON: sakin, hassas bir kontrol odasi. Grafit yuzeyler + ince kilcal
   cizgiler + TEK aksan (Appearance'taki --acc: aktif menu, birincil
   dugme, odak halkasi). Fotografli panel basliklari, ortam isigi
   lekeleri ve turuncu "yonetim rengi" kaldirildi; zemin cok hafif bir
   nokta izgarasi (konsol hissi, hareketsiz).
   YAZI: arayuz Instrument Sans (tabular rakam + Turkce harfler olculdu),
   basliklar ve sayilar Oxanium (markanin kendi yazisi).
   KABUK: layout.php > adm_shell_open() — .ax-* siniflari YALNIZCA
   burada. Icerik bilesenleri (db-panel, db-table, sb-btn ...) sinif
   adlarini korur; burada yeniden boyanir, 30+ sekme dosyasi degismez.
   Satir ici stiller (#0f1016 kuyular, #cfd2e0 metin) bu palete yakin
   secildi ki dokunulmadan uyum saglasin.

   KURALLAR (§9h): gizli halden baslayan animasyon yalnizca
   no-preference icinde; parlama/nabiz YOK; :focus-visible halkalari
   korunur. Musteri paneli ETKILENMEZ (her secici body.adm-ui).
   ===================================================================== */
body.adm-ui {
    --ax-font:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ax-display: "Oxanium", "Instrument Sans", "Segoe UI", sans-serif;
    --ax-mono:    ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --ax-bg:        #0a0b0f;
    --ax-side:      #0c0d12;
    --ax-surface:   #121419;
    --ax-surface-2: #16181f;
    --ax-well:      #0f1016;
    --ax-elev:      #1a1d25;
    --ax-line:      rgba(255,255,255,.07);
    --ax-line-2:    rgba(255,255,255,.12);
    --ax-text:      #eceef3;
    --ax-text-2:    #a9adbb;   /* 8.2:1 yuzeyde */
    --ax-text-3:    #7d8193;   /* 4.77:1 yuzeyde */
    --ax-acc:       var(--acc, #8778ff);
    --ax-acc-rgb:   var(--acc-rgb, 135,120,255);
    --ax-fill:      var(--acc-fill, var(--acc, #6d5cff));
    --ax-r:         clamp(8px, var(--radius, 12px), 16px);
    --ax-r-sm:      9px;
    --ax-side-w:    264px;
    --ax-top-h:     60px;
    --ax-ease:      cubic-bezier(.2,.8,.2,1);

    /* eski yonetim token'lari yeni palete — grafik, sayfalama, toplu
       islem cubugu gibi bilesenler bunlari okuyor */
    --a-bg: var(--ax-bg);  --a-s1: var(--ax-surface); --a-s2: var(--ax-surface-2); --a-s3: var(--ax-elev);
    --a-line: var(--ax-line); --a-line2: var(--ax-line-2);
    --admin: var(--ax-acc); --admin-soft: rgba(var(--ax-acc-rgb),.12); --admin-line: rgba(var(--ax-acc-rgb),.32);
    --panel: var(--ax-surface); --line: var(--ax-line); --line2: var(--ax-line-2);
    --txt: var(--ax-text); --mut: var(--ax-text-2); --mut2: var(--ax-text-3);

    font-family: var(--ax-font);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ax-text);
    background-color: var(--ax-bg);
    background-image:
        radial-gradient(1100px 380px at 18% -8%, rgba(var(--ax-acc-rgb),.07), transparent 70%),
        radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.2px);
    background-size: auto, 24px 24px;
    background-attachment: fixed, fixed;
}
/* eski ortam isigi, doku ve fotograf katmanlari yonetimde yok */
body.adm-ui::before { background:none; }
body.adm-ui::after,
body.adm-ui .db-bgfx { display:none; }
body.adm-ui ::selection { background:rgba(var(--ax-acc-rgb),.35); color:#fff; }
body.adm-ui :focus-visible { outline:2px solid rgba(var(--ax-acc-rgb),.9); outline-offset:2px; }
body.adm-ui * { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
body.adm-ui kbd {
    font-family:var(--ax-mono); font-size:10.5px; line-height:1; padding:3px 6px; border-radius:5px;
    background:rgba(255,255,255,.06); border:1px solid var(--ax-line-2); color:var(--ax-text-2); box-shadow:none;
}

/* ---------------------------------------------------------------------
   KABUK
   --------------------------------------------------------------------- */
body.adm-ui .ax-app { min-height:100vh; }
body.adm-ui .ax-side {
    position:fixed; top:0; bottom:0; left:0; z-index:70; width:var(--ax-side-w);
    display:flex; flex-direction:column; background:var(--ax-side); border-right:1px solid var(--ax-line);
}
body.adm-ui .ax-brand {
    height:var(--ax-top-h); flex-shrink:0; display:flex; align-items:center; gap:10px;
    padding:0 12px 0 18px; border-bottom:1px solid var(--ax-line);
}
body.adm-ui .ax-logo { display:flex; align-items:center; min-width:0; }
body.adm-ui .ax-logo img { height:30px; width:auto; display:block; }
body.adm-ui .ax-collapse {
    margin-left:auto; width:30px; height:30px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ax-text-3); font-size:12px; cursor:pointer;
}
body.adm-ui .ax-collapse:hover { background:rgba(255,255,255,.05); color:var(--ax-text); }

body.adm-ui .ax-nav { flex:1; min-height:0; overflow-y:auto; padding:14px 12px 20px; }
body.adm-ui .ax-group + .ax-group { margin-top:14px; }
body.adm-ui .ax-label {
    display:block; padding:0 10px 7px; font-family:var(--ax-display); font-size:10px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ax-text-3); white-space:nowrap;
}
body.adm-ui .ax-link {
    position:relative; display:flex; align-items:center; gap:11px; height:34px; padding:0 10px; border-radius:9px;
    color:var(--ax-text-2); font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap;
}
body.adm-ui .ax-link + .ax-link, body.adm-ui .ax-link + .ax-sub, body.adm-ui .ax-sub + .ax-link, body.adm-ui .ax-sub + .ax-sub { margin-top:2px; }
body.adm-ui .ax-link > i { width:18px; flex-shrink:0; text-align:center; font-size:14px; color:var(--ax-text-3); }
body.adm-ui .ax-link:hover { background:rgba(255,255,255,.04); color:var(--ax-text); }
body.adm-ui .ax-link:hover > i { color:var(--ax-text-2); }
body.adm-ui .ax-link.is-active { background:rgba(var(--ax-acc-rgb),.12); color:#fff; }
body.adm-ui .ax-link.is-active > i { color:var(--ax-acc); }
body.adm-ui .ax-link.is-active::before {
    content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--ax-acc);
}
body.adm-ui .ax-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.adm-ui .ax-count {
    flex-shrink:0; min-width:22px; height:20px; padding:0 7px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; background:rgba(var(--ax-acc-rgb),.28);
}
/* alt gruplar (Site Settings / System) */
body.adm-ui .ax-subrow { display:flex; align-items:center; gap:2px; }
body.adm-ui .ax-subrow .ax-link { flex:1; min-width:0; }
body.adm-ui .ax-subtoggle {
    width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:7px; border:0; background:transparent; color:var(--ax-text-3); font-size:10px; cursor:pointer;
}
body.adm-ui .ax-subtoggle:hover { background:rgba(255,255,255,.05); color:var(--ax-text); }
body.adm-ui .ax-sub.is-open .ax-subtoggle i { transform:rotate(180deg); }
/* bolum acikken ust oge sade kalir — vurgu alt ogede (tek vurgu) */
body.adm-ui .ax-sub .ax-link.is-active { background:none; }
body.adm-ui .ax-sub .ax-link.is-active:hover { background:rgba(255,255,255,.04); }
body.adm-ui .ax-subitems { display:none; margin:4px 0 8px 19px; padding-left:12px; border-left:1px solid var(--ax-line-2); }
body.adm-ui .ax-sub.is-open .ax-subitems { display:block; }
body.adm-ui .ax-sublink {
    position:relative; display:block; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--ax-text-3);
    text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.adm-ui .ax-sublink:hover { color:var(--ax-text); background:rgba(255,255,255,.035); }
body.adm-ui .ax-sublink.is-active { color:#fff; background:rgba(255,255,255,.05); }
body.adm-ui .ax-sublink.is-active::before {
    content:""; position:absolute; left:-15px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
    background:var(--ax-acc); box-shadow:0 0 0 3px var(--ax-side);
}
/* kenar cubugu alti: kullanici gorunumu + kimlik */
body.adm-ui .ax-side-foot { flex-shrink:0; padding:10px 12px 14px; border-top:1px solid var(--ax-line); }
body.adm-ui .ax-link-quiet { font-size:13px; }
body.adm-ui .ax-me {
    display:flex; align-items:center; gap:10px; margin-top:0; padding:9px 9px 9px 10px; border-radius:12px;
    background:var(--ax-surface); border:1px solid var(--ax-line);
}
body.adm-ui .ax-me-meta { flex:1; min-width:0; line-height:1.25; }
body.adm-ui .ax-me-meta strong { display:block; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.adm-ui .ax-me-2fa { display:inline-flex; align-items:center; gap:5px; margin-top:2px; font-size:11.5px; text-decoration:none; }
body.adm-ui .ax-me-2fa.on  { color:var(--sb-ok); }
body.adm-ui .ax-me-2fa.off { color:var(--sb-warn); }
body.adm-ui .ax-me-2fa:hover { text-decoration:underline; }
body.adm-ui .ax-logout { width:32px; height:32px; font-size:13px; }
body.adm-ui .ax-scrim { display:none; }

/* govde + ust cubuk */
body.adm-ui .ax-body { margin-left:var(--ax-side-w); min-height:100vh; min-width:0; display:flex; flex-direction:column; }
body.adm-ui .ax-top {
    position:sticky; top:0; z-index:50; height:var(--ax-top-h); flex-shrink:0; display:flex; align-items:center; gap:16px;
    padding:0 28px; background:rgba(10,11,15,.82); border-bottom:1px solid var(--ax-line);
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
}
body.adm-ui .ax-menu { display:none; }
/* panel gecisi (kullanici gorunumu | yonetim) — musteri panelindekiyle ayni yerde */
body.dash .ax-ctx {
    display:inline-flex; align-items:center; gap:2px; flex-shrink:0; padding:3px; border-radius:11px;
    background:var(--ax-well); border:1px solid var(--ax-line-2);
}
body.dash .ax-ctx-item {
    display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:8px;
    font-size:12.5px; font-weight:600; color:var(--ax-text-3); text-decoration:none; white-space:nowrap;
}
body.dash .ax-ctx-item i { font-size:12px; }
body.dash .ax-ctx-item:hover { color:var(--ax-text); background:rgba(255,255,255,.05); }
body.dash .ax-ctx-item.is-active { color:#fff; background:var(--ax-surface-2); box-shadow:inset 0 0 0 1px var(--ax-line-2); }
body.dash .ax-ctx-item.is-active i { color:var(--ax-acc); }
body.adm-ui .ax-crumb { display:flex; align-items:center; gap:9px; min-width:0; font-size:13px; color:var(--ax-text-3); white-space:nowrap; overflow:hidden; }
body.adm-ui .ax-crumb a { color:var(--ax-text-3); text-decoration:none; }
body.adm-ui .ax-crumb a:hover { color:var(--ax-text); }
body.adm-ui .ax-crumb > i { font-size:8.5px; opacity:.55; }
body.adm-ui .ax-crumb .now { color:var(--ax-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
body.adm-ui .ax-search {
    margin-left:auto; flex-shrink:1; display:flex; align-items:center; gap:10px; width:min(340px, 28vw); height:38px; padding:0 7px 0 12px;
    border-radius:10px; background:var(--ax-well); border:1px solid var(--ax-line-2); color:var(--ax-text-3);
    font:inherit; font-size:13px; text-align:left; cursor:pointer;
}
body.adm-ui .ax-search span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.adm-ui .ax-search:hover { border-color:rgba(var(--ax-acc-rgb),.45); color:var(--ax-text-2); }
body.dash .ax-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
body.dash .ax-icbtn {
    position:relative; width:38px; height:38px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:10px; border:1px solid transparent; background:transparent; color:var(--ax-text-2);
    font-size:15px; text-decoration:none; cursor:pointer;
}
body.dash .ax-icbtn:hover { background:rgba(255,255,255,.05); color:#fff; }
body.dash .ax-create { background:var(--ax-fill); color:#fff; font-size:14px; }
body.dash .ax-create:hover { background:var(--ax-fill); filter:brightness(1.1); }
body.dash .ax-dot {
    position:absolute; top:4px; right:3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; color:#fff; background:var(--ax-fill); border:2px solid var(--ax-bg);
}
body.dash .ax-lang img, body.dash .ax-flag { width:20px; height:15px; border-radius:3px; object-fit:cover; display:block; }
body.dash .ax-lang { font-size:11px; font-weight:700; }
body.dash .ax-userbtn {
    display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 9px 0 3px; margin-left:4px; border-radius:11px;
    background:transparent; border:1px solid var(--ax-line-2); color:var(--ax-text-3); font-size:10px; cursor:pointer;
}
body.dash .ax-userbtn:hover { border-color:rgba(255,255,255,.22); color:var(--ax-text); }
/* acilir menuler — v249'dan beri iki panelde ortak (body.dash, §3du) */
body.dash .ax-dd { position:relative; }
body.dash .ax-dd-menu {
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:80; min-width:230px; padding:6px;
    border-radius:12px; background:var(--ax-elev); border:1px solid var(--ax-line-2);
    box-shadow:0 22px 48px -16px rgba(0,0,0,.75);
}
body.dash .ax-dd.is-open .ax-dd-menu { display:block; }
/* menusu acik dugme basili gorunur */
body.dash .ax-dd-btn[aria-expanded="true"] { background:rgba(255,255,255,.07); color:#fff; border-color:var(--ax-line-2); }
body.dash .ax-create[aria-expanded="true"] { background:var(--ax-fill); filter:brightness(1.1); }
body.dash .ax-dd-menu a {
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
    font-size:13px; color:var(--ax-text); text-decoration:none;
}
body.dash .ax-dd-menu a > i { width:16px; text-align:center; color:var(--ax-text-3); }
body.dash .ax-dd-menu a:hover, body.dash .ax-dd-menu a:focus-visible { background:rgba(255,255,255,.06); outline-offset:-2px; }
body.dash .ax-dd-menu a.is-active { color:#fff; }
body.dash .ax-dd-head {
    display:block; padding:6px 10px 8px; font-family:var(--ax-display); font-size:10px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ax-text-3);
}
body.dash .ax-dd-check { margin-left:auto; color:var(--ax-acc); }
body.dash .ax-dd-user { padding:8px 10px 11px; margin-bottom:6px; border-bottom:1px solid var(--ax-line); line-height:1.35; }
body.dash .ax-dd-user strong { display:block; font-size:13.5px; color:#fff; }
body.dash .ax-dd-user small { font-size:12px; color:var(--ax-text-3); }
/* yonetimde hesabin rolu (Admin / Staff) — eskiden logonun yaninda etiketti (v258) */
body.dash .ax-dd-role { display:block; margin-top:5px; font-size:11px; font-weight:600; color:var(--ax-text-3); letter-spacing:.02em; }
body.dash .ax-dd-menu a.ax-dd-danger, body.dash .ax-dd-menu a.ax-dd-danger > i { color:#ff8b82; }

/* icerik alani */
body.adm-ui .ax-main { flex:1; width:100%; max-width:1600px; margin:0 auto; padding:30px 32px 64px; }
body.adm-ui .ax-main .db-content { padding:0; max-width:none; min-height:0; }
/* yonetimde istenirse kayan bant — kucuk, ust cubugun altinda */
body.adm-ui .ax-body > .sb-marquee, body.adm-ui .ax-body > .db-marquee { margin:0; }

/* ---------------------------------------------------------------------
   KOMUT PALETI (Ctrl+K)
   --------------------------------------------------------------------- */
body.adm-ui .ax-pal { position:fixed; inset:0; z-index:300; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; }
body.adm-ui .ax-pal[hidden] { display:none; }
body.adm-ui .ax-pal-backdrop { position:absolute; inset:0; background:rgba(5,6,9,.68); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
body.adm-ui .ax-pal-box {
    position:relative; width:min(640px, 100%); overflow:hidden; border-radius:16px;
    background:var(--ax-elev); border:1px solid var(--ax-line-2); box-shadow:0 34px 90px -24px rgba(0,0,0,.85);
}
body.adm-ui .ax-pal-in { display:flex; align-items:center; gap:12px; height:58px; padding:0 16px; border-bottom:1px solid var(--ax-line); color:var(--ax-text-3); }
body.adm-ui .ax-pal-in:focus-within { border-bottom-color:rgba(var(--ax-acc-rgb),.6); }
body.adm-ui .ax-pal-in input { flex:1; min-width:0; height:100%; background:none; border:0; outline:none; color:#fff; font:inherit; font-size:15.5px; }
body.adm-ui .ax-pal-in input::placeholder { color:var(--ax-text-3); }
body.adm-ui .ax-pal-list { max-height:min(420px, 56vh); overflow-y:auto; padding:6px 8px 8px; }
body.adm-ui .ax-pal-head {
    padding:10px 10px 6px; font-family:var(--ax-display); font-size:10px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ax-text-3);
}
body.adm-ui .ax-pal-opt {
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
    color:var(--ax-text); font-size:13.5px; text-decoration:none;
}
body.adm-ui .ax-pal-opt > i { width:18px; text-align:center; color:var(--ax-text-3); }
body.adm-ui .ax-pal-opt .l { flex-shrink:0; }
body.adm-ui .ax-pal-opt .p { margin-left:auto; min-width:0; max-width:48%; font-size:12px; color:var(--ax-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.adm-ui .ax-pal-opt[aria-selected="true"] { background:rgba(var(--ax-acc-rgb),.14); }
body.adm-ui .ax-pal-opt[aria-selected="true"] > i { color:var(--ax-acc); }
body.adm-ui .ax-pal-none { padding:30px 16px; text-align:center; font-size:13px; color:var(--ax-text-3); }
body.adm-ui .ax-pal-foot { display:flex; gap:18px; padding:10px 16px; border-top:1px solid var(--ax-line); font-size:11.5px; color:var(--ax-text-3); }
body.adm-ui .ax-pal-foot kbd { margin-right:3px; }
html.ax-pal-open body.adm-ui { overflow:hidden; }

/* ---------------------------------------------------------------------
   SAYFA BASLIGI (adm_page_head) — sayfa basina TEK baslik
   --------------------------------------------------------------------- */
body.adm-ui .ax-main .db-pagehead {
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin:0 0 26px; padding:0; background:none; border:0; box-shadow:none;
}
body.adm-ui .ax-main .db-pagehead::before, body.adm-ui .ax-main .db-pagehead::after { display:none; }
body.adm-ui .ax-main .db-pagehead .db-h1 {
    display:flex; align-items:center; gap:14px; margin:0; font-family:var(--ax-display); font-size:26px; font-weight:600;
    letter-spacing:.01em; line-height:1.15; color:#fff; text-transform:none;
}
body.adm-ui .ax-main .db-pagehead .db-h1 > i {
    width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; font-size:16px; color:var(--ax-acc); background:rgba(var(--ax-acc-rgb),.12);
    border:1px solid rgba(var(--ax-acc-rgb),.22); box-shadow:none;
}
body.adm-ui .ax-main .db-pagehead .db-sub { margin:8px 0 0 54px; max-width:720px; font-size:13.5px; line-height:1.55; color:var(--ax-text-2); }
body.adm-ui .ax-main .adm-pageacts { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   BILESENLER
   --------------------------------------------------------------------- */
/* kartlar */
body.adm-ui .db-panel {
    background:var(--ax-surface); border:1px solid var(--ax-line); border-radius:var(--ax-r);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 14px 34px -26px rgba(0,0,0,.9);
    margin-bottom:20px;
}
body.adm-ui .db-panel-head {
    min-height:54px; gap:10px; padding:12px 20px; background:none; border-bottom:1px solid var(--ax-line);
}
body.adm-ui .db-panel-head::before, body.adm-ui .db-panel-head::after { display:none; }
body.adm-ui .db-panel-head h4 {
    display:flex; align-items:center; gap:8px; margin:0; font-family:var(--ax-font); font-size:14px; font-weight:600;
    letter-spacing:0; text-transform:none; color:var(--ax-text); text-shadow:none;
}
body.adm-ui .db-panel-head .sb-link { text-shadow:none; }
body.adm-ui .db-panel-body { padding:20px; }
body.adm-ui .db-panel-body.flush { padding:0; }
body.adm-ui .db-pill {
    display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:10px; font-size:11px; font-weight:600;
    font-variant-numeric:tabular-nums; color:var(--ax-text-2); background:rgba(255,255,255,.07); border:0;
}
/* istatistik kartlari */
body.adm-ui .db-stats { grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-bottom:22px; }
body.adm-ui .db-stat {
    min-height:0; padding:18px 18px 16px; border-radius:var(--ax-r); background:var(--ax-surface);
    border:1px solid var(--ax-line); box-shadow:none;
}
body.adm-ui .db-stat:hover { transform:none; box-shadow:none; border-color:var(--ax-line-2); }
body.adm-ui .db-stat-top { margin-bottom:14px; }
body.adm-ui .db-stat .ic { width:34px; height:34px; border-radius:10px; font-size:14px; box-shadow:none; }
body.adm-ui .db-stat .val { font-family:var(--ax-display); font-size:26px; font-weight:600; letter-spacing:0; text-shadow:none; font-variant-numeric:tabular-nums; }
body.adm-ui .db-stat .lbl { margin-top:6px; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ax-text-3); text-shadow:none; }
/* gorselli KPI kartlari: satis kimligi korunur ama SESSIZ — gorsel sagda,
   rakam duz yuzeyde (Appearance'ta gorsel tercihleri aynen gecerli) */
body.adm-ui .db-stat.has-img { border-color:var(--ax-line); }
body.adm-ui .db-stat.has-img::before {
    left:38%; transform:none; opacity:.55;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%);
}
body.adm-ui .db-stat.has-img:hover::before { transform:none; }
body.adm-ui .db-stat.has-img::after { background:linear-gradient(90deg, var(--ax-surface) 34%, rgba(18,20,25,.72)); }
body.adm-ui .db-stat.has-img .val, body.adm-ui .db-stat.has-img .lbl { text-shadow:none; }
body.adm-ui .db-stat.has-img .lbl { color:var(--ax-text-2); }

/* tablolar */
body.adm-ui .db-table { border-collapse:separate; border-spacing:0; font-size:13px; }
body.adm-ui .db-table th {
    padding:11px 14px; background:rgba(255,255,255,.018); border-bottom:1px solid var(--ax-line);
    font-family:var(--ax-font); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ax-text-3); white-space:nowrap;
}
body.adm-ui .db-table td { padding:12px 14px; border-bottom:1px solid var(--ax-line); color:var(--ax-text-2); font-size:13px; font-variant-numeric:tabular-nums; }
body.adm-ui .db-table tbody tr:last-child td { border-bottom:0; }
body.adm-ui .db-table tbody tr:hover td { background:rgba(255,255,255,.022); }
body.adm-ui .db-table td b, body.adm-ui .db-table td strong { color:var(--ax-text); font-weight:600; }
body.adm-ui .db-table code { font-family:var(--ax-mono); font-size:11.5px; }
/* genis tablolar yatay kayar, kirpilmaz (siparisler 12 sutun) */
body.adm-ui .db-panel-body.flush { overflow-x:auto; }
body.adm-ui .db-table td.adm-code { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--ax-mono); font-size:11.5px; color:var(--ax-text-2); }

/* formlar */
body.adm-ui .db-lbl {
    display:block; margin:16px 0 7px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ax-text-2);
}
body.adm-ui .db-input, body.adm-ui .db-select, body.adm-ui .db-textarea {
    min-height:40px; padding:9px 12px; border-radius:var(--ax-r-sm); background:var(--ax-well);
    border:1px solid var(--ax-line-2); color:var(--ax-text); font-family:inherit; font-size:13.5px; box-shadow:none;
    transition:border-color .15s, box-shadow .15s;
}
body.adm-ui textarea.db-input, body.adm-ui .db-textarea { min-height:96px; line-height:1.5; }
body.adm-ui .db-input:hover, body.adm-ui .db-select:hover { border-color:rgba(255,255,255,.19); }
body.adm-ui .db-input:focus, body.adm-ui .db-select:focus, body.adm-ui .db-textarea:focus {
    outline:none; border-color:rgba(var(--ax-acc-rgb),.75); box-shadow:0 0 0 3px rgba(var(--ax-acc-rgb),.22);
}
body.adm-ui .db-input::placeholder { color:var(--ax-text-3); opacity:1; }
body.adm-ui .db-input[readonly] { opacity:.65; }
body.adm-ui input[type="checkbox"], body.adm-ui input[type="radio"] { accent-color:var(--ax-acc); }
body.adm-ui .sb-note { font-size:12px; line-height:1.55; color:var(--ax-text-3); }
body.adm-ui .sb-link { color:var(--ax-acc); }

/* dugmeler: birincil = aksan dolgusu, ikincil = cizgili */
body.adm-ui .sb-btn {
    min-height:38px; padding:0 16px; gap:8px; border-radius:var(--ax-r-sm); font-family:inherit; font-size:13px; font-weight:600;
    letter-spacing:0; background:var(--ax-fill); border:1px solid transparent; color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16); transition:filter .15s, background .15s, border-color .15s;
}
body.adm-ui .sb-btn i { color:inherit; font-size:12.5px; }
body.adm-ui .sb-btn:hover { background:var(--ax-fill); border-color:transparent; filter:brightness(1.1); }
body.adm-ui .sb-btn.ghost {
    background:rgba(255,255,255,.03); border-color:var(--ax-line-2); color:var(--ax-text) !important; box-shadow:none;
}
body.adm-ui .sb-btn.ghost i { color:var(--ax-text-3); }
body.adm-ui .sb-btn.ghost:hover { filter:none; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); }
body.adm-ui .sb-btn.ghost:hover i { color:var(--ax-text); }
body.adm-ui .sb-btn.sm { min-height:32px; padding:0 12px; font-size:12px; }
body.adm-ui .sb-btn.xs { min-height:28px; padding:0 10px; font-size:11.5px; }

/* durum rozetleri */
body.adm-ui .db-badge {
    height:22px; padding:0 9px; gap:6px; border-radius:11px; font-size:11px; font-weight:600; letter-spacing:.01em;
    border:1px solid transparent;
}
body.adm-ui .db-badge::before { width:6px; height:6px; }
body.adm-ui .db-badge.paid, body.adm-ui .db-badge.active, body.adm-ui .db-badge.open,
body.adm-ui .db-badge.completed, body.adm-ui .db-badge.answered { border-color:rgba(var(--sb-ok-rgb),.24); }
body.adm-ui .db-badge.pending, body.adm-ui .db-badge.unpaid { background:rgba(var(--sb-warn-rgb),.12); color:var(--sb-warn); border-color:rgba(var(--sb-warn-rgb),.26); }
body.adm-ui .db-badge.cancelled, body.adm-ui .db-badge.refunded, body.adm-ui .db-badge.high { border-color:rgba(var(--sb-bad-rgb),.26); }
body.adm-ui .db-badge.closed, body.adm-ui .db-badge.normal, body.adm-ui .db-badge.disabled {
    background:rgba(255,255,255,.06); color:var(--ax-text-2); border-color:var(--ax-line-2);
}

/* uyarilar (§3eb) — kullanici: "bilgilendirme kutulari yapay zekasal duruyor, modern
   tonlarda yap". Renkli cerceve + renkli zemin YOK: notr grafit yuzey, ince notr cizgi.
   Anlam yalnizca ikon rozetinde ve soldan cok hafif bir ton geciside (--al). Govde
   metni ikincil gri, vurgu (b/strong) beyaz. .note = bilgi (yetkili sinirlari gibi). */
body.adm-ui .db-alert {
    --al: var(--acc, #8778ff); --al-rgb: var(--acc-rgb, 135,120,255);
    align-items:flex-start; gap:12px; margin-bottom:18px; padding:12px 14px;
    border-radius:var(--ax-r-sm); font-size:13px; line-height:1.55;
    background:linear-gradient(90deg, rgba(var(--al-rgb),.06), rgba(var(--al-rgb),0) 42%), var(--ax-surface);
    border:1px solid var(--ax-line); color:var(--ax-text-2);
}
body.adm-ui .db-alert > i {
    width:26px; height:26px; flex-shrink:0; margin-top:-2px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12.5px; color:var(--al); background:rgba(var(--al-rgb),.12);
}
body.adm-ui .db-alert b, body.adm-ui .db-alert strong { color:var(--ax-text); font-weight:600; }
body.adm-ui .db-alert a:not(.sb-btn) { color:var(--ax-text); text-underline-offset:2px; text-decoration-color:rgba(var(--al-rgb),.55); }
body.adm-ui .db-alert.ok   { --al:var(--sb-ok);   --al-rgb:var(--sb-ok-rgb); }
body.adm-ui .db-alert.warn { --al:var(--sb-warn); --al-rgb:var(--sb-warn-rgb); }
body.adm-ui .db-alert.err  { --al:var(--sb-bad);  --al-rgb:var(--sb-bad-rgb); border-color:rgba(var(--sb-bad-rgb),.22); }
body.adm-ui .db-alert.note { --al:var(--acc, #8778ff); --al-rgb:var(--acc-rgb, 135,120,255); }

/* bos durum */
body.adm-ui .db-empty { padding:40px 20px; color:var(--ax-text-3); }
body.adm-ui .db-empty .ec {
    width:46px; height:46px; margin:0 auto 12px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.04); border:1px solid var(--ax-line); color:var(--ax-text-3); font-size:18px; box-shadow:none;
}
body.adm-ui .db-empty p { font-size:13px; }

/* hizli baglantilar */
body.adm-ui .db-quick-link {
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--ax-r-sm);
    background:var(--ax-well); border:1px solid var(--ax-line); color:var(--ax-text); font-size:13px; text-decoration:none;
}
body.adm-ui .db-quick-link:hover { border-color:var(--ax-line-2); background:rgba(255,255,255,.04); }
body.adm-ui .db-quick-link i { color:var(--ax-acc); width:16px; text-align:center; }

/* alt gezinme (segment kontrol) */
body.adm-ui .adm-subnav {
    display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin-bottom:20px; border-radius:12px;
    background:var(--ax-well); border:1px solid var(--ax-line);
}
body.adm-ui .adm-subnav a {
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9px; border:1px solid transparent;
    font-size:13px; font-weight:500; color:var(--ax-text-2); text-decoration:none; background:none;
}
body.adm-ui .adm-subnav a:hover { color:var(--ax-text); background:rgba(255,255,255,.04); }
body.adm-ui .adm-subnav a.is-active { color:#fff; background:var(--ax-surface-2); border-color:var(--ax-line-2); box-shadow:0 1px 2px rgba(0,0,0,.4); }
body.adm-ui .adm-subnav a.is-active i { color:var(--ax-acc); }

/* ---------------------------------------------------------------------
   DARALTILMIS KENAR CUBUGU (masaustu, 72px ray)
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
    html.ax-collapsed body.adm-ui { --ax-side-w:72px; }
    html.ax-collapsed body.adm-ui .ax-brand { justify-content:center; padding:0; }
    html.ax-collapsed body.adm-ui .ax-logo,
    html.ax-collapsed body.adm-ui .ax-t,
    html.ax-collapsed body.adm-ui .ax-subtoggle,
    html.ax-collapsed body.adm-ui .ax-subitems,
    html.ax-collapsed body.adm-ui .ax-me-meta { display:none; }
    html.ax-collapsed body.adm-ui .ax-collapse { margin:0; }
    html.ax-collapsed body.adm-ui .ax-collapse i { transform:rotate(180deg); }
    html.ax-collapsed body.adm-ui .ax-nav { padding:12px 14px; overflow-x:visible; }
    html.ax-collapsed body.adm-ui .ax-label { height:1px; padding:0; margin:0 8px 10px; overflow:hidden; color:transparent; background:var(--ax-line); }
    html.ax-collapsed body.adm-ui .ax-link { justify-content:center; padding:0; gap:0; }
    html.ax-collapsed body.adm-ui .ax-link.is-active::before { left:-14px; }
    html.ax-collapsed body.adm-ui .ax-count {
        position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; font-size:9.5px; border:2px solid var(--ax-side);
    }
    html.ax-collapsed body.adm-ui .ax-me { flex-direction:column; padding:8px 0; gap:8px; background:none; border:0; }
    /* daraltilmis menude etiket ipucu (fare veya klavye odagi) */
    html.ax-collapsed body.adm-ui .ax-link[data-tip]:hover::after,
    html.ax-collapsed body.adm-ui .ax-link[data-tip]:focus-visible::after {
        content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); z-index:90;
        padding:6px 10px; border-radius:8px; white-space:nowrap; font-size:12.5px; font-weight:500; color:#fff;
        background:var(--ax-elev); border:1px solid var(--ax-line-2); box-shadow:0 10px 26px -10px rgba(0,0,0,.8); pointer-events:none;
    }
    html.ax-collapsed body.adm-ui .ax-nav { overflow:visible; }
}

/* ---------------------------------------------------------------------
   DAR EKRAN: kenar cubugu cekmece olur
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.adm-ui .ax-side { width:284px; transform:translateX(-100%); }
    html.ax-open body.adm-ui .ax-side { transform:none; box-shadow:24px 0 60px rgba(0,0,0,.6); }
    html.ax-open body.adm-ui .ax-scrim { display:block; position:fixed; inset:0; z-index:65; background:rgba(4,5,8,.6); }
    body.adm-ui .ax-body { margin-left:0; }
    body.adm-ui .ax-menu { display:inline-flex; margin-left:-8px; }
    body.adm-ui .ax-collapse { display:none; }
    body.adm-ui .ax-top { padding:0 18px; gap:10px; }
    body.adm-ui .ax-main { padding:24px 20px 56px; }
}
@media (max-width: 1180px) {
    body.dash .ax-ctx-item span { display:none; }
    body.dash .ax-ctx-item { padding:0 10px; }
    /* dar ekranda grup adi (Configuration vb.) duser, sayfa adi kalir */
    body.adm-ui .ax-crumb > span:first-child:not(.now),
    body.adm-ui .ax-crumb > span:first-child:not(.now) + i { display:none; }
}
@media (max-width: 640px) {
    /* telefonda sayfa basligi hemen altta — kirinti ve "siteyi goruntule" (paletten de acilir) gizli */
    body.adm-ui .ax-crumb, body.dash .ax-viewsite { display:none; }
    body.adm-ui .ax-search { width:38px; margin-left:auto; padding:0; justify-content:center; }
    body.adm-ui .ax-search span, body.adm-ui .ax-search kbd { display:none; }
    body.dash .ax-actions { gap:2px; }
    body.dash .ax-userbtn i { display:none; }
    body.dash .ax-userbtn { padding:0 3px; }
    body.adm-ui .ax-main { padding:20px 16px 48px; }
    body.adm-ui .ax-main .db-pagehead .db-h1 { font-size:21px; }
    body.adm-ui .ax-main .db-pagehead .db-sub { margin-left:0; }
    body.adm-ui .ax-pal { padding-top:8vh; }
    body.adm-ui .ax-pal-foot { display:none; }
}

/* ---------------------------------------------------------------------
   SAGDAN SOLA (Arapca secilirse)
   --------------------------------------------------------------------- */
html[dir="rtl"] body.adm-ui .ax-side { left:auto; right:0; border-right:0; border-left:1px solid var(--ax-line); }
html[dir="rtl"] body.adm-ui .ax-body { margin-left:0; margin-right:var(--ax-side-w); }
html[dir="rtl"] body.adm-ui .ax-link.is-active::before { left:auto; right:-12px; border-radius:3px 0 0 3px; }
html[dir="rtl"] body.adm-ui .ax-subitems { margin:4px 19px 8px 0; padding:0 12px 0 0; border-left:0; border-right:1px solid var(--ax-line-2); }
html[dir="rtl"] body.dash .ax-dd-menu { right:auto; left:0; }
html[dir="rtl"] body.adm-ui .ax-search { margin-left:0; margin-right:auto; }
@media (max-width: 1023px) {
    html[dir="rtl"] body.adm-ui .ax-side { transform:translateX(100%); }
    html[dir="rtl"].ax-open body.adm-ui .ax-side { transform:none; }
    html[dir="rtl"] body.adm-ui .ax-body { margin-right:0; }
}

/* ---------------------------------------------------------------------
   HAREKET — yalnizca "hareketi azalt" KAPALIYKEN (§9h)
   Tek sahnelenmis giris: icerik bloklari sirayla belirir. Surekli
   donen/parlayan hicbir sey yok.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    body.adm-ui .ax-side { transition:width .22s var(--ax-ease), transform .26s var(--ax-ease); }
    body.adm-ui .ax-body { transition:margin .22s var(--ax-ease); }
    body.adm-ui .ax-subtoggle i, body.adm-ui .ax-collapse i { transition:transform .2s var(--ax-ease); }
    body.adm-ui .ax-link, body.adm-ui .ax-sublink { transition:background .14s, color .14s; }
    body.adm-ui .ax-main .db-content > * { animation:axRise .42s var(--ax-ease) both; }
    body.adm-ui .ax-main .db-content > *:nth-child(2) { animation-delay:.04s; }
    body.adm-ui .ax-main .db-content > *:nth-child(3) { animation-delay:.08s; }
    body.adm-ui .ax-main .db-content > *:nth-child(4) { animation-delay:.12s; }
    body.adm-ui .ax-main .db-content > *:nth-child(5) { animation-delay:.16s; }
    body.adm-ui .ax-main .db-content > *:nth-child(n+6) { animation-delay:.2s; }
    body.dash .ax-dd.is-open .ax-dd-menu { animation:axPop .16s var(--ax-ease); }
    body.adm-ui .ax-pal:not([hidden]) .ax-pal-box { animation:axPop .18s var(--ax-ease); }
    body.adm-ui .ax-pal:not([hidden]) .ax-pal-backdrop { animation:axFade .18s ease; }
    @keyframes axRise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
    @keyframes axPop  { from { opacity:0; transform:translateY(-4px) scale(.985); } to { opacity:1; transform:none; } }
    @keyframes axFade { from { opacity:0; } to { opacity:1; } }
}

/* =====================================================================
   PANEL ORTAK UST CUBUK + MUSTERI TIPOGRAFISI — v249 / §3du
   ---------------------------------------------------------------------
   Kullanici yonetimdeki sag ust kumeyi (bildirim, bayrak, profil)
   begendi: "normal dashboarda da uygula; kullanici tarafinda da
   entegreli degisiklik yapmaya basla". Isaretleme tek kaynak
   (layout.php > sb_topbar_actions / sb_panel_switch), bilesen kurallari
   yukarida body.dash ile ortak. Burada musteri panelinin token'lari:
   renkler TEMANIN (koyu / GTA VI).
   YAZI TIPI DEGISMEZ — kullanici karari (2026-09-30): "yazi tipini
   degistirme". Kume de musteri panelinin kendi yazisini (body.dash,
   Inter/Segoe yigini) kullanir; Instrument Sans yalnizca yonetimde
   yuklenir. Basliklara/rakamlara yazi kurali EKLEMEYIN (37 olcer).
   KORUNAN (kullanicinin onceki acik kararlari): kenar cubugundaki GTA6
   dilimleri ve karartma oranlari, KPI kartlarinin fotograflari, panel
   basligi gorseli, kayan bant.
   ===================================================================== */
body.dash:not(.adm-ui) {
    --ax-font:    'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    --ax-display: var(--ax-font);
    --ax-acc:     var(--acc, #8778ff);
    --ax-acc-rgb: var(--acc-rgb, 135,120,255);
    --ax-fill:    var(--acc-fill, var(--acc, #6d5cff));
    --ax-bg:        var(--sb-bg);
    --ax-well:      var(--sb-surface);
    --ax-surface-2: var(--sb-surface-2);
    --ax-elev:      var(--sb-elevated);
    --ax-line:      var(--sb-line);
    --ax-line-2:    var(--sb-line2);
    --ax-text:      var(--sb-text);
    --ax-text-2:    var(--sb-text-2);
    --ax-text-3:    var(--sb-text-3);
}
body.dash:not(.adm-ui) .db-topbar-right { gap:0; }
body.dash:not(.adm-ui) .ax-userbtn { margin-left:6px; }
body.dash:not(.adm-ui) .ax-dd-menu a.ax-dd-admin, body.dash:not(.adm-ui) .ax-dd-menu a.ax-dd-admin > i { color:var(--sb-warn); }
body.dash:not(.adm-ui) .db-ctx-sep { display:none; }
@media (max-width: 640px) {
    body.dash:not(.adm-ui) .ax-ctx { display:none; }
}
/* kisa baslik + uzun aciklama: flex basligi daraltip "My Wallet"i iki satira
   boluyordu (onceden de vardi, yazi tipinden bagimsiz) — genis ekranda baslik daralmaz */
@media (min-width: 900px) {
    body.dash:not(.adm-ui) .db-pagehead > .db-h1 { flex-shrink:0; }
}
/* =====================================================================
   CUZDAN BOLUMU — GTA ARKA PLANLARI — v250 / §3dv
   ---------------------------------------------------------------------
   Kullanici: "Wallet kisminda tercih edilen arka planlar cok kotu,
   arka plani GTA ile ilgili yap." Cuzdan bolumu = dashboard.php?tab=wallet
   + wallet-deposit.php (ikisi de dash_head(..., 'wallet') -> govdede
   .db-on-wallet). Gorseller yerel, yollar panel.css'e GORELI (§9h).
     - bakiye karti (.sb-wallet-widget, genel bakista da)  -> GTA V Los
       Santos gun batimi (panel-gta.webp) — kural yukarida, kartin blogunda
     - "Mevcut bakiye" kutusu (.sb-wd-balance)             -> ayni gorsel
     - panel basliklari (yalnizca cuzdan bolumunde)        -> GTA VI
       Vice City palmiyeleri (panel-gta6.webp)
   Metin kontrasti: ortu metnin oldugu solda koyu (%90+), gorsel sagda
   gorunur — kartla ayni kural. Yazi tipine dokunulmadi (§3du).
   ===================================================================== */
/* panel basliklari: iki temada da (gta6 temasinin gradyan kuralini ezer —
   :root + :not() ile ozgulluk yuksek, dosyada da sonra) */
:root body.dash.db-on-wallet:not(.is-admin-ctx) .db-panel-head {
    background:
        linear-gradient(90deg, rgba(17,12,26,.93) 0%, rgba(17,12,26,.80) 50%, rgba(17,12,26,.42) 100%),
        url('../../images/background/panel-gta6.webp') center 28% / cover no-repeat;
}
:root body.dash.db-on-wallet:not(.is-admin-ctx) .db-panel-head h4 { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); }

/* "Mevcut bakiye" kutusu — kucuk cuzdan karti */
.sb-wd-balance {
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:16px 18px; margin-bottom:20px; border-radius:11px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.sb-wd-balance::before {
    content:""; position:absolute; inset:0; z-index:-2;
    background:url('../../images/background/panel-gta.webp') center 64% / cover no-repeat;
    filter:saturate(.9);
}
.sb-wd-balance::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, rgba(16,17,25,.92) 0%, rgba(16,17,25,.82) 45%, rgba(16,17,25,.45) 100%);
}

/* Yukleme sayfasi iki sutunu (form | bonus dilimleri) — oran eskiden satir ici
   stildeydi ve 900px alti tek sutun kuralini eziyordu: telefonda iki sutun
   yan yana sikisip tasiyordu. Simdi siniftan, dar ekranda tek sutun. */
.db-grid-2.sb-wd-grid { grid-template-columns:1.2fr 1fr; gap:24px; align-items:flex-start; }
@media (max-width:900px) { .db-grid-2.sb-wd-grid { grid-template-columns:1fr; } }
/* Sayfa basligi (baslik | aciklama yan yana): telefonda aciklama alta iner,
   yoksa 375px genislikte iki dar sutun olup kelime kelime kiriliyordu. */
@media (max-width: 640px) {
    body.dash:not(.adm-ui) .db-pagehead { flex-wrap:wrap; }
    body.dash:not(.adm-ui) .db-pagehead > .db-sub { flex-basis:100%; }
}

/* Telefonda kartlar alt alta diziliyor ve metin TUM genislige yayiliyor:
   yatay ortunun acik sag ucu bakiye rakaminin altina dusmesin diye
   ortu dar ekranda yukaridan asagi ve her yerde koyu. */
@media (max-width: 640px) {
    .sb-wallet-widget::after, .sb-wd-balance::after {
        background:linear-gradient(180deg, rgba(16,17,25,.80) 0%, rgba(16,17,25,.90) 60%, rgba(16,17,25,.94) 100%);
    }
    :root body.dash.db-on-wallet:not(.is-admin-ctx) .db-panel-head {
        background:
            linear-gradient(90deg, rgba(17,12,26,.92) 0%, rgba(17,12,26,.70) 100%),
            url('../../images/background/panel-gta6.webp') center 28% / cover no-repeat;
    }
}
/* =====================================================================
   CANLI DESTEK ODEME KUTUSU + FATURA DURUM NOTU — v251 / §3dw
   ---------------------------------------------------------------------
   render_payment_info(): yontem "canli destege yonlendir" modundaysa ya
   da gercek adresi yoksa adres yerine admin'in mesaji + dugme. Kutu
   talimat kutusuyla (.sb-co-inst) ayni ailede; yalnizca ikon/kenar tonu
   farkli ki musteri "burada adres yok, destekle konusacagim" diye okusun.
   invoice_status_note(): iptal / iade faturasi "odendi" yesiliyle degil,
   notr metin rengiyle (.rc-off) yazilir.
   ===================================================================== */
.sb-co-inst.sb-pay-support { border-color:rgba(var(--acc-rgb,135,120,255),.34); }
.sb-co-inst.sb-pay-support .hd i { margin-right:2px; }
.sb-co-inst .sb-pay-support-btn { display:inline-flex; align-items:center; gap:8px; }
.sb-receipt .rc-off { color:var(--sb-text-2,#cfd2e0); font-size:13.5px; }
/* Yonetim > Payment settings: liste | duzenleyici. Oran eskiden satir ici
   stildeydi ve dar ekranda tek sutun kuralini eziyordu (§9h) — 450px'te
   duzenleyici ~120px'e sikisiyordu (olculdu). */
.db-grid-2.sb-pm-grid { grid-template-columns:1.25fr 1fr; gap:24px; align-items:flex-start; }
@media (max-width:1100px) { .db-grid-2.sb-pm-grid { grid-template-columns:1fr; } }
/* =====================================================================
   YETKILILER EKRANI — v252 / §3dx   (admin.php?tab=staff, yalnizca sahip)
   ---------------------------------------------------------------------
   Liste | form. Oran siniftan (§9h: satir ici oran @media'yi ezer).
   "Sistem ve guvenlik" yetkisi neredeyse tam yetki — uyari tonuyla ayrisir.
   ===================================================================== */
.db-grid-2.sb-staff-grid { grid-template-columns:1.25fr 1fr; gap:24px; align-items:flex-start; }
@media (max-width:1100px) { .db-grid-2.sb-staff-grid { grid-template-columns:1fr; } }
.sb-staff-chip { display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600;
                 color:var(--ax-text,#e6e6ef); background:rgba(var(--acc-rgb,135,120,255),.14); border:1px solid rgba(var(--acc-rgb,135,120,255),.28); }
.sb-staff-chip.is-risky { background:rgba(255,159,10,.12); border-color:rgba(255,159,10,.35); color:var(--sb-warn,#ff9f0a); }
.sb-staff-presets { display:flex; flex-wrap:wrap; gap:8px; }
.sb-staff-perm { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-top:6px; border-radius:9px; cursor:pointer;
                 border:1px solid var(--line,rgba(255,255,255,.09)); background:#0f1016; }
.sb-staff-perm input { margin-top:3px; width:16px; height:16px; accent-color:var(--acc,#8778ff); flex-shrink:0; }
.sb-staff-perm b { color:#fff; font-size:13px; font-weight:600; }
.sb-staff-perm small { color:var(--mut,#9a9aa8); font-size:11.5px; line-height:1.45; }
.sb-staff-perm.is-risky { border-color:rgba(255,159,10,.35); }
.sb-staff-perm.is-risky input { accent-color:var(--sb-warn,#ff9f0a); }
.sb-staff-perm:has(input:checked) { border-color:rgba(var(--acc-rgb,135,120,255),.45); background:rgba(var(--acc-rgb,135,120,255),.06); }
a.sb-staff-badge { text-decoration:none; }
/* =====================================================================
   GUNCELLEMELER EKRANI — v254 / §3dz (System & Security > Updates)
   ===================================================================== */
.db-grid-2.sb-upd-grid { grid-template-columns:1fr 1fr; gap:24px; align-items:flex-start; }
@media (max-width:1100px) { .db-grid-2.sb-upd-grid { grid-template-columns:1fr; } }
.sb-upd-run .sb-btn[disabled] { opacity:.45; cursor:not-allowed; }
.sb-upd-grid .db-mini b, .sb-upd-report .db-mini b { text-align:right; overflow-wrap:anywhere; }
.sb-upd-list code, .sb-upd-pending code { font-size:11.5px; }
/* =====================================================================
   MUSTERI BAGLANTISI — v256 / §3eb (adm_customer_link)
   Listede sakin (metin rengi, ince kesikli alt cizgi); uzerine gelince
   aksan. Siparis/fatura sayfalarinda da (yonetim kabugu disinda) calisir.
   ===================================================================== */
body a.adm-cust, body span.adm-cust { color:var(--ax-text, #eceef3); }   /* body.dash a { color:inherit } (0,1,2) ezmesin — ayni ozgulluk, dosyada sonra */
body a.adm-cust { text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.22); transition:color .15s ease, border-color .15s ease; }
body a.adm-cust:hover, body a.adm-cust:focus-visible { color:var(--acc, #8778ff); border-bottom-color:currentColor; }

/* =====================================================================
   FATURA DUZENLEYICI (v258, §3ed) — /admin/invoices/N
   Ana sutun kalemler + toplam, yan sutun durum / musteri / siparisler.
   Renkler yonetim tokenlarindan; renkli cerceve yok (§3eb kurali).
   ===================================================================== */
body.adm-ui .adm-inv { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
body.adm-ui .adm-inv-main, body.adm-ui .adm-inv-side { min-width:0; }
body.adm-ui .adm-inv-side .db-panel + .db-panel { margin-top:18px; }
body.adm-ui .adm-inv-lock { margin-left:auto; font-size:12px; color:var(--ax-text-3); }
body.adm-ui .adm-inv-table td { vertical-align:middle; }
body.adm-ui .adm-inv-table .db-input { min-width:0; width:100%; padding:7px 9px; font-size:13px; }
body.adm-ui .adm-inv-table .adm-inv-n { width:78px; text-align:right; }
body.adm-ui .adm-inv-table .adm-inv-amt { width:104px; text-align:right; }
body.adm-ui .adm-inv-table td:first-child { min-width:190px; }
body.adm-ui .adm-inv-table td:nth-child(4) .db-input { min-width:130px; }
body.adm-ui p.adm-inv-addhint { margin:0; padding:10px 16px 12px; }
body.adm-ui .adm-inv-table .adm-inv-add td { background:rgba(255,255,255,.015); }
body.adm-ui .adm-inv-table .adm-inv-add select + input { margin-top:6px; }
body.adm-ui .adm-inv-addhint, body.adm-ui .adm-inv-free, body.adm-ui .adm-inv-sub { font-size:11.5px; color:var(--ax-text-3); line-height:1.45; }
body.adm-ui .adm-inv-srv { font-size:12px; color:var(--ax-text-3); word-break:break-all; }
body.adm-ui .adm-inv-none { text-align:center; color:var(--ax-text-3); padding:22px; }
body.adm-ui .adm-inv-rm { text-align:center; width:70px; }
body.adm-ui .adm-inv-rmbox { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--ax-text-3); }
body.adm-ui .adm-inv-rmbox:has(input:checked) { color:#ff8b82; }
body.adm-ui .adm-inv-line:has(.adm-inv-rmbox input:checked) td:not(.adm-inv-rm) { opacity:.45; }
body.adm-ui .adm-inv-foot { display:flex; gap:24px; padding:18px 20px; border-top:1px solid var(--ax-line); flex-wrap:wrap; }
body.adm-ui .adm-inv-fields { flex:1 1 360px; min-width:0; }
body.adm-ui .adm-inv-row { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
body.adm-ui .adm-inv-row > div { flex:1 1 160px; }
body.adm-ui .adm-inv-check { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:var(--ax-text-2, #c9ccd6); cursor:pointer; }
body.adm-ui .adm-inv-sum { flex:0 0 260px; align-self:flex-end; }
body.adm-ui .adm-inv-sum .row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--ax-text-3); }
body.adm-ui .adm-inv-sum .row b { color:var(--ax-text, #eceef3); font-weight:600; }
body.adm-ui .adm-inv-sum .row.is-total { border-top:1px solid var(--ax-line); margin-top:4px; padding-top:10px; font-size:15px; color:var(--ax-text, #eceef3); }
body.adm-ui .adm-inv-sum .row.is-total b { font-size:18px; }
body.adm-ui .adm-inv-sum .sb-btn { margin-top:14px; }
body.adm-ui .adm-inv-status { display:flex; gap:8px; }
body.adm-ui .adm-inv-status .db-input { flex:1; }
body.adm-ui .adm-inv-meta { margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:13px; }
body.adm-ui .adm-inv-meta dt { color:var(--ax-text-3); font-weight:500; }
body.adm-ui .adm-inv-meta dd { margin:0; min-width:0; }
body.adm-ui .adm-inv-meta dd small { display:block; color:var(--ax-text-3); font-size:12px; overflow-wrap:anywhere; }
body.adm-ui .adm-inv-ord { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--ax-line); font-size:13px; }
body.adm-ui .adm-inv-ord .nm { flex:1; min-width:0; color:var(--ax-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.adm-ui .adm-inv-tip { margin:12px 0 0; font-size:12px; line-height:1.5; }
body.adm-ui .adm-inv-lines .db-panel-head h4 i { color:var(--ax-text-3); margin-right:6px; }
@media (max-width: 1180px) { body.adm-ui .adm-inv { grid-template-columns:1fr; } }
body.dash .adm-inv-lsum { margin-top:3px; font-size:11.5px; color:var(--ax-text-3, #8a8fa0); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =====================================================================
   OYUNCU AYARLARI + PAKET YUKSELTME — siparis konsolu (v258, §3ee)
   Musteri paneli: yazi tipine dokunulmaz (§3du); tokenlar --sb-*.
   ===================================================================== */
body.dash .sb-svc-set { display:flex; flex-direction:column; gap:8px; max-width:560px; }
body.dash .sb-svc-set .db-lbl { margin:10px 0 2px; display:flex; justify-content:space-between; align-items:baseline; }
body.dash .sb-svc-setval { font-size:12.5px; color:var(--sb-text-3); font-weight:500; }
body.dash .sb-svc-setval b { color:var(--sb-text-strong, #fff); font-size:15px; }
body.dash .sb-svc-range { display:flex; align-items:center; gap:12px; }
body.dash .sb-svc-range input[type="range"] { flex:1; accent-color:var(--acc, #8778ff); }
body.dash .sb-svc-range .db-input { width:96px; flex:0 0 96px; text-align:right; }
body.dash .sb-svc-hint, body.dash .sb-svc-setnote { margin:0; font-size:12px; color:var(--sb-text-3); line-height:1.5; }
body.dash .sb-svc-setnote { margin:-4px 0 12px; color:var(--sb-warn, #ff9f0a); }
body.dash .sb-svc-modes { display:flex; gap:10px; flex-wrap:wrap; }
body.dash .sb-svc-modes label { position:relative; cursor:pointer; }
body.dash .sb-svc-modes input { position:absolute; opacity:0; }
body.dash .sb-svc-modes span { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px;
    border:1px solid var(--sb-line); background:var(--sb-surface-3); font-size:13px; color:var(--sb-text-2); }
body.dash .sb-svc-modes input:checked + span { border-color:var(--acc, #8778ff); background:rgba(var(--acc-rgb,135,120,255),.1); color:var(--sb-text-strong, #fff); }
body.dash .sb-svc-modes input:focus-visible + span { outline:2px solid var(--acc, #8778ff); outline-offset:2px; }
body.dash .sb-svc-hours { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
body.dash .sb-svc-hours label span { display:block; font-size:11.5px; color:var(--sb-text-3); margin-bottom:4px; }
body.dash .sb-svc-set:has(input[name="mode"][value="always"]:checked) .sb-svc-hours { opacity:.45; }
body.dash .sb-svc-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sb-text-2); margin-top:6px; cursor:pointer; }
body.dash .sb-svc-set .sb-btn { align-self:flex-start; margin-top:10px; }
body.dash .sb-svc-ups { display:flex; flex-direction:column; gap:10px; max-width:560px; }
body.dash .sb-svc-up { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px;
    border:1px solid var(--sb-line); background:var(--sb-surface-3); }
body.dash .sb-svc-up b { font-size:14px; color:var(--sb-text-strong, #fff); min-width:110px; }
body.dash .sb-svc-up span { flex:1; font-size:12.5px; color:var(--sb-text-3); }
@media (max-width:640px) { body.dash .sb-svc-hours { grid-template-columns:1fr; } body.dash .sb-svc-up { flex-wrap:wrap; } }

/* Hizmet baslat — calisan servisler (yonetim, §3ee) */
body.adm-ui .adm-svc-qty { margin-left:6px; font-size:12px; color:var(--ax-text-3); font-weight:500; }
body.adm-ui .adm-svc-set { margin-top:6px; font-size:12px; color:var(--ax-text-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
body.adm-ui .adm-svc-set.is-new { color:var(--ax-text, #eceef3); }
body.adm-ui .adm-svc-meta { font-size:11.5px; color:var(--ax-text-3); }
body.adm-ui .adm-svc-act { min-width:230px; }
body.adm-ui .adm-svc-auto { font-size:12px; color:var(--ax-text-3); display:inline-flex; align-items:center; gap:6px; }
body.adm-ui .adm-svc-auto i { color:var(--sb-ok, #30d158); }
body.adm-ui .adm-svc-quick { display:flex; gap:4px; margin-bottom:6px; }
body.adm-ui .adm-svc-quick button { padding:3px 8px; border-radius:6px; border:1px solid var(--ax-line); background:transparent;
    color:var(--ax-text-3); font-size:11.5px; cursor:pointer; }
body.adm-ui .adm-svc-quick button:hover { color:var(--ax-text, #eceef3); border-color:rgba(255,255,255,.18); }
body.adm-ui .adm-svc-inrow { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ax-text-3); }
body.adm-ui .adm-svc-inrow .adm-numinput { width:84px; }
body.adm-ui .adm-svc-hint { margin-top:5px; font-size:11px; color:var(--ax-text-3); line-height:1.4; max-width:260px; }
body.adm-ui .adm-svc-foot { padding:11px 20px; border-top:1px solid var(--ax-line); font-size:12px; color:var(--ax-text-3); }
body.adm-ui .adm-svc-autoform { margin:0; }
body.adm-ui .adm-svc-toggle i { font-size:16px; }
body.adm-ui .adm-svc-toggle.is-on i { color:var(--sb-ok, #30d158); }

/* Talepler (v258, §3ef) — degisiklik talepleri + uygulanacak oyuncu ayarlari */
body.adm-ui .adm-req + .adm-req { margin-top:20px; }
body.adm-ui .adm-req .db-panel-head h4 i { color:var(--ax-text-3); margin-right:6px; }
body.adm-ui .adm-req-sub { font-size:11.5px; color:var(--ax-text-3); }
body.adm-ui .adm-req-type { color:var(--ax-text, #eceef3); font-weight:600; }
body.adm-ui .adm-req-diff { margin-top:3px; font-family:ui-monospace, Consolas, monospace; font-size:11.5px; color:var(--ax-text-3); }
body.adm-ui .adm-req-diff .was { text-decoration:line-through; opacity:.6; }
body.adm-ui .adm-req-diff .now { color:var(--sb-ok, #30d158); }
body.adm-ui .adm-req-form { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0; }
body.adm-ui .adm-req-form .db-input { width:200px; padding:6px 9px; font-size:12.5px; }

/* Misafir destek talebi sayfasi — ticket-guest.php (v258, §3eg). Tema iskeleti
   (page_head); tokenlar --sb-* (yedek degerli). */
.sb-gt { max-width:760px; margin:0 auto; }
.sb-gt-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.sb-gt-who { color:var(--sb-text-3, #8a8fa0); font-size:13px; }
.sb-gt-thread { display:flex; flex-direction:column; gap:12px; }
.sb-gt-msg { padding:14px 16px; border:1px solid var(--sb-line, rgba(255,255,255,.08)); border-radius:12px; background:var(--sb-surface-3, #15161d); }
.sb-gt-msg.is-staff { border-color:rgba(var(--acc-rgb,135,120,255),.35); background:rgba(var(--acc-rgb,135,120,255),.06); }
.sb-gt-meta { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--sb-text-3, #8a8fa0); margin-bottom:6px; }
.sb-gt-meta b { color:var(--sb-text-strong, #fff); }
.sb-gt-body { color:var(--sb-text-2, #c9ccd6); font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.sb-gt-sig { margin-top:10px; padding-top:8px; border-top:1px dashed var(--sb-line, rgba(255,255,255,.1)); font-size:12.5px; color:var(--sb-text-3, #8a8fa0); }
.sb-gt-form { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.sb-gt-form label { font-weight:600; color:var(--sb-text-strong, #fff); font-size:14px; }
.sb-gt-form textarea { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--sb-line, rgba(255,255,255,.12));
    background:var(--sb-surface-3, #15161d); color:var(--sb-text-strong, #fff); font:inherit; resize:vertical; }
.sb-gt-form textarea:focus-visible { outline:2px solid var(--acc, #8778ff); outline-offset:1px; }
.sb-gt-form .btn-main { align-self:flex-start; }
.sb-gt-note { color:var(--sb-text-3, #8a8fa0); font-size:12.5px; margin-top:10px; }
body.adm-ui .adm-tk-guest { background:rgba(255,255,255,.06); color:var(--ax-text-2, #c9ccd6); font-size:10.5px; }
body.dash .tk-guest-note { margin:10px 0 0; font-size:12px; color:var(--mut, #8a8fa0); line-height:1.5; }

/* =====================================================================
   CANLI DESTEK GUNCELLEMELERI (v258 F, §3eh) — js/live.js
   ---------------------------------------------------------------------
   Ust cubukta ses ac/kapa (.ax-sound; JS yoksa gizli), canli toast'in
   basligi/konusu/ozeti + "Ac" baglantisi, yeni mesaj hapi (.sb-live-pill;
   mobilde alt cubugun ustunde), kapanan talep notu. Yeni mesajin giris
   animasyonu gizli halden basladigi icin YALNIZCA no-preference icinde;
   listedeki yeni satirin kisa vurgusu hareket degil renk — her zaman.
   ===================================================================== */
body.dash .ax-sound[hidden] { display:none; }
body.dash .ax-sound.is-off { color:var(--ax-text-3); }
.sb-live-toast > span b { display:block; color:var(--sb-text-strong, #fff); font-weight:700; }
.sb-live-toast > span small { display:block; color:var(--sb-text-3, #8a8fa0); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-live-toast > span em { display:block; margin-top:2px; font-style:normal; color:var(--sb-text-2, #c9ccd6); font-size:12.5px; overflow-wrap:anywhere; }
.sb-toast .sb-toast-go {
    flex:0 0 auto; align-self:center; padding:5px 11px; border-radius:8px; font-size:12px; font-weight:700; text-decoration:none;
    color:#fff; background:rgba(var(--acc-rgb,135,120,255),.22); border:1px solid rgba(var(--acc-rgb,135,120,255),.42);
}
.sb-toast .sb-toast-go:hover { background:rgba(var(--acc-rgb,135,120,255),.34); }
.sb-toast .sb-toast-go:focus-visible, .sb-live-pill:focus-visible { outline:2px solid var(--acc, #8778ff); outline-offset:2px; }
.sb-live-pill {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:945;
    display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(var(--acc-rgb,135,120,255),.45); background:var(--sb-glass, rgba(20,20,26,.92));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    color:#fff; font:inherit; font-size:13px; font-weight:600; box-shadow:0 12px 28px -12px rgba(0,0,0,.7);
}
.sb-live-pill[hidden] { display:none; }
@media (max-width:991px) { .sb-live-pill { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); } }
.sb-live-closed { margin:20px 0 0; color:var(--mut, #9095a3); font-size:13.5px; }
.db-ticket.is-live-new { animation:sbLiveRow 2.4s ease-out 1; }
@keyframes sbLiveRow { from { background-color:rgba(var(--acc-rgb,135,120,255),.16); } to { background-color:transparent; } }
@media (prefers-reduced-motion: no-preference) {
    .tk-msg.is-live-new, .sb-gt-msg.is-live-new { animation:sbLiveIn .45s cubic-bezier(.16,1,.3,1) both; }
    @keyframes sbLiveIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
}

/* =====================================================================
   SATIS TRENDI v2 (.adm-tc) — SVG alan grafigi (v258 G, §3ei)
   ---------------------------------------------------------------------
   Kullanici: "satis trendi grafigini daha modern yap". Cubuklar yerine
   yumusak (monoton) egri + degrade dolgu + kesikli onceki donem; Gelir /
   Siparis gecisi radyo + CSS (JS yok); arti imleci, nokta ve tooltip :hover.
   SVG kap genisligine yayilir (preserveAspectRatio none); cizgi kalinligi
   vector-effect ile sabit. Cizim animasyonu gizli halden basladigi icin
   YALNIZCA no-preference icinde. Eski .adm-chart2 kurallari baska yerde
   kullanilirsa diye duruyor.
   ===================================================================== */
.sb-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.is-admin-ctx .adm-tc { position:relative; }
body.is-admin-ctx .adm-tc-radio { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
body.is-admin-ctx .adm-tc-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
body.is-admin-ctx .adm-tc-seg { display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid var(--a-line); }
body.is-admin-ctx .adm-tc-seg label {
    padding:5px 13px; border-radius:7px; cursor:pointer; font-size:var(--a-t-xs); font-weight:600; color:#8a8fa0;
    transition:background .16s var(--a-ease), color .16s var(--a-ease);
}
body.is-admin-ctx .adm-tc-seg label:hover { color:var(--sb-text-strong); }
body.is-admin-ctx #admTcRev:checked ~ .adm-tc-bar label[for="admTcRev"],
body.is-admin-ctx #admTcOrd:checked ~ .adm-tc-bar label[for="admTcOrd"] { color:var(--sb-text-strong); background:var(--sb-fill-2); box-shadow:inset 0 0 0 1px var(--a-line2); }
body.is-admin-ctx #admTcRev:focus-visible ~ .adm-tc-bar label[for="admTcRev"],
body.is-admin-ctx #admTcOrd:focus-visible ~ .adm-tc-bar label[for="admTcOrd"] { outline:2px solid var(--admin); outline-offset:2px; }
body.is-admin-ctx .adm-tc-legend { display:flex; gap:14px; font-size:var(--a-t-xs); color:#8a8fa0; }
body.is-admin-ctx .adm-tc-legend span { display:inline-flex; align-items:center; gap:6px; }
body.is-admin-ctx .adm-tc-legend i { display:inline-block; width:16px; height:0; border-top:2px solid var(--admin); }
body.is-admin-ctx .adm-tc-legend .is-prev i { border-top:2px dashed rgba(255,255,255,.34); }

body.is-admin-ctx .adm-tc-view { display:flex; gap:12px; height:250px; }
body.is-admin-ctx .adm-tc-view[data-m="ord"] { display:none; }
body.is-admin-ctx #admTcOrd:checked ~ .adm-tc-view[data-m="rev"] { display:none; }
body.is-admin-ctx #admTcOrd:checked ~ .adm-tc-view[data-m="ord"] { display:flex; }
body.is-admin-ctx .adm-tc-view .adm-yaxis { padding-bottom:22px; }
body.is-admin-ctx .adm-tc-plot { position:relative; flex:1; min-width:0; }
body.is-admin-ctx .adm-tc-grid, body.is-admin-ctx .adm-tc-hits { position:absolute; left:0; right:0; top:0; bottom:22px; }
body.is-admin-ctx .adm-tc-grid i { position:absolute; left:0; right:0; height:1px; background:var(--sb-fill-1); }
body.is-admin-ctx .adm-tc-grid i:first-child { background:var(--sb-fill-2); }
body.is-admin-ctx .adm-tc-svg {
    position:absolute; left:0; top:0; width:100%; height:calc(100% - 22px);
    overflow:visible; color:var(--admin); pointer-events:none;
}
body.is-admin-ctx .adm-tc-area { stroke:none; }   /* dolgu: SVG icindeki degrade (url(#admTcFill-*)) */
body.is-admin-ctx .adm-tc-line { fill:none; stroke:currentColor; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
body.is-admin-ctx .adm-tc-prev { fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.5; stroke-dasharray:5 5; }
body.is-admin-ctx .adm-tc-hits { display:flex; }
body.is-admin-ctx .adm-tc-hit { position:relative; flex:1; min-width:0; height:100%; cursor:crosshair; }
body.is-admin-ctx .adm-tc-hit::before {
    content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.16);
    opacity:0; transition:opacity .12s ease;
}
body.is-admin-ctx .adm-tc-dot {
    position:absolute; left:50%; bottom:var(--y); width:10px; height:10px; margin:0 0 -5px -5px; border-radius:50%;
    background:var(--admin); border:2px solid var(--ax-bg, #0f1014); box-shadow:0 0 0 3px rgba(var(--ax-acc-rgb, 135,120,255),.22);
    opacity:0; transition:opacity .12s ease;
}
body.is-admin-ctx .adm-tc-hit.is-current .adm-tc-dot { opacity:1; }
body.is-admin-ctx .adm-tc-hit:hover::before, body.is-admin-ctx .adm-tc-hit:hover .adm-tc-dot { opacity:1; }
body.is-admin-ctx .adm-tc-x {
    position:absolute; left:0; right:0; bottom:-19px; text-align:center; font-size:9.5px; color:#6a6e7e;
    font-variant-numeric:tabular-nums; white-space:nowrap;
}
body.is-admin-ctx .adm-tc-hit.is-current .adm-tc-x { color:var(--admin); font-weight:700; }
body.is-admin-ctx .adm-tc-tip {
    position:absolute; top:4px; left:calc(50% + 12px); z-index:6; pointer-events:none;
    display:flex; flex-direction:column; gap:4px; min-width:150px; padding:9px 11px; border-radius:var(--a-r-sm);
    background:rgba(10,12,18,.96); border:1px solid var(--a-line2); box-shadow:0 14px 30px -12px rgba(0,0,0,.9);
    font-size:var(--a-t-xs); color:#c3c7d4; white-space:nowrap;
    opacity:0; visibility:hidden; transition:opacity .12s ease, visibility .12s;
}
body.is-admin-ctx .adm-tc-hit.is-flip .adm-tc-tip { left:auto; right:calc(50% + 12px); }
body.is-admin-ctx .adm-tc-hit:hover .adm-tc-tip { opacity:1; visibility:visible; }
body.is-admin-ctx .adm-tc-tip b { color:var(--sb-text-strong); font-size:var(--a-t-sm); margin-bottom:2px; }
body.is-admin-ctx .adm-tc-tl { display:flex; justify-content:space-between; gap:14px; }
body.is-admin-ctx .adm-tc-tl strong { color:var(--sb-text-strong); font-weight:600; font-variant-numeric:tabular-nums; }
body.is-admin-ctx .adm-tc-tl.is-prev { padding-top:4px; border-top:1px solid var(--a-line); color:#8a8fa0; }
body.is-admin-ctx .adm-tc-tl em { font-style:normal; font-weight:700; margin-left:4px; }
body.is-admin-ctx .adm-tc-tl em.adm-up { color:var(--a-ok); }
body.is-admin-ctx .adm-tc-tl em.adm-down { color:var(--a-bad); }
@media (max-width:640px){
    body.is-admin-ctx .adm-tc-view { height:200px; }
    body.is-admin-ctx .adm-tc-view .adm-yaxis { width:50px; flex-basis:50px; font-size:8.5px; }
    body.is-admin-ctx .adm-tc-legend { display:none; }
}
@media (prefers-reduced-motion: no-preference) {
    body.is-admin-ctx .adm-tc-svg { animation:admTcReveal .9s cubic-bezier(.16,1,.3,1) both; }
    @keyframes admTcReveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
}