/* ============================================================
   BiRandevum web — TEMA (light / dark)
   ============================================================
   Tek renk kaynağı. Landing, giriş, yasal sayfalar ve web panelleri
   bu dosyayı bağlar; kendi <style> blokları YALNIZ yerleşim (layout)
   değişkenlerini tanımlar.

   İki mod:
     light → krem/beyaz yüzeyler (--canvas krem, kartlar beyaz)
     dark  → her yüzey kapalı mavi (canvas #070B16'dan panellere kadar)

   Mod seçimi <html data-theme="light|dark"> ile. theme.js bu özniteliği HER
   sayfada yazar (varsayılan "light"), bu yüzden aşağıdaki prefers-color-scheme
   bloğu pratikte yalnız JavaScript kapalıyken devreye girer — site varsayılan
   olarak BEYAZ açılır, koyu tema kullanıcı seçimidir.
   Yanıp sönmeyi (FOUC) önlemek için her sayfanın <head>'inde
   öznitelik CSS'ten ÖNCE yazılır (bkz. theme.js başındaki not).

   ⚠️ Panel token'ları (--d-*) artık "koyu" demek DEĞİL, "panel yüzeyi"
   demek: light modda krem zemin + koyu yazı, dark modda mavi zemin +
   açık yazı. Bu yüzden panel içinde #fff / rgba(255,255,255,…) yazmak
   YASAK — token kullanın, aksi halde light modda görünmez olur.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- marka ---------- */
  --iris: #332E81;
  --iris-hover: #423CA6;
  --iris-lite: #6D5FE0;
  --iris-pale: #A5A0FF;
  --iris-subtle: #EDE9F7;
  --iris-text: #332E81;        /* yüzey üstünde OKUNAN iris (başlık/bağlantı) */
  --coral: #FF6F61;
  --coral-hover: #FF8A7E;
  --coral-bg: rgba(255, 111, 97, .15);
  --blue: #5B8DEF;
  --blue-deep: #3E6FD6;
  --blue-bg: rgba(91, 141, 239, .14);
  --blue-text: #2F5FC4;        /* yüzey üstünde OKUNAN mavi (dock aktif vb.) */
  --teal: #00B8A9;
  --violet: #9B5DE5;
  --pink: #F15BB5;
  --green: #2D9C6F;

  /* ---------- yüzeyler (light = krem) ---------- */
  --porcelain: #FAF7F0;          /* sayfa zemini — krem */
  --canvas: #FAF7F0;             /* --porcelain ile aynı, okunur takma ad */
  --surface: #FFFFFF;            /* kartlar */
  --subtle: #F4EFE4;             /* ikincil dolgu */

  /* ---------- yazı ---------- */
  --ink: #191622;
  --ink-2: #3A3550;
  --ink-muted: #6E6880;
  --ink-subtle: #6A637E;      /* beyaz kart üstünde ~5.7:1, krem ~5.3:1 */
  --ink-ph: #A29BB0;

  /* ---------- çizgiler ---------- */
  --line: #EBE4D7;
  --line-2: #D8CFBD;

  /* ---------- durum ---------- */
  --ok: #1E9E6A;
  --ok-bg: #DCF5EA;
  --warn: #F5A623;
  --warn-bg: #FCEFD6;
  --danger: #E5484D;
  --danger-bg: #FCE4E5;

  /* ---------- landing'in bilerek koyu bantları ----------
     Kullanıcı kararı: light modda da koyu kalır (sayfanın editoryal
     ritmi korunsun). Dark modda kapalı maviye kayar. */
  --night: #0C0A18;
  --night-2: #131022;
  --night-3: #1B1740;
  --on-night: #FFFFFF;                       /* koyu bant üstü yazı */
  --on-night-2: rgba(255, 255, 255, .84);
  --on-night-muted: rgba(255, 255, 255, .62);
  --on-night-subtle: rgba(255, 255, 255, .42);
  --on-night-line: rgba(255, 255, 255, .10);
  --on-night-line-2: rgba(255, 255, 255, .18);
  --on-night-fill: rgba(255, 255, 255, .07);
  --on-night-fill-2: rgba(255, 255, 255, .11);

  /* ---------- panel (uygulama ekranlarındaki büyük yüzey) ----------
     light: krem panel + koyu yazı · dark: mavi panel + açık yazı */
  --panel-grad: linear-gradient(150deg, #F6F1E5 0%, #FBF8F2 55%, #FFFFFF 100%);
  --panel-shadow: 0 30px 60px -36px rgba(25, 22, 34, .22);
  --d-surface: rgba(25, 22, 34, .045);
  --d-surface-2: rgba(25, 22, 34, .085);
  --d-line: rgba(25, 22, 34, .10);
  --d-line-2: rgba(25, 22, 34, .17);
  --d-ink: #191622;
  --d-ink-2: #3A3550;
  --d-ink-muted: #6E6880;
  --d-ink-subtle: #6A6379;    /* krem panel üstünde ~5.1:1 */
  /* Panel içindeki "açık" düğme: light modda krem üstünde beyaz
     kaybolacağı için iris dolgu + beyaz yazı olur. */
  /* ⚠️ Bu token'lar var(--…) İLE TANIMLANMAZ: iç içe custom property'ler
     tema canlı değiştirildiğinde yeniden çözülmüyor (düğme eski modun
     rengiyle takılı kalıyordu). Değerler açıkça yazılır. */
  --btn-panel-bg: #332E81;
  --btn-panel-ink: #FFFFFF;
  --btn-panel-bg-hover: #423CA6;
  /* Her iki modda beyaz kalan küçük yüzeyler (yükseltilmiş sekme pill'i,
     hikâye halkasının iç dairesi) üstündeki yazı — sabit koyu. */
  --ink-on-white: #191622;
  --panel-edge: #EFE9DC;         /* panel zeminiyle aynı tonda kenar */
  --dot: rgba(51, 46, 129, .09);           /* landing nokta dokusu */
  --brand-panel:                            /* giriş sayfasının marka yüzeyi */
    linear-gradient(150deg, rgba(58, 52, 146, .22) 0%, transparent 58%),
    linear-gradient(135deg, #332E81 0%, #29256B 62%, #1B1740 100%);
  --ph-bg: #FFF8EC;                         /* sözleşme yer tutucuları */
  --ph-ink: #6E5116;
  --ph-line: #F2DDB6;
  --note-ink: #3A3568;                      /* iris zeminli bilgi notu yazısı */
  --note-blue-ink: #274A8A;                 /* mavi zeminli bilgi notu yazısı */

  /* ---------- geometri & tipografi (moddan bağımsız) ---------- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 9999px;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ============================================================
   DARK — her yüzey kapalı mavi
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --iris: #6E66E8;
  --iris-hover: #8079F0;
  --iris-lite: #8C84F5;
  --iris-pale: #B5AFFF;
  --iris-subtle: rgba(110, 102, 232, .18);
  --iris-text: #A9A2FF;
  --coral: #FF8577;
  --coral-hover: #FF9C90;
  --coral-bg: rgba(255, 133, 119, .18);
  --blue: #6E9CFF;
  --blue-deep: #5B8DEF;
  --blue-bg: rgba(110, 156, 255, .18);
  --blue-text: #8FB4FF;
  --teal: #2FD3C4;
  --violet: #B27BF0;
  --pink: #FF7BC8;
  --green: #3DDC97;

  --porcelain: #070B16;
  --canvas: #070B16;
  --surface: #0F1524;
  --subtle: #141B2E;

  --ink: #EDF0F7;
  --ink-2: #C7CDDE;
  --ink-muted: #8C94AC;
  --ink-subtle: #838BA3;      /* kapalı mavi kart üstünde ~5.0:1 */
  --ink-ph: #5A6178;

  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);

  --ok: #3DDC97;
  --ok-bg: rgba(61, 220, 151, .15);
  --warn: #F5B84E;
  --warn-bg: rgba(245, 184, 78, .15);
  --danger: #FF6B70;
  --danger-bg: rgba(255, 107, 112, .16);

  /* Koyu bantlar da maviye kayar — zeminle sürekli bir yüzey olur. */
  --night: #05080F;
  --night-2: #0A0F1D;
  --night-3: #121A2F;

  --panel-grad: linear-gradient(150deg, #161E36 0%, #0E1526 55%, #090E1C 100%);
  --panel-shadow: 0 30px 60px -36px rgba(0, 0, 0, .75);
  --d-surface: rgba(255, 255, 255, .07);
  --d-surface-2: rgba(255, 255, 255, .11);
  --d-line: rgba(255, 255, 255, .10);
  --d-line-2: rgba(255, 255, 255, .18);
  --d-ink: #FFFFFF;
  --d-ink-2: rgba(255, 255, 255, .84);
  --d-ink-muted: rgba(255, 255, 255, .62);
  --d-ink-subtle: rgba(255, 255, 255, .42);
  --btn-panel-bg: #FFFFFF;
  --btn-panel-ink: #332E81;
  --btn-panel-bg-hover: #FFFFFF;
  --ink-on-white: #191622;
  --panel-edge: #0F1526;
  --dot: rgba(255, 255, 255, .07);
  --brand-panel:
    linear-gradient(150deg, rgba(110, 102, 232, .18) 0%, transparent 58%),
    linear-gradient(135deg, #16204A 0%, #0F1730 62%, #080D1A 100%);
  --ph-bg: rgba(245, 184, 78, .12);
  --ph-ink: #F0C878;
  --ph-line: rgba(245, 184, 78, .38);
  --note-ink: #C3C8E8;
  --note-blue-ink: #BBD0FF;
}

/* Sistem tercihi (açık bir seçim yapılmamışsa). Kurallar yukarıdakiyle
   birebir aynı; :root[data-theme="light"] hariç tutuluyor ki kullanıcının
   açık seçimi sistem tercihini her zaman yensin. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --iris: #6E66E8;
    --iris-hover: #8079F0;
    --iris-lite: #8C84F5;
    --iris-pale: #B5AFFF;
    --iris-subtle: rgba(110, 102, 232, .18);
    --iris-text: #A9A2FF;
    --coral: #FF8577;
    --coral-hover: #FF9C90;
    --coral-bg: rgba(255, 133, 119, .18);
    --blue: #6E9CFF;
    --blue-deep: #5B8DEF;
    --blue-bg: rgba(110, 156, 255, .18);
    --blue-text: #8FB4FF;
    --teal: #2FD3C4;
    --violet: #B27BF0;
    --pink: #FF7BC8;
    --green: #3DDC97;

    --porcelain: #070B16;
    --canvas: #070B16;
    --surface: #0F1524;
    --subtle: #141B2E;

    --ink: #EDF0F7;
    --ink-2: #C7CDDE;
    --ink-muted: #8C94AC;
    --ink-subtle: #838BA3;
    --ink-ph: #5A6178;

    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .17);

    --ok: #3DDC97;
    --ok-bg: rgba(61, 220, 151, .15);
    --warn: #F5B84E;
    --warn-bg: rgba(245, 184, 78, .15);
    --danger: #FF6B70;
    --danger-bg: rgba(255, 107, 112, .16);

    --night: #05080F;
    --night-2: #0A0F1D;
    --night-3: #121A2F;

    --panel-grad: linear-gradient(150deg, #161E36 0%, #0E1526 55%, #090E1C 100%);
    --panel-shadow: 0 30px 60px -36px rgba(0, 0, 0, .75);
    --d-surface: rgba(255, 255, 255, .07);
    --d-surface-2: rgba(255, 255, 255, .11);
    --d-line: rgba(255, 255, 255, .10);
    --d-line-2: rgba(255, 255, 255, .18);
    --d-ink: #FFFFFF;
    --d-ink-2: rgba(255, 255, 255, .84);
    --d-ink-muted: rgba(255, 255, 255, .62);
    --d-ink-subtle: rgba(255, 255, 255, .42);
    --btn-panel-bg: #FFFFFF;
    --btn-panel-ink: #332E81;
    --btn-panel-bg-hover: #FFFFFF;
    --ink-on-white: #191622;
    --panel-edge: #0F1526;
    --dot: rgba(255, 255, 255, .07);
    --brand-panel:
      linear-gradient(150deg, rgba(110, 102, 232, .18) 0%, transparent 58%),
      linear-gradient(135deg, #16204A 0%, #0F1730 62%, #080D1A 100%);
    --ph-bg: rgba(245, 184, 78, .12);
    --ph-ink: #F0C878;
    --ph-line: rgba(245, 184, 78, .38);
    --note-ink: #C3C8E8;
    --note-blue-ink: #BBD0FF;
  }
}

/* ============================================================
   TEMA DÜĞMESİ — her sayfada aynı görünür
   ============================================================ */
.thm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.thm:hover { transform: translateY(-2px); border-color: var(--iris); color: var(--iris); }
.thm svg { width: 18px; height: 18px; display: block; }
/* İki ikon üst üste; görünen olan temaya göre değişiyor. */
.thm .i-sun { display: none; }
.thm .i-moon { display: block; }
:root[data-theme="dark"] .thm .i-sun { display: block; }
:root[data-theme="dark"] .thm .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thm .i-sun { display: block; }
  :root:not([data-theme="light"]) .thm .i-moon { display: none; }
}
/* Koyu bant içinde (landing nav, panel başlıkları) */
.on-night .thm, .thm-d {
  border-color: var(--on-night-line-2);
  background: var(--on-night-fill);
  color: var(--on-night);
}
.on-night .thm:hover, .thm-d:hover {
  background: var(--on-night-fill-2);
  border-color: var(--on-night);
  color: var(--on-night);
}

/* Tema değişirken TÜM geçişler kapatılır (theme.js bu sınıfı ~60ms takar).
   Zorunlu: `transition:background-color` tanımlı elemanlar aksi halde
   Chromium'da eski renkte takılı kalıyor. */
.thm-swap, .thm-swap *, .thm-swap *::before, .thm-swap *::after {
  transition: none !important;
  animation-duration: .001ms !important;
}
