/*
 * "Latest Blog Posts" bölümü.
 * Tipografi + renk sistemi, "Discover New WooCommerce Plugins" bölümüyle
 * (discover-new-plugins.css) BİREBİR aynı olacak şekilde kuruldu; aynı CSS
 * değişkenleri (--czgbdp-*) kullanılır — bu dosya tek başına da (o dosya
 * hiç yüklenmemiş olsa bile) doğru görünmesi için aynı değerleri fallback
 * olarak tekrar tanımlar.
 */
:root{
  --czgbdp-ink:#16171C;
  --czgbdp-ink-soft:#8C8F9B;
  --czgbdp-line:#ECECF1;
  --czgbdp-bg:#f7f8ff;
  --czgbdp-card:#FFFFFF;
  --czgbdp-radius-card:16px;
  --czgbdp-radius-media:12px;
  --czgbdp-shadow-card:0 1px 2px rgba(16,24,40,.05), 0 10px 20px -16px rgba(16,24,40,.12);
  --czgbdp-shadow-card-hover:0 22px 38px -18px rgba(16,24,40,.22);
}

.czgb-bp{
  font-family:'Inter',sans-serif;
  background:var(--czgbdp-bg);
  color:var(--czgbdp-ink);
  -webkit-font-smoothing:antialiased;
}
.czgb-bp *{ box-sizing:border-box; }
.czgb-bp a{ text-decoration:none; }

.czgb-bp-container{
  max-width:1280px;
  margin:0 auto;
  padding:160px 24px 96px;
}

/* ---------- Brand strip: logo + premium italik mesaj ----------
 * "Latest Blog Posts" başlığının ÜSTÜNDE gösterilir; kendisi ile
 * aşağıdaki başlık arasında (talep edildiği gibi) sabit 150px boşluk
 * bırakılır. */
.czgb-bp-brand{
  text-align:center;
  max-width:720px;
  margin:0 auto 150px;
}
.czgb-bp-brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}
.czgb-bp-brand-logo img{
  display:block;
  /* Bu resim artık (site logosu değil) kare bir rozet/ödül görseli
     (bkz. czgb-discover-blog-posts.php). Eskiden burada normal, yatay bir
     site logosu (52px yükseklik) bekleniyordu; kare bir rozet o yükseklikte
     neredeyse görünmez/okunaksız kalıyordu ("hatalı ölçüde" görünmesinin
     sebebi buydu). Rozetin kendi oranlarında (1:1), okunaklı bir boyutta
     gösterilmesi için yükseklik belirgin şekilde artırıldı. */
  max-height:120px;
  width:auto;
}
.czgb-bp-brand-logo-text{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--czgbdp-ink);
}
.czgb-bp-brand-quote{
  font-size:24px;
  font-style:italic;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.01em;
  color:var(--czgbdp-ink);
  margin:0;
  position:relative;
  padding:0 8px;
}
@media (max-width:760px){
  .czgb-bp-brand{ margin-bottom:80px; }
  .czgb-bp-brand-quote{ font-size:19px; }
  .czgb-bp-brand-logo img{ max-height:88px; }
}

/* ---------- Header — "Discover New WooCommerce Plugins" ile birebir aynı ---------- */
.czgb-bp-head{
  text-align:center;
  max-width:600px;
  margin:0 auto 48px;
}
.czgb-bp-head h2{
  font-size:36px;
  line-height:1.2;
  font-weight:800;
  margin:0 0 14px;
  letter-spacing:-0.02em;
  color:var(--czgbdp-ink);
}
.czgb-bp-head p{
  font-size:16px;
  line-height:1.7;
  color:var(--czgbdp-ink-soft);
  margin:0;
}

/* ---------- Carousel shell ---------- */
.czgb-bp-carousel{
  position:relative;
}
.czgb-bp-viewport{
  /* DÜZELTME (dikey scroll): CSS'te overflow eksenlerinden biri "visible"
     dışında bir değerse (ör. overflow-x:hidden) diğer eksen "visible"
     OLARAK KALAMAZ, otomatik olarak "auto"ya dönüşür. Eski
     overflow-y:visible bu yüzden viewport'u dikey kaydırılabilir yapıyordu.
     Dikey eksen artık açıkça kilitli; yatay kaydırma track üzerinde aynen
     çalışır.

     DÜZELTME (hover gölgesi kırpılması): Hover gölgesi ve translateY(-4px)
     hareketi için gereken boşluk artık viewport'un KENDİ kutusunun içinde
     (track'in padding'i ile) yer alıyor; viewport bu boşluk kadar negatif
     margin ile geri çekiliyor. Böylece (1) gölge/yükselme kırpılmıyor,
     (2) içerik viewport'tan taşmadığı için dikey scroll oluşmuyor,
     (3) sayfadaki toplam yükseklik/boşluklar eskisiyle birebir aynı kalıyor. */
  overflow-x:hidden;
  overflow-y:hidden;
  margin:-24px -4px -44px;
}
.czgb-bp-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  /* Yatay overflow:auto, dikey ekseni de otomatik "auto" yapar; dikey
     kaydırmayı engellemek için açıkça kilitle. */
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  /* Hover shadow'u (0 22px 38px -18px ≈ 42px aşağı) ve translateY(-4px)
     hareketi için yeterli boşluk: üstte/altta padding. Negatif margin
     yukarıdaki .czgb-bp-viewport'ta. */
  padding:24px 4px 44px;
}
.czgb-bp-track::-webkit-scrollbar{ display:none; }
.czgb-bp-track{ scrollbar-width:none; }

/* Arrows */
.czgb-bp-arrow{
  position:absolute;
  top:calc(50% - 20px);
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--czgbdp-line);
  background:#fff;
  color:var(--czgbdp-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
  box-shadow:0 10px 24px -10px rgba(16,24,40,.25);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.czgb-bp-arrow svg{
  width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2;
}
.czgb-bp-arrow:hover{
  background:var(--accent, #4e54c8);
  border-color:var(--accent, #4e54c8);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(78,84,200,.45);
}
.czgb-bp-arrow.is-disabled{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* Not: ok butonları eskiden left/right:-22px, sonra left/right:0 ile
   konumlandırılıyordu. 0 değeri butonu .czgb-bp-container'ın iç dolgusunun
   (24px) hemen kenarına oturtuyordu; container tam viewport genişliğini
   doldurduğunda (yani ~1328px ve altındaki — pratikte en yaygın masaüstü/
   dizüstü — pencere genişliklerinde) bu, buton ile sayfanın (kırmızı/
   mercan) dikey scrollbar'ı arasında sadece 24px - scrollbar genişliği
   kadar (~14px) boşluk bırakıyordu; butonun kendi gölgesi de bu boşluğa
   taştığından ikisi görsel olarak neredeyse birleşiyor, "carousel'in
   sağında kalıcı bir scroll bar varmış" izlenimi veriyordu. Kalıcı çözüm
   için butonları container dolgusunun 16px İÇİNE alıyoruz (yani gerçek
   pencere kenarından en az ~40px, scrollbar dahil ~30px net boşluk),
   ayrıca html'e scrollbar-gutter:stable eklendi (bkz. premium-scrollbar.css)
   — böylece hiçbir ekran genişliğinde ok butonu scrollbar'a değmiyor. */
.czgb-bp-prev{ left:16px; }
.czgb-bp-next{ right:16px; }

/* ---------- Card — çekirdek görsel dil "Discover" kartlarıyla aynı ---------- */
.czgb-bp-card{
  flex:0 0 calc((100% - 3 * 24px) / 4);
  scroll-snap-align:start;
  background:var(--czgbdp-card);
  border:1px solid var(--czgbdp-line);
  border-radius:var(--czgbdp-radius-card);
  padding:12px;
  box-shadow:var(--czgbdp-shadow-card);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
}
.czgb-bp-card:hover{
  box-shadow:var(--czgbdp-shadow-card-hover);
  transform:translateY(-4px);
  border-color:transparent;
}

/* Thumbnail */
.czgb-bp-media{
  position:relative;
  display:block;
  aspect-ratio:8 / 5;
  border-radius:var(--czgbdp-radius-media);
  overflow:hidden;
  background:#f7f8ff;
}
.czgb-bp-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  display:block;
}
.czgb-bp-card:hover .czgb-bp-media img{
  transform:scale(1.08);
}

/* Category badge over the image */
.czgb-bp-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:rgba(22,23,28,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  line-height:1.2;
}

/* Body */
.czgb-bp-body{
  padding:16px 4px 6px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.czgb-bp-meta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  color:var(--czgbdp-ink-soft);
  font-size:12.5px;
}
.czgb-bp-date,
.czgb-bp-read{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.czgb-bp-date svg,
.czgb-bp-read svg{
  width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8;
  opacity:.85;
}
.czgb-bp-sep{
  width:3px; height:3px;
  border-radius:50%;
  background:var(--czgbdp-ink-soft);
  opacity:.5;
  flex:none;
}

.czgb-bp-title{
  margin:0 0 9px;
  font-size:16.5px;
  font-weight:700;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:46px;
}
.czgb-bp-title a{
  color:var(--czgbdp-ink);
  text-decoration:none;
  background-image:linear-gradient(var(--czgbdp-ink), var(--czgbdp-ink));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size .3s ease;
  padding-bottom:1px;
}
.czgb-bp-title a:hover{ background-size:100% 1.5px; }

.czgb-bp-excerpt{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--czgbdp-ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1 1 auto;
}

.czgb-bp-readmore{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  align-self:flex-start;
  font-size:13.5px;
  font-weight:700;
  color:var(--accent, #4e54c8);
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
  transition:border-color .25s ease, gap .25s ease, color .25s ease;
}
.czgb-bp-readmore svg{
  width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2;
  transition:transform .25s ease;
}
.czgb-bp-readmore:hover{
  color:var(--accent, #4e54c8);
  border-color:var(--accent, #4e54c8);
  gap:10px;
}
.czgb-bp-readmore:hover svg{ transform:translateX(2px); }

/* ---------- View All Blog Posts — site accent rengiyle ---------- */
.czgb-bp-viewall-wrap{ display:flex; justify-content:center; margin-top:46px; }
.czgb-bp-viewall-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--accent, #4e54c8);
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  padding:15px 34px;
  border-radius:999px;
  box-shadow:0 16px 28px -12px rgba(78,84,200,.45);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.czgb-bp-viewall-btn svg{
  width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2;
  transition:transform .3s ease;
}
.czgb-bp-viewall-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-3px);
  box-shadow:0 20px 34px -12px rgba(78,84,200,.55);
}
.czgb-bp-viewall-btn:hover svg{ transform:translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .czgb-bp-card{ flex:0 0 calc((100% - 2 * 24px) / 3); }
}
@media (max-width:760px){
  .czgb-bp-card{ flex:0 0 calc((100% - 20px) / 2); }
  .czgb-bp-track{ gap:20px; }
  .czgb-bp-head h2{ font-size:28px; }
  .czgb-bp-container{ padding:0 18px 70px; }
  .czgb-bp-arrow{ display:none; }
}
@media (max-width:560px){
  .czgb-bp-card{ flex:0 0 84%; }
}

@media (prefers-reduced-motion: reduce){
  .czgb-bp-media img,
  .czgb-bp-card,
  .czgb-bp-arrow,
  .czgb-bp-viewall-btn{ transition:none; }
}


/* ==========================================================================
 * LIGHT PREMIUM UI — blog kartları
 * Ürün kartlarıyla (Prdctcrusel795651_card) aynı dil: beyaz yüzey, çok katmanlı
 * yumuşak gölge, tam genişlik görsel, beyaz rozet + renkli nokta, 2 satır başlık,
 * alt çizgi + yuvarlak ok butonu. Kart rengi yazıya göre sabittir (--czgb-bpc / --czgb-bpt).
 * ========================================================================== */
.czgb-bp .czgb-bp-viewport{ margin:-36px -22px -70px; }
.czgb-bp .czgb-bp-track{
  gap:24px;
  padding:36px 22px 70px;
  scroll-padding:0 22px;
  overscroll-behavior-x:contain;
}
.czgb-bp .czgb-bp-track.czgb-bp-drag{
  scroll-snap-type:none;
  scroll-behavior:auto;
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
.czgb-bp .czgb-bp-track.czgb-bp-drag *{ pointer-events:none; }
.czgb-bp .czgb-bp-track.czgb-bp-can-drag{ cursor:grab; }
.czgb-bp .czgb-bp-track img{ -webkit-user-drag:none; user-select:none; }

.czgb-bp .czgb-bp-card{
  --czgb-bpc:#5b5bf0;
  --czgb-bpt:#eeedff;
  padding:0;
  overflow:hidden;
  border:1px solid #e7e9f3;
  border-radius:22px;
  background:#fff;
  box-shadow:0 1px 2px rgba(13,15,30,.04), 0 12px 22px -14px rgba(13,15,30,.1), 0 30px 44px -34px rgba(13,15,30,.16);
  transition:transform .45s cubic-bezier(.22,.8,.2,1), box-shadow .45s cubic-bezier(.22,.8,.2,1), border-color .45s;
}
.czgb-bp .czgb-bp-card:hover,
.czgb-bp .czgb-bp-card:focus-within{
  transform:translateY(-6px);
  border-color:#d8dbee;
  box-shadow:0 2px 4px rgba(13,15,30,.04), 0 20px 32px -16px rgba(13,15,30,.14), 0 46px 56px -34px rgba(91,91,240,.3);
}

/* Görsel: kartın üstünde tam genişlik */
.czgb-bp .czgb-bp-media{
  aspect-ratio:16 / 10;
  border-radius:0;
  background:linear-gradient(165deg, var(--czgb-bpt), #fff 140%);
}
.czgb-bp .czgb-bp-media::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(13,15,30,.12));
  pointer-events:none;
  opacity:0; transition:opacity .45s ease;
}
.czgb-bp .czgb-bp-card:hover .czgb-bp-media::after{ opacity:1; }
.czgb-bp .czgb-bp-card:hover .czgb-bp-media img{ transform:scale(1.05); }

/* Kategori rozeti: beyaz hap + renkli nokta (ürün rozetiyle aynı) */
.czgb-bp .czgb-bp-badge{
  top:14px; left:14px;
  display:flex; align-items:center; gap:7px;
  padding:6px 11px;
  background:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:#0d0f1e;
  font-size:11.5px; font-weight:700; letter-spacing:0; text-transform:none; line-height:1.3;
  box-shadow:0 6px 14px -6px rgba(13,15,30,.25);
}
.czgb-bp .czgb-bp-badge::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--czgb-bpc);
}

/* Gövde */
.czgb-bp .czgb-bp-body{ padding:22px 22px 20px; }
.czgb-bp .czgb-bp-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:0 0 14px;
  font-size:12.5px; font-weight:600; color:#646a88;
}
.czgb-bp .czgb-bp-date,
.czgb-bp .czgb-bp-read{ display:inline-flex; align-items:center; gap:6px; color:#646a88; }
.czgb-bp .czgb-bp-meta svg{
  width:14px; height:14px; flex:none; fill:none; stroke:var(--czgb-bpc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.czgb-bp .czgb-bp-sep{ width:3px; height:3px; border-radius:50%; background:#c3c7dd; }

.czgb-bp .czgb-bp-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:48px; margin:0 0 10px; padding:0;
  font-size:18.5px; line-height:1.3; font-weight:700; letter-spacing:-.025em; color:#0d0f1e;
}
.czgb-bp .czgb-bp-title a{ color:inherit; background:none; transition:color .25s; }
.czgb-bp .czgb-bp-title a:hover,
.czgb-bp .czgb-bp-title a:focus-visible{ color:var(--czgb-bpc); }
.czgb-bp .czgb-bp-excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin:0 0 22px; font-size:14.5px; line-height:1.65; color:#646a88;
}

/* Alt satır: "Read Article" + yuvarlak ok */
.czgb-bp .czgb-bp-readmore{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; margin-top:auto; padding:16px 0 0;
  border-top:1px solid #e7e9f3;
  font-size:13.5px; font-weight:700; color:#0d0f1e;
  transition:color .25s;
}
.czgb-bp .czgb-bp-go{
  display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  color:var(--czgb-bpc); background:var(--czgb-bpt);
  transition:background .35s cubic-bezier(.22,.8,.2,1), color .35s, transform .35s cubic-bezier(.22,.8,.2,1);
}
.czgb-bp .czgb-bp-go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; transition:transform .35s cubic-bezier(.22,.8,.2,1); }
.czgb-bp .czgb-bp-card:hover .czgb-bp-readmore,
.czgb-bp .czgb-bp-readmore:focus-visible{ color:var(--czgb-bpc); }
.czgb-bp .czgb-bp-card:hover .czgb-bp-go,
.czgb-bp .czgb-bp-readmore:focus-visible .czgb-bp-go{ background:var(--czgb-bpc); color:#fff; transform:scale(1.06); }
.czgb-bp .czgb-bp-card:hover .czgb-bp-go svg{ transform:translateX(2px); }
.czgb-bp .czgb-bp-readmore:hover svg{ transform:none; }

/* "View All Blog Posts": ürün bölümlerindeki buton dili */
.czgb-bp .czgb-bp-viewall-wrap{ position:relative; z-index:3; margin-top:44px; }
.czgb-bp .czgb-bp-viewall-btn{
  height:52px; padding:0 28px; gap:8px;
  border-radius:13px; font-size:14.5px; line-height:1;
  background:linear-gradient(180deg,#30335a 0%,#15172c 55%,#0a0b17 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.4), 0 10px 18px -10px rgba(13,15,30,.7);
  filter:none;
}
.czgb-bp .czgb-bp-viewall-btn:hover,
.czgb-bp .czgb-bp-viewall-btn:focus-visible{
  filter:none; color:#fff; transform:translateY(-2px);
  background:linear-gradient(110deg,#5b5bf0,#b06bff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 24px -10px rgba(91,91,240,.6);
}

@media (max-width:760px){
  .czgb-bp .czgb-bp-viewport{ margin:-36px -14px -70px; }
  .czgb-bp .czgb-bp-track{ padding:36px 14px 70px; scroll-padding:0 14px; gap:20px; }
}
@media (max-width:560px){
  .czgb-bp .czgb-bp-body{ padding:20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .czgb-bp .czgb-bp-card, .czgb-bp .czgb-bp-go, .czgb-bp .czgb-bp-go svg{ transition:none; }
  .czgb-bp .czgb-bp-card:hover{ transform:none; }
}

/* "Read Article": eski hover alt çizgisi (border-bottom) kaldırıldı; hover'da sadece renk + ok butonu değişir. */
.czgb-bp .czgb-bp-readmore,
.czgb-bp .czgb-bp-readmore:hover,
.czgb-bp .czgb-bp-readmore:focus,
.czgb-bp .czgb-bp-readmore:focus-visible{
  padding-bottom:0;
  border-bottom:0;
  text-decoration:none;
  gap:12px;
}
.czgb-bp .czgb-bp-readmore:hover,
.czgb-bp .czgb-bp-readmore:focus-visible{ border-top-color:#e7e9f3; }