/* ===========================================================
   GURIZON · BLOG — listeleme + tekil yazı
   Açık tema (index1-mix) ile uyumlu. blog.php ve blog-yazi.php kullanır.
   =========================================================== */

/* ====== ortak ====== */
.blog-wrap{padding:150px 0 40px}
@media(max-width:768px){.blog-wrap{padding:120px 0 30px}}
.blog-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7f1d1d;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);padding:8px 16px;border-radius:999px;margin-bottom:20px}
.blog-title{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-1px;line-height:1.08;margin:0 0 16px;color:#1a1612}
.blog-title .accent{color:#dc2626}
.blog-lead{font-size:17px;line-height:1.7;color:#4a453c;max-width:640px;margin:0}

/* ====== listeleme kartları ====== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:24px;margin-top:56px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(220,38,38,.14);border-radius:20px;overflow:hidden;box-shadow:0 14px 40px -26px rgba(127,20,20,.28);transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -28px rgba(127,20,20,.4)}
.blog-cover{position:relative;height:168px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc2626 0%,#7f1d1d 100%);overflow:hidden}
.blog-cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);background-size:20px 20px;opacity:.5}
.blog-cover i{font-size:52px;color:#fff;opacity:.92;position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.blog-cat{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.blog-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.blog-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#8a8577;font-weight:600;margin-bottom:12px}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:#c9b8a0}
.blog-card h2{font-size:19px;font-weight:800;line-height:1.3;margin:0 0 10px;color:#1a1612}
.blog-card:hover h2{color:#7f1d1d}
.blog-excerpt{font-size:14px;line-height:1.6;color:#6f6a60;margin:0 0 18px;flex:1}
.blog-readmore{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#dc2626}
.blog-card:hover .blog-readmore i{transform:translateX(4px)}
.blog-readmore i{transition:transform .2s}
.blog-card > a.blog-cover-link{color:inherit;text-decoration:none}

/* ====== tekil yazı ====== */
.post-head{max-width:760px;margin:0 auto;text-align:center}
.post-cat-row{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;color:#8a8577;font-weight:600;margin-bottom:18px}
.post-cat{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#dc2626,#7f1d1d);padding:5px 12px;border-radius:999px}
.post-title{font-size:clamp(28px,4.6vw,46px);font-weight:900;letter-spacing:-.8px;line-height:1.12;margin:0 0 18px;color:#1a1612}
.post-sub{font-size:17px;line-height:1.7;color:#5c564b;margin:0 auto;max-width:640px}
.post-byline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;font-size:13.5px;color:#6f6a60;font-weight:600}
.post-byline .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(120deg,#dc2626,#7f1d1d);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}

.post-banner{max-width:900px;margin:44px auto 0;height:220px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc2626 0%,#991b1b 55%,#7f1d1d 100%);position:relative;overflow:hidden}
.post-banner::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);background-size:22px 22px;opacity:.5}
.post-banner i{font-size:76px;color:#fff;opacity:.92;position:relative;z-index:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
@media(max-width:768px){.post-banner{height:160px}.post-banner i{font-size:58px}}

/* ====== yazı gövdesi (prose) ====== */
.blog-prose{max-width:720px;margin:48px auto 0;font-size:17px;line-height:1.8;color:#2b2620}
.blog-prose > p{margin:0 0 22px}
.blog-prose h2{font-size:26px;font-weight:900;letter-spacing:-.4px;line-height:1.25;color:#1a1612;margin:44px 0 16px}
.blog-prose h3{font-size:20px;font-weight:800;color:#1a1612;margin:32px 0 12px}
.blog-prose strong{font-weight:800;color:#1a1612}
.blog-prose a{color:#b91c1c;font-weight:700;text-decoration:underline;text-decoration-color:rgba(185,28,28,.35);text-underline-offset:2px}
.blog-prose a:hover{text-decoration-color:#b91c1c}
.blog-prose ul,.blog-prose ol{margin:0 0 22px;padding-left:4px;list-style:none}
.blog-prose ul li,.blog-prose ol li{position:relative;padding-left:30px;margin-bottom:12px}
.blog-prose ul li::before{content:"\f00c";font:900 12px "Font Awesome 6 Free";color:#dc2626;position:absolute;left:2px;top:5px}
.blog-prose ol{counter-reset:bl}
.blog-prose ol li{counter-increment:bl}
.blog-prose ol li::before{content:counter(bl);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:rgba(220,38,38,.1);color:#b91c1c;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.blog-prose blockquote{margin:28px 0;padding:18px 24px;border-left:4px solid #dc2626;background:rgba(220,38,38,.05);border-radius:0 12px 12px 0;font-size:18px;font-style:italic;color:#3f3a32;line-height:1.6}
.blog-prose blockquote p{margin:0}

/* ====== yazı sonu: geri + ilgili ====== */
.post-foot{max-width:720px;margin:52px auto 0;padding-top:28px;border-top:1px solid rgba(220,38,38,.14)}
.post-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#7f1d1d}
.post-back:hover{color:#dc2626}
.post-related{margin-top:64px}
.post-related h3{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#7f1d1d;text-align:center;margin:0 0 28px}