/* dijiPU blog — listeleme ve yazı sayfalarına özgü stiller.
   Kabuk (token, nav, mobil menü, footer, tipografi, tablo, callout)
   assets/legal.css'ten gelir; bu dosya yalnızca blogda olup yasal sayfalarda
   olmayan parçaları ekler. İkisi birlikte yüklenir, sırası: legal.css → blog.css.
   Bu yüzden blog HTML'lerinde .legal-hero / .legal-body gibi kabuk sınıfları
   görülür — 130 satır CSS'i kopyalamamak için bilinçli tercih. */

/* ── listeleme ─────────────────────────────────────────────────────────────── */
/* 290px: 1024px genişlikte üç kolon sığsın (318px'te 2+1 kalıyordu). */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;padding:64px 0 24px}
/* Taban gölge .feature-card, hover ise .audience-card ile aynı — sitenin kart dili. */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px;box-shadow:0 20px 60px rgba(19,28,48,.07);text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s,border-color .3s}
.post-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(19,28,48,.12);border-color:rgba(246,167,26,.4)}
.post-tag{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--paper-2);color:#3d4557;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.post-card h2{font-size:22px;line-height:1.22;margin:16px 0 10px}
.post-card p{font-size:15px;line-height:1.72;color:var(--muted-dark);margin-bottom:20px}
.post-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted-dark)}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:#c3c9d6}
/* #9a6300, beyaz üzerinde 5.05:1 — 14px/800 için AA geçer. Gövde link rengi
   (#b57500, legal.css) 3.81:1'de kalıyor; onu değiştirmek tüm sayfaların
   palet kararı olduğu için burada yalnızca blog kartı düzeltildi. */
.post-card .more{margin-top:16px;font-size:14px;font-weight:800;color:#9a6300}
.post-card:hover .more{color:#7d5000}
.post-card:focus-visible,.post-nav a:focus-visible,.crumbs a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* Gradient, radius ve metin rengi index.html'deki .cta-box ile aynı. */
.blog-outro{margin:0 0 88px;padding:34px;border-radius:34px;background:radial-gradient(circle at 85% 10%,rgba(246,167,26,.26),transparent 30%),linear-gradient(145deg,#111725,#20283c);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.blog-outro h2{font-size:26px;margin-bottom:8px}
.blog-outro p{color:#b7becc;font-size:15px;line-height:1.7;max-width:56ch}

/* ── yazı sayfası ──────────────────────────────────────────────────────────── */
/* Yazı künyesi için legal.css'teki .legal-meta kullanılıyor; ikinci bir isim
   tanımlanmadı ki değerler zamanla ayrışmasın. */

/* kırıntı yolu — BreadcrumbList şemasıyla birebir aynı metni taşır */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:13.5px;color:#8d95a6}
/* padding: dokunma hedefini 24px üzerine çıkarır (WCAG 2.2 SC 2.5.8). */
.crumbs a{display:inline-block;padding:4px 0;color:#cfd4df;text-decoration:none;font-weight:600}
.crumbs a:hover{color:#fff}
.crumbs span[aria-current]{color:#8d95a6}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 88px}
.post-nav a{display:block;padding:24px;border:1px solid var(--line-dark);border-radius:var(--radius-sm);background:#fff;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.post-nav a:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(19,28,48,.1)}
.post-nav small{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:8px}
.post-nav strong{font-family:Manrope,Inter,sans-serif;font-size:16px;line-height:1.35;letter-spacing:-.04em}

@media(max-width:980px){
  .blog-grid{padding-top:44px}
  .post-nav{grid-template-columns:1fr;margin-bottom:64px}
  .blog-outro{margin-bottom:64px}
}
@media(max-width:680px){
  .post-card{padding:22px;border-radius:22px}
  .post-card h2{font-size:20px}
  .blog-outro{padding:24px;border-radius:22px}
  .blog-outro h2{font-size:22px}
}