/* ============================================================================
HADİS BÖLÜMÜ — 2026 tasarımı (Kütüphane diliyle aynı).
Kullanıcı: "hadis konu başlıkları kısmı eski tasarım, sitedeki yeni tasarıma
göre yeniden tasarla ve alt menüyü kaldır."
Eski sayfa kendi başına bir dünyaydı: koyu editöryel hero, altın filigran,
mono-tipografili breadcrumb ve 6 düğmeli mobil alt çubuk. Kütüphane'den
gelen kullanıcı için kopukluk yaratıyordu. Bu dosya sayfayı /kutuphane/ ile
AYNI bileşenlere oturtur: .ktapp kabı, .kt-pagehead, .kt-scope, .kt-ksbar.
Bu yüzden `kutuphane-app.css` bu dosyadan ÖNCE yüklenmelidir — palet
(--card/--line/--copper…) oradan, .ktapp kapsamında geliyor.
⚠ SINIF ADLARI DEĞİŞMEDİ: kart iskeletini `js/hadis.js` üretiyor
(.hadis-karti/.hk-*) ve aynı dosya /hadis/kaynak/ sayfasında da çalışıyor.
Sadece giydirme değişti; JS'e dokunulmadı.
============================================================================ */
/* ---- sayfa kabı ------------------------------------------------------- */
.ktapp .hd-main{padding:0; margin:0; max-width:none;}
/* ---- başlık: "Namaz ve İbadet Hadisleri" ------------------------------ */
/* `katBaslik` JS'ten `Hadisleri ` ile geliyor; em'i bakır italik yapıp
Kütüphane'nin Playfair başlığıyla aynı çizgide tutuyoruz. */
.ktapp .kt-pagehead h1 em{font-style:italic; font-weight:600; color:var(--copper);}
/* ---- kaynak filtresi (çip şeridi) ------------------------------------- */
.hk-filtre-h{padding:14px 2px 8px; font-size:11px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted);}
.hk-filtre{display:flex; gap:7px; overflow-x:auto; padding:0 2px 4px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;}
.hk-filtre::-webkit-scrollbar{display:none;}
/* ⚠ css/mobile.css ≤480px TÜM 'ları width:100% + min-height:44px yapıyor;
çipler ekranı kaplıyordu → genişlik açıkça geri alınıyor. */
.ktapp .hd-src-chip{flex:0 0 auto; width:auto !important; min-height:0 !important;
display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px;
border:1px solid var(--line); background:var(--card); box-shadow:var(--sh);
font:inherit; font-size:13px; font-weight:600; color:var(--text2); white-space:nowrap;
cursor:pointer; transition:border-color .16s, background .16s, color .16s;}
.ktapp .hd-src-chip:hover{border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .hd-src-chip.aktif{background:var(--copper); border-color:var(--copper); color:#fff;}
.ktapp .hd-src-chip-count{font-size:11px; font-weight:700; color:var(--muted);
font-variant-numeric:tabular-nums;}
.ktapp .hd-src-chip.aktif .hd-src-chip-count{color:rgba(255,255,255,.72);}
/* ---- arama çubuğu (2026) ----------------------------------------------
Tek çerçeve: ikon, alan ve dil seçici AYNI kutunun içinde; odaklanınca kutunun
tamamı bakır halkayla vurgulanır.
⚠ ÇİFT ÇERÇEVE TUZAĞI: `main.css:1607` `input[type="text"]{border:1px;radius:8px;
padding:10px 14px}` diyor ve özgüllüğü (0,0,1,1) `.kt-kqi`/(0,0,1,0)'dan YÜKSEK —
yükleme sırası ne olursa olsun kazanıyordu. Sonuç: dış kutunun içinde ikinci bir
çerçeve. Bu yüzden aşağıdaki sıfırlamalar `!important` ile yazıldı. */
.hk-arac{display:flex; align-items:center; margin:14px 2px 0;
background:var(--card); border:1px solid var(--line); border-radius:16px;
box-shadow:var(--sh); padding:3px 4px 3px 14px;
transition:border-color .16s, box-shadow .16s;}
.hk-arac:focus-within{border-color:var(--copper-light);
box-shadow:0 0 0 3px rgba(181,101,29,.10), var(--sh);}
.hk-arac > .hk-arac-ic{color:var(--copper); font-size:15px; flex-shrink:0;}
.ktapp .hk-arac input{flex:1 1 auto; min-width:0; direction:ltr;
border:0 !important; border-radius:0 !important; background:transparent !important;
box-shadow:none !important; outline:none !important;
font:inherit !important; font-size:15px !important; color:var(--text);
padding:13px 12px !important; margin:0 !important;}
.ktapp .hk-arac input::placeholder{color:var(--muted); direction:ltr;}
.hk-arac-ayrac{width:1px; height:22px; background:var(--line); flex-shrink:0; margin:0 2px;}
/* Dil seçici artık ayrı bir kutu değil, arama çubuğunun içinde iki küçük sekme. */
.hk-lang{display:flex; flex-shrink:0; gap:2px; padding:0 2px;}
.ktapp .hk-lang .lang-btn{width:auto !important; min-width:0 !important; min-height:0 !important;
padding:8px 11px; border:0; border-radius:11px; background:transparent;
font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.06em;
color:var(--muted); cursor:pointer; transition:background .16s, color .16s;}
.ktapp .hk-lang .lang-btn:hover{color:var(--copper-dark);}
.ktapp .hk-lang .lang-btn.active{background:var(--ivory2); color:var(--copper-dark);}
/* ---- kategori seçici (yalnız /hadis/kaynak/ sayfasında) --------------- */
/* Eski açılır menünün id'leri korundu (JS'e dokunulmadı), yalnız giydirme yenilendi. */
/* Kategori seçici: tam genişlik gri bar değil, içerik genişliğinde bir HAP.
Seçim yapılınca bakıra döner — "filtre açık" olduğu bir bakışta anlaşılsın. */
.hk-katsec{position:relative; display:flex; align-items:center; gap:10px;
flex-wrap:wrap; margin:10px 2px 0;}
.ktapp .hd-cat-trigger{display:inline-flex; align-items:center; gap:8px;
width:max-content !important; max-width:100%; min-width:0 !important; min-height:0 !important;
padding:9px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card);
box-shadow:var(--sh); font:inherit; font-size:13.5px; font-weight:600; color:var(--text2);
cursor:pointer; text-align:left; transition:all .16s;}
.ktapp .hd-cat-trigger:hover{border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .hd-cat-trigger > i:first-child{color:var(--copper); font-size:13px; flex-shrink:0;}
.ktapp .hd-cat-trigger span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ktapp .hk-katsec-ok{color:var(--muted); font-size:11px; flex-shrink:0; transition:transform .2s;}
.ktapp .hd-cat-trigger[aria-expanded="true"] .hk-katsec-ok{transform:rotate(180deg);}
/* seçili durum */
.ktapp .hd-cat-trigger.secili{background:var(--copper); border-color:var(--copper); color:#fff;}
.ktapp .hd-cat-trigger.secili > i:first-child,
.ktapp .hd-cat-trigger.secili .hk-katsec-ok{color:rgba(255,255,255,.8);}
.ktapp .hd-cat-trigger.secili:hover{background:var(--copper-dark); border-color:var(--copper-dark); color:#fff;}
.hd-cat-menu{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
background:var(--card); border:1px solid var(--line); border-radius:14px;
box-shadow:var(--sh-lg); overflow:hidden;}
.hd-cat-menu[hidden]{display:none;}
.hd-cat-menu-search{padding:10px 12px; border-bottom:1px solid var(--line);}
.ktapp .hd-cat-menu-search input{width:100%; border:1px solid var(--line); border-radius:11px;
padding:9px 12px; font:inherit; font-size:14px; color:var(--text); background:var(--ivory);
outline:none;}
.ktapp .hd-cat-menu-search input:focus{border-color:var(--copper-light);}
.hd-cat-menu-list{max-height:320px; overflow-y:auto; overscroll-behavior:contain; padding:6px;}
.ktapp .hd-cat-menu-list button,
.ktapp .hd-cat-menu-list a{display:flex; align-items:center; gap:8px; width:100% !important;
min-height:0 !important; padding:10px 12px; border:0; border-radius:10px; background:none;
font:inherit; font-size:13.5px; color:var(--text); text-align:left; cursor:pointer;}
.ktapp .hd-cat-menu-list button:hover,
.ktapp .hd-cat-menu-list a:hover{background:var(--ivory);}
.ktapp .hd-cat-menu-list .is-active,
.ktapp .hd-cat-menu-list .aktif{background:var(--ivory2); color:var(--copper-dark); font-weight:700;}
/* Kaynağın Arapça adı — açıklamanın hemen ALTINDA, sayaçlardan ÖNCE.
(Önce sayaçların altındaydı; kendi başına bir satır gibi asılı duruyordu.) */
.ktapp .hk-ar-motto{display:block; margin:5px 0 2px; font-family:'Amiri','iar-kuran-hat',serif;
font-size:16px; color:var(--copper); line-height:1.6; direction:rtl; text-align:right;}
.ktapp .hk-ar-motto:empty{display:none;}
/* ---- sayfalama bilgisi ------------------------------------------------ */
.ktapp .sayfa-bilgi{padding:10px 2px 2px; font-size:12.5px; color:var(--muted);
font-variant-numeric:tabular-nums;}
.ktapp .sayfa-bilgi b{color:var(--copper-dark); font-weight:700;}
/* ---- hadis listesi ---------------------------------------------------- */
.hk-liste{display:flex; flex-direction:column; gap:10px; padding:10px 0 4px;}
.ktapp .hadis-karti{background:var(--card); border:1px solid var(--line); border-radius:16px;
box-shadow:var(--sh); padding:14px 16px 12px; transition:border-color .16s, box-shadow .16s;}
.ktapp .hadis-karti.has-expand{cursor:pointer;}
.ktapp .hadis-karti:hover{border-color:var(--copper-light);}
.ktapp .hk-header{display:flex; align-items:center; gap:10px;
padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line);}
.ktapp .hk-no{flex-shrink:0; min-width:30px; height:24px; padding:0 8px;
display:inline-grid; place-items:center; border-radius:8px;
background:var(--ivory2); color:var(--copper-dark);
font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;}
.ktapp .hk-kaynak{flex:1; min-width:0; font-size:12.5px; line-height:1.45; color:var(--text2);
direction:ltr; unicode-bidi:plaintext;}
.ktapp .hk-expand{flex-shrink:0; color:var(--muted); font-size:13px; line-height:1;
transition:transform .32s cubic-bezier(.16,1,.3,1), color .2s;}
.ktapp .hadis-karti:hover .hk-expand{color:var(--copper);}
.ktapp .hadis-karti.expanded .hk-expand{transform:rotate(180deg); color:var(--copper);}
/* ⚠ `max-height` GEÇİŞİ YOK — bilerek. Önce `transition:max-height .32s` vardı ve
açılışta METİNLER ÜST ÜSTE BİNİYORDU: `.expanded` sınıfı `overflow`u ANINDA
`visible` yapıyor, ama `max-height` 210px'ten 99999px'e 320 ms boyunca
animasyonda; o süre boyunca içerik hâlâ kısa olan kutudan taşıp altındaki
Türkçe metnin üzerine basılıyordu (kullanıcı ekran görüntüsüyle bildirdi).
Üstelik `max-height` compositor'a devredilemez; 320 ms boyunca KART BAŞINA
yeniden yerleşim demekti — altındaki 47 kart her karede yeniden hesaplanıyordu.
Geçişi kaldırmak hem hatayı hem de o maliyeti bitiriyor; hedef 99999px olduğu
için animasyon zaten ilk %0,5'te bitiyor, yani görsel kayıp yok. */
.ktapp .hk-arapca{font-family:'Amiri','iar-kuran-hat','mushafR',serif;
font-size:21px; line-height:2.05; color:var(--espresso);
direction:rtl; text-align:right; overflow:hidden;}
.ktapp .hk-metin{margin-top:12px; font-size:15.5px; line-height:1.8; color:var(--text);
overflow:hidden;}
/* Kırpma: kısa hadisler tam görünür, uzunlar akordeon (JS `has-expand` verir). */
.ktapp .hadis-karti:not(.has-expand) .hk-arapca,
.ktapp .hadis-karti:not(.has-expand) .hk-metin{max-height:none; overflow:visible;}
.ktapp .hadis-karti.has-expand .hk-arapca{max-height:210px;}
.ktapp .hadis-karti.has-expand .hk-metin{max-height:230px;}
/* `99999px` değil `none`: sayısal bir tavan kaldığı sürece uzun hadislerde
içerik yine kutudan taşabiliyor. `none` + `visible` kutuyu içeriğe göre büyütür. */
.ktapp .hadis-karti.expanded .hk-arapca,
.ktapp .hadis-karti.expanded .hk-metin{max-height:none; overflow:visible;}
.ktapp .hk-metin-eksik{display:flex; align-items:center; gap:8px; font-size:12.5px;
font-style:italic; color:var(--muted); background:var(--ivory); border-radius:10px;
padding:10px 12px; margin-top:12px;}
.ktapp .hk-tahric{margin-top:12px; padding-top:10px; border-top:1px dashed var(--border);
font-size:12.5px; line-height:1.7; color:var(--muted);}
.ktapp .hadis-karti.has-expand:not(.expanded) .hk-tahric{display:none;}
.ktapp .hk-fallback-note{display:flex; align-items:center; gap:8px; margin-top:12px;
padding:9px 12px; border-radius:10px; background:var(--ivory);
border-left:3px solid var(--goldsoft); font-size:12px; font-style:italic; color:var(--text2);}
.ktapp .hk-fallback-note i{color:var(--copper); font-style:normal;}
/* Kopyala / paylaş — kare ikon düğmeler (mobile.css genişlik tuzağına karşı sabit). */
.ktapp .hk-actions{display:flex; justify-content:flex-end; gap:8px;
margin-top:12px; padding-top:10px; border-top:1px solid var(--line);}
/* Kare kalsınlar diye dört ölçü de sabit: `mobile.css` genişliği %100 yapıyor,
`mobile-fix-2026.css` de min-width/min-height 44 px dayatıyordu (ölçüldü: 44×36
dikdörtgen çıkıyordu). 44 px zaten önerilen dokunma hedefi — ona oturtuldu. */
.ktapp .hk-btn{width:44px !important; height:44px !important;
min-width:44px !important; min-height:44px !important; max-width:44px !important;
flex:0 0 auto; padding:0; display:grid; place-items:center;
border:1px solid var(--line); border-radius:10px; background:var(--card);
color:var(--muted); font-size:14px; cursor:pointer; transition:all .16s;}
.ktapp .hk-btn:hover{border-color:var(--copper-light); color:var(--copper);}
.ktapp .hk-btn:active{transform:scale(.94);}
.ktapp .hk-btn:focus-visible{outline:2px solid var(--copper); outline-offset:2px;}
/* ---- yükleniyor / boş durum ------------------------------------------- */
.ktapp .yukleniyor{display:flex; flex-direction:column; align-items:center; gap:12px;
padding:48px 16px; color:var(--muted); font-size:13.5px;}
.ktapp .spinner{width:26px; height:26px; border:2px solid var(--line);
border-top-color:var(--copper); border-radius:50%; animation:hkspin .8s linear infinite;}
@keyframes hkspin{to{transform:rotate(360deg);}}
.ktapp .hata-mesaji{display:flex; flex-direction:column; align-items:center; gap:12px;
padding:44px 16px; text-align:center; color:var(--muted); font-size:14px;
background:var(--card); border:1px solid var(--line); border-radius:16px;}
.ktapp .hata-mesaji i{font-size:24px; color:var(--copper-light);}
.ktapp .btn-tekrar{width:auto !important; min-height:0 !important; padding:9px 18px;
border:1px solid var(--copper); border-radius:99px; background:var(--copper);
color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
/* ---- sayfalama -------------------------------------------------------- */
.ktapp .sayfalama{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:6px; padding:18px 0 4px;}
.ktapp .sayfa-btn{width:auto !important; min-width:38px; min-height:38px !important;
padding:0 12px; display:inline-grid; place-items:center;
border:1px solid var(--line); border-radius:11px; background:var(--card);
color:var(--text2); font:inherit; font-size:13.5px; font-weight:600;
font-variant-numeric:tabular-nums; cursor:pointer; transition:all .16s;}
.ktapp .sayfa-btn:hover:not(:disabled){border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .sayfa-btn.aktif,
.ktapp .sayfa-btn.active{background:var(--copper); border-color:var(--copper); color:#fff;}
.ktapp .sayfa-btn:disabled{opacity:.4; cursor:default;}
.ktapp .sayfa-ellipsis{padding:0 4px; color:var(--muted);}
.ktapp .sayfa-git{display:flex; align-items:center; gap:6px; margin-left:6px;}
.ktapp .sayfa-git-lbl{font-size:12.5px; color:var(--muted);}
.ktapp .sayfa-git-input{width:62px; min-height:38px; padding:0 10px; text-align:center;
border:1px solid var(--line); border-radius:11px; background:var(--card);
font:inherit; font-size:13.5px; color:var(--text); outline:none;
font-variant-numeric:tabular-nums;}
.ktapp .sayfa-git-input:focus{border-color:var(--copper-light);}
.ktapp .sayfa-git-btn{width:auto !important; min-height:38px !important; padding:0 14px;
border:1px solid var(--copper); border-radius:11px; background:var(--copper);
color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
/* ---- hadis detay modalı (body seviyesinde — .ktapp değişkenleri YOK) --- */
.modal-overlay{position:fixed; inset:0; z-index:1200; display:none;
align-items:center; justify-content:center; padding:16px;
background:rgba(36,19,8,.52); backdrop-filter:blur(3px);}
.modal-overlay.aktif{display:flex;} /* hadis.js `classList.add('aktif')` kullanıyor */
.modal-icerik{position:relative; width:100%; max-width:640px; max-height:82vh; overflow:auto;
background:#fff; border:1px solid #F0EAE0; border-radius:18px; padding:26px 22px 22px;
box-shadow:0 24px 60px rgba(42,23,16,.24);}
.modal-kapat{position:absolute; top:12px; right:12px;
width:38px !important; height:38px !important;
min-width:38px !important; min-height:38px !important; max-width:38px !important;
display:grid; place-items:center; border:1px solid #F0EAE0; border-radius:50%;
background:#fff; color:#9C8C80; font-size:14px; cursor:pointer;}
.modal-kapat:hover{color:#B5651D; border-color:#D4956A;}
.modal-arapca{font-family:'Amiri','iar-kuran-hat','mushafR',serif; font-size:22px; line-height:2.05;
color:#2A1710; direction:rtl; text-align:right; margin-bottom:16px;}
.modal-turkce{font-size:15.5px; line-height:1.8; color:#241308;}
.modal-kaynak{margin-top:16px; padding-top:12px; border-top:1px solid #F0EAE0;
font-size:12.5px; color:#6A5A4E;}
.modal-no{margin-top:4px; font-size:12px; color:#9C8C80; font-variant-numeric:tabular-nums;}
/* ---- toast ------------------------------------------------------------ */
.toast-bildirim{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
z-index:1300; max-width:calc(100% - 32px); padding:11px 18px; border-radius:99px;
background:#2A1710; color:#F7F4EE; font-size:13.5px; font-weight:500;
box-shadow:0 12px 30px rgba(42,23,16,.28);
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
.toast-bildirim.goster,
.toast-bildirim.show,
.toast-bildirim.aktif{opacity:1; transform:translate(-50%,0);}
/* ---- dar ekran -------------------------------------------------------- */
@media (max-width:600px){
.ktapp .hk-arapca{font-size:19.5px; line-height:1.95;}
.ktapp .hk-metin{font-size:15px; line-height:1.78;}
.ktapp .hadis-karti{padding:13px 14px 11px; border-radius:15px;}
.ktapp .hadis-karti.has-expand .hk-arapca{max-height:180px;}
.ktapp .hadis-karti.has-expand .hk-metin{max-height:200px;}
/* ⚠⚠ ASIL HATA BURADAYDI — mobilde hadis AÇILMIYOR, metinler ÜST ÜSTE BİNİYORDU.
Yukarıdaki iki kural ile yukarıdaki `.expanded` kuralı AYNI ÖZGÜLLÜKTE (4 sınıf);
eşitlikte SONRA gelen kazanır ve bu medya sorgusu dosyanın sonunda olduğu için
`.expanded`in `max-height:none`unu eziyordu. Sonuç: kutu 180 px'e kilitli
kalıyor ama `.expanded` `overflow:visible` verdiği için 428 px'lik Arapça
metin kutudan taşıp altındaki Türkçe meâlin ÜZERİNE basılıyordu.
(Ölçüldü: açıldıktan sonra kutu 180 / içerik 428.) Bu yüzden `.expanded`
geçersiz kılması medya sorgusunun İÇİNDE ve SONRASINDA tekrar yazılıyor. */
.ktapp .hadis-karti.expanded .hk-arapca,
.ktapp .hadis-karti.expanded .hk-metin{max-height:none;}
.hk-filtre{margin:0 -14px; padding:0 14px 4px;}
}