/* Anlatim sayfalarinin stili. Iki dil ayri dosyada ama tasarim tek
   yerde: birini degistirip digerini unutmak mumkun olmasin. */
:root {
    --bg: #fbfaf8; --panel: #fff; --ink: #1c1b19; --muted: #6b6762;
    --line: #e5e1db; --accent: #2f6f4f; --accent-soft: #eef4f0;
    --danger: #a33a2a; --chip: #f1eee9; --radius: 12px;
    /* VURGUNUN USTUNE YAZILAN MUREKKEP, ve ayri bir token olmasi gerekiyor:
       --accent iki ROL tasiyor. Yazi olarak kullaniliyor (link, .wall h3,
       rozet metni) ve ZEMIN olarak kullaniliyor (.btn.primary). Koyu temada
       token aciliyor -- yazi rolu icin dogrusu o -- ve zemin rolunde beyaz
       mürekkep 2.78:1'e dusuyor. Olculdu: tarayicida, iki birincil
       dugmede birden. Tek token iki role yetmiyor, ikinci token de temaya
       bagli olmak zorunda. */
    --accent-ink: #fff;
    /* TIPOGRAFI BIR SECIM, VARSAYILAN DEGIL.
       Web fontu YUKLENMIYOR ve bu bilincli: her ziyaretcinin tarayicisi
       her acilista uc parti bir adrese istek atardi, ve kendi barindirmak
       depoya font ikilileri sokardi. Ikisi de bir yazi tipi icin fazla
       bedel.
       Yerine KASITLI bir yigin: baslikta serif, govdede sans. Zit cift
       karakteri tasiyan sey -- tek bir ailenin agirlik farkindan daha
       cok ayrim veriyor ve bu paletle (sicak kirik beyaz, yesil vurgu)
       editoryal bir ton kuruyor.
       ui-serif once: isletim sisteminin kendi iyi serifini aliyor
       (Apple'da New York). Georgia yedegi Windows ve Mac'te neredeyse
       her zaman var, yani yigin gercekten serif dusuyor -- "serif"
       jenerigine dusen bir yigin tarayicinin cirkin varsayilanini
       veriyordu. */
    --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #171614; --panel: #1f1e1b; --ink: #ece9e4; --muted: #9d9892;
      --line: #322f2b; --accent: #6aa886; --accent-soft: #1d2622;
      --danger: #d98a7a; --chip: #2a2825;
      /* Acilmis vurgunun ustune KOYU murekkep: beyaz 2.78:1 veriyordu.
         Degeri --bg ile ayni ama ondan TURETILMIYOR -- bu token "sayfanin
         zemini" degil "vurgunun ustunde okunan renk" sorusunu
         cevapliyor. */
      --accent-ink: #171614;
    }
  }
  * { box-sizing: border-box; }
  /* Secim rengi de temanin parcasi; varsayilan mavi iki temada da yabanci.
     color-mix ile vurgu renginin soluk hali. */
  ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  /* Kaydirma cubugu ve yerli parcalar temayi buradan ogreniyor. */
  :root { color-scheme: dark light; }
  :root[data-theme="light"] { color-scheme: light; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 16px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); }

  /* Odak halkasi panel.css'tekiyle AYNI: iki dosya ayri ama kullanici
     ayni klavyeyle geziyor ve sayfalar birbirine baglaniyor.
     Tarayicinin kendi halkasi zaten cikiyordu (outline:none hicbir
     yerde yok), yani eksik olan gorunurluk degil TUTARLILIK ve
     kontrast: varsayilan halka vurgu renkli bir baglantinin uzerinde
     zayif kaliyor. */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  .btn:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
    border-radius: 4px;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
  .narrow { max-width: 760px; }

  /* Pano yerlesimi: bolumler kutulara giriyor ve genis ekranda yan yana
     duruyor. Metin genisligi yine sinirli -- 90 karakterlik satir okunmuyor. */
  /* Yan yana duran iki kutu esit yukseklikte olsun; biri kisa kalinca
     satir yamuk goruluyordu. */
  .board { display: grid; gap: 18px; align-items: stretch; }
  @media (min-width: 900px) {
    .board.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px; min-width: 0;
  }
  .panel > h2 { font-size: 20px; margin: 0 0 4px; }
  .panel > .sub { margin: 0 0 18px; font-size: 14.5px; }

  header {
    position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  .bar { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
  .mark { display: block; border-radius: 5px; }
  .mark-lg { display: block; border-radius: 16px; margin: 0 0 22px; }
  .logo { font-weight: 650; letter-spacing: -0.01em; font-size: 17px; }
  .spacer { flex: 1; }
  .btn {
    font: inherit; font-size: 14px; padding: 8px 15px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    text-decoration: none; display: inline-block; cursor: pointer;
  }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .hero { padding: 64px 0 40px; }
  .hero h1 {
    font-size: clamp(32px, 6vw, 48px); line-height: 1.12; letter-spacing: -0.025em;
    margin: 0 0 18px; font-weight: 680;
  }
  .hero .lede { font-size: clamp(17px, 2.4vw, 20px); color: var(--muted); margin: 0 0 28px; max-width: 34em; }
  .hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }

  section { padding: 30px 0; }
  h2 { font-size: clamp(22px, 3.4vw, 27px); letter-spacing: -0.018em; margin: 0 0 10px; font-weight: 660; }
  /* Basliklar serif, GOVDE DEGIL. Uzun metinde serif okunurlugu
     ekranda kazandirmiyor; kazandirdigi yer kisa ve buyuk olan.
     text-wrap: balance son satirda tek kelime birakmiyor -- bir
     baslikta en cok goze batan kusur o. */
  h1, h2, h3, .hero h1 {
    font-family: var(--font-display);
    text-wrap: balance;
    /* Siki tracking SANS icin ayarlanmisti (-0.025em). Serif harfler
       zaten genis ve o siklikta birbirine giriyor; ayrica serifler
       optik olarak daha buyuk gorundugu icin negatif tracking'e daha
       az ihtiyac duyuyor. */
    letter-spacing: -0.01em;
  }
  .sub { color: var(--muted); margin: 0 0 26px; max-width: 36em; }
  h3 { font-size: 17px; margin: 0 0 6px; font-weight: 640; }
  p { margin: 0 0 14px; }

  /* Akış: numaralı adımlar, solda süren bir çizgi. */
  .flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  @media (min-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .flow li {
    position: relative; padding: 16px 18px 16px 62px; min-width: 0;
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  }
  .flow li p { font-size: 14.5px; margin: 0; color: var(--muted); }
  .flow .n { top: 16px; left: 16px; }
  .flow .n {
    position: absolute; width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-soft); border: 1px solid var(--line); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 660;
  }
  .flow .who {
    display: inline-block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    background: var(--chip); color: var(--muted); padding: 2px 8px; border-radius: 99px;
    margin-bottom: 6px;
  }
  .flow .who.human { background: var(--accent-soft); color: var(--accent); }

  .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px;
  }
  .card p { font-size: 14.5px; color: var(--muted); margin: 0; }

  /* Kullanicinin Claude'a yazacagi cumle: govde metninden ayrilsin ki
     "bu bir ornek" oldugu okunmadan once gorunsun. */
  .quote {
    margin: 18px 0; padding: 14px 18px;
    border-left: 3px solid var(--accent); background: var(--accent-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .quote p { margin: 0; font-size: 16px; }

  /* Gerekcenin kendisi. Metnin akisinda kalmali ama okuyan "burasi neden
     boyle" cevabini aradiginda ayirt edebilmeli. */
  .note {
    margin: 18px 0 0; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--chip); font-size: 14.5px; color: var(--muted);
  }

  .wall {
    background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px;
  }
  .wall h3 { color: var(--accent); }
  .wall ul { margin: 12px 0 0; padding-left: 20px; }
  .wall li { margin-bottom: 8px; }

  /* Teknik rehberde arac adlari ve baslik isimleri metnin icinde geciyor;
     govde yazisindan ayrilmazsa hangisinin birebir yazilacagi belirsiz
     kaliyor. */
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em; background: var(--chip); color: var(--ink);
    padding: 1.5px 5px; border-radius: 5px;
    /* Uzun bir arac adi dar ekranda satiri tasirmasin. */
    overflow-wrap: anywhere;
  }
  pre {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 18px;
    overflow-x: auto; margin: 18px 0; line-height: 1.55;
  }
  /* Blok icinde ikinci bir arka plan istemiyoruz: pre zaten kutu. */
  pre code { background: none; padding: 0; font-size: 13.5px; }
  .wall code { background: color-mix(in srgb, var(--accent) 12%, transparent); }

  table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  td:first-child { font-weight: 600; white-space: nowrap; }
  /* Tablo dar ekranda KENDI ICINDE kaysin, sayfayi surukleMESIN.
     `table { width: 100% }` tek basina yetmiyor: yuzde, icerigin dogal
     asgari genisliginin altina inemiyor. Alti sutunlu platform tablosu
     375 piksellik bir ekranda 495 piksel olup paneli asiyor ve butun
     sayfayi yatay kaydiriyordu -- Metrik ve "Gerçek hesapla denendi"
     sutunlari hic gorunmuyordu. `pre` icin ayni cozum (overflow-x: auto)
     zaten vardi; eksik olan tabloydu. */
  .table-scroll { overflow-x: auto; }
  /* Odak izi SART: kapsayici artik tabindex tasiyor, yani klavyeyle gezen
     biri buraya DURUYOR. Izi olmayan bir sekme duragi, kullanicinin nerede
     oldugunu bilmemesi demek. Kural ustteki odak ailesinin aynisi; ayri
     yazilmasinin sebebi o listenin etiketlere bagli olmasi (a, button,
     summary, .btn) ve burasinin bir div olmasi. */
  .table-scroll:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
  }

  .faqs { display: grid; gap: 0 28px; }
  @media (min-width: 900px) { .faqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .faq { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none;
    display: flex; align-items: center; gap: 10px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: "+"; color: var(--accent); font-weight: 700; width: 14px; }
  .faq[open] summary::before { content: "−"; }
  .faq p { margin: 0 0 15px; color: var(--muted); font-size: 15px; }

  footer { padding: 40px 0 60px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

  /* Dokunma hedefi -- panel.css'teki kuralin aynisi ve ayni gerekce:
     olcut genislik degil isaretci turu. Bu sayfalarin dugmeleri az ama
     onlar SITENIN DISA ACIK YUZU, yani telefondan gelen ilk ziyaretci
     tam olarak burayi tikliyor. */
  @media (pointer: coarse) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; }
  }

  /* Ayni blok panel.css'te de var ve ikisi de gerekli: bu iki dosya hic
     birlikte yuklenmiyor (panel sayfalari panel.css, anlatim sayfalari
     page.css). Burada ayrica sart cunku ustteki "scroll-behavior:
     smooth" TAM OLARAK bu tercihin kapatmasi gereken sey -- ve
     yumusak kaydirma bir baglantiya her tiklandiginda kosuyor. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }