/*!
 * LIMITSIZ Eğitim — "Blog" sayfası ([limitsiz_blog]) stilleri.
 * Kaynak: dc-preview/Blog.dc.html (inline stil değerleri BİREBİR taşındı — TEK sütun,
 * yan sütun/aside YOKTUR; doğrulandı: `grep -c '<aside' Blog.dc.html` = 0).
 *
 * KAPSAM: her kural `.limitsiz-app` kökü + `.le-blog-*` sayfa namespace'i (0,2,0).
 * Paylaşılan bileşenler (.le-h1/.le-lead/.le-eyebrow/.le-pill/.le-tag/.le-card/
 * .le-media/.le-grid/.le-pager/.le-empty/.le-btn/.le-post-card…) BURADA YENİDEN
 * TANIMLANMAZ; yalnız sayfaya özel bileşenler ve gerekli ince ayarlar var.
 * .le-post-card (partials/blog-card.php) artık limitsiz.css §7b'de PAYLAŞILAN bileşen —
 * burada kopyası tutulmaz (anasayfa/blog/ilgili-yazılar hepsi aynı kuralı kullanır).
 * Bu dosya limitsiz.css'ten SONRA yüklenir (Limitsiz_Assets::enqueue_page).
 *
 * Izgaralar `repeat(auto-fit,minmax(min(Npx,100%),1fr))` — `min()` sarmalayıcısı
 * mobil taşmayı engeller, KALDIRMA.
 */

/* =============================================================================
 * 1) HERO — breadcrumb + eyebrow + h1 + lead + kategori çipleri
 *    bg: linear-gradient(180deg,#F8F7FC,#FFFFFF) · alt kenarlık #E9E5F2
 * ========================================================================== */
.limitsiz-app .le-blog-hero{
  background:linear-gradient(180deg,var(--le-surface),var(--le-white));
  border-bottom:1px solid var(--le-border);
  padding:clamp(24px,3vw,40px) 0 clamp(28px,3.4vw,48px);
}
.limitsiz-app .le-blog-hero__crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--le-muted);margin-bottom:10px;
}
.limitsiz-app .le-blog-hero__crumb a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--le-muted);
  transition:color var(--le-t-color) ease;
}
.limitsiz-app .le-blog-hero__crumb a:hover,
.limitsiz-app .le-blog-hero__crumb a:focus-visible{color:var(--le-brand-700)}
.limitsiz-app .le-blog-hero__crumb [aria-current]{color:var(--le-ink);font-weight:600}

.limitsiz-app .le-blog-hero__title{max-width:20ch}
.limitsiz-app .le-blog-hero__lead{margin-top:16px;max-width:64ch}

/* -----------------------------------------------------------------------------
 * 1b) KATEGORİ ŞERİDİ — tek satır yatay kaydırma (35+ kategori çözümü)
 *     Maket 6-7 kategoriyle sarmalayan (wrap) bir çip yığını gösteriyordu; yayında
 *     kategori sayısı 35+ olunca yığın dört satırı doldurup hero'yu eziyordu.
 *     Çözüm: tek satır + `overflow-x:auto` + scroll-snap + maske ile kenar
 *     soluklaşması. Çip görünümü (.le-pill) DEĞİŞMEZ.
 *  -------------------------------------------------------------------------- */
.limitsiz-app .le-blog-cats{position:relative;margin-top:24px}

.limitsiz-app .le-blog-cats__rail{
  display:flex;flex-wrap:nowrap;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:2px;scroll-behavior:smooth;
  /* Odak halkası ve is-active gölgesi kırpılmasın diye dikey nefes payı. */
  padding:3px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--le-border-strong) transparent;
  /* Kenar soluklaşma ipucu: maske RENK BAĞIMSIZ (hero degradesiyle çakışmaz).
     Varsayılan durum = başta duruyoruz → yalnız SAĞ kenar solar. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
}
/* JS ölçümüyle güncellenen durumlar (contract: .is-*). */
.limitsiz-app .le-blog-cats.is-mid .le-blog-cats__rail{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.limitsiz-app .le-blog-cats.is-end .le-blog-cats__rail{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 100%);
}
/* JS ölçtü ve taşma YOK → maske hiç uygulanmaz (son çip solmasın). */
.limitsiz-app .le-blog-cats.is-ready:not(.is-scrollable) .le-blog-cats__rail{
  -webkit-mask-image:none;mask-image:none;
}

/* İnce kaydırma çubuğu (WebKit) */
.limitsiz-app .le-blog-cats__rail::-webkit-scrollbar{height:6px}
.limitsiz-app .le-blog-cats__rail::-webkit-scrollbar-track{background:transparent}
.limitsiz-app .le-blog-cats__rail::-webkit-scrollbar-thumb{
  background:var(--le-border-strong);border-radius:999px;
}
.limitsiz-app .le-blog-cats__rail::-webkit-scrollbar-thumb:hover{background:var(--le-brand-700)}

.limitsiz-app .le-blog-cats__pill{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}

/* Ok düğmeleri — yalnız işaretçi cihazlarda ve kaydırma gerekiyorsa görünür.
   Elementor reset'i (button{border:1px solid #CC3366;color:#CC3366} 0,1,0 ve
   button:hover{background:#CC3366} 0,2,0) burada (0,2,0)/(0,3,0) ile ezilir. */
.limitsiz-app .le-blog-cats__nav{
  position:absolute;top:calc(50% - 4px);transform:translateY(-50%);
  width:36px;height:36px;display:none;place-items:center;
  border:1px solid var(--le-border-strong);border-radius:999px;
  background:#fff;color:var(--le-brand-900);cursor:pointer;
  box-shadow:var(--le-sh-soft);z-index:2;
  transition:background var(--le-t-color) ease,color var(--le-t-color) ease,border-color var(--le-t-color) ease;
}
.limitsiz-app .le-blog-cats__nav:hover,
.limitsiz-app .le-blog-cats__nav:focus-visible{
  background-color:var(--le-surface-2);border-color:var(--le-brand-700);color:var(--le-brand-900);
}
.limitsiz-app .le-blog-cats__nav[hidden]{display:none}
.limitsiz-app .le-blog-cats__nav--prev{left:-6px}
.limitsiz-app .le-blog-cats__nav--next{right:-6px}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .limitsiz-app .le-blog-cats__nav:not([hidden]){display:grid}
  /* Oklar çiplerin üstüne binmesin: şerit kaydırılabilirken iki yandan da SABİT
     içeri alınır (duruma göre değişse kaydırma sırasında içerik zıplardı). */
  .limitsiz-app .le-blog-cats.is-scrollable .le-blog-cats__rail{
    padding-inline:34px;scroll-padding-inline:34px;
  }
}

/* Dar ekran: şerit kenarlara kadar aksın (kesik görünmesin). */
@media (max-width:640px){
  .limitsiz-app .le-blog-cats__rail{
    margin-inline:calc(var(--le-gutter) * -1);
    padding-inline:var(--le-gutter);
    scroll-padding-inline:var(--le-gutter);
  }
}
@media (prefers-reduced-motion:reduce){
  .limitsiz-app .le-blog-cats__rail{scroll-behavior:auto}
}

/* =============================================================================
 * 2) ÖNE ÇIKAN YAZI — yatay kart (dc.html: border-radius 24px, padding clamp(16,1.8vw,24))
 * ========================================================================== */
.limitsiz-app .le-blog-featured{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,36px);align-items:center;
  border:1px solid var(--le-border);border-radius:24px;background:#fff;
  padding:clamp(16px,1.8vw,24px);color:inherit;
  transition:box-shadow var(--le-t-card) ease;
}
.limitsiz-app .le-blog-featured:hover,
.limitsiz-app .le-blog-featured:focus-visible{box-shadow:var(--le-sh-hover);color:inherit}
.limitsiz-app .le-blog-featured__media{flex:1 1 360px;min-width:0;border-radius:18px;border-bottom:0}
.limitsiz-app .le-blog-featured__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--le-brand-700)}
.limitsiz-app .le-blog-featured__ph .le-ico{width:40px;height:40px}
.limitsiz-app .le-blog-featured__body{
  display:flex;flex-direction:column;flex:1 1 340px;min-width:0;padding:clamp(4px,1vw,16px);
}
.limitsiz-app .le-blog-featured__flag{align-self:flex-start}
.limitsiz-app .le-blog-featured__title{display:block;margin-top:14px}
.limitsiz-app .le-blog-featured__excerpt{display:block;margin-top:12px;max-width:52ch}
.limitsiz-app .le-blog-featured__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;
  font-size:13px;color:var(--le-muted);
}

/* =============================================================================
 * 3) GÖVDE — TEK SÜTUN ızgara + sayfalama + boş durum (Blog.dc.html birebir)
 *    dc.html: display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
 *             gap:clamp(16px,1.8vw,24px) — .le-grid çekirdeği aynı deseni kullanır,
 *             yalnız boşluk (gap) burada dc.html değerine göre ince ayarlanır.
 * ========================================================================== */
.limitsiz-app .le-blog-grid{gap:clamp(16px,1.8vw,24px)}

/* --- Izgara kartı: maketten ÖLÇÜLEN sapmaların sayfa-scoped kapatılması ---------
 * Paylaşılan .le-post-card çekirdeği (limitsiz.css §7b) DEĞİŞTİRİLMEZ; Blog.dc.html'in
 * ızgara kartına özgü literal değerler burada, `[data-page="blog"]` (0,3,0) ile geçilir.
 * Maket referansı (Blog.dc.html satır 80-95):
 *   görsel  aspect-ratio:16/9 + border-bottom:1px solid #E9E5F2 (ölçüm 279×157)
 *   başlık  18px/1.35  ·  özet 14px/1.6 İKİ SATIR (45px)
 *   meta    padding-top:12px; gap:12px; İKONSUZ "tarih • okuma"
 *   yedek   linear-gradient(135deg,#F2F0FA,#EEF5FF) + #8E80BC doküman ikonu
 * -------------------------------------------------------------------------- */
.limitsiz-app[data-page="blog"] .le-post-card__media{
  border-bottom:1px solid var(--le-border);
  background:linear-gradient(135deg,var(--le-surface-2),var(--le-surface-3));
}
.limitsiz-app[data-page="blog"] .le-post-card__ph{color:#8E80BC}
.limitsiz-app[data-page="blog"] .le-post-card__title{font-size:18px;line-height:1.35}
/* Özet 2 satırda kesilir — maket 45px (2×22.4); clamp'siz hali 4 satıra çıkıyordu. */
.limitsiz-app[data-page="blog"] .le-post-card__excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
/* line-height:normal — makette meta satırında satır yüksekliği verilmemiş; .limitsiz-app'in
   1.6'sı mirasla satırı 20.8px'e çıkarıp meta bloğunu 30 → 32.8px yapıyordu. */
.limitsiz-app[data-page="blog"] .le-post-card__meta{gap:12px;padding-top:12px;line-height:normal}

.limitsiz-app .le-blog-empty{max-width:640px;margin-inline:auto}
.limitsiz-app .le-blog-empty__text{margin:10px auto 0;max-width:46ch}
.limitsiz-app .le-blog-empty__cta{margin-top:18px}

/* Sayfalama — search.css ile aynı `…` boşluk deseni */
.limitsiz-app .le-pager__gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:44px;color:var(--le-muted);
}

/* =============================================================================
 * 4) DAR EKRAN AYARLARI
 * ========================================================================== */
@media (max-width:640px){
  .limitsiz-app .le-blog-featured{padding:14px;border-radius:20px}
}

/* =============================================================================
 * 5) ELEMENTOR ÇAKIŞMA DÜZELTMELERİ (bu sayfaya özel yüzeyler)
 *    Genel armor limitsiz.css §19'da; burada yalnız sayfa bileşenleri (savunmacı
 *    tekrar — about.css ile aynı kural).
 * ========================================================================== */
.limitsiz-app .le-blog-featured{border:1px solid var(--le-border)}