/*
 * Bal Diyarı — halka açık site.
 *
 * ⛔ TEK GERÇEK: değerler DESIGN.md ve lib/app/cekirdek/tema/ ile BİREBİR aynıdır.
 *    Buraya yeni bir ton/ölçü yazmadan önce oraya bak; çelişkide uygulama kazanır.
 *
 * Sıra: 1 belirteçler · 2 sıfırlama · 3 tipografi · 4 düzen · 5 bileşenler · 6 sayfalar
 */

/* ── 1. Belirteçler ─────────────────────────────────────────────────────── */

:root {
  /* Renk rolleri — renk_semasi.dart acikSema() */
  --yuzey:              #FFFFFF;
  --kap-en-alt:         #FFFFFF;
  --kap-alt:            #F7F7F9;
  --kap:                #F1F2F4;
  --kap-ust:            #EAEBEE;
  --kap-en-ust:         #E2E4E8;

  --birincil:           #F5C333;
  --birincil-ustu:      #33290F;
  --birincil-kap:       #FBE9AE;
  --birincil-kap-ustu:  #4F3D08;

  --ikincil:            #F1731F;
  --ikincil-ustu:       #3D1F04;
  --ikincil-kap:        #FDEEE3;
  --ikincil-kap-ustu:   #7A3A0A;

  --ucuncul:            #8F6104;
  --ucuncul-kap:        #FBF3DB;
  --ucuncul-kap-ustu:   #6B5410;

  --yuzey-ustu:         #26282E;
  --yuzey-ustu-ikincil: #5F6369;
  --cerceve:            #8A8E94;
  --cerceve-ince:       #E7E8EA;
  --hata:               #D93843;

  /* Marka belirteçleri — marka_tokenlari.dart acik() */
  --basari:             #0F7A38;
  --basari-zemin:       #E7F6EC;
  --uyari:              #845A00;
  --uyari-zemin:        #FBF3DB;
  --bilgi:              #2559B4;
  --bilgi-zemin:        #E9F0FA;
  --deger-metni:        #26282E;
  --bant-baslangic:     #A95923;
  --bant-bitis:         #E8A13B;
  --bant-ustu-metin:    #FFFFFF;
  --bant-ustu-ikincil:  #FFFFFF;
  --vurgu:              #F1731F;
  --vurgu-ustu:         #3D1F04;
  --vurgu-metin:        #B34E06;
  --rozet:              #D6165A;
  --rozet-ustu:         #FFFFFF;


  /* Boşluk — olculer.dart Aralik */
  --hat: 2px;  --xs: 4px;  --sm: 8px;  --md: 12px;
  --lg: 16px;  --xl: 24px; --xxl: 32px; --xxxl: 48px; --dev: 64px;

  /* Yarıçap — olculer.dart Yaricap (tek aile) */
  --y-sm: 10px; --y-md: 14px; --y-lg: 20px; --y-sayfa: 26px; --y-hap: 999px;

  /* Hareket — olculer.dart Hareket */
  --h-basis: 120ms; --h-yerinde: 200ms; --h-giris: 320ms; --h-cikis: 190ms;
  --egri: cubic-bezier(.2, .8, .2, 1);

  /* Düzen */
  --kabuk: 1200px;
  --okuma: 720px;   /* okumaGenisligi */
  --bant-yuksekligi: 64px;

  /* ⛔ `light dark` DEĞİL: site tek temalıdır. İkili yazılsaydı tarayıcı, sayfanın
     kendi zemini açık dururken girdi ve kaydırma çubuğu gibi YERLEŞİK yüzeyleri
     koyu çizerdi — yarı koyu, kimsenin seçmediği bir arayüz. */
  color-scheme: light;
}


/* ── 2. Sıfırlama ───────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--yuzey);
  color: var(--yuzey-ustu);
  /* ⛔ Webfont YOK — DESIGN.md "Tek aile: platform varsayılanı". */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--ucuncul); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* Klavye odağı — her etkileşimli öğede görünür. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ucuncul);
  outline-offset: 2px;
  border-radius: var(--y-sm);
}

/* MediaQuery.disableAnimationsOf karşılığı. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.gizli-erisilebilir {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.atla {
  position: absolute; left: var(--lg); top: -100px; z-index: 100;
  background: var(--birincil); color: var(--birincil-ustu);
  padding: var(--md) var(--lg); border-radius: var(--y-sm); font-weight: 700;
  transition: top var(--h-yerinde) var(--egri);
}
.atla:focus { top: var(--lg); }

/* ── 3. Tipografi — DESIGN.md slot sözleşmesi ───────────────────────────── */

.t-dev     { font-size: clamp(34px, 5.2vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.t-buyuk   { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.t-baslik  { font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.t-bolum   { font-size: 20px; font-weight: 700; line-height: 1.25; }
.t-varlik  { font-size: 16px; font-weight: 700; line-height: 1.3; }
.t-satir   { font-size: 14px; font-weight: 700; line-height: 1.35; }
.t-govde   { font-size: 15px; line-height: 1.6; }
.t-kucuk   { font-size: 12.5px; line-height: 1.5; color: var(--yuzey-ustu-ikincil); }
.t-etiket  { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.t-deger   { font-size: clamp(27px, 3vw, 34px); font-weight: 800; color: var(--deger-metni);
             font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -.02em; }
.ikincil-metin { color: var(--yuzey-ustu-ikincil); }

/* ── 4. Düzen ───────────────────────────────────────────────────────────── */

.kabuk { width: 100%; max-width: var(--kabuk); margin-inline: auto; padding-inline: var(--lg); }
@media (min-width: 840px) { .kabuk { padding-inline: var(--xxl); } }

.bolum { padding-block: var(--xxxl); }
@media (min-width: 840px) { .bolum { padding-block: var(--dev); } }
.bolum--sik { padding-block: var(--xxl); }
.bolum--krem { background: var(--ucuncul-kap); }
.bolum--kap { background: var(--kap-alt); }

.bolum-basi {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--md); margin-bottom: var(--xl);
}
.bolum-basi p { margin-top: var(--hat); max-width: 60ch; }

.izgara { display: grid; gap: var(--lg); }
.izgara--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.okuma { max-width: var(--okuma); }

/* ── 5. Bileşenler ──────────────────────────────────────────────────────── */

/* Düğme */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sm);
  min-height: 48px; padding: 0 var(--xl);
  border: 0; border-radius: var(--y-hap);
  font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform var(--h-basis) var(--egri), background var(--h-yerinde) var(--egri),
              box-shadow var(--h-yerinde) var(--egri);
}
.dugme:hover { text-decoration: none; }
.dugme:active { transform: scale(.97); }
.dugme--dolu    { background: var(--birincil); color: var(--birincil-ustu); }
.dugme--dolu:hover { box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--birincil) 70%, transparent); }
.dugme--vurgu   { background: var(--vurgu); color: var(--vurgu-ustu); }
.dugme--vurgu:hover { box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--vurgu) 70%, transparent); }
.dugme--cerceve { background: transparent; color: var(--vurgu-metin);
                  box-shadow: inset 0 0 0 2px currentColor; }
.dugme--cerceve:hover { background: color-mix(in srgb, var(--vurgu) 10%, transparent); }
.dugme--sessiz  { background: var(--kap); color: var(--yuzey-ustu); }
.dugme--sessiz:hover { background: var(--kap-ust); }
.dugme--kucuk   { min-height: 40px; padding: 0 var(--lg); font-size: 13.5px; }
.dugme--beyaz   { background: var(--bant-ustu-metin); color: var(--bant-baslangic); }

/* Kart — beyaz + saç teli çerçeve, gölge yok (DESIGN.md "Biçim") */
.kart {
  background: var(--kap-en-alt);
  border: 1px solid var(--cerceve-ince);
  border-radius: var(--y-md);
  overflow: hidden;
}
.kart--tiklanabilir { transition: transform var(--h-yerinde) var(--egri), border-color var(--h-yerinde) var(--egri); }
.kart--tiklanabilir:hover { transform: translateY(-3px); border-color: var(--birincil); }

/* Rozet / çip */
.rozet {
  display: inline-flex; align-items: center; gap: var(--xs);
  padding: var(--xs) var(--md); border-radius: var(--y-hap);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.rozet--guven   { background: var(--basari-zemin); color: var(--basari); }
.rozet--analiz  { background: var(--bilgi-zemin);  color: var(--bilgi); }
.rozet--gezginci{ background: var(--uyari-zemin);  color: var(--uyari); }
.rozet--sari    { background: var(--birincil); color: var(--birincil-ustu); }

.cip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 var(--md); border-radius: var(--y-hap);
  background: var(--kap); color: var(--yuzey-ustu);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background var(--h-yerinde) var(--egri);
}
.cip:hover { background: var(--kap-ust); text-decoration: none; }
.cip--secili { background: var(--birincil); color: var(--birincil-ustu); }
.cip-seridi { display: flex; flex-wrap: wrap; gap: var(--sm); }

/* Avatar — fotoğraf yok, baş harfler.
   ⛔ Renk addan TÜRETİLMEZ: uygulamadaki `Avatar` (cekirdek/bilesenler/ortak_bilesenler.dart)
      `primaryContainer` + `onPrimaryContainer` okur. Kişiye göre renk ayrımı uygulamada
      yoktur, burada da olmaz — `tool/site_renk_kontrol.php` uydurulmuş tonu yakalar. */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--y-hap);
  background: var(--birincil-kap);
  color: var(--birincil-kap-ustu); font-weight: 800; font-size: 19px; letter-spacing: .01em;
}
.avatar--buyuk { width: 88px; height: 88px; font-size: 30px; }

/* Ölçü ızgarası — sabit sayıda kutu (DESIGN.md: shrinkWrap liste değil) */
.olculer { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--lg); }
.olcu { text-align: center; }
.olcu dt { font-size: 12.5px; color: var(--yuzey-ustu-ikincil); margin-top: var(--hat); }
.olcu dd { margin: 0; }
/* Rakamlar bandı 4 kutu taşır; `auto-fit` dar ekranda 3+1'e düşüyordu (yetim satır).
   Sayı sabit olduğu için kırılım da sabit yazılır: 2×2 → 4×1. */
.olculer--dort { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .olculer--dort { grid-template-columns: repeat(4, 1fr); } }

/* Boş durum */
.bos-durum {
  display: grid; place-items: center; gap: var(--md);
  padding: var(--dev) var(--lg); text-align: center;
  background: var(--kap-alt); border-radius: var(--y-lg);
}

/* Uyarı kutusu */
.kutu { border-radius: var(--y-md); padding: var(--lg); border-inline-start: 4px solid; }
.kutu--bilgi  { background: var(--bilgi-zemin);  border-color: var(--bilgi); }
.kutu--uyari  { background: var(--uyari-zemin);  border-color: var(--uyari); }
.kutu--basari { background: var(--basari-zemin); border-color: var(--basari); }

/* ── 6. Kabuk: üst bant + alt bilgi ─────────────────────────────────────── */

.ust-bant {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--yuzey) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cerceve-ince);
}
.ust-bant__ic {
  display: flex; align-items: center; gap: var(--lg);
  min-height: var(--bant-yuksekligi);
}
.marka { display: flex; align-items: center; gap: var(--sm); margin-inline-end: auto; }
.marka:hover { text-decoration: none; }
.marka img { height: 30px; width: auto; }
.marka__ad { font-size: 17px; font-weight: 800; color: var(--yuzey-ustu); letter-spacing: -.01em; }

.gezinme { display: none; gap: var(--xs); }
@media (min-width: 900px) { .gezinme { display: flex; } }
.gezinme a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--md);
  border-radius: var(--y-sm); color: var(--yuzey-ustu);
  font-size: 14.5px; font-weight: 600;
  transition: background var(--h-yerinde) var(--egri);
}
.gezinme a:hover { background: var(--kap); text-decoration: none; }
.gezinme a[aria-current="page"] { color: var(--ucuncul); background: var(--ucuncul-kap); }

.bant-eylem { display: flex; align-items: center; gap: var(--sm); }
.bant-eylem .dugme { display: none; }
@media (min-width: 620px) { .bant-eylem .dugme { display: inline-flex; } }

.ikon-dugme {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--y-sm); cursor: pointer;
  color: var(--yuzey-ustu);
  transition: background var(--h-yerinde) var(--egri);
}
.ikon-dugme:hover { background: var(--kap); }
@media (min-width: 900px) { .ikon-dugme--menu { display: none; } }

/* Çekmece — kompaktta menü (DESIGN.md: hamburger + çekmece) */
.cekmece {
  border: 0; padding: 0; margin: 0; width: min(320px, 88vw); max-width: none;
  height: 100dvh; max-height: none;
  margin-inline-start: auto;   /* sağdan açılır */
  background: var(--yuzey); color: var(--yuzey-ustu);
}
.cekmece::backdrop { background: rgba(0, 0, 0, .45); }
.cekmece__ic { padding: var(--lg); display: grid; gap: var(--xs); align-content: start; }
.cekmece__basi { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sm); }
.cekmece a {
  display: block; padding: var(--md); border-radius: var(--y-sm);
  color: var(--yuzey-ustu); font-weight: 600;
}
.cekmece a:hover { background: var(--kap); text-decoration: none; }
.cekmece hr { border: 0; border-top: 1px solid var(--cerceve-ince); margin: var(--md) 0; }

/* Alt bilgi */
.alt-bilgi { background: var(--kap-alt); border-top: 1px solid var(--cerceve-ince); padding-block: var(--xxxl) var(--xl); }
.alt-bilgi__izgara { display: grid; gap: var(--xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.alt-bilgi h3 { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--yuzey-ustu-ikincil); margin-bottom: var(--md); }
.alt-bilgi li { margin-bottom: var(--sm); }
.alt-bilgi li a { color: var(--yuzey-ustu); font-size: 14px; }
.alt-bilgi__son {
  display: flex; flex-wrap: wrap; gap: var(--md); justify-content: space-between; align-items: center;
  margin-top: var(--xxl); padding-top: var(--lg); border-top: 1px solid var(--cerceve-ince);
}

/* ── 7. Kahraman (hero) ─────────────────────────────────────────────────── */

.kahraman {
  position: relative; overflow: hidden;
  /* ⛔ Duraklar keyfi değil, ÖLÇÜLDÜ. Düz iki duraklı gradyanda açık uç
     (`bant-bitis`) metnin altına giriyor ve beyaz metin 3,21:1'e düşüyordu.
     Renkler aynı; açık uç metnin bittiği bölgeye itildi. Yöntem ve ölçüm:
     docs/site.md "Bant gradyanı". */
  background: linear-gradient(135deg,
              var(--bant-baslangic) 0%,
              var(--bant-baslangic) 64%,
              var(--bant-bitis) 100%);
  color: var(--bant-ustu-metin);
  padding-block: var(--dev) calc(var(--dev) + var(--xxl));
}
/* Petek dokusu — marka motifi, dekoratif; ekran okuyucudan gizli. */
.kahraman::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><path d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='white' stroke-width='2'/><path d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='white' stroke-width='2'/></svg>");
  background-size: 56px 96px;
  opacity: .12;
  mask-image: radial-gradient(120% 100% at 80% 0%, #000 10%, transparent 72%);
}
.kahraman > * { position: relative; z-index: 1; }
.kahraman__izgara { display: grid; gap: var(--xxl); align-items: center; }
@media (min-width: 940px) { .kahraman__izgara { grid-template-columns: 1.15fr .85fr; gap: var(--dev); } }
.kahraman h1 { max-width: 16ch; }
.kahraman__ozet { margin-top: var(--lg); max-width: 52ch; color: var(--bant-ustu-ikincil); font-size: 17px; line-height: 1.6; }
.kahraman__eylem { display: flex; flex-wrap: wrap; gap: var(--md); margin-top: var(--xl); }
.kahraman__guven { display: flex; flex-wrap: wrap; gap: var(--lg); margin-top: var(--xxl); }
.kahraman__guven div { display: flex; align-items: center; gap: var(--sm); font-size: 14px; color: var(--bant-ustu-ikincil); }

/* Kahramanın içindeki arıcı kartı — bandın üstünde duran beyaz yüzey */
.vitrin-karti {
  background: var(--kap-en-alt); color: var(--yuzey-ustu);
  border-radius: var(--y-sayfa); padding: var(--xl);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45);
}
.vitrin-karti__basi { display: flex; align-items: center; gap: var(--md); }
.vitrin-karti__alinti {
  margin-top: var(--lg); padding: var(--lg);
  background: var(--ucuncul-kap); color: var(--ucuncul-kap-ustu);
  border-radius: var(--y-md); font-size: 15px; line-height: 1.55; font-style: italic;
}
.vitrin-karti .olculer { margin-top: var(--lg); padding-top: var(--lg); border-top: 1px solid var(--cerceve-ince); }

/* ── 8. Arıcı kartı ─────────────────────────────────────────────────────── */

.arici-karti { display: flex; flex-direction: column; padding: var(--lg); gap: var(--md); }
.arici-karti__basi { display: flex; align-items: center; gap: var(--md); }
.arici-karti__ad { display: block; color: var(--yuzey-ustu); }
.arici-karti__ad:hover { text-decoration: none; color: var(--ucuncul); }
.arici-karti__yer { display: flex; align-items: center; gap: var(--xs); font-size: 13px; color: var(--yuzey-ustu-ikincil); margin-top: var(--hat); }
.arici-karti__ozet { font-size: 14px; line-height: 1.55; color: var(--yuzey-ustu-ikincil); flex: 1; }
.arici-karti__olcu {
  display: flex; gap: var(--lg); padding-top: var(--md);
  border-top: 1px solid var(--cerceve-ince); font-size: 13px; color: var(--yuzey-ustu-ikincil);
}
.arici-karti__olcu b { color: var(--deger-metni); font-variant-numeric: tabular-nums; }

/* ── 9. Kategori kutusu ─────────────────────────────────────────────────── */

.kategori-kutusu {
  display: flex; flex-direction: column; align-items: center; gap: var(--md);
  padding: var(--lg) var(--md); text-align: center; color: var(--yuzey-ustu);
}
.kategori-kutusu:hover { text-decoration: none; }
.kategori-kutusu__gorsel {
  display: grid; place-items: center; width: 96px; height: 96px;
  border-radius: var(--y-hap); background: var(--ucuncul-kap); overflow: hidden;
  transition: transform var(--h-yerinde) var(--egri);
}
.kategori-kutusu:hover .kategori-kutusu__gorsel { transform: scale(1.06); }
/* ⛔ `contain` DEĞİL: görseller kare fotoğraf, dairesel kapta kare kalırlardı. */
.kategori-kutusu__gorsel img { width: 100%; height: 100%; object-fit: cover; }
/* Görselsiz kategori: tonlu kapta baş harf — Flutter'daki `_Yedek` ile aynı
   davranış. Renk çifti (--ucuncul-kap-ustu / --ucuncul-kap) kontrast kapısında
   ölçülü (4.5:1, tool/site_kontrast_olc.php) — yeni renk EKLENMEDİ. */
.kategori-kutusu__harf { font-size: 2rem; font-weight: 700; color: var(--ucuncul-kap-ustu); }

/* ── 10. Adımlar (nasıl çalışır) ────────────────────────────────────────── */

.adimlar { counter-reset: adim; display: grid; gap: var(--xl); }
@media (min-width: 780px) { .adimlar { grid-template-columns: repeat(3, 1fr); gap: var(--xxl); } }
.adim { position: relative; padding-top: calc(44px + var(--md)); }
.adim::before {
  counter-increment: adim; content: counter(adim);
  position: absolute; top: 0; inset-inline-start: 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--y-hap); background: var(--vurgu); color: var(--vurgu-ustu);
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.adim h3 { margin-bottom: var(--sm); }

/* ── 11. SSS — yerel <details>, JS yok ──────────────────────────────────── */

.sss { display: grid; gap: var(--md); }
.sss details {
  background: var(--kap-en-alt); border: 1px solid var(--cerceve-ince);
  border-radius: var(--y-md); overflow: hidden;
}
.sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  padding: var(--lg); min-height: 48px; cursor: pointer;
  font-size: 16px; font-weight: 700; list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-inline-end: 2.5px solid var(--vurgu-metin); border-block-end: 2.5px solid var(--vurgu-metin);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--h-yerinde) var(--egri);
}
.sss details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sss details[open] summary { background: var(--kap-alt); }
.sss__cevap { padding: var(--lg); padding-top: var(--md); color: var(--yuzey-ustu-ikincil); line-height: 1.65; }

/* ── 12. Güven merdiveni ────────────────────────────────────────────────── */

.merdiven { display: grid; gap: var(--md); }
.merdiven li { display: flex; align-items: center; gap: var(--md); font-size: 14.5px; }
.merdiven__isaret {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: var(--y-hap); font-size: 14px; font-weight: 800;
}
.merdiven__isaret--tamam { background: var(--basari); color: #FFFFFF; }
.merdiven__isaret--eksik { background: var(--kap); color: var(--yuzey-ustu-ikincil); box-shadow: inset 0 0 0 1px var(--cerceve-ince); }
.merdiven li[data-durum="eksik"] { color: var(--yuzey-ustu-ikincil); }

.ilerleme {
  height: 10px; border-radius: var(--y-hap); background: var(--kap);
  overflow: hidden; margin-block: var(--md);
}
.ilerleme span { display: block; height: 100%; border-radius: var(--y-hap); background: var(--basari); }

/* ── 13. Yazı gövdesi ───────────────────────────────────────────────────── */

.yazi-govde { max-width: var(--okuma); }
.yazi-govde h2 { margin-top: var(--xxl); margin-bottom: var(--md); }
.yazi-govde p { margin-bottom: var(--lg); font-size: 17px; line-height: 1.75; }
.yazi-govde > :first-child { margin-top: 0; }

/* ── 14. Form ───────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--lg); max-width: var(--okuma); }
.alan { display: grid; gap: var(--sm); }
.alan label { font-size: 14px; font-weight: 700; }
.alan input, .alan textarea, .alan select {
  width: 100%; min-height: 48px; padding: var(--md) var(--lg);
  background: var(--kap); color: var(--yuzey-ustu);
  border: 0; border-radius: var(--y-md); font: inherit; font-size: 15px;
  transition: box-shadow var(--h-yerinde) var(--egri);
}
.alan textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  /* ⛔ `outline: none` YAZMA — `:focus-visible` halkasını (tek erişilebilir odak
     göstergesi, 5,41:1) öldürür ve geriye yalnız sarı iç gölge kalır: beyaz/gri
     zeminde 1,65:1, yani görünmez. Sarı burada süs, gösterge DEĞİL. */
  box-shadow: inset 0 0 0 2px var(--birincil);
}
.alan__ipucu { font-size: 12.5px; color: var(--yuzey-ustu-ikincil); }
.alan__hata { font-size: 13px; font-weight: 600; color: var(--hata); }
.alan--hatali input, .alan--hatali textarea, .alan--hatali select { box-shadow: inset 0 0 0 2px var(--hata); }
.alan-cifti { display: grid; gap: var(--lg); }
@media (min-width: 640px) { .alan-cifti { grid-template-columns: 1fr 1fr; } }

/* ── 15. Uygulama bandı ─────────────────────────────────────────────────── */

.uygulama-bandi {
  background: var(--vurgu); color: var(--vurgu-ustu);
  border-radius: var(--y-sayfa); padding: var(--xxl);
  display: grid; gap: var(--xl); align-items: center;
}
@media (min-width: 840px) { .uygulama-bandi { grid-template-columns: 1.4fr 1fr; padding: var(--xxxl); } }
.uygulama-bandi p { margin-top: var(--md); max-width: 48ch; }
.magaza-dugmeleri { display: flex; flex-wrap: wrap; gap: var(--md); }
.magaza-dugmesi {
  display: inline-flex; align-items: center; gap: var(--md);
  min-height: 56px; padding: 0 var(--xl); border-radius: var(--y-md);
  background: var(--vurgu-ustu); color: #FFFFFF; text-decoration: none;
  transition: transform var(--h-basis) var(--egri);
}
.magaza-dugmesi:hover { text-decoration: none; transform: translateY(-2px); }
.magaza-dugmesi small { display: block; font-size: 11px; opacity: .75; line-height: 1.2; }
.magaza-dugmesi b { display: block; font-size: 15px; line-height: 1.25; }
.magaza-dugmesi[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ── 16. Süzgeç çubuğu ──────────────────────────────────────────────────── */

.suzgec { display: grid; gap: var(--lg); margin-bottom: var(--xl); }
.suzgec__satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); }
.suzgec__etiket { font-size: 13px; font-weight: 700; color: var(--yuzey-ustu-ikincil); margin-inline-end: var(--xs); }

/* ── 17. Sayfa başlığı bandı ────────────────────────────────────────────── */

.sayfa-basi {
  background: var(--ucuncul-kap); color: var(--ucuncul-kap-ustu);
  padding-block: var(--xxl); border-bottom: 1px solid var(--cerceve-ince);
}
.sayfa-basi h1 { color: var(--yuzey-ustu); }
.sayfa-basi p { margin-top: var(--sm); max-width: 68ch; }
.kirinti { display: flex; flex-wrap: wrap; gap: var(--sm); font-size: 13px; margin-bottom: var(--md); }
.kirinti a { color: inherit; }
.kirinti span { color: var(--yuzey-ustu-ikincil); }

/* ── 18. Profil ─────────────────────────────────────────────────────────── */

.profil-basi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xl); }
.profil-duzen { display: grid; gap: var(--xxl); }
@media (min-width: 940px) { .profil-duzen { grid-template-columns: 1fr 340px; gap: var(--dev); align-items: start; } }
.yan-kart { display: grid; gap: var(--lg); padding: var(--xl); position: sticky; top: calc(var(--bant-yuksekligi) + var(--lg)); }
.bilgi-satiri { display: flex; align-items: baseline; justify-content: space-between; gap: var(--md); font-size: 14px; }
.bilgi-satiri dt { color: var(--yuzey-ustu-ikincil); }
.bilgi-satiri dd { margin: 0; font-weight: 700; text-align: end; }