/* ============================================================
   Bahçelievler Yurdu — blog.css
   Sadece blog sayfalarına özel katman. style.css'i ezmez.
   ============================================================ */

/* ===== BLOG HERO ===== */
.blog-hero{
  position:relative;padding:calc(var(--header-h) + 70px) 0 70px;
  background:linear-gradient(160deg,var(--green-d) 0%,#000 60%,var(--green-3) 130%);
  color:#fff;overflow:hidden;
}
.blog-hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.blog-hero>.container{position:relative;z-index:2;max-width:900px}
.blog-hero h1{font-size:clamp(28px,3.8vw,46px);margin-top:16px}
.blog-hero .sec-text{color:rgba(255,255,255,.8)}

.crumbs{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.65);flex-wrap:wrap}
/* son kirinti sayfa basligi: uzun basliklarda tasmasin, tek satirda kisalsin */
.crumbs>span{max-width:min(46ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs .ico{flex-shrink:0}
.crumbs a:hover{color:var(--green-2)}
.crumbs .ico{width:13px;height:13px;transform:rotate(-90deg)}

.post-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}
.post-meta li{display:flex;align-items:center;gap:8px}
.post-meta .ico{color:var(--green-2)}

/* ===== YAZI DUZENI ===== */
.post-layout{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start;padding:80px 0}

.post-content{font-size:16.5px;color:var(--text-m);line-height:1.8;min-width:0}
.post-content>*+*{margin-top:20px}
.post-content h2{font-size:clamp(24px,2.6vw,32px);color:var(--green-d);margin-top:44px}
.post-content h3{font-size:21px;color:var(--green-d);margin-top:32px}
.post-content strong{color:var(--text)}
.post-content a:not(.btn){color:var(--green);font-weight:600;border-bottom:1px solid rgba(17,17,17,.28)}
.post-content a:not(.btn):hover{border-color:var(--green)}
.post-content ul,.post-content ol{display:grid;gap:11px;padding-left:0}
.post-content ul li{display:flex;gap:11px;align-items:flex-start}
.post-content ul li::before{
  content:"";flex-shrink:0;width:8px;height:8px;margin-top:10px;border-radius:50%;
  background:var(--green-3);
}
.post-content ol{counter-reset:num;list-style:none}
.post-content ol li{display:flex;gap:14px;align-items:flex-start;counter-increment:num}
.post-content ol li::before{
  content:counter(num);flex-shrink:0;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-3);color:var(--green);font-size:14px;font-weight:700;
  font-family:var(--font-title);margin-top:2px;
}
.post-content img{border-radius:var(--radius-lg);margin-block:8px}
.post-content figure{margin:0}
.post-content figcaption{margin-top:10px;font-size:13.5px;color:var(--text-s);text-align:center}

.post-highlight{
  background:var(--bg-3);border-left:4px solid var(--green-3);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:22px 26px;font-size:16px;
}
.post-highlight strong{color:var(--green-d)}
.post-highlight--sand{background:var(--cream);border-left-color:var(--sand)}

.post-table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.post-table th,.post-table td{padding:13px 16px;border-bottom:1px solid var(--border-2);text-align:left}
.post-table th{background:var(--bg-3);color:var(--green-d);font-weight:700;white-space:nowrap}
.post-table tr:last-child td{border-bottom:0}

.post-cta{
  background:linear-gradient(120deg,var(--green),var(--green-3));color:#fff;
  border-radius:var(--radius-xl);padding:32px;margin-block:36px;
}
.post-cta h3{color:#fff;margin:0 0 10px}
.post-cta p{color:rgba(255,255,255,.88);font-size:15.5px}
.post-cta .btn{margin-top:20px}
.post-cta .btn--outline:hover{color:var(--green)}

.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:44px;padding-top:28px;border-top:1px solid var(--border-2)}
.post-tags span{
  padding:7px 15px;border-radius:100px;background:var(--bg-3);
  color:var(--green);font-size:13px;font-weight:500;
}

/* ===== KENAR SUTUNU ===== */
.post-sidebar{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:20px}
.side-card{background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-xl);padding:26px}
.side-card h4{font-size:19px;color:var(--green-d);margin-bottom:16px}
.toc{display:grid;gap:2px;font-size:14.5px}
.toc a{display:block;padding:9px 13px;border-radius:10px;color:var(--text-m);transition:.25s var(--ease)}
.toc a:hover{background:var(--bg-3);color:var(--green);padding-left:17px}

.side-list{display:grid;gap:16px}
.side-post{display:flex;gap:13px;align-items:flex-start}
.side-post img{width:74px;height:60px;border-radius:12px;object-fit:cover;flex-shrink:0}
.side-post strong{display:block;font-size:14.5px;font-weight:600;color:var(--green-d);line-height:1.4;transition:color .3s}
.side-post:hover strong{color:var(--green)}
.side-post span{font-size:12.5px;color:var(--text-s)}

.side-card--cta{background:var(--green-d);border-color:transparent;color:rgba(255,255,255,.75)}
.side-card--cta h4{color:#fff}
.side-card--cta p{font-size:14.5px}
.side-card--cta .btn{margin-top:18px}

/* ===== BLOG LISTESI ===== */
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{
  padding:9px 18px;border-radius:100px;font-size:14px;font-weight:500;
  background:var(--bg);border:1px solid var(--border);color:var(--text-m);
  transition:.3s var(--ease);
}
.chip:hover{border-color:var(--green-3);color:var(--green)}
.chip.is-active{background:var(--green);border-color:var(--green);color:#fff}

/* ===== RESPONSIVE ===== */
@media (max-width:991px){
  .post-layout{grid-template-columns:1fr;gap:34px;padding:56px 0}
  .post-sidebar{position:static}
  .blog-list{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .blog-hero{padding:calc(var(--header-h) + 40px) 0 48px}
  .post-layout{padding:40px 0}
  .post-content{font-size:16px}
  .post-cta{padding:24px}
  .blog-list{grid-template-columns:1fr}
}


/* ===== TEMA: logo renkleri ===== */
.blog-hero .crumbs a:hover{color:var(--yellow)}
.blog-hero .post-meta .ico{color:var(--yellow)}
.post-highlight{border-left-color:var(--yellow);background:var(--yellow-lt)}
.post-highlight--sand{background:var(--cream);border-left-color:var(--green-d)}
.post-content ul li::before{background:var(--yellow-h)}
.post-content ol li::before{background:var(--yellow);color:var(--green-d)}
.post-table th{background:var(--yellow-lt);color:var(--green-d)}
.post-cta{background:var(--green-d);color:#fff}
.post-cta .btn--yellow{background:var(--yellow);color:var(--green-d)}
.post-cta .btn--outline:hover{background:#fff;color:var(--green-d)}
.post-tags span{background:var(--yellow-lt);color:var(--green-d)}
.side-card--cta{background:var(--green-d)}
.side-card--cta .btn--yellow{background:var(--yellow);color:var(--green-d)}
.chip.is-active{background:var(--green-d);border-color:var(--green-d)}
.chip:hover{border-color:var(--green-d);color:var(--green-d)}