/*
 * tema.css — sitenin ve yönetim panelinin TEK tasarım token kaynağı (2026-10-19).
 *
 * Değerler betjuve slot sayfasından getComputedStyle ile ölçüldü:
 * docs/tasarim/betjuve-spec.md §1-2. Bileşen dosyaları (site.css, yonetim/*.css)
 * burada olmayan renk/yarıçap/gölge YAZMAZ; yeni bir değer gerekiyorsa önce buraya eklenir.
 *
 * Site yalnız koyu temadır (betjuve birebir). `data-tema="acik"` aydınlık karşılığı yalnız
 * yönetim paneli içindir (panelde iki tema da kusursuz olmalı).
 */

:root {
  color-scheme: dark;

  /* ------------------------------------------------------------ zemin ve yüzeyler */
  --zemin: #171920;                 /* body, duyuru slaytı, aktif sekme */
  --zemin-hover: #2c303d;
  --zemin-koyu: #0f1010;
  --yuzey-05: rgba(255, 255, 255, 0.05);
  --yuzey-08: rgba(255, 255, 255, 0.08); /* jackpot havuz satırı, ok düğmesi, seçici */
  --yuzey-10: rgba(255, 255, 255, 0.1);  /* turnuva / kazanan paneli ve satırları */
  --yuzey-12: rgba(255, 255, 255, 0.12); /* ds-btn hover katmanı, görsel iskeleti */
  --yuzey-15: rgba(255, 255, 255, 0.15); /* "daha fazla göster" */
  --yuzey-20: rgba(255, 255, 255, 0.2);  /* akıllı panel ayırıcı */
  --yuzey-24: rgba(255, 255, 255, 0.24); /* ds-btn basılı katmanı */
  --kart-ortu: rgba(0, 2, 5, 0.48);      /* oyun kartı hover katmanı (+ blur 12px) */
  --mobil-baslik: #131416;               /* mobil ana satır zemini */
  --oyun-serit: #13151b;                 /* oyun sayfası sağ kontrol şeridi (spec §9) */
  --oyun-panel-kenar: #24262d;           /* oyun listesi paneli 1px kenarı (piksel ölçümü 2026-10-20) */
  --oyun-tutamac: rgba(100, 102, 106, 0.3); /* listenin "›" yarım daire tutamacı (iki zeminde ölçülüp çözüldü) */
  --oyun-gorunum: rgba(0, 0, 0, 0.3);    /* tek / listeli görünüm düğmeleri (betjuve tooltipIconWrapper) */
  --menu-bas-kenar: #4e5050;             /* mobil "MENÜ ×" şeridinin 1px alt kenarı (ölçüm 2026-10-20) */
  --karo-alt-metin: #d5c18c;             /* ana sayfa karo alt yazısı "↗ HEMEN OYNA" */
  --golge-karo-yazi: 0 1px 5px rgba(0, 0, 0, 0.35); /* karo başlığı yazı gölgesi */
  --turnuva-bilgi: rgba(255, 255, 255, 0.04); /* turnuva kartı bilgi kutusu (tournamentsWidgetInfo) */
  /* hesap paneli (spec §10, ölçüldü 2026-10-19 19:50) */
  --hp-sol-zemin: #2c2d2e;               /* sol sütun */
  --hp-bakiye-zemin: #6f6225;            /* ANA BAKİYE kartı */
  --hp-bonus-zemin: #304e56;             /* bonus kartı */
  --hp-baslik-orta: #96814c;             /* başlık şeridi gradyanının ortası */
  --yontem-pasif: #4a4848;               /* para yatır yöntem grubu sekmesi (pasif zemin) */
  --yontem-secili: #e7fc09;              /* seçili sekme zemini (neon) */
  --yontem-secili-metin: #4a4848;
  --cip-zemin: rgba(23, 25, 32, 0.16);
  --modal-zemin: #2b2c2f;
  --alan-zemin: #1b1c1d;
  --ortu: rgba(0, 0, 0, 0.7);
  --ortu-pencere: rgba(0, 2, 5, 0.48);   /* rastgele oyun / sağlayıcı penceresi arkası (betjuve ölçüsü, 6px bulanıklıkla) */

  /* ------------------------------------------------------------ çizgiler */
  --cizgi: rgba(255, 255, 255, 0.1);
  --cizgi-ince: rgba(255, 255, 255, 0.05);
  --cizgi-baslik: #1c1f2c;          /* header alt kenarı */
  --modal-kenar: #6a6c71;
  --gri-kenar: #313131;             /* gri gradyan düğmelerin kenarı */
  --kayit-kenar: #232534;

  /* ------------------------------------------------------------ metin */
  --metin: #ffffff;
  --metin-90: rgba(255, 255, 255, 0.9);
  --metin-85: rgba(255, 255, 255, 0.85);
  --metin-80: rgba(255, 255, 255, 0.8);
  --metin-70: rgba(255, 255, 255, 0.7);
  --metin-64: rgba(255, 255, 255, 0.64);
  --metin-60: rgba(255, 255, 255, 0.6);
  --metin-56: rgba(255, 255, 255, 0.56); /* alan yer tutucu etiketi */
  --metin-50: rgba(255, 255, 255, 0.5);
  --metin-48: rgba(255, 255, 255, 0.48); /* turnuva kartı "Ödül Havuzu" etiketi */
  --metin-40: rgba(255, 255, 255, 0.4);
  --metin-24: rgba(255, 255, 255, 0.24);
  --menu-metin: #ffeab4;            /* ana menü + alt şerit bağlantıları */
  --alt-gezinti-metin: #ebebeb;     /* mobil alt gezinti başlıkları */

  /* ------------------------------------------------------------ aksan (altın / bronz) */
  --aksan: #7a6b4a;
  --aksan-hover: #99865d;
  --altin: #ffeca8;
  --altin-hover: #ffe074;
  --altin-kutu: #ccb069;            /* onay kutusu, mobil alt gezinti üst kenarı, mobil duyuru vurgusu */
  --aksan-dugme-hover: #a8945f;     /* araç çubuğu düğmesi hover: kenar + metin */
  --kebap-kenar: #414243;
  --aksan-metin: #1a1408;           /* altın zemin üstündeki metin */
  --arac-ikon-zemin: #847754;       /* mobil araç satırı ikon kutusu (m.betjuve ölçümü) */

  /* ------------------------------------------------------------ gradyanlar */
  --gri-gradyan: linear-gradient(#54606a, #3a3d3d);
  --gri-taban: #28292b;
  --yesil-gradyan: linear-gradient(-90deg, #185a06 0%, #187343 100%);
  --nav-gradyan: linear-gradient(90deg, #141519, #34383b, #141519);
  --duyuru-gradyan: linear-gradient(95deg, #141519 0%, #34383b 35%, #4a535c 55%, #34383b 75%, #141519 100%); /* mobil duyuru kutusu */
  --altserit-gradyan: linear-gradient(#54606a, #0f1010);
  --jackpot-gradyan: radial-gradient(120% 140% at 15% 0%, #3d2a7a 0%, #1c1d4a 45%, #10122a 100%);
  --karo-gradyan: linear-gradient(115deg, #171b1e 12%, #272b2c 43%, #786840 76%, #d5c18c 100%); /* ana sayfa kısayol karoları (betjuve ölçüsü) */

  /* ------------------------------------------------------------ durum renkleri */
  --basari: #069361;
  --basari-hover: #08c381;
  --hata: #b4132b;
  --hata-hover: #e21736;
  --hata-metin: #ee7486;            /* koyu zeminde küçük kırmızı metin (≥4.5:1); --hata-hover 2,5–3,2 veriyordu */
  --uyari: #ffad29;
  --uyari-hover: #f59700;
  --bilgi: #0f63e1;
  --bilgi-hover: #317ef1;
  --sicak: #e32020;                 /* "Sıcak" rozeti (ölçüldü) */
  --dusus: #ff3449;                 /* --oc-3 / oran düşüşü */
  --marka-yesil: #16c72e;

  /* ------------------------------------------------------------ köşe yarıçapları */
  --r-4: 4px;
  --r-5: 5px;
  --r-6: 6px;                       /* mobil MENÜ karosu (ölçüm 2026-10-20) */
  --r-7: 7px;
  --r-8: 8px;                       /* oyun kartı, düğmeler */
  --r-10: 10px;                     /* form alanı, alt şerit */
  --r-12: 12px;
  --r-14: 14px;                     /* ana sayfa karoları */
  --r-20: 20px;                     /* modal */
  --r-25: 25px;                     /* mobil alt gezinti üst köşeleri */
  --r-hap: 999px;                   /* çip, ok, seçici */

  /* ------------------------------------------------------------ gölgeler */
  --golge-modal: 0 0 5px rgba(23, 25, 32, 0.1);
  --golge-kart-hover: 0 10px 24px rgba(0, 0, 0, 0.45);
  --golge-acilir: 0 16px 40px rgba(0, 0, 0, 0.55);
  --golge-alt-gezinti: 0 -2px 10px rgba(0, 0, 0, 0.5);
  --golge-akilli-panel: 0 2px 4px rgba(0, 0, 0, 0.15);
  --golge-karo: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(213, 193, 140, 0.35);

  /* ------------------------------------------------------------ boşluk ölçeği */
  --b-2: 2px;
  --b-4: 4px;
  --b-5: 5px;
  --b-8: 8px;
  --b-10: 10px;
  --b-12: 12px;
  --b-16: 16px;
  --b-20: 20px;
  --b-24: 24px;
  --b-28: 28px;
  --b-32: 32px;

  /* ------------------------------------------------------------ ölçüler ve süreler */
  --dugme-y: 40px;
  --dokunma: 44px;                  /* en küçük dokunma alanı */
  --duyuru-y: 44px;
  --menu-y: 36px;
  --icerik-max: 1440px;
  --gecis: 0.24s;
  --gecis-yavas: 0.4s;

  /* ------------------------------------------------------------ yazı */
  --yazi-govde: Roboto, Arial, Helvetica, sans-serif;
  --yazi-baslik: "Exo 2", Roboto, Arial, Helvetica, sans-serif;
  --yazi-karo: "Helvetica Neue", Helvetica, Arial, sans-serif; /* ana sayfa karo başlığı + alt yazısı (betjuve ::before/::after, ölçüm 2026-10-20) */
  --yazi-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * Aydınlık karşılık — YALNIZ yönetim paneli kullanır (`<html data-tema="acik">`).
 * Metin kademeleri koyu tabana döner; aksan, kontrast için koyulaştırılır (≥4.5:1).
 */
:root[data-tema="acik"] {
  color-scheme: light;

  --zemin: #f3f4f6;
  --zemin-hover: #e6e8ec;
  --zemin-koyu: #ffffff;
  --yuzey-05: rgba(17, 19, 26, 0.03);
  --yuzey-08: rgba(17, 19, 26, 0.05);
  --yuzey-10: #ffffff;
  --yuzey-12: rgba(17, 19, 26, 0.07);
  --yuzey-15: rgba(17, 19, 26, 0.08);
  --yuzey-20: rgba(17, 19, 26, 0.1);
  --yuzey-24: rgba(17, 19, 26, 0.12);
  --kart-ortu: rgba(255, 255, 255, 0.72);
  --mobil-baslik: #ffffff;
  --cip-zemin: rgba(17, 19, 26, 0.04);
  --modal-zemin: #ffffff;
  --alan-zemin: #f6f7f9;
  --ortu: rgba(17, 19, 26, 0.45);
  --ortu-pencere: rgba(17, 19, 26, 0.4);

  --cizgi: rgba(17, 19, 26, 0.1);
  --cizgi-ince: rgba(17, 19, 26, 0.06);
  --cizgi-baslik: #dfe2e8;
  --modal-kenar: #d5d8de;
  --gri-kenar: #c9cdd4;
  --kayit-kenar: #d5d8de;

  --metin: #12141a;
  --metin-90: rgba(18, 20, 26, 0.9);
  --metin-85: rgba(18, 20, 26, 0.86);
  --metin-80: rgba(18, 20, 26, 0.82);
  --metin-70: rgba(18, 20, 26, 0.72);
  --metin-64: rgba(18, 20, 26, 0.68);
  --metin-60: rgba(18, 20, 26, 0.66);
  --metin-56: rgba(18, 20, 26, 0.64);
  --metin-50: rgba(18, 20, 26, 0.62);
  --metin-40: rgba(18, 20, 26, 0.58);
  --metin-24: rgba(18, 20, 26, 0.32);
  --menu-metin: #6b5a2f;
  --alt-gezinti-metin: #2a2d35;
  --aksan-dugme-hover: #6b5a2f;
  --kebap-kenar: #c9cdd4;

  --aksan: #7a6b4a;
  --aksan-hover: #66583b;
  --altin: #8a6d1f;
  --altin-hover: #735a17;
  --altin-kutu: #b8923f;
  --aksan-metin: #ffffff;

  --gri-gradyan: linear-gradient(#ffffff, #eef0f3);
  --gri-taban: #ffffff;
  --nav-gradyan: linear-gradient(90deg, #ffffff, #f3f4f6, #ffffff);
  --altserit-gradyan: linear-gradient(#ffffff, #eceef2);

  --basari: #05744d;
  --hata: #b4132b;
  --hata-metin: #b4132b;
  --uyari: #9a5b00;
  --bilgi: #0f56c4;

  --golge-modal: 0 12px 40px rgba(17, 19, 26, 0.18);
  --golge-kart-hover: 0 10px 24px rgba(17, 19, 26, 0.12);
  --golge-acilir: 0 16px 40px rgba(17, 19, 26, 0.16);
}