/* ══════════════════════════════════════════════════════════════════
   YÜZEY & TİPOGRAFİ YÜKSELTMESİ (24-surface.css) — EN SON YÜKLENİR

   TEŞHİS (2026-07-29):
   1. Açık tema soluktu: --surf #fff üstüne --bdr #dde1ee → kenarlıklar
      görünmüyor, paneller zeminden ayrışmıyor, her şey tek düzlemde.
   2. --font-display 'Space Grotesk' idi ama o font HİÇ YÜKLENMİYOR
      (Google Fonts bağlantısında yok) → sessizce Inter'e düşüyordu.
      Yani oyunun karakter fontu hiç devreye girmemişti.
   3. Sayılar çıplaktı; oran/pay duygusu yoktu.

   YAKLAŞIM: Tek tek panelleri yeniden yazmak yerine ORTAK TOKEN'ları
   yeniden ayarlıyoruz — her panel zaten --surf/--bdr/--txt/--muted
   okuduğu için tamamı birden yükseliyor. Düzen (spacing/layout) ve JS'e
   dokunulmaz; yalnız renk, kenarlık, gölge, tipografi.

   DİL: "harita masası" — kartografi + piksel. Belirgin plakalar,
   ince tarama çizgileri, köşeli başlık fontu, mono sayılar.
══════════════════════════════════════════════════════════════════ */

/* ── 1. BAŞLIK FONTU ──
   Chakra Petch index.html'de ZATEN yükleniyor (500/600/700). Köşeli,
   teknik, hafif askeri — harita/savaş temasına Space Grotesk'ten çok
   daha uygun ve gerçekten var. */
:root {
  --font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
}

/* ── 2. KOYU TEMA — "gece deniz haritası" ──
   Yüzeyler arası ayrım artırıldı, kenarlıklar görünür yapıldı,
   --muted okunabilir seviyeye çekildi (eski #5a5f85 çok sönüktü). */
:root {
  --surf:#101425;      --surf-rgb:16,20,37;
  --surf2:#171c31;     --surf2-rgb:23,28,49;
  --surf3:#1d2340;     --surf3-rgb:29,35,64;
  --bdr:#242c49;
  --bdr2:#36406a;
  --muted:#7d87ad;

  /* Gölge merdiveni — panellerin havada durduğu hissi */
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 4px 14px rgba(0,0,0,.38);
  --sh-3: 0 18px 48px rgba(0,0,0,.55);
  /* Plakanın üst kenarındaki ışık hattı */
  --plate-top: rgba(255,255,255,.09);
  /* Kartografik tarama (grid) — modal perdelerinde kullanılır */
  --grid-line: rgba(255,255,255,.030);
}

/* ── 3. AÇIK TEMA — "harita kâğıdı" ──
   Zemin belirgin şekilde koyulaştırıldı ki beyaz plakalar ÜSTÜNDE dursun;
   kenarlık ve --muted kontrastı WCAG'e yaklaşacak şekilde artırıldı. */
:root[data-theme="light"] {
  --bg:#dde2ee;        --bg-rgb:221,226,238;
  --surf:#ffffff;      --surf-rgb:255,255,255;
  --surf2:#f3f6fc;     --surf2-rgb:243,246,252;
  --surf3:#e6ebf6;     --surf3-rgb:230,235,246;
  --bdr:#c5cee2;
  --bdr2:#a5b1cd;
  --txt:#0c1020;
  --muted:#535c7d;

  --sh-1: 0 1px 2px rgba(16,26,54,.08);
  --sh-2: 0 4px 14px rgba(16,26,54,.10);
  --sh-3: 0 18px 48px rgba(16,26,54,.20);
  --plate-top: rgba(255,255,255,.9);
  --grid-line: rgba(16,26,54,.045);
}

/* ── 3b. KART KENARLIĞI — asıl "soluk" suçlusu ──
   02-variables.css: --card-border: rgba(var(--shine-rgb),.055)
   Açık temada --shine-rgb 20,20,45 → %5,5 alfa neredeyse görünmez;
   bütün kartlar zeminden ayrışmadan yüzüyordu. Alfa gerçek bir kenar
   verecek seviyeye çekiliyor (koyu temada da hafifçe artırılıyor). */
:root{
  --card-border:  rgba(var(--shine-rgb),.10);
  --card-border-h:rgba(var(--accent-rgb),.42);
}
:root[data-theme="light"]{
  --card-border:  rgba(var(--shine-rgb),.16);
  --card-border-h:rgba(var(--accent-rgb),.50);
}

/* ── 3c. ANA MODAL KARTLARI — gerçek yükseklik ──
   Kartların havada durduğu hissi. 02-variables.css bu kuralları
   !important ile yazdığı için burada da !important gerekiyor. */
#faction-card,
#profile-card,
#quest-card,
.scard {
  border-color: var(--card-border) !important;
  box-shadow:
    var(--sh-3),
    0 0 0 1px var(--card-border),
    inset 0 1px 0 var(--plate-top) !important;
}

/* Görev/liste kartları: kenarlığı olan, tıklanabilir hissi veren plakalar */
.qcard, .pcs-card {
  border-color: var(--bdr) !important;
  box-shadow: var(--sh-1) !important;
}
.qcard:hover, .pcs-card:hover {
  border-color: var(--card-border-h) !important;
  box-shadow: var(--sh-2) !important;
}

/* ── 3d. MODAL BAŞLIKLARI — köşeli display yüzü ──
   Chakra Petch artık gerçekten yükleniyor (bkz. 1. madde); oyunun
   başlıkları tek tip ve karakterli olsun. */
#fc-title, #pc-hero-title, #hm-modal-title, #rb-modal-title,
#am-detail-title, #tpl-result-title, #tpl-share-title,
#levelup-title, #tut-title, #login-title,
.pfc-title, .am-title {
  font-family: var(--font-display) !important;
  letter-spacing: .005em;
}

/* ── 3e. MODAL PERDESİ (AÇIK TEMA) — asıl derinlik sorunu ──
   11-front.css açık temada perdeyi rgba(25,32,55,.45)'e düşürüyor ve
   backdrop-filter'ı kapatıyordu. Modallar HARİTANIN üstünde açılıyor;
   harita açık mavi/beyaz olduğu için beyaz kart zeminden hiç ayrışmıyor,
   her şey "düz" görünüyordu. Perde koyulaştırılıp hafif bulanıklık geri
   getiriliyor — tüm modaller tek noktadan derinlik kazanıyor. */
:root[data-theme="light"] #profile-modal,
:root[data-theme="light"] #faction-modal,
:root[data-theme="light"] #quest-panel,
:root[data-theme="light"] #skill-panel,
:root[data-theme="light"] #tb-menu-sheet,
:root[data-theme="light"] #tutorial-overlay {
  background: rgba(14,20,40,.80) !important;
  -webkit-backdrop-filter: blur(6px) saturate(85%) !important;
  backdrop-filter: blur(6px) saturate(85%) !important;
}

/* Koyu temada perde zaten koyu ama 20-console.css onu --bg-rgb ile
   kuruyor; tutarlılık için burada da tek değere sabitliyoruz. */
:root:not([data-theme="light"]) #profile-modal,
:root:not([data-theme="light"]) #faction-modal,
:root:not([data-theme="light"]) #quest-panel,
:root:not([data-theme="light"]) #skill-panel {
  background: rgba(3,5,12,.82) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
  backdrop-filter: blur(6px) saturate(110%) !important;
}

/* ── 4. MODAL PERDESİ — kartografik tarama ──
   Düz siyah bulanıklık yerine ince grid: harita masası hissi.
   Yalnız bizim yeni panellerimizde (mevcut modalların perdesine
   dokunmuyoruz ki hiçbir şey bozulmasın). */
#cnt-modal, #cnt-pick, #onb-pick {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}

/* ── 5. PLAKA YÜZEYİ ──
   Yeni panellere ortak kimlik: üst kenarda ışık hattı + gölge merdiveni. */
#cnt-modal .cnt-card,
#cnt-pick .cnt-pick-card,
#onb-card,
#onb-pick .onb-pick-card {
  border-color: var(--bdr2);
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 var(--plate-top);
}

/* ── 6. BAŞLIKLAR — köşeli display yüzü ──
   Yalnız panel başlıkları; gövde metni Inter kalır (okunabilirlik). */
.cnt-title, .onb-title,
#cnt-modal .cnt-top3-head {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Bölüm etiketleri: küçük, aralıklı, versal — harita lejantı dili */
#cnt-modal .cnt-top3-head {
  text-transform: uppercase;
  font-size: .62rem;
  letter-spacing: var(--ls-caps, .12em);
}

/* ── 7. SAYILAR — mono hizalı ──
   Tabular figürler: rakamlar alt alta kayarken zıplamasın. */
.cnt-px, .cnt-pct, .cnt-pos, .onb-prog {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── 8. ERİŞİLEBİLİRLİK TABANI ──
   Klavyeyle gezinenler için görünür odak halkası (daha önce hiç yoktu). */
#cnt-modal button:focus-visible,
#cnt-pick button:focus-visible,
#cnt-pick input:focus-visible,
#onb-card button:focus-visible,
#onb-pick button:focus-visible,
#onb-pick input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Hareket azaltma tercihi: yeni panellerdeki tüm geçişler kapanır */
@media (prefers-reduced-motion: reduce){
  #cnt-modal *, #cnt-pick *, #onb-card *, #onb-pick * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}