/* ============================================================================
   BLOG — 2026 tasarımı (Kütüphane/Hadis diliyle aynı).
   `kutuphane-app.css` bu dosyadan ÖNCE yüklenmelidir: `.ktapp` paleti
   (--card/--line/--copper/--sh…) oradan, `.ktapp` kapsamında geliyor.

   ⚠ TASARIMI VERİ BELİRLEDİ: 285 yazının 0'ında kapak görseli, 0'ında etiket var;
   %74'ünde kategori, %74'ünde özet yok (ölçüldü 2026-08-04). Bu yüzden görsel
   kart ızgarası yerine METİN ODAKLI satır listesi kullanıldı — Kütüphane'nin
   `.kt-krow` deseninin blog'a uyarlanmış hâli. Görsel olmayan içerikte ızgara
   düzeni boş kutular üretiyordu.
   ============================================================================ */

/* ---- liste sayfası --------------------------------------------------- */
.bl-intro{margin:10px 2px 0; font-size:14.5px; line-height:1.65; color:var(--text2);}

/* Kategori çipleri — hadis kaynak çipleriyle aynı dil, yatay kaydırmalı. */
.bl-cips{display:flex; gap:7px; overflow-x:auto; padding:14px 2px 4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.bl-cips::-webkit-scrollbar{display:none;}
/* ⚠ mobile.css ≤480px TÜM <a>/<button> genişliğine karışabiliyor; çipler sabitlenir. */
.ktapp .blog-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;
  text-decoration:none; transition:border-color .16s, background .16s, color .16s;}
.ktapp .blog-chip:hover{border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .blog-chip-on{background:var(--copper); border-color:var(--copper); color:#fff;}

.bl-azlink{display:inline-flex; align-items:center; gap:8px; margin:10px 2px 0;
  padding:9px 15px; border-radius:99px; border:1px dashed var(--border);
  background:transparent; font-size:13px; font-weight:600; color:var(--copper-dark);
  text-decoration:none;}
.ktapp .bl-azlink:hover{background:var(--ivory); border-style:solid;}

/* Bölüm etiketi (ör. "Tüm Yazılar") */
.bl-sec{display:flex; align-items:center; gap:10px; margin:18px 2px 8px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);}
.bl-sec::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---- yazı satırı ------------------------------------------------------ */
.bl-liste{display:flex; flex-direction:column; gap:8px; padding:2px 0 4px;}
.ktapp a.bl-row{display:flex; align-items:flex-start; gap:12px; width:100%;
  padding:14px 16px; border-radius:15px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--sh); text-align:left;
  text-decoration:none; color:inherit; transition:border-color .16s;}
.ktapp a.bl-row:hover{border-color:var(--copper-light);}
.bl-row-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.bl-row b{font-size:15.5px; font-weight:650; line-height:1.4; color:var(--espresso);
  letter-spacing:-.01em;}
.bl-ar{font-family:'Amiri','iar-kuran-hat',serif; font-size:14.5px; font-weight:400;
  color:var(--copper); direction:rtl; unicode-bidi:isolate;}
.bl-ozet{font-size:13.5px; line-height:1.6; color:var(--text2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.bl-meta{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:2px;
  font-size:12px; color:var(--muted);}
.bl-kat{display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px;
  background:var(--ivory2); color:var(--copper-dark); font-size:11px; font-weight:700;
  letter-spacing:.01em;}
.bl-nokta{width:3px; height:3px; border-radius:50%; background:var(--border);}
.ktapp .bl-row .bl-ok{color:var(--muted); font-size:15px; align-self:center; flex-shrink:0;}

/* Öne çıkan: ayrı bir kutu değil, listenin ilk satırının bakır şeridi. */
.ktapp a.bl-row.bl-one{border-color:var(--copper-light);
  box-shadow:0 1px 2px rgba(42,23,16,.05), 0 8px 22px rgba(181,101,29,.10);}
.bl-one-rozet{display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:99px; background:var(--copper); color:#fff; font-size:10.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;}

/* Boş liste (kategoride yazı yok vb.) */
.bl-bos{padding:26px 16px; text-align:center; color:var(--muted); font-size:14px;
  background:var(--card); border:1px dashed var(--border); border-radius:15px;}

/* ---- sayfalama (hadis-app.css ile aynı dil) --------------------------- */
.ktapp .blog-pagination{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px; padding:20px 0 4px;}
.ktapp .blog-pg{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; text-decoration:none; transition:all .16s;}
.ktapp .blog-pg:hover{border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .blog-pg-on{background:var(--copper); border-color:var(--copper); color:#fff;}
.ktapp .blog-pg-arrow{font-size:16px;}

/* ---- yazı sayfası ----------------------------------------------------- */
.bl-yazi{max-width:720px; margin:0 auto;}
.bl-ust{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:2px 2px 0;
  font-size:12.5px; color:var(--muted);}
.ktapp a.bl-ust-kat{display:inline-flex; align-items:center; padding:4px 11px;
  border-radius:99px; background:var(--ivory2); color:var(--copper-dark);
  font-size:11.5px; font-weight:700; text-decoration:none;}
.ktapp a.bl-ust-kat:hover{background:var(--copper); color:#fff;}

/* İçindekiler — Kütüphane fihrist diliyle */
.bl-toc{margin:16px 0 4px; background:var(--card); border:1px solid var(--line);
  border-radius:15px; box-shadow:var(--sh); overflow:hidden;}
.bl-toc[hidden]{display:none;}
.ktapp .bl-toc-bas{display:flex; align-items:center; gap:9px; width:100% !important;
  min-height:0 !important; padding:13px 16px; border:0; background:none;
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--copper-dark); cursor:pointer; text-align:left;}
.bl-toc-bas i{margin-left:auto; color:var(--muted); font-size:12px; transition:transform .2s;}
.bl-toc.open .bl-toc-bas i{transform:rotate(180deg);}
.bl-toc-liste{display:flex; flex-direction:column; padding:0 8px 8px;}
.ktapp .blog-toc-link{padding:8px 12px; border-radius:9px; font-size:13.5px;
  line-height:1.5; color:var(--text2); text-decoration:none;}
.ktapp .blog-toc-link:hover{background:var(--ivory); color:var(--copper-dark);}
.ktapp .blog-toc-sub{padding-left:26px; font-size:13px; color:var(--muted);}
.ktapp .blog-toc-link.is-active{background:var(--ivory2); color:var(--copper-dark); font-weight:650;}

/* Gövde tipografisi */
.bl-govde{margin-top:18px; font-size:16.5px; line-height:1.85; color:var(--text);}
.bl-govde > *:first-child{margin-top:0;}
.bl-govde h2{font-family:'Playfair Display',Georgia,serif; font-size:23px; font-weight:700;
  color:var(--espresso); margin:34px 0 12px; letter-spacing:-.01em; line-height:1.3;}
.bl-govde h3{font-size:18.5px; font-weight:700; color:var(--espresso2); margin:26px 0 10px;}
.bl-govde h4{font-size:16px; font-weight:700; color:var(--espresso2); margin:20px 0 8px;}
/* ⚠ 209 yazının içerik HTML'i KENDİ <h1>'ini taşıyor; sayfada zaten .kt-pagehead h1
   var. Çift h1 SEO'da sorun; gövdedekini görsel olarak h2 seviyesine indiriyoruz
   (kalıcı çözüm veriyi düzeltmek — ayrı iş kalemi). */
.bl-govde h1{font-family:'Playfair Display',Georgia,serif; font-size:23px; font-weight:700;
  color:var(--espresso); margin:34px 0 12px; line-height:1.3;}
.bl-govde p{margin:0 0 16px;}
.bl-govde ul,.bl-govde ol{margin:0 0 16px; padding-left:22px;}
.bl-govde li{margin:0 0 7px;}
.bl-govde a{color:var(--copper); text-decoration:underline; text-underline-offset:2px;}
.bl-govde blockquote{margin:20px 0; padding:14px 18px; border-left:3px solid var(--copper-light);
  background:var(--ivory); border-radius:0 12px 12px 0; color:var(--text2); font-style:italic;}
.bl-govde img{max-width:100%; height:auto; border-radius:12px; margin:16px 0;}
.bl-govde table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;
  display:block; overflow-x:auto;}
.bl-govde th,.bl-govde td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.bl-govde th{background:var(--ivory2); font-weight:700; color:var(--espresso);}
.bl-govde hr{border:0; border-top:1px solid var(--line); margin:26px 0;}
/* Arapça bloklar (YDS köşesi 68 yazıda kullanıyor) */
.bl-govde .yds-ar,.bl-govde .yds-ar-poem{font-family:'Amiri','iar-kuran-hat',serif;
  font-size:20px; line-height:2; direction:rtl; text-align:right; color:var(--espresso);}
.bl-govde .yds-intro{background:var(--ivory); border-radius:12px; padding:14px 16px;
  margin:0 0 18px; font-size:15px; color:var(--text2);}
.bl-govde .yds-meta{font-size:12.5px; color:var(--muted); margin:0 0 14px;}

/* Kaydet düğmesi */
.bl-arac{display:flex; justify-content:flex-end; margin:12px 2px 0;}
.ktapp .blog-fav{display:inline-flex; align-items:center; gap:8px;
  width:auto !important; min-height:0 !important; padding:9px 15px; 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); cursor:pointer;}
.ktapp .blog-fav:hover{border-color:var(--copper-light); color:var(--copper-dark);}
.ktapp .blog-fav[aria-pressed="true"]{background:var(--copper); border-color:var(--copper); color:#fff;}

/* Kapak görseli — veri tarafında şu an 0 yazıda var, yine de kırık görünmesin. */
.blog-d-cover{height:220px; margin:18px 0 4px; border-radius:15px;
  background:var(--ivory2) center/cover no-repeat; border:1px solid var(--line);}

/* Okuma ilerleme çubuğu (detay.html inline script'i width'i yazar) */
.blog-progress{position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--copper); z-index:60; transition:width .1s linear;}

/* Yazar avatarı — denetleyici `.blog-d-av`'ı arka plan görseliyle basıyor
   (blogAvHtml). Baş harf hâli de aynı kutuda ortalanır. */
.blog-d-av{width:46px; height:46px; flex-shrink:0; border-radius:50%;
  background:var(--ivory2) center/cover no-repeat; display:grid; place-items:center;
  color:var(--copper-dark); font-weight:700; font-size:17px;}
.blog-d-av.is-logo{background-size:70%; background-color:var(--ivory);}

/* Etiketler — veri tarafında şu an 0 yazıda var; görünürse kategori çipi diliyle. */
.blog-art-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px;}
.blog-art-tags:empty{display:none;}
.blog-tag{display:inline-flex; align-items:center; padding:4px 11px; border-radius:99px;
  background:var(--ivory2); color:var(--text2); font-size:12px; font-weight:600;}

/* "Sitede keşfet" bağ şeridi */
.bl-kesfet{margin-top:26px; padding:15px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:15px; box-shadow:var(--sh);}
.bl-kesfet-h{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:11px;}
.bl-kesfet-l{display:flex; flex-wrap:wrap; gap:8px;}
.ktapp .bl-kesfet-l a{display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--ivory); font-size:13px; font-weight:600; color:var(--text2);
  text-decoration:none;}
.ktapp .bl-kesfet-l a:hover{border-color:var(--copper-light); color:var(--copper-dark);}

/* Yazar kutusu */
.bl-yazar{display:flex; align-items:center; gap:13px; margin-top:26px; padding:15px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:15px; box-shadow:var(--sh);}
.bl-yazar-av{width:46px; height:46px; flex-shrink:0; border-radius:50%;
  background:var(--ivory2); display:grid; place-items:center; overflow:hidden;
  color:var(--copper-dark); font-weight:700; font-size:17px;}
.bl-yazar-av img{width:100%; height:100%; object-fit:cover;}
.bl-yazar-b{min-width:0;}
.bl-yazar-ad{font-size:14.5px; font-weight:700; color:var(--espresso);}
.bl-yazar-unvan{font-size:12.5px; color:var(--muted); margin-top:2px;}
.bl-yazar-bio{font-size:13px; line-height:1.6; color:var(--text2); margin-top:5px;}

/* Yorumlar */
.bl-yorum{margin-top:28px;}
.ktapp .blog-cm{padding:13px 15px; margin-bottom:8px; background:var(--card);
  border:1px solid var(--line); border-radius:14px;}
.ktapp .blog-cm-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-size:12.5px; color:var(--muted);}
.ktapp .blog-cm-who{font-weight:700; color:var(--espresso);}
.ktapp .blog-cm-body{font-size:14.5px; line-height:1.7; color:var(--text);}
.ktapp .blog-cm-empty,.ktapp .blog-cm-note{padding:16px; text-align:center;
  color:var(--muted); font-size:13.5px;}
.ktapp .blog-cm-form textarea{width:100%; min-height:96px; padding:12px 14px;
  border:1px solid var(--line) !important; border-radius:13px !important;
  background:var(--card); font:inherit; font-size:14.5px; color:var(--text); outline:none;}
.ktapp .blog-cm-form textarea:focus{border-color:var(--copper-light) !important;}
.ktapp .blog-cm-send,.ktapp .blog-cm-cta,.ktapp .blog-cm-cta2{display:inline-flex;
  align-items:center; gap:7px; width:auto !important; min-height:0 !important;
  margin-top:9px; padding:10px 18px; border-radius:99px; border:1px solid var(--copper);
  background:var(--copper); color:#fff; font:inherit; font-size:13.5px; font-weight:600;
  text-decoration:none; cursor:pointer;}
.ktapp .blog-cm-cta2{background:transparent; color:var(--copper-dark);}
.ktapp .blog-cm-msg{margin-top:8px; font-size:13px; color:var(--muted);}

/* Geri dön */
.ktapp a.bl-geri{display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  padding:10px 16px; border-radius:99px; border:1px solid var(--line);
  background:var(--card); font-size:13.5px; font-weight:600; color:var(--text2);
  text-decoration:none;}
.ktapp a.bl-geri:hover{border-color:var(--copper-light); color:var(--copper-dark);}

/* İçindekiler dar ekranda KAPALI açılır (eski blog.css ile aynı davranış:
   masaüstünde hep açık, ≤900px'te katlanır). blog-reader.js `.open`'ı #blogToc'a
   verir ve ≤900px'te bir bağa tıklanınca kapatır — kırılma noktası aynı olmalı. */
@media (max-width:900px){
  .bl-toc .bl-toc-liste{display:none;}
  .bl-toc.open .bl-toc-liste{display:flex;}
}

/* ---- dar ekran -------------------------------------------------------- */
@media (max-width:600px){
  .bl-govde{font-size:16px; line-height:1.8;}
  .bl-govde h2{font-size:20.5px;}
  .bl-govde h1{font-size:20.5px;}
  .bl-govde h3{font-size:17px;}
  .ktapp a.bl-row{padding:13px 14px; border-radius:14px;}
  .bl-row b{font-size:15px;}
  .bl-cips{margin:0 -14px; padding:14px 14px 4px;}
}