/* ============================================================
   ZERO WASTE AKADEMI — birlesik stil dosyasi
   OTOMATIK URETILDI: python3 design/build.py
   Kaynak: design/src/{tokens,components,screens,motion,game}.css
   Bu dosyayi elle duzenlemeyin.
   ============================================================ */
/* --- Degisken fontlar (latin + latin-ext: TR karakterleri) --- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   ZERO WASTE AKADEMI — TASARIM TOKENLARI
   Yön: "Filiz" (5 alternatiften seçilen) — bkz. tasarim/Sifir-Atik-Akademi-Tasarim-Onerileri.pdf
   Tek token seti, iki tema: "Gün Işığı" (açık) / "Gece Ormanı" (koyu — Filiz maketinde
   tanımlı değildi, mevcut token yapısına aynı mantıkla türetildi).
   ============================================================ */

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

/* [hidden] satir ici display bildirimlerini de yenmeli — sekme panelleri ve
   sinav sonucu display:grid tasidigi icin tarayici varsayilani yetmiyor. */
[hidden] {
  display: none !important;
}

.zwa {
  /* --- Yuzeyler --------------------------------------------------- */
  --canvas: #f3faf5; /* Filiz zemin */
  --surface: #ffffff;
  --surface-2: #eaf5ee;
  --surface-3: #dceee3;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-brd: rgba(16, 38, 28, 0.08);

  /* --- Metin ------------------------------------------------------ */
  --text: #10261c;
  --text-2: #4e6a5c;
  --text-3: #567363; /* AA (4.9:1) — eski sistemdeki 3.25:1 kontrast bulgusu burada duzeltildi */
  --text-inv: #ffffff;

  /* --- Cizgiler --------------------------------------------------- */
  --brd: #dceee3;
  --brd-strong: #c3ddcb;

  /* --- Fok Mavi Tonlar -------------- */

  --fok: #61a3ea;

  /* --- Marka (Filiz yesili) ----------------------------------------- */
  --brand: #21a366;
  --brand-2: #17784a; /* koyu — hover/basili */
  --brand-3: #4ed18f; /* acik — gradyan/vurgu */
  --brand-tint: #cfeedc;
  --brand-tint-2: #b6e4c8;
  --on-brand: #ffffff;
  --brand-glow: rgba(33, 163, 102, 0.26);

  /* --- Anlamsal (enum durumlari) — Filiz aksan paletinden turetildi -- */
  --gold: #8a5b10;
  --gold-tint: #fff3d6; /* sertifika/rozet (sun #FFC94D) */
  --info: #1f5c96;
  --info-tint: #dcebf8; /* isleniyor      (blue #3F86C9) */
  --warn: #9a4a14;
  --warn-tint: #ffe9da; /* bekliyor       (orange #FF8A4C) */
  --danger: #b23a3a;
  --danger-tint: #fde4e4; /* basarisiz */
  --neutral: #5c6660;
  --neutral-tint: #ecf2ee; /* taslak */

  /* --- Golgeler (Filiz'de daha yumusak, daha az dramatik) ---------- */
  --sh-1: 0 1px 2px rgba(16, 38, 28, 0.05);
  --sh-2: 0 6px 16px rgba(16, 38, 28, 0.06);
  --sh-3: 0 18px 40px rgba(16, 38, 28, 0.08);
  --sh-4: 0 30px 70px rgba(16, 38, 28, 0.12);
  --sh-brand: 0 10px 26px rgba(33, 163, 102, 0.28);

  /* --- Foto zemin ortusu (auth ekrani / panel karsilama seridi) ---- */
  --hero-veil: linear-gradient(
    180deg,
    rgba(243, 250, 245, 0.06) 0%,
    rgba(243, 250, 245, 0.68) 62%,
    var(--canvas) 100%
  );
  --hero-tint: rgba(8, 20, 12, 0.34);

  /* --- Olcu — Filiz'in daha yuvarlak, daha samimi kose olcegi ------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Kaydirmaya bagli sahnelerde JS easeOut'tan (1-(1-v)^3) geciriyor; bu
     onun CSS karsiligi — ayni his, gecisle surulen yerlerde. */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  /* Dongusel hareketler: iki ucta da simetrik, cember uzerinde donen
     seyler dogrusal hizlanmayla mekanik duruyor (bkz. motion.css). */
  --ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
  --dur: 0.32s;
  --dur-2: 0.6s;
  --dur-3: 1.1s; /* ilerleme dolusu — mevcut .bar (1s) / .ring (1.1s) ile ayni olcek */

  --font-display:
    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* --- Filiz aksan renkleri — illustrasyon / dekoratif kullanim ---- */
  --accent-sun: #ffc94d;
  --accent-orange: #ff8a4c;
  --accent-blue: #3f86c9;
  --accent-sky: #dcebf8;
  --accent-pink: #ffd9cb;

  /* --- Kuraklik paleti — ilerleme gostergesinin %0 ucu (bkz. motion.css)
     Ilerleme arttikca bu tonlardan canli karsiliklarina gecilir; gecis
     color-mix ile hesaplandigi icin ara ton tanimlamaya gerek yok.
     Canli karsiliklar: --dry-leaf -> --brand, --dry-ground -> --brand-tint,
     --dry-sky -> --accent-sky, --dry-bark -> --bark. */
  --dry-bark: #a8926f;
  --dry-leaf: #c9ba92;
  --dry-ground: #e4d9be;
  --dry-sky: #f2ead6;
  --bark: #6b4a2e;

  /* --- Kumbara renkleri — Sifir Atik Yonetmeligi (2019) renk skalasi ----
     Uydurma degil, resmi kod: oyunun gercek hayatta karsiligi olmasi buna
     bagli. Renk METIN ZEMINI OLARAK KULLANILMIYOR (sari uzerine okunur metin
     bulmak zor); yalnizca ikon diski ve kenarlik aksani olarak, adin yaninda.
     Boylece kontrast renge bagli kalmiyor ve renk korlugunde de ad okunuyor. */
  --bin-paper: #1668b3; /* mavi  — kagit / karton */
  --bin-plastic: #c79400; /* sari  — plastik */
  --bin-glass: #2e9e4b; /* yesil — cam */
  --bin-metal: #78838a; /* gri   — metal */

  color-scheme: light;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   KOYU TEMA — "Gece Ormani" (Filiz paletinden turetildi)
   ============================================================ */
.zwa[data-theme="dark"] {
  --canvas: #0b1912;
  --surface: #11241a;
  --surface-2: #17301f;
  --surface-3: #1e3b27;
  --glass: rgba(17, 36, 26, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.1);

  --text: #eaf6ee;
  --text-2: #9dc0ac;
  --text-3: #74987f;

  --brd: rgba(255, 255, 255, 0.1);
  --brd-strong: rgba(255, 255, 255, 0.18);

  --brand: #3add8a;
  --brand-2: #2fbe79;
  --brand-3: #6eebae;
  --brand-tint: rgba(58, 221, 138, 0.14);
  --brand-tint-2: rgba(58, 221, 138, 0.22);
  --on-brand: #06170e;
  --brand-glow: rgba(58, 221, 138, 0.32);

  --gold: #ffcb61;
  --gold-tint: rgba(255, 203, 97, 0.14);
  --info: #6eb6f2;
  --info-tint: rgba(110, 182, 242, 0.14);
  --warn: #ffa05c;
  --warn-tint: rgba(255, 160, 92, 0.14);
  --danger: #ff7a7a;
  --danger-tint: rgba(255, 122, 122, 0.14);
  --neutral: #9fb3a6;
  --neutral-tint: rgba(255, 255, 255, 0.07);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 6px 18px rgba(0, 0, 0, 0.4);
  --sh-3: 0 18px 44px rgba(0, 0, 0, 0.5);
  --sh-4: 0 32px 80px rgba(0, 0, 0, 0.6);
  --sh-brand: 0 10px 30px rgba(58, 221, 138, 0.26);

  --hero-veil: linear-gradient(
    180deg,
    rgba(11, 25, 18, 0.1) 0%,
    rgba(11, 25, 18, 0.72) 58%,
    var(--canvas) 100%
  );
  --hero-tint: rgba(4, 10, 7, 0.6);

  --accent-sun: #ffd273;
  --accent-orange: #ff9e6e;
  --accent-blue: #6eb6f2;
  --accent-sky: rgba(110, 182, 242, 0.16);
  --accent-pink: #ffc2ac;

  --dry-bark: #6e6151;
  --dry-leaf: #7a7059;
  --dry-ground: #2a2318;
  --dry-sky: rgba(255, 255, 255, 0.06);
  --bark: #8c6845;

  /* Koyu zeminde ayni renkler soneliyor; ton korunup aciliyor. */
  --bin-paper: #5aa8e8;
  --bin-plastic: #f5ce45;
  --bin-glass: #56c97a;
  --bin-metal: #a9b3b9;

  color-scheme: dark;
}

/* ============================================================
   TIPOGRAFI
   ============================================================ */
.zwa h1,
.zwa h2,
.zwa h3,
.zwa h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--text);
}
.zwa h1 {
  font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem);
}
.zwa h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem);
}
.zwa h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 600;
}
.zwa h4 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.zwa p {
  margin: 0;
}
.zwa a {
  color: inherit;
  text-decoration: none;
}
.zwa img {
  max-width: 100%;
  display: block;
}
/* Ciplak <button> reseti — ozgullugu (1 sinif + 1 tur) BILINCLI OLARAK
   DUSUK tutuluyor. :not(...) eklenerek daraltilmamali: her :not() bir sinif
   daha sayilir ve reset, iki sinifli bilesen kurallarini (.zwa .zwgame__item
   gibi) da ezmeye baslar.

   Bu resetten daha ozgul olmasi gereken bilesenler .zwa ile on eklenerek
   yazilir (bkz. .zwa .btn, .zwa .tab). Iki sinif (2) > bir sinif + bir tur
   (1) oldugu icin bilesen kazanir. */
.zwa button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.zwa ul,
.zwa ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sans-serif baslik ile ayni aile oldugundan artik yalnizca agirlik farki */
.zwa .ui-h {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Etiket / ustyazilar */
.zwa .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.zwa[data-theme="dark"] .eyebrow {
  color: var(--brand-3);
}
.zwa .muted {
  color: var(--text-2);
}
.zwa .muted-3 {
  color: var(--text-3);
}
.zwa .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Marka gradyanli baslik dolgusu */
.zwa .grad-text {
  background: linear-gradient(
    96deg,
    var(--brand-2) 0%,
    var(--brand) 55%,
    var(--brand-3) 108%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Filiz'e ozgu: baslikta vurgu altcizgisi (bkz. hero h1 <u>)
   z-index:0 SUS DEGIL: altcizgi ::after uzerinde z-index:-1 ile metnin
   ARKASINA konuyor. .hl kendi yigin baglamini kurmazsa -1 en yakin
   baglama kadar geri gidiyor ve basligi tasiyan bolumun OPAK zemininin
   altina dusup kayboluyordu. Cizgi yalnizca giris animasyonu boyunca
   goruluyordu: .rv gecisi sirasinda h1'in transform/opacity'si gecici
   bir yigin baglami kuruyor, gecis bitince o baglam da kalkiyordu. */
.zwa .hl {
  text-decoration: none;
  position: relative;
  z-index: 0;
  white-space: nowrap;
  font-weight: 700;
}
.zwa .hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.03em;
  height: 0.4em;
  background: var(--accent-sun);
  border-radius: var(--r-pill);
  z-index: -1;
  opacity: 0.85;
  transform: rotate(-1deg);
}

/* ============================================================
   ZERO WASTE AKADEMI — BILESEN KUTUPHANESI (Yön: Filiz)
   ============================================================ */

/* ---------- 0. Marka isareti ------------------------- */
.zwa-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
  display: grid;
  place-items: center;
}
.zwa-mark svg {
  width: 20px;
  height: 20px;
  color: #fff;
}
.zwa-mark--sm {
  width: 28px;
  height: 28px;
}
.zwa-mark--sm svg {
  width: 15px;
  height: 15px;
}

/* Tema secici (baslikta / panelde) */
.zwa-theme {
  display: flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--brd);
}
.zwa-theme button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-3);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.zwa-theme button svg {
  width: 14px;
  height: 14px;
}
.zwa-theme button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--brand-2);
  box-shadow: var(--sh-1);
}
.zwa[data-theme="dark"] .zwa-theme button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--brand);
}
/* hero uzerindeki saydam baslik icinde */
.site-hd--over .zwa-theme {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
}
.site-hd--over .zwa-theme button {
  color: rgba(255, 255, 255, 0.76);
}
.site-hd--over .zwa-theme button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-2);
  box-shadow: none;
}

/* ---------- 2. Butonlar ------------------------------------- */
/* Secicilere .zwa on eki SART: tokens.css'teki ".zwa button" reseti
   (1 sinif + 1 tur) on eksiz ".btn--primary"den (1 sinif) daha ozgul.
   On eksiz birakilirsa <button class="btn"> zeminini, kenarligini, yazi
   tipini ve rengini kaybeder — ~58 form/giris/sinav dugmesi boyle bozuktu.
   <a class="btn"> etkilenmedigi icin ayni sayfada link-dugme dogru,
   buton-dugme bozuk ciziliyor ve fark gozden kaciyordu. */
.zwa .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.zwa .btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.zwa .btn:active {
  transform: translateY(1px) scale(0.98);
}

.zwa .btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}
.zwa .btn--primary:hover {
  background: var(--brand-2);
  transform: translateY(-1px);
  box-shadow: var(--sh-brand);
}

.zwa .btn--ghost {
  background: var(--surface-2);
  color: var(--text);
}
.zwa .btn--ghost:hover {
  background: var(--surface-3);
}
.zwa .btn--outline {
  border: 1.5px solid var(--brd-strong);
  color: var(--text);
  background: transparent;
}
.zwa .btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand-2);
  background: var(--brand-tint);
}
.zwa .btn--glass {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(12px);
}
.zwa .btn--glass:hover {
  background: rgba(255, 255, 255, 0.26);
}
.zwa .btn--gold {
  background: var(--accent-sun);
  color: #3a2400;
}
.zwa .btn--orange {
  background: var(--accent-orange);
  color: #3a1704;
}
.zwa .btn--danger {
  background: var(--danger-tint);
  color: var(--danger);
}
.zwa .btn--sm {
  padding: 8px 15px;
  font-size: 0.82rem;
}
.zwa .btn--sm svg {
  width: 14px;
  height: 14px;
}
.zwa .btn--lg {
  padding: 16px 30px;
  font-size: 1rem;
}
.zwa .btn--lg svg {
  width: 18px;
  height: 18px;
}
.zwa .btn--block {
  width: 100%;
}
.zwa .btn--icon {
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
}
.zwa .btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- 3. Rozet / etiket -------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 0.715rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--neutral-tint);
  color: var(--neutral);
  white-space: nowrap;
}
.badge svg {
  width: 12px;
  height: 12px;
}
.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--plain::before {
  display: none;
}
.badge--brand {
  background: var(--brand-tint);
  color: var(--brand-2);
}
.badge--gold {
  background: var(--gold-tint);
  color: var(--gold);
}
.badge--info {
  background: var(--info-tint);
  color: var(--info);
}
.badge--warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.badge--danger {
  background: var(--danger-tint);
  color: var(--danger);
}
.badge--solid {
  background: var(--brand);
  color: var(--on-brand);
}
.badge--glass {
  background: rgba(16, 38, 28, 0.46);
  color: #fff;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* canli nokta (isleniyor / yayinda) */
.badge--live::before {
  animation: pulse 1.7s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(1.45);
  }
}

/* ---------- 4. Kart ----------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card--pad {
  padding: 24px;
}
.card--glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-2);
}
.card--hover {
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    border-color 0.22s;
}
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
  border-color: var(--brd-strong);
}

/* ---------- 5. Egitim karti (foto zeminli — katalog / panel) --- */
.ccard {
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.26s var(--ease),
    box-shadow 0.26s var(--ease),
    border-color 0.22s;
}
.ccard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--brand-tint-2);
}
.ccard__media {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--surface-2);
}
.ccard__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.ccard:hover .ccard__img {
  transform: scale(1.05);
}
.ccard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 20, 14, 0.32) 0%,
    transparent 38%,
    transparent 58%,
    rgba(8, 20, 14, 0.58) 100%
  );
}
.ccard__top {
  position: absolute;
  top: 11px;
  left: 11px;
  right: 11px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.ccard__bot {
  position: absolute;
  bottom: 11px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.ccard__body {
  padding: 17px 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.ccard__cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.ccard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.ccard__desc {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
}
.ccard__foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--brd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ccard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 2;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.ccard:hover .ccard__play {
  opacity: 1;
}
.ccard__play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

/* ---------- 5b. Filiz ikon karti (ana sayfa egitim seçkisi) ---- */
.tile {
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    border-color 0.22s;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--brand-tint-2);
}
.tile__ico {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.tile__ico svg {
  width: 26px;
  height: 26px;
}
.tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.tile__desc {
  font-size: 0.87rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 16px;
}
.tile__chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ---------- 6. Ilerleme ------------------------------------- */
.bar {
  display: block;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: var(--brand);
  transition: width 1s var(--ease);
}
.bar--thin {
  height: 5px;
}
.bar--gold > i {
  background: var(--accent-sun);
}

.ring {
  display: grid;
  place-items: center;
  position: relative;
}
.ring svg {
  transform: rotate(-90deg);
  overflow: visible;
}
.ring circle {
  fill: none;
  stroke-linecap: round;
}
.ring .trk {
  stroke: var(--surface-3);
}
/* --c cevre uzunlugu: fillRing (app.js) her halka icin kendi r'sinden
   hesaplayip satir ici yazar. Yedek deger, JS o halkaya hic ulasamazsa
   devreye girer ve buradaki hangisinin dogru oldugu sorusunu belirler:
   1000 buradaki her cevreden buyuk oldugu icin halka BOS cizilir.
   Yedeksiz birakildiginda bildirim gecersiz sayilip stroke-dasharray
   "none" oluyordu — yani halka, puandan bagimsiz olarak DOLU gorunuyordu.
   Bos halka eksik bilgi, dolu halka yanlis bilgi. */
.ring .val {
  stroke: var(--brand);
  stroke-dasharray: var(--c, 1000);
  stroke-dashoffset: var(--c, 1000);
  transition: stroke-dashoffset 1.1s var(--ease);
}
/* place-items OGEYI KENDI ALANINDA ortalar, place-content ise SATIR
   IZLERINI kabin icinde toplar. Ikisi ayri sey: yalnizca place-items
   varken iki satirli icerikte (rakam + alt yazi) izler kabi doldurup
   ikiye bolunuyor ve rakam ust yarinin, alt yazi alt yarinin ortasina
   oturuyordu. place-content ikisini tek blok olarak ortaliyor. */
.ring__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  line-height: 1.05;
}

/* ---------- 7. Form ----------------------------------------- */
.field {
  display: grid;
  gap: 7px;
}
.field > label {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-2);
}
.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 0.89rem;
  background: var(--surface);
  border: 1.5px solid var(--brd-strong);
  color: var(--text);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px var(--brand-tint);
}
.textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.55;
}
.select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23567363' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}
.input-icon {
  position: relative;
}
.input-icon svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-3);
}
.input-icon .input {
  padding-left: 40px;
}

/* Sifre goster/gizle dugmesi (giris + kayit ekranlari).
   --pw varyanti SART: metin dugmenin altina girmesin diye sag dolgu
   yalnizca goz tasiyan alanlara veriliyor, diger .input-icon alanlari
   (e-posta) etkilenmiyor. */
.input-icon--pw .input {
  padding-right: 42px;
}
/* .zwa on eki SART: ".zwa button" reseti (1 sinif + 1 tur) on eksiz
   ".pw-eye"den (1 sinif) daha ozgul olurdu ve rengi/imleci ezerdi —
   ayni gerekce .btn ve .tab'da da yazili (bkz. 2. Butonlar). */
.zwa .pw-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-3);
  transition:
    color 0.16s,
    background 0.16s;
}
.zwa .pw-eye:hover {
  color: var(--text-2);
  background: var(--surface-2);
}
.zwa .pw-eye:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* Ustteki ".input-icon svg" kurali alandaki TUM svg'leri sola mutlak
   konumluyor (soldaki kilit ikonu icin yazilmis). Goz ikonu dugmenin
   ICINDE akmali; iki sinif + bir tur, o kuralin ozgullugunu yeniyor. */
.input-icon .pw-eye svg {
  position: static;
  transform: none;
  width: 17px;
  height: 17px;
  color: inherit;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 0.86rem;
}
.check__box {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.6px solid var(--brd-strong);
  flex: none;
  display: grid;
  place-items: center;
  transition: all 0.18s var(--ease);
  background: var(--surface);
}
.check__box svg {
  width: 12px;
  height: 12px;
  color: var(--on-brand);
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.18s var(--ease);
}
.check[data-on="1"] .check__box {
  background: var(--brand);
  border-color: var(--brand);
}
.check[data-on="1"] .check__box svg {
  opacity: 1;
  transform: scale(1);
}

.switch {
  width: 42px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  position: relative;
  transition: background 0.22s var(--ease);
  flex: none;
  cursor: pointer;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform 0.22s var(--ease);
}
.switch[data-on="1"] {
  background: var(--brand);
}
.switch[data-on="1"]::after {
  transform: translateX(18px);
}

/* ---------- 8. Sekmeler ------------------------------------- */
/* .zwa on eki butonlardakiyle ayni sebeple (bkz. 2. Butonlar): .tab hem
   <button> hem <a> olarak kullaniliyor ve on eksiz halde reset punto ile
   agirligi eziyordu — ayni sekme seridinde ikisi farkli boyda ciziliyordu. */
/* Onceki surumde sekmeler yalnizca bir alt cizgiydi ve etkin olmayan sekme
   --text-3 ile yaziliyordu: ikincil bilgi rengi oldugu icin sekme tiklanabilir
   degil, devre disi birakilmis gibi okunuyordu. Uc degisiklik:
     - etkin olmayan sekme --text-2 (okunur bir metin rengi) ve biraz daha buyuk
     - sekmenin kendisi bir dugme yuzeyi kazandi (hover'da zemin, ust koseler yuvarlak)
     - etkin sekme marka tonuyla doluyor, alt cizgisi 3px'e cikip kabin
       cizgisini ortuyor — hangisinin acik oldugu uzaktan belli.
   Bilesen tek yerde tanimli oldugu icin bu dort ekrani birden kapsiyor:
   ders izleme, egitim detayi, giris ve kayit. */
/* Alt cizgi kenarlik degil IC GOLGE. Kenarlik + .tab'in negatif alt kenar
   boslugu (etkin sekmenin cizgisi kabin cizgisini ortsun diye) dikey tasma
   yaratiyordu; overflow-x:auto diger ekseni de auto yaptigi icin serit sagda
   bir kaydirma cubugu cikariyordu. Ic golge yerlesime hic girmedigi ve
   torunlarin altinda boyandigi icin etkin sekmenin 3px'lik cizgisi onu
   dogal olarak ortuyor — negatif kenar bosluguna da gerek kalmiyor. */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 -1.5px 0 var(--brd);
  scrollbar-width: none; /* yatay cubuk da gizli: 2-3 sekmede tasma olmuyor */
}
.tabs::-webkit-scrollbar {
  display: none;
}
.zwa .tab {
  /* Reset artik .tab'i atliyor (bkz. tokens.css), bu yuzden zemini ve
     kenarligi bilesen kendi bildiriyor — aksi halde <button> olarak
     kullanildiginda tarayicinin varsayilan dugme cercevesi gorunurdu. */
  background: none;
  border: 0;
  font: inherit;
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.zwa .tab:hover {
  color: var(--text);
  background: var(--surface-2);
}
/* Sekmeler <button> ve <a> olarak da kullaniliyor; klavyeyle gezilebilir olmali.
   Odak halkasi ICERIDE: disa tasan bir halka .tabs'in overflow'u tarafindan
   kirpilirdi. */
.zwa .tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}
/* Etkin sekmede metin marka yesili DEGIL: --brand-2, --brand-tint uzerinde
   4.43:1 veriyor ve AA esiginin (4.5) altinda kaliyor. Marka kimligini zaten
   zemin tonu ve 3px alt cizgi tasidigi icin etiket --text ile yaziliyor —
   12.9:1 (acik) / 12.3:1 (koyu). Token theme-aware oldugu icin koyu temaya
   ayrica gecersiz kilma gerekmiyor. */
.zwa .tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 700;
  background: var(--brand-tint);
  border-bottom-color: var(--brand);
}

/* Yapiskan sekme seridi (egitim detayi). Ust dolgu iki isi birden yapiyor:
   normal akista serit bir onceki bolume yapismiyor, yapisik haldeyken de
   altindan gecen icerigi ortuyor — zemin opak (--canvas) oldugu icin. Ayni
   isi 'top' degerini buyuterek yapmak, aradan icerigin gecmesine yol acardi. */
.tabs--sticky {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: var(--canvas);
  padding-top: clamp(14px, 2vw, 22px);
  margin-bottom: 26px;
}

.pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.pill {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid transparent;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease);
}
.pill:hover {
  background: var(--surface-3);
  color: var(--text);
}
.pill[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

/* ---------- 9. Tablo ---------------------------------------- */
.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--brd);
  background: var(--surface);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.855rem;
  min-width: 640px;
}
.tbl th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--brd);
  white-space: nowrap;
}
.tbl td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--brd);
  vertical-align: middle;
}
.tbl tbody tr:last-child td {
  border-bottom: none;
}
.tbl tbody tr {
  transition: background 0.14s;
}
.tbl tbody tr:hover {
  background: var(--surface-2);
}
.tbl .r {
  text-align: right;
}

/* ---------- 10. Avatar -------------------------------------- */
/* .zwa on eki sart: tokens.css'teki ".zwa button" reseti (1 sinif + 1 tur)
   on eksiz ".av"den (1 sinif) daha ozgul. Avatar artik ust barda bir
   <button> — on eksiz birakilirsa zeminini ve rengini kaybederdi. */
.zwa .av {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: none;
  background-color: var(--surface-3);
  position: relative;
}
.av--xs {
  width: 26px;
  height: 26px;
}
.av--sm {
  width: 34px;
  height: 34px;
}
.av--md {
  width: 44px;
  height: 44px;
}
.av--lg {
  width: 60px;
  height: 60px;
}
.av--xl {
  width: 92px;
  height: 92px;
}
.av--ring {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 3.5px var(--brand);
}
.av-stack {
  display: flex;
}
.av-stack .av {
  margin-left: -10px;
  box-shadow: 0 0 0 2.5px var(--surface);
}
.av-stack .av:first-child {
  margin-left: 0;
}
.zwa .av-init {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--brand-tint);
  color: var(--brand-2);
}

/* ---------- 11. Istatistik --------------------------------- */
.stat {
  display: grid;
  gap: 4px;
}
.stat__v {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat__l {
  font-size: 0.78rem;
  color: var(--text-2);
  font-weight: 500;
}

/* ---------- 12. Akordiyon (mufredat) ------------------------ */
.acc {
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.acc + .acc {
  margin-top: 9px;
}
.acc__hd {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  transition: background 0.16s;
}
.acc__hd:hover {
  background: var(--surface-2);
}
.acc__chev {
  transition: transform 0.25s var(--ease);
  color: var(--text-3);
  width: 17px;
  height: 17px;
  flex: none;
}
.acc[data-open="1"] .acc__chev {
  transform: rotate(180deg);
}
.acc__bd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.acc[data-open="1"] .acc__bd {
  grid-template-rows: 1fr;
}
.acc__bd > div {
  overflow: hidden;
}

.lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 46px;
  border-top: 1px solid var(--brd);
  font-size: 0.86rem;
  transition: background 0.14s;
}
.lrow:hover {
  background: var(--surface-2);
}
.lrow__ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--surface-2);
  color: var(--text-3);
}
.lrow__ico svg {
  width: 13px;
  height: 13px;
}
.lrow--done .lrow__ico {
  background: var(--brand-tint);
  color: var(--brand-2);
}
.lrow--active {
  background: var(--brand-tint);
}
.lrow--active .lrow__ico {
  background: var(--brand);
  color: var(--on-brand);
}
/* Akordiyon disinda (duz liste / kenar cubugu) kullanildiginda girinti gerekmez */
.lrow--flush {
  padding-left: 16px;
}

/* ---------- Kamu sitesi kabugu ------------------------------
   Alt bilgi kisa sayfalarda (hata, 404, bos liste) ekranin ortasinda
   asili kalmasin: kabuk en az ekran boyu (govdede min-height:100vh),
   <main> kalan boslugu doldurur, .foot boylece HER ZAMAN en altta durur.
   :has() ile yalnizca _PublicLayout'a (dogrudan <main> cocugu olan govde)
   uygulaniyor; panel ve giris kabuklari kendi duzenlerinde kalir. */
.zwa:has(> main) {
  display: flex;
  flex-direction: column;
}
.zwa > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* ---------- Ortak akademi logosu --------------------------- */
.zwa-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.zwa-logo__image {
  flex: none;
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.zwa-logo__name {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.25;
}
@media (max-width: 940px) {
  .zwa-logo__image {
    width: 40px;
    height: 40px;
  }
}

/* ---------- 13. Kamu sitesi basligi ------------------------- */
.site-hd {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px clamp(18px, 3.2vw, 42px);
  transition:
    background 0.3s var(--ease),
    border-color 0.3s,
    backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.site-hd--solid {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--brd);
}
.site-hd__logo {
  display: flex;
  flex: none;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}
.site-hd__nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  white-space: nowrap;
}
.site-hd__nav-divider {
  width: 1px;
  height: 18px;
  margin: 0 7px;
  border-radius: var(--r-pill);
  background: var(--brd-strong);
  flex: none;
}
.site-hd__nav a {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-2);
  transition:
    background 0.18s,
    color 0.18s;
}
.site-hd__nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}
.site-hd__nav a[aria-current] {
  color: var(--brand-2);
  font-weight: 700;
}
.site-hd__nav .hl::after {
  left: -0.26em;
  right: -0.26em;
}
.zwa[data-theme="dark"] .site-hd__nav .hl {
  color: #fff;
}
.site-hd__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

/* hero uzerinde saydam başlık */
.site-hd--over {
  color: #fff;
}
.site-hd--over .site-hd__nav a {
  color: rgba(255, 255, 255, 0.84);
}
.site-hd--over .site-hd__nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.site-hd--over .site-hd__nav-divider {
  background: rgba(255, 255, 255, 0.34);
}

/* ---------- 14. Panel kabugu -------------------------------- */
.pnl {
  display: flex;
  min-height: 100vh;
  background: var(--canvas);
}
.pnl__side {
  width: 246px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--brd);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.pnl__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: 1px solid var(--brd);
}
.zwa .pnl__mobile-open,
.zwa .pnl__mobile-close,
.zwa .pnl__mobile-home {
  display: none;
}
.pnl__nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 11px;
}
.pnl__lbl {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 15px 10px 6px;
}
.pnl__lbl:first-child {
  padding-top: 2px;
}
/* Hem <a> hem <button> olarak kullaniliyor; .zwa on eki reset'i yenmek icin
   (bkz. .btn). Zemin/kenarlik/hizalama burada bildiriliyor — cikis dugmesinde
   satir ici "background:none;border:none;font:inherit" hack'i bu yuzden
   gerekiyordu, artik gerekmiyor. */
.zwa .pnl__i {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--text-2);
  transition:
    background 0.16s,
    color 0.16s;
  margin-bottom: 1px;
}
.zwa .pnl__i svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.zwa .pnl__i:hover {
  background: var(--surface-2);
  color: var(--text);
}
.zwa .pnl__i[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand-2);
  font-weight: 700;
}
.zwa .pnl__i .cnt {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
}
/* Yan menunun en alti: kullanici kimligi ve cikis. Cikis bilincli olarak
   en altta — gezinme ogeleriyle ayni listede degil, ayri bir bolgede. */
.pnl__foot {
  padding: 12px;
  border-top: 1px solid var(--brd);
  display: grid;
  gap: 8px;
}
.zwa .pnl__i--out {
  color: var(--danger);
}
.zwa .pnl__i--out:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

.pnl__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pnl__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px clamp(16px, 2.4vw, 30px);
  border-bottom: 1px solid var(--brd);
  background: var(--glass);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
}
/* flex:1 govdeyi viewport yuksekligine kadar buyutur; grid olarak
   kullanildiginda artan yukseklik satirlara dagilmasin diye basa hizalanir. */
.pnl__body {
  padding: clamp(18px, 2.6vw, 34px);
  flex: 1;
  align-content: start;
}

/* ---------- 15. Cesitli ------------------------------------- */
.sec {
  padding: clamp(52px, 7vw, 108px) clamp(18px, 3.2vw, 42px);
  position: relative;
}
/* Tek kutuluk ekranlar (hata, 404): icerik kalan boslukta dikey ortalanir.
   Icerik bosluktan uzunsa bolum normal akisina doner.
   Dikey dolgu .sec'ten dusuk: bolum zaten bosluga yayiliyor, .sec'in genis
   dolgusu eklenince tek kutuluk ekran bile ekrani tasirip kaydirma
   olusturuyordu. */
.sec--mid {
  flex: 1 0 auto;
  display: grid;
  align-content: center;
  padding-block: clamp(32px, 4vw, 60px);
}
.wrap {
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
}
.wrap--nar {
  max-width: 880px;
}
.grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}
/* .g1 ailenin geri kalaniyla tutarli olsun diye var: .grid zaten tek sutun
   uretiyor ama cagri yerinde "bilerek alt alta" demek okunurlugu artiriyor. */
.g1 {
  grid-template-columns: minmax(0, 1fr);
}
.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row--wrap {
  flex-wrap: wrap;
}
.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sep {
  height: 1px;
  background: var(--brd);
  border: 0;
  margin: 0;
}
.vsep {
  width: 1px;
  align-self: stretch;
  background: var(--brd);
}

.sec-hd {
  display: grid;
  gap: 11px;
  margin-bottom: clamp(26px, 3vw, 44px);
  max-width: 660px;
}
.sec-hd--c {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ico-box {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--brand-tint);
  color: var(--brand-2);
}
.ico-box svg {
  width: 21px;
  height: 21px;
}
.ico-box--gold {
  background: var(--gold-tint);
  color: var(--gold);
}
.ico-box--info {
  background: var(--info-tint);
  color: var(--info);
}
.ico-box--warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.ico-box--sq {
  border-radius: var(--r-sm);
  width: 36px;
  height: 36px;
}
.ico-box--sq svg {
  width: 17px;
  height: 17px;
}

/* Mesaj seridi. Kart gorunumu (dort yani kenarlikli, esit kose yaricapli
   kutu) BIRAKILDI: bir mesaj sayfada duran bagimsiz bir nesne degil,
   icerigin kenarindan uzanan bir not. Sol kenardaki 3px'lik serit bir sap
   gibi duruyor, sag koseler yuvarlak, cevre kenarligi yok.

   Tur rengi tek bir degiskenden turuyor (--nc): serit, ikon ve zemin ayni
   yerden besleniyor, yeni bir tur eklemek iki satir.

   Ikonlar tur bazinda ayrisiyor ve ayni doga ailesinden geliyor —
   yapragin hali ciddiyeti soyluyor (bkz. _Icons.cshtml "Mesaj ikonlari"):
     .note          #i-leaf     saglam yaprak
     .note--info    #i-droplet  damla
     .note--warn    #i-m-wilt   catlamis yaprak
     .note--danger  #i-m-snap   kopmus dal
   Ikon markup'ta oldugu icin CSS'ten degistirilemiyor; her cagri yerinde
   turune uygun sembol yaziliyor. */
.note {
  --nc: var(--brand-2);
  --nc-soft: var(--brand-tint);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border: 0;
  border-inline-start: 3px solid var(--nc);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--nc-soft);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}
.note svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--nc);
  margin-top: 1px;
}
.note--warn {
  --nc: var(--warn);
  --nc-soft: var(--warn-tint);
}
.note--info {
  --nc: var(--info);
  --nc-soft: var(--info-tint);
}
.note--danger {
  --nc: var(--danger);
  --nc-soft: var(--danger-tint);
}

/* Vurgu notu — .note'un kamu sayfalarindaki iri kardesi. Form altindaki
   kucuk uyarilar icin .note yeterli; bir bolumu kapatan aciklama notu
   duz renkli seritte ucuz duruyordu. Burada yuzey karti + halkali ikon +
   basligi ayrilmis metin var. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, var(--brand-tint) 0%, transparent 58%),
    var(--surface);
  border: 1px solid var(--brd);
  box-shadow: var(--sh-2);
}
.callout-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 6px var(--brand-tint);
}
.callout-ico svg {
  width: 19px;
  height: 19px;
}
.callout b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.callout p {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
}
.callout em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-2);
}
@media (max-width: 520px) {
  .callout {
    flex-direction: column;
    gap: 14px;
  }
}

/* ---------- 15b. Uretim bilesenleri -------------------------
   Tasarim prototipinde karsiligi olmayan, gercek veriye baglanirken
   ihtiyac duyulan parcalar: sayfalama, bos durum basligi, dogrulama. */
.pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.pager__i {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  display: inline-grid;
  place-items: center;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text-2);
  border: 1px solid var(--brd);
  background: var(--surface);
  transition:
    border-color 0.16s var(--ease),
    color 0.16s var(--ease),
    background 0.16s var(--ease);
}
.pager__i svg {
  width: 16px;
  height: 16px;
}
.pager__i:hover {
  border-color: var(--brand);
  color: var(--brand-2);
}
.pager__i.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.pager__i.is-off {
  opacity: 0.4;
  pointer-events: none;
}
.pager__gap {
  color: var(--text-3);
  padding: 0 2px;
}

/* JS ile acilip kapanan bloklar icin durum sinifi (.is-on/.is-off ile ayni aile).
   [hidden] niteligi yerine sinif gerekiyor: ilgili JS classList uzerinden calisiyor. */
.is-hidden {
  display: none !important;
}

/* Uzun tek parca metni (e-posta gibi) kaptaki genislige kisaltir. Flex/grid
   ogesi olarak kullanildiginda min-width:0 olmadan kisalma calismaz.
   58f7438'de dogrudan wwwroot/css/zwa.css'e yazilmisti; uretilen dosya
   oldugu icin ilk derlemede siliniyordu — kaynaga tasindi. */
.trunc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty__ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
}
.empty__ico svg {
  width: 21px;
  height: 21px;
  color: var(--text-3);
}
.empty__ttl {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

/* Gercek <input type=checkbox> ile .check kutusu — tasarimdaki data-on
   surumu JS'e bagliydi, form gonderiminde deger tasimiyordu. */
.check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check input[type="checkbox"]:checked + .check__box {
  background: var(--brand);
  border-color: var(--brand);
}
.check input[type="checkbox"]:checked + .check__box svg {
  opacity: 1;
  transform: scale(1);
}
.check input[type="checkbox"]:focus-visible + .check__box {
  box-shadow: 0 0 0 3.5px var(--brand-tint);
}

/* asp-validation-summary <ul> uretir; ModelState gecerliyken bos kalir */
.val-sum ul {
  list-style: none;
  display: grid;
  gap: 4px;
}
.val-sum li {
  line-height: 1.5;
}
.val-sum ul:empty {
  display: none;
}

/* asp-validation-for / asp-for'un urettigi durum siniflari */
.field-validation-error {
  font-size: 0.78rem;
  color: var(--danger);
  font-weight: 600;
}
.input-validation-error {
  border-color: var(--danger);
}
.input-validation-error:focus {
  box-shadow: 0 0 0 3.5px var(--danger-tint);
}

/* ---------- 15c. Acilir menu -------------------------------
   Ust bardaki avatarin menusu. Tek ornek olsa da bilesen olarak
   yazildi: davranisi app.js bolum 12'de data-menu ile bagli. */
.menu {
  position: relative;
}
.menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 196px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0.16s;
}
.menu.is-open .menu__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu__hd {
  padding: 7px 10px 9px;
  border-bottom: 1px solid var(--brd);
  margin-bottom: 4px;
}
/* .zwa on eki: menu ogeleri <button> da olabiliyor (bkz. .btn notu). */
.zwa .menu__i {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  transition:
    background 0.16s,
    color 0.16s;
}
.zwa .menu__i svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.zwa .menu__i:hover {
  background: var(--surface-2);
  color: var(--text);
}
.zwa .menu__i--out {
  color: var(--danger);
}
.zwa .menu__i--out:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

/* ---------- 15d. Onay penceresi ----------------------------
   Native <dialog>: odak tuzagi, Esc ile kapanma ve arka plan
   ortusu tarayicidan geliyor — kendi yazsak hepsini elle
   kurmamiz gerekirdi. */
.confirm {
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-4);
}
.confirm::backdrop {
  background: rgba(8, 20, 12, 0.48);
}
.confirm__in {
  display: grid;
  gap: 14px;
  padding: 24px;
}
.confirm__ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-2);
}
.confirm__ico svg {
  width: 19px;
  height: 19px;
}
.confirm h2 {
  font-size: 1.08rem;
}
.confirm p {
  font-size: 0.87rem;
  color: var(--text-2);
  line-height: 1.55;
}
.confirm__act {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- 16. Giris animasyonlari -------------------------
   Filiz asamasinda yalnizca hafif bir belirme birakildi; kaydirma
   paralaksi, isik taramasi ve egim (tilt) efektleri kaldirildi —
   hareket katmani sonraki asamada bolum bolum eklenecek. */
.rv {
  opacity: 0;
  transform: translateY(14px);
}
.rv-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.rv-s {
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .zwa *,
  .zwa *::before,
  .zwa *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 17. Duyarli ------------------------------------- */
@media (max-width: 1100px) {
  .g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pnl__side {
    display: none;
  }
  .pnl--learning .pnl__top-copy {
    min-width: 0;
  }
  .pnl--learning .pnl__top-copy .ui-h {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pnl--learning .pnl__body {
    padding: clamp(14px, 4vw, 24px) !important;
  }
  .pnl--learning .pnl__body > .grid:not(.g1):not(.g2):not(.g3):not(.g4) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pnl--learning .pnl__body > .grid > * {
    min-width: 0;
  }
  .pnl--learning .impact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pnl--learning .lrow {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  .pnl--learning .instructor-lesson-row > [style*="flex:1"] {
    flex: 0 0 calc(100% - 42px) !important;
  }
  .pnl--learning .instructor-course-table-wrap {
    overflow: visible !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pnl--learning .instructor-course-table {
    display: block;
    min-width: 0;
  }
  .pnl--learning .instructor-course-table thead {
    display: none;
  }
  .pnl--learning .instructor-course-table tbody {
    display: grid;
    gap: 14px;
  }
  .pnl--learning .instructor-course-table tr {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--brd);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
  }
  .pnl--learning .instructor-course-table tbody tr td {
    display: grid;
    grid-template-columns: minmax(76px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--brd);
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .pnl--learning .instructor-course-table td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pnl--learning .instructor-course-table tbody tr td:last-child {
    border-bottom: 0;
  }
  .pnl--learning .instructor-course-table td:last-child .btn {
    justify-self: start;
  }
  .zwa .pnl__mobile-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--brd-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
  }
  .zwa .pnl__mobile-open svg {
    width: 19px;
    height: 19px;
  }
  .zwa .pnl__mobile-dialog[open] {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--surface);
    color: var(--text);
  }
  .zwa .pnl__mobile-dialog .pnl__side {
    display: flex;
    position: relative;
    top: auto;
    width: 100%;
    height: 100%;
    border-right: 0;
  }
  .zwa .pnl__mobile-dialog .pnl__brand {
    min-height: 72px;
    padding: max(12px, env(safe-area-inset-top)) 72px 12px 20px;
  }
  .zwa .pnl__mobile-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--brd-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
  }
  .zwa .pnl__mobile-close svg {
    width: 22px;
    height: 22px;
  }
  .zwa .pnl__mobile-open:focus-visible,
  .zwa .pnl__mobile-close:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
  }
  .zwa .pnl__mobile-dialog .pnl__nav {
    min-height: 0;
    padding: 10px 16px;
  }
  .zwa .pnl__mobile-dialog .pnl__i {
    min-height: 48px;
    font-size: 0.91rem;
  }
  .zwa .pnl__mobile-dialog .pnl__mobile-home {
    display: flex;
  }
  .zwa .pnl__mobile-dialog .pnl__foot {
    padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  }
  .zwa:has(.pnl__mobile-dialog[open]) {
    overflow: hidden;
  }
}
@media (max-width: 520px) {
  .pnl__top:has(.pnl__mobile-open) {
    gap: 8px;
  }
  .pnl--learning .pnl__top-copy p {
    display: none;
  }
  .pnl--learning .card--pad {
    padding: 18px;
  }
  .pnl--learning .impact {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pnl--learning .impact > div {
    padding: 14px;
  }
  .pnl--learning form > .row {
    flex-wrap: wrap;
  }
  .pnl--learning .qcard__hd {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pnl--learning .qcard__hd > [style*="flex:1"] {
    flex: 0 0 calc(100% - 38px) !important;
  }
  .pnl--learning .optrow {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pnl--learning .optrow > [style*="flex:1"] {
    flex: 0 0 calc(100% - 58px) !important;
  }
  .zwa .pnl__mobile-open {
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .pnl__mobile-open span {
    display: none;
  }
}
@media (max-width: 720px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-hd {
    gap: 10px;
  }
}

.site-hd__logo .zwa-logo__name {
  white-space: nowrap;
}

/* Gezinme ve hesap eylemleri dar ekranlarda mobil menuye tasinir. */
@media (max-width: 900px) {
  .site-hd__nav {
    display: none;
  }
}

/* Dar baslikta yalnizca gorsel kalir; baglantinin adi korunur. */
@media (max-width: 1100px) {
  .site-hd__logo .zwa-logo {
    gap: 0;
  }
  .site-hd__logo .zwa-logo__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ============================================================
   ZERO WASTE AKADEMI — EKRANA OZEL STILLER (Yön: Filiz)
   ============================================================ */

/* ---------- Ekran gecisi -------------------------------------- */
.scr {
  display: block;
}
.scr-in {
  animation: scrIn 0.4s var(--ease) both;
}
@keyframes scrIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- HERO (fotoğraf zeminli — giriş/kayıt ve panel karşılama) */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -8% 0 0;
  z-index: 0;
  background-size: cover;
  background-position: center 42%;
  will-change: transform;
  transform: scale(1.05);
}
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-tint);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--hero-veil);
}
.hero__in {
  position: relative;
  z-index: 4;
}

.hero--tall {
  min-height: min(94vh, 860px);
  display: flex;
  flex-direction: column;
}
.hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 90px) clamp(18px, 3.2vw, 42px)
    clamp(30px, 4vw, 60px);
}

/* ---------- Filiz vitrin hero (ana sayfa) ---------------------- */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
}
.showcase__in {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 480px);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  /* Yatay dolgu diger her bolumde .sec'ten geliyor (clamp(18px,3.2vw,42px));
     .wrap kendi basina kenar bosluğu vermiyor, yalnizca max-width. Hero
     .sec kullanmadigi icin bu deger burada tekrarlaniyor — deger .sec'le
     AYNI kalmali, biri degisirse digeri de. Onceden yatay 0'di: icerik
     (baslik, metin, AKINTI karti) viewport kenarina yapisiyordu. */
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3.2vw, 42px)
    clamp(48px, 6vw, 76px);
}
@media (max-width: 900px) {
  /* Tek sutun: oyun metnin ve CTA'larin ALTINA iner. Onceden burada
     .showcase__art gizleniyordu — durgun bir illustrasyondu, mobilde yer
     kaplamasi anlamsizdi. Artik orada atik ayirma oyunu var ve farkindalik
     mesajinin mobilde de gorunmesi isteniyor. */
  .showcase__in {
    grid-template-columns: 1fr;
  }
  .showcase__art {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
}
.showcase h1 {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
}
.showcase .lead {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 46ch;
  line-height: 1.65;
}
.showcase__art {
  position: relative;
}
/* DOGRUDAN COCUK: bu kural eski durgun illustrasyon icin yazilmisti (tek
   basina duran bir <svg>). Sutunda artik atik ayirma oyunu var ve inen
   secici oyunun ICINDEKI her ikonu da yakaliyordu — dugme ikonu %100
   genislige cikip karti tasiriyordu. .btn svg ile ozgullugu esit
   (1 sinif + 1 tur) ama screens.css sonra geldigi icin kazaniyordu. */
.showcase__art > svg {
  width: 100%;
  height: auto;
}
.showcase__wave {
  display: block;
  width: 100%;
  height: 56px;
  position: relative;
  z-index: 2;
}

/* ---------- Hero'nun ardindaki fotograf ------------------------
   Dekoratif bir atmosfer; okunurlugu zorlamiyor. Fotograf .hero__bg
   sinifini tasiyor: auth ekranindaki ile ayni oge, ayni yumusak
   paralaks (app.js bolum 4) bedavaya geliyor.

   Ustundeki ortu iki katli. Yataydaki kat metin sutununu temizler
   (solda tam --canvas), dikeydeki kat alt kenari yine --canvas'a
   eritir — dalga gecisi ve altindaki rakamlar seridi bozulmadan
   kalir. Renk color-mix ile --canvas'tan turedigi icin koyu tema
   ayrica tanimlanmiyor.

   Icerik ve dalga konumlandirilmis katmana aliniyor: ortu de fotograf
   da mutlak konumlu, aksi halde akis icindeki metnin USTUNE binerler. */
.showcase__bg {
  z-index: 0;
}
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* yatay kat: metin sutununu temizler, sag yariyi fotografa birakir */
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--canvas) 94%, transparent) 0%,
      color-mix(in srgb, var(--canvas) 90%, transparent) 34%,
      color-mix(in srgb, var(--canvas) 28%, transparent) 66%,
      transparent 100%
    ),
    /* dikey kat: alt kenari --canvas'a eritir */
    linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--canvas) 22%, transparent) 26%,
        color-mix(in srgb, var(--canvas) 68%, transparent) 62%,
        var(--canvas) 100%
      );
}
/* Tek sutuna dusunce metin TUM genisligi kapliyor; yatay kat artik
   metni koruyamaz. Fotograf duz bir dokuya ceviriliyor: gorunur kalir
   ama --text-2 ile okunan lead'in kontrasti AA'nin altina inmez. */
@media (max-width: 900px) {
  .showcase::before {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--canvas) 86%, transparent) 0%,
      color-mix(in srgb, var(--canvas) 93%, transparent) 15%,
      color-mix(in srgb, var(--canvas) 95%, transparent) 58%,
      var(--canvas) 100%
    );
  }
}
.showcase__in {
  position: relative;
  z-index: 2;
}

/* ---------- Alt istatistik seridi: "dongu halkasi" ------------
   Dort rakam duz bir seride dizilmek yerine gercek bir cemberin
   uzerinde duruyor: ucretsiz egitim (12) -> kayitli ogrenci (3) ->
   tamamlanan egitim (6) -> verilen sertifika (9). Sira rastgele
   degil, sifir atigin cekirdek kavrami olan dongusel ekonomiyi
   anlatiyor; halka uzerindeki dort ok akis yonunu (saat yonu)
   okunur kiliyor, merkezdeki filiz de dongunun adini soyluyor.

   Onceki surumde ayni metafor duz bir cizgiyle anlatiliyordu; genis
   ekranda dort rakam 1220px'e yayilip aralarinda uzun bos kesikler
   kaliyordu (ozellikle degerler 0 iken bolum bos bir platform gibi
   duruyordu). Cember hem yayilmayi kesiyor hem metaforu duzlestirmeden
   veriyor.

   Duzen MOBIL ONCELIKLI: taban 2 sutunlu duz izgara, halkali yerlesim
   yalnizca >=940px'te aciliyor. Neden: E/W rakamlari etiketleriyle
   birlikte cemberin YANINA sigmali; dar ekranda cember kaciniIlmaz
   sekilde eziliyor. Dar ekranda halkanin yerini merkezdeki etiketin
   hap hali aliyor, yani metafor kayboluyor degil kisaliyor.

   Baloncuklarin cember uzerine oturmasi sabit piksele bagli degil:
   cember orta izgara hucresine tam ictegen oldugu icin hucre kenarinin
   ortasi = cemberin kutup noktasi. Baloncuk o kenara yariciapi kadar
   negatif margin ile tasiniyor, boylece --dial olcegi degistiginde
   hizalama kendiliginden korunuyor. */
/* Yalnizca ALT cizgi: ust kenarda showcase'in dalgasi zaten yuzey
   rengine geciyor, oraya bir de cizgi koymak dikis izi gibi duruyordu. */
/* Rakam bandinin ortak sarmalayicisi — varyantlar bunun uzerine kuruluyor. */
.nums {
  background: var(--surface);
  border-bottom: 1px solid var(--brd);
}

/* trust seridi (avatar + "bu ay X sertifika" gibi) */
.trust {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.88rem;
  color: var(--text-2);
}
.trust .av-stack .av {
  width: 32px;
  height: 32px;
  border: 3px solid var(--canvas);
  margin-left: -11px;
}
.trust .av-stack .av:first-child {
  margin-left: 0;
}

/* hero alt istatistik seridi (fotoğraf zeminli hero icin) */
.hero-stats {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
}
.hero-stats > div {
  padding: 20px clamp(14px, 2vw, 28px);
  background: rgba(8, 20, 14, 0.36);
  color: #fff;
}
.hero-stats .stat__v {
  color: #fff;
}
.hero-stats .stat__l {
  color: rgba(255, 255, 255, 0.76);
}
@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  width: fit-content;
}

/* Filiz'de acik zeminli pill rozet (hero badge'in fotografsiz varyanti) */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-2);
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
}
.pill-badge svg {
  width: 14px;
  height: 14px;
}

/* ---------- Kategori seridi (durgun, Filiz'de kaydirmasiz) ------ */
.cat-strip {
  padding: 22px 0;
  border-bottom: 1px solid var(--brd);
  background: var(--surface);
}
.cat-strip .pills {
  justify-content: center;
}

/* ---------- Sozler (onemli isimlerin cumleleri) ------------------
   Sagli sollu satirlar, aralarinda ince cizgi, 820px altinda ust uste.
   (Bu olculer once alttaki adim anlatimiyla ortakti; o bolum kaldirildi,
   olculer burada kendi basina duruyor.)

   Ayrildiklari tek yer tipografi. Alintilanan cumle Fraunces'la
   diziliyor; sitenin kendi sesiyle (Outfit / Jakarta) yazilmis metinden
   boylece ilk bakista ayriliyor ve dev tirnak isaretine gerek kalmiyor.
   Fraunces zaten self-host ve bu sayfada yukleniyor (bkz. build.py
   FONT_FACES) — yeni bir font istegi eklenmiyor. Fontun ITALIK EKSENI
   YOK, o yuzden alinti dik: sentetik egim serifte kotu duruyor.
   DIKKAT: "Etki Panosu" istatistik varyanti silinirse Fraunces'i ayakta
   tutan tek yer BURASI olur; build.py'deki not ona gore guncellenmeli. */
.voices {
  display: flex;
  flex-direction: column;
}

.voice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px) 0;
}
.voice + .voice {
  border-top: 1px solid var(--brd);
}
.voice--rev .voice__media {
  order: 2;
}
.voice--rev .voice__body {
  order: 1;
}
@media (max-width: 820px) {
  .voice,
  .voice--rev {
    grid-template-columns: 1fr;
  }
  .voice .voice__media,
  .voice--rev .voice__media {
    order: 1;
  }
  .voice .voice__body,
  .voice--rev .voice__body {
    order: 2;
  }
}

/* Gorsel SAYDAM DEGIL — kendi krem zemini var. Bu yuzden sitenin saydam
   PNG'ler icin kullandigi "cerceve yok, arkada marka parlamasi" duzeni
   burada ise yaramaz: fotograf cerceveli bir nesne olarak duruyor, krem
   zemin bolum zeminine sizmiyor. */
.voice__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--brd-strong);
  background: var(--surface);
  box-shadow: var(--sh-3);
}
.voice__media img {
  width: 100%;
  height: auto;
}
/* Acik zeminli gorsel koyu sayfada parliyor; cok hafif kisiliyor. */
.zwa[data-theme="dark"] .voice__media img {
  filter: brightness(0.94);
}

/* Olcu satir uzunlugu icin: 32rem, alintinin ust puntosunda ~32 karakter. */
.voice__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  max-width: 32rem;
}

.voice__q {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height: 1.42;
  letter-spacing: -0.014em;
  /* Acilis tirnagi sol kenardan disari sarkiyor, metnin govdesi hizada
     kaliyor. En dar ekranda bile (-.36em ~ 7px) .sec'in 18px'lik yatay
     dolgusunun icinde. */
  text-indent: -0.36em;
}

.voice__by {
  margin: 0;
  display: grid;
  gap: 3px;
}
/* Sozu SOYLEYENDEN ayiran cizgi — alinti tiresinin karsiligi, sus degil.
   Bolumun tek marka vurgusu bu; --brand degil --brand-2, acik zeminde
   4.9:1 ile gorunur kaliyor. */
.voice__by::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-2);
  margin-bottom: 10px;
}
.voice__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.voice__role {
  font-size: 0.87rem;
  color: var(--text-2);
}

/* ---------- Adim / surec ozeti (kaydirdikca ust uste binen kartlar) ----
   Yerlesim: .cardstack-wrap iki yapiskan katman tasir — ustte adim rayi,
   altinda kart yigini. Rayin yapiskanlik kabi .cardstack-wrap oldugu icin
   yigin bittiginde ray da birlikte cikar, alttaki uyari notunun uzerinde
   asili kalmaz.

   app.js her karta iki oran yazar:
     --d     : kac kart ustune bindi (0..3) — kart o kadar geri cekilir
     --enter : kartin kendi gelis ilerlemesi (0..1) — icerik asagidan yukselir
   Iki oran da JS tarafinda ease-out'tan gecirilir; ham kaydirma oraniyla
   surulunce hareket mekanik duruyordu. */
.cardstack-wrap {
  --stack-top: clamp(80px, 10vh, 112px);
  --rail-h: 46px;
  --rail-gap: 16px;
  /* Her kart bir oncekinden bu kadar asagida durur: deste yukari degil
     ASAGI dogru birikir. Onceki kartlar yerinde kalip yalnizca kuculdugu
     icin yeni kart onlarin uzerine "iniyormus" gibi okunur; kartlari
     yukari kaydirmak tersini, "eski kart kaciyor" hissini veriyordu. */
  --stack-step: 22px;
  --stack-depth: 3; /* en alttaki kartin kademe sayisi (kart sayisi - 1) */
  /* Kart, rayin altindan ekranin altina uzanir; en asagidaki kart da
     sigsin diye toplam kademe payi dususuluyor. */
  --stack-card-h: calc(
    100vh - var(--stack-top) - var(--rail-h) - var(--rail-gap) -
      (var(--stack-depth) * var(--stack-step)) - clamp(20px, 3vh, 40px)
  );
  --stack-content: min(
    1360px,
    92vw
  ); /* panel tam genislikte, icerik bu genislikte */
  position: relative;
  /* .sec'in yatay dolgusunu geri alip ekrani boydan boya kapla */
  margin-inline: calc(-1 * clamp(18px, 3.2vw, 42px));
}

/* Adim rayi — bolumun neresinde oldugunu tek bakista soyler */
.cardstack-rail {
  position: sticky;
  top: var(--stack-top);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--rail-gap);
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--sh-2);
}
.cardstack-rail__i {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 7px 15px 7px 7px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
  transition:
    background 0.32s var(--ease),
    color 0.32s var(--ease);
}
.cardstack-rail__i i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  font-style: normal;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  transition:
    background 0.32s var(--ease),
    color 0.32s var(--ease),
    transform 0.32s var(--ease);
}
.cardstack-rail__i.is-done i {
  background: var(--brand-tint-2);
  color: var(--brand-2);
}
.cardstack-rail__i.is-on {
  background: var(--brand-tint);
  color: var(--brand-2);
}
.cardstack-rail__i.is-on i {
  background: var(--brand);
  color: var(--on-brand);
  transform: scale(1.08);
}

/* Yapiskan olan KART degil, onu tasiyan parca — ve hepsi ayni kapsayiciyi
   paylasir. Yapiskanlik ogenin kendi kapsayicisiyla sinirli oldugu icin,
   kart kendi parcasi icinde yapistirilirsa parca gecince kart da ekrandan
   cikar ve deste hic olusmaz. Parcalar top:0'da birikince onceki kartlar
   yerinde kalir, yeni kart uzerlerine iner. */
.cardstack {
  position: relative;
  /* Son kartin ekranda kalma suresi */
  padding-bottom: clamp(180px, 30vh, 420px);
}
.cardstack-item {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cardstack-card {
  --d: 0;
  --enter: 1;
  --i: 0;
  position: relative;
  width: 100%;
  top: calc(
    var(--stack-top) + var(--rail-h) + var(--rail-gap) + var(--i) *
      var(--stack-step)
  );
  /* min-height: normalde tam olarak ekrani doldurur; cok kisa ekranlarda
     icerigi kirpmak yerine buyur. */
  min-height: var(--stack-card-h);
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  /* Panel boydan boya, icerik ortada ve --stack-content genisliginde */
  padding-block: clamp(24px, 4vh, 56px);
  padding-inline: max(
    clamp(24px, 3.2vw, 48px),
    calc(50% - var(--stack-content) / 2)
  );
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: center;
  /* Ust kenardan kuculur: kartin ust seridi yerinde kalir, ustune binen
     kartin arkasindan gorunmeye devam eder. */
  transform-origin: 50% 0%;
  transform: scale(calc(1 - var(--d) * 0.04));
  box-shadow: var(--sh-3);
  will-change: transform;
}
/* Kartin destedeki sirasi — kart sayisi degisirse buraya satir eklenmeli
   ve --stack-depth guncellenmeli. */
.cardstack-item:nth-child(2) .cardstack-card {
  --i: 1;
}
.cardstack-item:nth-child(3) .cardstack-card {
  --i: 2;
}
.cardstack-item:nth-child(4) .cardstack-card {
  --i: 3;
}
/* Geri cekilen kart "kararmaz", yuzey-2 tonuna cekilir: filter:brightness()
   metni bulaniklastiriyor, beyaz karti gri camura ceviriyordu. Ortunun kendi
   kenarligi da oldugu icin arkadaki kartlarin ust seridi belirginlesir —
   beyaz uzerine beyaz kalinca deste hic okunmuyordu. */
.cardstack-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--brd-strong);
  opacity: calc(var(--d) * 0.34);
}
@media (max-width: 760px) {
  /* Dar ekranda yigin yok: tek kolonda gorsel + metin bir ekrana sigmadigi
     icin ust uste bindirmek tasma ve kirpma yaratiyor. Kartlar duz bir
     liste olarak sirayla akar. */
  .cardstack-wrap {
    --rail-h: 38px;
  }
  .cardstack {
    padding-bottom: 0;
  }
  .cardstack-item {
    position: static;
    height: auto;
    display: block;
  }
  .cardstack-item + .cardstack-item {
    margin-top: 18px;
  }
  .cardstack-card {
    position: static;
    top: auto;
    transform: none;
    grid-template-columns: 1fr;
    padding: 26px;
    min-height: 0;
  }
  .cardstack-card::after {
    opacity: 0;
  }
  .cardstack-card .cardstack-media {
    order: -1;
  }
  .cardstack-rail__i {
    padding: 6px;
    gap: 0;
  }
  .cardstack-rail__t {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cardstack-card {
    transform: none;
  }
  .cardstack-card::after {
    opacity: 0;
  }
}
.cardstack-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 17px 7px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-2);
  font-size: 0.84rem;
  font-weight: 700;
  width: fit-content;
}
.cardstack-badge__n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.cardstack-copy {
  transform: translateY(calc((1 - var(--enter)) * 22px));
  opacity: calc(0.35 + var(--enter) * 0.65);
}
/* Panel ekrani kapladigi icin metin de buyuyor — kucuk tipografi genis
   panelde kayboluyordu. */
.cardstack-copy h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  margin-top: 20px;
  line-height: 1.2;
}
.cardstack-copy p {
  margin-top: 14px;
  color: var(--text-2);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.18rem);
  line-height: 1.65;
  max-width: 42ch;
}

/* Gorsel saydam PNG: kutu yok, arkasinda yumusak marka parlamasi var.
   Kart geldikce metinden biraz daha gec yukselir ve buyur (parallaks). */
.cardstack-media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  transform: translateY(calc((1 - var(--enter)) * 34px))
    scale(calc(0.965 + var(--enter) * 0.035));
}
.cardstack-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -5%;
  background: radial-gradient(closest-side, var(--brand-tint), transparent 78%);
  opacity: 0.85;
  pointer-events: none;
}
/* Panel ekrani kapladigi icin gorsel yalnizca kolon genisligine gore degil,
   satirdaki bos yuksekligi de kullanacak sekilde buyur: yukseklik once
   dolar, max-width kolonu asmasini engeller — hangisi once sinirlarsa o
   gecerli olur. Oran sabit: izle.png 1.80, digerleri 2.00 oranindaydi ve
   kartlar farkli boyda cikiyordu; yiginda bu alt kenarin ziplamasi demek.
   Fazlalik saydam kaldigi icin cerceve gorunmuyor. */
.cardstack-media {
  height: 100%;
}
.cardstack-media img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .cardstack-copy,
  .cardstack-media {
    transform: none;
    opacity: 1;
  }
}

/* ---------- KATALOG -------------------------------------------- */
.cat-layout {
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}
@media (max-width: 1000px) {
  .zwa:has(.cat-layout) .site-hd {
    background: var(--surface);
    backdrop-filter: none;
    border-bottom-color: var(--brd);
    transition: none;
  }
  .cat-layout {
    grid-template-columns: 1fr;
  }
  .cat-layout > .filters {
    position: static;
  }
}
.filters {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 20px;
}
.catalog-filters__toggle {
  display: none;
}
@media (max-width: 1000px) {
  .catalog-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 11px 16px;
    border: 1px solid var(--brd);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .catalog-filters__toggle::-webkit-details-marker {
    display: none;
  }
  .catalog-filters__toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .catalog-filters__toggle svg {
    width: 18px;
    height: 18px;
    color: var(--brand-2);
  }
  .catalog-filters__toggle > svg {
    transition: transform 0.2s var(--ease);
  }
  .catalog-filters[open] .catalog-filters__toggle {
    margin-bottom: 12px;
  }
  .catalog-filters[open] .catalog-filters__toggle > svg {
    transform: rotate(180deg);
  }
  .catalog-filters__toggle:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
  }
  .catalog-filters__heading {
    justify-content: flex-end;
  }
  .catalog-filters__heading h3,
  .catalog-filters__heading--empty {
    display: none;
  }
}
.filter-grp {
  display: grid;
  gap: 10px;
}
.filter-grp > h4 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- EGITIM DETAYI --------------------------------------- */
.course-layout {
  display: grid;
  grid-template-columns: 1fr 366px;
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}
@media (max-width: 1040px) {
  .course-layout {
    grid-template-columns: 1fr;
  }
}
.buy-card {
  position: sticky;
  top: 84px;
  overflow: hidden;
}
.buy-card__media {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
}
.buy-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 20, 14, 0.12),
    rgba(8, 20, 14, 0.5)
  );
}
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 2;
  background: rgba(255, 255, 255, 0.24);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    transform 0.2s var(--ease),
    background 0.2s;
}
.play-btn:hover {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.36);
}
.play-btn svg {
  width: 23px;
  height: 23px;
  margin-left: 3px;
}

.outcome {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.89rem;
  line-height: 1.55;
}
.outcome svg {
  width: 19px;
  height: 19px;
  color: var(--brand);
  flex: none;
  margin-top: 2px;
}

/* ---------- KAYIT / GIRIS --------------------------------------- */
.auth {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}
.auth__mobile-brand {
  display: none;
}
@media (max-width: 940px) {
  .auth {
    grid-template-columns: 1fr;
  }
  .auth .auth__art {
    display: none;
  }
  .auth__mobile-brand {
    display: flex;
    justify-content: center;
  }
}
.auth__art {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 52px);
  color: #fff;
}
.auth__art .hero__bg {
  inset: 0;
}
.auth__form {
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--canvas);
}
.auth__box {
  width: min(430px, 100%);
  display: grid;
  gap: 20px;
}
.auth__quote {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 16px;
  max-width: 460px;
}
@media (max-width: 940px) {
  .auth__quote {
    padding-top: 72px;
  }
}

/* ---------- DERS IZLEME (video) --------------------------------- */
/* align-items varsayilani (stretch) korunur: ders listesi paneli sol sutun
   kadar uzayip zemininin ortada kesilmesini onler. */
/* Ust bant: buyuyen agac + egitim adi + ilerleme. Sahnenin sayfadaki ilk
   sey olmasi bilincli — ogrencinin nerede oldugunu tek bakista soyluyor. */
.lesson-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}
.lesson-top__tree {
  width: clamp(92px, 11vw, 140px);
}
.lesson-top__bd {
  display: grid;
  gap: 9px;
}
@media (max-width: 620px) {
  .lesson-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .lesson-top__bd {
    justify-items: center;
    width: 100%;
  }
}

/* Genis sutun SOLDA: oynatici orada, ders sirasi 340px'lik sag sutunda.
   Markup sirasi buna gore (once oynatici, sonra <aside>). */
.lesson-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 1100px) {
  .lesson-layout {
    grid-template-columns: 1fr;
  }
}

.player {
  position: relative;
  background: #0b1912;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.player__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.78;
  transition: opacity 0.4s;
}
.player[data-playing="1"] .player__poster {
  opacity: 0.55;
}
.player__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    transparent 30%,
    transparent 52%,
    rgba(0, 0, 0, 0.84) 100%
  );
}
.player__center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    background 0.2s,
    transform 0.2s var(--ease);
}
.player__center:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}
.player__center svg {
  width: 26px;
  height: 26px;
}
.player[data-playing="1"] .player__center {
  opacity: 0;
  pointer-events: none;
}
.player:hover .player__center {
  opacity: 1;
  pointer-events: auto;
}

.player__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  z-index: 3;
}
.player__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 18px 14px;
  z-index: 3;
  color: #fff;
}
.vtrack {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
  margin-bottom: 11px;
}
.vtrack:hover {
  height: 7px;
  margin-top: -2px;
}
.vfill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--brand);
  width: 0;
}
.vdot {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  left: 0;
}
/* %90 tamamlanma esigi isareti */
.vmark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 90%;
  width: 2px;
  background: var(--accent-sun);
  border-radius: 2px;
  opacity: 0.95;
}
.vmark::after {
  content: "%90";
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--accent-sun);
  letter-spacing: 0.05em;
}
.player__ctrls {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  font-weight: 600;
}
.player__ctrls button {
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0.9;
}
.player__ctrls button:hover {
  opacity: 1;
}
.player__ctrls svg {
  width: 18px;
  height: 18px;
}
.player.is-done .vfill {
  background: var(--brand);
}

/* Iki sutun arasinda bosluk var; kenar cubugu .card ile birlikte kullaniliyor,
   cerceveyi ve kose yaricapini o veriyor. Onceki surumdeki border-left/-top
   sutunlarin bitisik oldugu (gap:0) duzenin ayracıydi — bosluklu duzende
   kartin kendi kenarliginin ustune ikinci bir cizgi biniyordu, kaldirildi.
   height:100% de ayni sekilde geride kalmisti: satir ici align-self:start
   zaten esnemeyi kapatiyor, kenar cubugu icerigi kadar yer kaplamali. */
.lesson-side {
  background: var(--surface);
}
.lesson-side__hd {
  padding: 18px 20px;
  border-bottom: 1px solid var(--brd);
  display: grid;
  gap: 12px;
}

.mat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--brd);
  background: var(--surface);
  transition:
    border-color 0.18s,
    background 0.18s;
}
.mat:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.mat__ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mat__ico--pdf {
  background: var(--danger-tint);
  color: var(--danger);
}
.mat__ico--doc {
  background: var(--info-tint);
  color: var(--info);
}
.mat__ico--ppt {
  background: var(--warn-tint);
  color: var(--warn);
}
.mat__ico--xls {
  background: var(--brand-tint);
  color: var(--brand-2);
}
.mat__ico--zip {
  background: var(--neutral-tint);
  color: var(--neutral);
}

/* ---------- SINAV ----------------------------------------------- */
.exam-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.exam-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.exam-dots i {
  width: 26px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  display: block;
  transition:
    background 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.exam-dots i[data-state="done"] {
  background: var(--brand);
}
.exam-dots i[data-state="now"] {
  background: var(--brand-2);
  transform: scaleY(2.1);
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 17px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--brd-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.93rem;
  line-height: 1.5;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.opt:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.opt__k {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 800;
  font-size: 0.78rem;
  transition: all 0.18s var(--ease);
}
.opt[data-sel="1"] {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 3.5px var(--brand-tint);
}
.opt[data-sel="1"] .opt__k {
  background: var(--brand);
  color: var(--on-brand);
}

.exam-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--warn-tint);
  color: var(--warn);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.exam-clock svg {
  width: 15px;
  height: 15px;
}
/* son bir dakika */
.exam-clock[data-low="1"] {
  background: var(--danger-tint);
  color: var(--danger);
}
.exam-dots i[data-state="todo"] {
  background: var(--surface-3);
}
/* gercek radio ile calisan sik: input gizlenir, .opt gorsel durumu tasir */
.opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.opt:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px var(--brand-tint);
}

/* sonuc */
.result-ring {
  display: grid;
  place-items: center;
  margin: 0 auto;
}
@keyframes popIn {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.pop {
  animation: popIn 0.4s var(--ease) both;
}
/* Sitedeki tek atlanmis sahne buydu: .pop'un hareket azaltma karsiligi yoktu. */
@media (prefers-reduced-motion: reduce) {
  .pop {
    animation: none;
  }
}

/* ---------- SERTIFIKA BOLUMU: sabitlenmis kaydirma sahnesi -------
   Sahne bir sure yerinde sabitlenir; bu surede metin sonup belge yatayda
   ortalanir ve hafifce buyur, sonra sahne birakilir ve sayfa normal
   akisina devam eder.

   app.js iki oran yazar:
     --t   belgenin ilerlemesi (0..1) — ortalanma + buyume
     --tc  metnin sonme ilerlemesi; sabitlemenin ilk %55'inde tamamlanir,
           boylece once yazi cekilir, sonra belge yerine oturur.

   Ortalama matematigi: belge sag kolonda, kolon genisligi C, bosluk G.
   Kapsayicinin merkezine gelmesi icin sola (C + G) / 2 kadar kaymali —
   yani kendi genisliginin yarisi arti boslugun yarisi. scale() en sagda
   yazildigi icin once uygulanir; oteleme degerleri olcekten etkilenmez,
   merkezleme tam kalir. */
.certscroll {
  padding-block: 0;
}
.certscroll-track {
  --cs-gap: clamp(30px, 4vw, 64px);
  --cs-pin: 100vh; /* sabitlemenin surdugu kaydirma mesafesi */
  --t: 0;
  --tc: 0;
  --ts: 0;
  /* Belgenin ulasacagi olcek: sahneye sigan en buyuk deger, app.js olcup
     yazar. Buradaki 1 yalnizca JS calismazsa gecerli guvenli varsayilan. */
  --cs-scale: 1;
  /* Ortalandikca derinlesen golgenin rengi/siddeti (temaya gore) */
  --cs-sh: 16 38 28;
  --cs-a0: 0.07;
  --cs-a1: 0.11;
  height: calc(100vh + var(--cs-pin));
}
.zwa[data-theme="dark"] .certscroll-track {
  --cs-sh: 0 0 0;
  --cs-a0: 0.34;
  --cs-a1: 0.28;
}
.certscroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(76px, 11vh, 120px) clamp(36px, 6vh, 68px);
}
.certscroll-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cs-gap);
  align-items: center;
}
.certscroll-copy {
  display: grid;
  gap: 20px;
  opacity: calc(1 - var(--tc));
  transform: translateX(calc(var(--tc) * -38px));
  will-change: opacity, transform;
}
/* Sonmus metin hala odaklanabilir olmasin (icinde bag var) */
.certscroll-copy.is-gone {
  visibility: hidden;
}
/* Once ortalanir (--t), buyume biraz gecikmeli baslar (--ts): boylece
   belge, sonmekte olan yazinin uzerine buyumez. */
.certscroll-cert {
  position: relative;
  transform: translateX(calc(var(--t) * -50%))
    translateX(calc(var(--t) * var(--cs-gap) / -2))
    scale(calc(1 + var(--ts) * (var(--cs-scale) - 1)));
  /* Burada will-change: transform YOK ve olmamali: olcek 1.78x'e kadar
     cikiyor, tarayici ise will-change gordugunde katmani buyutulmeden onceki
     cozunurlukte rasterize edip oylece sisiriyor — belge blok blok goruntuye
     dusuyor. Kazanci da yok: .cert golgesi zaten her karede --ts ile
     degistigi icin katman nasilsa yeniden boyaniyor. */
}
/* Belge ortalanip buyurken golgesi de derinlesir: "one dogru kalkiyor"
   hissini veren sey bu. Arkaya radyal bir isik denendi ama isigin merkezi
   opak belgenin arkasinda kaldigi icin disari yalnizca gradyanin saydam
   kuyrugu tasiyor, beyaz zeminde hic gorunmuyordu. */
.certscroll-cert .cert {
  box-shadow: 0 calc(6px + var(--ts) * 30px) calc(18px + var(--ts) * 52px)
    rgb(var(--cs-sh) / calc(var(--cs-a0) + var(--ts) * var(--cs-a1)));
}

/* Dar ekranda ve hareket azaltma tercihinde sabitleme yok: bolum
   normal akisinda, tek kolon dizilir. Tek kolonda belge zaten ortada
   oldugu icin yatay oteleme onu ekran disina atardi. */
@media (max-width: 820px) {
  .certscroll {
    padding-block: clamp(52px, 7vw, 108px);
  }
  .certscroll-track {
    height: auto;
  }
  .certscroll-stage {
    position: static;
    height: auto;
    padding-block: 0;
  }
  .certscroll-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .certscroll-copy {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  .certscroll-cert {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .certscroll {
    padding-block: clamp(52px, 7vw, 108px);
  }
  .certscroll-track {
    height: auto;
  }
  .certscroll-stage {
    position: static;
    height: auto;
    padding-block: 0;
  }
  .certscroll-copy {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  .certscroll-cert {
    transform: none;
  }
}

/* ---------- SERTIFIKA (Filiz: duz, beyaz, rozet basli) ----------- */
.cert {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--brd);
  box-shadow: var(--sh-3);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 40px);
  gap: 14px;
}
.cert__top {
  height: 6px;
  margin: calc(-1 * clamp(22px, 3vw, 40px)) calc(-1 * clamp(22px, 3vw, 40px))
    clamp(10px, 1.4vw, 18px);
  background: var(--brand);
}
.cert__seal {
  width: clamp(52px, 5.4vw, 72px);
  height: clamp(52px, 5.4vw, 72px);
  border-radius: 50%;
  background: var(--accent-sun);
  display: grid;
  place-items: center;
  color: #3a2400;
  flex: none;
}
.cert__seal svg {
  width: 50%;
  height: 50%;
}
.cert__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 0.9rem+1.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--text);
}
.cert__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.9rem+1.9vw, 2.3rem);
  font-weight: 700;
  color: var(--brand-2);
  letter-spacing: -0.02em;
}
.cert__lbl {
  font-size: clamp(0.6rem, 0.52rem+0.2vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cert__meta {
  font-size: clamp(0.66rem, 0.58rem+0.2vw, 0.78rem);
  color: var(--text-2);
}
.cert__no {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* Sabit koyu/beyaz desen: yer tutucu her zaman beyaz zemin ustunde
   ciziliyor, bu yuzden cizgi rengi de tema degil sabit koyu olmali. */
.cert__qr {
  width: clamp(44px, 4.6vw, 60px);
  height: clamp(44px, 4.6vw, 60px);
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, #10261c 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg, #10261c 0 3px, transparent 3px 6px);
  background-color: #fff;
  border: 2px solid var(--brd-strong);
  opacity: 0.9;
}

.verify-box {
  border: 1.5px dashed var(--brand);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--brand-tint);
  display: grid;
  gap: 5px;
}

/* Gercek QR gorseli (CertificateQrCodeService data URI uretir).
   .cert__qr yalnizca desen cizen bir yer tutucuydu. */
.cert__qr--img {
  background: #fff;
  padding: 3px;
  object-fit: contain;
}

/* Sertifika yazdirma: yalnizca belge basilir, panel kabugu gizlenir. */
@media print {
  .pnl__side,
  .pnl__top,
  .site-hd,
  .foot,
  .no-print {
    display: none !important;
  }
  .pnl,
  .pnl__main,
  .pnl__body {
    display: block !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .cert {
    box-shadow: none;
    border-color: var(--brd-strong);
  }
  @page {
    size: A4 landscape;
    margin: 12mm;
  }
}

/* ---------- YUKLEME ALANI (egitmen) ------------------------------ */
.drop {
  border: 2px dashed var(--brd-strong);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 48px);
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  background: var(--surface-2);
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.drop:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.drop__ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-2);
}
.drop__ring svg {
  width: 26px;
  height: 26px;
}

.upl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--brd);
  border-radius: var(--r-md);
  background: var(--surface);
}
.upl__thumb {
  width: 78px;
  height: 46px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex: none;
  background-color: var(--surface-3);
  position: relative;
  overflow: hidden;
}
@keyframes uplShine {
  0% {
    background-position: -160% 0;
  }
  100% {
    background-position: 260% 0;
  }
}
.upl__thumb.is-proc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  background-size: 200% 100%;
  animation: uplShine 1.6s linear infinite;
}

/* ---------- SINAV KURUCU ----------------------------------------- */
.qcard {
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.qcard__hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--brd);
}
.qnum {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.76rem;
  flex: none;
}
.optrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--brd);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: all 0.18s;
}
.optrow[data-correct="1"] {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--brd-strong);
  flex: none;
  display: grid;
  place-items: center;
}
.optrow[data-correct="1"] .radio {
  border-color: var(--brand);
}
.optrow[data-correct="1"] .radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- GRAFIKLER (dogrulanmis palet) ------------------------ */
/* Kategorik: yalnizca 2 seri kullanilir (yesil / mavi) — bitisik cift
   CVD dE 21+ ; her seri ayrica dogrudan etiketlenir.                   */
.viz {
  --s1: #17784a; /* seri 1 — Yeni katilim */
  --s2: #3f86c9; /* seri 2 — Tamamlama    */
  --grid: rgba(16, 38, 28, 0.09);
  --st-good: #21a366;
  --st-warn: #ffc94d;
  --st-serious: #ff8a4c;
  --st-crit: #b23a3a;
}
.zwa[data-theme="dark"] .viz {
  --s1: #3add8a;
  --s2: #6eb6f2;
  --grid: rgba(255, 255, 255, 0.1);
}

.chart {
  position: relative;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart .grid-l {
  stroke: var(--grid);
  stroke-width: 1;
}
.chart .axis-t {
  fill: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-ui);
}
.chart .ln {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart .dot {
  r: 4.5;
  stroke: var(--surface);
  stroke-width: 2;
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
.legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
}

/* egri uzerinde imlec + ipucu */
.chart__cross {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
}
.chart__tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -118%);
  background: var(--surface);
  border: 1px solid var(--brd-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  padding: 9px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.chart__tip b {
  font-weight: 800;
}
.chart__tip .k {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--text-2);
}
.chart__tip .k i {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
}

/* yatay cubuk */
.hbar {
  display: grid;
  gap: 13px;
}
.hbar__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}
.hbar__t {
  font-size: 0.84rem;
  font-weight: 600;
}
.hbar__v {
  font-size: 0.84rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hbar__tr {
  grid-column: 1/-1;
  display: block;
  height: 9px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.hbar__f {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--s1);
  width: 0;
  transition: width 1s var(--ease);
}

/* yigilmis cubuk (durum dagilimi) */
.stack {
  display: flex;
  height: 34px;
  border-radius: var(--r-sm);
  overflow: hidden;
  gap: 2px;
  background: var(--surface-2);
}
.stack > span {
  display: block;
  transition: flex-grow 0.9s var(--ease);
}
.stack__good {
  background: var(--st-good);
}
.stack__warn {
  background: var(--st-warn);
}
.stack__ser {
  background: var(--st-serious);
}
.stack__crit {
  background: var(--st-crit);
}

/* mini egri */
.spark {
  height: 34px;
  width: 100%;
}
.spark path {
  fill: none;
  stroke: var(--s1);
  stroke-width: 2;
  stroke-linecap: round;
}
.spark .fill {
  fill: var(--s1);
  opacity: 0.1;
  stroke: none;
}

/* KPI kutucugu */
.kpi {
  display: grid;
  gap: 12px;
  padding: 19px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--brd);
}
.kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kpi__v {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem+1vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.kpi__d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 800;
}
.kpi__d svg {
  width: 13px;
  height: 13px;
}
.kpi__d--up {
  color: var(--brand-2);
}
.kpi__d--dn {
  color: var(--danger);
}

/* ---------- Cesitli ekran parcalari ------------------------------ */
.impact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brd);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.impact > div {
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 6px;
}
@media (max-width: 640px) {
  .impact {
    grid-template-columns: 1fr;
  }
}

.quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem+0.6vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Filiz: koyu, tek renk alt bilgi */
.foot {
  background: var(--text);
  color: #b9ccc1;
}
.zwa[data-theme="dark"] .foot {
  background: #06120c;
}
.foot a {
  color: #c9ded2;
  font-size: 0.87rem;
  transition: color 0.16s;
}
.foot a:hover {
  color: #fff;
}
.foot .sep {
  background: rgba(255, 255, 255, 0.14);
}
.foot .muted,
.foot__lbl {
  color: #9fb6a9;
}

/* Alt bilgi: gelistiren vakif, iletisim ve sosyal hesaplar.
   NOT: alt bilgi HER IKI TEMADA DA koyu (.foot arka plani acik temada
   var(--text) = #10261C, koyu temada #06120C). Bu yuzden vakif logosunun
   yalnizca BEYAZ surumu kullaniliyor; temaya gore gorsel degistiren bir
   duzenege gerek yok. Logo baska bir yerde (acik zeminde) kullanilirsa
   sifiratikvakfi.svg surumu gerekir. */
.foot__btm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 36px);
  flex-wrap: wrap;
}
.foot__by {
  display: grid;
  gap: 10px;
}
.foot__logo {
  height: 44px;
  width: auto;
  display: block;
}

.foot__soc {
  display: flex;
  gap: 9px;
}
.foot .foot__soc a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #c9ded2;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.foot .foot__soc a:hover {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.foot__soc svg {
  width: 16px;
  height: 16px;
}

/* Iletisim sutunu — ikon + metin satirlari */
.foot__cnt {
  display: grid;
  gap: 11px;
}
.foot__cnt > * {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.foot .foot__cnt a,
.foot__cnt span {
  font-size: 0.85rem;
  line-height: 1.5;
}
.foot__cnt svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 3px;
  color: var(--brand-3);
}

@media (max-width: 560px) {
  .foot__btm {
    justify-content: flex-start;
  }
}

.empty {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 46px 20px;
  text-align: center;
  border: 1.5px dashed var(--brd-strong);
  border-radius: var(--r-lg);
  color: var(--text-3);
}

/* ---------- RAKAM BANDI · 7. VARYANT: SERIT ----------------------
   TEK bir kapsayici, icinde ince dikey ayraclarla bolunmus dort alan.
   Markup: _StatBar.cshtml.

   Sette eksik olan siluet buydu: Rakam Kartlari dort AYRI kutu, Folyo
   dort ayri kart, Dizgi kutusuz. Burada dort rakam AYNI kabin icinde
   duruyor ve onlari birbirinden ayiran sey kenarlik degil, tek bir
   cizgi — bir kunye seridi gibi.

   RENK: rakam yesil, ama hangi yesil oldugu temaya bagli. Site zaten bu
   ikiliyi kullaniyor (bkz. tokens.css .eyebrow): acik temada --brand-2,
   koyu temada --brand-3. Ikisi de kendi zemininde okunakli uclar.
   Olculdu: acik 5.5:1, koyu 11.0:1. --brand (#21A366) beyaz uzerinde
   3.2:1'de kaliyor — iri punto icin gecerli ama --brand-2 hem guvenli
   hem de sitenin kurulu esleşmesi.

   BUYUK HARF etiketler CSS ile yapiliyor; dogru calismasi <html
   lang="tr">'ye bagli (bkz. _ZwaLayout). Lang olmasaydi "eğitim" ->
   "EGITIM" degil "EĞITIM" olurdu; i -> İ donusumu Turkce'ye ozel.

   "+" YOK. Ornekteki "250+" gibi sonekler burada kullanilmiyor: bu
   sayilar veritabanindan gelen KESIN degerler, "+" onlari yaklasik
   gostererek yanlis bir iddia olurdu.
   ------------------------------------------------------------------ */
.nums--bar {
  background: var(--canvas);
  padding: clamp(30px, 3.6vw, 50px) clamp(18px, 3.2vw, 42px);
}

.statbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.statbar__seg {
  position: relative;
  padding: clamp(22px, 2.8vw, 36px) clamp(12px, 1.6vw, 20px);
  display: grid;
  justify-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  text-align: center;
}
/* Ayrac kenarlik DEGIL, konumlandirilmis bir cizgi: boylece reveal'de
   ortadan disariya dogru acilabiliyor. Yalnizca kendinden once bir alan
   olanlarda var. */
.statbar__seg + .statbar__seg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--brd);
  transform: scaleY(0);
  transform-origin: center;
}

.statbar__seg b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-2);
}
.zwa[data-theme="dark"] .statbar__seg b {
  color: var(--brand-3);
}

.statbar__seg small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.3;
}

@media (max-width: 760px) {
  /* 2x2: dikey ayrac yalnizca sag sutunun solunda, yatay ayrac ikinci
     satirin ustunde. Konumlandirilmis cizgi yerine kenarlik, cunku iki
     yonu ayni pseudo ile tasimak gereksiz karmasik. */
  .statbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .statbar__seg + .statbar__seg::before {
    display: none;
  }
  .statbar__seg:nth-child(even) {
    border-left: 1px solid var(--brd);
  }
  .statbar__seg:nth-child(n + 3) {
    border-top: 1px solid var(--brd);
  }
}

/* Tek orkestre edilmis an: ayraclar ortadan disariya aciliyor.
   Ornek durgun bir serit; fazlasi karakterine aykiri olurdu. */
@keyframes barRule {
  to {
    transform: scaleY(1);
  }
}
.statbar.rv-in .statbar__seg::before {
  animation: barRule 0.55s var(--ease-out-soft)
    calc(0.12s + var(--i, 0) * 0.08s) both;
}

@media (prefers-reduced-motion: reduce) {
  /* OZGULLUK NOTU: .statbar.rv-in .statbar__seg::before (0,3,0);
     kill-switch ayni ozgullukte olmali. */
  .statbar.rv-in .statbar__seg::before,
  .statbar .statbar__seg::before {
    animation: none;
    transform: scaleY(1);
  }
}

/* ---------- KAPANIS CTA SAHNESI --------------------------------
   El sallayan bir fok, denizin icinde. Markup: _CtaArt.cshtml
   (renk eslemesi orada tablo halinde).

   FOK --bin-metal'den besleniyor: atik ayirma paletindeki "metal"
   rengi, sitenin iki temada da tanimli TEK notr grisi. --neutral
   yesile calan bir gri ve yildizlarda kullaniliyor.

   Karin ve benekler govdeden TURETILIYOR, zeminden degil: karin
   --text-inv'e (iki temada da beyaz) dogru aciliyor, benekler siyaha
   dogru koyulasiyor. Boylece fokun kendi ic kontrasti iki temada da
   ayni yonde kaliyor. Kabuklarin aksine (onlar zemine karisir) bir
   KARAKTERIN govde tonlari zemine gore ters cevrilmemeli.
   ------------------------------------------------------------------ */

/* ALT BILGIYE YAPISIK: .sec'in dolgusu dikeyde clamp(52px,7vw,108px),
   yatayda clamp(18px,3.2vw,42px). Negatif kenar bosluklari ikisini de
   geri aliyor — dalgalar boydan boya uzuyor ve alt kenari bolumun
   bitisine, yani alt bilginin ustune oturuyor. Degerler .sec ile AYNI
   kalmali; biri degisirse digeri de. */
.cta__art {
  margin: clamp(30px, 4.4vw, 58px) calc(-1 * clamp(18px, 3.2vw, 42px))
    calc(-1 * clamp(52px, 7vw, 108px));
}
.cta__art svg,
.cta__art img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- Fok --- */
.ctaart__seal {
  fill: var(--bin-metal);
}
/* Yuzgec govdeden yalnizca BIR TIK koyu: %16'da ayri bir leke gibi
   duruyordu, ornekte ayni tenin golgeli hali. */
.ctaart__flipper {
  fill: color-mix(in oklab, var(--bin-metal), #000 8%);
}
.ctaart__belly {
  fill: color-mix(in oklab, var(--bin-metal), var(--text-inv) 72%);
}
.ctaart__face {
  fill: color-mix(in oklab, var(--bin-metal), var(--text-inv) 62%);
}
.ctaart__spot {
  fill: color-mix(in oklab, var(--bin-metal), #000 24%);
}
.ctaart__glint2 {
  fill: color-mix(in oklab, var(--bin-metal), var(--text-inv) 86%);
}
/* Goz, burun, dil ve parlama FOKUN GOVDESINDE duruyor, sayfanin
   zemininde degil; govde iki temada da orta tonda gri oldugu icin
   ikisinde de dogru. */
.ctaart__eye {
  fill: #16202a;
}
.ctaart__glint {
  fill: #ffffff;
}
.ctaart__tongue {
  fill: #f2718c;
}
.ctaart__whisk {
  fill: none;
  stroke: color-mix(in oklab, var(--bin-metal), #000 30%);
  stroke-width: 3.4;
  stroke-linecap: round;
}
/* Biyik kokleri: ornekteki acik benekler */
.ctaart__freck {
  fill: color-mix(in oklab, var(--bin-metal), #000 12%);
}
/* Yuzgecteki golge cizgisi ve dairelerin alt-sol hilali: ornekte her
   ikisi de var, sekillere hacim veriyorlar. */
.ctaart__flipline {
  fill: none;
  stroke: color-mix(in oklab, var(--bin-metal), #000 14%);
  stroke-width: 13;
  stroke-linecap: round;
}
.ctaart__discsh {
  fill: color-mix(in oklab, var(--sc), var(--canvas) 54%);
}

/* --- Deniz --- */
.ctaart__wave2 {
  fill: color-mix(in oklab, var(--accent-blue), #000 18%);
}
.ctaart__wave1 {
  fill: var(--accent-blue);
}

/* --- Serbest ogeler --- */
.ctaart__fl {
  color: var(--sc);
  fill: currentColor;
}
/* Daire, uzerindeki simgenin sayfaya dogru acilmis hali. */
.ctaart__disc {
  fill: color-mix(in oklab, var(--sc), var(--canvas) 68%);
}
.ctaart__vein {
  fill: none;
  stroke: color-mix(in oklab, var(--sc), var(--canvas) 62%);
  stroke-width: 4;
  stroke-linecap: round;
}
/* NOT: geri donusum simgesi once _Icons setindeki #i-recycle'di.
   O ikon 24'luk kutuda ince cizgiyle cizilmis; bu olcege buyutulunce
   ayrintilari birbirine giriyor ve karalama gibi okunuyordu. Yerine
   sahnenin kendi dolu uc-kollu simgesi cizildi (bkz. #cta-recy-arm). */
.ctaart__globe {
  fill: var(--sc);
}
.ctaart__land {
  fill: var(--brand-3);
}

/* Reveal: once fok yerine oturur, sonra cevredeki ogeler tek tek
   belirir. Tek bir an; bu bolumde baska hicbir hareket yok. */
@keyframes ctaRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
@keyframes ctaPop {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
}

/* SVG'de olcek kendi merkezine gore olsun diye; yoksa kutunun sol ust
   kosesinden buyurler. */
.cta__art .ctaart__fl {
  transform-box: fill-box;
  transform-origin: center;
}
.cta__art .ctaart__hero {
  transform-box: fill-box;
  transform-origin: bottom center;
}

.cta__art.rv-in .ctaart__hero {
  animation: ctaRise 0.62s var(--ease-out-soft) both;
}
.cta__art.rv-in .ctaart__fl {
  animation: ctaPop 0.5s var(--ease-out-soft) var(--d, 0s) both;
}

@media (max-width: 700px) {
  /* Cizim BUYUTULUP yanlardan kirpiliyor: fok tam boy kaliyor, cevredeki
     ogeler kadraj disina tasiyor. */
  .cta__art {
    overflow: hidden;
  }
  .cta__art svg {
    width: 240%;
    margin-inline-start: -70%;
  }
  /* Buyutulmus kadrajda cevredeki ogeler kenarlardan DILIMLENIYORDU
     (yarim daire, yarim yildiz) — kirpilmis kompozisyon degil bozuk
     cizim gibi duruyordu. Hepsi gizleniyor; geriye fok ve deniz kaliyor. */
  .ctaart__far {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* OZGULLUK NOTU: animasyonlari .cta__art.rv-in ... (0,3,0) suruyor;
     kill-switch ayni ozgullukte olmali. */
  .cta__art.rv-in .ctaart__hero,
  .cta__art .ctaart__hero,
  .cta__art.rv-in .ctaart__fl,
  .cta__art .ctaart__fl {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 404 -------------------------------------------------
   Sayfa DURUM KODUYLA basliyor: iri rakam, altinda HTTP durum metni,
   sonra insan cumlesi. Onceki surum bir arama ikonuyla aciliyor ve
   hangi hatanin alindigini soylemiyordu.

   Rakam ile etiket arasindaki punto orani (~10:1) bilincli: "404"
   sayfanin en iri ogesi, "Not Found" onun altinda kucuk bir kunye
   satiri gibi duruyor. Ikisi de --font-display, ayni aileden.
   ------------------------------------------------------------------ */
.nf {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 3.2vw, 36px);
  text-align: center;
}

.nf__head {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2vw, 14px);
}
.nf__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.6rem, 2.4rem + 11vw, 10rem);
  line-height: 0.84;
  letter-spacing: -0.055em;
  color: var(--text);
}
/* Ince cizgi kunye satirini rakamdan AYIRIYOR — sus degil, iki farkli
   kayit (rakam ve durum metni) oldugunu soyluyor. */
.nf__status {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-top: clamp(8px, 1.2vw, 13px);
  border-top: 1px solid var(--brd);
  min-width: 148px;
}

.nf__say {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 46ch;
}
.nf__say h1 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
}
.nf__say p {
  font-size: 0.92rem;
  line-height: 1.62;
}

.nf__game {
  width: 100%;
  max-width: 460px;
}

/* ============================================================
   ZERO WASTE AKADEMI — HAREKET KATMANI (Yön: Filiz)

   Bu dosyadaki her hareket dort ilkeye uyar. Ilkeler sus degil;
   hangi animasyonun eklenecegine bunlar karar veriyor:

   1) HICBIR SEY YOK OLMAZ, DONUSUR. Kaldirilan oge kaybolmaz;
      kuculup yuzey rengine karisir (kompost). Bkz. .toast cikisi.
   2) KONFETI YOK, TOHUM VAR. Kutlama ani cop degil, buyume uretir.
   3) DONGU, CIZGI DEGIL. Surec anlatan her yerde tercih edilen sekil
      cember — sifir atigin kendi sekli bu (--ease-loop).
   4) HARCANMAYAN ENERJI. Hareket katmani da harcamadigini harcamaz:
      prefers-reduced-motion'a tam uyum, sekme arkadayken duraklatma,
      ekran disinda donguleri durdurma. Koyu tema bildiriminde
      kullaniciya soylenen sey urunun kendisinde de gecerli olmali.

   Kaydirmaya bagli sahnelerin kalibi screens.css'teki .cardstack ile
   ayni: JS yalnizca bir orani olcup CSS degiskenine yazar, hareketin
   kendisi burada tanimlidir.
   ============================================================ */

/* ---------- 1. Hareket butcesi ------------------------------
   Ilke 4'un uygulamasi. app.js bolum 12 iki isaret koyar:
     body[data-still="1"]  sekme arkada — her sey duraklar
     .loop.is-idle         donguyu tasiyan oge ekran disinda
   Duraklatmak durdurmak degil: geri donuldugunde animasyon
   kaldigi kareden devam eder, bastan baslamaz. */
.zwa[data-still="1"] *,
.zwa[data-still="1"] *::before,
.zwa[data-still="1"] *::after {
  animation-play-state: paused !important;
}

.zwa .loop.is-idle,
.zwa .loop.is-idle::before,
.zwa .loop.is-idle::after {
  animation-play-state: paused;
}

/* ---------- 2. Tema gecisi ----------------------------------
   Tema degisimi bugune kadar anlik bir yeniden boyamaydi. Gecis
   yalnizca degisim aninda aciliyor (.theme-xfade, ~420 ms sonra
   kaldirilir) — kalici birakilirsa her sayfa yuklenisinde de
   oynar ve her hover'a gereksiz bir gecikme bindirir. */
.zwa.theme-xfade,
.zwa.theme-xfade *:not(.growtree):not(.growtree *) {
  transition:
    background-color 0.36s var(--ease),
    border-color 0.36s var(--ease),
    color 0.36s var(--ease),
    fill 0.36s var(--ease),
    stroke 0.36s var(--ease);
}

/* ---------- 3. Bildirim (toast) -----------------------------
   Sitede daha once toast/popup yoktu. Genel bir bilesen olarak
   tanimlandi; su an tek kullanicisi koyu tema bilgilendirmesi
   (.toast--eco), ilerde _Flash.cshtml de buna gecebilir. */
.zwa .toast {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  width: min(370px, calc(100vw - 28px));
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 14px 15px 15px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--sh-3);
  transform-origin: 100% 100%;
  animation: toastIn 0.42s var(--ease) both;
}
/* Cikis ilke 1: silinmez, kuculup yuzeye karisir (kompost). */
.zwa .toast.is-gone {
  animation: toastOut 0.34s var(--ease-in-out) both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }
}

.zwa .toast__ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-2);
}
.zwa .toast__ico svg {
  width: 17px;
  height: 17px;
}
.zwa .toast__bd {
  flex: 1;
  min-width: 0;
}
.zwa .toast__bd b {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.zwa .toast__bd p {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-2);
}
.zwa .toast__x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.zwa .toast__x:hover {
  background: var(--surface-3);
  color: var(--text);
}
.zwa .toast__x svg {
  width: 13px;
  height: 13px;
}

/* Kalan sureyi gosteren ince serit — 5 saniyenin gorunur karsiligi.
   Sayac durdugunda (hover/odak) serit de durur; bunun icin
   animation-play-state kullaniliyor, JS'e ikinci bir yol gerekmiyor. */
.zwa .toast__t {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
}
.zwa .toast__t i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform-origin: left center;
  animation: toastTick 5s linear both;
}
.zwa .toast:hover .toast__t i,
.zwa .toast:focus-within .toast__t i {
  animation-play-state: paused;
}
@keyframes toastTick {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 560px) {
  .zwa .toast {
    left: clamp(14px, 2.4vw, 28px);
    width: auto;
  }
}
/* Hareket azaltmada kayma yok — yalnizca belirir. Otomatik kapanma
   surer: bilgi kalicilastirilmiyor, yalnizca hareketi kaldiriliyor. */
@media (prefers-reduced-motion: reduce) {
  .zwa .toast {
    animation: none;
  }
  .zwa .toast.is-gone {
    animation: none;
    opacity: 0;
  }
}

/* ---------- 4. Ilerleme: buyuyen agac -----------------------
   Sifir atik ilerleme gostergesinin genis yuzey formu. Tek bir
   sayiyla (--gp, 0..1) surulur; @property sayesinde o sayiyi
   degistirmek butun sahneyi (dallarin cizilmesi, yapraklarin
   acilmasi, kuraktan yesile renk gecisi) birlikte gecirir.

   --gp adi bilincli olarak jenerik degil: @property inherits:true
   ile tanimlandigi icin kisa bir ad (--p gibi) baska bir bilesenden
   sizabilirdi. Ayni tuzak components.css'teki --i'de zaten var.

   Erisilebilirlik: agac aria-hidden. Anlami yanindaki mevcut
   role="progressbar" ve yuzde metni tasir — sozlesme degismiyor. */
@property --gp {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.zwa .growtree {
  --gp: 0;
  display: block;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1;
  transition: --gp var(--dur-3) var(--ease-out-soft);
}
.zwa .growtree svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Her parca kendi penceresinde acilir: --k, --gp'nin o parcaya dusen
   dilimdeki 0..1 karsiligi. Dallar asagidan yukari, yapraklar kendi
   dalindan biraz sonra. */
.zwa .growtree__sky {
  fill: color-mix(
    in oklab,
    var(--dry-sky),
    var(--accent-sky) calc(var(--gp) * 100%)
  );
  opacity: 0.55;
}
.zwa .growtree__sun {
  fill: color-mix(
    in oklab,
    var(--dry-sky),
    var(--accent-sun) calc(var(--gp) * 100%)
  );
  opacity: calc(0.45 + var(--gp) * 0.55);
  transform: scale(calc(0.86 + var(--gp) * 0.14));
  transform-origin: 95px 25px;
  transform-box: view-box;
}
.zwa .growtree__ground {
  fill: color-mix(
    in oklab,
    var(--dry-ground),
    var(--brand-tint) calc(var(--gp) * 100%)
  );
}
/* Kurak zeminin catlaklari: ilerledikce kapanir */
.zwa .growtree__crack {
  stroke: var(--dry-bark);
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
  opacity: calc((1 - var(--gp)) * 0.5);
}

.zwa .growtree__trunk,
.zwa .growtree__br {
  fill: none;
  stroke-linecap: round;
  stroke: color-mix(
    in oklab,
    var(--dry-bark),
    var(--bark) calc(var(--gp) * 100%)
  );
}
.zwa .growtree__trunk {
  stroke-width: 5.5;
}
.zwa .growtree__br {
  stroke-width: 3.2;
}

/* pathLength="1" markup'ta veriliyor: dal uzunluklarini JS ile olcmeye
   ya da her dal icin ayri bir --len yazmaya gerek kalmiyor. */
.zwa .growtree__br {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--k, 0));
}
/* Asama siniflari nth-of-type yerine acikca yaziliyor: her yaprak
   yerlesimi icin kendi <g transform> sarmalayicisinda duruyor, o yuzden
   nth-of-type hepsini 1 sayardi. Acik sinif ayrica markup yeniden
   siralandiginda da dogru kalir. */
/* Alt iki dal HER ZAMAN cizili. %0'da yalnizca govde kalinca ekranda
   dumduz bir cubuk goruyorduk; oysa anlatilmak istenen "kurumus, dallari
   kalmis agac". Dallar duruyor, yapraklar yok — kuraklik bu. Ustteki uc
   dal ilerledikce cikiyor, buyume hissi oradan geliyor. */
.zwa .growtree__br--1 {
  --k: 1;
}
.zwa .growtree__br--2 {
  --k: 1;
}
.zwa .growtree__br--3 {
  --k: clamp(0, var(--gp) / 0.34, 1);
}
.zwa .growtree__br--4 {
  --k: clamp(0, (var(--gp) - 0.28) / 0.34, 1);
}
.zwa .growtree__br--5 {
  --k: clamp(0, (var(--gp) - 0.56) / 0.34, 1);
}

/* Yaprak yerlesimi markup'taki <g transform> ile sabit; buradaki
   olcek yalnizca acilmayi surer. transform-box: fill-box + sol kenar
   orijini sayesinde yaprak sapindan acilir, ortasindan degil. */
.zwa .growtree__lf {
  fill: color-mix(
    in oklab,
    var(--dry-leaf),
    var(--brand) calc(var(--gp) * 100%)
  );
  transform: scale(var(--k, 0));
  transform-box: fill-box;
  transform-origin: 0 50%;
}
.zwa .growtree__lf--1 {
  --k: clamp(0, (var(--gp) - 0.1) / 0.18, 1);
}
.zwa .growtree__lf--2 {
  --k: clamp(0, (var(--gp) - 0.16) / 0.18, 1);
}
.zwa .growtree__lf--3 {
  --k: clamp(0, (var(--gp) - 0.28) / 0.18, 1);
}
.zwa .growtree__lf--4 {
  --k: clamp(0, (var(--gp) - 0.34) / 0.18, 1);
}
.zwa .growtree__lf--5 {
  --k: clamp(0, (var(--gp) - 0.46) / 0.18, 1);
}
.zwa .growtree__lf--6 {
  --k: clamp(0, (var(--gp) - 0.64) / 0.18, 1);
}
.zwa .growtree__lf--7 {
  --k: clamp(0, (var(--gp) - 0.78) / 0.2, 1);
}
.zwa .growtree__lf--8 {
  --k: clamp(0, (var(--gp) - 0.84) / 0.16, 1);
}

/* Ders tamamlandiginda: yapraklar sirayla bir kez esner. Kutlama
   degil kayit — agac bir kademe buyudu. */
.zwa .growtree.is-grown .growtree__lf {
  animation: leafPop 0.62s var(--ease) both;
}
.zwa .growtree.is-grown .growtree__lf--2 {
  animation-delay: 0.05s;
}
.zwa .growtree.is-grown .growtree__lf--3 {
  animation-delay: 0.1s;
}
.zwa .growtree.is-grown .growtree__lf--4 {
  animation-delay: 0.15s;
}
.zwa .growtree.is-grown .growtree__lf--5 {
  animation-delay: 0.2s;
}
.zwa .growtree.is-grown .growtree__lf--6 {
  animation-delay: 0.25s;
}
.zwa .growtree.is-grown .growtree__lf--7 {
  animation-delay: 0.3s;
}
.zwa .growtree.is-grown .growtree__lf--8 {
  animation-delay: 0.35s;
}
@keyframes leafPop {
  0% {
    transform: scale(var(--k, 0));
  }
  55% {
    transform: scale(calc(var(--k, 0) * 1.22));
  }
  100% {
    transform: scale(var(--k, 0));
  }
}

/* Agacin yanindaki yuzde — sayi da kuraktan yesile gecer */
.zwa .growtree-lbl {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(
    in oklab,
    var(--text-3),
    var(--brand) calc(var(--gp) * 100%)
  );
}

@media (prefers-reduced-motion: reduce) {
  /* Deger dogru kalir, yalnizca gecisi ve esnemesi kalkar: bu bir
     dekorasyon degil, ilerleme bilgisi. */
  .zwa .growtree {
    transition: none;
  }
  .zwa .growtree.is-grown .growtree__lf {
    animation: none;
  }
}

/* ---------- 5. Ilerleme: manzara seridi ---------------------
   Dar yuzeylerin formu (kartlar, tablo satirlari, panolar). Agac
   20 piksellik bir cubukta lekeye donerdi; ayni hikaye burada
   zeminle anlatiliyor: bos kisim kurak ve catlak, dolu kisim
   yesermis.

   Tamamen CSS: mevcut .bar > i[data-w] sozlesmesini
   (app.js "2. GIRIS ANIMASYONLARI") aynen kullanir, JS eklemez. */
.zwa .bar--grow {
  background-color: var(--dry-ground);
  background-image: repeating-linear-gradient(
    104deg,
    transparent 0 8px,
    color-mix(in oklab, var(--dry-bark), transparent 62%) 8px 9px
  );
}
.zwa .bar--grow > i {
  background: linear-gradient(
    90deg,
    var(--brand-2) 0%,
    var(--brand) 58%,
    var(--brand-3) 100%
  );
  position: relative;
}
/* Dolgunun ucundaki filiz: buyumenin nerede oldugunu isaretler.
   .bar overflow:hidden tasidigi icin isaret dolgunun ICINDE durur. */
.zwa .bar--grow > i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  border-radius: inherit;
  background: var(--brand-3);
  box-shadow: 0 0 7px var(--brand-glow);
}
/* Deger 0 iken ayri bir kurala gerek yok: dolgu 0 genislikte kalir ve
   .bar'in overflow:hidden'i isareti de parlamasini da kirpar — kurak ray
   tek basina okunur. (Onceki surumdeki [style*="width: 0"] secicisi
   zaten tutmuyordu: Razor "width:0%" yaziyor, bosluksuz.) */

/* ---------- 6. Dongu yigini — kart yiginin alternatifi -------
   Ayni dort adim, farkli hareket. Kartlar asagi dogru birikmek yerine
   sifir atigin kendi sekli olan CEMBER uzerinde donuyor: sahne
   sabitlenir, ortadaki kadran doner ve her adim sirasi gelince ustteki
   duraga oturur. Ana sayfada zaten kullanilan "dongusel ekonomi"
   metaforunun (bkz. .loopstrip) buyuk olcekli karsiligi.

   Mimari .cardstack ve .certscroll ile ayni: JS yalnizca oran olcup
   iki degisken yazar, hareket burada.
     --t     sahnenin toplam ilerlemesi (0..1) — track uzerinde
     --near  panelin kendi duragina yakinligi (0..1) — panel uzerinde

   .is-ready sinifi neden var: v1'in JS'siz hali kendiliginden dogru
   goruntu veriyordu (kartlar alt alta akiyordu). Burada sabitlenmis
   sahnede paneller ayni izgara hucresini paylastigi icin JS calismazsa
   dordu ust uste binerdi. Bu yuzden sabitlenmis duzen yalnizca JS
   sahneyi kurduktan sonra aciliyor; oncesinde duz, okunur bir liste. */
.zwa .cyclestack {
  position: relative;
}
.zwa .cyclestack-track {
  position: relative;
}
.zwa .cyclestack-stage > .wrap {
  width: 100%;
}

.zwa .cyclestack-grid {
  display: grid;
  gap: clamp(24px, 3vw, 46px);
}
.zwa .cyclestack-dial {
  width: min(260px, 72vw);
  margin-inline: auto;
}
.zwa .cyclestack-dial svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.zwa .cyclestack-panel {
  --near: 1;
}
.zwa .cyclestack-panel + .cyclestack-panel {
  margin-top: clamp(26px, 4vw, 44px);
}
.zwa .cyclestack-panel h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.3rem);
  margin-top: 18px;
  line-height: 1.2;
}
.zwa .cyclestack-panel p {
  margin-top: 13px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 46ch;
}

.zwa .cyclestack-media {
  position: relative;
  isolation: isolate;
  margin-top: 20px;
}
.zwa .cyclestack-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -5%;
  background: radial-gradient(closest-side, var(--brand-tint), transparent 78%);
  opacity: 0.85;
  pointer-events: none;
}
.zwa .cyclestack-media img {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  /* Sabitlenmis sahne 100vh; metin + gorsel birlikte sigmali. */
  max-height: 38vh;
}

/* --- Kadran --- */
.zwa .cyclestack-dial__trk {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 7;
}
.zwa .cyclestack-dial__arc {
  fill: none;
  stroke: var(--brand);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--t, 0));
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transform-box: view-box;
}
/* Surekli donen kesikli halka. .loop sinifini markup'ta tasiyor: ekran
   disina cikinca hareket butcesi (app.js 8b) durduruyor. */
.zwa .cyclestack-dial__ring {
  transform-origin: 100px 100px;
  transform-box: view-box;
  animation: cycleSpin 30s linear infinite;
}
.zwa .cyclestack-dial__ring circle {
  fill: none;
  stroke: var(--brand-tint-2);
  stroke-width: 2;
  stroke-dasharray: 5 11;
}
@keyframes cycleSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Kadran donerken rakamlar dik kalir: dis grup -270deg doner, her dugum
   kendi merkezinde ayni miktarda geri doner. */
.zwa .cyclestack-dial__nodes {
  transform: rotate(calc(var(--t, 0) * -270deg));
  transform-origin: 100px 100px;
  transform-box: view-box;
}
.zwa .cyclestack-node {
  transform: rotate(calc(var(--t, 0) * 270deg));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.zwa .cyclestack-node circle {
  fill: var(--surface);
  stroke: var(--brd-strong);
  stroke-width: 2;
  transition:
    fill 0.32s var(--ease),
    stroke 0.32s var(--ease);
}
.zwa .cyclestack-node text {
  fill: var(--text-3);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.32s var(--ease);
}
.zwa .cyclestack-node.is-on circle {
  fill: var(--brand);
  stroke: var(--brand);
}
.zwa .cyclestack-node.is-on text {
  fill: var(--on-brand);
}

/* --- Sabitlenmis duzen: yalnizca JS sahneyi kurduysa ve genis ekranda --- */
@media (min-width: 761px) {
  .zwa .cyclestack-track.is-ready {
    height: 400vh;
  }
  .zwa .cyclestack-track.is-ready .cyclestack-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    /* Ust dolgu yapiskan site basligini aciyor — v1'deki --stack-top ile
       ayni pay; aksi halde baslik sahnenin ust kenarina biniyor. */
    padding-block: clamp(80px, 10vh, 112px) clamp(20px, 4vh, 48px);
  }
  .zwa .cyclestack-track.is-ready .cyclestack-grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
  }
  .zwa .cyclestack-track.is-ready .cyclestack-dial {
    width: 100%;
    margin-inline: 0;
  }
  .zwa .cyclestack-track.is-ready .cyclestack-panels {
    position: relative;
    display: grid;
  }
  /* Dort panel ayni hucreyi paylasir; gorunur olan --near ile secilir. */
  .zwa .cyclestack-track.is-ready .cyclestack-panel {
    grid-area: 1 / 1;
    margin-top: 0;
    opacity: var(--near);
    transform: translateY(calc((1 - var(--near)) * 24px));
    pointer-events: none;
  }
  .zwa .cyclestack-track.is-ready .cyclestack-panel.is-on {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* JS zaten sahneyi kurmaz (is-ready gelmez), duz liste kalir; halkanin
     donusu de burada duruyor. */
  .zwa .cyclestack-dial__ring {
    animation: none;
  }
}

/* ---------- 7. Vitrin sayfasi ---------------------------------
   Yalnizca /tasarim/animasyon icin. Urun ekranlarinda kullanilmiyor;
   o rota kaldirildiginda bu bolum de kaldirilabilir. */
.zwa .rng {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  outline: none;
  cursor: pointer;
}
.zwa .rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-2);
}
.zwa .rng::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-2);
}
.zwa .rng:focus-visible {
  box-shadow: 0 0 0 3.5px var(--brand-tint);
}

/* Ilke kartlari — dort hareket ilkesi */
.zwa .prin {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--brd);
}
.zwa .prin b {
  font-size: 0.9rem;
}
.zwa .prin p {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ---------- 8. Atik ayirma oyunu ----------------------------
   "Zero Waste Sorting Challenge" — quiz degil, mini oyun. Atik sahnede
   belirir, oyuncu onu SURUKLEYIP kumbaraya birakir; puan, kombo, sure ve
   uc seviye var (bkz. _WasteGame.cshtml, app.js bolum 10).

   Sahne YENIDEN YAZILMADI: bolum 4'teki .growtree tek bir sayidan
   (--gp, 0..1) surulen kuraklik->yesillik sahnesi zaten var. Oyun o sayiyi
   seviye ilerlemesi olarak yaziyor. Yan fayda: ders ilerlemesinde buyuyen
   agac ile buradaki agac AYNI agac — oyunlastirma anlatiyi degistirmiyor.

   Kumbara renkleri resmi skaladan (tokens.css --bin-*). Renk metin zemini
   olarak kullanilmiyor; ikon diskinde ve kenarlikta aksan. Her kutuda ad da
   yazili — renk korlugunde de okunur.

   EVRE (data-zwphase, kokte): idle | count | play | level | over.
   Hangi kaplamanin gorunecegi yalnizca bu nitelikten turer; JS gorunurluk
   hesabi yapmaz, tek bir dize yazar.

   JS CALISMAZSA .is-ready hic eklenmez: HUD, sure seridi, sahne ve tum
   kaplamalar gizli kalir; geriye atik/kutu izgarasi ve durum satiri kalir —
   yani oyunlastirma oncesi surumun ta kendisi. Ekranda resmi renk kodu bir
   infografik olarak durur, bos bir kutu degil. */
.zwa .zwgame {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
  padding: clamp(14px, 2vw, 20px);
  background: var(--surface);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden; /* ortam katmani ve tanecikler kosede kirpilir */
  touch-action: manipulation; /* cift dokunusta yakinlastirma yok */
}

/* --- Ortam: manzara katmani ---------------------------------
   Tamamen dekoratif (aria-hidden) ve okunabilirligin ALTINDA kaliyor:
   z-index 0, cok dusuk opaklik, blur'lu bulutlar. Dikkat merkezdeki atikta
   kalmali — bu katman yalnizca "durgun kart" hissini kiriyor.
   Hareket butcesine bagli: sekme arkadayken body[data-still] hepsini
   duraklatir (bkz. bolum 1). */
.zwa .zwgame__amb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.zwa .zwgame__cloud {
  position: absolute;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  opacity: 0.5;
  filter: blur(6px);
  animation: zwDriftX var(--dur, 34s) linear var(--d, 0s) infinite;
}
.zwa .zwgame__cloud--a {
  width: 96px;
  height: 26px;
  top: 12%;
  --dur: 38s;
}
.zwa .zwgame__cloud--b {
  width: 68px;
  height: 20px;
  top: 34%;
  --dur: 52s;
  --d: -14s;
}
@keyframes zwDriftX {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(calc(100% + 120px));
  }
}
/* Savrulan yapraklar: uc tane yeter. Daha fazlasi sahneyi gurultuye cevirir. */
.zwa .zwgame__drift {
  position: absolute;
  color: var(--brand);
  opacity: 0.16;
  animation: zwLeafDrift var(--dur, 18s) var(--ease-loop) var(--d, 0s) infinite;
}
.zwa .zwgame__drift svg {
  width: 15px;
  height: 15px;
  display: block;
}
.zwa .zwgame__drift--a {
  left: 14%;
  top: 22%;
  --dur: 17s;
}
.zwa .zwgame__drift--b {
  left: 62%;
  top: 15%;
  --dur: 23s;
  --d: -7s;
}
.zwa .zwgame__drift--c {
  left: 84%;
  top: 41%;
  --dur: 20s;
  --d: -13s;
}
@keyframes zwLeafDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-16px, 22px, 0) rotate(150deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

/* Icerigin tamami ortam katmaninin uzerinde.
   AKIŞTAKI ÇOCUKLAR TEK TEK SAYILIYOR, "hepsi eksi sunlar" denmiyor. Onceki
   hali `.zwgame > *:not(.zwgame__amb):not(.zwgame__panel)` idi; dort sinifla
   (0,4,0) eslestigi icin JS'in sonradan ekledigi ogelerin kendi
   `position: absolute` bildirimlerini (0,2,0) EZIYORDU. Puan baloncugu,
   basari rozeti ve tohum yagmuru boylece izgaraya birer satir olarak
   giriyor, kart her dogru cevapta 36px uzayip kisaliyordu.
   Acik liste ile yeni bir ucucu oge eklendiginde bu hata tekrar edemez. */
.zwa .zwgame__hud,
.zwa .zwgame__bar,
.zwa .zwgame__field,
.zwa .zwgame__targets,
.zwa .zwgame__items,
.zwa .zwgame__say {
  position: relative;
  z-index: 1;
}

/* --- HUD: skor / kombo / seviye / sure ----------------------
   Tek satir, esit sutunlar. Rakamlar --font-display ve tabular hizalama ile:
   skor degistikce sutun genisligi oynamiyor. */
.zwa .zwgame__hud {
  /* display DEGIL visibility ile gizleniyor: display:none satiri izgaradan
     tamamen cikariyordu ve baslangic ekranindan oyuna gecerken kart bir
     anda 57px uzuyordu (HUD 31 + serit 4 + iki bosluk). Satir hep yerinde
     durursa evre degisimi yuksekligi hic etkilemiyor. visibility ayrica
     ses dugmesini sekme sirasindan da cikariyor. */
  display: grid;
  visibility: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 6px;
}
.zwa .zwgame__stat {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.zwa .zwgame__slab {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.zwa .zwgame__sval {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Kombo: kutu ancak x2'den itibaren aciliyor (JS hidden'i kaldiriyor).
   Her artista tek seferlik bir zipla — surekli parlayan bir oge degil. */
.zwa .zwgame__stat--combo .zwgame__sval {
  color: var(--accent-sun);
}
.zwa .zwgame__stat--combo.is-bump .zwgame__sval {
  animation: zwPunch 0.34s var(--ease);
}
@keyframes zwPunch {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(1);
  }
}
/* Son 10 saniye: nabiz. Agresif kirmizi ekran YOK — yalnizca sayi
   uyari tonuna kayiyor ve hafifce buyuyup kuculuyor. */
.zwa .zwgame__stat--time.is-urgent .zwgame__sval {
  color: var(--warn);
  animation: zwPulseT 1s var(--ease-in-out) infinite;
}
@keyframes zwPulseT {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.zwa .zwgame__mute {
  position: relative; /* capraz cizgi (::after) buna gore */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--brd);
  background: var(--surface-2);
  color: var(--text-3);
  transition:
    color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.zwa .zwgame__mute svg {
  width: 15px;
  height: 15px;
}
.zwa .zwgame__mute:hover {
  color: var(--text);
  border-color: var(--brd-strong);
}
.zwa .zwgame__mute:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-tint);
}
/* Sessiz durum: ayri ikon yerine capraz cizgi. Ikon setine yeni bir sembol
   eklemeden durum okunur kaliyor. */
.zwa .zwgame__mute[aria-pressed="true"] {
  color: var(--text-3);
  opacity: 0.7;
}
.zwa .zwgame__mute[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
}

/* --- Sure seridi -------------------------------------------
   Kalan sure --tp (1..0) olarak yaziliyor; genislik ondan turer.
   transition yok: JS her karede degil, saniyede on kez guncelliyor ve
   seridin akici gorunmesi linear gecise birakildi. */
.zwa .zwgame__bar {
  display: block;
  visibility: hidden; /* HUD ile ayni gerekce */
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.zwa .zwgame__bar i {
  display: block;
  height: 100%;
  width: calc(var(--tp, 1) * 100%);
  border-radius: inherit;
  background: var(--brand);
  transition:
    width 0.1s linear,
    background 0.4s var(--ease);
}
.zwa .zwgame__bar.is-urgent i {
  background: var(--warn);
}

/* --- Oyun alani --------------------------------------------
   Kartin en buyuk parcasi: atik burada belirir ve buradan surukleniyor.
   Yukseklik clamp ile sabit — atik konumu yuzde oldugu icin alan
   yuksekligi degisirse oyun hissi de degisirdi. */
.zwa .zwgame__field {
  display: none;
  position: relative;
  height: clamp(146px, 26vw, 208px);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 50% 108%, var(--surface-2) 0%, transparent 62%),
    var(--canvas);
  border: 1px solid var(--brd);
  overflow: hidden;
}
/* Agac sahnenin zemininde durur: oyunun ARKASI, oyunun kendisi degil.
   Seviye ilerledikce --gp buyur ve kuraktan yesile gider. */
.zwa .zwgame__scene {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: clamp(76px, 15vw, 104px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.zwa .zwgame__scene .growtree {
  width: 100%;
  max-width: none;
}
.zwa .zwgame__stage {
  position: absolute;
  inset: 0;
}

/* "sürükle" ipucu — ilk atikta gorunur, ilk basarili surukleyisten sonra
   JS bir daha gostermez. Ogretici bir ipucu kalici bir sus degil. */
.zwa .zwgame__hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.zwa .zwgame.is-hinting .zwgame__hint {
  opacity: 1;
  animation: zwHintY 1.8s var(--ease-in-out) infinite;
}
@keyframes zwHintY {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -4px);
  }
}

/* --- Atiklar ------------------------------------------------
   Ayni .zwgame__item iki yerde: havuzda (JS yokken infografik izgarasi) ve
   sahnede (oyun sirasinda surukledigimiz oge). Ikisi de ayni sinif; farki
   kapsayici veriyor. Boylece markup tek, davranis iki. */
.zwa .zwgame__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.zwa .zwgame__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 10px 4px;
  min-height: 78px; /* dokunma hedefi 44px'in uzerinde */
  border-radius: var(--r-md);
  border: 1.5px solid var(--brd);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.18s var(--ease),
    opacity 0.4s var(--ease);
}
.zwa .zwgame__item svg {
  width: 26px;
  height: 26px;
}
.zwa .zwgame__item:hover:not(.is-done) {
  border-color: var(--brd-strong);
  color: var(--text);
}
.zwa .zwgame__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* Sahnedeki atik: mutlak konumlu, JS'in yazdigi --x/--y/--rot/--sc ile
   yerlesir. Her yeni oge farkli konum, aci ve olcekle gelir ama araliklar
   dar tutuldu — rastgelelik oyunu bozacak kadar degil, tekduzeligi
   kiracak kadar. */
.zwa .zwgame__stage .zwgame__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 44%);
  width: clamp(72px, 13vw, 88px);
  min-height: 0;
  padding: 10px 6px;
  margin: 0;
  gap: 4px;
  background: var(--glass);
  border-color: var(--glass-brd);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
  color: var(--text);
  font-size: 0.6rem;
  cursor: grab;
  touch-action: none; /* surukleme tarayiciya kaptirilmaz */
  transform: translate3d(
      calc(-50% + var(--dx, 0px)),
      calc(-50% + var(--dy, 0px)),
      0
    )
    rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  /* backwards (both DEGIL): "both" bitis karesini kalici kilardi ve o kare
     --dx/--dy tasimadigi icin surukleme hicbir sey oynatmazdi. backwards ile
     animasyon bitince oge yukaridaki kurala — yani suruklenebilir hale — doner. */
  animation: zwItemIn 0.42s var(--ease-out-soft) backwards;
}
.zwa .zwgame__stage .zwgame__item svg {
  width: 30px;
  height: 30px;
  color: var(--brand-2);
}

/* Belirme: hafif buyume + donme + solma. Ayni anda tek oge geldigi icin
   giris animasyonu ferah olabiliyor. */
@keyframes zwItemIn {
  from {
    opacity: 0;
    transform: translate3d(-50%, calc(-50% + 14px), 0) rotate(var(--rot, 0deg))
      scale(0.7);
  }
  to {
    opacity: 1;
    transform: translate3d(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
}
/* Bekleyen oge hafifce suzuluyor: sahne canli, ama goz yorulmuyor.
   Surukleme baslayinca (.is-drag) animasyon kalkiyor — yoksa parmakla
   oge arasinda kayma olurdu. */
.zwa .zwgame__stage .zwgame__item.is-idle {
  animation:
    zwItemIn 0.42s var(--ease-out-soft) backwards,
    zwFloat 3.4s var(--ease-loop) 0.42s infinite;
}
@keyframes zwFloat {
  0%,
  100% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
  50% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px) - 7px),
        0
      )
      rotate(calc(var(--rot, 0deg) + 2deg))
      scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
}

/* Elde / suruklenirken: buyur, golge artar, digerlerinin onune gecer. */
.zwa .zwgame__stage .zwgame__item.is-held,
.zwa .zwgame__stage .zwgame__item.is-drag {
  animation: none;
  z-index: 5;
  border-color: var(--brand);
  box-shadow: var(--sh-brand);
  --grab: 1.12;
}
.zwa .zwgame__stage .zwgame__item.is-drag {
  cursor: grabbing;
  transition: none;
}
/* Suruklenirken arkada cok hafif bir isik izi. Ayri bir oge degil —
   ogenin kendi golgesinin genisleyen hali. */
.zwa .zwgame__stage .zwgame__item.is-drag::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 70%);
}
.zwa .zwgame__item.is-done {
  opacity: 0;
  pointer-events: none;
}
/* Sarsilma sahnedeki oge icin AYRICA yaziliyor: .is-idle dort sinifla
   (0,4,0) eslesiyor ve tek basina birakilan .zwgame__item.is-wrong (0,3,0)
   onu yenemiyordu — yanlis birakista hicbir sey olmuyordu. Ayni ozgullukte
   ve .is-idle'dan SONRA geldigi icin bu kural kazaniyor. */
.zwa .zwgame__item.is-wrong,
.zwa .zwgame__stage .zwgame__item.is-wrong {
  animation: zwShake 0.38s var(--ease-in-out);
}
@keyframes zwShake {
  0%,
  100% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
  22% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px) - 6px),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
  46% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px) + 6px),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
  70% {
    transform: translate3d(
        calc(-50% + var(--dx, 0px) - 3px),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * var(--grab, 1)));
  }
}
/* Havuzdaki (JS'siz) oge kaybolmamali — orada .is-wrong hic kullanilmiyor,
   ama .is-done'in sifir opakligi infografigi silerdi. */
.zwa .zwgame__items .zwgame__item.is-done {
  opacity: 0.32;
}

/* Puan baloncugu: dogru birakista kutunun uzerinde belirip yukari suzulur.
   JS uretiyor, animasyon bitince kendini siliyor. */
.zwa .zwgame__pop {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--brand);
  white-space: nowrap;
  animation: zwPopUp 0.9s var(--ease-out-soft) both;
}
.zwa .zwgame__pop--bad {
  color: var(--warn);
}
@keyframes zwPopUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(1);
  }
}

/* Basari rozeti (kombo 5): kisa, tek seferlik, oyunu durdurmayan. */
.zwa .zwgame__achv {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 7;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--text-inv);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--sh-brand);
  animation: zwAchv 1.7s var(--ease-out-soft) both;
}
.zwa .zwgame__achv svg {
  width: 15px;
  height: 15px;
}
@keyframes zwAchv {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.8);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  22% {
    transform: translate(-50%, -50%) scale(1);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 12px)) scale(0.94);
  }
}

/* --- Hedefler: dort kumbara + tekrar kullan ----------------- */
.zwa .zwgame__targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.zwa .zwgame__target {
  --bin: var(--brand);
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 6px;
  min-height: 78px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--brd);
  background: var(--surface);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.zwa .zwgame__tico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--bin), transparent 84%);
  color: var(--bin);
  transition: transform 0.2s var(--ease);
}
.zwa .zwgame__tico svg {
  width: 19px;
  height: 19px;
}
.zwa .zwgame__target small {
  display: block;
  font-weight: 600;
  color: var(--text-3);
  font-size: 0.62rem;
}
.zwa .zwgame__target:hover {
  border-color: var(--bin);
  transform: translateY(-2px);
}
.zwa .zwgame__target:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bin), transparent 74%);
}
/* Uzerine surukleniyor: kutu acilir gibi buyuyor. Birakma noktasinin
   neresi oldugu suruklerken parmagin altinda kalmadan okunmali. */
.zwa .zwgame__target.is-over {
  border-color: var(--bin);
  background: color-mix(in oklab, var(--bin), transparent 90%);
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bin), transparent 80%);
}
.zwa .zwgame__target.is-over .zwgame__tico {
  transform: scale(1.16);
}
.zwa .zwgame__target.is-hit {
  border-color: var(--bin);
  background: color-mix(in oklab, var(--bin), transparent 92%);
}
/* Yanlis birakista DOGRU kutu kisa sure nabiz atar: cevabi yazmadan
   dogru yeri gosteriyor. Oyunu kolaylastirmiyor, ogretiyor. */
.zwa .zwgame__target.is-teach {
  animation: zwTeach 1.1s var(--ease-in-out) 2;
}
@keyframes zwTeach {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--bin), transparent 60%);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--bin), transparent 86%);
  }
}

.zwa .zwgame__target--paper {
  --bin: var(--bin-paper);
}
.zwa .zwgame__target--plastic {
  --bin: var(--bin-plastic);
}
.zwa .zwgame__target--glass {
  --bin: var(--bin-glass);
}
.zwa .zwgame__target--metal {
  --bin: var(--bin-metal);
}
/* Tekrar kullan bir kumbara DEGIL. Dort kutunun altinda, tam genislikte ve
   yatay duzende duruyor: hiyerarsi farki (Azalt > Tekrar kullan > Donustur)
   yerlesimden de okunsun. Kesikli kenarlik da ayni sebeple. */
.zwa .zwgame__target--reuse {
  --bin: var(--brand);
  border-style: dashed;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 9px 14px;
}
.zwa .zwgame__target--reuse small {
  color: var(--text-3);
}

/* --- Durum satiri: ipucu ve bilgi buradan duyuruluyor --- */
/* Durum satiri ayri bir gorunum degil: sitedeki .note bileseninin ta kendisi.
   Tur (basari / bilgi / uyari) app.js tarafinda .note--* sinifi olarak
   yaziliyor, bicimi buradan degil components.css'ten geliyor. Burada yalnizca
   satirin yuksekligi sabitleniyor — metin degistikce kart ziplamasin.

   Yukseklik EN UZUN mesaja gore ayrilir: mesajlar bir ile iki satir arasinda
   gidip geliyor ve kutu icerige birakilirsa her hamlede kart bir buyuyup bir
   kuculuyor. Hesap: 2 satir x 1.5 satir yuksekligi + .note'un 12px'lik
   alt/ust ic boslugu. em, ogenin KENDI .8rem'ine gore cozuluyor. */
.zwa .zwgame__say {
  /* SABIT yukseklik (min-height degil): metin iki satirdan uce tastiginda
     kutu buyuyor ve kart her hamlede bir buyuyup bir kuculuyordu. Yer en
     kotu duruma gore ayriliyor — en uzun bilgi metni 300px genisligindeki
     kartta uc satira dusuyor (olculdu), daha genis kartta iki satirda
     kaliyor ve altta bir satirlik bosluk kaliyor. Bu bosluk, kartin
     zipmamasi karsiliginda bilincli olarak odenen bedel.
     overflow: metin bir gun uzatilirsa kart yine de buyumesin diye emniyet. */
  height: calc(4.5em + 24px);
  overflow: hidden;
  align-items: center;
  font-size: 0.8rem;
}

/* --- Kaplamalar ---------------------------------------------
   Dordu de ayni kalip: kartin tamamini ortuyor, cam etkisiyle arkadaki
   sahneyi belli belirsiz gosteriyor. Hangisinin gorunecegini yalnizca
   kokteki data-zwphase belirliyor (asagida). */
.zwa .zwgame__panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 9px;
  padding: clamp(16px, 3vw, 26px);
  background: color-mix(in oklab, var(--surface), transparent 12%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.zwa .zwgame__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-2);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.zwa .zwgame__badge svg {
  width: 13px;
  height: 13px;
}
.zwa .zwgame__ptitle {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.1;
}
.zwa .zwgame__ptext {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 32ch;
}
.zwa .zwgame__best {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
}
.zwa .zwgame__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

/* Yildizlar: dogruluk oraninin gorsel karsiligi. JS bes <i> uretir ve
   kazanilanlara .is-on koyar. */
.zwa .zwgame__stars {
  display: flex;
  gap: 3px;
}
.zwa .zwgame__stars i {
  width: 15px;
  height: 15px;
  background: var(--surface-3);
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: zwStar 0.4s var(--ease-out-soft) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}
.zwa .zwgame__stars i.is-on {
  background: var(--accent-sun);
}
@keyframes zwStar {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-40deg);
  }
}

/* Ozet: uc satir, ikonsuz. Sonuc ekraninda dikkat skorda kalmali. */
.zwa .zwgame__recap {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.74rem;
  color: var(--text-2);
}
.zwa .zwgame__recap b {
  color: var(--text);
  font-weight: 700;
}

/* Geri sayim: tek buyuk rakam. Her degisimde JS ogeyi yeniden yazdigi
   icin animasyon her sayida bastan calisiyor. */
.zwa .zwgame__panel--count {
  gap: 0;
}
.zwa .zwgame__count {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  line-height: 1;
  animation: zwCount 0.82s var(--ease-out-soft) both;
}
@keyframes zwCount {
  0% {
    opacity: 0;
    transform: scale(1.7);
  }
  26% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.82);
  }
}

/* --- Evreler ------------------------------------------------
   Tek kaynak: kokteki data-zwphase. Her evre hangi kaplamayi acacagini
   kendisi soyluyor; JS'te gorunurluk mantigi yok. */
/* JS yokken HUD ve serit satirlarini tamamen cikar: orada evre degisimi
   olmadigi icin yer ayirmanin anlami yok, bos bir serit kalirdi. */
.zwa .zwgame:not(.is-ready) .zwgame__hud,
.zwa .zwgame:not(.is-ready) .zwgame__bar {
  display: none;
}
.zwa .zwgame.is-ready .zwgame__items {
  display: none;
} /* havuz artik klon kaynagi */
.zwa .zwgame.is-ready .zwgame__field {
  display: block;
}
.zwa .zwgame[data-zwphase="play"] .zwgame__hud,
.zwa .zwgame[data-zwphase="play"] .zwgame__bar {
  visibility: visible;
}
.zwa .zwgame[data-zwphase="idle"] .zwgame__panel--start {
  display: grid;
}
.zwa .zwgame[data-zwphase="count"] .zwgame__panel--count {
  display: grid;
}
.zwa .zwgame[data-zwphase="level"] .zwgame__panel--level {
  display: grid;
}
.zwa .zwgame[data-zwphase="over"] .zwgame__panel--over {
  display: grid;
}
/* Kaplama acikken alttaki kutular tiklanamaz ve sekme disi kalmali:
   inert yerine pointer-events + visibility, cunku inert destegi
   hedeflenen tarayici tabaninda henuz her yerde yok. */
.zwa .zwgame.is-ready:not([data-zwphase="play"]) .zwgame__targets,
.zwa .zwgame.is-ready:not([data-zwphase="play"]) .zwgame__say {
  visibility: hidden;
}

/* --- Dar ekran ---------------------------------------------- */
@media (max-width: 420px) {
  /* Dort kumbara 375px'te 78px yuksekligi tasiyamiyor; ikon disi kaliyor
     ama etiketler iki satira dusuyordu. Iki sutun daha okunakli. */
  .zwa .zwgame__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zwa .zwgame__hud {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    row-gap: 4px;
  }
}
/* Cok dar ekranda yazi biraz kuculuyor ki en uzun metin uc satira sigsin
   ve sabit yuksekligi tasirmasin. */
@media (max-width: 340px) {
  .zwa .zwgame__say {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Oyun TAM OLARAK oynanabilir kalir; yalnizca hareket kalkar.
     Surukleme, puan, kombo, sure ve seviyeler aynen calisir. */
  .zwa .zwgame__cloud,
  .zwa .zwgame__drift,
  .zwa .zwgame__stage .zwgame__item,
  .zwa .zwgame__stage .zwgame__item.is-idle,
  .zwa .zwgame__item.is-wrong,
  .zwa .zwgame__stage .zwgame__item.is-wrong,
  .zwa .zwgame__stat--combo.is-bump .zwgame__sval,
  .zwa .zwgame__stat--time.is-urgent .zwgame__sval,
  .zwa .zwgame__target.is-teach,
  .zwa .zwgame__stars i,
  .zwa .zwgame__count,
  .zwa .zwgame.is-hinting .zwgame__hint {
    animation: none;
  }
  .zwa .zwgame__pop,
  .zwa .zwgame__achv {
    animation-duration: 0.01ms;
  }
  .zwa .zwgame__item.is-held,
  .zwa .zwgame__target:hover,
  .zwa .zwgame__target.is-over {
    transform: none;
  }
  /* Sahnedeki oge animasyonsuz da dogru yerde durmali — giris
     animasyonu kalkinca transform'u kural olarak vermek sart. */
  .zwa .zwgame__stage .zwgame__item {
    transform: translate3d(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px)),
        0
      )
      rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  }
}

/* ---------- 9. Kutlama: tohum yagmuru -----------------------
   Ilke 2'nin ("KONFETI YOK, TOHUM VAR") gercek karsiligi. Konfeti
   kelimenin tam anlamiyla coptur: atilir, yere duser, supurulur. Bu
   sitede yanlis goruntu. Tohum ayni cosku, farkli sonuc.

   Her tanecik uc evreden geciyor:
     1) DUSER      hafif yatay savrulma ve donme
     2) FILIZLENIR tohum soner, dustugu yerde bir yaprak acilir
     3) COZUNUR    filiz de solup yuzeye karisir
   Geriye ne ekranda ne DOM'da bir sey kaliyor — kap, animasyon bitince
   app.js tarafindan siliniyor (bolum 11).

   Tanecik <i>; hareket burada, JS yalnizca rastgele degerleri CSS
   degiskeni olarak yaziyor. Sitedeki her sahnenin kalibi bu.
     --x  yatay baslangic     --dx dususteki savrulma
     --h  dusme mesafesi      --r  donme
     --d  gecikme             --fall dusme suresi
     --sc tohum rengi */
.zwa .seedfall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit; /* tanecikler kartin yuvarlak kosesinde kirpilir */
}

/* Kap mutlak konumlu; sahiplerin goreli olmasi sart. Ikisi de bugune
   kadar konumlandirilmamisti. */
.zwa .zwgame,
.zwa .lesson-top {
  position: relative;
}

.zwa .seedfall i {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: 8px;
  height: 8px;
  animation: seedDrop var(--fall) cubic-bezier(0.36, 0.06, 0.5, 1) var(--d) both;
}
@keyframes seedDrop {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(var(--dx), var(--h), 0) rotate(var(--r));
  }
}

/* Tohum: dususte gorunur, degdigi anda soner. */
.zwa .seedfall i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 62% 38% 55% 45%;
  background: var(--sc);
  animation: seedGone 0.22s linear calc(var(--d) + var(--fall)) both;
}
@keyframes seedGone {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Filiz: tohumun degdigi noktada acilir. Ust ogenin donusunu geri
   aliyor (rotate(--r) * -1) — tohum savrulurken filiz dik durmali. */
.zwa .seedfall i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 0 100% 0 100%;
  background: var(--brand);
  transform-origin: 50% 100%;
  animation: sproutUp 1.2s var(--ease) calc(var(--d) + var(--fall)) both;
}
@keyframes sproutUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(calc(var(--r) * -1)) scale(0);
  }
  26% {
    opacity: 1;
    transform: translateX(-50%) rotate(calc(var(--r) * -1)) scale(1);
  }
  64% {
    opacity: 1;
    transform: translateX(-50%) rotate(calc(var(--r) * -1)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(calc(var(--r) * -1)) scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* app.js zaten tanecik uretmiyor; bu blok efekt bir sekilde DOM'a
     girerse hareketin yine de olusmamasi icin son emniyet. */
  .zwa .seedfall {
    display: none;
  }
}

/* ---------- AKINTI — sualti temizlik oyunu -------------------
   Sifir atik temali mini oyun. Ana sayfada hero'nun sag sutununda 4/5
   oranli bir kart olarak yasiyor. Genisligi tamamen kapsayicidan gelir;
   buyutme / tam ekran ozelligi YOK — kart sutunundan cikamaz.

   Oyun VIEWPORT'a degil KAPSAYICIYA gore kurulu: canvas ResizeObserver
   ile kartin olcusune uyuyor, ic olcekleme (JS'teki S) kirilim
   noktalari arasindaki boyut farkini telafi ediyor.

   PALET — bu bolum sitenin token'larindan besleniyor. Kartin uc ayri
   zeminde (hero fotografi, acik tema, koyu tema) birden figur olmasi
   gerektigi icin yalnizca HER IKI TEMADA DA ACIK olan token'lar
   kullaniliyor: --brand-3, --accent-sun, --accent-orange. Koyu
   olanlar (--brand-2, --text) burada ise yaramaz. Tek istisna su ve su
   ustu metni: denizin mavisi oyunun geregi, sitenin degil.

   Motor: wwwroot/js/akinti.js (kaynak design/src/akinti.js), yalnizca
   ana sayfada yukleniyor. Markup: Views/Shared/_Akinti.cshtml.
   ------------------------------------------------------------ */
.ak {
  /* Yerel palet — site token'larindan turetildi. Kanvas tarafindaki
       aynasi akinti.js icindeki AK nesnesi; biri degisirse digeri de. */
  /* Deniz zemini/perdesi TEMAYA gore: acik temada sitenin butun koyu
       yuzeyleri (footer --text #10261C, koyu tema --canvas #0B1912)
       148-153° YESIL-siyah ailesinde. Oyunun lacivert zemini acik
       sayfada yabanci bir blok gibi duruyordu; ayni koyulukta yesil
       aileye tasindi. Koyu temada bugunku lacivert korunuyor —
       orada zaten uyumluydu. Kanvas tarafindaki karsiligi
       akinti.js'teki AK.waterDay / AK.waterNight. */
  --ak-deep: #0c211d; /* Gun Isigi denizi */
  --ak-scrim-1: rgba(12, 33, 29, 0.82); /* panel perdesi — merkez */
  --ak-scrim-2: rgba(8, 24, 20, 0.95); /* panel perdesi — kenar */
  --ak-ink-rgb: 234 247 251; /* su ustu metni; --text-inv (#FFF) fazla sert */
  --ak-ink: rgb(var(--ak-ink-rgb));
  --ak-accent: var(--brand-3); /* nane #5FE0C4 -> Filiz acik yesili */
  --ak-award: var(--accent-sun); /* lime #B8F5A0 -> odul/rekor altini */
  --ak-alert: var(--accent-orange); /* somon #FF8F6B -> uyari turuncusu */
  /* Dugme koyu su uzerinde duruyor: sitenin .btn--primary'si (--brand +
       beyaz) burada 3.23:1 kaliyor, cunku o cift ACIK yuzeyler icin
       tasarlandi. Bu yuzden dolgu --brand-3, murekkep de koyu temanin
       --on-brand degeri — ayni marka yesili, 8.67:1 (acik) / 11.32:1. */
  --ak-btn-ink: #06170e;

  /* container-type: panel metinleri cqw ile kapsayiciya gore
       olcekleniyor — dar sutunda kucuk, genis sutunda buyuk. Kapsayici
       baglami olmadan cqw kucuk viewport'a duserdi. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--ak-deep);
  box-shadow: 0 22px 54px rgba(16, 38, 28, 0.28); /* sitenin golge ailesi */
  font-family: var(--font-ui);
  color: var(--ak-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: box-shadow 0.3s var(--ease);
}

/* Gece Ormani denizi — koyu temada hicbir sey degismiyor. */
.zwa[data-theme="dark"] .ak {
  --ak-deep: #062232;
  --ak-scrim-1: rgba(4, 26, 38, 0.82);
  --ak-scrim-2: rgba(3, 16, 24, 0.95);
}

.ak canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HUD ---------- */
.ak__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: clamp(12px, 2.6cqw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.ak[data-phase="play"] .ak__hud {
  opacity: 1;
}
.ak__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ak__stat {
  display: grid;
  gap: 1px;
}
.ak__k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--ak-ink-rgb) / 0.55);
}
/* Skor/sure her karede degisiyor: --font-ui (Jakarta) self-hosted ve
     tnum garantili, Outfit ise Google'dan geliyor — sayilar burada
     zipla-masin diye bilincli olarak arayuz fontunda. */
.ak__v {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(2, 14, 22, 0.6);
}
.ak__stat--time.is-low .ak__v {
  color: var(--ak-award);
}

.ak__net {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.ak__bar {
  width: 104px;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(2, 20, 30, 0.5);
  box-shadow: inset 0 0 0 1px rgb(var(--ak-ink-rgb) / 0.18);
}
.ak__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ak-accent), var(--ak-award));
  transition:
    width 0.18s var(--ease),
    background 0.3s var(--ease);
}
.ak__net.is-full .ak__fill {
  background: linear-gradient(90deg, var(--ak-award), var(--ak-alert));
}
.ak__net.is-full .ak__bar {
  animation: akPulse 1s ease-in-out infinite;
}
@keyframes akPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.9);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 201, 77, 0.35),
      0 0 14px rgba(255, 201, 77, 0.5);
  }
}

.ak__hint {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ak-ink-rgb) / 0.75);
  text-shadow: 0 2px 10px rgba(2, 14, 22, 0.7);
  transition: opacity 0.3s var(--ease);
}

/* ---------- Kaplamalar ---------- */
.ak__panel {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(20px, 4cqw, 34px);
  pointer-events: auto;
  /* Perde alfasi olcumle secildi: deniz tamamen temizlenince yuzey
       aciliyor ve .68'de --brand-3 3.98:1'e dusuyordu. .82 en kotu
       durumda 5.55:1 (acik) / 5.96:1 (koyu) veriyor. */
  background: radial-gradient(
    120% 90% at 50% 40%,
    var(--ak-scrim-1),
    var(--ak-scrim-2)
  );
}
.ak[data-phase="menu"] .ak__panel--menu,
.ak[data-phase="over"] .ak__panel--over {
  display: grid;
}

/* Sitenin .eyebrow olcusu; rengi --brand-2 degil --ak-accent, cunku
     koyu zeminde okunmasi gerekiyor. */
.ak__brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fok);
}
/* .zwa PREFIKSI ZORUNLU: tokens.css'teki ".zwa h1,.zwa h2,..." (0,1,1)
     tek sinifli bir kurali (0,1,0) eziyor ve rengi --text'e dusuruyor —
     acik temada baslik koyu su uzerinde neredeyse gorunmez oluyordu.
     Ayni tuzak .ak__btn'de de var; bkz. components.css basligindaki not. */
.zwa .ak__title {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ak-ink);
  font-size: clamp(40px, 13cqw, 92px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.zwa .ak__title em {
  font-style: normal;
  color: var(--ak-accent);
}
.ak__lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(13px, 3.4cqw, 15.5px);
  line-height: 1.6;
  color: rgb(var(--ak-ink-rgb) / 0.82);
  font-weight: 500;
}
.ak__lede b {
  color: var(--ak-ink);
  font-weight: 700;
}
.ak__rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
.ak__rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(var(--ak-ink-rgb) / 0.07);
  box-shadow: inset 0 0 0 1px rgb(var(--ak-ink-rgb) / 0.12);
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(var(--ak-ink-rgb) / 0.9);
}
.ak__rule b {
  color: var(--fok);
  font-weight: 700;
}

/* Sitenin .btn--primary olcusu ve hover jesti (kalkis + marka golgesi);
     rengi yukaridaki --ak-btn-ink notundaki nedenle acik dolgu / koyu
     murekkep. Hover'da dolgu DEGISMIYOR — degisseydi kontrast duserdi. */
.zwa .ak__btn_fok {
  cursor: pointer;
  border: 0;
  margin-top: 4px;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  background: var(--fok);
  color: var(--text-inv);
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.2s var(--ease);
}

.zwa .ak__btn_fok:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-brand);
}
.zwa .ak__btn_fok:active {
  transform: translateY(1px) scale(0.985);
}
.zwa .ak__btn_fok:focus-visible {
  outline: 3px solid var(--fok);
  outline-offset: 3px;
}

.zwa .ak__btn {
  cursor: pointer;
  border: 0;
  margin-top: 4px;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  background: var(--brand-3);
  color: var(--ak-btn-ink);
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.2s var(--ease);
}
.zwa .ak__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-brand);
}
.zwa .ak__btn:active {
  transform: translateY(1px) scale(0.985);
}
.zwa .ak__btn:focus-visible {
  outline: 3px solid var(--ak-award);
  outline-offset: 3px;
}
.ak__best {
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(var(--ak-ink-rgb) / 0.6);
}

.ak__score {
  font-family: var(--font-display);
  font-size: clamp(46px, 15cqw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ak__score.is-new {
  color: var(--ak-award);
}
.ak__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-award);
}
.ak__recap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ak__recap li {
  display: grid;
  gap: 2px;
}
.ak__recap b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ak__recap span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ak-ink-rgb) / 0.5);
}
/* .zwa prefiksi: ".zwa p { margin: 0 }" bu kuralin margin'ini de eziyordu. */
.zwa .ak__fact_fok {
  max-width: 40ch;
  margin: 2px 0 0;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  text-align: left;
  background: color-mix(in oklab, var(--fok), transparent 91%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fok), transparent 78%);
  font-size: 12.5px;
  line-height: 1.58;
  color: rgb(var(--ak-ink-rgb) / 0.92);
  font-weight: 500;
}
.zwa .ak__fact {
  max-width: 40ch;
  margin: 2px 0 0;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  text-align: left;
  background: color-mix(in oklab, var(--ak-accent), transparent 91%);
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--ak-accent), transparent 78%);
  font-size: 12.5px;
  line-height: 1.58;
  color: rgb(var(--ak-ink-rgb) / 0.92);
  font-weight: 500;
}
.ak__fact b {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ak-accent);
}

.ak__cd {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(64px, 22cqw, 160px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ak-ink);
  text-shadow: 0 6px 40px rgba(2, 20, 30, 0.8);
  opacity: 0;
}
.ak__cd.is-on {
  animation: akCd 0.8s var(--ease-out-soft) both;
}
@keyframes akCd {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  24% {
    opacity: 1;
    transform: scale(1);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak__net.is-full .ak__bar {
    animation: none;
  }
  .ak__cd.is-on {
    animation-duration: 0.01ms;
    opacity: 1;
  }
  .zwa .ak__btn {
    transition: none;
  }

  .zwa .ak__btn_fok {
    transition: none;
  }
}

/* ============================================================
   HAKKIMIZDA SAYFASI (/hakkimizda)
   Bolum bolum Views/Home/About.cshtml ile eslesiyor. Hicbir renk
   sabit YAZILMIYOR: sayfanin koyu yesil maketi zaten "Gece Ormani"
   temasinin kendi ciktisi, acik temada "Gun Isigi" paletiyle cizilir.
   ============================================================ */

/* ---------- Kirinti yolu (site genelinde ILK kullanim) --------
   Tek sayfalik bir bilesen olarak degil, genel adla yazildi: egitim
   detayi gibi derin sayfalara da ayni sinifla takilabilsin diye.
   Ayirac ::before ile geliyor — metne kopyalanmasin ve ekran
   okuyucu "buyuktur" diye okumasin diye isaret DEGIL svg/glif. */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-3);
}
.crumbs a {
  color: var(--text-2);
  transition: color 0.16s;
}
.crumbs a:hover {
  color: var(--brand-2);
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--brd-strong);
  border-right: 1.5px solid var(--brd-strong);
  transform: rotate(45deg);
  flex: none;
}
.crumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Acilis bandi --------------------------------------
   Fotograf ZEMIN DEGIL (ana sayfadaki .showcase'in aksine): maketteki
   koyu orman zemini koyu temada zaten geliyor, acik temada ayni
   fotografi zemine sermek metni okunmaz yapardi. Yerine tokenlardan
   turetilmis yumusak bir marka yikamasi var; fotograf yalnizca sag
   sutundaki yaprak formunda duruyor. */
.about-hero {
  background:
    radial-gradient(120% 90% at 82% 8%, var(--brand-tint) 0%, transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--brd);
  overflow: hidden;
}
.about-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.about-hero__copy {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 34rem;
}
.about-hero__copy h1 {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.about-hero__copy p {
  margin: 0;
  color: var(--text-2);
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.08rem);
  line-height: 1.72;
}
@media (max-width: 900px) {
  .about-hero__in {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Maketin aksine fotograf metnin ALTINA duser: dar ekranda once
     sayfanin ne oldugunu soyleyen basligi gormek gerekiyor. */
  .about-hero__art {
    order: 2;
  }
}

/* ---------- Yaprak formunda fotograf ---------------------------
   clip-path DEGIL border-radius: ayni formu veriyor ama kenar
   yumusatmasi (anti-aliasing) tarayicilar arasinda tutarli ve
   overflow:hidden ile fotograf dogrudan kirpiliyor. Iki yaprak
   birbirinin uzerine biniyor — maketteki yaprak demetinin
   sadelestirilmis hali. */
.leafart {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
/* Arkadaki marka parlamasi: yapraklarin disina tasan yumusak halo.
   Sayfanin geri kalanindaki .tile/.voice golge dilinin fotografsiz
   karsiligi — koyu temada da dogru, cunku tokenla geliyor. */
.leafart::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--brand-glow);
  filter: blur(46px);
  z-index: 0;
}
.leafart__lf {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--brd-strong);
  box-shadow: var(--sh-3);
  z-index: 1;
}
.leafart__lf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Buyuk yaprak — golun / daglarin oldugu kare foto. */
.leafart__lf--a {
  inset: 2% 6% 20% 22%;
  border-radius: 74% 0 74% 0;
  transform: rotate(-6deg);
}
/* Kucuk yaprak — yaprak yakin cekimi, buyugun sol altina biniyor.
   Kose yaricapi TERS (0 .. 0 ..): iki yaprak ayni yone bakmasin,
   demet tek bir yonde taranmis gibi durmasin diye. */
.leafart__lf--b {
  inset: 46% 52% 4% 2%;
  border-radius: 0 68% 0 68%;
  transform: rotate(8deg);
  z-index: 2;
}
@media (max-width: 560px) {
  .leafart {
    max-width: 340px;
  }
}

/* ---------- El yazisi vurgusu ---------------------------------
   Sitede el yazisi fontu YOK ve bir tane eklemek icin yeni bir aile
   yuklemek gerekirdi. Fraunces zaten self-host ve bu sayfada
   yukleniyor; italik + dusuk opsz ile maketteki "elle yazilmis not"
   isini goruyor. Tamamen dekoratif degil — okunacak bir cumle, bu
   yuzden aria-hidden YOK. */
.hand {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 18;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ak-ink-rgb);
}
.zwa[data-theme="dark"] .hand {
  color: var(--ak-ink-rgb);
}
/* Fotografin uzerine oturan surumu — kendi okunurlugunu tasimasi
   gerekiyor, cunku altindaki fotografin tonu bilinmiyor. */
.hand--on {
  position: absolute;
  left: clamp(16px, 4%, 28px);
  top: clamp(16px, 5%, 30px);
  right: 34%;
  color: #fff;
  text-shadow: 0 2px 14px rgba(4, 12, 8, 0.66);
}

/* ---------- Rakam seridi (acilis bandinin alti) ----------------
   Ana sayfadaki .statbar'dan AYRI bir bilesen: orada dort rakam ince
   ayraclarla bolunmus tek bir kabin icinde, burada maketteki gibi her
   rakamin kendi ikon kutusu var. Ikisi ayni sayfada hic gorunmuyor. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(34px, 4.6vw, 58px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--brd);
}
.about-stats__i {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.about-stats__v {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.about-stats__l {
  font-size: 0.79rem;
  color: var(--text-2);
  line-height: 1.35;
}
@media (max-width: 860px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (max-width: 420px) {
  .about-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Alinti bandi ---------------------------------------
   Tek kart, iki sutun: solda cumle, sagda fotograf kartin kosesine
   kadar tasiyor. Fotograf sutunu grid'in yuksekligini SURMUYOR
   (align-self:stretch + object-fit:cover) — cumle uzayinca fotograf
   da uzuyor, bosluk kalmiyor. */
.about-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  border: 1px solid var(--brd);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, var(--brand-tint) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.about-quote__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3.6vw, 46px);
  justify-content: center;
}
.about-quote__mark {
  width: 34px;
  height: 34px;
  color: var(--brand);
  flex: none;
}
.about-quote__q {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -0.014em;
}
.about-quote__media {
  position: relative;
  min-height: 210px;
}
.about-quote__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .about-quote {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-quote__media {
    min-height: 180px;
    order: 2;
  }
  .about-quote__body {
    order: 1;
  }
}

/* ---------- Adim seridi ("Nasil Calisir?") ---------------------
   Ana sayfadaki .cardstack (kaydirdikca ust uste binen kartlar) ile
   AYNI dort adimi anlatiyor ama bu sayfa ozet bir bakis istiyor:
   tek satir, durgun, kaydirmaya bagli degil.

   Oklar ::after ile — DOM'a dort bos <span> eklemiyor ve iki sutuna
   dusunce (900px) tek kuralla kayboluyorlar. */
.about-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}
.about-steps__i {
  position: relative;
  display: grid;
  gap: 9px;
  align-content: start;
}
.about-steps__i:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(-1 * clamp(18px, 2.6vw, 34px) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--brd-strong);
  border-right: 2px solid var(--brd-strong);
  transform: rotate(45deg);
}
.about-steps__hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-steps__n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 0 0 5px var(--brand-tint);
}
.about-steps__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.about-steps__d {
  font-size: 0.86rem;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .about-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 4vw, 34px);
  }
  .about-steps__i:not(:last-child)::after {
    display: none;
  }
}
@media (max-width: 520px) {
  .about-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}