/* ============================================================
   DERS KÜTÜPHANESİ — /ders/<slug>/ (2026-10-17 · sablon/ders-sayfa.cjs)
   Kabuk ve malzeme stil.css'in: Almanca girişinin (/tr/almanca/) aynısı.
   Bu dosyada yalnız Almanca girişinde OLMAYAN üç şey var:
     ① basamak sayısı 4 değilse kapı ızgarası (3 · 5 · 6 basamak)
     ② bağı olmayan öğenin sakin hâli (.dk-duz) — konu yazılıp veriye
        `yol` eklenince öğe bağa döner, bu sınıf kendiliğinden düşer
     ③ «Nereden başlarım?» yerleşmesi (.dk-yer) — Almanca'da «Kaldığın
        yer»in durduğu yerde
   Ham değer yok: renk, yarıçap, süre stil.css :root'undan.
   ============================================================ */

/* ① kapı ızgarası — stil.css 4 sütun sabit; 3/5/6 basamaklı ders için */
.kp-izgara.dk-3 { grid-template-columns: repeat(3, 1fr); }
.kp-izgara.dk-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kp-izgara.dk-3, .kp-izgara.dk-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kp-izgara.dk-3, .kp-izgara.dk-5 { grid-template-columns: 1fr; } }
/* Almanca kartında ölçü satırı kısa («236 tablo · 757 alıştırma»); burada «Seviye sonu sınavı»
   gibi uzun olabiliyor → sembolün altına girmesin. Çipler de konu adı kadar uzun → kaydırılır. */
.dk .kp-olcu { max-width: calc(100% - 118px); }
.dk .kp-cip { white-space: normal; max-width: 100%; }
.kp-izgara.dk-5 .kp-sembol { width: 84px; height: 68px; }
.kp-izgara.dk-5 .kp-tepe, .kp-izgara.dk-5 .kp-ad, .kp-izgara.dk-5 .kp-ne, .kp-izgara.dk-5 .kp-olcu { max-width: calc(100% - 88px); }
html.js .bel.gorundu .kp-izgara > .kp:nth-child(5) { animation-delay: 0.24s; }
html.js .bel.gorundu .kp-izgara > .kp:nth-child(6) { animation-delay: 0.30s; }

/* ② bağsız öğe: tıklanacakmış gibi kalkmaz, kaymaz, renk değiştirmez */
.dk-duz { cursor: default; }
.gk-k.dk-duz:hover { background: none; padding-left: 6px; }
.gk-k.dk-duz:hover .gk-ad { color: inherit; }
.kt.dk-duz:hover { transform: none; }
.akordeon-konu.dk-duz:hover { color: var(--murekkep-2); }

/* Basamağın sonundaki ölçüm satırı (dizin panelinin dibi) */
.dk-son { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: var(--yz-mikro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--murekkep-2); }
.dk-son svg { width: 24px; height: 24px; padding: 5px; flex: none; border-radius: 50%; background: var(--asit); color: var(--murekkep); }

/* ③ yerleşme — Babbel «ne kadar biliyorsun?» satırları + koyu sonuç levhası */
.dk-yer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 18px; align-items: start; margin-top: 22px; }
.dk-yer-liste { display: grid; gap: 10px; }
.dk-yer-soru { margin: 0 0 4px; font-weight: 600; color: var(--murekkep); }
.dk-sec {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
  font: inherit; color: var(--murekkep);
  background: var(--isik); border: 1px solid var(--cizgi); border-radius: var(--r-plaka);
  cursor: pointer;
  transition: border-color var(--gecis), background-color var(--gecis), transform var(--gecis);
}
.dk-sec:hover { border-color: var(--murekkep-2); }
.dk-sec:active { transform: scale(0.99); }
.dk-sec:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 2px; }
.dk-sec[aria-pressed='true'] { background: var(--kagit-3); border-color: var(--murekkep); }
.dk-sec-kod { min-width: 44px; height: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r-plaka); background: var(--kagit-3); font-size: var(--yz-mikro); transition: background-color var(--gecis); }
.dk-sec[aria-pressed='true'] .dk-sec-kod { background: var(--asit); }
.dk-sec-yazi b { display: block; font-weight: 600; }
.dk-sec-yazi small { display: block; margin-top: 2px; font-size: var(--yz-kucuk); line-height: 1.4; color: var(--murekkep-2); }
.dk-sec-tik { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--cizgi); transition: background-color var(--gecis), border-color var(--gecis); }
.dk-sec-tik svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--gecis); }
.dk-sec[aria-pressed='true'] .dk-sec-tik { background: var(--asit); border-color: var(--murekkep); }
.dk-sec[aria-pressed='true'] .dk-sec-tik svg { opacity: 1; }
html:not(.js) .dk-sec-tik { display: none; }

.dk-yer-sonuc {
  position: sticky; top: 120px; display: grid; gap: 8px; justify-items: start;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--r-dev);
  background: var(--alan-2); color: var(--alan-2-metin);
}
.dk-yer-et { font-size: var(--yz-mikro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--alan-2-metin); }
.dk-yer-ad { font-size: var(--yz-h2); font-weight: 700; letter-spacing: var(--ls-bolum); line-height: 1.15; }
.dk-yer-konu { margin: 0 0 10px; min-height: 1.5em; color: var(--alan-2-metin); }
.dk-yer-test { font-size: var(--yz-kucuk); color: var(--alan-2-metin); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .dk-yer { grid-template-columns: 1fr; }
  .dk-yer-sonuc { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-sec, .dk-sec-kod, .dk-sec-tik, .dk-sec-tik svg { transition: none; }
  .dk-sec:active { transform: none; }
}