/* =====================================================================
 * css/cekirdek.css — Çekirdek katman: reset, tipografi, kabuk (üst bar),
 * buton/girdi/kart/hap/tablo bileşenleri. TÜM öğrenci/veli/ziyaretçi
 * sayfaları bunu yükler (css/tema.php'den SONRA — token'lar oradan gelir).
 * panel/ (yönetim) bu dosyanın DIŞINDA, kendi gömülü stilini kullanır.
 *
 * Kanon: docs/tasarim/01-tasarim-sistemi.md §2, §3, §5, §7
 * Uygulama planı: docs/tasarim/10-tema-sistemi-uygulama.md §9
 *
 * Bu dosya ham hex İÇERMEZ — her renk css/tema.php'nin ürettiği token'dan
 * gelir. Sayfa-özel <style> blokları bu sınıfları GENİŞLETİR, üzerine yazmaz.
 * ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; }

/* ---------- Tipografi (kanon §2) ----------
 * Marka yazı ailesi: Commissioner (display + gövde) + IBM Plex Mono
 * (künye/veri/etiket). Sora/Manrope ikilisi kaldırıldı; font adları TEK yerde
 * — bu üç token'da — geçer, kural içine ham aile adı yazılmaz.
 * Renk token'ları css/tema.php'den gelir; buradaki :root yalnız tipografi. */
:root {
  --yz-baslik: 'Commissioner', 'Noto Sans Georgian', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yz-metin:  'Commissioner', 'Noto Sans Georgian', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yz-mono:   'IBM Plex Mono', 'Noto Sans Georgian', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sayfa kabının üst sınırı. TEK YERDE durur: üst bar, gövde ve altbilgi
     aynı değeri okur, yoksa menü içerikle hizalanmaz. Referans şablon
     (educeet) 1350px + 15px dolgu kullanıyor; 1120 geniş ekranda iki yanda
     kocaman boşluk bırakıyordu.
     25 Eylül 2026: 1640px (kullanıcı: "tam ekranda kenarlar fazla boş
     kalıyor"). Öğrenci paneliyle aynı ölçü; yan boşluk ekranla orantılı
     (--kap-bosluk). Uzun metin yine --olcu'ya yaslanır. */
  --kap: 1640px;
  --kap-bosluk: clamp(16px, 2.6vw, 44px);

  /* Düz metin ölçüsü. Kap genişledikçe paragraf satırı da uzuyor; 75'ten
     uzun satır okunurluğu düşürür, o yüzden prose blokları kaba değil bu
     ölçüye yaslanır. */
  --olcu: 72ch;
}
body {
  font-family: var(--yz-metin);
  background: var(--zemin);
  color: var(--murekkep);
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: var(--yz-baslik);
  line-height: 1.2;
  margin: 0;
  color: var(--murekkep);
}
h1 { font-weight: 700; font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2rem); letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: 1.25rem; }
h3 { font-weight: 600; font-size: 1rem; }
/* Bağlantı rengi `--birincil-KOYU` (7 Eylül 2026 kontrast denetimi, B3).
 * `--birincil` metin olarak beyaz üstünde Orman 4,33 · Okyanus 4,35 ·
 * ElMustafa 4,77; `--zemin` üstünde 4,04'e, `--yuzey-2` üstünde 3,80'e
 * düşüyor — yani sayfa zemini değiştikçe sessizce eşiğin altına geçen bir
 * TABAN kuralıydı. Koyu ton yedi temada 6,32-11,63.
 * DOLGU ve ÇİZGİ rolünde `--birincil` DURUYOR (aktif ray, odak halkası,
 * kenarlıklar): oradaki eşik 3,0 ve en kötü tema 4,04. */
a { color: var(--birincil-koyu); }
.mono, .yk-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Künye/veri/etiket ailesi — sayı hizası mono'nun kendisinden gelir. */
.kunye {
  font-family: var(--yz-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: -.01em;
  color: var(--murekkep-2);
}
/* Künye şeridi bağlantı TAŞIYABİLİYOR (dersler.php'nin kurs künyesi:
   "Tüm dersler · Ahlak Okulu"). 12 px mono satır tek başına 15 px kalıyordu,
   WCAG 2.2 asgari hedefi 24×24. Yalnız bağlantıya uygulanır; künye metninin
   kendi satır yüksekliği değişmez. */
.kunye a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Odak ve hareket (kanon §7) ---------- */
:focus-visible {
  outline: 2px solid var(--birincil);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Yerleşim (kanon §5c) ---------- */
.wrap { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kap-bosluk); }
.narrow { max-width: 440px; }

/* ---------- Ziyaretçi kabuğu (kanon §5b) ----------
 * TEK kaynak: ogr/ziyaretci-nav.php → zy_header()/zy_footer(). Eski iki kopya
 * (`header.top` PHP dalı + statik `.site-header`) ve dar ekrandaki yatay
 * kaydırmalı link şeridi KALDIRILDI; dar ekranda artık hamburger + tam ekran
 * menü katmanı var (gruplu liste, ürünün yapısını öğreten).
 *
 * Bar yüksekliği tek değişkende: menü katmanı barın hemen altından başlar,
 * böylece hamburger katman açıkken de görünür ve ikinci tıkta kapatır. */
:root { --zy-bar: 60px; }

.zy-bar {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--cizgi);
  /* Blur ::before'a alındı: backdrop-filter taşıyan bir öğe, içindeki
     position:fixed katmana kapsayıcı blok olur ve tam ekran menüyü barın
     içine hapsederdi. Pseudo-eleman blur'u taşır, bar temiz kalır. */
  background: transparent;
}
.zy-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--yuzey) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.zy-bar-ic {
  max-width: var(--kap); margin: 0 auto; padding: 0 var(--kap-bosluk);
  height: var(--zy-bar); display: flex; align-items: stretch; gap: 8px;
}

/* Marka — iki satır: ad + küçük künye. */
.zy-marka {
  flex: none; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--yz-baslik); font-weight: 700; font-size: 17px;
  line-height: 1.15; color: var(--murekkep); text-decoration: none;
}
.zy-marka small {
  font-family: var(--yz-mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-2);
}

/* Orta nav (≥1000px; 1000-1239 sıkı) — beş araç. Aktif sayfanın altında ince ray; ray TEK
   vurgu rengindedir, modül renkleri menüye taşınmaz (anti-slop). */
.zy-nav { flex: 1; display: flex; align-items: stretch; justify-content: center; gap: clamp(2px, 1.4vw, 18px); }
.zy-nav a {
  position: relative; display: flex; align-items: center; padding: 0 6px;
  font-size: 14px; color: var(--murekkep-2); text-decoration: none; white-space: nowrap;
  transition: color .15s ease-out;
}
.zy-nav a:hover { color: var(--murekkep); }
.zy-nav a.on { color: var(--murekkep); font-weight: 600; }
.zy-nav a.on::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px;
  height: 2px; background: var(--birincil); border-radius: 2px 2px 0 0;
}

.zy-eylem { flex: none; display: flex; align-items: center; gap: 12px; }
/* `min-height` dokunma hedefi için: metin 14px olduğundan kutu 22px kalıyordu,
   WCAG 2.2 asgari hedefi 24×24. Yükseklik büyüdü, yazı ve konum aynı. */
.zy-giris { display: inline-flex; align-items: center; min-height: 24px;
  font-size: 14px; color: var(--murekkep-2); text-decoration: none; }
.zy-giris:hover { color: var(--murekkep); }
/* Nav'ın TEK dolgulu öğesi (kanon §5b). */
.zy-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 10px; background: var(--birincil-koyu); color: var(--yuzey);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-out;
}
.zy-cta:hover { background: color-mix(in srgb, var(--birincil-koyu) 86%, var(--murekkep)); color: var(--yuzey); }
@media (prefers-reduced-motion: reduce) { .zy-nav a, .zy-cta { transition: none; } }

/* ---------- Mobil menü (<1000px) ----------
 * <details>: JS olmadan da açılır. summary hamburger, [open] durumunda kapat
 * ikonuna döner. Katman barın altını tamamen kaplar. */
.zy-mobil { display: none; position: static; }
.zy-mobil > summary {
  list-style: none; width: 44px; height: 44px; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--yuzey); color: var(--murekkep); cursor: pointer;
}
.zy-mobil > summary::-webkit-details-marker { display: none; }
.zy-mobil > summary::marker { content: ""; }
.zy-mobil > summary:hover { border-color: var(--birincil); color: var(--birincil-koyu); }
.zy-mobil .zy-i-kapat { display: none; }
.zy-mobil[open] .zy-i-ac { display: none; }
.zy-mobil[open] .zy-i-kapat { display: block; }

.zy-katman {
  position: fixed; left: 0; right: 0; top: var(--zy-bar); bottom: 0; z-index: 29;
  background: var(--zemin); overflow-y: auto;
  padding: 6px 16px calc(28px + env(safe-area-inset-bottom));
}
.zy-grup {
  margin: 18px 6px 6px; font-family: var(--yz-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-2);
}
.zy-katman nav > .zy-grup:first-child { margin-top: 10px; }
.zy-oge {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 8px 12px; border-radius: 12px;
  color: var(--murekkep); text-decoration: none;
}
.zy-oge svg { flex: none; color: var(--murekkep-2); }
.zy-oge:hover { background: var(--yuzey-2); }
/* Aktif öğenin metni `--birincil-KOYU`: `--birincil`, `--birincil-acik`
   zemininde Orman 3,73 · Okyanus 3,74 · ElMustafa 4,07 veriyordu (aynı
   sebep, aynı çözüm). Koyu ton aynı zeminde 5,44-9,77. */
.zy-oge.on { background: var(--birincil-acik); color: var(--birincil-koyu); }
.zy-oge.on svg { color: var(--birincil-koyu); }
.zy-oge-metin { display: block; min-width: 0; }
.zy-oge-metin b { display: block; font-size: 15px; font-weight: 600; }
.zy-oge-metin small { display: block; font-size: 12.5px; color: var(--murekkep-2); line-height: 1.4; }
.zy-oge.on .zy-oge-metin small { color: var(--birincil-koyu); }

.zy-katman-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.zy-katman-alt .btn { margin-top: 0; }
.zy-katman-alt .btn + .btn { margin-top: 10px; }
.zy-katman-not {
  margin: 14px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--murekkep-2);
}

/* ---------- "Okullar" açılır listesi (akademi → okul) ----------
 * Müşterinin istediği hiyerarşi (akademiler, altlarında okullar) şemada zaten
 * var: kademe → ders. Menü onu gösterir, veri eklemez.
 *
 * İKİ AYRI HEDEF, TEK ÖĞE DEĞİL: solda "Okullar" bağlantısı (dersler.php),
 * sağında paneli açan küçük düğme. Başlığın kendisi açıcı olsaydı JavaScript
 * kapalı tarayıcıda katalog erişilemez kalırdı.
 *
 * Açıcı <summary>'dir: JS'siz de açılır, klavyede Enter/Boşluk alır, odak
 * halkası tarayıcıdan gelir. Dokunma hedefi 30×30 (eşik 24×24).
 *
 * HİÇBİR ŞEY KENDİLİĞİNDEN AÇILMAZ: :hover ile açılan panel yok. Fareyle
 * geçerken açılan menü, altındaki içeriği kullanıcı istemeden örter. */
/* `.zy-acilir-kutu` ve `.zy-acilir-kutu[open] > …` kuralları 7 Eylül 2026'da
   SİLİNDİ (plan §11.16): açılır menü artık `<details>` sarmalayıcı
   kullanmıyor, A3 onu `[data-acik]` / `aria-expanded` ile kuruyor
   (css/giris-kapisi.css). Sınıf DOM'da hiç geçmiyordu — ölü kuraldı. */
.zy-acilir { position: relative; display: flex; align-items: stretch; gap: 2px; }
.zy-acilir-dug {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  color: var(--murekkep-2); background: none;
}
.zy-acilir-dug::-webkit-details-marker { display: none; }
.zy-acilir-dug::marker { content: ""; }
.zy-acilir-dug:hover { background: var(--yuzey-2); color: var(--murekkep); }
.zy-acilir-dug svg { width: 16px; height: 16px; }

/* Panel `position: fixed`: bar `sticky`, blur ise ::before'da durduğu için
   (yukarıdaki not) sabit konum viewport'a göre çözülür. Bilinçli tercih —
   mutlak konumda panel dar masaüstünde (900-1000px) sağ kenardan taşıp yatay
   kaydırma üretiyordu; genişliği viewport'a bağlamak taşmayı imkânsız kılar. */
.zy-acilir-panel {
  position: fixed; top: var(--zy-bar); left: 50%; transform: translateX(-50%);
  /* Genişlik SABİT (max-content DEĞİL): max-content, auto-fill ızgarasını tek
     sütuna indiriyordu — 13 okul 708 px'lik bir sütun hâline geliyor ve panel
     ekranın dibine kadar iniyordu. Sabit genişlik ızgaraya üç sütun veriyor. */
  z-index: 28; width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - var(--zy-bar) - 24px); overflow-y: auto;
  margin-top: 6px; padding: 16px 18px 12px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--murekkep) 40%, transparent);
}
.zy-akademi + .zy-akademi { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.zy-akademi-bas {
  /* min-height 24: WCAG 2.5.8 dokunma hedefi. 11.5 px mono satır tek başına
     22 px kalıyordu. */
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 4px; border-radius: 6px;
  font-family: var(--yz-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--birincil-koyu); text-decoration: none;
}
.zy-akademi-bas:hover { text-decoration: underline; text-underline-offset: 3px; }
.zy-okul-liste {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px;
}
/* .zy-nav a genel kuralını ezmek için iki sınıflı seçici (tek renk, tek
   hizalama; nav şeridinin ölçüleri panele taşınmasın). */
.zy-nav .zy-okul-liste a, .zy-agac .zy-okul-liste a {
  display: flex; align-items: center; min-height: 32px; padding: 5px 8px;
  border-radius: 8px; font-size: 13.5px; line-height: 1.35; white-space: normal;
  color: var(--murekkep); text-decoration: none;
}
.zy-nav .zy-okul-liste a:hover, .zy-agac .zy-okul-liste a:hover {
  background: var(--birincil-acik); color: var(--birincil-koyu);
}
.zy-acilir-tumu {
  display: flex; align-items: center; gap: 6px; min-height: 34px;
  margin-top: 12px; padding: 6px 8px; border-top: 1px solid var(--cizgi);
  font-size: 13px; font-weight: 600; color: var(--birincil-koyu); text-decoration: none;
}
.zy-acilir-tumu:hover { text-decoration: underline; text-underline-offset: 3px; }
.zy-acilir-tumu svg { width: 15px; height: 15px; }

/* Mobil katmandaki ağaç: aynı bağlantılar, kapalı bir <details> içinde.
   Bugün 13 okul var; hepsini düz basmak katmanı üç ekran boyu uzatıyor ve
   asıl menü öğelerini görünmez kılıyordu. */
.zy-agac { margin: 0 0 4px; }
.zy-agac > summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px 0 44px; border-radius: 12px;
  font-size: 13.5px; color: var(--murekkep-2); cursor: pointer;
}
.zy-agac > summary::-webkit-details-marker { display: none; }
.zy-agac > summary::marker { content: ""; }
.zy-agac > summary:hover { background: var(--yuzey-2); color: var(--murekkep); }
.zy-agac > summary svg { width: 16px; height: 16px; }
.zy-agac[open] > summary { color: var(--murekkep); }
.zy-agac[open] > summary svg { transform: rotate(180deg); }
.zy-agac-ic { padding: 2px 12px 10px 44px; }
.zy-agac .zy-okul-liste { grid-template-columns: 1fr; gap: 0; }
.zy-agac .zy-okul-liste a { min-height: 44px; font-size: 14px; }
.zy-agac .zy-acilir-tumu { margin-top: 10px; }

/* SIKI ŞERİT 1000-1239 px (6 Ekim 2026). Şerit sekiz öğe + Canlı Yayın +
   Giriş/Kayıt Ol ile tam boyda ancak 1240 px'te sığıyor; altında taşıyor ve
   "Kayıt Ol" kesiliyordu (Dil Akademisi eklenmeden önce de 1024'te 38 px).
   Önce kırılım 1240'a çekildi, ama ekranı biraz daraltınca menünün hemen
   hamburgere dönmesi istenmedi (kullanıcı). Bu aralıkta şerit küçülür: yazı
   13 px, öğe dolgusu ve aralıklar daralır. Ölçüm 1024 px: 58 px pay kalıyor. */
@media (min-width: 1000px) and (max-width: 1239px) {
  .zy-bar-ic { padding: 0 16px; gap: 6px; }
  .zy-nav { gap: 2px; }
  .zy-nav a { font-size: 13px; padding: 0 4px; }
  .zy-bar .zy-nav a.zy-canli { padding: 0 10px; font-size: 13px; }
  .zy-acilir-dug { width: 24px; }
  .zy-eylem { gap: 8px; }
  .zy-cta { padding: 0 12px; font-size: 13px; }
}
/* 1000 px altında hamburger menü (önce 900; 900-999 arasında sıkı şerit de
   sığmıyor). */
@media (max-width: 999px) {
  .zy-nav, .zy-giris { display: none; }
  .zy-mobil { display: block; }
  .zy-bar-ic { gap: 10px; }
  .zy-eylem { margin-left: auto; gap: 10px; }
}
/* Çok dar ekranda marka tek satıra iner, CTA daralır — 320px'te de taşma yok. */
@media (max-width: 400px) {
  .zy-bar-ic { padding: 0 14px; }
  .zy-marka small { display: none; }
  .zy-cta { padding: 0 12px; font-size: 13.5px; }
}

/* Kısa sayfalarda (giriş, kayıt) altbilgi sayfanın ortasında asılı kalmasın. */
/* Grid, flex değil: tek sütun `minmax(0, 1fr)` ile sınırlanır. Flex/otomatik
   sütunda öğenin min-content genişliği (ör. tercih-rehberi'nin yatay kaydırmalı
   bölüm şeridi) gövdeye dayatılır ve 390px'te sayfa yana kayardı. */
body.ziyaretci-govde {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}
/* Grid öğesinde `margin-inline:auto` (ör. `.wrap`) esnemeyi kapatır ve öğe
   fit-content'e, yani içeriğinin min-content genişliğine kadar büyüyebilir —
   bu da 390px'te gövdeyi yana kaydırıyordu. `width:100%` öğeyi track'e
   sabitler; `.wrap`'in 1120px üst sınırı ve ortalaması bozulmadan kalır. */
/* `.yukari` HARİÇ: o düğme `position: fixed`, yani ızgara track'inde hiç
   yer almıyor. Kuralın amacı grid öğesini track'e sabitlemek; akış dışındaki
   bir öğeye `width:100%` vermek onu 44px'lik daireden ekran genişliğinde bir
   şeride çeviriyordu. */
body.ziyaretci-govde > *:not(.yukari) { min-width: 0; width: 100%; }
body.ziyaretci-govde > .zy-alt { margin-top: auto; }

/* ---------- Ziyaretçi altbilgisi (3 sütun, mono künye, sakin) ---------- */
.zy-alt {
  border-top: 1px solid var(--cizgi); margin-top: 48px;
  background: var(--yuzey); color: var(--murekkep-2);
  text-align: left; padding: 0;
}
.zy-alt-ic {
  max-width: var(--kap); margin: 0 auto; padding: 32px 20px 8px;
  display: grid; gap: 26px 40px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.zy-alt-baslik {
  font-family: var(--yz-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--murekkep-2); margin-bottom: 10px;
}
.zy-alt-sutun ul { list-style: none; padding: 0; margin: 0; }
.zy-alt-sutun li { margin: 0 0 4px; }
/* inline-flex + min-height 24: bağlantılar 17 px yüksekliğinde satırlardı,
   WCAG 2.5.8'in 24×24 eşiğinin altında. Menü uzadıkça (Hakkımızda,
   Yayınlarımız) altbilgi de uzadı; parmakla isabet ettirilebilir olmalı.
   Satır aralığı `li` boşluğundan alınıp dolguya verildi, yani sütun
   yüksekliği neredeyse aynı kaldı. */
.zy-alt-sutun a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0;
  font-size: 14px; color: var(--murekkep); text-decoration: none;
}
.zy-alt-sutun a:hover { color: var(--birincil-koyu); text-decoration: underline; }
.zy-alt-not { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; max-width: 46ch; }
/* --- Altbilgideki sosyal ağ satırı ---
   Üst şerit 768px altında gizleniyor; sosyal hesaplar yalnız orada kalsaydı
   telefondan hiç görünmezlerdi. Bu satır her ekran boyutunda basılır.
   Telif satırının HEMEN ÜSTÜNDE: ikisi de "kurum imzası" bilgisi. */
.zy-alt-sosyal {
  max-width: var(--kap); margin: 0 auto; padding: 4px 20px 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
}
.zy-alt-sosyal-et {
  font-size: 12px; color: var(--murekkep-2); margin-right: 2px;
}
/* 32×32 hedef: altbilgide yer bol, parmakla vurulacak asıl yüzey burası. */
.zy-alt-sosyal a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; border-radius: 8px;
  color: var(--murekkep-2); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.zy-alt-sosyal a svg { width: 18px; height: 18px; }
.zy-alt-sosyal a:hover, .zy-alt-sosyal a:focus-visible {
  color: var(--murekkep);
  background: color-mix(in srgb, var(--murekkep) 8%, transparent);
}

.zy-alt-telif {
  max-width: var(--kap); margin: 0 auto; padding: 18px 20px 26px;
  font-family: var(--yz-mono); font-size: 11.5px; color: var(--murekkep-2);
}

/* =====================================================================
 * Uygulama kabuğu (kanon §5a — girişli sayfalar, ogr/inc.php app-govde).
 * Sol kenar çubuğu ≥1024px; mini üst bar + alt sekme çubuğu <1024px.
 * ===================================================================== */

/* ---------- Kenar çubuğu ---------- */
.app-kenar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 232px;
  background: var(--yuzey); border-right: 1px solid var(--cizgi);
  display: flex; flex-direction: column; z-index: 20;
}
.app-marka {
  display: block; padding: 20px 20px 16px;
  font-family: var(--yz-baslik);
  font-weight: 700; font-size: 17px; color: var(--murekkep); text-decoration: none;
}
.app-marka small {
  display: block; margin-top: 2px; font-weight: 500; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--murekkep-2);
}
.app-nav-govde { flex: 1; overflow-y: auto; padding: 2px 12px 12px; }
.app-grup-baslik {
  margin: 16px 10px 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-2);
}
.app-nav-govde .app-grup-baslik:first-child { margin-top: 2px; }
.app-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0; border-radius: 10px;
  font-size: 14px; color: var(--murekkep-2); text-decoration: none;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.app-oge svg { flex: none; }
.app-oge:hover { background: var(--yuzey-2); color: var(--murekkep); }
/* Aktif öğe: yalnız zemin + metin/ikon rengi — ray YOK (kanon §0 v3.1, anti-slop #9). */
.app-oge.on { background: var(--birincil-acik); color: var(--birincil-koyu); font-weight: 600; }
/* Menüde düğme olan öğe (Uygulamayı yükle, Madde 16) bağlantıyla aynı görünür; gizliyken hiç yer tutmaz. */
button.app-oge { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.app-oge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .app-oge { transition: none; } }

.app-kullanici {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-top: 1px solid var(--cizgi);
}
/* Fotoğraflı avatar: ölçü ve yuvarlaklık aşağıdaki ortak bloktan geliyor.
   `.app-monogram` doğrudan <img> olabiliyor; `.app-mini-avatar` bir BAĞLANTI
   olduğu için fotoğraf onun içine giriyor ve kabı dolduruyor. */
.app-monogram.km-foto { object-fit: cover; display: block; }
.app-mini-avatar.foto { padding: 0; overflow: hidden; }
.app-mini-avatar img { width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; display: block; }

.app-monogram, .app-mini-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--birincil-acik); color: var(--birincil-koyu);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--yz-baslik);
  font-weight: 700; font-size: 12.5px; text-decoration: none;
}
.app-kullanici-bilgi { min-width: 0; flex: 1; }
.app-kullanici-ad {
  font-size: 13.5px; font-weight: 600; color: var(--murekkep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-kullanici-alt {
  font-size: 11.5px; color: var(--murekkep-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-cikis { flex: none; font-size: 12px; color: var(--murekkep-2); text-decoration: none; }
.app-cikis:hover { color: var(--hata); }

/* ---------- İçerik alanı ---------- */
.app-icerik { margin-left: 232px; min-height: 100vh; }

/* ---------- Canlı ders uyarı şeridi (kurum isteği, 7 Eylül 2026) ----------
   İçeriğin en üstünde, ders başlamışken ya da başlamak üzereyken görünür.
   Katılınabilir ders yoksa sunucu bunu HİÇ basmaz — burada "boşken gizle"
   diye bir kural yok, basılan her şerit gerçek bir derstir.

   Renk: --birincil ailesi. Kırmızı DEĞİL: kırmızı hata demek, burada bir
   fırsat var. Metin zaten "Canlı ders başladı" diyor, rengin tek başına
   anlam taşıması gerekmiyor. */
.cnl-serit {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--birincil) 12%, var(--yuzey));
  border: 1px solid color-mix(in srgb, var(--birincil) 30%, var(--cizgi));
  font-size: 14.5px;
}
/* Yanıp sönen nokta: "şu anda oluyor" hissi. Hareketi azalt diyene sabit. */
.cnl-nokta {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--birincil-koyu);
}
@media (prefers-reduced-motion: no-preference) {
  .cnl-nokta { animation: cnl-nabiz 1.8s ease-in-out infinite; }
  @keyframes cnl-nabiz {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--birincil) 55%, transparent); }
    70%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--birincil) 0%, transparent); }
  }
}
.cnl-metin { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.cnl-metin b { color: var(--murekkep); }
.cnl-ders { color: var(--murekkep-2); }
.cnl-kalan {
  font-family: var(--yz-mono); font-size: 12px; color: var(--murekkep-2);
  white-space: nowrap;
}
/* 44px: şeridin ASIL eylemi, parmakla basılır. `margin-left:auto` düğmeyi
   sağa iter ama dar ekranda satır kırılınca sola döner — sabit bir konum
   yerine akışa bırakıldı. */
.cnl-katil {
  margin-left: auto; display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 20px; border-radius: 9px;
  background: var(--birincil-koyu); color: #fff; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.cnl-katil:hover, .cnl-katil:focus-visible { background: var(--murekkep); color: #fff; }
/* 24x24 dokunma hedefi; şeridin ikincil eylemi olduğu için sade. */
.cnl-kapat {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--murekkep-2);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.cnl-kapat:hover { background: color-mix(in srgb, var(--murekkep) 8%, transparent); color: var(--murekkep); }
.cnl-katil:focus-visible, .cnl-kapat:focus-visible { outline: 2px solid var(--birincil-koyu); outline-offset: 2px; }
@media (max-width: 560px) {
  .cnl-katil { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- Mini üst bar (<1024px, girişli) ---------- */
.app-minibar {
  display: none;
  position: sticky; top: 0; z-index: 25;
  align-items: center; justify-content: space-between;
  height: 52px; padding: 0 16px;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
/* inline-flex + min-height 24: marka bağlantısı 179×23 ölçülmüştü (A4),
   WCAG 2.2 asgari dokunma hedefi 24×24. Yükseklik büyüdü, yazı ve konum aynı. */
.app-marka-mini {
  display: inline-flex; align-items: center; min-height: 24px;
  font-family: var(--yz-baslik);
  font-weight: 700; font-size: 15px; color: var(--murekkep); text-decoration: none;
}

/* ---------- Alt sekme çubuğu (<1024px, uygulamanın imzası) ---------- */
.app-alt-cubuk {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--yuzey); border-top: 1px solid var(--cizgi);
  align-items: stretch; justify-content: space-around;
}
.app-alt-cubuk a, .app-alt-cubuk button {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; min-height: 44px;
  border: 0; background: transparent; font-family: inherit; cursor: pointer;
  color: var(--murekkep-2); text-decoration: none; font-size: 11px;
}
.app-alt-cubuk svg { width: 22px; height: 22px; }
.app-alt-cubuk a.on, .app-alt-cubuk button.on { color: var(--birincil-koyu); font-weight: 600; }

/* ---------- Menü katmanı (alt çubuğun "Menü"süyle açılır, tam ekran) ---------- */
.app-menu-katman {
  position: fixed; inset: 0; z-index: 40; background: var(--zemin);
  overflow-y: auto; padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
}
.app-menu-katman[hidden] { display: none; }
.app-menu-ust { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 16px; }
.app-menu-ust b {
  font-family: var(--yz-baslik); font-size: 16px; color: var(--murekkep);
}
.app-menu-kapat {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--cizgi);
  background: var(--yuzey); color: var(--murekkep);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-menu-katman .app-grup-baslik { margin: 18px 6px 6px; }
.app-menu-katman .app-oge { padding: 11px 12px 11px 16px; font-size: 15px; min-height: 44px; }
.app-menu-katman .app-alt {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi);
}

/* ---------- GECE KABUĞU (25 Eylül 2026) ----------
 * Kullanıcı: "Sesli kitaba gelince panel çok sönük kaldı." Öğrenci kabuğu
 * Sesli Kitap odasıyla (css/sesli.css) aynı dile geçti: kenar çubuğu, telefonda
 * üst çubuk, alt sekme çubuğu ve menü katmanı gece zemininde, fildişi yazı,
 * etkin öğe lamba turuncusu (--vurgu). İçerik alanı sitenin sıcak kâğıdında
 * kalır: formlar, tablolar, uzun metin açık zeminde okunur.
 * Renkler burada türetilir; kurum teması (css/tema.php) değişirse lamba da değişir. */
.app-kenar, .app-minibar, .app-alt-cubuk, .app-menu-katman {
  --kb-gece: var(--tema-gece, #0a1817); --kb-gece-2: var(--tema-gece-2, #112624); --kb-fil: #f3ecdf; --kb-fil-2: #b7c3bd;
  --kb-cizgi: rgba(243, 236, 223, .1); --kb-lamba: var(--vurgu);
}
.app-kenar {
  background:
    radial-gradient(120% 45% at 0% 0%, color-mix(in srgb, var(--kb-lamba) 14%, transparent), transparent 70%),
    radial-gradient(120% 50% at 100% 100%, color-mix(in srgb, var(--birincil) 55%, transparent), transparent 70%),
    var(--kb-gece);
  border-right: 0; color: var(--kb-fil);
}
/* Logo koyu zeminde KENDİ RENKLERİYLE, fildişi bir levhanın içinde. Önceki
   tek renk (beyazlatma) filtresi amblemi düz beyaz bir kareye çeviriyordu
   (kullanıcı: "logo da gözükmüyor"). Levha kurum logosu değişse de doğru
   çalışır: logo açık zemin için çizilmiş, açık zemin ona burada veriliyor. */
.app-kenar .app-marka { display: flex; justify-content: center; align-items: center;
  margin: 16px 14px 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--kb-fil); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
.app-kenar .app-logo { height: 44px; filter: none; }
.app-kenar .app-marka:focus-visible { outline: 2px solid var(--kb-lamba); outline-offset: 3px; }
.app-kenar .app-grup-baslik, .app-menu-katman .app-grup-baslik {
  color: color-mix(in srgb, var(--kb-lamba) 55%, var(--kb-fil-2)); letter-spacing: .14em; font-size: 10.5px;
}
.app-kenar .app-oge, .app-menu-katman .app-oge { color: var(--kb-fil-2); position: relative; }
.app-kenar .app-oge:hover, .app-menu-katman .app-oge:hover { background: rgba(243, 236, 223, .07); color: var(--kb-fil); }
.app-kenar .app-oge.on, .app-menu-katman .app-oge.on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--kb-lamba) 22%, transparent), rgba(243, 236, 223, .04));
  color: var(--kb-fil); font-weight: 600;
}
.app-kenar .app-oge.on svg, .app-menu-katman .app-oge.on svg { color: var(--kb-lamba); }
.app-kenar .app-oge:focus-visible, .app-menu-katman .app-oge:focus-visible { outline: 2px solid var(--kb-lamba); outline-offset: 1px; }
.app-kenar .app-rozet, .app-menu-katman .app-rozet { background: var(--kb-lamba); color: #1c1000; }
.app-kenar .app-nav-govde { scrollbar-width: thin; scrollbar-color: rgba(243, 236, 223, .18) transparent; }
.app-kullanici { border-top: 1px solid var(--kb-cizgi); }
.app-kenar .app-kullanici-ad { color: var(--kb-fil); }
.app-kenar .app-kullanici-alt, .app-kenar .app-cikis { color: var(--kb-fil-2); }
.app-kenar .app-cikis:hover { color: #ff9a9d; }
.app-kenar .app-monogram, .app-minibar .app-mini-avatar { background: color-mix(in srgb, var(--kb-lamba) 22%, var(--kb-gece-2)); color: var(--kb-fil); }

/* Geniş içerik (25 Eylül 2026, kullanıcı: "diğer sayfaları da aynı genişliğe
   getirelim"). Öğrenci kabuğunda içerik 1350px yerine 1640px'e kadar yayılır;
   iki yandaki boşluk ekranla orantılı. Uzun metin ve formlar kendi dar
   kaplarında (.narrow, max-width:..ch) kalır. */
body.app-govde .app-icerik > .wrap { max-width: var(--kap); padding-left: var(--kap-bosluk); padding-right: var(--kap-bosluk); }

/* Telefon: üst çubuk, alt sekme çubuğu, menü katmanı */
.app-minibar { background: var(--kb-gece); border-bottom: 1px solid var(--kb-cizgi); }
.app-marka-mini { color: var(--kb-fil); }
.app-minibar .app-mini-zil { color: var(--kb-fil-2); }
.app-minibar .app-mini-zil:hover { background: rgba(243, 236, 223, .08); color: var(--kb-fil); }
.app-alt-cubuk { background: var(--kb-gece); border-top: 1px solid var(--kb-cizgi); }
.app-alt-cubuk a, .app-alt-cubuk button { color: var(--kb-fil-2); }
.app-alt-cubuk a.on, .app-alt-cubuk button.on { color: var(--kb-fil); }
.app-alt-cubuk a.on svg { color: var(--kb-lamba); }
.app-menu-katman { background: var(--kb-gece); color: var(--kb-fil); }
.app-menu-ust b { color: var(--kb-fil); }
.app-menu-kapat { background: rgba(243, 236, 223, .06); border-color: var(--kb-cizgi); color: var(--kb-fil); }
.app-menu-katman .app-alt { border-top-color: var(--kb-cizgi); }

/* İçerik: sayfa başlığı kitap harfiyle (Literata, ogr_head'de yüklenir) —
   Sesli Kitap ve ana sayfanın "vakar" diliyle aynı. */
body.app-govde .sayfa-baslik h1, body.app-govde .hero h1 {
  font-family: 'Literata', 'Noto Serif Georgian', Georgia, serif; font-weight: 500; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.015em;
}
body.app-govde .card h2:not(.card-baslik), body.app-govde .card h3 { font-family: 'Literata', 'Noto Serif Georgian', Georgia, serif; font-weight: 600; }
body.app-govde .card { border-radius: 18px; }

/* ---------- Kırılımlar (kanon §6 — 1024px kenar çubuğu ↔ alt çubuk) ---------- */
@media (max-width: 1023px) {
  .app-kenar { display: none; }
  .app-icerik { margin-left: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app-minibar { display: flex; }
  .app-alt-cubuk { display: flex; }
}

/* v3 notu: girişli sayfalarda dev karşılama başlığı yok — sayfa başlığı
 * satırının h1'i 22px tek satır (kanon §2). Ziyaretçi kabuğunda hero daha
 * büyük kalır (clamp 30-40px, sayfa-özel .hero kuralı bu genel tanımı geçer). */
body.app-govde .hero { padding: 20px 0 18px; }
body.app-govde .hero h1 { font-size: 22px; }
body.app-govde .hero p { font-size: 13.5px; }

/* ---------- Hero (ziyaretçi kabuğu ve genel karşılama bloğu) ---------- */
.hero { padding: 26px 0 20px; }
.hero h1 { margin: 0 0 8px; }
.hero p { margin: 0; max-width: 56ch; color: var(--murekkep-2); font-size: 14px; }

/* ---------- Sayfa başlığı satırı (kanon §5a — h1 22px + sağda bağlam) ----------
 * Girişli sayfaların (ve v3'te "hero yok" kararı alan liste/araç sayfalarının)
 * ortak başlık deseni: h1 sabit 22px + sağda kısa bağlam metni. Uzun açıklama
 * gerekiyorsa `.aciklama` paragrafı h1'in ALTINA düşer (bağlamla karışmaz). */
.sayfa-baslik { padding: 22px 0 20px; }
.sayfa-baslik-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap;
}
.sayfa-baslik h1 { font-size: 22px; }
.sayfa-baslik .baglam { font-size: 13.5px; color: var(--murekkep-2); }
.sayfa-baslik p.aciklama { margin: 6px 0 0; font-size: 13.5px; color: var(--murekkep-2); max-width: 60ch; }
@media (max-width: 639px) {
  .sayfa-baslik-ust { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---------- Kimlik kartı (kanon §3 "etiket:değer tablosu yasak" — profil özeti)
 * profil.php'de büyük, panelim.php'nin yan sütununda `.kucuk` varyantıyla küçük
 * boyutta yeniden kullanılır (docs/tasarim/03-kayit-giris-profil.md §4). */
.kimlik-karti .km-monogram {
  width: 48px; height: 48px; border-radius: 14px;
  /* Metin `--birincil-KOYU`: `--birincil` bu zeminde Okyanus 3,74 ·
     Orman 3,73 · ElMustafa 4,07 veriyordu (A4 denetimi). Koyu: 5,44-9,77. */
  background: var(--birincil-acik); color: var(--birincil-koyu);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--yz-baslik); font-weight: 700; font-size: 17px;
  margin-bottom: 12px;
}
.kimlik-karti.kucuk .km-monogram { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; }
/* Fotoğraflı avatar: ölçü ve yuvarlaklık `.km-monogram`dan geliyor, burada
   yalnız resmin çerçeveye nasıl oturacağı tanımlı. `cover` kenarından kırpar
   ama oranı bozmaz — bir yüzü ezik göstermektense kenarını kırpmak iyidir. */
.kimlik-karti .km-foto { object-fit: cover; display: block; padding: 0; }
/* ---------- Oyunlaştırma çerçevesi (TRD v1.1 §3.4, oyun_lib.php::oyun_avatar_cerceveli)
 * Çerçeve avatarın DIŞINA taşar (inset -10%): yerleşimi itmez, fotoğrafın
 * üstüne tek çizgi düşmez (TRD Kural 5). Çerçeve takılınca yuva DAİREYE döner
 * — dairesel bir halka köşeli bir kutunun etrafında kaymış görünürdü.
 * Renkler temadan: beyaz etiketli portalda her kurumun paletine uyar. */
.oyc { position: relative; display: inline-flex; flex: none; vertical-align: middle;
  --oyc-renk: color-mix(in srgb, var(--murekkep) 38%, transparent);
  --oyc-dugum: var(--yuzey); }
.oyc > :first-child { border-radius: 50% !important; }
.oyc__desen { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none;
  color: var(--oyc-renk); pointer-events: none; overflow: visible; }
.oyc--inci     { --oyc-renk: var(--camgobegi); }
.oyc--zencerek { --oyc-renk: var(--birincil); }
/* Üst iki kademe İKİ TONLU: bazı temalarda --vurgu ile --dikkat aynı renge
   düşüyor ve Kıdemli ile Efsane ayırt edilemiyordu. Halka birincil renkte,
   yapraklar vurgu; Efsane'de yapraklar dönüşümlü vurgu/dikkat. */
.oyc--tig      { --oyc-renk: var(--birincil); --oyc-yaprak: var(--vurgu); }
.oyc--semse    { --oyc-renk: var(--birincil-koyu); --oyc-yaprak: var(--dikkat);
  --oyc-yaprak-2: var(--vurgu); --oyc-dugum: var(--vurgu); }
/* Kimlik kartında avatarın alt boşluğu sarmalayıcıya geçer: boşluk içeride
   kalsaydı sarmalayıcı uzar, çerçeve avatarın altına kayardı. */
.kimlik-karti .oyc { margin-bottom: 12px; }
.kimlik-karti .oyc .km-monogram { margin-bottom: 0; }
/* ---------- Rozet madalyonu (TRD v1.1 §3, rozet_lib.php::rozet_madalyon)
 * Yüklenmiş görsel > yerleşik çizgi simgesi > eski tek karakter. Kategori
 * rengi halkada ve simgede; zemin rengin açık tonu. Emoji yok. */
.rzm { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; --rzm: var(--birincil-koyu);
  color: var(--rzm); background: color-mix(in srgb, var(--rzm) 12%, var(--yuzey));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rzm) 55%, transparent);
  font-size: 15px; line-height: 1; overflow: hidden; }
.rzm svg { width: 58%; height: 58%; }
.rzm img { width: 100%; height: 100%; object-fit: cover; }
.rzm.buyuk { width: 44px; height: 44px; font-size: 19px; }
.rzm--baslangic { --rzm: var(--camgobegi); }
.rzm--orta      { --rzm: var(--birincil); }
.rzm--nadir     { --rzm: var(--vurgu); }
.rzm--lig       { --rzm: var(--dikkat); }
.rzm--ozel      { --rzm: var(--birincil-koyu); }
/* Kilitli ve henüz kazanılmamış rozet soluk basılır. */
.rzm.soluk { filter: grayscale(1); opacity: .45; }
/* Kimlik kartındaki vitrin (profil, panelim) — en çok üç madalyon. */
.km-vitrin { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.km-vitrin .rzm { width: 28px; height: 28px; font-size: 13px; }
/* ---------- /Oyunlaştırma çerçevesi ve madalyon — panel bu iki işaret arasını okur. */
/* ---------- Oyunlaştırma bildirimi (TRD v1.1 §5, ogr/inc.php::ogr_foot)
 * Sağ altta, alt sekme çubuğunun ve "yukarı" düğmesinin üstünde. Sayfayı
 * örtmez, odak çalmaz; yalnız kapatma düğmesi odaklanabilir. */
.oyb { position: fixed; z-index: 60; right: 16px; bottom: calc(var(--yukari-dip, 20px) + 56px);
  display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.oyb-kutu { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  padding: 13px 12px 13px 16px; border-radius: 12px; background: var(--yuzey); color: var(--murekkep);
  border: 1px solid var(--cizgi); border-left: 4px solid var(--birincil);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--murekkep) 60%, transparent); }
.oyb--lig { border-left-color: var(--dikkat); }
.oyb--rozet { border-left-color: var(--camgobegi); }
.oyb-metin b { display: block; font-size: 14px; }
.oyb-metin span { display: block; font-size: 13px; color: var(--murekkep-2); margin-top: 2px; line-height: 1.45; }
.oyb-metin a { display: inline-flex; min-height: 24px; align-items: center; margin-top: 4px; font-size: 13px; font-weight: 600; }
.oyb-kapat { border: 0; background: transparent; color: var(--murekkep-2); cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; padding: 0; }
.oyb-kapat:hover { background: var(--zemin); color: var(--murekkep); }
.oyb-kapat svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .oyb-kutu { animation: oyb-gir .25s ease-out both; }
  @keyframes oyb-gir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.kimlik-karti h3 { font-size: 16px; }
.kimlik-karti .km-kadi { font-size: 12.5px; color: var(--murekkep-2); margin-top: 2px; }
.kimlik-karti .km-kunye { font-size: 13.5px; color: var(--murekkep-2); margin-top: 10px; }
/* `--birincil-KOYU` (Okyanus 4,35 · Orman 4,33 idi) ve min-height 24:
   bağlantı 51×20 ölçülmüştü, eşik 24×24. */
.kimlik-karti .km-duzenle {
  display: inline-flex; align-items: center; min-height: 24px;
  margin-top: 12px; font-size: 13px; font-weight: 700;
  color: var(--birincil-koyu); text-decoration: none;
}

/* ---------- Kart (kanon §3) ---------- */
.card {
  position: relative;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
}
.card-baslik {
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--murekkep-2);
}
/* Dosya sekmesi — imza öğesi (kanon §0/§3/§4 anti-slop #9, v3.1). Renkli
 * kenar şeridi/rayı TAMAMEN YASAK; modül rengi artık modül kartının üst-sol
 * köşesinden yukarı taşan GERÇEK dosya sekmesi etiketiyle taşınır. Sayfa
 * `<div class="card" data-modul="istatistik"><span class="dosya-sekme">…`
 * gibi işaretler; `data-modul` kart üstte etikete yer bırakır (margin-top +
 * overflow:visible), etiketin rengini de aynı öznitelikten alır. YALNIZ
 * modül kartlarında kullanılır — KPI/form/liste/kimlik kartı sekme taşımaz. */
.card[data-modul] { overflow: visible; margin-top: 40px; }
.dosya-sekme {
  position: absolute; top: -21px; left: 14px;
  padding: 3px 10px; border-radius: 6px 6px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  /* Dolgu `--birincil-KOYU`: beyaz yazı `--birincil` üstünde Orman 4,33 ·
     Okyanus 4,35 (A4 denetimi). Koyu dolguda 6,32-11,63. */
  color: var(--yuzey); background: var(--birincil-koyu);
}
.card[data-modul="soru"] .dosya-sekme       { background: var(--birincil-koyu); }
.card[data-modul="deneme"] .dosya-sekme     { background: var(--sekme-deneme); }
.card[data-modul="istatistik"] .dosya-sekme { background: var(--sekme-istatistik); }
.card[data-modul="tercih"] .dosya-sekme     { background: color-mix(in srgb, var(--sekme-tercih) 72%, var(--murekkep)); }
.card[data-modul="pano"] .dosya-sekme       { background: var(--sekme-pano); }
/* SICAK SEKMEDE KOYU YAZI (6 Eylül 2026 kontrast denetimi). "deneme" sekmesi
 * `--vurgu`, "pano" sekmesi `--dikkat` taşır; ikisi de turuncu/kehribar ailesi
 * ve 11px yazı 4,5 eşiğine tabi. Beyaz yazı YEDİ TEMANIN HEPSİNDE kalıyordu
 * (vurgu 2,29-2,70 · dikkat 1,79-2,47); `--murekkep` ile ölçüm vurgu üstünde
 * 5,68-7,51, dikkat üstünde 7,28-8,61. Yazıyı büyütmek değil rengi değiştirmek
 * çözüm: sekmenin boyutu kartın köşesine göre ayarlı. */
.card[data-modul="deneme"] .dosya-sekme,
.card[data-modul="pano"] .dosya-sekme       { color: var(--murekkep); }

/* Tıklanabilir kart hover (kanon §3 — gölge bir kademe artar + kenarlık
 * `--birincil`'e döner; transform YOK, zıplayan kart yasak). */
a.card:hover, .card.tiklanabilir:hover {
  box-shadow: 0 2px 5px color-mix(in srgb, var(--murekkep) 9%, transparent),
              0 16px 34px -16px color-mix(in srgb, var(--murekkep) 34%, transparent);
  border-color: var(--birincil);
}
@media (prefers-reduced-motion: reduce) { a.card, .card.tiklanabilir { transition: none; } }
a.card, .card.tiklanabilir {
  display: block; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease-out, border-color .15s ease-out;
}

/* ---------- KPI şeridi (kanon anti-slop #12 — kart çorbası yasak) ----------
 * Aynı türden 2-4 KPI bloğu ayrı ayrı kart olarak dizilmez; TEK yüzeyde ince
 * dikey ayraçlarla bölmelenir. <640px'te ayraç yataya döner (bölmeler alt
 * alta). İç yapı panelim.php'nin mevcut `.kpi-deger`/`.kpi-alt` adlarını
 * paylaşır — sayfa yalnız `.kpi-grid`+`.kpi` sarmalını `.kpi-serit`+
 * `.kpi-serit-bolme` ile değiştirir, iç işaretleme aynı kalır. */
.kpi-serit {
  display: flex; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
  margin: 18px 0; overflow: hidden;
}
.kpi-serit-bolme { flex: 1; min-width: 0; padding: 18px 20px; border-left: 1px solid var(--cizgi); }
.kpi-serit-bolme:first-child { border-left: 0; }
.kpi-serit-bolme h2 { margin: 0; font-size: 14px; }
.kpi-serit-bolme .kpi-deger {
  font-family: var(--yz-baslik); font-size: 26px; font-weight: 700;
  color: var(--murekkep); line-height: 1; margin-top: 12px;
}
.kpi-serit-bolme .kpi-deger.soluk { color: var(--murekkep-2); }
.kpi-serit-bolme .kpi-alt { font-size: 12.5px; color: var(--murekkep-2); margin-top: 6px; }
@media (max-width: 639px) {
  .kpi-serit { flex-direction: column; }
  .kpi-serit-bolme { border-left: 0; border-top: 1px solid var(--cizgi); }
  .kpi-serit-bolme:first-child { border-top: 0; }
}

/* ---------- Girdi alanları (kanon §3) ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; color: var(--murekkep); }
/* `input:not([type])` ŞART. Seçici yalnız type YAZILMIŞ alanları tutuyordu;
   type'sız bir <input> tarayıcıda metin alanı gibi DAVRANIR ama
   `input[type=text]` ile EŞLEŞMEZ (öznitelik seçicisi özniteliğin var
   olmasını ister). Sonuç: 13 alan tarayıcı varsayılanıyla, 2px inset
   çerçeve ve 13px yazıyla çiziliyordu — belge doğrulama kutusu, iletişim
   formu ve başvuru formu dahil. Stil vardı, alanlar ona hiç uğramıyordu. */
input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], input[type=tel], input[type=url], input:not([type]),
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: var(--yuzey); color: var(--murekkep);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus,
input[type=url]:focus, input:not([type]):focus, select:focus, textarea:focus {
  border-color: var(--birincil);
}
/* Telefonda 16px: iOS Safari 16px'ten küçük yazılı alana dokunulunca sayfayı
   yakınlaştırıyor ve kullanıcı her formdan sonra elle uzaklaştırmak zorunda
   kalıyordu (giriş, kayıt, arama, belge doğrulama; 29 Eylül 2026 taraması).
   !important BİLEREK: ders arama (.kb-ara), yorum kutusu (.tpl-yaz) gibi
   bileşenler kendi 14-15px'ini daha özgül seçiciyle yazıyor; her birini
   ayrı ayrı ezmek yenisi eklendiğinde yine unutulurdu. Yalnız telefonda ve
   yalnız yazı boyunu bağlar. */
@media (max-width: 767px) {
  input[type=text], input[type=password], input[type=email], input[type=search],
  input[type=number], input[type=tel], input[type=url], input:not([type]),
  select, textarea { font-size: 16px !important; }
}
.row2 { display: flex; gap: 12px; }
.row2 > div { flex: 1; min-width: 0; }
/* 600px altı: yan yana ikili alanlar tek sütuna düşer (kanon §6, 03 §7). */
@media (max-width: 599px) { .row2 { flex-direction: column; gap: 0; } }
.hint { font-size: 12px; color: var(--murekkep-2); margin-top: 4px; }
.grup { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.grup-baslik {
  margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--murekkep-2);
}
.bilgi-satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cizgi); font-size: 14px;
}
.bilgi-satir span { color: var(--murekkep-2); }
.bilgi-satir b { font-weight: 600; color: var(--murekkep); }
.chk {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px;
  font-size: 13px; line-height: 1.5; color: var(--murekkep-2);
}
.chk input { margin-top: 3px; flex: none; }

/* ---------- Buton (kanon §3 — 10px köşe, 600 ağırlık, TAM OVAL YASAK) ---------- */
.btn {
  display: inline-block; width: 100%; margin-top: 18px; padding: 12px 16px;
  border: 0; border-radius: 10px; background: var(--birincil-koyu); color: var(--yuzey);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  text-decoration: none; text-align: center;
  transition: background-color .15s ease-out;
}
.btn:hover { background: color-mix(in srgb, var(--birincil-koyu) 86%, var(--murekkep)); }
.btn.sec {
  background: transparent; color: var(--murekkep); border: 1px solid var(--cizgi);
}
.btn.sec:hover { background: transparent; border-color: var(--birincil); color: var(--birincil-koyu); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--murekkep-2); }

/* ---------- Mesaj ---------- */
.msg { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin: 14px 0; }
.msg.err {
  background: color-mix(in srgb, var(--hata) 12%, var(--yuzey));
  color: var(--hata);
  border: 1px solid color-mix(in srgb, var(--hata) 35%, var(--yuzey));
}
.msg.ok {
  background: color-mix(in srgb, var(--basari) 12%, var(--yuzey));
  color: var(--basari);
  border: 1px solid color-mix(in srgb, var(--basari) 35%, var(--yuzey));
}

/* ---------- Hap / rozet (kanon §3 — 8px köşe, içinde metin taşır) ---------- */
.hap, .rozet {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 8px;
  padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent;
}

/* ---------- Tablo (kanon §4.7 — sonuç listeleri tablo ya da ince çizgili satır) ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--cizgi); vertical-align: top; }
th { color: var(--murekkep-2); font-weight: 600; font-size: 12px; border-top: 0; }

/* ---------- Profil listesi ---------- */
.profil { list-style: none; padding: 0; margin: 14px 0; }
.profil li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px;
}
.profil li b { color: var(--murekkep-2); font-weight: 600; }

/* ---------- Alt bilgi (kanon §5 — ince çizgi + tek satır) ---------- */
footer {
  border-top: 1px solid var(--cizgi); margin-top: 34px; padding: 22px 0;
  color: var(--murekkep-2); font-size: 13px; text-align: center;
}
footer a { color: var(--murekkep-2); }

/* Ekran okuyucuya açık, görsel olarak gizli içerik (K4 worker önerisi).
   `.gizli` aynı işin kısa adı; sayfalar iki adı da kullanıyor, ikisi de
   burada tanımlı olsun ki etiket yanlışlıkla ekranda görünmesin. */
.gorsel-gizli, .gizli {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* fieldset/legend: label ile aynı tipografik rol. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; padding: 0; }

/* ---------- Site logosu (ayar.marka_logo) ----------
   5 Ekim 2026'dan beri yazısız, dikey El Mustafa işareti
   (assets/elm-logo-isaret.png, geçiş 191). Eski yatay logo 34 px'te
   okunuyordu; dikey işaret o boyda 27 px enle kayboluyordu, 60 px'lik
   çubuğa sığan en büyük boy verildi. */
.zy-logo,.app-logo{height:44px;width:auto;display:block}
@media (max-width:600px){.zy-logo,.app-logo{height:38px}}

/* ---------- "Yukarı çık" düğmesi (zy_yukari_dugmesi) ----------
   Sayfalar uzun: ana sayfa 3.945 px, dersler 320 px'te 7.348 px. Dibe inen
   ziyaretçinin menüye dönmesi için elle kaydırması gerekiyordu.

   JS yokken `hidden` kalır ve HİÇ görünmez — betiksiz tarayıcıda çalışmayan
   bir daireyi içeriğin üstünde bırakmamak için (bkz. ziyaretci-nav.php).

   YERİ DEĞİŞKENDEN gelir: öğrenci kabuğunda 1024 px altında 64 px'lik sabit
   sekme çubuğu var, düğme onun üstüne çıkmalı. Ziyaretçi kabuğunda çubuk
   yok, varsayılan yeter. */
:root { --yukari-dip: 20px; }

.yukari {
  position: fixed; right: 20px; bottom: var(--yukari-dip); z-index: 28;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--yuzey); color: var(--murekkep-2);
  cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--murekkep) 7%, transparent),
              0 10px 24px -14px color-mix(in srgb, var(--murekkep) 26%, transparent);
  transition: color .15s ease-out, border-color .15s ease-out;
}
.yukari:hover { color: var(--birincil-koyu); border-color: var(--birincil); }
.yukari:focus-visible { outline: 2px solid var(--birincil); outline-offset: 2px; }
/* `hidden` özniteliği display:grid tarafından ezilir; açıkça geri alınır. */
.yukari[hidden] { display: none; }

/* Alt sekme çubuğunun ÜSTÜNE çıkar (çubuk 64px + güvenli alan). z-index 28,
   çubuğun 30'unun altında: çubuk her zaman önde kalsın. */
@media (max-width: 1023px) {
  .app-kabuk { --yukari-dip: calc(80px + env(safe-area-inset-bottom)); }
}

/* Tam genişlik bantlar için taşma kilidi (index.php `.kp-serit`).
   Bant, ortalanmış `.wrap` kabından `margin-inline: calc(50% - 50vw)` ile
   çıkıyor. `50vw` KAYDIRMA ÇUBUĞUNU DA SAYDIĞI için bant görünen alandan
   ~15px geniş kalıyor ve sayfa yana kayıyordu.

   `clip` — `hidden` DEĞİL. `hidden` bir kaydırma kabı yaratır ve içindeki
   `position: sticky` üst barı çalışmaz hâle getirir; `clip` kap yaratmaz,
   yapışkanlık bozulmaz.

   Kural TEK BAŞINA gövdede yetmiyor: gövdenin overflow değerini, `html`
   `visible` olduğu sürece tarayıcı görüntü alanına terfi ettirir ve gövde
   kendisi `visible` gibi davranmaya devam eder — ölçüldü, 8px yana kayma
   duruyordu. Bu yüzden aynı kilit `html` üzerine de yazılıyor. `:has()`
   desteği olmayan tarayıcıda kural söner, sayfa yalnızca eski hâline
   (yatay kayma) döner; ayrı kural olarak yazılı ki alttaki gövde kuralını
   geçersiz kılmasın. */
/* 7 EYLÜL 2026 ÖLÇÜMÜ (B3): kökteki `clip` bu işi YAPMIYOR. Ölçüldü
   (Chrome, 1280px pencere · 15px kaydırma çubuğu):
     clip  + clip  = scrollWidth 1273 / clientWidth 1265, scrollX 8  (KAPATMIYOR)
     hidden+ clip  = 1265 / 1265, scrollX 0, `.zy-bar` hâlâ sticky (KAPATIYOR)
   `clip` kökte görüntü alanına terfi ediyor ama yatay kaydırmayı
   kapatmıyordu; `hidden` kapatıyor. GÖVDEDE `clip` KALIYOR — orada `hidden`
   bir kaydırma kabı yaratıp yapışkan barı bozma riski taşır, `clip` taşımaz.
   Ölçümde bar iki durumda da yapıştı, ama riski almanın bir karşılığı yok. */
html:has(> body.ziyaretci-govde) { overflow-x: hidden; }
body.ziyaretci-govde { overflow-x: clip; }

/* ---------- Topluluk: beğeni, favori, yorum (topluluk_ui.php, geçiş 161)
 * Ders, makale ve galeri eseri aynı bileşeni basar. Düğmeler düz form —
 * JS kapalıyken de çalışır. Dokunma hedefleri en az 32px. */
.tpl-form { display: inline; margin: 0; }
.tpl-cubuk { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tpl-dugme { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey); color: var(--murekkep);
  font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.tpl-dugme svg { width: 17px; height: 17px; }
.tpl-dugme b { font-weight: 600; color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.tpl-dugme:hover { border-color: var(--birincil); }
.tpl-dugme.on { border-color: var(--birincil); background: var(--birincil-acik); color: var(--birincil-koyu); }
.tpl-dugme.on svg { fill: currentColor; }
.tpl-dugme.sabit { cursor: default; }
.tpl-bolum { margin: 32px 0 0; }
.tpl-bolum h2 { font-size: 1.15rem; display: flex; align-items: baseline; gap: 8px; }
.tpl-bolum h2 small { font-size: 13px; color: var(--murekkep-2); font-weight: 500; }
.tpl-ileti { margin: 12px 0 0; padding: 10px 13px; border-radius: 10px; font-size: 13.5px; }
.tpl-ileti.ok { background: color-mix(in srgb, var(--basari) 10%, var(--yuzey)); color: var(--basari); }
.tpl-ileti.err { background: color-mix(in srgb, var(--hata) 10%, var(--yuzey)); color: var(--hata); }
.tpl-yaz { margin: 14px 0 0; }
.tpl-yaz textarea { width: 100%; min-height: 84px; padding: 11px 13px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: var(--yuzey); color: var(--murekkep); font: inherit; font-size: 14px; resize: vertical; }
.tpl-yaz textarea:focus-visible { outline: 2px solid var(--birincil); outline-offset: 1px; }
.tpl-yaz-alt { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tpl-yaz-alt span { font-size: 12.5px; color: var(--murekkep-2); }
.tpl-yaz-alt .btn { width: auto; margin: 0; }
.tpl-giris, .tpl-bos { margin: 12px 0 0; color: var(--murekkep-2); font-size: 14px; }
.tpl-zincir { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--cizgi); }
.tpl-yorum { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.tpl-yorum.yanit { margin: 12px 0 0 46px; }
.tpl-yorum.cozum .tpl-govde { border-left: 3px solid var(--basari); padding-left: 10px; }
.tpl-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--birincil-acik); color: var(--birincil-koyu); font-weight: 700; font-size: 13px; object-fit: cover; }
.tpl-kim { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13.5px; }
.tpl-kim time { font-size: 12px; color: var(--murekkep-2); }
.tpl-cozum-etiket { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--basari) 14%, transparent); color: var(--basari); }
.tpl-metin { margin: 4px 0 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.tpl-eylemler { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.tpl-mini { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px; border: 0;
  border-radius: 8px; background: transparent; color: var(--murekkep-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.tpl-mini svg { width: 15px; height: 15px; }
.tpl-mini:hover { background: var(--zemin); color: var(--murekkep); }
.tpl-mini.on { color: var(--birincil-koyu); }
.tpl-mini.on svg { fill: currentColor; }
.tpl-mini.sil:hover { color: var(--hata); }
.tpl-mini.sabit { cursor: default; background: transparent; }
.tpl-yanitla { margin: 8px 0 0 46px; }
.tpl-yanitla summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer;
  font-size: 13px; color: var(--birincil-koyu); }
.tpl-yanitla summary svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .tpl-yorum.yanit, .tpl-yanitla { margin-left: 20px; } }

/* Gizli simge gizli kalsın (10 Ekim 2026): yukarıdaki `img, svg { display: block }` tarayıcının [hidden]
   kuralını eziyordu; parola göster/gizle düğmesinde iki göz simgesi birden görünüyordu. Yalnız simge ve
   görsel: ana sayfa slaytları `hidden` iken bilerek yer tutar (anasayfa.css), genel kural onları bozardı. */
svg[hidden], img[hidden] { display: none; }