/* ====================================================================
   Özbudent — Blog stilleri (yazı sayfaları + /blog index)
   kategori.css ile BİRLİKTE yüklenir (cat-hero, cat-faq, cat-final oradan).
   Prefix: blog-
==================================================================== */

/* ---- Hero meta satırı (tarih · okuma süresi) ---- */
.blog-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.blog-meta span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:500; color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 14px;
}
.blog-meta svg{ width:14px; height:14px; }

/* ---- Yazı gövdesi ---- */
.blog-govde{ background:#fff; padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px); }
.blog-wrap{ max-width:780px; margin:0 auto; padding:0 22px; }
.blog-bolum{ margin-bottom:clamp(30px,4.5vw,46px); }
.blog-bolum h2{
  font-family:var(--display); font-weight:600; color:var(--navy);
  font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.22;
  padding-left:16px; border-left:4px solid var(--brand);
  margin-bottom:16px;
}
.blog-bolum h3{
  font-family:var(--display); font-weight:600; color:var(--navy);
  font-size:clamp(1.05rem,2vw,1.2rem); margin:22px 0 10px;
}
.blog-bolum p{ color:#3c4a63; line-height:1.78; margin-bottom:14px; }
.blog-bolum ul, .blog-bolum ol{ margin:0 0 16px 4px; padding-left:0; list-style:none; }
.blog-bolum li{
  position:relative; color:#3c4a63; line-height:1.7;
  padding:5px 0 5px 28px;
}
.blog-bolum ul li::before{
  content:""; position:absolute; left:4px; top:14px;
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--cyan));
}
.blog-bolum ol{ counter-reset:bsay; }
.blog-bolum ol li{ counter-increment:bsay; padding-left:34px; }
.blog-bolum ol li::before{
  content:counter(bsay); position:absolute; left:0; top:7px;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-bright));
}
.blog-bolum strong{ color:var(--navy); font-weight:600; }
.blog-bolum a{ color:var(--brand); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.blog-bolum a:hover{ color:var(--brand-bright); }

/* ---- Önemli uyarı / bilgi kutusu (ajanlar gövdede kullanabilir) ---- */
.blog-kutu{
  background:linear-gradient(135deg,#eef5ff,#f6fbff);
  border:1px solid rgba(12,92,224,.14); border-left:4px solid var(--brand);
  border-radius:14px; padding:18px 20px; margin:0 0 16px;
}
.blog-kutu p:last-child{ margin-bottom:0; }

/* ---- İlgili tedaviler şeridi ---- */
.blog-iliskili{ border-top:1px solid #e7edf7; padding-top:26px; margin-top:8px; }
.blog-iliskili .bi-baslik{
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#7a89a8; margin-bottom:14px;
}
.blog-iliskili .bi-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.blog-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:500; color:var(--brand);
  background:#eef5ff; border:1px solid rgba(12,92,224,.18);
  border-radius:999px; padding:9px 18px; text-decoration:none;
  transition:background .25s, color .25s, transform .25s;
}
.blog-chip:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }
.blog-chip svg{ width:14px; height:14px; }

/* ---- Editör / güncelleme notu (E-E-A-T) ---- */
.blog-not{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid #e3eaf6; border-radius:14px;
  padding:16px 20px; margin-top:26px;
}
.blog-not svg{ width:20px; height:20px; flex:none; color:var(--brand); margin-top:2px; }
.blog-not p{ font-size:.85rem; color:#5d6b87; line-height:1.6; margin:0; }

/* ====================================================================
   /blog INDEX
==================================================================== */
.blog-liste{ background:var(--paper); padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,84px); }
.blog-liste .wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
.blog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); /* min(): 310px'ten dar ekranda yatay taşmasın */
  gap:24px;
}
.blog-kart{
  display:flex; flex-direction:column; background:#fff; border-radius:18px;
  border:1px solid #e7edf7; overflow:hidden; text-decoration:none;
  transition:transform .3s, box-shadow .3s;
}
.blog-kart:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(6,20,58,.10); }
.blog-kart .bk-gorsel{ position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,var(--navy),var(--brand)); }
.blog-kart .bk-gorsel img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-kart:hover .bk-gorsel img{ transform:scale(1.05); }
.blog-kart .bk-ic{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.blog-kart .bk-tarih{ font-size:.76rem; font-weight:600; letter-spacing:.05em; color:var(--brand); margin-bottom:8px; }
.blog-kart h3{
  font-family:var(--display); font-weight:600; color:var(--navy);
  font-size:1.05rem; line-height:1.35; margin-bottom:10px;
}
.blog-kart p{ font-size:.88rem; color:#5d6b87; line-height:1.62; margin-bottom:16px; }
.blog-kart .bk-devam{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.85rem; font-weight:600; color:var(--brand);
}
.blog-kart .bk-devam svg{ width:15px; height:15px; transition:transform .25s; }
.blog-kart:hover .bk-devam svg{ transform:translateX(4px); }

@media (max-width:760px){
  .blog-wrap{ padding:0 18px; }
  .blog-grid{ grid-template-columns:1fr; }
}