/* ═══════════════════════════════════════════════════════════════════════
   KİTAPLIK görünümü (9 Ağu 2026)

   Ayrı dosya + uzun ömürlü önbellek: adres sonundaki ?v=… damgası deploy'da
   otomatik güncelleniyor (scripts/frontend-surum-damgala.mjs → HEDEFLER).
   Damga basılmadan içerik değişemez — "öğrencide eski dosya kaldı" tuzağı
   kapalı.

   Renk kimliği: kitap ALTINDIR (Düğüm ve Sıra / mühür ailesi). Kadranın
   turkuazı çalışmanın rengi; kitap onun yanında sessiz durur, yarışmaz.

   ✍️ YAZI ÖLÇÜSÜ — ÜÇ AĞIRLIK, BAŞKASI YOK (6 Eyl 2026, maketle hizalandı):
     · 300 → gövde, açıklama, düğme yazısı, kart adı   (`--yz-govde`)
     · 400 → seçili durum (grup anahtarı, ders çipi, seçenek)
     · 500 → vurgu ve ad: başlık, `<b>`, ana düğme      (`--yz-baslik`)
   🔴 600 ve 700 YASAK. Genel defterdeki `button` kuralı 700 + 1 px harf
   aralığı dayatıyor; dosyanın sonundaki `:where()` bloğu bu odada onu
   susturur. Yeni bir kural yazarken ağırlığı yukarıdaki üç değerden seç —
   maket (`_docs/kitaplik-maket-5eyl26.html`) bunun dışına çıkmaz.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ktp-altin: #d4af6a;
    --ktp-altin-sonuk: #8a7442;
    --ktp-altin-yazi: #e8d5a8;
}

/* ══ KAYNAK HAPLARI — kayıt kartının çalışma satırında (9 Ağu · 4 Eyl) ══
   Kaynak · sayfa ayracı · "konu bitti" ayrı ayrı üç kutuydu ve kaydet ekranı
   kalabalıklaşmıştı; üçü yan yana birer hap oldu ve her biri kendi panelini
   AŞAĞIDA açtı. 4 Eyl (ADIM 3): "konu bitti" ve gündem saati KART BAŞLIĞINA
   taşındı (görünümleri artık .pk-kb / .pk-gnd); burada kalan iki hap kartın
   ÇALIŞMA SATIRINDA, parçalı kayıttaki kaynak pilinin durduğu yerde. */
#kayit-serit { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
#kayit-serit[hidden] { display: none; }
#kayit-serit > button {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%; padding: 8px 13px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1; font-family: inherit; font-size: 0.8em; font-weight: 400;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#kayit-serit > button[hidden] { display: none; }
#kayit-serit > button:active { transform: scale(0.97); }
.ktp-cip-yz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kaynak rozeti altın ailesinden; kitap seçilmemişse sönük ve kesik çizgili. */
#kayit-kaynak-satir {
    background: rgba(212, 175, 106, 0.1); border-color: rgba(212, 175, 106, 0.3);
    color: var(--ktp-altin-yazi);
}
#kayit-kaynak-satir.bos {
    background: rgba(255, 255, 255, 0.03); border-style: dashed;
    border-color: rgba(255, 255, 255, 0.16); color: #94a3b8;
}
#kayit-kaynak-satir .ktp-ikon { display: flex; flex: 0 0 auto; }
/* Ayraç rozeti: sayfa yazılınca dolu görünür. */
#kayit-ayrac-cip.dolu {
    background: rgba(79, 172, 254, 0.12); border-color: rgba(79, 172, 254, 0.4); color: #bcd9f5;
}
/* 🔴 Gündem saati ve "konu bitti" ARTIK BURADA DEĞİL (4 Eyl · ADIM 3):
   ikisi de kart başlığına taşındı, görünümleri .pk-gnd ve .pk-kb
   (kronometre.css). Aynı işaretin iki dosyada iki biçimi olursa bir gün
   ayrışır — o yüzden buradaki kopyalar söküldü. */

/* Rozetlerin ORTAK genişleme alanı — aynı anda yalnız biri açık. */
#kayit-genisleme {
    border-radius: 12px; padding: 10px 12px; margin: -2px 0 10px;
    background: rgba(79, 172, 254, 0.06); border: 1px solid rgba(79, 172, 254, 0.22);
    animation: ktp-ac 0.18s ease;
}
#kayit-genisleme[hidden] { display: none; }
@keyframes ktp-ac { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #kayit-genisleme { animation: none; } }

/* ── SEÇİM EKRANINDAKİ SATIR ────────────────────────────────────────────
   Yeni bir kutu değil, bir cümle. "Tek soru, tek kart" düzeni bozulmasın
   diye kart yüksekliği bilerek küçük ve kenarlığı ince. */
#kaynak-satir {
    display: flex; align-items: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; margin: -2px 0 12px;
    border-radius: 12px; cursor: pointer;
    background: rgba(212, 175, 106, 0.07);
    border: 1px solid rgba(212, 175, 106, 0.22);
    color: var(--ktp-altin-yazi);
    font-family: inherit; font-size: 0.85em; text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
#kaynak-satir:hover { background: rgba(212, 175, 106, 0.12); }
#kaynak-satir[hidden] { display: none; }

#kaynak-satir.bos {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed; border-color: rgba(255, 255, 255, 0.16);
    color: #94a3b8;
}
#kaynak-satir .ktp-ikon { display: flex; flex: 0 0 auto; opacity: 0.9; }
#kaynak-satir .ktp-ad {
    flex: 1; min-width: 0; font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#kaynak-satir .ktp-ad i { font-style: normal; opacity: 0.6; font-weight: 400; }
.ktp-ayrac-mini { flex: 0 0 auto; font-size: 0.9em; color: var(--ktp-altin-sonuk); }
#kaynak-satir .ktp-degistir {
    flex: 0 0 auto; color: #4a7fb5; font-size: 0.92em; font-weight: 500;
}

/* ÇALIŞIRKEN: satır bir BİLGİ, bir düğme değil. Bir blok = bir kitap;
   kitap ancak kayıt ekranında değişir (9 Ağu kararı). */
#kaynak-satir.kilitli {
    cursor: default; background: transparent; border-color: transparent;
    opacity: 0.75; justify-content: center; margin-top: 6px;
}
#kaynak-satir.kilitli .ktp-ad { flex: 0 1 auto; }

/* ── ALTTAN AÇILAN YAPRAK ─────────────────────────────────────────────── */
#kitap-yaprak {
    position: fixed; left: 10px; right: 10px; bottom: 8px; z-index: 10050;
    max-width: 460px; margin: 0 auto;
    /* 🔴 TAM OPAK (7 Eyl, gezinti bulgusu B14): %97'lik zeminden arkadaki
       KAYDET düğmesi hayalet gibi sızıyordu. Yaprağın kendi yorumu zaten
       "ilk kareden itibaren SAĞIR olmalı" diyordu; kalan %3 o sözü
       tutmuyordu. Saydamlık burada süs değil, sızıntı. */
    background: #111a2a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px; padding: 14px 13px 12px;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
    /* 🔴 SOLARAK AÇILMIYOR — KAYARAK AÇILIYOR (4 Eyl gecesi, kullanıcı
       ekran görüntüsü). ESKİDEN opaklık da 0'dan 1'e gidiyordu: yaprak
       yarı saydamken ARKASINDAKİ PERDENİN yazıları içinden okunuyordu —
       zorluk çipleri, "Düzeltmeyi kaydet", "Kaydı sil" hepsi yaprağın
       üstüne binmiş görünüyordu. Kullanıcının cümlesi: "çıkan sayfa
       altındaki yazıları gösteriyor, kötü bir görüntü var."
       🔑 Yaprak ilk kareden itibaren SAĞIR olmalı: yalnız KAYAR, solmaz.
       Böylece iki ekran hiçbir anda üst üste görünmez. */
    transform: translateY(22px); opacity: 0;
    transition: transform 0.2s cubic-bezier(.22,.8,.28,1);
    max-height: 78vh; overflow-y: auto;
}
#kitap-yaprak.acik { transform: translateY(0); opacity: 1; }
/* Kayıt perdesinden açılınca perdenin ÜSTÜNE çıkar (perde 10060). Sınıf
   takılmazsa yaprak ARKADA kalır ve dokunuş ölü görünür (3 Eyl tuzağı). */
#kitap-yaprak.ustte { z-index: 10070; }
#kitap-yaprak[hidden] { display: none; }
#kitap-yaprak .ktp-tut {
    width: 36px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.2); margin: 0 auto 12px;
}
#kitap-yaprak h4 { margin: 0 0 4px; font-size: 1em; font-weight: 500; color: #e8eefb; }
.ktp-alt-yz { font-size: 0.79em; color: #5f6d86; margin-bottom: 12px; line-height: 1.5; }

.ktp-sec {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 13px; margin-bottom: 8px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e9f6; font-family: inherit; text-align: left; cursor: pointer;
}
.ktp-sec.secili { border-color: rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.09); }
.ktp-sec-bilgi { flex: 1; min-width: 0; }
.ktp-sec-ad {
    display: block; font-size: 0.9em; font-weight: 300; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ktp-sec-alt { display: block; font-size: 0.73em; color: #64748b; margin-top: 2px; }
/* 🔑 YILDIZ DA BİR DÜĞME İÇİNDE DÜĞMEDİR (7 Eyl, gezinti raporu 9. madde).
   Ölçüldü: 22x25 — ürünün en küçük hedeflerinden biri, üstelik satırın
   kendisi de bir düğme (kitabı seçer). Kenarına dokunan öğrenci yıldızlamak
   yerine kitabı seçip yaprağı kapatıyordu.
   Görünmez pay 10 → 42x45 dokunma; `z-index` şart (pay satırın yazısının
   altında kalıyordu). Görünen yıldız büyümez. */
.ktp-yildiz { flex: 0 0 auto; font-size: 1em; color: var(--ktp-altin); padding: 2px 4px; position: relative; }
.ktp-yildiz::after { content: ''; position: absolute; inset: -10px; z-index: 1; }
.ktp-yildiz.pasif { color: rgba(255, 255, 255, 0.18); }

.ktp-vazgec, .ktp-kutuphane {
    display: block; width: 100%; margin-top: 6px; padding: 9px;
    border-radius: 12px; font-family: inherit; font-size: 0.83em; cursor: pointer;
    background: transparent; color: #94a3b8;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}
/* 🔑 "+ yeni kitap ekle" ile "＋ İlerleme ekle" MAKETTE AYNI DÜĞMEDİR
   (.alt-dug). İkisi de bir kapı açar; ikisi de altın kesik çizgi. Uygulamada
   biri gri biri altındı — aynı iş iki kılıkta görünüyordu. */
.ktp-yeni {
    display: block; width: 100%; margin-top: 12px; padding: 12px;
    border-radius: 14px; font-family: inherit; font-size: 0.87em; font-weight: 300;
    cursor: pointer; text-align: center;
    border: 1px dashed rgba(212, 175, 106, 0.35);
    background: rgba(212, 175, 106, 0.05); color: var(--ktp-altin-yazi);
}
.ktp-yeni:active { transform: scale(0.99); }
.ktp-kutuphane { border: none; color: #4a7fb5; margin-top: 10px; }
.ktp-vazgec { border-style: solid; border-color: rgba(255, 255, 255, 0.1); }
/* ═══ "KAYNAKSIZ ÇALIŞ" (3 Eyl akşamı, kullanıcı) ══════════════════════
   Kesik çizgili bir kutuydu ve altındaki iki düğmeyle aynı görünüyordu —
   "ekle" ile "vazgeç" aynı kılıkta duruyordu. Öbürleri kalkınca bu tek
   başına kaldı: artık listenin kapanışı, bir seçenek değil bir GERİ ALMA.
   Sessiz bir hap: başında ince bir ×, ortalanmış, çerçevesi kısık.
   Aynı biçim iki kipte de geçerli (çalışırken ve kayıtta). */
.ktp-kaynaksiz {
    display: block; width: 100%; text-align: left;
    margin-top: 8px; padding: 11px 13px; border-radius: 14px;
    font-family: inherit; font-size: 0.88em; font-weight: 300; cursor: pointer;
    background: rgba(212, 175, 106, 0.07); color: var(--ktp-altin-yazi);
    border: 1px solid rgba(212, 175, 106, 0.3);
    transition: background .18s ease, border-color .18s ease;
}
.ktp-kaynaksiz:hover { background: rgba(212, 175, 106, 0.11); border-color: rgba(212, 175, 106, 0.45); }
/* ＋ bir KUTUDUR (maket `.y-ekle .arti`): kapının işareti, süsü değil. */
.ktp-kaynaksiz .kk-carpi {
    display: inline-block; width: 19px; height: 19px; line-height: 17px;
    text-align: center; border-radius: 6px; font-size: 0.9em; opacity: 1;
    border: 1px solid rgba(212, 175, 106, 0.45); margin-right: 9px;
}
/* Ne olacağını SÖYLEYEN alt satır (4 Eyl): üçüncü basamak bir kapı, yazı da
   arkasında ne olduğunu söyler ("listede olmayan kendi kitabın"). */
/* Alt satır: kapının arkasında ne olduğunu söyler (maket `.y-ekle .not`). */
.ktp-kaynaksiz .kk-not {
    display: block; font-size: 0.72em; color: var(--ktp-altin-sonuk);
    margin: 2px 0 0 28px;
}

/* ══════════════════════════════════════════════════════════════════════
   🎛️ KAYNAK SATIRI — TEK ÇİZİCİNİN ÖLÇÜSÜ (4 Eylül 2026)

   Dört yüzey (kronometre koşarken · kaydet ekranı · elle giriş · düzeltme)
   bu satırı `Kitaplik.kaynakSatiri()` ile çizer. Ölçü BURADA durur, çağıran
   ekranların CSS'inde değil: rengini değiştirmek = tek satır, dört ekran.
   Devraldığı iki eski aile: kronometrenin `.dz-kaynak-*` satırı ve parçalı
   listenin `.pk-pil` hapı — ikisi de aynı işi ayrı ölçülerle yapıyordu.
   ══════════════════════════════════════════════════════════════════════ */
.ks-sat {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 9px 10px; border-radius: 11px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 0.82em;
    color: #cbd5e1; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.ks-sat:active { transform: scale(.99); }
/* Çevrilecek bir şey yoksa düğme DEĞİL, yazı: dokunup hiçbir şey olmaması
   panjur tuzağıdır. */
.ks-sat.tek { cursor: default; background: rgba(255, 255, 255, 0.025); }
.ks-sat.tek:active { transform: none; }
.ks-ikon { flex: none; display: inline-flex; align-items: center; width: 16px; height: 16px; opacity: .85; }
.ks-ikon svg { width: 100%; height: 100%; }
.ks-ad { flex: 1; min-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-eylem { flex: none; white-space: nowrap; font-size: 0.82em; color: #5d6b86; }
/* Boş hâne: kesik çerçeve "burası doldurulabilir" der. */
.ks-sat.bos { border-style: dashed; color: #8b9bb4; }
.ks-sat.bos .ks-ikon { opacity: .55; }

/* Parçalı kaydet ekranının kaynak yuvası: tür satırının ALTINDA, tam genişlik.
   (7 Eyl'e kadar tür adının sağında dar bir hap olarak duruyordu.) */
.ks-yuva { display: block; margin: 6px 0 0; }

/* 🗑️ HAP BİÇİMİ SÖKÜLDÜ (7 Eylül 2026, kullanıcı kararı).
   Parçalı kaydet ekranındaki dar hap 34 px'ti ve yazıya 0 px kalıyordu:
   boş hâlde "kaynak?" hiç görünmüyor, dolu hâlde kitabın yalnız ilk kelimesi
   sığıyordu. Kaynak artık HER yüzeyde tam satır — ölçü elle giriş ekranı.
   Geri gelmeyecek: iki biçim bir gün ayrışır. */
/* ═══ DIŞ KAYNAK (4 Eyl 2026, kullanıcı kararı) ════════════════════════
   Dershane föyü · okul fotokopisi · özel ders yaprağı. Kitap kartıyla aynı
   iskelet ama TEZGÂHI YOK: dış kaynağın ölçüsü yoktur, boş bir tezgâh
   "henüz dokunulmadı" der ve yalan söyler. Yerini soldaki ince altın çizgi
   alıyor — sabit satır olduğunu söylüyor, ilerleme iddia etmiyor. */
.ktp-dis {
    display: block; width: 100%; text-align: left;
    padding: 11px 13px 11px 14px; margin-bottom: 8px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 🔒 Soldaki ince altın çizgi BİLEREK duruyor (4 Eyl kararı): dış
       kaynağın tezgâhı yoktur, boş bir tezgâh "hiç dokunulmadı" der ve
       yalan söyler. Maket burada kesik çerçeve çiziyordu; ölçüsü aynı,
       işareti farklı — fark bilerek. */
    border-left: 2px solid rgba(212, 175, 106, 0.42);
    color: #e2e8f0; font-family: inherit; cursor: pointer;
}
.ktp-dis:hover { background: rgba(255, 255, 255, 0.06); }
/* Deneme yaprağında seçili durabilir: kategori seçilir ama yaprak kapanmaz,
   çünkü denemenin ADI hâlâ sorulacak. Kaynak kartıyla aynı işaret. */
/* ═══ SEÇİLİ VARSA ÖTEKİLER SÖNÜK (4 Eyl gecesi, kullanıcı isteği) ═════
   Göz doğru satıra gitsin. 🔒 Sönük = SEÇİLEMEZ DEĞİL: hepsi dokunulabilir
   kalır ve dokununca tam parlaklığa döner (görünen her şey dokunulabilir). */
#kitap-yaprak.secim-var .ktp-sec:not(.secili),
#kitap-yaprak.secim-var .ktp-dis:not(.secili) { opacity: .45; }
#kitap-yaprak.secim-var .ktp-sec:not(.secili):hover,
#kitap-yaprak.secim-var .ktp-dis:not(.secili):hover { opacity: 1; }

.ktp-dis.secili {
    border-color: rgba(212, 175, 106, 0.45);
    border-left-color: rgba(212, 175, 106, 0.75);
    background: rgba(212, 175, 106, 0.09);
}
.ktp-dis { position: relative; }
.ktp-dis-ad { display: block; font-size: 0.88em; font-weight: 400; line-height: 1.3;
    padding-right: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* İkinci kapı: kategoriyi çevirir. Yazı DOKUNUNCA NE OLACAĞINI söyler.
   Hatırlanan kaynak yoksa hiç çizilmez — ölü düğme olmaz. */
.ktp-dis-alt { display: block; font-size: 0.73em; color: #64748b; margin-top: 2px;
    padding-right: 62px; }

/* İkinci kademe: "nereden geldi?" Beş kapalı cevap, hepsi eşit ağırlıkta —
   biri öne çıkarsa öğrenci onu seçer, kategorizasyon yamulur. */
.ktp-dis-kat {
    display: block; width: 100%; text-align: left;
    padding: 11px 12px; margin-bottom: 7px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0; font-family: inherit; font-size: 0.88em; font-weight: 400;
    cursor: pointer;
}
.ktp-dis-kat:hover { background: rgba(255, 255, 255, 0.07); }
.ktp-dis-kat[disabled] { opacity: .5; cursor: default; }
.ktp-dis-geri {
    display: block; width: 100%; margin-top: 4px; padding: 9px;
    border-radius: 12px; border: none; background: transparent;
    color: #64748b; font-family: inherit; font-size: 0.8em; cursor: pointer;
}
.ktp-dis-geri:hover { color: #94a3b8; }

.ktp-bos {
    font-size: 0.82em; color: #5f6d86; line-height: 1.55;
    padding: 10px 2px 12px;
}

/* ── KAYIT EKRANINDAKİ AYRAÇ ──────────────────────────────────────────── */
#kayit-ayrac {
    border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
    background: rgba(79, 172, 254, 0.07);
    border: 1px solid rgba(79, 172, 254, 0.3);
}
#kayit-ayrac[hidden] { display: none; }
/* 🗑️ AYRAÇ PANELİNİN ÖLÇÜLERİ SÖKÜLDÜ (8 Eyl): panel öğrencinin karşısına
   hiç çıkmıyordu ve sayfa artık kayıt kartının kendi satırında soruluyor. */

/* 🔴 SAYFA SATIRININ KENDİ BİÇİMİ SÖKÜLDÜ (4 Eyl · ADIM 3).
   Satır, kayıt kartının içinde kendi dilini konuşuyordu: etiketler kutuların
   ÜSTÜNDE, büyük harf, üç sütunlu ayrı bir ızgara. Kardeşleri ("D / Y / B",
   "Zorluk") sol etiket · sağ denetim düzenindeydi — aynı kartta iki dil.
   Artık satır `pk-dyb pk-sayfa` olarak çiziliyor ve biçimi kartın kendi
   defterinden (kronometre.css) geliyor. İki dosyada iki biçim tutmuyoruz:
   bir gün ayrışır ve kimse fark etmez. */

/* AÇIK CEPHE (1 Eyl) — "nereden devam ettin?". Yalnız kitapta İKİ açık uç
   varsa çizilir; tek uçta sol kutu kendiliğinden dolar ve bu satır hiç
   doğmaz. Düğmeler dokunulabilir görünür (panjur tuzağı yok). */
.ktp-cephe-sor { font-size: 0.76em; color: #94a3b8; margin-top: 8px; }
.ktp-cepheler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* Sayılar kartının içinde dar bir alanda duruyorlar: üç çip tek satıra
   sığsın diye küçüldüler (3 Eyl provası — "başka" alta kayıyordu). */
.ktp-cephe {
    font-size: 0.75em; font-weight: 400; padding: 4px 9px; border-radius: 999px;
    background: rgba(212, 175, 106, 0.1); border: 1px solid rgba(212, 175, 106, 0.3);
    color: var(--ktp-altin-yazi); font-family: inherit; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ktp-cephe.bos { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: #94a3b8; }
.ktp-cephe.secili { background: rgba(212, 175, 106, 0.24); border-color: rgba(212, 175, 106, 0.55); }

/* İki kutulu satır TEK SATIRDA kalmalı: kaydet ekranı zaten kalabalık ve
   sarınca "bu kitapta sorma" tek başına bir satır yiyordu (1 Eyl provası).
   Kutular daraldı, düğme küçüldü, boşluk kısaldı. Sığmazsa yine sarar —
   taşmaktansa sarsın. */
.ktp-ayrac-satir input { width: 62px; padding: 0 8px; }
/* "bu kitapta sorma" iki kutulu satıra sığmıyor (1 Eyl provasında ölçüldü:
   ~5px taşıyor). Kazara sarmasındansa BİLEREK kendi satırında dursun —
   sağa yaslı, sessiz, dokunulabilir. */
.ktp-ayrac-satir button { font-size: 0.72em; flex: 0 0 100%; text-align: right; margin-top: 1px; }
.ktp-ok { color: #64748b; font-size: 0.9em; }

/* ── KİTAPLIĞIM ODASI ─────────────────────────────────────────────────── */

/* 🗑️ `.ktp-cip` (özet şeridinin sayı çipi) SÖKÜLDÜ — şerit 5 Eyl'de vitrinden
   kalkmıştı, biçimi burada kalmıştı. Yaşayan `.ktp-cip-yz` kaynak hapının
   yazısıdır, akrabası değil. */

/* Yaprağın içindeki ikinci başlık: "Daha önce yazdıkların" (4 Eyl).
   Bölüm başlığıyla aynı dil, yalnız üst boşluğu dar — yaprak kısa. */
.ktp-bolum {
    font-size: 0.68em; color: #5f6d86; letter-spacing: 0.14em;
    text-transform: uppercase; margin: 16px 0 8px;
}
.ktp-kart {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px; margin-bottom: 9px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0; font-family: inherit; text-align: left; cursor: pointer;
}
.ktp-kart.rafta { opacity: 0.5; }
/* "henüz başlamadın" sönük durur — altın rakamla aynı sesi çıkarmaz (20 Ağu). */
.ktp-sec-alt .sonuk { color: #64748b; font-weight: 400; }
/* İnce çubuk: yalnız başlanmış kaynakta çizilir, boş çubuk göstermeyiz. */
.ktp-kart-cubuk { display: block; height: 3px; border-radius: 2px; margin-top: 5px;
    background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ktp-kart-cubuk i { display: block; height: 100%; border-radius: 2px; background: var(--ktp-altin); }

/* Terk edilmiş kitap: EKRANDA kalır, bot söylemez (9 Ağu kararı).
   Dil suçlamaz — "kalsın mı, rafa mı kaldıralım?" */
.ktp-uyari {
    font-size: 0.79em; line-height: 1.5; padding: 10px 12px; margin: 4px 0 10px;
    border-radius: 12px; color: #ffce5c;
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25);
}
.ktp-uyari b { color: #ffe0a0; }
.ktp-uyari button {
    display: block; margin-top: 8px; padding: 6px 12px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0; font-family: inherit; font-size: 0.95em; cursor: pointer;
}

/* ── KİTAP DETAYI ─────────────────────────────────────────────────────── */
/* Dokunulmamış bölgeler: sayı bitmiş sanılmasın diye onun HEMEN yanında.
   Suçlama değil harita — sessiz gri, kırmızı yok (oda dili). */
.ktp-bosluk-yz { font-size: 0.72em; color: #64748b; margin-top: 5px; text-align: center; }

.ktp-olcu { display: flex; gap: 8px; margin-bottom: 14px; }
.ktp-olcu div {
    flex: 1; text-align: center; padding: 9px 4px; border-radius: 13px;
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Sayı ALTIN DEĞİL, beyaz (maket ölçüsü): altın kitabın ilerlemesini söyler
   ve zaten alttaki çubukta konuşuyor. Üç kutu bir KÜNYEDİR, vurgu değil. */
.ktp-olcu b { display: block; font-size: 1.05em; font-weight: 500; color: #e6ecf7; }
.ktp-olcu span { display: block; font-size: 0.63em; letter-spacing: 0.1em; color: #5f6d86; margin-top: 2px; }


/* ═══ TOPLAM SAYFA YERİNDE (3 Eyl gecesi) ═══════════════════════════════
   Kayıt perdesindeki prosedürün aynısı, kaydet ekranında. Tek bir sayı için
   öğrenci başka ekrana gönderilmez. 🔒 KIRMIZI YOK — eksik bir ölçüdür. */
/* ═══ BİTİŞ ÇİZGİSİ (3 Eylül 2026) ═══════════════════════════════════════
   Tahmin bir paragraftı; artık bir ÇİZGİ. Tezgâh benzetmesinin tek satırlık
   hâli: dokunmuş kısım altın, kalan teller soluk. Sağ uçta bitiş tarihi —
   çizginin sonu zaten "bitiş" demek, tarihin evi orası.
   🔒 Kırmızı yok. Yüzde YAZILMAZ (oranı çubuk söyler). Ölçü satırında tarih
   TEKRARLANMAZ — "5,5 hafta" ile "11 Ekim" aynı sayının iki dilidir. */
.ktp-bitis {
    padding: 13px 14px 11px; margin-bottom: 14px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(212, 175, 106, 0.07), rgba(212, 175, 106, 0.02));
    border: 1px solid rgba(212, 175, 106, 0.25);
}
/* 🔴 BAŞLIK BÜYÜK HARF DEĞİL (6 Eyl, kullanıcı ekran görüntüsü). "BİTİŞE
   DOĞRU" bir bölüm etiketi gibi duruyordu; makette bu bir BAŞLIK ve
   kitabın adıyla aynı dilde konuşuyor: "Bitişe doğru". */
.ktp-bitis-bas {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
}
.ktp-bitis-bas b { margin-right: auto; font-size: 0.92em; color: var(--ktp-altin-yazi); font-weight: 500; }

/* Çubuk + uç etiketi aynı hatta. Etiket daralmaz, çubuk esner. */
.ktp-bitis-hat { display: flex; align-items: center; gap: 9px; }
.ktp-bitis-cubuk {
    position: relative; flex: 1; min-width: 0; height: 7px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.ktp-bitis-cubuk i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--ktp-altin-sonuk), var(--ktp-altin));
}
/* Uç: bitiş çizgisinin tarihi. Altın DEĞİL — altın "yapılan"ın rengi;
   tarih henüz yapılmamış bir şeydir, o yüzden sakin mavi. */
.ktp-bitis-uc {
    flex: none; font-size: 0.74em; font-weight: 400; color: #bcd9f5;
    white-space: nowrap;
}
.ktp-bitis-kalan {
    margin-top: 7px; font-size: 0.76em; line-height: 1.45; color: #7b8ba3;
}
.ktp-bitis-kalan b { color: #94a3b8; font-weight: 500; }

/* 🗑️ ÜÇ KUTU AİLESİ KALKTI (6 Eyl): blok içinde ikinci bir "ölçü kutusu"
   düzeni doğuruyordu, oysa sayfanın üstünde zaten üç ölçü kutusu var.
   Maket burada tek gramer kullanır: solda ne, sağda kaç. */

/* Kıyas satırı artık DOKUNULABİLİR: aynı dersin öbür kitabına oradan geçilir. */
.ktp-cizgi {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px;
    margin-bottom: 2px; border-radius: 10px; cursor: pointer;
    background: none; border: 1px solid transparent;
    color: #94a3b8; font-family: inherit; font-size: 0.78em; text-align: left;
}
.ktp-cizgi[data-gecis]:hover { background: rgba(255, 255, 255, 0.04); }
.ktp-cizgi.bu { cursor: default; border-color: rgba(212, 175, 106, 0.25); color: var(--ktp-altin-yazi); }
.ktp-cizgi > span:first-child {
    flex: 0 0 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 🗑️ `.ktp-hizli`nin BİRİNCİ tanımı söküldü: eski ayraç yaprağına aitti,
   o yaprak kalktı. Canlı tanım aşağıda (aralık kurucusunun hızlı dolgusu) —
   aynı ada iki tanım bırakmak, sonrakinin sessizce kazanması demektir. */
.ktp-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ktp-bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ktp-altin-sonuk), var(--ktp-altin));
}
.ktp-bar-yz { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.ktp-dugmeler { display: flex; gap: 9px; margin-top: 12px; }
.ktp-dugmeler button {
    flex: 1; padding: 11px 0; border-radius: 13px; cursor: pointer;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9aabc4; font-family: inherit; font-size: 0.83em; font-weight: 300;
}

/* ── FORM ─────────────────────────────────────────────────────────────── */
.ktp-alan { margin-bottom: 10px; }
.ktp-alan label {
    display: block; font-size: 0.68em; color: #5f6d86;
    margin-bottom: 6px; letter-spacing: 0.13em; text-transform: uppercase;
}
.ktp-alan label span { text-transform: none; letter-spacing: 0; color: #4d5a70; }
.ktp-alan input {
    width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px; margin: 0;
    border-radius: 12px; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e6ecf7; font-family: inherit; font-size: 0.92em;
}
/* Ders SEÇİMİ (elle yazma değil): öğrencinin kendi alanının dersleri.
   Görünüş yazı kutusuyla aynı tutuldu — form tek dilden konuşsun; tek fark
   sağdaki ok. */
/* Açılan listeyi tarayıcı kendi çiziyor: koyu zeminde okunur kalsın. */

.ktp-ikili { display: flex; gap: 9px; }
.ktp-ikili .ktp-alan { flex: 1; }
.ktp-secenekler { display: flex; gap: 7px; }
.ktp-secenek {
    flex: 1; padding: 10px 0; border-radius: 12px; cursor: pointer;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9aabc4; font-family: inherit; font-size: 0.83em;
}
.ktp-secenek.aktif {
    background: rgba(212, 175, 106, 0.12); border-color: rgba(212, 175, 106, 0.4);
    color: var(--ktp-altin-yazi); font-weight: 400;
}
/* 🔴 ANA DÜĞME ALTIN AİLESİNDEN (6 Eyl, maket ölçüsü). Dolgu mavi bir
   gradyandı — bu dosyanın kendi başlığındaki kimlikle ("kitap ALTINDIR")
   ve maketle çelişiyordu: altın bir odanın ortasında turkuaz bir tuş.
   Maket bütün kaydetme/onay düğmelerini `.ana-dug` ile çizer. */
/* 🔑 ORTAK ÖLÇÜ (7 Eyl): renk zaten altındı ama KENDİ sayılarıyla
   (.45/.14). Ekranlar arası bir gün ayrışmasın diye `dugme.css`in
   değişkenlerine bağlandı; görünen fark yok, ölçü tekleşti. */
.ktp-kaydet {
    width: 100%; padding: 13px; border-radius: 14px; margin-top: 14px; cursor: pointer;
    border: 1px solid var(--ss-eylem-cizgi, rgba(212, 175, 106, 0.48));
    background: var(--ss-eylem-dolgu, rgba(212, 175, 106, 0.16));
    color: var(--ktp-altin-yazi); font-family: inherit; font-size: 0.9em; font-weight: 500;
}
/* ⚠️ 3 Eyl: genel `button:not(:disabled):hover` kuralı (kronometre.css)
   gradyanı eziyordu — fare üstüne gelince birincil düğme soluk griye dönüyor,
   koyu yazı okunmuyordu. Telefonda hover yok, o yüzden yıllarca görülmedi.
   Kendi hover'ını yazıyoruz: parlaklık artar, renk kaybolmaz. */
.ktp-kaydet:not(:disabled):hover {
    background: var(--ss-eylem-dolgu-koyu, rgba(212, 175, 106, 0.26)); color: var(--ktp-altin-yazi);
    border-color: rgba(212, 175, 106, 0.6);
}
.ktp-kaydet:active { transform: scale(0.99); }

/* ══ PROFİL KART DÜZENİ (9 Ağu akşamı — maketteki "Hesabım") ═══════════
   Ayarlar uzun bir form listesiydi. Artık her ayar tek satırlık bir kart:
   başlık + o anki değeri; dokununca kendi içeriğini açar. */
.hs-kart {
    border-radius: 14px; margin-bottom: 10px; overflow: hidden;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease;
}
.hs-kart.acik { border-color: rgba(255, 255, 255, 0.16); }
.hs-kart-bas {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 13px 14px 13px 12px; cursor: pointer;
    background: none; border: none; color: #e2e8f0; font-family: inherit; text-align: left;
}
/* 🔑 TEK SOL KENAR (7 Eyl, gezinti bulgusu B16): kapı satırlarında yazı
   12 + 30 + 11 = 53 px içeriden başlar. Kart başlıkları simgesizdi ve yazı
   14 px'ten başlıyordu; aynı listede iki sol kenar, liste ikiye bölünmüş
   gibi duruyordu. Simge kutusu aynı ölçüde — ölçü İKİ yerde birden durur,
   biri değişirse ötekiyle birlikte değişir. */
.hs-kart-bas .simge { flex: none; width: 30px; line-height: 1; text-align: center; }
.hs-kart-bas .simge svg { display: block; margin: 0 auto; }
.hs-kart-bas .ad { flex: 1; min-width: 0; font-size: 0.95em; font-weight: 600; }
.hs-kart-bas .ad small {
    display: block; margin-top: 3px; font-size: 0.75em; font-weight: 400; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-kart-bas .ok { flex: 0 0 auto; color: #64748b; transition: transform 0.2s ease; }
.hs-kart.acik .hs-kart-bas .ok { transform: rotate(90deg); }
.hs-kart-ic { padding: 0 14px 14px; }
.hs-kart-ic[hidden] { display: none; }
.hs-kart-ic .hs-not { margin-bottom: 10px; }

/* ── PROFİLDEKİ KAPI ──────────────────────────────────────────────────── */
#hs-kitaplik {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 12px; margin-bottom: 14px; border-radius: 14px; cursor: pointer;
    background: rgba(212, 175, 106, 0.07); border: 1px solid rgba(212, 175, 106, 0.25);
    color: var(--ktp-altin-yazi); font-family: inherit; text-align: left;
}
#hs-kitaplik .ad { flex: 1; font-size: 0.95em; font-weight: 600; }
#hs-kitaplik .ad small { display: block; font-size: 0.75em; color: #94a3b8; font-weight: 400; margin-top: 3px; }
#hs-kitaplik .ok { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════════
   KARNE — M3 · Ölçme Ailesi, Bölüm 1 (11 Ağu 2026)

   "Neredesin" ekranı "nasıl gidiyor"a dönüşüyor. Görsel kurallar tasarım
   dilinden geliyor ve BOZULMAYACAK:
     • kırmızı YOK — yanlış bir kusur değil, ayrıştırılacak tanedir
     • yüzde isabet YOK — üç çıplak sayı
     • kitap sıralaması YOK — kıyas yalnız öğrencinin kendi kitapları
     • zorluk tek renk üç yoğunluk (kolay→zor), yeşil-kırmızı kodlama asla
   ═══════════════════════════════════════════════════════════════════════ */

/* ── takip tikleri (kitap formu) ──────────────────────────────────────── */
/* Çevrilemeyen tik: düğme değil, DURUŞ. Şalter açıkken sayfa takibi bir
   tercih değildir; satır gerekçesini söyler ve dokunmaya davet etmez
   (görünen her şey dokunulabilir kuralının öteki yüzü). */
.ktp-tik.durus { cursor: default; opacity: 0.85; }

.ktp-tik {
    display: flex; align-items: center; gap: 9px; width: 100%;
    /* box-sizing AÇIKÇA: bu sınıf hem <button> hem <div> üstünde kullanılıyor
       (çevrilemeyen "duruş" satırı div). Tarayıcı düğmeyi border-box, div'i
       content-box sayıyor; belirtmezsek iki komşu satır farklı genişlikte
       duruyor (2 Eyl provasında görüldü). */
    box-sizing: border-box;
    padding: 9px 10px; margin-bottom: 7px; border-radius: 11px; cursor: pointer;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09);
    color: #cbd5e1; font-family: inherit; text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ktp-tik.acik { background: rgba(212, 175, 106, 0.06); border-color: rgba(212, 175, 106, 0.35); }
.ktp-kutucuk {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 0.8em;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18);
    color: transparent;
}
.ktp-tik.acik .ktp-kutucuk {
    background: rgba(212, 175, 106, 0.18); border-color: var(--ktp-altin); color: var(--ktp-altin-yazi);
}
.ktp-tik-yz { min-width: 0; flex: 1; }
.ktp-tik-yz b { display: block; font-size: 0.87em; font-weight: 400; }
.ktp-tik-yz i { display: block; margin-top: 1px; font-size: 0.68em; font-style: normal; color: #64748b; line-height: 1.4; }

/* ── karne satırları ──────────────────────────────────────────────────── */
.ktp-karne {
    padding: 2px 12px; margin-bottom: 11px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ktp-k-satir { display: flex; gap: 10px; padding: 10px 0; align-items: flex-start; }
.ktp-k-satir + .ktp-k-satir { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ktp-k-simge { flex: 0 0 20px; text-align: center; padding-top: 1px; font-size: 0.9em; }
.ktp-k-ic { min-width: 0; flex: 1; }
.ktp-k-etiket { font-size: 0.66em; color: #64748b; letter-spacing: 0.5px; text-transform: uppercase; }
.ktp-k-ana { margin-top: 2px; font-size: 0.86em; line-height: 1.4; color: #cbd5e1; }
.ktp-k-ana b { color: var(--ktp-altin-yazi); font-weight: 500; }
.ktp-k-alt { margin-top: 3px; font-size: 0.74em; line-height: 1.45; color: #94a3b8; }

/* isabet — üç çıplak sayı, kırmızı yok */
.ktp-isabet { display: flex; gap: 7px; margin-top: 5px; }
.ktp-isabet div {
    flex: 1; text-align: center; padding: 7px 0; border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.ktp-isabet b { font-size: 1.05em; font-weight: 500; color: #e6ecf7; font-variant-numeric: tabular-nums; }
.ktp-isabet span { display: block; font-size: 0.58em; letter-spacing: 0.5px; color: #64748b; }

/* zorluk dağılımı — tek renk, üç yoğunluk */
.ktp-dagilim { display: flex; gap: 2px; height: 8px; margin: 6px 0 5px; }
.ktp-dagilim i { display: block; height: 100%; border-radius: 2px; }
.ktp-dagilim .k, .ktp-dagilim-yz u.k { background: rgba(212, 175, 106, 0.26); }
.ktp-dagilim .o, .ktp-dagilim-yz u.o { background: rgba(212, 175, 106, 0.55); }
.ktp-dagilim .z, .ktp-dagilim-yz u.z { background: rgba(212, 175, 106, 0.95); }
.ktp-dagilim-yz {
    display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.7em; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.ktp-dagilim-yz span { display: inline-flex; align-items: center; gap: 4px; }
.ktp-dagilim-yz u { width: 7px; height: 7px; border-radius: 2px; text-decoration: none; display: inline-block; }

/* ── tahmin başlığı + ⓘ ───────────────────────────────────────────────── */
/* 🔴 İKİ HALKA ÜST ÜSTE BİNİYORDU (6 Eyl): yazının kendisi zaten çember
   içinde bir "i" (ⓘ) ve düğmenin de dairesel bir çerçevesi vardı — iç içe
   iki halka. Makette çerçeve yok, yalnız karakterin kendisi ve altın-sönük
   rengi. Dokunma alanı korunuyor (çerçeve gitti, boy gitmedi). */
.ktp-nasil {
    flex: 0 0 auto; min-width: 24px; min-height: 24px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0;
    color: var(--ktp-altin-sonuk); font-family: inherit; font-size: 0.9em; line-height: 1;
}
.ktp-nasil:hover { color: var(--ktp-altin); background: none; }

/* ── ⓘ yaprağının hesap adımları ──────────────────────────────────────── */
.ktp-adim {
    display: flex; gap: 9px; padding: 8px 0; font-size: 0.78em; line-height: 1.45; color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ktp-adim:last-of-type { border-bottom: none; }
.ktp-adim b { color: #e2e8f0; font-weight: 500; }
.ktp-adim-no { flex: 0 0 15px; color: var(--ktp-altin); font-weight: 500; }
.ktp-tesvik {
    margin-top: 10px; padding: 10px 11px; border-radius: 12px;
    font-size: 0.76em; line-height: 1.5; color: #a5e8f2;
    background: rgba(0, 242, 254, 0.06); border: 1px solid rgba(0, 242, 254, 0.25);
}
.ktp-tesvik b { color: #d8f7fc; font-weight: 500; }

/* 🗑️ EŞİK ÇUBUĞU SÖKÜLDÜ (6 Eyl 2026, kullanıcı: "bitişe doğru sadece
   olması gerekmiyor mu"). Bitiş çizgisinin hemen ALTINDA ikinci bir çubuk
   daha çiziyordu ve AYNI oranı gösteriyordu. Üstelik anlattığı kapı
   ("kıyas %10'da başlar") 4 Eyl'de kaldırılmıştı; ekran artık olmayan bir
   şeyi beklemeyi söylüyordu. Çizimi `karneHtml`den de kalktı. */

/* ── elle giriş: kapı + iz ────────────────────────────────────────────── */
.ktp-elle-ac {
    display: block; width: 100%; padding: 12px; margin-bottom: 11px;
    border-radius: 14px; cursor: pointer; text-align: center;
    background: rgba(212, 175, 106, 0.05); border: 1px dashed rgba(212, 175, 106, 0.35);
    color: var(--ktp-altin-yazi); font-family: inherit; font-size: 0.87em; font-weight: 300;
}
.ktp-elle-ac:hover { background: rgba(212, 175, 106, 0.1); }
/* İlerleme ekle düğmesinin ÜSTÜNDEKİ boşluk (25 Ağu). Düğme eskiden
   "bitirdiğin konular" listesinin dibine yapışıktı ve listenin bir maddesi
   sanılıyordu; ayıraç onu kendi işi olarak ayırıyor. */
.ktp-ayirac {
    height: 1px; margin: 18px 0 14px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 106, 0.18), transparent);
}
/* Düğmenin altındaki tek satırlık dürüstlük notu: ne yapar, ne YAPMAZ. */
.ktp-elle-alt {
    margin: -6px 0 12px; padding-left: 2px;
    font-size: 0.7em; line-height: 1.5; color: #8ca0b8;
}
.ktp-elle-iz {
    margin: -5px 0 11px; padding-left: 2px;
    font-size: 0.72em; line-height: 1.45; color: #cbb488;
}

/* ── KİTAP FORMU: ÖLÇÜ BÖLÜMÜ (3 Eylül 2026) ─────────────────────────────
   Eski hâlde türden bağımsız, çerçeveli, dört satırlık bir paragraf vardı ve
   formu iki katına çıkarıyordu (konu anlatımında ise altında hiç sayı
   olmadığı için boşa söz veriyordu). Yeni hâl: başlık + tek satır gerekçe. */
.ktp-olcu-bas { margin: 14px 0 8px; }
.ktp-olcu-bas label {
    display: block; font-size: 0.7em; letter-spacing: 0.06em;
    color: var(--ktp-altin, #d4af6a); font-weight: 400; margin-bottom: 3px;
}
.ktp-olcu-bas .ktp-alt-yz { margin: 0; }
/* Deneme türü seçiminin altındaki tek satırlık karşılık. */
#ktp-ders-yeri .ktp-alt-yz { margin-top: 5px; }

/* ── KİTAP FORMUNDAKİ SEÇİCİ (3 Eylül 2026) ──────────────────────────
   Ham `<select>` kaldırıldı; görünüm kronometrenin seçicilerinden miras.
   Buradaki iki fark: liste AKIŞ İÇİNDE açılır (kitaplık kaydırılabilir bir
   panel; `absolute` liste kenardan kırpılıyordu) ve seçili satır sönük bir
   onay rengi taşır. */
.ktp-secici { margin-bottom: 0; }
.ktp-secici .dropdown-list {
    position: static; margin-top: 6px; max-height: 240px;
    border-color: rgba(255, 255, 255, 0.14);
}
.ktp-secici .dropdown-item { padding: 11px 13px; font-size: 0.9em; }
.ktp-secici .dropdown-item.ktp-secili {
    color: var(--ktp-altin-yazi, #e7d3a8); background: rgba(212, 175, 106, 0.08);
}
.ktp-secici .dropdown-selected { padding: 13px 14px; font-size: 0.92em; }

/* ── KİTAPLIĞIM: OTURUM BAŞLIKLARI (3 Eylül 2026) ────────────────────────
   Liste ders ders açılıyordu ve TYT ile AYT rafları iç içe geçiyordu; deneme
   kaynakları da soru bankalarının arasına karışıyordu. Başlık bir BÖLÜM
   ADIDIR, dokunulmaz — o yüzden düğme değil, ince bir ayraç. */
/* Deneme bölümü altın ailesinden: ölçüsü de dili de ötekilerden ayrı. */

/* ── TOPLAMI YAZILMAMIŞ ÖLÇÜ — kalıcı uyarı (4 Eylül 2026) ──────────────
   Tahminin duracağı yerde bekler; yazılınca yerini tahmin çizgisine bırakır.
   🔑 Uyarı DEĞİL, ÇAĞRI: kırmızı yok, ünlem yok. Öğrenci bir şeyi yanlış
   yapmadı — sistem bir bilgiyi henüz bilmiyor. */
.ktp-eksik-toplam {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; margin: 12px 0;
    border: 1px solid rgba(212, 175, 106, 0.22); border-radius: 12px;
    background: rgba(212, 175, 106, 0.05);
    font-size: 13px; line-height: 1.5; color: #94a3b8;
}
.ktp-eksik-toplam b { color: var(--ktp-altin); font-weight: 500; }
/* 🔴 AD ÇAKIŞMASI (6 Eyl): `.ktp-eksik-yaz` İKİ ayrı yerde kullanılıyor —
   karnedeki "toplamı yazılmamış" şeridi ve Kitaplığım'ın eksikler kartı.
   İkisinin tanımı da bu dosyadaydı ve SONRAKİ kazanıyordu: karnedeki satır
   `margin-left:auto`unu kaybedip sola yapışıyordu. İkisi de kendi kabına
   bağlandı. */
.ktp-eksik-toplam .ktp-eksik-yaz { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ktp-eksik-toplam .ktp-eksik-yaz input {
    width: 104px; padding: 8px 10px; text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px;
    background: rgba(255, 255, 255, 0.04); color: inherit;
    font-size: 14px; font-variant-numeric: tabular-nums;
}
.ktp-eksik-toplam .ktp-eksik-yaz input:focus { outline: none; border-color: rgba(212, 175, 106, 0.5); }
.ktp-eksik-toplam .ktp-eksik-yaz button {
    padding: 8px 16px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(212, 175, 106, 0.35);
    background: rgba(212, 175, 106, 0.12); color: var(--ktp-altin);
    font-size: 13px; font-weight: 400;
}
.ktp-eksik-toplam .ktp-eksik-yaz button:disabled { opacity: 0.5; cursor: default; }

/* ── ÇÖZÜLMÜŞ SAYFA ARALIKLARI — kitap formunda (4 Eylül 2026) ──────────
   Kaydet ekranındaki sayfa aralığının aynı deseni: iki kutu, arada tire,
   yanında Ekle. Yazılan aralık HEMEN altta rozet olarak görünür — öğrenci
   ne girdiğini görmeden "Kaydet"e basmasın. */
.ktp-aralik-blok { margin-top: 12px; }
.ktp-aralik-blok > label {
    display: block; margin-bottom: 7px;
    font-size: 11px; letter-spacing: 0.08em; color: #64748b;
}
/* Kutular esner, düğme kendi boyunda durur. Form içindeki genel buton
   kuralı düğmeyi tüm satıra yayıyordu; iki küçük kutunun yanında dev bir
   "Ekle" dengesiz duruyordu (ekranda görüldü, 4 Eyl). */
/* 🔴 HİZA (5 Eyl, kullanıcı ekran görüntüsü): "baş / son / Aralığı ekle"
   aynı hizada durmuyordu — kutular 37 px, düğme 36 px ve 7 px aşağıda.
   Sebep yazı boyu farkıydı (kutu 15 px, düğme 13 px); ortalama iki farklı
   kutu boyunu hizalamıyordu. Üçü de AYNI BOYA gerilir ve o boy parmak
   ölçüsüdür (44 px — `pk-num`/`pk-cip` ile aynı defter). */
.ktp-aralik-gir { display: flex; align-items: stretch; gap: 8px; }
.ktp-aralik-gir input,
.ktp-aralik-gir button { min-height: 44px; height: 44px; padding-top: 0; padding-bottom: 0; }
.ktp-aralik-gir > span { display: flex; align-items: center; }
.ktp-aralik-gir input {
    flex: 1 1 0; min-width: 0; max-width: 96px;
    padding: 9px 10px; text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px;
    background: rgba(255, 255, 255, 0.04); color: inherit;
    font-size: 15px; font-variant-numeric: tabular-nums;
}
.ktp-aralik-gir input:focus { outline: none; border-color: rgba(212, 175, 106, 0.5); }
.ktp-aralik-gir > span { color: #64748b; }
.ktp-aralik-gir button {
    flex: 0 0 auto; width: auto; margin-left: 4px;
    padding: 9px 16px; border-radius: 9px; cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(212, 175, 106, 0.35);
    background: rgba(212, 175, 106, 0.12); color: var(--ktp-altin);
    font-size: 13px; font-weight: 400;
}
.ktp-aralik-liste { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ktp-aralik-rozet {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px 5px 11px; border-radius: 999px;
    border: 1px solid rgba(212, 175, 106, 0.28);
    background: rgba(212, 175, 106, 0.08);
    font-size: 13px; color: var(--ktp-altin-yazi);
    font-variant-numeric: tabular-nums;
}
.ktp-aralik-rozet button {
    border: 0; background: none; cursor: pointer; padding: 0 2px;
    color: #64748b; font-size: 15px; line-height: 1;
}
.ktp-aralik-rozet button:hover { color: var(--ktp-altin); }
.ktp-aralik-bos { margin-top: 9px; font-size: 12px; line-height: 1.5; color: #64748b; }

/* ═══ İLERLEME KAYITLARI — düzeltilebilir satırlar (7 Eylül 2026) ═══════
   Kitabı düzenle formunda: elle girilmiş her çentik kendi satırında durur,
   iki kutusu ve bir "Sil"i vardır. "Kaydet" ancak bir şey değişince görünür
   (dokunup hiçbir şey olmayan düğme panjur tuzağıdır).
   🔒 Kronometre bloğundan gelen ayraç burada ÇİZİLMEZ: onun evi kayıt
   düzeltmedir, iki kapıdan düzeltilirse blok ile ayraç ayrışır. */
.ktp-duz-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ktp-duz-sat { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
/* 🔴 SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA (7 Eyl, ekranda görüldü).
   Bu kutular `.ktp-alan` içinde duruyor ve o kabın kendi kuralı
   (`.ktp-alan input { width: 100% }`) tek sınıflı bir seçiciyi EZİYOR:
   kutular tam genişliğe yayılıp alt alta düşüyordu. 6 Eyl'de aynı tuzağa
   genel `button` kuralıyla düşülmüştü — kabın kuralı odaya biner. */
.ktp-duz-sat .ktp-duz-sy {
    width: 74px; padding: 8px 6px; text-align: center;
    border-radius: 9px; font-family: inherit; font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: #e6ecf6; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.ktp-duz-ok { color: #64748b; }
.ktp-duz-kaydet, .ktp-duz-sil {
    padding: 7px 12px; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
}
.ktp-duz-kaydet {
    color: var(--ktp-altin-yazi, #e8d5a8); background: rgba(212, 175, 106, 0.14);
    border: 1px solid rgba(212, 175, 106, 0.36);
}
.ktp-duz-sil {
    margin-left: auto; color: #94a3b8; background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.ktp-duz-kaydet:active, .ktp-duz-sil:active { transform: scale(.97); }
.ktp-duz-kaydet[disabled], .ktp-duz-sil[disabled] { opacity: .5; cursor: default; }

/* İki hesap satırı — "Bu haftaki hızınla" / "Baştan beri ortalamanla" */
/* İki hesap satırı + sönük özet — hepsi aynı gramerde (maket `.bs-iki`). */
.ktp-bitis-iki {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 6px; font-size: 0.76em; color: #cfd9ea;
}
.ktp-bitis-iki.sonuk { color: #5f6d86; }
.ktp-bitis-iki span:last-child { white-space: nowrap; }

/* Alan altındaki BİLGİ satırı — "şu ana kadar 96 / 1030 soru" (4 Eyl).
   İnce ve sessiz: girilen veriyi hatırlatır, soru sormaz. */
.ktp-alan-alt {
    margin: -4px 0 12px; padding-left: 2px;
    font-size: 12.5px; line-height: 1.5; color: #64748b;
}
.ktp-alan-alt b { color: var(--ktp-altin-yazi); font-weight: 500; }

/* Hızlı dolgu — eski "+10 +25 +50" düğmelerinin yeni evi (4 Eyl).
   SON kutusunu doldurur; aynı hareket, artık aralık olarak kaydediliyor. */
.ktp-hizli { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ktp-hizli button {
    flex: 1 1 auto; min-width: 88px;
    padding: 8px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03); color: #94a3b8;
    font-size: 12.5px; white-space: nowrap;
}
.ktp-hizli button:hover { border-color: rgba(212, 175, 106, 0.4); color: var(--ktp-altin-yazi); }

/* ══ TEK SEÇİM (4 Eylül 2026) ═══════════════════════════════════════════
   İki bağımsız tik yerine iki seçenekten BİRİ. Yuvarlak nokta kullanılıyor
   çünkü biçim de kuralı söylemeli: kutucuk "ikisi de olabilir" der, nokta
   "biri" der. */
/* 🔴 SINIF ADI ÇAKIŞMASI SÖKÜLDÜ (6 Eyl 2026, tasarım turunda görüldü).
   Bu blok `.ktp-sec` adını taşıyordu — YAPRAKTAKİ KAYNAK KARTIYLA aynı adı.
   İki tanım aynı dosyada üst üste biniyordu ve SONRAKİ kazanıyordu: kaynak
   kartı bu radyo düğmesinin dolgusunu, hizasını ve `font: inherit`ini alıyor,
   yıldızı yukarı kayıyordu. Üstelik yaprakta "seçili olmayanı söndür"
   kuralı (`#kitap-yaprak.secim-var .ktp-sec:not(.secili)`) radyo düğmelerini
   de söndürüyordu — ölçü kademesi seçim yapılınca yarı saydam açılıyordu.
   Adı ayrıldı: kart `.ktp-sec`, radyo `.ktp-radyo`. Aynı ada iki iş
   yüklemek bir kez daha ısırdı (bkz. sınıf adı çakışması tuzağı). */
.ktp-radyo {
    width: 100%; display: flex; gap: 11px; align-items: center; text-align: left;
    padding: 11px 13px; margin-bottom: 7px; border-radius: 14px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.03);
    color: inherit; font-family: inherit; font-size: 1em; font-weight: 300;
}
.ktp-radyo.acik { border-color: rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.09); }
.ktp-radyo.pasif { opacity: 0.4; cursor: default; }
.ktp-radyo.bagli { border-radius: 14px 14px 0 0; margin-bottom: 0; }
.ktp-nokta {
    flex: 0 0 17px; height: 17px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: flex; align-items: center; justify-content: center;
}
.ktp-radyo.acik .ktp-nokta { border-color: var(--ktp-altin); }
.ktp-radyo.acik .ktp-nokta::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ktp-altin);
}
.ktp-kilit {
    margin-left: auto; align-self: center; white-space: nowrap;
    font-size: 11px; color: var(--ktp-altin-sonuk);
}

/* Seçilenin ALTINDAKİ yuva — kutular ona bağlı görünsün diye üst kenarı yok. */
.ktp-yuva {
    margin: 0 0 12px; padding: 13px 13px 14px; border-radius: 0 0 13px 13px;
    border: 1px solid rgba(212, 175, 106, 0.28); border-top: 0;
    background: rgba(212, 175, 106, 0.04);
}
.ktp-yuva.tek { border-radius: 13px; border-top: 1px solid rgba(212, 175, 106, 0.28); }
.ktp-yuva .ktp-alan { margin-bottom: 0; }

/* Kartta takip satırı — hangi ölçü, ve değiştirme yolu. */
.ktp-takip-satir {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0; padding: 10px 12px; border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02);
    font-size: 0.84em; color: #cfd9ea;
}
.ktp-takip-satir b { color: #ffffff; font-weight: 500; }
/* "değiştir" bir BAĞLANTIDIR, altın bir vurgu değil: altın YAPILANIN rengi,
   bu ise bir yol. Sağa yaslı, düz altı çizili. (Maketin "mavi"si 7 Eyl'de
   kalktı — aşağıdaki nota bak.) */
/* 🔴 SON KAÇAK MAVİ (7 Eyl, gezinti raporu 7. madde): bu bağlantı
   `--primary` (#4facfe) taşıyordu — paletimizde olmayan renk — ve ürünün
   TEK altı çizili yazısıydı. Ölçüldü: 40x15 px, yani en küçük hedeflerden
   biri. Renk çıkışların rengine çekildi; altı çizgi bir YOL işaretidir,
   kalıyor. Görünmez pay 15 → 44 dokunma (`z-index` şart). */
.ktp-takip-satir button {
    margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0;
    color: #9aabc4; font-family: inherit; font-size: 0.9em;
    text-decoration: underline; text-underline-offset: 3px;
    position: relative;
}
.ktp-takip-satir button:hover { color: #c3d0e4; }
.ktp-takip-satir button::after { content: ''; position: absolute; inset: -15px -10px; z-index: 1; }

/* Rozet artık DÜĞME DEĞİL, gösterge. */


/* ═══ ÖLÇÜSÜ EKSİK SATIRI — yaprakta, seçili kitabın altında (5 Eyl 2026) ═══
   Kesik çizgili ve altın: kırmızı YOK. Öğrenci yanlış bir şey yapmadı, sistem
   bir bilgiyi henüz bilmiyor. Satır bir KAPIDIR — dokununca ölçü kademesi
   açılır, görmeden geçmek serbesttir. */
.ktp-olcu-eksik {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: -3px 0 12px; padding: 10px 12px; border-radius: 13px; cursor: pointer;
    border: 1px dashed rgba(212, 175, 106, 0.35); background: rgba(212, 175, 106, 0.05);
    color: var(--ktp-altin-yazi); font-family: inherit; font-size: 0.8em; text-align: left;
}
.ktp-olcu-eksik span { flex: 1; min-width: 0; }
.ktp-olcu-eksik i { flex: none; font-style: normal; color: var(--ktp-altin-sonuk); }
.ktp-olcu-eksik:active { transform: scale(0.99); }

/* ═══════════ KİTAPLIĞIM VİTRİNİ (5 Eylül 2026, kullanıcı kararı) ═══════════
   Kalabalık kalktı: açıklama cümlesi, sayaç şeridi, mini tezgâhlar ve katlanır
   raf başlıkları gitti. Kalan üç şey: iki kapı, ders çipleri, sade kartlar. */

/* İki kapı — süzgeçten bağımsız, her şeyi sayar. */
.ktp-kapi {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 11px 13px; border-radius: 14px; margin-bottom: 8px; cursor: pointer;
    border: 1px solid rgba(212, 175, 106, 0.3); background: rgba(212, 175, 106, 0.07);
    font-family: inherit; text-align: left;
}
.ktp-kapi .kk-ad { font-size: 0.9em; font-weight: 500; color: var(--ktp-altin-yazi); white-space: nowrap; }
.ktp-kapi .kk-alt { font-size: 0.74em; color: var(--ktp-altin-sonuk); margin-left: auto; text-align: right; }
.ktp-kapi .kk-ok { flex: none; color: var(--ktp-altin-sonuk); }
.ktp-kapi.eksik { border-style: dashed; background: rgba(212, 175, 106, 0.04); }
.ktp-kapi.sonuk { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); margin-top: 10px; }
.ktp-kapi.sonuk .kk-ad { color: #9aabc4; font-weight: 400; }
.ktp-kapi.sonuk .kk-alt, .ktp-kapi.sonuk .kk-ok { color: #64748b; }
.ktp-kapi:active { transform: scale(0.99); }

/* İki grup: ders kitapları · denemeler */
.ktp-segment {
    display: flex; gap: 4px; padding: 4px; border-radius: 14px; margin: 12px 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.025);
}
.ktp-seg {
    flex: 1; padding: 9px; border-radius: 11px; cursor: pointer; font-family: inherit;
    border: 1px solid transparent; background: transparent; color: #9aabc4; font-size: 0.84em;
}
.ktp-seg.secili {
    background: rgba(212, 175, 106, 0.12); border-color: rgba(212, 175, 106, 0.35);
    color: var(--ktp-altin-yazi); font-weight: 400;
}

/* Ders çipleri — sığmazsa ALT SATIRA kırılır (kullanıcı kararı: gizli çip yok) */
.ktp-cipler { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; margin: 8px 0 4px; }
.ktp-cip-ders {
    flex: none; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1); background: transparent;
    color: #9aabc4; font-size: 0.8em; white-space: nowrap;
}
.ktp-cip-ders.secili {
    border-color: rgba(212, 175, 106, 0.5); background: rgba(212, 175, 106, 0.12);
    color: var(--ktp-altin-yazi); font-weight: 400;
}

/* Kart: ad · yıldız · ölçü · ince çubuk. Tezgâh çizimi YOK. */
.ktp-vitrin { display: flex; align-items: stretch; gap: 7px; margin-bottom: 7px; }
.ktp-vitrin.rafta { opacity: 0.55; }
.ktp-vit-govde {
    flex: 1; min-width: 0; text-align: left; padding: 11px 13px; border-radius: 14px;
    cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03);
}
.ktp-vit-govde:active { transform: scale(0.99); }
.ktp-vit-ad { display: block; font-size: 0.9em; color: #e6ecf7; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.ktp-vit-ders { display: block; font-size: 0.71em; color: #64748b; margin-top: 2px; }
.ktp-vit-olcu { display: block; font-size: 0.77em; color: var(--ktp-altin); margin-top: 3px; }
.ktp-vit-olcu .sonuk { color: #64748b; }
/* 🔔 EKSİK ÖLÇÜ GÖZE ÇARPAR (7 Eylül 2026, kullanıcı kararı)
   Satır sönük altın bir yazıydı ve listede kayboluyordu: *"kaynak ölçüsü
   eksikse Kitaplığım'a girdiğinde ilgili satırda bir yanıp sönsün, daha
   görünür olsun."* Nefes yavaş ve alçak — kronometrenin şerit nefesiyle
   aynı dil; renk değişmez, yalnız parlaklık soluk alır.
   🔒 Hareketi kapatan cihazda animasyon YOK, yazı tam parlaklıkta durur. */
.ktp-vit-eksik {
    display: block; font-size: 0.72em; color: var(--ktp-altin-sonuk); margin-top: 4px;
    animation: ktp-eksik-nefes 2.6s ease-in-out infinite;
}
@keyframes ktp-eksik-nefes {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ktp-vit-eksik { animation: none; opacity: 1; }
}
.ktp-vit-yildiz {
    flex: none; width: 42px; border-radius: 14px; cursor: pointer; font-size: 1em;
    border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02);
    color: var(--ktp-altin-sonuk);
}
.ktp-vit-yildiz.dolu { color: var(--ktp-altin); border-color: rgba(212, 175, 106, 0.35);
    background: rgba(212, 175, 106, 0.1); }
.ktp-vit-yildiz:active { transform: scale(0.94); }

/* Üstteki geri bağlantısı — iç sayfalarda (bitiş · eksikler · raf) */
/* 🔑 TEK ÇIKIŞ BİÇİMİ (7 Eyl): tepedeki "‹ Kitaplığım" zaten doğru şekildeydi
   (yazı · sola yaslı · oklu) ama dokunma alanı 26 px'ti. Ölçü artık
   `dugme.css` → `.ss-cikis`; buradaki tek fark üstteki boşluk. */
.ktp-geri-ust {
    background: none; border: none; color: #9aabc4; font-family: inherit; font-size: 0.85em;
    cursor: pointer; padding: 11px 10px 11px 0; display: block; text-align: left;
    min-height: 44px; margin-bottom: 2px;
}
.ktp-geri-ust:hover { color: #c3d0e4; }

/* Bitişe doğru — ders ders */
.ktp-ders-bas {
    font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase;
    color: #5f6d86; margin: 16px 2px 7px;
}
.ktp-bs {
    display: block; width: 100%; text-align: left; margin-bottom: 12px; cursor: pointer;
    background: none; border: none; font-family: inherit; padding: 0;
}
.ktp-bs .bs-ad { display: flex; align-items: baseline; gap: 8px; font-size: 0.82em;
    color: #dbe4f2; margin-bottom: 5px; }
.ktp-bs .bs-ad i { margin-left: auto; font-style: normal; font-size: 0.92em;
    color: var(--ktp-altin-yazi); white-space: nowrap; }
.ktp-bs .bs-ad i i { color: #5f6d86; }
.ktp-bs .bs-hat { display: flex; align-items: center; gap: 9px; }
.ktp-bs .bs-cubuk { flex: 1; height: 5px; border-radius: 3px; overflow: hidden;
    background: rgba(255, 255, 255, 0.07); }
.ktp-bs .bs-cubuk i { display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--ktp-altin-sonuk), var(--ktp-altin)); }
.ktp-bs .bs-kalan { flex: none; font-size: 0.74em; color: #5f6d86; white-space: nowrap; }

/* Eksik ölçüler — her kaynak tek soruluk, YERİNDE yazılır */
.ktp-eksik-kart {
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 12px 13px;
    margin-bottom: 9px; background: rgba(255, 255, 255, 0.025);
}
.ktp-eksik-kart.tamam { border-color: rgba(127, 199, 154, 0.35); background: rgba(127, 199, 154, 0.06); }
.ktp-eksik-kart .ad { font-size: 0.87em; color: #e2e9f6; }
.ktp-eksik-kart .sebep { font-size: 0.74em; color: #5f6d86; margin: 1px 0 9px; }
.ktp-eksik-kart .tamam-yz { font-size: 0.82em; color: #7FC79A; margin-top: 6px; }
.ktp-eksik-sec { display: flex; gap: 7px; }
.ktp-eksik-sec .sec-dug {
    flex: 1; padding: 9px; border-radius: 11px; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; color: #9aabc4; font-size: 0.8em;
}
.ktp-eksik-sec .sec-dug:active { border-color: rgba(212, 175, 106, 0.5); color: var(--ktp-altin-yazi); }
.ktp-eksik-kart .ktp-eksik-yaz { display: flex; gap: 7px; align-items: center; }
.ktp-eksik-kart .ktp-eksik-yaz input {
    flex: 1; height: 38px; border-radius: 11px; padding: 0 12px; font-family: inherit; font-size: 0.92em;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #e6ecf7;
}
.ktp-eksik-kart .ktp-eksik-yaz input:focus { outline: none; border-color: rgba(212, 175, 106, 0.5); }
.ktp-eksik-kart .ktp-eksik-yaz .yaz-dug {
    flex: none; height: 38px; padding: 0 14px; border-radius: 11px; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(212, 175, 106, 0.4); background: rgba(212, 175, 106, 0.12);
    color: var(--ktp-altin-yazi); font-size: 0.8em;
}
.ktp-eksik-kart .ktp-eksik-yaz .yaz-dug:disabled { opacity: 0.5; }
.ktp-raf-al {
    display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 12px;
    margin-bottom: 7px; cursor: pointer; font-family: inherit; font-size: 0.84em;
    border: 1px dashed rgba(255, 255, 255, 0.14); background: transparent; color: #9aabc4;
}
.ktp-vit-bosluk { display: block; font-size: 0.7em; color: #64748b; margin-top: 3px; }

/* ═══ KİTAP SAYFASI — yerinde paneller ve künye (5 Eylül 2026) ═══════════ */
.ktp-ic-panel {
    border: 1px solid rgba(212, 175, 106, 0.3); border-radius: 14px; padding: 12px;
    margin: 10px 0; background: rgba(212, 175, 106, 0.05);
}
.ktp-ic-bas {
    font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ktp-altin-sonuk); margin-bottom: 9px;
}
/* Düzenlemede künye OKUNUR ama değişmez: sessiz kayma yok. */
.ktp-kunye {
    font-size: 0.82em; line-height: 1.55; color: #9aabc4; margin: 14px 0 4px;
    padding: 11px 13px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
}
.ktp-kunye b { color: #e2e9f6; font-weight: 500; }
.ktp-sil {
    width: 100%; margin-top: 10px; padding: 11px; border-radius: 13px; cursor: pointer;
    font-family: inherit; font-size: 0.84em;
    border: 1px solid rgba(239, 154, 154, 0.28); background: transparent; color: #e2b6b6;
}
.ktp-sil:active { background: rgba(239, 154, 154, 0.08); }
/* 🗑️ `.ktp-rafa-alt` SÖKÜLDÜ (7 Eyl, kullanıcı): düzenleme formundaki
   "Rafa kaldır" kaldırıldı — o düğme kitabın kendi sayfasında zaten var
   ve aynı düğmenin iki evi olmaz. */
/* Deneme kitabının sayfası — bu kitaptan çözülenler */
.ktp-dn {
    display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px;
    margin-bottom: 6px; font-size: 0.82em;
    border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.025);
}
.ktp-dn .dn-tarih { flex: none; width: 44px; color: #5f6d86; font-size: 0.9em; }
.ktp-dn .dn-ad { flex: 1; min-width: 0; color: #dbe4f2; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.ktp-dn .dn-net { flex: none; color: var(--ktp-altin-yazi); }
.ktp-dn .dn-tamam { flex: none; color: #7FC79A; font-size: 0.86em; }
.ktp-dn .dn-analiz {
    flex: none; padding: 5px 11px; border-radius: 999px; text-decoration: none; font-size: 0.86em;
    border: 1px solid rgba(212, 175, 106, 0.45); background: rgba(212, 175, 106, 0.12);
    color: var(--ktp-altin-yazi);
}

/* ═══════════════════════════════════════════════════════════════════════
   🎨 ODANIN KENDİ TİPOGRAFİSİ — MAKETİN ÖLÇÜSÜ (6 Eylül 2026)

   Kullanıcı bulgusu (ekran görüntüleriyle): *"yazı tipleri tasarımdaki gibi
   aynı güzellikte ve aynı küçük/büyük yazı stilinde değil."* Doğruydu ve
   sebebi tek tek satırlar değil, İKİ SİSTEMİN çarpışmasıydı:

     · Maket `Outfit 300` üstüne kurulu — ince, geniş, sakin. Vurgu 500'de
       durur ve BÜYÜK HARF yalnız küçük etiketlerde (.68em, geniş aralık).
     · Uygulamanın genel defteri ise kalın (600–700) ve başlıkları büyük
       harfe çevirip harf aralığı açıyor.

   Kitaplığım bu ikisinin arasında kalmıştı: kendi kutuları maketten,
   başlığı ve kapanış düğmesi genel defterden geliyordu. Aşağıdaki üç kural
   ODAYA ÖZELDİR — öteki odalara dokunmaz, orada genel defter sürer.
   ═══════════════════════════════════════════════════════════════════════ */

/* Taban ağırlık: maketin gövdesi 300. Vurgu her yerde 500'de durur. */
#kitaplik-inner, #kitap-yaprak { font-weight: 300; }
#kitaplik-inner b, #kitap-yaprak b { font-weight: 500; }

/* 🔴 KÖK SEBEP BUYDU (6 Eyl, ekranda ölçüldü). Genel defterde şöyle bir
   kural var: `button { font-size:.85em; font-weight:700; letter-spacing:1px }`
   — sayfadaki HER düğmeye biniyor. Kitaplığım'ın kutuları maketten geliyordu
   ama içlerindeki yazı bu kuraldan: kitabın adı 12,2 px ve 700 kalınlıkta,
   üstüne 1 px harf aralığıyla çiziliyordu. Makette aynı ad 14,4 px, 300
   kalınlıkta ve aralıksız değil — 12 px, 300 kalınlıkta ve aralıksız.
   "Aynı yazı tipi, başka bir yüz" hissi buradandı.

   🔑 `:where()` ile yazılıyor: seçicinin ağırlığı SIFIR olur, yani
     · genel `button` kuralını yener (dosya sonra yükleniyor, ağırlık eşit)
     · ama `.ktp-yeni { font-size:.87em }` gibi KENDİ ölçüsünü söyleyen her
       kuralı yenemez — onlar olduğu gibi kalır.
   Ağırlıklı bir seçici (`#kitaplik-inner button`) yazsaydık bütün bileşen
   ölçülerini ezerdi; bu tuzağa düşmemek için `:where()` şart.

   🔴 `flex: none` DA BURADA (aynı ölçüm): genel kural `button { flex: 1 }`
   diyor ve esnek bir satırın içindeki her düğmeyi GERİYOR. Kullanıcının
   gösterdiği "değiştir" tam bunun yüzünden satırın ortasında, uzun noktalı
   bir çizginin üstünde duruyordu — sağa yaslanmış bir bağlantı değil,
   gerilmiş bir kutu. Kendi esnekliğini söyleyen bileşenler (ders/deneme
   anahtarı, ikili düğmeler, vitrin gövdesi) kendi değerini yazıyor ve
   bundan etkilenmiyor.

   ⚠️ BOY DEĞİŞTİRİLMEZ — ölçüldü (6 Eyl): maketin düğme yazısı 12 px,
   uygulamanınki 12,24 px. Yani BOY zaten doğruydu; bozan şey KALINLIK ve
   HARF ARALIĞIYDI. Buraya `font-size` yazmak bütün kartları büyütür ve
   maketten uzaklaştırır (bir kez denendi, 14,4 px'e çıktı). */
:where(#kitaplik-inner, #kitap-yaprak) button {
    font-weight: 300; letter-spacing: normal; flex: none;
}
/* Yazı kutuları da odanın ağırlığında (maketin `.kutu`su 300 çiziyor). */
:where(#kitaplik-inner, #kitap-yaprak) input { font-weight: 300; }

/* Başlık BÜYÜK HARF DEĞİL (maket `.od-bas`): "Kitaplığım" bir addır, bir
   etiket değil. Büyük harf + 2px harf aralığı onu bir bölüm etiketi gibi
   gösteriyor ve kitabın kendi adıyla aynı ağırlığa çıkarıyordu. */
#kitaplik-inner .od-title {
    font-size: 1.05em; font-weight: 500; letter-spacing: normal;
    text-transform: none; color: #e6ecf7;
}
#kitaplik-inner .od-sub {
    font-size: 0.78em; color: #5f6d86; margin-top: 2px; line-height: 1.5;
}
#kitaplik-inner .od-top { margin-bottom: 14px; }

/* Kapanış/vazgeçme düğmesi (maket `.geri-dug`): sessiz, ince, çerçeveli. */
#kitaplik-inner .hs-dug.sade {
    padding: 11px; border-radius: 14px; font-size: 0.85em; font-weight: 300;
    background: transparent; border-color: rgba(255, 255, 255, 0.1); color: #9aabc4;
}
#kitaplik-inner .hs-dug.sade:active { transform: scale(0.99); }

/* ═══ KİTABIN ÜÇ HÂLİ — başlığın yanında (6 Eylül 2026, kullanıcı kararı) ══
   "Rafta olanlar sürekli ekranın ortasında duruyor." Doğruydu: raf bir KAPIYDI
   ve kartların arasına giriyordu. Artık bir SÜZGEÇ — başlığın yanında üç hap:
   AKTİF · RAFTA · BİTENLER. Boş olan hap çizilmez (ölü düğme olmaz) ve ders
   çipleri üç hânede de çalışır. */
.ktp-ust { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ktp-ust .od-title { flex: 1 1 auto; min-width: 0; }
.ktp-haneler { flex: none; display: flex; gap: 5px; padding-top: 2px; }
.ktp-hane {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1); background: transparent;
    color: #9aabc4; font-size: 0.72em; white-space: nowrap;
}
.ktp-hane i {
    font-style: normal; font-size: 0.9em; color: #5f6d86;
    font-variant-numeric: tabular-nums;
}
.ktp-hane.secili {
    border-color: rgba(212, 175, 106, 0.5); background: rgba(212, 175, 106, 0.12);
    color: var(--ktp-altin-yazi);
}
.ktp-hane.secili i { color: var(--ktp-altin-sonuk); }
.ktp-hane:active { transform: scale(0.97); }

/* Bitmiş kitabın şeridi — kutlama değil, bir kayıt. Yeşil ailesinden;
   kitaplığın altını burada bir kez bırakıyoruz çünkü altın "süren emeğin"
   rengi, bu ise tamamlanmış bir iş. */
.ktp-bitti-serit {
    margin: 10px 0 4px; padding: 9px 12px; border-radius: 12px;
    font-size: 0.8em; color: #a9d9bd;
    border: 1px solid rgba(127, 199, 154, 0.28); background: rgba(127, 199, 154, 0.07);
}