/*
 * Tanitim ve zorunlu sayfalar — TEK CSS, derleme YOK.
 *
 * NEDEN BUILD YOK: bu dosyalar Caddy'nin `file_server`i tarafindan oldugu
 * gibi sunuluyor. Bir derleme adimi eklemek, mağaza gonderimi icin gereken
 * uc sayfayi bir araca bagimli hale getirirdi.
 *
 * Renkler `@vb/design-tokens`'in degerleridir ve BURADA ELLE yazilidir —
 * istisna bilincli: bu sayfalar uygulamanin parcasi degil, paketi import
 * edemiyor. Her degisken yaninda kaynak token adi yazili; token degisirse
 * buradaki deger de ELLE guncellenir.
 *
 * KARANLIK TEMA (18 Eki 2026): panel ADR 0007'deki `darkTheme` setini
 * kullaniyor ve secim yoksa OS tercihini izliyor. Site ayni davranisi
 * tasir — ama SECIM YOK, cunku sayfalarda JS yok (CSP `script-src 'none'`)
 * ve bir tema dugmesi JS ister. Yani burada tek kaynak `prefers-color-scheme`.
 * Panelde karanlik, sitede aydinlik duran bir tarayici markayi ikiye boler.
 *
 * CSP SINIRI: `style-src 'self'` satir ici `style="..."` niteligini
 * ENGELLER — her deger bu dosyada durur. `img-src 'self'` de `data:` URI'yi
 * engeller; gorsel ya yerel bir dosyadir (`marka.svg`) ya da CSS gradyanidir.
 */

:root {
  /* Yuzeyler */
  --zemin: #fdfbf7;            /* colors.background      (palette.cream) */
  --yuzey: #ffffff;            /* colors.surface         (palette.white) */
  --cokuk: #f5f1e9;            /* colors.surfaceSunken   (palette.whisper) */

  /* Metin */
  --metin: #1e293b;            /* colors.textPrimary     (palette.slate800) */
  --ikincil: #475569;          /* colors.textSecondary   (palette.slate600) */
  --soluk: #5a6675;            /* colors.textMuted       (palette.slate500) */

  /* Kenarliklar */
  --kenar: #e0d9cc;            /* colors.border */
  --kenar-ince: #f5f1e9;       /* colors.borderSubtle */
  --odak: #d97706;             /* colors.focus           (palette.amber600) */

  /* Birincil eylem */
  --birincil: #f59e0b;         /* colors.primary         (palette.amber500) */
  --birincil-basili: #d97706;  /* colors.primaryPressed  (palette.amber600) */
  --birincil-uzeri: #422006;   /* colors.textOnPrimary — kontrast 6.79:1 (ADR 0007) */
  --birincil-yumusak: #fef3c7; /* colors.primarySoft     (palette.amber100) */
  --birincil-yumusak-metin: #8a4b08; /* colors.primarySoftText (palette.amber800) */

  /* Alan renkleri — anlam tasir, dekoratif degil (DESIGN.md).
     Mandalina (colors.urgent) burada YOK: tanitim sayfasinda acil bir sey
     yok ve kullanilmayan bir renk, sonra anlamsiz bir yere yapistirilir. */
  --uyku-yumusak: #e0f2fe;     /* colors.sleepSoft */
  --uyku-metin: #0369a1;       /* colors.sleepText */
  --besin: #10b981;            /* colors.nutrition — kahraman isik halkasi */
  --besin-yumusak: #d1fae5;    /* colors.nutritionSoft */
  --besin-metin: #047857;      /* colors.nutritionText */

  /* Baglanti — krem zemin uzerinde olculmus amber tonu */
  --bag: #a15c07;

  /*
   * Golge SICAK tonlu, notr siyah DEGIL (DESIGN.md). Karanlik temada ayni
   * golge gorunmez kalir; orada deger duz siyaha ve daha derine gider.
   */
  --golge: 0 1px 2px rgba(66, 32, 6, 0.05), 0 10px 28px -16px rgba(66, 32, 6, 0.22);
  --golge-yuksek: 0 2px 4px rgba(66, 32, 6, 0.06), 0 18px 40px -20px rgba(66, 32, 6, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Karanlik tema — ters cevirme DEGIL, ayri ayarlanmis tonal set.
       Zemin sicak is siyahi; mavi-gri bir karanlik tema markayi sogutur. */
    --zemin: #14110c;          /* darkTheme.background   (palette.soot) */
    --yuzey: #1d1913;          /* darkTheme.surface      (palette.sootRaised) */
    --cokuk: #17140f;          /* darkTheme.surfaceSunken */

    --metin: #f7f2e8;          /* darkTheme.textPrimary  (palette.linen) */
    --ikincil: #c9beab;        /* darkTheme.textSecondary (palette.linenDim) */
    --soluk: #9c917e;          /* darkTheme.textMuted    (palette.linenMuted) */

    --kenar: #443a2b;          /* darkTheme.border */
    --kenar-ince: #2c2519;     /* darkTheme.borderSubtle */
    --odak: #fcd34d;           /* darkTheme.focus        (palette.amber300) */

    --birincil: #fbbf24;       /* darkTheme.primary      (palette.amber400) */
    --birincil-basili: #fcd34d;
    --birincil-uzeri: #422006; /* amber karanlikta da acik kalir */
    --birincil-yumusak: #3a2a0a;        /* darkTheme.primarySoft */
    --birincil-yumusak-metin: #fcd34d;  /* darkTheme.primarySoftText */

    --uyku-yumusak: #0c2a3d;   /* palette.skyDeep */
    --uyku-metin: #7dd3fc;
    --besin: #34d399;
    --besin-yumusak: #0c2e22;  /* palette.mintDeep */
    --besin-metin: #6ee7b7;

    --bag: #fcd34d;

    --golge: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
    --golge-yuksek: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/*
 * Iki genislik: `.kap` okuma sutunu (KVKK metinleri), `.kap.genis` yerlesim
 * rayı (baslik, altbilgi, anasayfa izgaralari). Hukuki metin 1040px'e
 * yayilirsa satir uzunlugu okunabilirligin disina cikar.
 */
.kap { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.kap.genis { max-width: 1060px; }

/*
 * Genis kapta DUZ metin hala okuma sutununda kalir. Izgara 1060px'e
 * yayilabilir ama bir paragraf yayilamaz: 1060px'te satir ~110 karakter
 * olur ve goz satir basini kaybeder.
 */
main.genis > p, .kutu p { max-width: 68ch; }

/*
 * Metin sayfalari (gizlilik, destek, hesap silme). Yerlesim rayi basligin
 * ve altbilginin rayiyla AYNI; okuma sutunu iceride 72ch'e sinirli ve SOLA
 * yasli. Ortalansaydi icerik, baslikdaki marka hizasindan ~150px icerden
 * baslar ve sayfa kaymis gorunurdu.
 */
main.yazi > * { max-width: 72ch; }

h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 23px; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 0 0 6px; }
p, li { color: var(--metin); }
.ikincil { color: var(--ikincil); }

a { color: var(--bag); }

/* Klavye odagi DAIMA gorunur, asla kaldirilmaz (DESIGN.md). */
a:focus-visible, .dugme:focus-visible {
  outline: 2px solid var(--odak);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Baslik ─────────────────────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--kenar-ince);
  background: var(--yuzey);
}
header .kap { padding-block: 14px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header nav { display: flex; gap: 20px; flex-wrap: wrap; }
header a { color: var(--ikincil); text-decoration: none; }
header a:hover { color: var(--metin); }

/* Marka — amber kare + ad. Kare `marka.svg`; panel icindeki marka yuzuyle
   ayni glif, ayni kose orani. CSS url'i BU dosyaya gore cozulur, yani
   `/en/` altindaki sayfalar da ayni dosyayi alir. */
.marka { display: flex; align-items: center; gap: 10px; color: var(--metin); }
.marka-im {
  width: 34px;
  height: 34px;
  flex: none;
  background: url(marka.svg) center / contain no-repeat;
}
.marka strong { font-size: 18px; letter-spacing: -0.01em; }

header .giris-bag {
  margin-left: auto;
  color: var(--metin);
  font-weight: 600;
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: 9px 16px;
  transition: background 180ms ease, border-color 180ms ease;
}
header .giris-bag:hover { background: var(--cokuk); border-color: var(--kenar); }

/* ── Kahraman bolumu ────────────────────────────────────────────────────── */

/*
 * Panelin giris ekranindaki marka yuzunun site karsiligi: yumusak amber
 * zemin + iki bulanik isik halkasi (`MarkaYuzu.tsx` ile ayni olculer).
 * Gorsel yuklemeden "gunes" tarafini veriyor — CSP zaten dis kaynaga
 * izin vermiyor.
 */
.kahraman {
  position: relative;
  overflow: hidden;
  background: var(--birincil-yumusak);
  border-bottom: 1px solid var(--kenar);
}
.kahraman::before,
.kahraman::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
}
.kahraman::before {
  width: 560px; height: 560px;
  right: -15%; top: -45%;
  background: var(--birincil);
  opacity: 0.18;
}
.kahraman::after {
  width: 460px; height: 460px;
  left: -10%; bottom: -55%;
  background: var(--besin);
  opacity: 0.14;
}
.kahraman .kap { position: relative; padding-block: 56px 52px; }
.kahraman h1 { max-width: 18ch; font-size: 46px; text-wrap: balance; }
.kahraman .giris-metin { max-width: 54ch; font-size: 19px; color: var(--ikincil); margin: 0 0 24px; }

/* Ust rozet — "kimin icin" bilgisini basligin ustunde verir. */
.rozet {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  color: var(--birincil-yumusak-metin);
  font-size: 14px;
  font-weight: 600;
}

/* Kahraman altindaki kisa guvence satiri. */
.kahraman-maddeler {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--ikincil);
  font-size: 15px;
}
.kahraman-maddeler li { display: flex; align-items: center; gap: 8px; }
.kahraman-maddeler svg { flex: none; color: var(--besin-metin); }

/* ── Dugmeler ───────────────────────────────────────────────────────────── */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--birincil);
  color: var(--birincil-uzeri);   /* kontrast 6.79:1 (ADR 0007) */
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  min-height: 48px;               /* dokunma hedefi (DESIGN.md) */
  line-height: 24px;
  box-shadow: var(--golge);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.dugme:hover { background: var(--birincil-basili); box-shadow: var(--golge-yuksek); }
.dugme:active { transform: scale(0.98); }   /* DESIGN.md: basilinca 0.98 */

/*
 * Ikincil dugme — ayni olcu, dolgusuz.
 *
 * Birincil dugme amber dolgulu ve sayfada TEK birincil eylem olmali
 * (DESIGN.md). Anasayfada iki cagri var ("giris" ve "okulum icin bilgi");
 * ikincisi kenarlikli.
 */
.dugme.ikinci {
  background: var(--yuzey);
  color: var(--metin);
  border: 1px solid var(--kenar);
}
.dugme.ikinci:hover { background: var(--cokuk); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ── Kartlar ────────────────────────────────────────────────────────────── */

.kutu {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 24px;            /* DESIGN.md: kart 24px, 90 derece kose yasak */
  padding: 24px;
  margin: 20px 0;
  box-shadow: var(--golge);
}
.kutu h2:first-child { margin-top: 0; }

/* Bolum basligi — ustunde kisa amber cizgi, "sade" gorunumu kiran isaret. */
.bolum-basi { margin-top: 56px; }
/* Kahramandan hemen sonra gelen ilk bolum: `.kap` zaten ust bosluk veriyor. */
main > .bolum-basi:first-child { margin-top: 4px; }
.bolum-basi::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--birincil);
  margin-bottom: 14px;
}
.bolum-basi h2 { margin-top: 0; }
.bolum-giris { color: var(--ikincil); max-width: 60ch; margin: 0 0 4px; }

/* Ozellik kartlari — anasayfadaki "Neler var" izgarasi. */
.ozellik { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 20px; }
.ozellik-kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--golge);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.ozellik-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-yuksek); }
.ozellik-kart p { margin: 0; font-size: 15px; }

/*
 * Ikon pulu. Renk ANLAM tasir (DESIGN.md): amber birincil, gokyuzu uyku ve
 * iletisim, nane beslenme ve olumlu onay. Her cift `*-yumusak` / `*-metin`
 * tokenlarindan gelir, yani kontrasti olculmus.
 *
 * MANDALINA (acil) BILEREK YOK: DESIGN.md'de "canli teslim alma bildirimi"
 * demek ve tanitim sayfasinda acil bir sey yok. Kullanilmayan bir kural
 * birakmak, sonra onu anlamsiz bir karta yapistirmanin kapisi.
 */
.pul {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.pul.amber { background: var(--birincil-yumusak); color: var(--birincil-yumusak-metin); }
.pul.gok   { background: var(--uyku-yumusak);     color: var(--uyku-metin); }
.pul.nane  { background: var(--besin-yumusak);    color: var(--besin-metin); }

/* ── Fark kartlari ──────────────────────────────────────────────────────── */

.fark { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 20px; }
.fark-kart {
  background: var(--cokuk);
  border: 1px solid var(--kenar-ince);
  border-radius: 24px;
  padding: 24px;
}
.fark-kart h3 { font-size: 18px; }
.fark-kart p { margin: 0; color: var(--ikincil); font-size: 15px; }
.fark-no {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--birincil);
  color: var(--birincil-uzeri);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}

/* ── Giris kartlari ─────────────────────────────────────────────────────── */

/* Veli mobilden, okul calisani panelden girer — iki ayri kart. */
.giris { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.giris-kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--golge);
}
.giris-kart p { margin: 0 0 12px; color: var(--ikincil); font-size: 15px; }
.giris-kart p:last-child { margin-bottom: 0; }

/* ── Kapanis cagrisi ────────────────────────────────────────────────────── */

.cagri {
  position: relative;
  overflow: hidden;
  background: var(--birincil-yumusak);
  border: 1px solid var(--kenar);
  border-radius: 24px;
  padding: 36px 28px;
  margin-top: 56px;
  text-align: center;
}
.cagri::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  right: -12%; top: -140%;
  border-radius: 999px;
  background: var(--birincil);
  opacity: 0.16;
  filter: blur(80px);
  pointer-events: none;
}
.cagri > * { position: relative; }
.cagri h2 { margin-top: 0; }
.cagri p { color: var(--ikincil); max-width: 52ch; margin: 0 auto 20px; }
.cagri .eylemler { justify-content: center; }

/* ── Altbilgi ───────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--kenar-ince); background: var(--yuzey); }
footer .kap { padding-block: 28px; color: var(--ikincil); font-size: 15px; }
footer a { color: var(--ikincil); text-decoration: none; }
footer a:hover { color: var(--metin); text-decoration: underline; }
.alt-ust { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.alt-ust nav { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-left: auto; }
.alt-not { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--kenar-ince); color: var(--soluk); font-size: 14px; }

/* ── Dar ekran ──────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .kahraman h1 { font-size: 34px; }
  .kahraman .kap { padding-block: 40px 36px; }
  .kahraman .giris-metin { font-size: 17px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 28px; }
  .kahraman h1 { font-size: 30px; }
  header .kap { gap: 12px; }
  header nav { gap: 14px; font-size: 15px; }
  /* Dar ekranda dugmeler alt alta — yan yana sigmiyor ve 48px hedef bozuluyor. */
  .eylemler { flex-direction: column; align-items: stretch; }
  .alt-ust nav { margin-left: 0; }
}

/* Hareket azaltma tercihi — DESIGN.md animasyon suresi 150-300ms, ama
   tercih varsa hic oynamaz. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .ozellik-kart:hover { transform: none; }
}