/* =============================================================================
   blog.css — YALNIZCA blog listesi ve blog detay sayfası
   -----------------------------------------------------------------------------
   Ana sayfa ve ortak UI bileşenleri (hero, kredi türü kartları, banka
   bileşenleri, arama, karşılaştırma, boş durumlar) components.css içindedir.
   Bu dosyaya blog dışı bir kural eklemeyin.

   İstisna: '.post-aside .bank-strip' gibi kurallar ortak bir bileşenin blog
   detay sayfasına özgü geçersiz kılmalarıdır; bilerek burada tutulur.
   ============================================================================= */

/* --- Kategori şeridi --- */
.blog-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 28px}
.blog-cats a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  text-decoration:none;color:var(--text);font-size:14px}
.blog-cats a:hover{border-color:var(--green);color:var(--green)}
.blog-cats a.is-on{background:var(--green);border-color:var(--green);color:#fff}
.blog-cats a span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.blog-cats a.is-on span{color:#C7D2CA}
/* --- Öne çıkan yazı --- */
.post-featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:24px;align-items:center;border:1px solid var(--line);border-radius:12px;
  background:#fff;overflow:hidden;margin-bottom:28px}
.post-featured__img{display:block;height:100%;min-height:220px;background:var(--bg)}
.post-featured__img img{width:100%;height:100%;object-fit:cover;display:block}
.post-featured__body{padding:24px 26px}
.post-featured h2{font-size:26px;line-height:1.25;margin:8px 0 10px}
.post-featured h2 a{color:var(--ink);text-decoration:none}
.post-featured h2 a:hover{color:var(--green)}
.post-featured p{margin:0;color:var(--muted);font-size:15px}
.post-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;
  background:var(--green);color:#fff;letter-spacing:.2px}
.post-badge--sponsored{background:#F0E6D2;color:#7A5C22}
/* ==========================================================================
   BLOG DETAY GENİŞLİKLERİ
   Yalnızca bu sayfayı ilgilendirir; genel .container ölçüsü değişmez.
   Makale kolonu 900px, alt öneri blokları 1080px.
   ========================================================================== */
:root{
  --post-width:  940px;   /* başlık, meta, kapak, içindekiler, gövde */
  --aside-width: 1080px;  /* ilgili araçlar, bankalar, ilgili yazılar */
}
/* Başlık, özet, meta, kapak, içindekiler ve gövde aynı hizada */
.post{max-width:var(--post-width);margin:0 auto}
.post-head,
.post-cover,
.post-toc,
.post-body,
.post-tags,
.sponsored-note{max-width:100%}
/* Makale sonrası tüm bloklar (reklam, yasal uyarı) alt bölümlerle hizalı */
.post ~ .ad-slot,
.post ~ .disclaimer{max-width:var(--aside-width);margin-inline:auto}
/* Alt öneri blokları makaleden geniş, ama container'dan dar */
.post-aside{max-width:var(--aside-width);margin:0 auto}
.post-head{margin-bottom:22px}
.post h1{font-size:clamp(28px,4vw,38px);line-height:1.2;margin:0 0 12px}
/* Meta satırı: solda yazar/tarih/okuma süresi, sağda kategori rozeti.
   Dar ekranda kategori alt satıra düşer. */
.post-byline{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 16px;flex-wrap:wrap;
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);
}
.post-byline__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-width:0}
.post-category{
  flex:none;
  display:inline-flex;align-items:center;
  padding:3px 12px;border-radius:20px;
  background:var(--surface-4);border:1px solid #BFD3C6;
  color:var(--green);font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease;
}
.post-category:hover{background:#DCE9E0;border-color:#8FAE9B;text-decoration:none}
@media (max-width:560px){
  /* Kategori rozeti alta düşer ve sola hizalanır */
  .post-byline{align-items:flex-start}
  .post-byline__meta{flex:1 1 100%}
  .post-category{margin-top:2px}
}
.sponsored-note{margin:16px 0 0;padding:11px 14px;border:1px solid #E6D6B4;
  background:#FBF5E7;border-radius:8px;font-size:13.5px;color:#7A5C22}
.post-cover{margin:0 0 24px}
.post-cover img{width:100%;height:auto;border-radius:10px;display:block}
.post-toc{border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:16px 20px;margin:0 0 26px}
.post-toc__title{margin:0 0 10px;font-weight:600;font-size:14px}
.post-toc ol{margin:0;padding-left:20px}
.post-toc li{margin:5px 0;font-size:14.5px}
.post-toc li.lvl-h3{padding-left:14px;font-size:13.5px}
.post-toc a{color:var(--text);text-decoration:none}
.post-toc a:hover{color:var(--green);text-decoration:underline}
.post-body{font-size:17px;line-height:1.75}
/* --------------------------------------------------------------------------
   İÇERİK GENİŞLİĞİ
   post-body aynı zamanda .prose sınıfını taşır ve main.css içindeki
   '.prose{max-width:72ch}' kuralı metni ~760px'te tutuyordu. Blog detayda
   metin, makale kolonunun tamamını kullanmalıdır; bu yüzden hem o kural hem
   de buradaki eski karakter sınırı sıfırlanır.
   -------------------------------------------------------------------------- */
.post-body.prose,
.post-body{max-width:none;width:100%}
.post-body > *,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote,
.post-body table,
.post-body figure,
.post-body pre{max-width:none}
.post-body h2{font-size:24px;margin:34px 0 12px;scroll-margin-top:80px}
.post-body h3{font-size:19px;margin:26px 0 10px;scroll-margin-top:80px}
.post-body img{max-width:100%;height:auto;border-radius:8px}
.post-body blockquote{margin:20px 0;padding:12px 18px;border-left:3px solid var(--gold);
  background:#FAF8F3;color:var(--text)}
.post-body pre{background:#16221B;color:#F6F3EC;padding:14px 16px;border-radius:8px;
  overflow-x:auto;font-size:13.5px}
.post-body code{background:#F0EDE5;padding:1px 5px;border-radius:4px;font-size:.92em}
.post-body pre code{background:none;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.post-body th{background:#FAF8F3;font-weight:600}
.post-tags{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0 0;padding-top:16px;
  border-top:1px solid var(--line)}
.tag{font-size:12.5px;padding:3px 10px;border:1px solid var(--line);
  border-radius:20px;color:var(--muted)}
/* --- Sayfalama --- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:36px 0 0}
.pagination a,.pagination span{min-width:40px;text-align:center;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;
  color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
.pagination a:hover{border-color:var(--green);color:var(--green)}
.pagination span[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:860px){
  .post-featured{grid-template-columns:1fr}
  .post-featured__img{min-height:180px}
  .post-featured__body{padding:18px 20px}
  .post-featured h2{font-size:22px}
}
/* Makale kolonu container'dan geniş olamaz; dar ekranlarda kendiliğinden daralır */
@media (max-width:1180px){
  :root{--aside-width:100%}
}
@media (max-width:980px){
  :root{--post-width:100%}
}
@media (max-width:560px){
  .post-body{font-size:16px}
}
/* ==========================================================================
   İLGİLİ YAZI KARTLARI (blog detay altı)
   Masaüstü 4, tablet 2, mobil 1 kolon. Kart yükseklikleri eşit kalır.
   ========================================================================== */
.related-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.related-card{display:flex;height:100%}
.related-card__link{
  display:flex;flex-direction:column;
  width:100%;height:100%;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  text-decoration:none;color:var(--text);
  transition:transform .2s var(--ease, ease),
             border-color .2s var(--ease, ease),
             box-shadow .2s var(--ease, ease);
}
.related-card__link:hover{
  transform:translateY(-2px);
  border-color:#8FAE9B;
  box-shadow:0 6px 18px rgba(22,34,27,.1);
  text-decoration:none;
}
/* Kapak alanı sabit orana sahip: kart yükseklikleri eşit kalır */
.related-card__cover{
  display:block;position:relative;
  width:100%;aspect-ratio:16 / 9;
  background:var(--surface-3);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.related-card__cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s var(--ease, ease);
}
.related-card__link:hover .related-card__cover img{transform:scale(1.03)}
.related-card__placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#A9B0A6;
}
.related-card__body{
  display:flex;flex-direction:column;gap:6px;
  padding:13px 15px 15px;flex:1;
}
.related-card__cat{
  align-self:flex-start;
  padding:2px 9px;border-radius:20px;
  background:var(--surface-4);border:1px solid #BFD3C6;
  color:var(--green);font-size:11.5px;font-weight:600;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.related-card__title{
  font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);
}
.related-card__link:hover .related-card__title{color:var(--green)}
.related-card__excerpt{
  font-size:13.2px;line-height:1.5;color:var(--muted);
  margin-top:auto;padding-top:4px;
}
/* ---------------------------------------------------------- BANKA ŞERİDİ --
   Değişken genişlikli çipler sağ kenarda düzensiz boşluk bırakıyordu.
   Eşit kolonlu ızgaraya alındı; her kırılımda gösterilen çip sayısı kolon
   sayısının katı olacak şekilde sınırlanır, böylece satırlar hep tam dolar. */
.post-aside .bank-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:9px;
}
.post-aside .bank-chip{
  display:flex;align-items:center;gap:9px;
  width:100%;min-width:0;
  justify-content:flex-start;
}
.post-aside .bank-chip > span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:1179px){
  .post-aside .bank-strip{grid-template-columns:repeat(4, minmax(0,1fr))}
  .post-aside .bank-chip:nth-child(n+9){display:none}
}
@media (max-width:899px){
  .post-aside .bank-strip{grid-template-columns:repeat(3, minmax(0,1fr))}
  .post-aside .bank-chip:nth-child(n+9){display:flex}
  .post-aside .bank-chip:nth-child(n+10){display:none}
}
@media (max-width:599px){
  .post-aside .bank-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
  .post-aside .bank-chip:nth-child(n+9){display:none}
}
@media (max-width:1024px){
  .related-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:560px){
  .related-grid{grid-template-columns:1fr;gap:14px}
  .related-card__cover{aspect-ratio:2 / 1}
}