/* Kobalt paleti. Renkler jeton olarak tanımlanır ve iki temada birden
   karşılığı vardır; hiçbir renk yalnızca tek bir blokta tanımlanmaz. */
:root {
  --ground:#EEF2F7;
  --surface:#FFFFFF;
  --surface-2:#E3EAF3;
  --line:#CBD8E6;
  --ink:#12212F;
  --ink-2:#3E5468;
  /* #6B7F92 idi: beyaz zeminde 4,14 — eşiğin altında. İkincil metin
     bütün ekranlarda bu jetonu kullandığı için tek satır bütün sayfaları
     etkiliyordu. Yeni değer en zor zeminde (--surface-2) 4,65. */
  --ink-3:#57697E;
  --accent:#1B5A9E;
  --accent-2:#2D7DD2;
  --accent-soft:#E1ECF8;
  --warn:#B45309;
  --warn-soft:#FEF3E2;
  --stop:#B02A37;
  --stop-soft:#FBE9EB;
  --ok:#17795E;
  --ok-soft:#E3F3EE;
  /* Anımsatıcı rengi (sözlük girdisi). */
  --mor:#6D3FC4;
  --mor-soft:#F0EAFB;
  /* Soru cevap renkleri: açık temada yumuşak zemin + renkli yazı. */
  --cevap-dogru-zemin:#E3F3EE;
  --cevap-dogru-yazi:#17795E;
  --cevap-yanlis-zemin:#FBE9EB;
  --cevap-yanlis-yazi:#B02A37;

  /* Dolgu üstü metin. accent/stop/ok jetonları karanlık temada AÇILIYOR
     (koyu lacivert → açık mavi, bordo → pembe); üstlerindeki sabit beyaz
     metin orada çöküyordu — 2,75 / 2,47 / 2,10. Rengin kendisi tema ile
     dönerken üstündeki metnin dönmemesi klasik hata; jeton bunun için var. */
  --on-fill:#FFFFFF;
  /* Grafik serileri; renk körlüğü, kroma ve karşıtlık denetiminden geçti. */
  --grafik-1:#1B5A9E;
  --grafik-2:#107C4B;
  --grafik-3:#6D3FC4;

  --radius:10px;
  --sans:"Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:ui-monospace, Consolas, "Cascadia Mono", monospace;
  --display:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Yan panel jetonları. Panel artık temayla dönüyor: açık temada açık
     "gündüz" panel, koyu temada "Gece Camı — Gradyan Kenar" (4D).
     Eski karar (panel iki temada da koyu) tanıtım sayfasıyla yüzey
     birliği içindi; tanıtım kendi jeton kopyalarını taşıdığından
     buradakiler yalnız paneli etkiler.
     The sidebar now follows the theme: a light "daylight" panel in the
     light theme, the 4D "Night Glass — Gradient Edge" in the dark one. */
  --deep:#FFFFFF;
  --deep-2:#F1F5FA;
  --deep-3:#E7EEF6;
  --on-deep:#12212F;
  --on-deep-dim:#5A6E83;
  --deep-line:#DFE7F0;
  --spark:#1B5A9E;
  --on-spark:#FFFFFF;
  --kil:rgba(18,33,47,.06);
  /* Gradyan kenar: aktif satırın çerçevesi ve doluluk çubukları bu iki
     ucu paylaşır — panelin tek süsü bu geçiştir. */
  --pan-grad-a:#2D7DD2;
  --pan-grad-b:#6E5BE8;
  --pan-etkin-bg:#F2F7FD;
  --pan-etkin-ink:#1B5A9E;
  --pan-logo:#1B5A9E;
  /* Kelime markası: açık temada iki uç aynı — düz, orijinal mürekkep. */
  --marka-grad-a:#12212F;
  --marka-grad-b:#12212F;
  /* El yazısı satırı: açık temada düz vurgu rengi. */
  --marka-yazi-a:#1B5A9E;
  --marka-yazi-b:#1B5A9E;
  --pan-edge:linear-gradient(180deg,#DFE7F0,#DFE7F0);
  --pan-hover:rgba(45,125,210,.08);
  --spark-soft:rgba(27,90,158,.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0D1721;
    --surface:#132131;
    --surface-2:#1B2C3F;
    --line:#27405A;
    --ink:#E8EFF6;
    --ink-2:#A9BDD0;
    /* #7C93A8 idi: --surface-2 üzerinde 4,46 ile kıl payı eşiğin altında.
       En koyu yüzey ölçüt alındı; oradaki karşılık 4,80. */
    --ink-3:#8199AE;
    --accent:#5AA0E8;
    --accent-2:#7DB8F2;
    --accent-soft:#17324D;
    --warn:#E0A85C;
    --warn-soft:#33270F;
    --stop:#E88A93;
    --stop-soft:#3A1A1E;
    --ok:#5CC5A5;
    --ok-soft:#123329;
    --mor:#B69CF5;
    --mor-soft:#271F3F;
    --cevap-dogru-zemin:rgba(92,197,165,.24);
    --cevap-dogru-yazi:#D6F5E8;
    --cevap-yanlis-zemin:rgba(232,138,147,.24);
    --cevap-yanlis-yazi:#FFE0E5;
    --on-fill:#0D1721;
  --grafik-1:#3E8AD8;
  --grafik-2:#33A882;
  --grafik-3:#9878E8;
    --grafik-1:#3E8AD8;
    --grafik-2:#33A882;
    --grafik-3:#9878E8;
    /* Gece Camı: neredeyse siyah lacivert cam; vurgu moru maviye akar. */
    --deep:#0A0F1E;
    --deep-2:#131B30;
    --deep-3:#1B2542;
    --on-deep:#E9EDF8;
    --on-deep-dim:#8B96B8;
    --deep-line:#232D4A;
    --spark:#8BA3F7;
    --on-spark:#0A0F1E;
    --kil:rgba(255,255,255,.05);
    --pan-grad-a:#8B7CF8;
    --pan-grad-b:#4D8EE8;
    --pan-etkin-bg:#141C33;
    --pan-etkin-ink:#FFFFFF;
    --pan-logo:#7FD0E8;
    /* Kelime markası morlardan amblemin camgöbeğine akar. */
    --marka-grad-a:#8B7CF8;
    --marka-grad-b:#7FD0E8;
    /* El yazısı satırı camgöbeğinden beyaza (galeri no. 43). */
    --marka-yazi-a:#7FD0E8;
    --marka-yazi-b:#EEF2F7;
    --pan-edge:linear-gradient(180deg,rgba(139,124,248,.55),rgba(77,142,232,.25));
    --pan-hover:rgba(139,124,248,.09);
    --spark-soft:rgba(139,163,247,.22);
  }
}

:root[data-theme="dark"] {
  --ground:#0D1721;
  --surface:#132131;
  --surface-2:#1B2C3F;
  --line:#27405A;
  --ink:#E8EFF6;
  --ink-2:#A9BDD0;
  --ink-3:#8199AE;
  --accent:#5AA0E8;
  --accent-2:#7DB8F2;
  --accent-soft:#17324D;
  --warn:#E0A85C;
  --warn-soft:#33270F;
  --stop:#E88A93;
  --stop-soft:#3A1A1E;
  --ok:#5CC5A5;
  --ok-soft:#123329;
  --mor:#B69CF5;
  --mor-soft:#271F3F;
  /* Soru cevap renkleri: koyu temada %24 saydam renk kartın üstüne biner,
     böylece her koyu stile (Gece Camı, Grafit, Sepya) uyar. Yazı 8,5+. */
  --cevap-dogru-zemin:rgba(92,197,165,.24);
  --cevap-dogru-yazi:#D6F5E8;
  --cevap-yanlis-zemin:rgba(232,138,147,.24);
  --cevap-yanlis-yazi:#FFE0E5;
  --on-fill:#0D1721;
  --deep:#0A0F1E;
  --deep-2:#131B30;
  --deep-3:#1B2542;
  --on-deep:#E9EDF8;
  --on-deep-dim:#8B96B8;
  --deep-line:#232D4A;
  --spark:#8BA3F7;
  --on-spark:#0A0F1E;
  --kil:rgba(255,255,255,.05);
  --pan-grad-a:#8B7CF8;
  --pan-grad-b:#4D8EE8;
  --pan-etkin-bg:#141C33;
  --pan-etkin-ink:#FFFFFF;
  --pan-logo:#7FD0E8;
  --marka-grad-a:#8B7CF8;
  --marka-grad-b:#7FD0E8;
  --marka-yazi-a:#7FD0E8;
  --marka-yazi-b:#EEF2F7;
  --pan-edge:linear-gradient(180deg,rgba(139,124,248,.55),rgba(77,142,232,.25));
  --pan-hover:rgba(139,124,248,.09);
  --spark-soft:rgba(139,163,247,.22);
}

/* Sol panel tercihi: açık temada kullanıcı paneli koyu tutabilir
   (Görünüm ayarları). Değerler koyu temadakilerin aynısı — koyu temada
   damga etkisiz kalır, çakışma yaratmaz. Yalnız panel jetonları:
   uygulamanın geri kalanı temasında kalıyor. */
:root[data-panel="dark"] {
  --deep:#0A0F1E;
  --deep-2:#131B30;
  --deep-3:#1B2542;
  --on-deep:#E9EDF8;
  --on-deep-dim:#8B96B8;
  --deep-line:#232D4A;
  --spark:#8BA3F7;
  --on-spark:#0A0F1E;
  --kil:rgba(255,255,255,.05);
  --pan-grad-a:#8B7CF8;
  --pan-grad-b:#4D8EE8;
  --pan-etkin-bg:#141C33;
  --pan-etkin-ink:#FFFFFF;
  --pan-logo:#7FD0E8;
  --marka-grad-a:#8B7CF8;
  --marka-grad-b:#7FD0E8;
  --marka-yazi-a:#7FD0E8;
  --marka-yazi-b:#EEF2F7;
  --pan-edge:linear-gradient(180deg,rgba(139,124,248,.55),rgba(77,142,232,.25));
  --pan-hover:rgba(139,124,248,.09);
  --spark-soft:rgba(139,163,247,.22);
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- Kabuk ---------- */

.shell { min-height:100vh; display:flex; flex-direction:column; }

.topbar {
  display:flex; align-items:center; gap:16px;
  padding:12px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
  flex-wrap:wrap;
}

.brand {
  font-weight:700; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); display:flex; align-items:center; gap:9px;
}
.brand:hover { text-decoration:none; }
.brand .mark {
  width:26px; height:26px; border-radius:7px;
  background:var(--accent); color:var(--on-fill);
  display:grid; place-items:center;
  font-size:14px; font-weight:800;
}

.spacer { flex:1; }

.content { flex:1; width:100%; max-width:1080px; margin:0 auto; padding:26px 20px 60px; }

/* ---------- Kota göstergesi ---------- */

.quota {
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px 13px;
}
.quota .bar {
  width:64px; height:6px; border-radius:99px;
  background:var(--line); overflow:hidden;
}
.quota .fill { height:100%; background:var(--accent); border-radius:99px; }
.quota.low .fill { background:var(--warn); }
.quota.out .fill { background:var(--stop); }

/* ---------- Kartlar ---------- */

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
}

.term-list { display:grid; gap:10px; margin-top:18px; }

.term-row {
  display:flex; align-items:baseline; gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 17px;
  transition:border-color .12s, transform .12s;
}
.term-row:hover { border-color:var(--accent); text-decoration:none; transform:translateX(2px); }
.term-row .tr { font-weight:600; color:var(--ink); }
.term-row .en { color:var(--ink-3); font-size:14px; }

/* Videolu terim: satırın sağ ucunda film şeridi simgesi. Satırın kendi
   düzeni (ad, altında eş anlamlılar) bozulmasın diye mutlak konumlu. */
.term-row.videolu { position:relative; padding-right:72px; }
.term-row .video-isaret {
  position:absolute; right:17px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:3px; color:var(--ink-3);
}
/* Birden fazla video: "×3". Rakamlar eş genişlikli, simgeyle aynı renk. */
.term-row .video-sayi {
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  line-height:1;
}
.video-bilgi {
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:8px 0 0; font-size:14px; color:var(--ink-3);
}
.video-bilgi a { font-weight:600; }

/* ---------- Form ögeleri ---------- */

.search {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font-size:16px; font-family:inherit;
  padding:12px 15px;
}
.search:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--on-fill);
  border:1px solid transparent; border-radius:8px;
  padding:9px 16px;
  font-size:15px; font-family:inherit; font-weight:600;
  cursor:pointer;
}
.btn:hover { background:var(--accent-2); text-decoration:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--ink-2); border-color:var(--line); }
.btn.ghost:hover { background:var(--surface-2); color:var(--ink); }

.field { display:grid; gap:6px; margin-bottom:14px; }
.field label { font-size:13.5px; color:var(--ink-2); font-weight:600; }
.field input {
  background:var(--ground); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:15px; font-family:inherit; padding:9px 12px;
}

/* Kuralı tutmayan alan ve altındaki gerekçe. Gerekçe alanın DİBİNDE:
   sayfanın tepesindeki kutu uzun formlarda ekran dışında kalıyor ve
   kullanıcı düğmeye bastığında hiçbir şey olmamış gibi görünüyordu. */
.field input.gecersiz { border-color:var(--stop); background:var(--stop-soft); }
.field .alan-hatasi { font-size:12.5px; color:var(--stop); }

/* ---------- Bildirimler ---------- */

.note {
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:0 8px 8px 0;
  padding:13px 16px;
  margin:16px 0;
  font-size:15px;
}
.note.warn { border-left-color:var(--warn); background:var(--warn-soft); }
.note.stop { border-left-color:var(--stop); background:var(--stop-soft); }
.note.ok   { border-left-color:var(--ok);   background:var(--ok-soft); }
.note b { display:block; margin-bottom:4px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }

.muted { color:var(--ink-3); }
.mono { font-family:var(--mono); font-size:13px; }

/* ---------- Terim sayfası ---------- */

.term-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.term-head h1 { margin:0; font-size:30px; letter-spacing:-.02em; }
.term-head .en { color:var(--ink-3); font-size:17px; }

.tag {
  display:inline-block;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:99px;
  padding:2px 10px; font-size:12.5px; margin-right:6px;
}

.definition { margin-top:18px; }
.definition .kind {
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:700; margin-bottom:5px;
}

/* ---------- Duyarlılık ---------- */

@media (max-width:640px) {
  .content { padding:18px 14px 50px; }
  .term-row { flex-direction:column; gap:3px; }
  .term-head h1 { font-size:24px; }
}

.loading { color:var(--ink-3); padding:30px 0; }

/* ---------- Yönetim paneli ----------
   Ayrı bir palet değil: aynı jetonları kullanan ek bileşenler. */

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:20px 0; }
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; color:var(--ink);
}
.stat:hover { border-color:var(--accent); text-decoration:none; }
.stat.vurgulu { border-color:var(--warn); background:var(--warn-soft); }
.stat .n { font-size:28px; font-weight:700; letter-spacing:-.02em; }
.stat .l { font-size:13.5px; color:var(--ink-3); }

/* ---------- Kart ipucu balonu ----------
   Sayının adı neyi saydığını her zaman söylemiyor; balon üzerine
   gelince (ve klavyeyle odaklanınca) anlatıyor. Renkler ters yüz:
   balon her iki temada da sayfanın karşıtı, bu yüzden ek jeton yok.
   Kartın soluna hizalı — ortalanmış balon en soldaki kartta ekrandan
   taşıyordu. */
.stat[data-ipucu] { position:relative; cursor:help; }
.stat[data-ipucu]::after {
  content:attr(data-ipucu);
  position:absolute; left:0; bottom:calc(100% + 8px);
  width:max-content; max-width:min(280px, 78vw);
  background:var(--ink); color:var(--surface);
  font-size:12.5px; line-height:1.5; font-weight:400;
  padding:9px 12px; border-radius:8px;
  opacity:0; visibility:hidden; transition:opacity .12s;
  pointer-events:none; z-index:30; white-space:normal;
}
.stat[data-ipucu]::before {
  content:""; position:absolute; left:22px; bottom:calc(100% + 3px);
  border:5px solid transparent; border-top-color:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .12s;
  pointer-events:none; z-index:30;
}
/* .ipucu-acik: dokunuşla açılan durum — dokunmatikte hover olmadığı
   için sayfa bu sınıfı tıklamayla takıp çıkarıyor. */
.stat[data-ipucu]:hover::after, .stat[data-ipucu]:focus-visible::after,
.stat[data-ipucu]:hover::before, .stat[data-ipucu]:focus-visible::before,
.stat[data-ipucu].ipucu-acik::after, .stat[data-ipucu].ipucu-acik::before {
  opacity:1; visibility:visible;
}
/* Gizli balon ÇİZİLMEZ: visibility:hidden yer kaplamayı sürdürüyor ve
   sağ sütundaki kartın balonu dar ekranda sayfayı yatay kaydırıyordu
   (seviye profilinde 514 px'lik ekranda 82 px taşma ölçüldü). */
.stat[data-ipucu]:not(:hover):not(:focus-visible):not(.ipucu-acik)::after,
.stat[data-ipucu]:not(:hover):not(:focus-visible):not(.ipucu-acik)::before {
  display:none;
}
/* Dar ekranda kartlar iki sütun: sağ sütunun balonu sağa yaslanır,
   açıkken de ekran dışına taşmasın. */
@media (max-width:700px) {
  .stat[data-ipucu]:nth-child(even)::after { left:auto; right:0; }
  .stat[data-ipucu]:nth-child(even)::before { left:auto; right:22px; }
}
.stat[data-ipucu]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

table.grid { width:100%; border-collapse:collapse; margin-top:16px; font-size:15px; }
table.grid th, table.grid td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
table.grid th { font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; }
table.grid tbody tr:hover { background:var(--surface-2); }

.durum {
  display:inline-block; border-radius:99px; padding:2px 10px;
  font-size:12.5px; font-weight:600; border:1px solid transparent;
}
.durum.taslak     { background:var(--surface-2); color:var(--ink-2); border-color:var(--line); }
.durum.incelemede { background:var(--warn-soft);  color:var(--warn); border-color:var(--warn); }
.durum.onayli     { background:var(--ok-soft);    color:var(--ok);   border-color:var(--ok); }
.durum.reddedildi { background:var(--stop-soft);  color:var(--stop); border-color:var(--stop); }

.uyari-rozet {
  display:inline-block; background:var(--warn-soft); color:var(--warn);
  border:1px solid var(--warn); border-radius:99px;
  padding:1px 8px; font-size:12px; font-weight:700;
}

.field textarea {
  background:var(--ground); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:15px; font-family:inherit; padding:9px 12px;
  min-height:96px; resize:vertical;
}
.field select {
  background:var(--ground); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:15px; font-family:inherit; padding:9px 12px;
}

.satir { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.satir > .field { flex:1; min-width:220px; }

/* ---------- Sol gezinme paneli ----------
   Üst çubuk dört bağlantıda işe yarıyordu; ürünün tamamı görünür olunca
   yatayda yer kalmıyor. Sol panel hem büyümeye yer açıyor hem de
   kullanıcıya ürünün haritasını bir bakışta veriyor.

   İki tasarım kararı burada yazılı:
   1) "Gradyan Kenar" (4D · Gece Camı): aktif satır DOLGUYLA değil,
      mor→mavi gradyan bir ÇERÇEVEYLE işaretlenir; doluluk çubukları ve
      panelin sağ kenarındaki kılcal çizgi aynı geçişi taşır. Panelin
      tek süsü bu geçiştir — başka hiçbir öge dolgu almaz.
      (1D "Gradyan Vurgu Bloğu" bunun öncülüydü; dolgu çerçeveye döndü.)
   2) Ray ayrı bir tasarım değil, bunun daralmış hâli.
   3) Panel temayla döner: açık temada beyaz "gündüz" paneli, koyu
      temada Gece Camı. Jetonlar :root'ta, burada renk adı geçmez. */

.uygulama { display:flex; min-height:100vh; }

.yan-panel {
  width:248px; flex:0 0 248px;
  background:var(--deep); color:var(--on-deep);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  font-size:13px;
  transition:width .18s ease, flex-basis .18s ease;
}

/* Gradyan kenar: panelin gövdeden ayrıldığı çizgi. Açık temada sade
   bir kılcal, koyu temada yukarıdan aşağı sönen mor→mavi geçiş. */
.yan-panel::after {
  content:""; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:var(--pan-edge); pointer-events:none;
}

/* Logo: amblem --accent'i, kelime markası currentColor'ı kullanır.
   İkisi de panelin kendi jetonuna burada bağlanıyor. Marka artık düğme:
   tıklaması paneli katlıyor. */
.yan-panel .marka {
  display:block; width:100%; padding:15px 15px 11px; text-align:left;
  background:none; border:0; font-family:inherit; cursor:pointer;
  --accent:var(--pan-logo); color:var(--on-deep);
}
/* .yan-panel svg tip seçicisiyle birlikte (0,1,1) ağırlığında; gizleme
   kuralları da sınıfla nitelenmezse ezilir. */
.yan-panel .marka svg { display:block; }

/* ---------- Kişi: logonun hemen altında ---------- */
.kisi {
  display:flex; align-items:center; gap:10px;
  padding:0 15px 12px; margin-bottom:11px;
  border-bottom:1px solid var(--kil);
  cursor:pointer; /* bölge paneli katlıyor; avatar tıklaması taşmıyor */
}
.kisi .av-sar { position:relative; flex:0 0 36px; }
/* Baş harfler gradyanın üstünde: fotoğraf yüklenince satır içi
   background-image gradyanı ezer, jeton düzeni bozulmaz. */
.kisi .avatar {
  width:36px; height:36px; border-radius:99px; padding:0;
  border:1px solid var(--deep-line); background-color:var(--deep-2);
  background-image:linear-gradient(135deg,var(--pan-grad-a),var(--pan-grad-b));
  color:#FFFFFF;
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  display:grid; place-items:center; cursor:pointer;
  background-size:cover; background-position:center;
}
.kisi .avatar:hover { border-color:var(--spark); }
.kisi .avatar.dolu .bas-harf { display:none; }
.kisi .av-rozet {
  position:absolute; right:-2px; bottom:-2px; width:15px; height:15px;
  border-radius:99px; background:var(--spark); color:var(--deep);
  display:grid; place-items:center; font-size:10px; line-height:1;
  border:1.5px solid var(--deep-line); pointer-events:none;
}
.kisi .bilgi { min-width:0; line-height:1.25; }
.kisi .isim { display:block; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kisi .plan { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--on-deep-dim); margin-top:2px; }

/* ---------- Bugün: günün işi listeden çıkarıldı ----------
   Bekleyen kart yoksa blok hiç çizilmiyor — boşken yer kaplamıyor. */
.bugun {
  display:block; margin:0 13px 12px; padding:10px 12px;
  background:var(--spark); color:var(--on-spark); border-radius:10px;
}
.bugun:hover { filter:brightness(1.06); text-decoration:none; }
.bugun .etiket { font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.bugun .satir { display:flex; align-items:baseline; gap:7px; margin-top:2px; }
.bugun .sayi { font-family:var(--display); font-size:25px; line-height:1; letter-spacing:-.03em; }
.bugun .yazi { font-size:12px; font-weight:700; }

/* ---------- Arama: panelde, sayfada değil ---------- */
.panel-ara { padding:0 13px 11px; position:relative; }
.panel-ara input {
  width:100%; background:var(--deep-2); border:1px solid var(--deep-line);
  color:var(--on-deep); border-radius:9px; padding:7px 10px 7px 29px;
  font-family:var(--sans); font-size:12.5px;
}
.panel-ara input::placeholder { color:var(--on-deep-dim); }
.panel-ara input:focus { outline:none; border-color:var(--spark); box-shadow:0 0 0 3px var(--spark-soft); }
.panel-ara .simge { position:absolute; left:22px; top:8px; color:var(--on-deep-dim); font-size:13px; pointer-events:none; }
.panel-ara .kisayol {
  position:absolute; right:22px; top:8px; font-family:var(--mono); font-size:9.5px;
  color:var(--on-deep-dim); border:1px solid var(--deep-line); border-radius:4px;
  padding:0 4px; pointer-events:none;
}
.ara-dugmesi { display:none; }

/* ---------- Liste: kılcal çizgili, dolgusuz ---------- */
/* Sütun düzeni boşluk dolgusu için: gruplardan artan yer .panel-bosluk'a
   akıyor ve orası da paneli katlayan bir tıklama yüzeyi. */
.yan-panel .liste { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; }
.yan-panel .liste .grup { flex:0 0 auto; }
.panel-bosluk { flex:1 1 auto; min-height:20px; cursor:pointer; }
.yan-panel .liste::-webkit-scrollbar { width:7px; }
.yan-panel .liste::-webkit-scrollbar-thumb { background:var(--deep-line); border-radius:99px; }

.yan-panel .grup > summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:10px 15px 5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-deep-dim);
  user-select:none; border-bottom:1px solid var(--kil);
}
.yan-panel .grup > summary::-webkit-details-marker { display:none; }
.yan-panel .grup > summary:hover { color:var(--on-deep); }
.yan-panel .ok { display:inline-block; width:7px; font-size:7px; opacity:.7; transition:transform .16s ease; }
.yan-panel .grup[open] .ok { transform:rotate(90deg); }
.yan-panel .grup .rozet {
  margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.04em;
  opacity:.85; font-variant-numeric:tabular-nums;
}

/* Satırlar hap biçiminde: kılcal ayraç yok, boşluk ayırıyor. Kenarlık
   her satırda saydam olarak duruyor ki etkin duruma geçişte satır
   zıplamasın — gradyan yalnız etkin olanda görünür oluyor. */
.yan-panel a.oge, .yan-panel span.oge {
  display:flex; align-items:center; gap:10px;
  margin:1px 8px; padding:6px 8px;
  border:1px solid transparent; border-radius:8px;
  color:var(--on-deep); font-size:13px; line-height:1.35;
}
.yan-panel .simge { width:15px; flex:0 0 15px; text-align:center; font-size:12px; color:var(--on-deep-dim); }
.yan-panel .ad { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Hover renkle konuşur: hafif tonlu zemin, metin ve simge vurguda. */
.yan-panel a.oge:hover { text-decoration:none; background:var(--pan-hover); }
.yan-panel a.oge:hover .ad, .yan-panel a.oge:hover .simge { color:var(--spark); }

/* Gradyan Kenar: etkin satır dolguyla değil çerçeveyle işaretli.
   İç dolgu padding-box'a, geçiş border-box'a boyanıyor; tek kural,
   sahte öge yok. */
.yan-panel a.oge.etkin {
  font-weight:700;
  background:linear-gradient(var(--pan-etkin-bg),var(--pan-etkin-bg)) padding-box,
             linear-gradient(120deg,var(--pan-grad-a),var(--pan-grad-b)) border-box;
  border-color:transparent;
}
.yan-panel a.oge.etkin .ad, .yan-panel a.oge.etkin .simge { color:var(--pan-etkin-ink); }
.yan-panel a.oge.etkin .sayac-bilgi, .yan-panel a.oge.etkin .sayac-sinir { color:var(--pan-etkin-ink); opacity:.8; }

/* Yazılmamış bölümler gizlenmiyor, kapalı gösteriliyor: ürünün haritasını
   saklamak onu olduğundan küçük gösterir. Üç işaret aynı anda — içi boş
   simge, düşük kontrast, kesikli etiket — ve imleç değişmiyor. Tek başına
   soluk metin "bozuk" görünür; üçü birlikte "henüz yok" der. */
.yan-panel span.oge.kapali { color:var(--on-deep-dim); cursor:default; }
.yan-panel span.oge.kapali .simge { opacity:.5; }
.yan-panel .yakinda {
  margin-left:auto; font-family:var(--mono); font-size:8px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--on-deep-dim);
  border:1px dashed var(--deep-line); border-radius:4px; padding:0 4px;
}

/* ---------- Sayaçlar: üç tür, üç görünüm ---------- */
/* BİLGİ — ürünün büyüklüğü; sessiz durur, eylem beklemez. */
.sayac-bilgi {
  margin-left:auto; font-family:var(--mono); font-size:10px;
  color:var(--on-deep-dim); font-variant-numeric:tabular-nums;
}
/* SINIR — kalan hak; sayı kadar ORAN da okunmalı, çubuk onun için var. */
.sayac-sinir {
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:var(--on-deep-dim);
  font-variant-numeric:tabular-nums;
}
.sayac-sinir .cubuk { width:26px; height:3px; background:var(--deep-line); border-radius:99px; overflow:hidden; }
.sayac-sinir .dolu { display:block; height:100%; background:linear-gradient(90deg,var(--pan-grad-a),var(--pan-grad-b)); }
.sayac-sinir.az .dolu { background:var(--warn); }
.sayac-sinir.bitti .dolu { background:var(--stop); }
/* EYLEM sayacı listede yok: Bugün bloğuna taşındı. Panelde tek vurgulu
   öge o olmalı; ikinci bir vurgu ilkini söndürür. */

/* ---------- Panel altı ---------- */
.yan-panel .alt { border-top:1px solid var(--kil); padding:11px 15px 13px; }

.kota-kutu { margin-bottom:10px; }
.kota-kutu .satir {
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9.5px; color:var(--on-deep-dim);
  margin-bottom:4px; font-variant-numeric:tabular-nums;
}
.kota-kutu .cizgi { height:3px; border-radius:99px; background:var(--deep-line); overflow:hidden; }
.kota-kutu .dolu { height:100%; background:linear-gradient(90deg,var(--pan-grad-a),var(--pan-grad-b)); border-radius:99px; }
.kota-kutu.az .dolu { background:var(--warn); }
.kota-kutu.bitti .dolu { background:var(--stop); }

.yan-panel .alt-baglanti {
  display:flex; align-items:center; gap:9px; width:100%;
  color:var(--on-deep-dim); font-size:12px; padding:3px 0;
  background:none; border:0; font-family:var(--sans); cursor:pointer; text-align:left;
}
.yan-panel .alt-baglanti:hover,
.yan-panel .alt-baglanti:hover .simge { color:var(--spark); text-decoration:none; }

/* ---------- Gövde ---------- */
.govde { flex:1; min-width:0; display:flex; flex-direction:column; }

.ust-serit {
  display:flex; align-items:center; gap:12px;
  padding:12px 24px; border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; z-index:5;
}
.ust-serit .iz {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.panel-dugmesi {
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--ink-2); width:30px; height:30px; cursor:pointer;
  font-size:14px; line-height:1; flex:0 0 30px;
}
.panel-dugmesi:hover { border-color:var(--accent); color:var(--accent); }

/* ---------- Ray: aynı tasarımın daralmış hâli ----------
   Rayda grup başlıkları görünmüyor; kapalı bir grup orada simgelerini de
   gizlerdi ve ürünün yarısı ortadan kalkardı. Gruplar bu yüzden
   MainLayout tarafından raya geçerken açılıyor. */
.uygulama.dar .yan-panel { width:56px; flex-basis:56px; }
.uygulama.dar .yan-panel .marka svg.tam,
.uygulama.dar .kisi .bilgi,
.uygulama.dar .panel-ara,
.uygulama.dar .yan-panel .grup > summary,
.uygulama.dar .yan-panel .ad,
.uygulama.dar .sayac-bilgi,
.uygulama.dar .sayac-sinir,
.uygulama.dar .yakinda,
.uygulama.dar .kota-kutu,
.uygulama.dar .alt-baglanti .yazi,
.uygulama.dar .bugun .etiket,
.uygulama.dar .bugun .yazi { display:none; }

.uygulama.dar .yan-panel .marka { padding:14px 0 11px; text-align:center; }
.uygulama.dar .yan-panel .marka .isaret { display:inline-block; }
.uygulama.dar .kisi { justify-content:center; padding:0 0 12px; }
.uygulama.dar .ara-dugmesi {
  display:grid; place-items:center; width:34px; height:34px; margin:0 auto 11px;
  border-radius:9px; background:var(--deep-2); border:1px solid var(--deep-line);
  color:var(--on-deep-dim); cursor:pointer; font-size:14px;
}
.uygulama.dar .ara-dugmesi:hover { color:var(--spark); border-color:var(--spark); }
.uygulama.dar .bugun { margin:0 11px 11px; padding:7px 0; text-align:center; }
.uygulama.dar .bugun .satir { justify-content:center; }
.uygulama.dar .bugun .sayi { font-size:17px; }
.uygulama.dar .yan-panel a.oge,
.uygulama.dar .yan-panel span.oge { justify-content:center; padding:9px 0; gap:0; }
.uygulama.dar .yan-panel .simge { width:auto; font-size:14px; }
.uygulama.dar .yan-panel span.oge.kapali { opacity:.42; }
.uygulama.dar .yan-panel .alt { padding:10px 0 12px; }
.uygulama.dar .alt-baglanti { justify-content:center; padding:6px 0; }

/* Panelin dar hâlinde amblem, geniş hâlinde tam kilit görünür. */
.yan-panel .marka .isaret { display:none; }

/* ---------- Dar ekran ---------- */

@media (max-width:900px) {
  .uygulama .yan-panel { width:56px; flex-basis:56px; }
  .uygulama .yan-panel .marka svg.tam,
  .uygulama .kisi .bilgi,
  .uygulama .panel-ara,
  .uygulama .yan-panel .grup > summary,
  .uygulama .yan-panel .ad,
  .uygulama .sayac-bilgi,
  .uygulama .sayac-sinir,
  .uygulama .yakinda,
  .uygulama .kota-kutu,
  .uygulama .alt-baglanti .yazi,
  .uygulama .bugun .etiket,
  .uygulama .bugun .yazi { display:none; }

  .uygulama .yan-panel .marka { padding:14px 0 11px; text-align:center; }
  .uygulama .yan-panel .marka .isaret { display:inline-block; }
  .uygulama .kisi { justify-content:center; padding:0 0 12px; }
  .uygulama .ara-dugmesi {
    display:grid; place-items:center; width:34px; height:34px; margin:0 auto 11px;
    border-radius:9px; background:var(--deep-2); border:1px solid var(--deep-line);
    color:var(--on-deep-dim); cursor:pointer; font-size:14px;
  }
  .uygulama .bugun { margin:0 11px 11px; padding:7px 0; text-align:center; }
  .uygulama .bugun .satir { justify-content:center; }
  .uygulama .bugun .sayi { font-size:17px; }
  .uygulama .yan-panel a.oge,
  .uygulama .yan-panel span.oge { justify-content:center; padding:9px 0; gap:0; }
  .uygulama .yan-panel .simge { width:auto; font-size:14px; }
  .uygulama .yan-panel span.oge.kapali { opacity:.42; }
  .uygulama .yan-panel .alt { padding:10px 0 12px; }
  .uygulama .alt-baglanti { justify-content:center; padding:6px 0; }

  /* Bu genişlikte panel zaten ray; katlama düğmesinin işlevi kalmıyor. */
  .panel-dugmesi { display:none; }
  .ust-serit { padding:12px 16px; }
}

/* ---------- Hesap sayfası ---------- */

.kart {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
  max-width:70ch;
}
.kart h2 { font-size:16px; margin:0 0 10px; }
.kart h3 { font-size:14px; margin:18px 0 8px; color:var(--ink-2); }
.kart p { margin:0 0 10px; color:var(--ink-2); font-size:14.5px; }
.kart p:last-child { margin-bottom:0; }

.kart.uyari { border-color:var(--warn); background:var(--warn-soft); }
.kart.uyari h2 { color:var(--warn); }

.ozet { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; }
.ozet dt { color:var(--ink-3); font-size:13.5px; }
.ozet dd { margin:0; font-size:14.5px; }

.yetki-listesi { list-style:none; margin:0; padding:0; }
.yetki-listesi li {
  display:flex; align-items:baseline; gap:10px;
  padding:5px 0; font-size:14px; border-bottom:1px solid var(--line);
}
.yetki-listesi li:last-child { border-bottom:0; }
/* Giriş yöntemi satırı: uzun e-posta adresi büzülemediği için "Kaldır"
   düğmesini mobilde ekran dışına itiyordu. Metin kırılabilir; yer
   kalmazsa düğme alt satıra, sağa yaslı iner. */
.yetki-listesi li:has(.yontem-metin) { flex-wrap:wrap; row-gap:6px; }
.yetki-listesi .yontem-metin { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.yetki-listesi .isaret {
  width:22px; flex:0 0 22px; text-align:center;
  font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums;
}
.yetki-listesi li.acik .isaret { color:var(--ok); }
.yetki-listesi li.kapali { color:var(--ink-3); }
.yetki-listesi li.kapali .isaret { color:var(--ink-3); }

/* ---------- Bağlamsal arama sonuç ağacı ----------
   İki seviye: kaynak grubu ve o kaynaktaki eşleşmeler. Düz bir liste
   2.292 satırda okunamaz; "şu kitapta 468, şunda 230" okunur. */

.sonuc-agaci {
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}

.sonuc-agaci .kaynak { border-bottom:1px solid var(--line); }
.sonuc-agaci .kaynak:last-child { border-bottom:0; }

.kaynak-basligi {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 14px; background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left; color:var(--ink);
}
.kaynak-basligi:hover { background:var(--surface-2); }
.kaynak-basligi:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

.kaynak-basligi .ok {
  flex:0 0 9px; font-size:9px; color:var(--ink-3);
  transition:transform .16s ease;
}
.kaynak-basligi.acik .ok { transform:rotate(90deg); }

.kaynak-basligi .bilgi { flex:1; min-width:0; }
.kaynak-basligi .ad {
  display:block; font-size:14.5px; font-weight:600; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kaynak-basligi .kunye {
  display:block; font-size:12.5px; color:var(--ink-3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Eşleşme sayısı: grubun tamamı için, sayfalamadan bağımsız. */
.kaynak-basligi .sayi {
  flex:0 0 auto; font-family:var(--mono); font-size:12px;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:99px; padding:2px 9px;
  font-variant-numeric:tabular-nums;
}
.kaynak-basligi:hover .sayi { background:var(--accent-soft); color:var(--accent); }

/* Eşleşme satırı: tıklanınca kitabın tamamı değil O SAYFA açılır. */
.sonuc-agaci .eslesme {
  display:flex; gap:12px; align-items:baseline;
  padding:9px 14px 9px 33px; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:13.5px; line-height:1.6;
}
.sonuc-agaci .eslesme:hover { background:var(--accent-soft); text-decoration:none; }
.sonuc-agaci .eslesme:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

.sonuc-agaci .eslesme .konum {
  flex:0 0 58px; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.sonuc-agaci .eslesme .onizleme { flex:1; min-width:0; }
.sonuc-agaci .eslesme mark {
  background:transparent; color:var(--accent); font-weight:700; padding:0;
}

.sonuc-agaci .eslesme-durum,
.sonuc-agaci .eslesme-daha {
  display:block; width:100%; padding:9px 14px 9px 33px;
  border:0; border-top:1px solid var(--line); background:none;
  font-family:inherit; font-size:12.5px; color:var(--ink-3);
  text-align:left; margin:0;
}
.sonuc-agaci .eslesme-daha { cursor:pointer; color:var(--accent); }
.sonuc-agaci .eslesme-daha:hover { background:var(--surface-2); }

/* ---------- Pasaj sayfası ---------- */

.pasaj-satiri {
  margin:0 0 12px; font-size:15.5px; line-height:1.7; color:var(--ink-2);
}
.pasaj-satiri:last-child { margin-bottom:0; }

/* Aranan sözcük: sonuç listesindekiyle AYNI biçim — mavi, kalın. Kullanıcı
   listede gördüğü vurguyu kaynakta da aynı görünüşle bulur. */
.pasaj-satiri mark {
  background:transparent; color:var(--accent); font-weight:700; padding:0;
}

/* Aranan pasaj işaretli: kullanıcı sayfada nereye geldiğini görmeli. */
.pasaj-satiri.odak {
  color:var(--ink); background:var(--accent-soft);
  border-left:3px solid var(--accent);
  margin-left:-14px; padding:8px 12px 8px 11px; border-radius:0 6px 6px 0;
}

/* ---------- Yıkıcı işlem bölgesi ----------
   Silme, düzenleme denetimlerinin arasında değil ayrı ve en altta:
   kazayla tıklanacak yerde durmamalı. */

.tehlikeli-bolge {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:26px; padding:14px 16px;
  background:var(--stop-soft); border:1px solid var(--stop);
  border-radius:var(--radius); max-width:70ch;
}
.tehlikeli-bolge > div:first-child { flex:1; min-width:220px; }
.tehlikeli-bolge strong { color:var(--stop); }

.btn.tehlike { color:var(--stop); border-color:var(--stop); background:transparent; }
.btn.tehlike:hover { background:var(--stop); color:var(--on-fill); }

.btn.tehlike-dolu { background:var(--stop); color:var(--on-fill); border-color:var(--stop); }
.btn.tehlike-dolu:hover { filter:brightness(1.08); background:var(--stop); }

/* ---------- Sınıf modülü ---------- */

/* Katılım kodu dersin ilk beş dakikasında kullanılacak tek şey:
   ekranda en görünür öge o olmalı, tahtadan okunabilecek kadar büyük. */
.kod-kutu {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  justify-content:space-between; max-width:70ch;
}
.kod {
  font-family:var(--mono); font-size:34px; font-weight:700;
  letter-spacing:.22em; color:var(--accent); margin-top:2px;
}

/* Kod girişi: kullanıcı küçük harf yazsa da büyük görünür — sunucu
   zaten büyütüyor, ama yazarken de eşleşiyormuş gibi görünmeli. */
.kod-girdi {
  font-family:var(--mono); font-size:19px; letter-spacing:.2em;
  text-transform:uppercase;
}

.ilerleme {
  height:7px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; overflow:hidden;
}
.ilerleme .dolu { height:100%; background:var(--accent); border-radius:99px; }

.tag.ok   { background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok); }
.tag.stop { background:var(--stop-soft); color:var(--stop); border-color:var(--stop); }

/* ---------- Bildirimler ---------- */

.yan-panel .alt-baglanti.vurgulu,
.yan-panel .alt-baglanti.vurgulu .simge { color:var(--spark); }

.bildirim-sayaci {
  margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:700;
  background:var(--spark); color:var(--deep); border-radius:99px;
  padding:1px 6px; font-variant-numeric:tabular-nums;
}

.bildirim-listesi { display:grid; gap:9px; margin-top:18px; }

.bildirim {
  display:flex; gap:13px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:13px 16px;
}

/* Okunmuş bildirim silinmiyor, sessizleşiyor: geçmiş kalmalı ama
   dikkati okunmamışlar toplamalı. */
.bildirim.okundu { border-left-color:var(--line); background:transparent; }
.bildirim.okundu .baslik { font-weight:500; color:var(--ink-2); }

.bildirim.uyari { border-left-color:var(--warn); }
.bildirim.acil  { border-left-color:var(--stop); background:var(--stop-soft); }
.bildirim.ok    { border-left-color:var(--ok); }
.bildirim.ok .isaret { color:var(--ok); }

.bildirim .isaret {
  flex:0 0 22px; text-align:center; font-size:15px; color:var(--ink-3); margin-top:1px;
}
.bildirim.uyari .isaret { color:var(--warn); }
.bildirim.acil  .isaret { color:var(--stop); }

.bildirim .govde { flex:1; min-width:0; }
.bildirim .baslik { font-weight:700; font-size:14.5px; }
.bildirim .metin { color:var(--ink-2); font-size:14px; margin-top:2px; }
.bildirim .zaman {
  color:var(--ink-3); font-size:12px; margin-top:4px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.bildirim .eylem { display:flex; gap:6px; align-items:center; flex-shrink:0; }

@media (max-width:640px) {
  .bildirim { flex-wrap:wrap; }
  .bildirim .eylem { width:100%; justify-content:flex-end; }
}

/* ---------- Kaynakçam ---------- */

.kunye-satiri {
  margin:10px 0 14px; padding:10px 12px;
  background:var(--ground); border:1px solid var(--line); border-radius:8px;
  white-space:pre-wrap; font-size:13px; color:var(--ink-2);
}

.kaynakca-metin {
  margin:0; padding:12px; max-height:340px; overflow:auto;
  background:var(--ground); border:1px solid var(--line); border-radius:8px;
  white-space:pre-wrap; font-size:12.5px;
}

/* Alıntı, künyenin altında ve ondan içeride: kaynağa ait bir parça
   olduğu düzenden anlaşılmalı. */
.alinti {
  border-left:2px solid var(--line); padding:8px 0 8px 14px; margin-bottom:10px;
}
.alinti:last-child { margin-bottom:0; }

.alinti .ust { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.alinti .konum {
  font-size:12px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; padding:1px 9px;
  font-variant-numeric:tabular-nums;
}

.alinti-metni {
  margin:7px 0 0; padding:0; border:0;
  font-family:var(--serif, Georgia), serif; font-size:14.5px; line-height:1.65;
  color:var(--ink-2);
}

.alinti .not {
  margin-top:7px; padding:7px 10px; font-size:13.5px;
  background:var(--accent-soft); border-radius:6px; cursor:pointer;
}
.alinti .not:hover { outline:1px solid var(--accent); }

.alinti .not-ekle {
  margin-top:7px; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--ink-3);
}
.alinti .not-ekle:hover { color:var(--accent); text-decoration:underline; }

/* ---------- İlerleme ---------- */

.stat .s-deger {
  font-family:var(--display); font-size:30px; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat .s-deger .s-bolu { font-size:17px; color:var(--ink-3); font-family:var(--sans); }
.stat .s-ad { font-size:12.5px; color:var(--ink-3); margin-top:5px; }
.stat.vurgu { border-color:var(--accent); }
.stat.vurgu .s-deger { color:var(--accent); }

/* Olgunluk çubukları: dört düzey aynı ölçekte, renk düzeyi kodluyor. */
.olgunluk .satir {
  display:flex; align-items:center; gap:12px; margin-bottom:9px; font-size:14px;
}
.olgunluk .satir:last-child { margin-bottom:0; }
.olgunluk .ad { flex:0 0 150px; color:var(--ink-2); }
.olgunluk .cubuk {
  flex:1; height:10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; overflow:hidden;
}
.olgunluk .dolu { display:block; height:100%; border-radius:99px; }
.olgunluk .dolu.yeni        { background:var(--line); }
.olgunluk .dolu.ogreniliyor { background:var(--warn); }
.olgunluk .dolu.pekisiyor   { background:var(--accent-2); }
.olgunluk .dolu.yerlesmis   { background:var(--ok); }
.olgunluk .sayi {
  flex:0 0 52px; text-align:right; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* Sözlükten seçim listesi: satır başına bir terim ve bir düğme.
   Liste uzun olabildiği için kendi içinde kayıyor; sayfayı uzatmak
   altındaki "kendi terimini ekle" ve silme kutusunu ekrandan
   kaçırıyordu. */
.sozluk-secim {
  max-height:320px; overflow-y:auto; border:1px solid var(--line);
  border-radius:8px;
}
.sozluk-secim .ss-satir {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:7px 12px; font-size:14.5px;
}
.sozluk-secim .ss-satir + .ss-satir { border-top:1px solid var(--line); }
.sozluk-secim .ss-ad { min-width:0; }
.sozluk-secim .btn { flex:none; padding:4px 10px; font-size:13px; }

/* Gösterge paneli: solda bugünün işi ve kısayollar, sağda seviye özeti.
   Dar ekranda tek sütuna iniyor; iki sütunu zorlamak telefonda ikisini
   de okunmaz genişliğe düşürüyordu. */
.panel-izgara { display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
@media (min-width:900px) { .panel-izgara { grid-template-columns:1.4fr 1fr; } }
.panel-kisayol { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.panel-profil .pp-duzey {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px;
}
.panel-profil .pp-sayi { font-size:18px; font-weight:700; }
.panel-profil .pp-puanlar {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center;
  font-size:12.5px;
}
.panel-profil .pp-deger { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.panel-profil .pp-aileler { display:grid; gap:10px; margin-top:16px; }

/* Bugünün işi: ana sayfanın en üstünde, aramanın önüne geçmeyen bir
   liste. Kutu değil çizgilerle ayrılmış satırlar; dört kutu yan yana
   koymak sayfanın asıl işi olan aramayı ekranın dışına itiyordu. */
.bugun-blok {
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; background:var(--surface); padding:12px 16px; margin-bottom:16px;
}
.bugun-blok h2 {
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 6px;
}
.bugun-blok ul { list-style:none; margin:0; padding:0; }
.bugun-blok li + li { border-top:1px solid var(--line); }
.bugun-blok a {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; color:inherit; text-decoration:none; font-size:14.5px;
}
.bugun-blok a:hover { color:var(--accent); }
.bugun-blok .b-ad { display:block; font-size:13px; }
.bugun-blok .b-ok { flex:none; color:var(--ink-3); }

/* Terim aileleri: ad, oran, iki katmanlı çubuk ve altında sayılar.
   Çubuk tek satırda değil kendi satırında: aile adları uzun (ör. "Nitel
   araştırma desenleri") ve dar ekranda ad ile çubuk birbirini eziyordu. */
.aile-listesi { display:grid; gap:14px; }
.aile {
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  align-items:baseline; font-size:14px;
}
.aile .a-ad { font-weight:600; }
.aile .a-oran {
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.aile .a-cubuk {
  grid-column:1 / -1; display:flex; height:10px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px; overflow:hidden;
}
.aile .a-cubuk i { display:block; height:100%; }
.aile .a-ogrenilen { background:var(--ok); }
/* Yeni başlananlar aynı rengin soluğu: ayrı bir renk, öğrenmenin iki
   ayrı türü varmış izlenimi verirdi. */
.aile .a-calisilan { background:color-mix(in srgb, var(--ok) 34%, var(--surface)); }
.aile .a-alt { grid-column:1 / -1; font-size:12.5px; }

/* Eğilim: sütunlar eşit genişlikte, boş günler de yer kaplıyor —
   boşlukları atlamak ara vermeyi gizler. */
.egilim {
  display:flex; align-items:flex-end; gap:2px; height:110px;
  padding:0 2px; border-bottom:1px solid var(--line);
}
.egilim .sutun { flex:1; height:100%; display:flex; align-items:flex-end; min-width:3px; }
.egilim .dolu {
  width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:1px;
}
.egilim .dolu.ileri { background:var(--accent-2); opacity:.75; }

.egilim-alt {
  display:flex; justify-content:space-between; font-size:11.5px; margin-top:6px;
}

/* ---------- Tema seçimi ---------- */

.tema-secim { display:flex; gap:10px; flex-wrap:wrap; }

.tema-dugme {
  flex:1 1 150px;
  display:flex; flex-direction:column; gap:3px;
  text-align:left;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px;
  font-family:inherit; cursor:pointer;
  /* YALNIZ kenarlık: background da geçişli olsaydı tema değiştirildiğinde
     her düğme zeminini ayrı ayrı animasyona sokar ve sayfa bulaşarak
     dönerdi. Hover geri bildirimi için gereken şey kenarlık zaten. */
  transition:border-color .12s;
}
.tema-dugme:hover { border-color:var(--accent); }

/* Seçili olan YALNIZ renkle işaretlenmiyor: kenarlık kalınlaşıyor ve
   arka plan değişiyor. Renk körlüğünde tek başına renk seçim durumunu
   taşımaz — üç seçenekten hangisinin etkin olduğu ayırt edilemezdi. */
.tema-dugme.secili {
  border-color:var(--accent); border-width:2px; padding:11px 13px;
  background:var(--accent-soft);
}

.tema-dugme .tema-ad { font-weight:600; font-size:14.5px; }
.tema-dugme .tema-not { font-size:12.5px; color:var(--ink-3); }
.tema-dugme.secili .tema-not { color:var(--ink-2); }

.tema-dugme:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Keşif dizini ---------- */

.kesif-liste {
  display:grid; gap:12px; margin-top:6px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}

.kesif-kart {
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
  color:var(--ink);
  transition:border-color .12s;
}
.kesif-kart:hover { border-color:var(--accent); text-decoration:none; }

.kesif-kart .k-ust { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kesif-kart .k-baslik { font-weight:600; font-size:15.5px; }

/* Açıklama iki satırda kesiliyor: kartlar aynı yükseklikte kalsın diye
   değil, uzun açıklamanın kartı listeye hâkim olmasını engellemek için. */
.kesif-kart .k-aciklama {
  margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.kesif-kart .k-alt {
  display:flex; gap:6px; flex-wrap:wrap;
  font-size:12.5px; margin-top:auto;
}

/* ---------- Moderasyon kuyruğu ---------- */

.mod-satir {
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:15px 17px; margin-bottom:12px;
}
/* Çok şikâyet almış kayıt kenarından işaretleniyor: sıralama zaten onu
   başa alıyor ama listede gezerken sebebi görünür olmalı. */
.mod-satir.oncelikli { border-left:3px solid var(--warn); }
.mod-satir.kaldirilmis { opacity:.72; }

.mod-ust { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mod-baslik { font-weight:600; font-size:15.5px; }
.mod-alt { font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.mod-not {
  margin:10px 0 0; padding:9px 12px;
  background:var(--surface-2); border-radius:8px;
  font-size:13.5px; color:var(--ink-2);
}
.mod-eylem { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ---------- Mağaza ve sepet ----------
   Dar ekranda kartlar tek sütuna, sepet satırı alt alta katlanır:
   yeni sayfalar mobil düşünülerek yazılıyor, sonradan uyarlanmıyor. */

.teklif-liste {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

.teklif-kart {
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 17px;
  transition:border-color .12s;
}
.teklif-kart:hover { border-color:var(--accent); }
.teklif-kart.sepette { border-color:var(--accent); background:var(--accent-soft); }
/* Sahip olunan paket sessizleşir; yükseltme adayı tek vurgulu kart olur. */
.teklif-kart.sahip { opacity:.72; }
.teklif-kart.sahip:hover { border-color:var(--line); }
.teklif-kart.yukselt { border-color:var(--accent); border-width:2px; padding:14px 16px; }

.mevcut-paket {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:14px 0 4px; padding:10px 14px;
  background:var(--ok-soft); border:1px solid var(--ok);
  border-radius:var(--radius); font-size:14px;
}
.mevcut-paket .mp-etiket {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ok); font-weight:700;
}
.mevcut-paket .mp-ad { font-weight:700; }
.teklif-kart .t-ad { font-weight:700; font-size:15px; }
.teklif-kart .t-detay { font-size:12.5px; }
.teklif-kart .t-fiyat {
  font-family:var(--display); font-size:24px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin:4px 0 8px;
}
.teklif-kart .btn { justify-content:center; margin-top:auto; }

.sepet-satirlar { display:grid; gap:8px; }
.sepet-satir {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.sepet-satir .s-bilgi { flex:1; min-width:160px; display:flex; flex-direction:column; }
.sepet-satir .s-ad { font-weight:600; font-size:14.5px; }
.sepet-satir .s-tutar { font-size:14.5px; font-variant-numeric:tabular-nums; }

.sepet-toplam {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; font-size:15px;
}

/* Semantik harita: arama, SVG ağ, lejant. Renkler jetonlardan: iki temada
   da çalışır. Tür yalnız renkle değil KONUMLA da okunur (kategori tepede,
   ilişkililer sağda, kardeşler solda). */
.harita-ara { position:relative; max-width:70ch; margin-bottom:14px; }
.harita-ara input {
  width:100%; padding:9px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit;
}
.ha-sonuc {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden;
}
.ha-sonuc a { display:block; padding:8px 12px; color:var(--ink); text-decoration:none; }
.ha-sonuc a:hover { background:var(--accent-soft); }
.harita-bas { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.harita-bas b { font-size:19px; }
.harita-bas .btn { margin-left:auto; }
.harita-kap {
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
}
/* Geniş ekranda yatay yay düzeni (en az 640 px; araya düşen genişlikte kap
   yatay kayar). Dar ekranda (telefon) sayfa dikey omurga düzenine geçer ve
   harita kaba tam sığar — kesik düğüm, yana kaydırma yok. */
.harita-svg { display:block; width:100%; min-width:640px; height:auto; }
.harita-svg.dar { min-width:0; }
.hk-kenar { stroke:var(--line); stroke-width:1.5; }
.hk-kenar.iliskili { stroke:var(--accent-2); stroke-opacity:.55; }
.hk-kenar.kategori { stroke:var(--ok); stroke-opacity:.6; stroke-dasharray:4 4; }
.hk-dugum rect { fill:var(--surface); stroke:var(--line); stroke-width:1.5; }
.hk-dugum text { fill:var(--ink); font-size:13px; font-family:var(--sans); pointer-events:none; }
.hk-dugum.iliskili rect { fill:var(--accent-soft); stroke:var(--accent-2); }
.hk-dugum.kategori rect { fill:var(--ok-soft); stroke:var(--ok); }
.hk-dugum.merkez rect { fill:var(--accent); stroke:var(--accent); }
.hk-dugum.merkez text { fill:var(--on-fill); font-weight:700; font-size:14.5px; }
.hk-dugum:not(.merkez) { cursor:pointer; }
.hk-dugum:not(.merkez):hover rect, .hk-dugum:not(.merkez):focus-visible rect { stroke-width:2.5; }
.hk-dugum:focus-visible { outline:none; }
.harita-lejant { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
.harita-lejant .hl {
  display:inline-block; width:12px; height:12px; border-radius:3px;
  margin-right:6px; vertical-align:-1px; border:1.5px solid var(--line);
}
.harita-lejant .hl.kategori { background:var(--ok-soft); border-color:var(--ok); }
.harita-lejant .hl.iliskili { background:var(--accent-soft); border-color:var(--accent-2); }
.harita-lejant .hl.kardes { background:var(--surface); }

/* Kurumum: kurulum formu, koltuk çubuğu, üye listesi. */
.kurum-kart .kurum-bas { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kurum-koltuk { margin-top:14px; }
.kurum-koltuk .kk-yazi { font-weight:700; margin-bottom:6px; }
.kurum-koltuk .kk-cubuk {
  height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden;
}
.kurum-koltuk .kk-cubuk span {
  display:block; height:100%;
  background:linear-gradient(90deg, var(--pan-grad-a), var(--pan-grad-b));
}
.kurum-uyeler { margin-top:14px; border-top:1px solid var(--line); }
.ku-satir {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.ku-satir .ku-kim { display:flex; flex-direction:column; flex:1; min-width:0; }
.ku-satir .ku-kim span { overflow-wrap:anywhere; }
.ku-satir.geri-alindi .ku-kim { opacity:.55; }
/* Telefonda ad/e-posta satırın tamamını alır, düğme alta iner: yan
   yana kaldıklarında e-posta harf harf kırılıyordu. */
@media (max-width:480px) {
  .ku-satir .ku-kim { flex-basis:100%; }
}

/* Seviye belirleme sınavı: seviye şeridi, alan çipleri, program çağrısı. */
.sinav-seviye {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--radius);
  background:var(--accent-soft);
}
.sinav-seviye .ss-etiket { font-size:12.5px; color:var(--ink-3); }
.sinav-seviye .ss-ad { font-size:24px; font-weight:800; }
.sinav-seviye .ss-yuzde { margin-left:auto; font-family:var(--mono); font-weight:700; }
.sinav-seviye.seviye-beginner { background:var(--warn-soft); }
.sinav-seviye.seviye-advanced { background:var(--ok-soft); }
.sinav-alanlar { display:flex; flex-wrap:wrap; gap:8px; }
.sinav-alan {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-size:13px;
  border:1px solid var(--line); color:var(--ink); text-decoration:none;
}
.sinav-alan:hover { background:var(--accent-soft); }
.sinav-alan.tamam .sa-isaret { color:var(--ok); font-weight:700; }
.sinav-alan.zayif { border-color:var(--stop); }
.sinav-alan.zayif .sa-isaret { color:var(--stop); font-weight:700; }
.sinav-program {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; border-radius:var(--radius);
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--pan-grad-a), var(--pan-grad-b)) border-box;
}
.sinav-program > div { flex:1; min-width:200px; }

/* Seviye profili: puan kartları ve rozet ızgarası. */
.seviye-puanlar { max-width:70ch; }
.seviye-puan .s-alt { font-size:12px; margin-top:2px; }
.rozet-izgara {
  /* 130 px: telefonda iki sütun sığar — tek sütunda on rozet uzun bir
     kaydırma demekti. */
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:12px; max-width:70ch;
}
/* Kapsam ızgarayla sınırlı: .rozet adı yan panelin sayaç rozetlerinde
   de kullanılıyor; çıplak seçici orayı bozar. */
.rozet-izgara .rozet {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; padding:14px 10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.rozet-izgara .r-simge { font-size:28px; line-height:1; }
.rozet-izgara .r-ad { font-weight:700; font-size:13.5px; }
.rozet-izgara .r-kosul { font-size:12px; }
.rozet-izgara .rozet.kazanildi { border-color:var(--accent-2); }
.rozet-izgara .rozet.kilitli { opacity:.45; filter:grayscale(1); }

/* Testler: liste kartları, soru bloğu, sonuç karnesi. */
.test-liste { display:flex; flex-direction:column; gap:12px; max-width:70ch; }
.test-kart {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px;
}
.test-kart .tk-ad { font-weight:700; margin-bottom:2px; }
/* Kişisel test kartı: gradyan kenarla ayrışır — sepetteki aktif pil ile
   aynı süs dili. */
.test-kart.kisisel {
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--pan-grad-a), var(--pan-grad-b)) border-box;
}
.test-kart .tk-alt {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px;
}
.test-kart .tk-alt .btn { margin-left:auto; }
/* Test sorusu (A düzeni): her soru kendi kartında; kök büyük ve kalın,
   altında ayraç. legend kutunun kenarına oturmasın diye yüzdürülüyor. */
.test-soru {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 14px; padding:14px 16px 10px; min-width:0;
}
.test-soru legend {
  float:left; width:100%; padding:0 0 10px; margin:0 0 8px;
  font-size:16.5px; font-weight:700; line-height:1.45; border-bottom:1px solid var(--line);
}
.test-soru legend + * { clear:both; }
.test-sorular { max-width:70ch; }
.test-sik {
  display:flex; align-items:baseline; gap:10px; padding:7px 10px; margin:0 -10px;
  border-radius:7px; cursor:pointer;
}
.test-sik input[type="radio"] { accent-color:var(--accent); }
.test-sik:hover { background:var(--surface-2); }
/* Seçili şık: çerçeve yok, zemin + kalınlık (renk tek başına taşımasın). */
.test-sik.secili { background:var(--accent-soft); font-weight:600; }
.test-puan { font-size:22px; font-weight:800; margin-bottom:12px; }
.test-sonuc-soru {
  border-left:3px solid var(--line); padding:8px 12px; margin:10px 0;
}
.test-sonuc-soru.dogru { border-left-color:var(--ok); }
.test-sonuc-soru.yanlis { border-left-color:var(--stop); }
.test-sonuc-soru .ts-baslik { display:flex; gap:8px; align-items:baseline; }
.test-sonuc-soru .ts-no { color:var(--ink-3); }
.test-sonuc-soru .ts-metin { flex:1; font-weight:600; }
.test-sonuc-soru .ts-rozet { font-size:12px; font-weight:700; white-space:nowrap; }
.test-sonuc-soru.dogru .ts-rozet { color:var(--ok); }
.test-sonuc-soru.yanlis .ts-rozet { color:var(--stop); }
.test-sonuc-soru .ts-dogru { margin-top:4px; font-size:13.5px; }
.test-sonuc-soru .ts-aciklama { margin-top:4px; font-size:13px; }
/* Telefonda etiket sorunun ÜSTÜNE çıkar: yan yana kalınca soru metni
   dar bir sütuna sıkışıp beş satıra bölünüyordu. */
@media (max-width:480px) {
  .test-sonuc-soru .ts-baslik { flex-wrap:wrap; }
  .test-sonuc-soru .ts-rozet { order:-1; flex-basis:100%; }
}

/* İndirim kodu: giriş satırı ve uygulanmış kod. */
.indirim-kutu { margin-top:14px; }
.indirim-giris { display:flex; gap:8px; }
.indirim-giris input {
  flex:1; min-width:0; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font:inherit; text-transform:uppercase;
}
.indirim-uygulandi {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px dashed var(--line); border-radius:8px;
}
.indirim-uygulandi .i-kod { font-weight:700; letter-spacing:.5px; }
.indirim-uygulandi .i-tutar { color:var(--ok); font-weight:600; }
.indirim-uygulandi .btn { margin-left:auto; }

/* Aylık sahibine tasarruf afişi: boş sepetin tek vurgulu ögesi. */
.tasarruf {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:4px 0;
}
.tasarruf .t-yazi { flex:1; min-width:200px; font-size:15px; font-weight:600; color:var(--accent); }

/* ---------- Ayarlar sekmeleri ----------
   Alt çizgili sekme: seçili olan vurgu rengiyle çizgisini taşır, geri
   kalanı sessiz. Çıkış sekme DEĞİL; çubuğun sağında duran bir eylem.
   Dar ekranda çubuk kendi içinde yatay kayar. */
.sekmeler {
  display:flex; align-items:center; gap:2px;
  border-bottom:1px solid var(--line);
  margin:14px 0 22px; overflow-x:auto;
}
.sekme {
  background:none; border:0; font-family:inherit;
  font-size:14.5px; font-weight:600; color:var(--ink-3);
  padding:9px 14px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .12s, border-color .12s;
}
.sekme:hover { color:var(--ink); }
.sekme.secili { color:var(--accent); border-bottom-color:var(--accent); }
.sekme:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px; }
.sekmeler .cikis { margin-left:auto; flex:0 0 auto; margin-bottom:6px; }

/* Ayarlar > Abonelikler listesi. Dar ekranda satır alt alta katlanır. */
.abonelik-listesi { list-style:none; margin:0; padding:0; }
.abonelik-listesi li {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.abonelik-listesi li:last-child { border-bottom:0; }
.abonelik-listesi li.gecmis { opacity:.6; }
.abonelik-listesi .a-bilgi { flex:1; min-width:180px; display:flex; flex-direction:column; }
.abonelik-listesi .a-ad { font-weight:600; font-size:14.5px; }
.abonelik-listesi .a-oto { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Ana sayfa vitrini: tek satırlık davet, kart değil. */
.vitrin {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 16px; padding:11px 15px;
  background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--radius); color:var(--ink);
}
.vitrin:hover { text-decoration:none; filter:brightness(1.02); }
.vitrin .v-metin { flex:1; min-width:220px; font-size:14px; }
.vitrin .v-metin b { color:var(--accent); }
.vitrin .v-dugme { font-weight:700; font-size:14px; color:var(--accent); white-space:nowrap; }

@media (max-width:640px) {
  .sepet-satir .btn { width:100%; justify-content:center; }
}

/* ---------- Dil seçici ---------- */

.dil-secici {
  display:inline-flex; gap:2px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:99px;
  padding:2px;
}

.dil-dugme {
  border:0; background:transparent; cursor:pointer;
  color:var(--ink-3);
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.06em;
  padding:3px 9px; border-radius:99px;
  line-height:1.5;
}
.dil-dugme:hover { color:var(--ink); }

/* Panelin giriş gibi statik sayfalarında seçici düğme değil BAĞLANTI:
   devre olmadığından tıklama sunucuya gider. Görünüm aynı kalmalı. */
a.dil-dugme { text-decoration:none; }

/* Seçili olan yalnız renkle değil DOLGU ile de işaretli: iki kısa kod
   arasında yalnız ton farkı, renk körlüğünde ayırt edilemezdi. */
.dil-dugme.secili {
  background:var(--accent); color:var(--on-fill);
}

.dil-dugme:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Panelin dar hâlinde üst şerit sıkışıyor; seçici küçülüyor ama
   kayboluyor değil — dil değiştirmek her genişlikte erişilebilir. */
@media (max-width: 640px) {
  .dil-dugme { padding:3px 7px; font-size:11px; }
}

/* Üst şeritte dil seçiciyi sağa iten boşluk. Ayrı bir öge olması
   bilinçli: izin (breadcrumb) uzunluğu değiştikçe seçicinin yeri
   kaymasın diye esneme burada toplanıyor. */
.ust-serit .serit-bosluk { flex:1; }

/* ── Sözlük girdisi ─────────────────────────────────────────────────
   İkon yok; bölümler RENKLE ayrılır: mavi alıntı, sarı karıştırılan,
   kırmızı hata, mor anımsatıcı. Terim metin içinde mavi-kalın.
   İki katman: üstte her zaman görünenler (kısa tanım, külliyat satırı,
   alıntılar, anımsatıcı), altta açılır "ayrıntılı girdi" bölümleri. */
.gv { color:var(--accent); font-weight:700; }

.girdi-ust { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 0; }
.duzey-cip {
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 10px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent);
}
.taslak-cip {
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:1px 8px; border-radius:99px;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn);
}

.girdi-kisa { font-size:19px; line-height:1.55; margin:16px 0 6px; color:var(--ink); }
/* Külliyat sayıları (B1): küçük çipler + bağlam bağlantısı. */
.girdi-kulliyat { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 18px; }
.kc-cip { font-size:12px; padding:2px 9px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.kc-cip b { color:var(--ink); }
.kc-bag { font-size:12.5px; margin-left:2px; white-space:nowrap; }

.girdi-bolum-baslik {
  font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:22px 0 10px;
}

.alinti {
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:10px 14px; margin:0 0 10px; line-height:1.6;
}
.alinti .atif { display:block; margin-top:6px; font-size:13px; color:var(--ink-2); }
.alinti .atif a { color:inherit; }

.animsatici {
  border-left:3px solid var(--mor); background:var(--mor-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:10px 14px; margin:18px 0 0; line-height:1.6;
}
.animsatici b { color:var(--mor); }

.girdi-katman {
  margin-top:26px; border-top:1px solid var(--line); padding-top:6px;
}
.girdi-katman > details { border-bottom:1px solid var(--line); }
.girdi-katman > details > summary {
  cursor:pointer; list-style:none; padding:13px 0;
  font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px;
}
.girdi-katman > details > summary::-webkit-details-marker { display:none; }
/* Açık/kapalı işareti ikon değil tipografik: + / − */
.girdi-katman > details > summary::after {
  content:"+"; margin-left:auto; font-family:var(--mono); color:var(--ink-3); font-size:18px;
}
.girdi-katman > details[open] > summary::after { content:"−"; }
.girdi-katman > details > .icerik { padding:0 0 16px; line-height:1.65; }
.girdi-katman .icerik p { margin:0 0 10px; }

.okuma-metni {
  background:var(--surface-2); border-radius:var(--radius);
  padding:14px 16px; line-height:1.7;
}
.okuma-metni .atif { display:block; font-size:13px; color:var(--ink-2); margin-top:4px; }

.renkli-kutu {
  border-left:3px solid var(--line); border-radius:0 var(--radius) var(--radius) 0;
  padding:9px 13px; margin:0 0 10px; line-height:1.6;
}
.renkli-kutu.sari { border-left-color:var(--warn); background:var(--warn-soft); }
.renkli-kutu.sari b { color:var(--warn); }
.renkli-kutu.kirmizi { border-left-color:var(--stop); background:var(--stop-soft); }
.renkli-kutu.kirmizi b { color:var(--stop); }


.kalip { display:inline-flex; gap:6px; align-items:baseline; margin:0 8px 8px 0;
  padding:4px 10px; border:1px solid var(--line); border-radius:99px; font-size:14px; }
.kalip small { color:var(--ink-3); font-family:var(--mono); font-size:12px; }

/* Soru kartı (A düzeni): kök büyük ve kalın, altında ince ayraç; şıklar
   çerçevesiz satırlar. Hiyerarşiyi renk değil boyut ve kalınlık kurar —
   girdide renklerin her birinin zaten bir anlamı var. */
.soru-kutu { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 10px; margin:12px 0; }
.soru-kutu .soru-metni { font-size:16.5px; font-weight:700; line-height:1.45;
  margin:0 0 8px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.sik {
  display:flex; align-items:baseline; gap:10px; cursor:pointer; color:var(--ink);
  padding:7px 10px; margin:0 -10px; border-radius:7px;
}
.sik input[type="radio"] {
  accent-color:var(--accent); margin:0; flex:none;
  width:16px; height:16px; transform:translateY(2px); cursor:inherit;
}
.sik:hover:not(:has(input:disabled)) { background:var(--surface-2); }
.sik:has(input:disabled) { cursor:default; }
.sik:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; }
/* Cevaptan sonra renk zemine ve yazıya taşınır (çerçeve yok). Doğru şık
   ayrıca kalın: renk ayırt edemeyen okur için ikinci işaret. */
.sik.dogru { background:var(--cevap-dogru-zemin); color:var(--cevap-dogru-yazi); font-weight:600; }
.sik.yanlis { background:var(--cevap-yanlis-zemin); color:var(--cevap-yanlis-yazi); }
/* Satır sonundaki işaret: doğru şıkta onay, seçilen yanlış şıkta çarpı. */
.sik-isaret { margin-left:auto; flex:none; font-size:15px; font-weight:700; line-height:1; }
.soru-aciklama { font-size:14px; color:var(--ink-2); margin:8px 0 0; }

.kaynakca-satir { font-size:14px; margin:0 0 8px; line-height:1.55; }

/* Editör: iki dil yan yana; dar ekranda alt alta. */
.editor-serit {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  border:1px solid var(--warn); background:var(--warn-soft);
  border-radius:var(--radius); padding:10px 14px; margin:16px 0 0;
}
.editor-serit .aciklama { flex:1 1 260px; font-size:13.5px; color:var(--ink-2); }
.editor-serit select { font:inherit; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.yy-blok { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:0 0 12px; }
.yy-blok .yy-bas { display:flex; gap:8px; align-items:center; margin:0 0 8px; font-weight:700; font-size:14px; }
.yy { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.yy label { display:block; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 4px; }
.yy textarea, .yy input {
  width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; line-height:1.55;
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); resize:vertical;
}
.yy input { margin-bottom:6px; }
.yy .kilitli { background:var(--surface-2); border-radius:8px; padding:8px 10px;
  font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.yy-alt { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:13.5px; }
.yy-alt .durum { color:var(--ink-3); }
@media (max-width: 700px) {
  .yy { grid-template-columns:1fr; }
}

/* Gece/gündüz düğmesi (üst şerit). Dil seçiciyle aynı hap biçimi ve
   yükseklik. Simgeyi CSS seçer: açık temada ay, koyu temada güneş. */
.tema-gecis {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:26px; margin-right:8px; padding:0;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:99px; cursor:pointer;
}
.tema-gecis:hover { color:var(--ink); border-color:var(--accent); }
.tema-gecis:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tema-gecis .gunes { display:none; }
:root[data-theme="dark"] .tema-gecis .ay { display:none; }
:root[data-theme="dark"] .tema-gecis .gunes { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-gecis .ay { display:none; }
  :root:not([data-theme="light"]) .tema-gecis .gunes { display:block; }
}


/* ── Koyu tema stilleri ─────────────────────────────────────────────
   Koyu temanın üç stili: Gece Camı (varsayılan, damgasız), Grafit
   (nötr) ve Sepya (sıcak). Stil <html data-koyu="…"> damgasıyla seçilir
   ve YALNIZ koyu tema etkinken geçerlidir: açık temada damga etkisiz.
   Her stil koyu tema bloğunun jeton kümesinin TAMAMINI yeniden tanımlar;
   aynı küme betikle denetlenerek üretildi. */

:root[data-theme="dark"][data-koyu="grafit"] {
  --ground:#0E1116;
  --surface:#161B22;
  --surface-2:#1F2630;
  --line:#30363D;
  --ink:#E6EDF3;
  --ink-2:#ADBAC7;
  --ink-3:#8B949E;
  --accent:#58A6FF;
  --accent-2:#79B8FF;
  --accent-soft:#132339;
  --warn:#D29922;
  --warn-soft:#2B2111;
  --stop:#F47067;
  --stop-soft:#3A1B1B;
  --ok:#3FB950;
  --ok-soft:#12261A;
  --mor:#BC8CFF;
  --mor-soft:#241A38;
  --on-fill:#0E1116;
  --deep:#0B0E12;
  --deep-2:#12161C;
  --deep-3:#1A1F26;
  --on-deep:#E6EDF3;
  --on-deep-dim:#8B949E;
  --deep-line:#21262D;
  --spark:#58A6FF;
  --on-spark:#0B0E12;
  --kil:rgba(255,255,255,.05);
  --pan-grad-a:#58A6FF;
  --pan-grad-b:#BC8CFF;
  --pan-etkin-bg:#1F2630;
  --pan-etkin-ink:#FFFFFF;
  --pan-logo:#79B8FF;
  --marka-grad-a:#E6EDF3;
  --marka-grad-b:#ADBAC7;
  --marka-yazi-a:#79B8FF;
  --marka-yazi-b:#E6EDF3;
  --pan-edge:linear-gradient(180deg,#30363D,#21262D);
  --pan-hover:rgba(255,255,255,.05);
  --spark-soft:rgba(88,166,255,.20);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-koyu="grafit"] {
    --ground:#0E1116;
    --surface:#161B22;
    --surface-2:#1F2630;
    --line:#30363D;
    --ink:#E6EDF3;
    --ink-2:#ADBAC7;
    --ink-3:#8B949E;
    --accent:#58A6FF;
    --accent-2:#79B8FF;
    --accent-soft:#132339;
    --warn:#D29922;
    --warn-soft:#2B2111;
    --stop:#F47067;
    --stop-soft:#3A1B1B;
    --ok:#3FB950;
    --ok-soft:#12261A;
    --mor:#BC8CFF;
    --mor-soft:#241A38;
    --on-fill:#0E1116;
    --deep:#0B0E12;
    --deep-2:#12161C;
    --deep-3:#1A1F26;
    --on-deep:#E6EDF3;
    --on-deep-dim:#8B949E;
    --deep-line:#21262D;
    --spark:#58A6FF;
    --on-spark:#0B0E12;
    --kil:rgba(255,255,255,.05);
    --pan-grad-a:#58A6FF;
    --pan-grad-b:#BC8CFF;
    --pan-etkin-bg:#1F2630;
    --pan-etkin-ink:#FFFFFF;
    --pan-logo:#79B8FF;
    --marka-grad-a:#E6EDF3;
    --marka-grad-b:#ADBAC7;
    --marka-yazi-a:#79B8FF;
    --marka-yazi-b:#E6EDF3;
    --pan-edge:linear-gradient(180deg,#30363D,#21262D);
    --pan-hover:rgba(255,255,255,.05);
    --spark-soft:rgba(88,166,255,.20);
  }
}

:root[data-theme="dark"][data-koyu="sepya"] {
  --ground:#16110C;
  --surface:#211A13;
  --surface-2:#2C231A;
  --line:#413427;
  --ink:#F1E6D6;
  --ink-2:#D1BFA6;
  --ink-3:#A38F76;
  --accent:#E58A6C;
  --accent-2:#F0A68D;
  --accent-soft:#3B2117;
  --warn:#E9B949;
  --warn-soft:#32280E;
  --stop:#EE7A86;
  --stop-soft:#3B1A20;
  --ok:#9CC5A1;
  --ok-soft:#1E2C21;
  --mor:#C7A3D9;
  --mor-soft:#2E2231;
  --on-fill:#16110C;
  --deep:#120E0A;
  --deep-2:#1A140F;
  --deep-3:#241C15;
  --on-deep:#F1E6D6;
  --on-deep-dim:#A38F76;
  --deep-line:#33291F;
  --spark:#E58A6C;
  --on-spark:#120E0A;
  --kil:rgba(255,240,220,.05);
  --pan-grad-a:#E58A6C;
  --pan-grad-b:#E9B949;
  --pan-etkin-bg:#2C231A;
  --pan-etkin-ink:#FFE3CF;
  --pan-logo:#E9B949;
  --marka-grad-a:#E58A6C;
  --marka-grad-b:#E9B949;
  --marka-yazi-a:#E9B949;
  --marka-yazi-b:#F1E6D6;
  --pan-edge:linear-gradient(180deg,rgba(229,138,108,.5),rgba(233,185,73,.2));
  --pan-hover:rgba(229,138,108,.08);
  --spark-soft:rgba(229,138,108,.20);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-koyu="sepya"] {
    --ground:#16110C;
    --surface:#211A13;
    --surface-2:#2C231A;
    --line:#413427;
    --ink:#F1E6D6;
    --ink-2:#D1BFA6;
    --ink-3:#A38F76;
    --accent:#E58A6C;
    --accent-2:#F0A68D;
    --accent-soft:#3B2117;
    --warn:#E9B949;
    --warn-soft:#32280E;
    --stop:#EE7A86;
    --stop-soft:#3B1A20;
    --ok:#9CC5A1;
    --ok-soft:#1E2C21;
    --mor:#C7A3D9;
    --mor-soft:#2E2231;
    --on-fill:#16110C;
    --deep:#120E0A;
    --deep-2:#1A140F;
    --deep-3:#241C15;
    --on-deep:#F1E6D6;
    --on-deep-dim:#A38F76;
    --deep-line:#33291F;
    --spark:#E58A6C;
    --on-spark:#120E0A;
    --kil:rgba(255,240,220,.05);
    --pan-grad-a:#E58A6C;
    --pan-grad-b:#E9B949;
    --pan-etkin-bg:#2C231A;
    --pan-etkin-ink:#FFE3CF;
    --pan-logo:#E9B949;
    --marka-grad-a:#E58A6C;
    --marka-grad-b:#E9B949;
    --marka-yazi-a:#E9B949;
    --marka-yazi-b:#F1E6D6;
    --pan-edge:linear-gradient(180deg,rgba(229,138,108,.5),rgba(233,185,73,.2));
    --pan-hover:rgba(229,138,108,.08);
    --spark-soft:rgba(229,138,108,.20);
  }
}

/* Koyu stil seçeneğindeki örnek şerit: stilin kendi renkleri, sabit.
   Seçim yapılmadan (ve açık temadayken) nasıl görüneceği anlaşılsın. */
.stil-ornek { display:flex; height:10px; border-radius:4px; overflow:hidden;
  margin-bottom:6px; border:1px solid var(--line); }
.stil-ornek i { flex:1; }

/* Soru numarası ("Soru 1/3"): kökün üstünde küçük, vurgu renginde etiket.
   Sözlük girdisindeki testte ve Testler/Seviye sınavı sayfalarında aynı. */
.soru-no {
  display:block; margin:0 0 4px;
  font:700 11px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.test-soru legend .soru-no { font-size:11px; font-weight:700; }

/* ── Alıntılar: Alıntı | Dizin (KWIC) ───────────────────────────────
   Dizinde her alıntı tek satır; hedef sözcük bütün satırlarda aynı
   dikey eksende. Satırlar ortak ızgaranın sütunlarını paylaşır
   (subgrid): hedef sütunu en uzun biçime (ör. "üçgenlemesine") göre bir
   kez ölçülür, kısa biçimler de aynı x'ten başlar. Sol bağlam sağa
   yaslanır ve soldan solarak kesilir; sağ bağlam üç noktayla biter. */
.girdi-bolum-bas { display:flex; align-items:center; gap:12px; margin:22px 0 10px; }
.girdi-bolum-bas .girdi-bolum-baslik { margin:0; white-space:nowrap; }   /* başlık tek satır (B1) */
.gorunum-anahtari {
  margin-left:auto; display:inline-flex; gap:2px; padding:2px;
  border-radius:99px; border:1px solid var(--line); background:var(--surface-2);
}
.gorunum-anahtari button {
  border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; padding:3px 11px; border-radius:99px; color:var(--ink-3);
}
.gorunum-anahtari button:hover { color:var(--ink); }
.gorunum-anahtari button.secili { background:var(--accent); color:var(--on-fill); }
.gorunum-anahtari button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.kwic {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 0; display:grid;
  /* İki bağlam sütunu: hedef sağ sütunun başındadır, böylece çekim eki ve
     noktalama terime bitişik kalır; hizalama terimin başında yapılır. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 130px; column-gap:0;
}
.kwic-satir {
  display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:baseline;
  padding:7px 14px; font:inherit; font-size:14px; line-height:1.5; text-align:left;
  background:transparent; color:var(--ink); border:0; cursor:pointer;
}
.kwic-satir + .kwic-satir, .kwic-ayrinti + .kwic-satir { border-top:1px solid var(--line); }
.kwic-satir:hover, .kwic-satir.acik { background:var(--surface-2); }
.kwic-satir:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.kwic .sol {
  display:flex; justify-content:flex-end; overflow:hidden; white-space:nowrap; color:var(--ink-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px);
          mask-image:linear-gradient(90deg, transparent, #000 28px);
}
.kwic .hedef { font-weight:700; color:var(--accent); white-space:nowrap; }
/* Kök ile ek/sağ bağlam arasında sütun boşluğu YOK: "-sine" ve virgül
   köke bitişik okunur. Sol bağlamla kök arasındaki boşluk dolgudan gelir. */
.kwic .sol { padding-right:.3em; }
.kwic .ek { font-weight:700; color:var(--accent); }
.kwic .kaynak { padding-left:10px; }
.kwic .sag { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink-2); }
.kwic .kaynak {
  font-size:12px; color:var(--ink-3); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kwic-ayrinti { grid-column:1 / -1; padding:4px 14px 8px; background:var(--surface-2); }
.kwic-ayrinti .alinti { margin:0; }
.kwic-ipucu { font-size:12.5px; color:var(--ink-3); margin:8px 2px 0; }
.kwic-dugmeler { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.kwic-cumle { margin:0 0 6px; font-size:14px; line-height:1.6; }
.kwic-kaynak { font-size:12.5px; }

/* Dar ekran: künye satırın altına iner, bağlam kısalır. */
@media (max-width: 700px) {
  .kwic { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .kwic-satir { row-gap:2px; font-size:13.5px; padding:7px 10px; }
  .kwic .kaynak { grid-column:1 / -1; text-align:center; font-size:11px; }
}

/* Kaynakça altındaki lisans notu: dipnot boyunda, ikincil renk. */
.kaynakca-not { font-size:12px; line-height:1.5; color:var(--ink-3); margin:10px 0 0; }

/* ── Terim adı (TerimAdi bileşeni) ──────────────────────────────────
   Seçili dil önde, öteki dil parantez içinde soluk; alternatif adlar
   alt satırda "≈" ile, mor italik (anımsatıcıyla aynı mor). */
.terim-adi .ta-ana { font-weight:600; color:var(--ink); }
.terim-adi .ta-oteki { font-weight:400; color:var(--ink-3); white-space:nowrap; }
.ta-alt { display:block; color:var(--mor); font-style:italic; font-size:13.5px; line-height:1.4; }
/* Sözlük listesi: ad üstte, alternatifler altta. */
.term-row:has(> .terim-adi) { flex-direction:column; align-items:flex-start; gap:2px; }
/* Terim sayfası başlığı: parantezli öteki dil başlıktan küçük. */
.term-head h1 .ta-ana { font-weight:800; }
.term-head h1 .ta-oteki { font-size:.6em; letter-spacing:0; }
.term-head .ta-alt { font-size:15.5px; margin-top:4px; }
/* Telefon düzeni: tuval kaba tam sığar (ölçek ~0,8), yazı birim olarak
   büyütülür ki ekranda ~12 px okunsun; uzun adlar iki satıra bölünür. */
.harita-svg.dar .hk-dugum text { font-size:14.5px; }
.harita-svg.dar .hk-dugum.merkez text { font-size:16px; }

/* Terim meta satırları (A1): etiket kendi satırında, çipler altında. */
.terim-meta { display:flex; flex-direction:column; gap:12px; margin:14px 0 4px; }
.tm-etiket { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px; }
.tm-cipler { display:flex; flex-wrap:wrap; gap:6px; }
.tm-cipler .tag { margin:0; }
.tag.kategori { background:var(--ok-soft); border-color:var(--ok); color:var(--ok); }

/* Kaynaklardan başlığı dar ekranda: İngilizce ("FROM THE SOURCES" +
   "Quotes | Concordance") telefon satırına ~20 px sığmıyordu. Anahtar
   biraz sıkılaşır; yine sığmazsa alt satıra, sağa yaslı iner — yatay
   taşma olmaz. */
.girdi-bolum-bas { flex-wrap:wrap; row-gap:8px; }
@media (max-width:640px) {
  .girdi-bolum-bas { gap:8px; }
  .gorunum-anahtari button { padding:3px 8px; font-size:11.5px; }
}

/* ── İlişkili terimler: iki grup, liste satırları ───────────────────
   Soldaki ince çizgi grubu gösterir: mavi birlikte geçenler, gri aynı
   kategori (haritayla aynı renkler). Yoğunluk sakin (~%55): ayırt
   edilir ama göze batmaz. Altta tam genişlik harita düğmesi. */
:root {
  --il-mavi:rgba(27,90,158,.45);
  --il-gri:rgba(87,105,126,.38);
  /* Açık temada grup başlıkları daha belirgin: biraz büyük ve kalın. */
  --il-bas-boy:12px;
  --il-bas-agirlik:800;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --il-mavi:rgba(125,184,242,.55); --il-gri:rgba(129,153,174,.45);
    --il-bas-boy:11px; --il-bas-agirlik:700; }
}
:root[data-theme="dark"] { --il-mavi:rgba(125,184,242,.55); --il-gri:rgba(129,153,174,.45);
  --il-bas-boy:11px; --il-bas-agirlik:700; }

.iliskili .il-bas { font-size:var(--il-bas-boy); font-weight:var(--il-bas-agirlik); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:12px 0 2px; }
.iliskili .il-bas:first-child { margin-top:0; }
/* Sayı dairesi: mavi tonlu zemin, kalın mavi rakam, ince kenar — grubun
   büyüklüğü bir bakışta okunur. */
.iliskili .il-sayi { display:inline-block; min-width:17px; text-align:center; font-size:9.5px; font-weight:700;
  line-height:15px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-2);
  border-radius:99px; padding:0 5px; margin-left:6px; letter-spacing:0; vertical-align:1px; }
.iliskili .il-satir { display:flex; align-items:baseline; gap:6px; padding:9px 2px 9px 12px;
  border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.iliskili .il-satir:hover { background:var(--surface-2); }
.iliskili .il-satir.mavi { box-shadow:inset 3px 0 0 var(--il-mavi); }
.iliskili .il-satir.gri { box-shadow:inset 3px 0 0 var(--il-gri); }
.iliskili .il-ok { margin-left:auto; color:var(--ink-3); }
.iliskili .il-harita { display:block; text-align:center; margin-top:14px; padding:9px; border-radius:9px;
  border:1px solid var(--accent); color:var(--accent); font-weight:600; font-size:13.5px; text-decoration:none; }
.iliskili .il-harita:hover { background:var(--accent-soft); }
/* Grup başlıkları mavi ("Birlikte geçenler", "Aynı kategoride"); yanlarındaki kategori adı soluk. */
.iliskili .il-bas { color:var(--accent); }
/* Kategori adı: yeşil oval — sayfa üstündeki kategori çipi ve haritadaki
   kategori düğümüyle aynı renk. Başlığın büyük harf dönüşümünü almaz. */
.iliskili .il-bas small { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.5; vertical-align:1px;
  color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok); }

/* Türler: kavram ağacı. Kök terim mavi hapta; türler dikey gövdeden
   kıvrık dallarla ayrılır. Tür adı tema mavisinde (açık tonu açık temada
   okunabilirlik eşiğinin altında kalıyordu), açıklama altında soluk. */
.tur-agaci .ta-kok { display:inline-block; font-weight:800; padding:3px 12px; border-radius:8px;
  background:var(--accent); color:var(--on-fill); margin-bottom:4px; }
.tur-agaci ul { list-style:none; margin:0; padding:0; }
.tur-agaci li { position:relative; padding:6px 0 6px 24px; margin-left:12px; border-left:2px solid var(--line); }
.tur-agaci li:last-child { border-left-color:transparent; }
.tur-agaci li::before { content:""; position:absolute; left:-2px; top:0; width:16px; height:17px;
  border-left:2px solid var(--line); border-bottom:2px solid var(--line); border-bottom-left-radius:6px; }
.tur-agaci .tur-ad { display:block; color:var(--accent); font-weight:700; }
.tur-agaci .tur-aciklama { color:var(--ink-2); font-size:14px; line-height:1.5; }

/* ── Anımsatıcı: yapılı şablon ──────────────────────────────────────
   Mor kutu içinde: etiket (kısaltma kendi yazımıyla), sonra düzene göre
   bağlı yuvarlaklar (zincir) ya da dikey karolar; anlam, imge ve isteğe
   bağlı çizim şablonu. */
.animsatici .an-etk { display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mor); }
.animsatici .an-ad { text-transform:none; letter-spacing:.02em; }
.animsatici p { margin:8px 0 0; }
.animsatici .an-anlam { font-weight:600; color:var(--ink); }
.animsatici .an-imge { font-style:italic; color:var(--ink-2); }

/* Zincir: harfler yuvarlak rozetlerde, ince bir çizgiyle birbirine bağlı. */
.an-zincir { position:relative; display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); margin:12px 0 2px; }
.an-zincir::before { content:""; position:absolute; top:21px; left:calc(50% / var(--n, 4)); right:calc(50% / var(--n, 4));
  border-top:2px solid color-mix(in srgb, var(--mor) 50%, transparent); }
.an-halka { position:relative; text-align:center; min-width:0; }
.an-halka b { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 4px; border-radius:50%;
  background:var(--ground); border:2px solid var(--mor); color:var(--mor); font-size:19px; font-weight:800; }
.an-halka span { display:block; font-size:12px; color:var(--ink-2); line-height:1.3; overflow-wrap:anywhere; }

/* Dikey: karo + sözcük + kısa ipucu (liste türü anımsatıcılar). */
.an-dikey { display:flex; flex-direction:column; gap:8px; margin:10px 0 2px; }
.an-satir { display:flex; align-items:center; gap:12px; }
.an-karo { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:8px;
  background:var(--ground); border:1px solid color-mix(in srgb, var(--mor) 50%, transparent);
  color:var(--mor); font-size:19px; font-weight:800; }
.an-satir strong { display:block; line-height:1.3; }
.an-satir .an-ipucu { display:block; font-size:13px; color:var(--ink-3); }

/* ── Şema: şablondan üretilen çizim ────────────────────────────────
   İki biçem ailesi aynı bileşenden çıkıyor. Anımsatıcının çizimi MOR,
   çünkü anımsatıcı kutusunun içinde duruyor ve onun parçası. Kavram
   şeması VURGU rengiyle: o bir bellek oyunu değil, kavramın resmi. */
.sema-kutu { margin:16px 0 0; padding:14px 16px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--ground); }
.sema-kutu figcaption { margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  text-align:center; }
.sema-kutu .sema-ad { display:block; font-weight:600; color:var(--ink); }

.sema { display:block; width:100%; max-width:380px; height:auto; margin:12px auto 0; }
.sema .egri { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; }
.sema .tarali { fill:color-mix(in srgb, var(--accent) 32%, transparent); stroke:none; }
.sema .eksen { stroke:var(--line); stroke-width:1.5; }
.sema .eksen.kesik { stroke-dasharray:4 4; }
.sema text { fill:var(--ink-2); font-size:12px; font-family:var(--sans); }

/* Hata tablosu: dört hücre, biri vurgulanabilir. */
.sema .hucre { fill:none; stroke:var(--line); stroke-width:1.5; }
.sema .hucre.vurgu { fill:color-mix(in srgb, var(--accent) 16%, transparent);
  stroke:var(--accent); stroke-width:2; }

/* Desen akışı: kutular ve aralarındaki oklar. */
.sema .kutu { fill:var(--ground); stroke:var(--accent); stroke-width:1.5; }
.sema .ok { stroke:var(--ink-3); stroke-width:1.5; }
.sema .ok-ucu { fill:var(--ink-3); }

/* Çizim şablonu (ör. haritacının üçgeni). */
.an-cizim { display:block; width:100%; max-width:340px; height:auto; margin:10px auto 0; }
.an-cizim .egri { fill:none; stroke:var(--mor); stroke-width:2.5; stroke-linejoin:round; }
.an-cizim .tarali { fill:color-mix(in srgb, var(--mor) 24%, transparent); stroke:none; }
.an-cizim .eksen { stroke:color-mix(in srgb, var(--mor) 40%, transparent); stroke-width:1.5; }
.an-cizim .eksen.kesik { stroke-dasharray:4 4; }
.an-cizim .cz { stroke:color-mix(in srgb, var(--mor) 50%, transparent); stroke-width:2; }
.an-cizim .kesik { stroke-dasharray:5 5; }
.an-cizim .bilinen { fill:var(--ground); stroke:var(--mor); stroke-width:2; }
.an-cizim .hedef { fill:var(--mor); }
.an-cizim text { fill:var(--ink-2); font-size:12px; font-family:var(--sans); }

/* Editör: yapılı anımsatıcı notu. */
.yy-not { font-size:12.5px; color:var(--ink-3); margin:8px 0 0; }

/* ── Ek okumalar (açıklamalı), kart düzeni */
.ek-okuma .eo-kart { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 10px; }
.ek-okuma .eo-kart.taslak { box-shadow:inset 3px 0 0 var(--warn); }
.eo-ust { margin:0 0 8px; }
.eo-baslik { display:block; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.eo-meta { display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.eo-aciklama { margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.eo-ayak { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.eo-cip { font-size:11.5px; font-weight:600; padding:1px 9px; border-radius:99px; background:var(--surface-2); color:var(--ink-2); }
.eo-dugme { margin-left:auto; font-size:13px; font-weight:600; padding:5px 12px; border-radius:8px;
            background:var(--accent); color:var(--on-fill); text-decoration:none; white-space:nowrap; }
.eo-kunye { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--ink-3); overflow-wrap:anywhere; }
.eo-kunye a { color:inherit; text-decoration-color:var(--line); }
.eo-kunye-bas { margin:0 0 8px; font-size:14px; color:var(--ink); }

/* Çalışma kartı: her tıklayışta çevrilir */
.kart-cevir { cursor:pointer; user-select:none; }
.kart-cevir:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Kartın arkasındaki anımsatıcı çizimi. Yalnız şekil var: harf zinciri ve
   anlam satırı girdi sayfasında kalıyor, çünkü onlar hatırlanacak şeyi
   yazıyla söylüyor. Kesik çizgi tanımdan ayırıyor, ikinci bir kutu açmıyor:
   kart zaten kutunun kendisi. */
.kart-cizim { margin-top:14px; padding-top:14px;
  border-top:1px dashed color-mix(in srgb, var(--mor) 35%, transparent); }

/* ── Külliyat kullanımı grafikleri ──
   Kutu altındaki ince çizgi ve iki yatay çubuk listesi. Çubuklar SVG değil
   HTML kutusu: dar ekranda ad kısalır, çubuk daralır, taşma olmaz. */
.stat .spark { display:block; width:100%; height:30px; margin-top:8px; overflow:visible; }
.grafik-baslik {
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:22px 0 8px;
}
.cubuklar {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px;
}
.cubuk-satir {
  display:grid; grid-template-columns:minmax(0,9em) minmax(0,1fr) 2.2em;
  align-items:center; gap:10px; padding:5px 0; font-size:13.5px;
}
.cubuk-satir .ad { color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cubuk-satir .iz { background:var(--surface-2); border-radius:4px; height:12px; }
.cubuk-satir .dolgu { display:block; height:12px; border-radius:4px; min-width:3px; }
.cubuk-satir .deger { color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:420px) {
  .cubuk-satir { grid-template-columns:minmax(0,7em) minmax(0,1fr) 2em; gap:8px; font-size:13px; }
}

/* ── Alıştırma ─────────────────────────────────────────────────────
   Kip seçimi ve soru ekranı. Şık düğmeleri quiz'deki .sik ile ADI
   ayrıdır: orası radyo düğmesi taşıyan bir etiket, burası düğmenin
   kendisi. Aynı adı paylaşsalardı biri ötekinin hizasını bozardı. */
.kip-izgara {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-top:18px;
}
.kip-kart {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.kip-kart:hover { border-color:var(--accent); transform:translateY(-1px); }
.kip-kart:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.kip-kart .kip-ad { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.kip-kart .kip-acik { font-size:13.5px; line-height:1.5; }

/* Kip ikonu: her kipin kendi rengi var (--kip-renk). Karo zemini o rengin
   yumuşak karışımı, ikon çizgisi rengin kendisi. Kart üzerine gelince karo
   dolu renge döner ve ikon beyaza çıkar: küçük ama belirgin bir "seçili"
   hissi. Renkler sayfanın kalan bölümleriyle aynı aileden (accent, ok,
   mor, warn) seçildi ki sayfa tek sesle konuşsun. */
.kip-kart { --kip-renk:var(--accent); }
.kip-kart .kip-ikon {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; margin-bottom:4px;
  color:var(--kip-renk);
  background:color-mix(in srgb, var(--kip-renk) 13%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kip-renk) 28%, transparent);
  transition:background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.kip-kart .kip-ikon-svg { display:block; }
.kip-kart:hover .kip-ikon, .kip-kart:focus-visible .kip-ikon {
  background:var(--kip-renk); color:var(--on-fill);
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--kip-renk) 70%, transparent);
  transform:scale(1.04);
}
.kip-kart:hover { border-color:color-mix(in srgb, var(--kip-renk) 60%, var(--line)); }
.kip-kart[data-kip="cloze"]       { --kip-renk:var(--accent); }
.kip-kart[data-kip="match"]       { --kip-renk:var(--ok); }
.kip-kart[data-kip="recall"]      { --kip-renk:var(--mor); }
.kip-kart[data-kip="distinguish"] { --kip-renk:var(--warn); }
.kip-kart[data-kip="group"]       { --kip-renk:var(--accent-2); }
.kip-kart[data-kip="collocation"] { --kip-renk:var(--grafik-2); }
.kip-kart[data-kip="acrostic"]    { --kip-renk:var(--stop); }

/* Boşluklu alıntı uzun olabiliyor; okuma satırı gibi ayarlanıyor. */
.alistirma-govde { font-size:16.5px; line-height:1.65; }

.alistirma-siklar {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px; margin-top:16px;
}
.alistirma-sik {
  justify-content:flex-start; text-align:left; white-space:normal;
  min-height:46px; line-height:1.4;
}
@media (max-width:560px) {
  .alistirma-siklar { grid-template-columns:1fr; }
}

.alistirma-giris {
  padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font:inherit; min-width:0;
}
.alistirma-giris:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* Düzey çubuğu: puan tek başına anlamsız; çubuk onu bulunulan düzeyin
   içinde konumlandırıyor. */
.duzey-kutu {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin:18px 0 14px;
}
.duzey-ust { display:flex; align-items:baseline; gap:10px; }
.duzey-ust .duzey-ad { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.duzey-ust .duzey-puan { margin-left:auto; color:var(--ink-2); font-size:13.5px; }
.duzey-iz {
  background:var(--surface-2); border-radius:5px; height:10px;
  margin:9px 0 6px; overflow:hidden;
}
.duzey-dolgu { display:block; height:10px; border-radius:5px; background:var(--accent); }
.duzey-alt { font-size:13px; }

/* Günün alıştırması: kip seçiminin üstünde tek satır. Yapılınca
   kaybolmuyor, işaretleniyor — gelen kişi ne yaptığını görsün. */
.gunun-kutu {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  padding:12px 14px; margin:18px 0 6px;
}
.gunun-kutu.yapildi { border-color:var(--ok); }
.gunun-sol { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.gunun-etiket {
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.gunun-kip { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.gunun-seri { font-size:13px; }
.gunun-tik { color:var(--ok); font-size:18px; font-weight:700; }

/* İnceleme kuyruğu: az alıntılı girdi işaretli. Kırmızı değil turuncu —
   bu bir hata değil, editörün bakması gereken bir karar noktası. */
.inceleme-zayif { color:var(--warn); font-weight:600; }


/* ── Kayıtta hesap rolü seçimi ──────────────────────────────────────
   İki kart, tek satır; dar ekranda alt alta. Açıklama kartın içinde
   duruyor: seçimden SONRA "hangisiydi" diye sorulmasın. */
.rol-secim { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rol-kart { display:block; text-align:left; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--ground); cursor:pointer; }
.rol-kart:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rol-kart.secili { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, var(--ground)); }
.rol-kart .rol-ad { display:block; font-weight:600; color:var(--ink); margin-bottom:3px; }
.rol-kart .rol-aciklama { display:block; font-size:12.5px; line-height:1.45; color:var(--ink-2); }
@media (max-width: 560px) { .rol-secim { grid-template-columns:1fr; } }

/* Tek seferlik rol sorusu: örtü + ortada kutu. Kapatma düğmesi yok,
   çünkü soru cevaplanana kadar her açılışta yeniden çıkardı. */
.rol-ortu { position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  padding:20px; background:color-mix(in srgb, var(--ink) 55%, transparent); }
.rol-kutu { width:100%; max-width:520px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.rol-kutu h2 { margin:0 0 14px; font-size:19px; }
.rol-kutu .rol-not { margin:14px 0 0; font-size:12.5px; }

/* ── Kare bulmaca ───────────────────────────────────────────────────
   Izgara solda, ipuçları sağda; dar ekranda alt alta. Hücreler kare
   kalıyor (aspect-ratio) ve sütun sayısı sunucudan geliyor. */
.bulmaca-duzen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,23rem);
  gap:24px; align-items:start; }
/* Tek sutunda da minmax(0,1fr) gerekiyor: 1fr, icerdigi izgaranin
   min-genisligi kadar buyuyup sayfayi yatay kaydiriyordu. */
@media (max-width: 900px) { .bulmaca-duzen { grid-template-columns:minmax(0,1fr); gap:14px; } }

/* Izgara, sütun sayısı arttıkça kareleri okunmaz hâle getiriyordu: 24
   sütunlu bir bulmacada kare 24px'e düşüyordu. Kare için bir taban boy
   konuyor; sığmadığında ızgara kendi içinde yatay kayıyor. */
.bulmaca-izgara-sarmal { overflow-x:auto; overscroll-behavior-x:contain;
  min-width:0; max-width:100%; padding-bottom:6px; }
.bulmaca-izgara { display:grid; grid-template-columns:repeat(var(--sutun), 1fr);
  gap:3px; width:100%; max-width:min(100%, 52rem);
  min-width:calc(var(--sutun) * 2.15rem); }
.bh { position:relative; aspect-ratio:1; background:var(--surface);
  border:1px solid var(--line); border-radius:3px; container-type:inline-size; }
.bh.bos { background:transparent; border-color:transparent; }
.bh.etkin { background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bh.dogru { background:var(--cevap-dogru-zemin); border-color:var(--cevap-dogru-yazi); }
.bh input { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
  background:transparent; text-align:center; font-weight:700;
  font-size:clamp(13px,2vw,22px); color:var(--ink); text-transform:uppercase; }
/* Harf karenin kendi genişliğine bağlanıyor: ekran değil, kare belirleyici. */
.bh input { font-size:58cqw; }
.bh input:focus { outline:2px solid var(--accent); outline-offset:-2px; }
.bh.dogru input { color:var(--cevap-dogru-yazi); }
.bh-no { position:absolute; top:1px; left:3px; font-size:10px; line-height:1;
  color:var(--ink-3); pointer-events:none; z-index:1; }

/* Etkin ipucu şeridi: ipucu listesi ızgaranın altına indiğinde hangi
   sözcüğün doldurulduğu görünsün diye yalnız dar ekranda açılıyor. */
.bulmaca-etkin { display:none; }
@media (max-width: 900px) {
  .bulmaca-etkin { display:flex; gap:10px; align-items:baseline; position:sticky; top:0;
    z-index:3; margin:0 0 10px; padding:10px 12px; background:var(--mor-soft);
    border:1px solid var(--line); border-left:4px solid var(--mor);
    border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.18); }
  .bulmaca-etkin-no { flex:none; font-size:12px; font-weight:700; color:var(--mor);
    text-transform:uppercase; letter-spacing:.04em; }
  .bulmaca-etkin-metin { flex:1; font-size:14px; line-height:1.4; color:var(--ink); }
  .bulmaca-etkin-uzunluk { flex:none; font-size:12px; color:var(--ink-3); }
}

.bulmaca-eylemler { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.bulmaca-sonuc { font-size:14px; color:var(--ink-2); }

.bulmaca-ipuclari h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin:0 0 6px; }
.bulmaca-ipuclari h2:not(:first-child) { margin-top:18px; }
.bi-liste { list-style:none; margin:0; padding:0; }
.bi-liste li { border-bottom:1px solid var(--line); }
.bi-liste button { display:flex; gap:8px; width:100%; text-align:left; background:none;
  border:0; padding:8px 6px; cursor:pointer; color:var(--ink-2); font-size:13.5px; line-height:1.45; }
.bi-liste button:hover { background:var(--surface-2); }
/* Seçili ipucu: vurgu renginin kendi tonu zeminden ayrılmıyordu; seçim
   AYRI ama uyumlu bir renge, mora alındı. Mor üç renk şemasında da
   tanımlı ve mavi vurguyla çakışmıyor. Sol kenar çizgisi renk körlüğünde
   de ayırt edilmeyi sağlıyor. */
.bi-liste li.secili button { background:var(--mor-soft); color:var(--ink);
  font-weight:600; box-shadow:inset 3px 0 0 var(--mor); }
.bi-liste li.secili .bi-no { color:var(--mor); }
.bi-liste li.secili .bi-uzunluk { color:var(--ink-2); }
.bi-liste li.dogru .bi-no { color:var(--cevap-dogru-yazi); }
.bi-liste li.yanlis .bi-no { color:var(--cevap-yanlis-yazi); }
.bi-no { flex:none; width:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.bi-metin { flex:1; }
.bi-uzunluk { flex:none; color:var(--ink-3); font-size:12px; }
.bi-dogru { padding:0 6px 8px 2.1rem; font-size:13px; color:var(--ink-2); }
.bi-dogru a { margin-left:8px; }

/* Dar ekran: ızgara tam genişlik, dokunma hedefleri büyür, ipucu listesi
   sayfayı uzatmasın diye kendi içinde kayar. */
@media (max-width: 900px) {
  .bulmaca-izgara { max-width:none; min-width:calc(var(--sutun) * 1.95rem); }
  .bulmaca-eylemler { margin-top:12px; }
  .bulmaca-eylemler .btn { flex:1 1 auto; min-height:44px; }
  .bulmaca-ipuclari { max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px;
    background:var(--surface); }
  .bulmaca-ipuclari h2 { position:sticky; top:0; background:var(--surface);
    padding:4px 0; margin-bottom:4px; z-index:1; }
  .bi-liste button { padding:11px 6px; font-size:14px; }
}

/* ── Gruplama tahtası (sürükle-bırak) ─────────────────────────────────
   Atölye yerleşimi: üstte ilerleme, ortada kategori bölgeleri, altta
   havuz. Renkler jetonlardan gelir ki üç renk şemasında da otursun. */
.grupla-ust { display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.grupla-ilerleme { flex:1; min-width:160px; }

.grupla-kurulum { display:flex; gap:16px; margin-top:14px; }
.grupla-kurulum label { flex:1; display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink-2); }
.grupla-kurulum select { padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); font-size:14px; }

.grupla-bolgeler { display:grid; grid-template-columns:repeat(var(--bolge, 4), minmax(0, 1fr));
  gap:12px; margin-bottom:14px; }
.grupla-bolge { background:var(--surface); border:1px solid var(--line);
  border-top:4px solid var(--accent); border-radius:var(--radius);
  padding:10px 12px; min-height:150px; display:flex; flex-direction:column; gap:8px; }
.grupla-bolge.hedef { outline:2px dashed var(--accent); outline-offset:-4px;
  background:var(--accent-soft); }
.grupla-bolge-baslik { display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; font-size:13px; font-weight:700; color:var(--ink); }
.grupla-sayi { font-size:12px; font-weight:600; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
.grupla-yerlesenler { display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; flex:1; }
.grupla-bos { font-size:12px; color:var(--ink-3); align-self:center; margin:auto; }

.grupla-havuz { margin-top:4px; }
.grupla-havuz-baslik { display:flex; align-items:baseline; gap:12px; margin-bottom:10px;
  flex-wrap:wrap; font-size:14px; }
.grupla-yanlis-mesaj { margin-left:auto; font-size:13px; font-weight:600;
  color:var(--cevap-yanlis-yazi); }
.grupla-cipler { display:flex; flex-wrap:wrap; gap:8px; }

.grupla-cip { background:var(--surface-2); border:1px solid var(--line); border-radius:99px;
  padding:6px 13px; font-size:13px; color:var(--ink); cursor:grab; font-family:inherit; }
.grupla-cip:hover { border-color:var(--accent); }
.grupla-cip:active { cursor:grabbing; }
.grupla-cip.secili { border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Aynı terim ikinci yanlış denemeden sonra kırmızı çerçeve taşır. */
.grupla-cip.hatali { border:2px solid var(--stop);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--stop) 22%, transparent); padding:5px 12px; }
.grupla-cip.yerlesik { cursor:default; font-size:12.5px; padding:4px 10px;
  background:var(--surface); }

.grupla-sure { font-variant-numeric:tabular-nums; }
.grupla-rekor-rozet { margin-left:10px; font-size:13px; font-weight:700; color:var(--on-fill);
  background:var(--ok); border-radius:99px; padding:4px 12px; vertical-align:middle; }
.grupla-rekor-rozet.hafta { background:var(--accent); }
.grupla-liderler { display:flex; gap:28px; flex-wrap:wrap; }
.grupla-liderler > div { flex:1; min-width:240px; }
.grupla-lider-liste { list-style:none; margin:0 0 14px; padding:0; max-width:420px;
  counter-reset:sira; }
.grupla-lider-liste li { display:flex; gap:10px; align-items:baseline; padding:6px 8px;
  border-bottom:1px solid var(--line); counter-increment:sira; }
.grupla-lider-liste li::before { content:counter(sira) "."; width:1.6rem; font-weight:700;
  color:var(--ink-3); font-variant-numeric:tabular-nums; }
.grupla-lider-liste li.sen { background:var(--accent-soft); border-radius:6px; }
.grupla-lider-ad { flex:1; }
.grupla-lider-sure { font-weight:700; font-variant-numeric:tabular-nums; }

.grupla-sonuc { max-width:640px; }

/* ── Video dersler ────────────────────────────────────────────────────
   Oynatıcı + gömülü soru katmanı. Video cue'da JS ile durur; katman
   cevaplanmadan kapanmaz, ileri sarma kilidi de JS tarafında. */
.video-liste { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.video-kart { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink); }
.video-kart:hover { border-color:var(--accent); text-decoration:none; }
.video-kart-ust { display:flex; align-items:center; gap:8px; }
.video-kart-ust b { font-size:15.5px; }
.video-kart-bilgi { display:flex; gap:12px; font-size:13px; flex-wrap:wrap; }
.video-tamam { color:var(--ok); font-weight:600; }
.video-rozet-ucretsiz { background:var(--ok-soft); color:var(--cevap-dogru-yazi); }
.video-rozet-kilit { background:var(--accent-soft); color:var(--accent); }
.video-kart-terimler { display:flex; gap:6px; flex-wrap:wrap; }

.video-sahne { position:relative; background:#000; border-radius:var(--radius);
  overflow:hidden; aspect-ratio:16/9; max-height:70vh; }
.video-sahne video, .video-sahne #tg-video-yt, .video-sahne #tg-video-yt iframe {
  width:100%; height:100%; display:block; }
.video-soru { position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(10, 16, 28, 0.72); padding:18px; }
.video-soru-kart { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; max-width:560px; width:100%;
  max-height:100%; overflow:auto; }
.video-soru-baslik { font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase; }
.video-soru-metin { font-size:16px; font-weight:600; margin:8px 0 14px; }
.video-siklar { display:flex; flex-direction:column; gap:8px; }
.video-dogru { color:var(--cevap-dogru-yazi); font-weight:700; margin:0; }
.video-yanlis { color:var(--cevap-yanlis-yazi); font-weight:600; margin:0; }

/* ── Flash kart kenar şeritleri (5 no'lu tasarım) ─────────────────────
   Sol şerit önceki, sağ şerit sonraki; şeridin TAMAMI tıklanır, ok imi
   soluk durur ve üzerine gelince belirginleşir. Orta alan kartı çevirir. */
.kart-sarici { display:flex; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--surface); }
.kart-sarici .card.kart-cevir { flex:1; border:0; border-radius:0; box-shadow:none; }
.kart-yan { width:56px; border:0; cursor:pointer; display:flex; align-items:center;
  justify-content:center; color:var(--ink-3); background:var(--surface-2); padding:0; }
.kart-yan svg { opacity:.35; transition:opacity .12s; }
.kart-yan:hover svg, .kart-yan:focus-visible svg { opacity:1; }
.kart-yan.sol { border-right:1px solid var(--line); }
.kart-yan.sag { border-left:1px solid var(--line); background:var(--accent-soft);
  color:var(--accent); }
.kart-yan:disabled { cursor:default; }
.kart-yan:disabled svg { opacity:.12; }
.kart-yan:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (max-width: 520px) {
  .kart-yan { width:44px; }
}

/* ── Eşleştirme tahtası (tıkla-eşleştir, Atölye görünümü) ─────────────
   Eşleşen çiftler üstte alfabetik, araları düz çizgi; altta iki sütun. */
.esles-panel { margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
.esles-baslik { font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.1em;
  text-transform:uppercase; }
.esles-cift { display:flex; align-items:center; gap:12px; }
.esles-ek { background:var(--ok-soft); border:1px solid var(--ok); border-radius:99px;
  color:var(--cevap-dogru-yazi); font-size:13px; font-weight:600; padding:6px 14px;
  max-width:44%; }
.esles-cizgi { flex:1; border-top:2px solid var(--ok); }
.esles-kolonlar { display:flex; gap:40px; }
.esles-kolon { flex:1; display:flex; flex-direction:column; gap:8px; }
.esles-kb { font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.1em; }
.esles-oge { background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-size:14px; padding:10px 14px; text-align:left; cursor:pointer;
  font-family:inherit; }
.esles-oge:hover { border-color:var(--accent); }
.esles-oge.secili { border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.esles-oge.hatali { border:2px solid var(--stop);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--stop) 22%, transparent); padding:9px 13px; }
@media (max-width: 700px) {
  .esles-kolonlar { gap:14px; }
}
.grupla-alt-liste { margin:6px 0 14px; padding-left:20px; }
.grupla-alt-liste li { margin-bottom:4px; }

@media (max-width: 900px) {
  .grupla-bolgeler { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grupla-bolgeler { grid-template-columns:minmax(0, 1fr); }
  .grupla-kurulum { flex-direction:column; }
}

/* Giriş: "Beni hatırla" */
.beni-hatirla { display:flex; align-items:center; gap:8px; margin:2px 0 0; font-size:14px; cursor:pointer; user-select:none; }
.beni-hatirla input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.beni-hatirla-not { font-size:12.5px; margin:4px 0 12px; }

/* ============================================================
   Sistem durumu işareti (üst şerit) ve destek sayfaları
   Önem renkleri mevcut jetonlardan: bilgi nötr, bakım vurgu,
   kısmi sorun uyarı, kesinti dur, çözüldü tamam.
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.durum-isareti { position:relative; }
/* Dar ekranda serit tasiyordu: cipin en kucuk icerik genisligi
   daralmayi engelliyor, dil secici viewport disinda kaliyordu.
   min-width:0 ile cip, yazisini kirparak sigiyor. */
.ust-serit .durum-isareti { min-width:0; }
.ust-serit .durum-dugme { min-width:0; max-width:100%; }
.durum-dugme {
  --d-renk:var(--ink-2); --d-zemin:var(--surface-2);
  display:inline-flex; align-items:center; gap:8px; max-width:340px; min-height:34px;
  padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--d-renk) 35%, transparent);
  background:var(--d-zemin); color:var(--d-renk); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.durum-dugme:focus-visible { outline:2px solid var(--d-renk); outline-offset:2px; }
.durum-yazi { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.durum-nokta { width:8px; height:8px; border-radius:4px; background:var(--d-renk); flex-shrink:0; }
.durum-dugme.kesinti, .durum-kart.kesinti { --d-renk:var(--stop); --d-zemin:var(--stop-soft); }
.durum-dugme.kismi, .durum-kart.kismi { --d-renk:var(--warn); --d-zemin:var(--warn-soft); }
.durum-dugme.bakim, .durum-kart.bakim { --d-renk:var(--accent); --d-zemin:var(--accent-soft); }
.durum-dugme.cozuldu, .durum-kart.cozuldu { --d-renk:var(--ok); --d-zemin:var(--ok-soft); }
.durum-dugme.bilgi, .durum-kart.bilgi { --d-renk:var(--ink-2); --d-zemin:var(--surface-2); }

.durum-pencere {
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(380px, calc(100vw - 32px));
  max-height:min(70vh, 560px); overflow-y:auto; padding:14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 32px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:10px;
}
.durum-pencere-ust { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.durum-pencere-ust h2 { margin:0; font-size:16px; }
.durum-kart { padding:12px 14px; border-radius:var(--radius); border:1px solid var(--line); border-left:0; background:var(--surface); box-shadow:inset 3px 0 0 var(--d-renk); }
.durum-kart h3 { margin:6px 0 4px; font-size:15px; }
.durum-kart p { margin:0 0 4px; font-size:13.5px; color:var(--ink-2); }
.durum-kart .durum-alt { font-size:12.5px; color:var(--ink-3); }
.durum-etiketler { display:flex; gap:6px; flex-wrap:wrap; }
.durum-etiket { font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:6px; background:var(--d-zemin); color:var(--d-renk); }
.durum-etiket.soluk { background:var(--surface-2); color:var(--ink-2); }

/* Destek: talep listesi */
.talep-listesi { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:760px; }
.talep-satiri {
  display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none;
}
.talep-satiri:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration:none; }
.talep-satiri.okunmamis { border-color:var(--accent); }
.talep-ust { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.talep-no { color:var(--ink-3); }
.talep-konu { font-size:15.5px; }
.talep-alt { font-size:13px; }
.talep-yeni { font-weight:700; color:var(--accent); }
.talep-durum { font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; }
.talep-durum.buyuk { font-size:13px; padding:5px 12px; }
.talep-durum.durum-open { background:var(--accent-soft); color:var(--accent); }
.talep-durum.durum-inprogress { background:var(--warn-soft); color:var(--warn); }
.talep-durum.durum-waitingforuser { background:var(--stop-soft); color:var(--stop); }
.talep-durum.durum-resolved { background:var(--ok-soft); color:var(--ok); }

/* Destek: form */
.destek-form { max-width:720px; }
.destek-form h1 { margin:0 0 14px; font-size:24px; }
.destek-kategoriler { border:0; padding:0; margin:0 0 14px; }
.destek-kategoriler legend { font-size:13.5px; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.destek-kategori-izgara { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.destek-form textarea, .talep-yanit textarea {
  width:100%; box-sizing:border-box; font:inherit; padding:10px 12px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); resize:vertical;
}
.destek-teknik { margin:6px 0 0 24px; padding:10px 14px; border-radius:var(--radius); background:var(--surface-2); font-size:13px; }
.destek-teknik p { margin:0 0 6px; }
.destek-teknik dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0; }
.destek-teknik dt { color:var(--ink-3); }
.destek-teknik dd { margin:0; overflow-wrap:anywhere; }

/* Destek: yazışma */
.talep-yazisma { list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:760px; }
.talep-yazisma li { padding:12px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); }
.talep-yazisma li.t-ekip { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); margin-left:clamp(0px, 6vw, 48px); }
.talep-yazisma li.t-kisi { margin-right:clamp(0px, 6vw, 48px); }
.talep-yazan { font-size:12.5px; font-weight:700; color:var(--ink-2); }
.talep-yazisma p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.talep-yanit { max-width:760px; }
.talep-yanit-dugmeler { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

@media (max-width:640px) {
  .durum-dugme { max-width:46vw; }
  .durum-pencere { position:fixed; left:16px; right:16px; top:64px; width:auto; }
}

/* ============================================================
   Çalışma odağı seçici (metodolojik içerik / dil) ve dil kartı
   ============================================================ */
.odak-secici { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:4px 0 18px; }
.odak-soru { font-size:13px; font-weight:700; color:var(--ink-2); }
.odak-secenekler { display:flex; gap:4px; padding:4px; border-radius:calc(var(--radius) + 2px); background:var(--surface-2); flex-wrap:wrap; }
.odak-secenek {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:44px;
  padding:7px 14px; border:0; border-radius:var(--radius); background:transparent; color:var(--ink-2);
  font:inherit; text-align:left; cursor:pointer;
}
.odak-secenek .odak-ad { font-size:14px; font-weight:700; }
.odak-secenek .odak-acikla { font-size:12px; color:var(--ink-3); }
.odak-secenek.secili { background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--accent), 0 1px 3px rgba(0,0,0,.1); }
.odak-secenek.secili .odak-ad { color:var(--accent); }
.odak-secenek:focus-visible, .odak-yon button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.odak-yon { display:flex; gap:6px; flex-wrap:wrap; }
.odak-yon button {
  min-height:36px; padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); font:inherit; font-size:13px; cursor:pointer;
}
.odak-yon button.secili { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700; }

.kart-dil-etiket { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.kart-dil-soru { margin-top:10px; font-size:13.5px; }
.kart-dil-tanim { margin-top:12px; font-size:14px; line-height:1.55; max-width:60ch; align-self:center; }
.alistirma-yon { font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-3); margin-bottom:8px; }

@media (max-width:560px) {
  .odak-secenekler { width:100%; }
  .odak-secenek { flex:1 1 0; }
}