/* ============================================================
   Tasarım sistemi — Turkcell mavisi (#164194) ve sarısı (#FEC600).

   Tipografi: Sora (başlık, geometrik-teknik) + Manrope (gövde, nötr ve
   yüksek okunurluk) + JetBrains Mono (kod). Hiçbir yerde italik ya da
   el yazısı kullanılmaz; vurgu ağırlık ve renkle verilir.

   Üç tema durumu da tanımlı: bare :root (açık), prefers-color-scheme
   ve [data-theme] damgası. Hiçbir renk yalnızca media bloğunda yaşamaz.
   ============================================================ */

:root {
  /* ---- Marka ---- */
  --marka-mavi:  #164194;
  --marka-sari:  #FEC600;

  /* ---- Zemin ve yüzeyler ---- */
  --ground:      #F3F6FC;
  --surface:     #FFFFFF;
  --surface-2:   #EFF3FB;
  --surface-3:   #E3EAF7;

  /* ---- Metin ---- */
  --ink:         #0A1020;
  --ink-2:       #2C3852;
  --muted:       #5C6880;

  /* ---- Çizgiler ---- */
  --line:        #DDE5F3;
  --line-soft:   #EDF1F9;
  --line-guclu:  #C6D2E8;

  /* ---- Aksan (marka mavisi ailesi) ---- */
  --accent:      #164194;
  --accent-ink:  #10306E;
  --accent-parlak: #2E62CE;
  --accent-wash: #E8EFFC;
  --accent-wash-2: #D6E3FA;
  --accent-on:   #FFFFFF;

  /* ---- Sinyal (marka sarısı) — DOLGU için; metinde signal-ink ---- */
  --signal:      #FEC600;
  --signal-ink:  #7A5A00;
  --signal-wash: #FFF6DA;
  --signal-on:   #2B2000;

  --good:        #0F7B4F;
  --good-wash:   #E3F6EC;
  --danger:      #B3261E;
  --danger-wash: #FDECEA;

  /* ---- Kod yüzeyi ---- */
  --code-bg:     #0B1226;
  --code-yuzey:  #131C36;
  --code-ink:    #DCE5FA;
  --code-muted:  #8494B8;
  --code-line:   #1E2A48;

  --logo-filtre: none;
  --perde:       rgba(10, 16, 32, .45);

  /* ---- Yükseklik ---- */
  --golge-xs: 0 1px 2px rgba(10, 16, 32, .05);
  --golge-sm: 0 1px 2px rgba(10, 16, 32, .05), 0 2px 8px -2px rgba(10, 16, 32, .08);
  --golge:    0 1px 2px rgba(10, 16, 32, .04), 0 8px 24px -10px rgba(16, 48, 110, .16);
  --golge-lg: 0 2px 6px rgba(10, 16, 32, .06), 0 28px 60px -22px rgba(16, 48, 110, .30);
  --golge-renk: 0 10px 30px -12px rgba(22, 65, 148, .45);

  /* ---- Köşeler ---- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r:    13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-tam: 999px;

  /* ---- Tipografi ---- */
  --yazi-baslik: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --yazi-govde:  'Manrope', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --yazi-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.25rem;
  --step-3:  clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --step-4:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-5:  clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);

  --measure: 70ch;

  --gecis: 160ms cubic-bezier(.2, .6, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #060A14;
    --surface:     #0E1526;
    --surface-2:   #151E35;
    --surface-3:   #1D2947;

    --ink:         #E9EEFA;
    --ink-2:       #B4C1DA;
    --muted:       #8090AE;

    --line:        #212D4B;
    --line-soft:   #18213A;
    --line-guclu:  #2E3D63;

    --accent:      #6E9AF0;
    --accent-ink:  #A2C0F8;
    --accent-parlak: #8FB2F5;
    --accent-wash: #142449;
    --accent-wash-2: #1B3160;
    --accent-on:   #060A14;

    --signal:      #FEC600;
    --signal-ink:  #FFD64A;
    --signal-wash: #2C2410;
    --signal-on:   #2B2000;

    --good:        #4BD08B;
    --good-wash:   #0E2A1E;
    --danger:      #FF8F84;
    --danger-wash: #33150F;

    --code-bg:     #05091A;
    --code-yuzey:  #0C1428;
    --code-ink:    #DCE5FA;
    --code-muted:  #7C8CB2;
    --code-line:   #16203A;

    --logo-filtre: invert(1) hue-rotate(180deg);
    --perde:       rgba(3, 6, 14, .62);

    --golge-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .5);
    --golge:    0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -12px rgba(0, 0, 0, .8);
    --golge-lg: 0 2px 8px rgba(0, 0, 0, .55), 0 32px 70px -26px rgba(0, 0, 0, .9);
    --golge-renk: 0 12px 34px -14px rgba(110, 154, 240, .5);
  }
}

:root[data-theme="dark"] {
  --ground:      #060A14;
  --surface:     #0E1526;
  --surface-2:   #151E35;
  --surface-3:   #1D2947;

  --ink:         #E9EEFA;
  --ink-2:       #B4C1DA;
  --muted:       #8090AE;

  --line:        #212D4B;
  --line-soft:   #18213A;
  --line-guclu:  #2E3D63;

  --accent:      #6E9AF0;
  --accent-ink:  #A2C0F8;
  --accent-parlak: #8FB2F5;
  --accent-wash: #142449;
  --accent-wash-2: #1B3160;
  --accent-on:   #060A14;

  --signal:      #FEC600;
  --signal-ink:  #FFD64A;
  --signal-wash: #2C2410;
  --signal-on:   #2B2000;

  --good:        #4BD08B;
  --good-wash:   #0E2A1E;
  --danger:      #FF8F84;
  --danger-wash: #33150F;

  --code-bg:     #05091A;
  --code-yuzey:  #0C1428;
  --code-ink:    #DCE5FA;
  --code-muted:  #7C8CB2;
  --code-line:   #16203A;

  --logo-filtre: invert(1) hue-rotate(180deg);
  --perde:       rgba(3, 6, 14, .62);

  --golge-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --golge-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --golge:    0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -12px rgba(0, 0, 0, .8);
  --golge-lg: 0 2px 8px rgba(0, 0, 0, .55), 0 32px 70px -26px rgba(0, 0, 0, .9);
  --golge-renk: 0 12px 34px -14px rgba(110, 154, 240, .5);
}

/* ------------------------------- Temel ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--yazi-govde);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--yazi-baslik);
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 600;
  margin: 0;
}
h1 { letter-spacing: -0.035em; }

/* İtalik hiçbir yerde kullanılmaz; vurgu ağırlıkla verilir. */
em, i, cite, address, dfn, var {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
strong, b { font-weight: 600; color: var(--ink); }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--gecis);
}
a:hover { color: var(--accent-parlak); }

:focus-visible {
  outline: 2px solid var(--accent-parlak);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-wash-2); color: var(--ink); }

/* Kaydırma çubuğu — koyu temada da uyumlu */
* { scrollbar-width: thin; scrollbar-color: var(--line-guclu) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-guclu);
  border-radius: var(--r-tam);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

.logo { filter: var(--logo-filtre); display: block; height: auto; }

/* Büyük harf dili: sayfa Türkçe olduğu için CSS "uppercase" i → İ yapar.
   İngilizce kelimeler lang="en" ile işaretlenir (QUIZ, ADMIN); tanımlayıcı ve
   kod ise hiç dönüştürülmez (Postpaid_Churn olduğu gibi kalır). */
code, kbd, samp, .ad-kod { text-transform: none; }

/* Küçük büyük-harf etiket — sistem genelinde tek bir stil */
.mono {
  font-family: var(--yazi-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------- Ortak düğme stili ----------------------------- */

.arac {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  font: 600 var(--step--1)/1 var(--yazi-govde);
  letter-spacing: -0.01em;
  padding: .58rem .8rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background var(--gecis), border-color var(--gecis),
              color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.arac:hover {
  border-color: var(--accent-parlak);
  color: var(--accent-ink);
  background: var(--accent-wash);
}
.arac:active { transform: translateY(1px); }

.arac.birincil {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  box-shadow: var(--golge-renk);
}
.arac.birincil:hover {
  background: var(--accent-parlak);
  border-color: var(--accent-parlak);
  color: var(--accent-on);
}
.arac:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ============================================================
   EĞİTİM TEMALARI

   Bir eğitimin seçtiği palet <html data-atolye="..."> ile damgalanır ve
   yalnızca aksan (--accent*) ile sinyal (--signal*) ailelerini değiştirir.
   Zemin, metin, çizgi ve kod renkleri ortak kalır — böylece her palet hem
   açık hem koyu temada okunur ve tasarım tutarlılığı bozulmaz.

   Damga yoksa yukarıdaki varsayılan mavi/sarı palet geçerlidir.
   Sıra önemlidir: [data-theme="dark"] blokları media bloklarından SONRA
   gelir, yoksa elle seçilen koyu tema sistem temasını ezemez.
   ============================================================ */

/* ---------------- Turuncu palet: marka turuncusu + kehribar ---------------- */
:root[data-atolye="showup"] {
  --marka-mavi: #EF502E;   /* isim tarihsel; değer markanın ana rengi */
  --marka-sari: #F7B733;
  --accent:        #EF502E;
  --accent-ink:    #B8371A;
  --accent-parlak: #F4714F;
  --accent-wash:   #FDEDE9;
  --accent-wash-2: #FBDBD2;
  --accent-on:     #FFFFFF;
  --signal:        #F7B733;
  --signal-ink:    #8A5A00;
  --signal-wash:   #FEF4DF;
  --signal-on:     #2B1D00;
  --golge-renk: 0 10px 30px -12px rgba(239, 80, 46, .45);
}

/* ---------------- Okyanus: teal + mercan ---------------- */
:root[data-atolye="okyanus"] {
  --marka-mavi: #0E6E78;
  --marka-sari: #FF7A59;
  --accent:        #0E6E78;
  --accent-ink:    #0A525A;
  --accent-parlak: #159AA8;
  --accent-wash:   #E2F4F5;
  --accent-wash-2: #C6E9EC;
  --accent-on:     #FFFFFF;
  --signal:        #FF7A59;
  --signal-ink:    #9B3A21;
  --signal-wash:   #FFEDE7;
  --signal-on:     #3A1206;
  --golge-renk: 0 10px 30px -12px rgba(14, 110, 120, .45);
}

/* ---------------- Orman: koyu yeşil + kehribar ---------------- */
:root[data-atolye="orman"] {
  --marka-mavi: #1F6B45;
  --marka-sari: #E0A02A;
  --accent:        #1F6B45;
  --accent-ink:    #175034;
  --accent-parlak: #2E9463;
  --accent-wash:   #E5F3EB;
  --accent-wash-2: #CCE7D7;
  --accent-on:     #FFFFFF;
  --signal:        #E0A02A;
  --signal-ink:    #7A5410;
  --signal-wash:   #FBF0DA;
  --signal-on:     #2B1E00;
  --golge-renk: 0 10px 30px -12px rgba(31, 107, 69, .45);
}

/* ---------------- Bordo: şarap + altın ---------------- */
:root[data-atolye="bordo"] {
  --marka-mavi: #7A2140;
  --marka-sari: #C9A227;
  --accent:        #7A2140;
  --accent-ink:    #5C1830;
  --accent-parlak: #A63459;
  --accent-wash:   #F8E9EE;
  --accent-wash-2: #F0D3DC;
  --accent-on:     #FFFFFF;
  --signal:        #C9A227;
  --signal-ink:    #6E5610;
  --signal-wash:   #F9F1D9;
  --signal-on:     #2A2000;
  --golge-renk: 0 10px 30px -12px rgba(122, 33, 64, .45);
}

/* ---------------- Sistem koyu teması ---------------- */
@media (prefers-color-scheme: dark) {
  :root[data-atolye="showup"]:not([data-theme="light"]) {
    --accent:        #FF8663;
    --accent-ink:    #FFAB90;
    --accent-parlak: #FF9A7B;
    --accent-wash:   #3A1810;
    --accent-wash-2: #4E2116;
    --accent-on:     #1A0703;
    --signal:        #F7B733;
    --signal-ink:    #FFD37A;
    --signal-wash:   #33280D;
    --signal-on:     #241A00;
    --golge-renk: 0 12px 34px -14px rgba(255, 134, 99, .5);
  }
  :root[data-atolye="okyanus"]:not([data-theme="light"]) {
    --accent:        #4FC9D6;
    --accent-ink:    #8CE0E9;
    --accent-parlak: #74D8E3;
    --accent-wash:   #0A3037;
    --accent-wash-2: #0F454F;
    --accent-on:     #041418;
    --signal:        #FF8F72;
    --signal-ink:    #FFAF98;
    --signal-wash:   #3A1A11;
    --signal-on:     #2A0C04;
    --golge-renk: 0 12px 34px -14px rgba(79, 201, 214, .5);
  }
  :root[data-atolye="orman"]:not([data-theme="light"]) {
    --accent:        #5FCB93;
    --accent-ink:    #92DFB6;
    --accent-parlak: #7CD8A8;
    --accent-wash:   #0D3524;
    --accent-wash-2: #134A32;
    --accent-on:     #04160E;
    --signal:        #F0BC55;
    --signal-ink:    #F7D389;
    --signal-wash:   #33270D;
    --signal-on:     #241A00;
    --golge-renk: 0 12px 34px -14px rgba(95, 203, 147, .5);
  }
  :root[data-atolye="bordo"]:not([data-theme="light"]) {
    --accent:        #E482A3;
    --accent-ink:    #F0AAC1;
    --accent-parlak: #EB9AB4;
    --accent-wash:   #3A1526;
    --accent-wash-2: #4E1B33;
    --accent-on:     #1A0710;
    --signal:        #E2C368;
    --signal-ink:    #EED89B;
    --signal-wash:   #332B10;
    --signal-on:     #221C00;
    --golge-renk: 0 12px 34px -14px rgba(228, 130, 163, .5);
  }
}

/* ---------------- Elle seçilen koyu tema ---------------- */
:root[data-atolye="showup"][data-theme="dark"] {
  --accent:        #FF8663;
  --accent-ink:    #FFAB90;
  --accent-parlak: #FF9A7B;
  --accent-wash:   #3A1810;
  --accent-wash-2: #4E2116;
  --accent-on:     #1A0703;
  --signal:        #F7B733;
  --signal-ink:    #FFD37A;
  --signal-wash:   #33280D;
  --signal-on:     #241A00;
  --golge-renk: 0 12px 34px -14px rgba(255, 134, 99, .5);
}
:root[data-atolye="okyanus"][data-theme="dark"] {
  --accent:        #4FC9D6;
  --accent-ink:    #8CE0E9;
  --accent-parlak: #74D8E3;
  --accent-wash:   #0A3037;
  --accent-wash-2: #0F454F;
  --accent-on:     #041418;
  --signal:        #FF8F72;
  --signal-ink:    #FFAF98;
  --signal-wash:   #3A1A11;
  --signal-on:     #2A0C04;
  --golge-renk: 0 12px 34px -14px rgba(79, 201, 214, .5);
}
:root[data-atolye="orman"][data-theme="dark"] {
  --accent:        #5FCB93;
  --accent-ink:    #92DFB6;
  --accent-parlak: #7CD8A8;
  --accent-wash:   #0D3524;
  --accent-wash-2: #134A32;
  --accent-on:     #04160E;
  --signal:        #F0BC55;
  --signal-ink:    #F7D389;
  --signal-wash:   #33270D;
  --signal-on:     #241A00;
  --golge-renk: 0 12px 34px -14px rgba(95, 203, 147, .5);
}
:root[data-atolye="bordo"][data-theme="dark"] {
  --accent:        #E482A3;
  --accent-ink:    #F0AAC1;
  --accent-parlak: #EB9AB4;
  --accent-wash:   #3A1526;
  --accent-wash-2: #4E1B33;
  --accent-on:     #1A0710;
  --signal:        #E2C368;
  --signal-ink:    #EED89B;
  --signal-wash:   #332B10;
  --signal-on:     #221C00;
  --golge-renk: 0 12px 34px -14px rgba(228, 130, 163, .5);
}