/* ═══════════════════════════════════════════════════════════════
   BLOG KART TASARIMI & BLOG SAYFA ŞABLONLARI — Site-wide
   body[data-blog-card="classic|overlay|minimal|magazine|neon|photo"]
   body[data-blog-style="classic|cards|magazine|masonry|minimal|editorial"]
   ═══════════════════════════════════════════════════════════════ */

/* =========================================================
   BASE — Anasayfa modülü için (blog.php kendi stilini kullanır)
   ========================================================= */
.home-blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px
}
.home-blog-grid .blog-card{
  background:var(--white);
  border:1px solid var(--brd);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 12px rgba(0,0,0,.03);
  position:relative
}
.home-blog-grid .blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.12);
  border-color:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.2)
}
.home-blog-grid .blog-card .bc-img{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--bg2),var(--bg));
  min-height:180px
}
.home-blog-grid .blog-card .bc-img img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block
}
.home-blog-grid .blog-card:hover .bc-img img{ transform:scale(1.06) }
.home-blog-grid .blog-card .bc-body{padding:18px;flex:1;display:flex;flex-direction:column}
.home-blog-grid .blog-card .bc-title{font-size:16px;font-weight:800;line-height:1.4;color:var(--text);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-blog-grid .blog-card .bc-excerpt{font-size:13px;color:var(--tl);line-height:1.6;margin:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-blog-grid .blog-card .bc-cat{position:absolute;top:12px;left:12px;padding:5px 12px;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);color:#fff;border-radius:20px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;z-index:3}
.home-blog-grid .blog-card .bc-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 0;margin-top:14px;border-top:1px solid var(--brd);font-size:11px;color:var(--tl);font-weight:600}

/* =========================================================
   KART VARYANTLARI — data-blog-card (hem anasayfa hem blog sayfa)
   !important ile blog.php'nin inline CSS'ini override ediyoruz.
   ========================================================= */

/* OVERLAY — resim full background, yazılar altta overlay */
body[data-blog-card="overlay"] .blog-card{
  aspect-ratio:4/5!important;
  position:relative!important;
  display:block!important;
  border:none!important;
  box-shadow:0 10px 28px rgba(0,0,0,.15)!important;
  border-radius:18px!important;
  overflow:hidden!important
}
body[data-blog-card="overlay"] .blog-card .bc-img{
  position:absolute!important;
  inset:0!important;
  aspect-ratio:auto!important;
  height:100%!important;
  width:100%!important;
  margin:0!important
}
body[data-blog-card="overlay"] .blog-card .bc-img::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 55%,transparent 75%)!important;
  z-index:1!important
}
body[data-blog-card="overlay"] .blog-card .bc-body{
  position:absolute!important;
  inset:auto 0 0 0!important;
  padding:22px 20px!important;
  color:#fff!important;
  z-index:2!important;
  display:block!important;
  background:transparent!important
}
body[data-blog-card="overlay"] .blog-card .bc-title,
body[data-blog-card="overlay"] .blog-card .bc-title a{color:#fff!important}
body[data-blog-card="overlay"] .blog-card .bc-excerpt{color:rgba(255,255,255,.88)!important}
body[data-blog-card="overlay"] .blog-card .bc-footer{
  border-top:1px solid rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.85)!important;
  padding-top:10px!important;margin-top:10px!important
}
body[data-blog-card="overlay"] .blog-card .bc-meta{color:rgba(255,255,255,.8)!important}
body[data-blog-card="overlay"] .blog-card .bc-read{color:#fff!important;font-weight:800!important}
body[data-blog-card="overlay"] .blog-card:hover{transform:translateY(-6px) scale(1.02)!important;box-shadow:0 24px 58px rgba(0,0,0,.3)!important}

/* MINIMAL — tam sadeleştirilmiş, yatay */
body[data-blog-card="minimal"] .blog-card{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-bottom:1px solid var(--brd)!important;
  border-radius:0!important;
  padding:24px 0!important;
  display:flex!important;
  flex-direction:row!important;
  gap:24px!important;
  align-items:center!important
}
body[data-blog-card="minimal"] .blog-card:hover{
  transform:none!important;box-shadow:none!important;border-color:var(--p)!important
}
body[data-blog-card="minimal"] .blog-card .bc-img{
  aspect-ratio:1!important;
  width:180px!important;
  flex-shrink:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  min-height:0!important;
  margin:0!important
}
body[data-blog-card="minimal"] .blog-card .bc-body{padding:0!important;flex:1!important;min-width:0!important}
body[data-blog-card="minimal"] .blog-card .bc-title{font-size:19px!important;margin-bottom:10px!important}
body[data-blog-card="minimal"] .blog-card .bc-footer{border-top:none!important;padding-top:10px!important;margin-top:10px!important}
body[data-blog-card="minimal"] .blog-card .bc-cat{position:static!important;display:inline-block!important;margin-bottom:8px!important;background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.12)!important;color:var(--p)!important;backdrop-filter:none!important}
@media(max-width:600px){
  body[data-blog-card="minimal"] .blog-card{flex-direction:column!important;gap:14px!important}
  body[data-blog-card="minimal"] .blog-card .bc-img{width:100%!important;aspect-ratio:16/10!important}
}

/* MAGAZINE — border altında, serifli hissi */
body[data-blog-card="magazine"] .blog-card{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important
}
body[data-blog-card="magazine"] .blog-card .bc-img{
  border-radius:10px!important;margin-bottom:16px!important;aspect-ratio:16/10!important;
  border:1px solid var(--brd)!important
}
body[data-blog-card="magazine"] .blog-card .bc-body{padding:0!important}
body[data-blog-card="magazine"] .blog-card .bc-title{
  font-size:22px!important;font-weight:900!important;letter-spacing:-.3px!important;
  margin-bottom:10px!important;line-height:1.3!important
}
body[data-blog-card="magazine"] .blog-card .bc-excerpt{font-size:14px!important;line-height:1.7!important}
body[data-blog-card="magazine"] .blog-card .bc-footer{
  border-top:2px solid var(--text)!important;padding-top:12px!important;margin-top:14px!important
}
body[data-blog-card="magazine"] .blog-card:hover{transform:translateY(-4px)!important;box-shadow:none!important}

/* NEON — koyu arkaplan, parlak border */
body[data-blog-card="neon"] .blog-card{
  background:linear-gradient(135deg,#0f172a,#1e293b)!important;
  border:1.5px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35)!important;
  box-shadow:0 0 22px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.18)!important;
  border-radius:16px!important
}
body[data-blog-card="neon"] .blog-card:hover{
  border-color:var(--p)!important;
  box-shadow:0 0 36px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.4)!important;
  transform:translateY(-4px)!important
}
body[data-blog-card="neon"] .blog-card .bc-title{color:#e2e8f0!important;text-shadow:0 0 10px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.2)!important}
body[data-blog-card="neon"] .blog-card .bc-excerpt,
body[data-blog-card="neon"] .blog-card .bc-meta,
body[data-blog-card="neon"] .blog-card .bc-footer{color:#94a3b8!important}
body[data-blog-card="neon"] .blog-card .bc-footer{border-color:#334155!important}
body[data-blog-card="neon"] .blog-card .bc-read{color:var(--p)!important}
body[data-blog-card="neon"] .blog-card .bc-cat{
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)))!important;
  box-shadow:0 0 12px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.5)!important
}

/* PHOTO — Polaroid tarzı kalın beyaz çerçeve */
body[data-blog-card="photo"] .blog-card{
  background:#fff!important;
  padding:14px 14px 6px!important;
  border-radius:4px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.14)!important;
  border:none!important
}
body[data-blog-card="photo"] .blog-card .bc-img{
  border-radius:3px!important;margin-bottom:14px!important;aspect-ratio:4/3!important
}
body[data-blog-card="photo"] .blog-card .bc-body{padding:0 4px 12px!important}
body[data-blog-card="photo"] .blog-card .bc-title{color:#1e1e3a!important;font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-.3px!important}
body[data-blog-card="photo"] .blog-card .bc-excerpt{color:#6b7280!important;font-style:italic!important}
body[data-blog-card="photo"] .blog-card:hover{
  transform:translateY(-6px) rotate(-.75deg)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.2)!important
}
body[data-blog-card="photo"] .blog-card .bc-footer{border-top:1px dashed #cbd5e1!important;color:#6b7280!important}

/* =========================================================
   SAYFA ŞABLON VARYANTLARI — data-blog-style
   Yalnızca blog.php'deki .blog-layout / .blog-grid / hero etkiliyor.
   ========================================================= */

/* Classic (default) — blog.php'nin kendi stilini kullanır */

/* CARDS — 4 sütun küçük kart, özet gizli */
body[data-blog-style="cards"] .blog-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:14px!important}
body[data-blog-style="cards"] .blog-card .bc-body{padding:14px!important}
body[data-blog-style="cards"] .blog-card .bc-title{font-size:14.5px!important;-webkit-line-clamp:3!important}
body[data-blog-style="cards"] .blog-card .bc-excerpt{display:none!important}
body[data-blog-style="cards"] .blog-hero-card{grid-template-columns:1fr!important}
body[data-blog-style="cards"] .blog-hero-card .hc-img{min-height:240px!important}
body[data-blog-style="cards"] .blog-hero-card .hc-title{font-size:22px!important}

/* MAGAZINE — büyük hero + 2 sütun */
body[data-blog-style="magazine"] .blog-grid{grid-template-columns:repeat(2,1fr)!important;gap:28px!important}
body[data-blog-style="magazine"] .blog-hero-card{grid-template-columns:1.4fr 1fr!important;min-height:420px!important}
body[data-blog-style="magazine"] .blog-hero-card .hc-title{font-size:38px!important;font-weight:900!important;letter-spacing:-1px!important}
body[data-blog-style="magazine"] .blog-hero-banner h1{font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-1.5px!important}
@media(max-width:700px){ body[data-blog-style="magazine"] .blog-grid{grid-template-columns:1fr!important} }

/* MASONRY — Pinterest tarzı */
body[data-blog-style="masonry"] .blog-grid{column-count:3!important;column-gap:18px!important;display:block!important}
body[data-blog-style="masonry"] .blog-card{display:inline-block!important;width:100%!important;margin-bottom:18px!important;break-inside:avoid!important}
@media(max-width:900px){ body[data-blog-style="masonry"] .blog-grid{column-count:2!important} }
@media(max-width:600px){ body[data-blog-style="masonry"] .blog-grid{column-count:1!important} }

/* MINIMAL — tek sütun, yatay kartlar */
body[data-blog-style="minimal"] .blog-grid{grid-template-columns:1fr!important;gap:0!important;max-width:780px!important;margin:0 auto!important}
body[data-blog-style="minimal"] .blog-hero-banner h1{font-size:clamp(26px,3.5vw,36px)!important;max-width:780px!important;margin:0 auto 10px!important}
body[data-blog-style="minimal"] .blog-filters{max-width:780px!important;margin-left:auto!important;margin-right:auto!important}
body[data-blog-style="minimal"] .blog-hero-card{max-width:780px!important;margin:0 auto 30px!important;grid-template-columns:1fr!important}
body[data-blog-style="minimal"] .blog-layout{grid-template-columns:1fr!important;max-width:780px!important;margin:0 auto!important}
body[data-blog-style="minimal"] .blog-sidebar{display:none!important}

/* EDITORIAL — büyük tipografi, zigzag */
body[data-blog-style="editorial"] .blog-grid{grid-template-columns:1fr!important;gap:40px!important}
body[data-blog-style="editorial"] .blog-card{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:32px!important;
  align-items:center!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:24px 0!important;
  border-bottom:1px solid var(--brd)!important;
  border-radius:0!important
}
body[data-blog-style="editorial"] .blog-card:nth-child(even){direction:rtl}
body[data-blog-style="editorial"] .blog-card:nth-child(even) > *{direction:ltr}
body[data-blog-style="editorial"] .blog-card .bc-img{aspect-ratio:4/3!important;border-radius:12px!important;overflow:hidden!important}
body[data-blog-style="editorial"] .blog-card .bc-body{padding:0!important;flex-direction:column!important}
body[data-blog-style="editorial"] .blog-card .bc-title{font-size:28px!important;font-weight:900!important;line-height:1.2!important;letter-spacing:-.8px!important;margin-bottom:14px!important;-webkit-line-clamp:3!important}
body[data-blog-style="editorial"] .blog-card .bc-excerpt{font-size:15px!important;line-height:1.7!important;-webkit-line-clamp:4!important;margin-bottom:16px!important}
body[data-blog-style="editorial"] .blog-card:hover{transform:none!important;box-shadow:none!important;border-color:var(--p)!important}
body[data-blog-style="editorial"] .blog-hero-banner h1{font-size:clamp(40px,5.5vw,64px)!important;font-family:Georgia,'Times New Roman',serif!important;font-weight:900!important;letter-spacing:-2px!important}
body[data-blog-style="editorial"] .blog-hero-card{display:none!important}
@media(max-width:700px){ body[data-blog-style="editorial"] .blog-card{grid-template-columns:1fr!important;gap:16px!important} body[data-blog-style="editorial"] .blog-card:nth-child(even){direction:ltr} }

/* =========================================================
   HERO BANNER VARYANTLARI (blog.php üstü)
   ========================================================= */
body[data-blog-style="magazine"] .blog-hero-banner{
  background:linear-gradient(135deg,var(--p) 0%,var(--pd,var(--p)) 100%)!important;
  color:#fff!important;
  padding:72px 20px 56px!important;
  margin:0 0 30px!important
}
body[data-blog-style="magazine"] .blog-hero-banner h1,
body[data-blog-style="magazine"] .blog-hero-banner p{color:#fff!important}
body[data-blog-style="magazine"] .blog-hero-badge{background:rgba(255,255,255,.18)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}

body[data-blog-style="cards"] .blog-hero-banner{
  background:linear-gradient(135deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.08),rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.02))!important;
  padding:36px 20px 28px!important;
  border-radius:20px!important;
  margin:20px 0 24px!important
}

body[data-blog-style="masonry"] .blog-hero-banner{
  background:radial-gradient(circle at 30% 40%,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.18),transparent 60%),radial-gradient(circle at 70% 60%,rgba(236,72,153,.14),transparent 60%)!important;
  padding:60px 20px 48px!important
}

body[data-blog-style="editorial"] .blog-hero-banner{
  text-align:left!important;
  padding:64px 22px 28px!important;
  border-bottom:3px solid var(--text)!important;
  margin-bottom:32px!important
}
body[data-blog-style="editorial"] .blog-hero-banner h1{margin-left:0!important}
body[data-blog-style="editorial"] .blog-hero-banner p{margin-left:0!important;font-size:18px!important}

body[data-blog-style="minimal"] .blog-hero-banner{
  padding:40px 20px 20px!important;
  border-bottom:1px solid var(--brd)!important;
  margin-bottom:28px!important
}

/* =========================================================
   FİLTRE PİLLERİ & SİDEBAR
   ========================================================= */
body[data-blog-style="editorial"] .blog-filters{justify-content:flex-start!important;max-width:900px!important;margin-left:auto!important;margin-right:auto!important;padding:0 22px!important}
body[data-blog-style="magazine"] .blog-filter-pill{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
body[data-blog-style="magazine"] .blog-filter-pill.active{background:#fff!important;color:var(--p)!important}

body[data-blog-style="cards"] .blog-layout,
body[data-blog-style="masonry"] .blog-layout{grid-template-columns:1fr!important}
body[data-blog-style="cards"] .blog-sidebar,
body[data-blog-style="masonry"] .blog-sidebar{display:none!important}