/*!
 * [limitsiz_courses] — Eğitimler arşivi sayfa stilleri.
 * Kaynak: dc-preview/Egitimler.dc.html (inline stil değerleri BİREBİR taşındı).
 *
 * KAPSAM: her kural `.limitsiz-app[data-page="courses"]` altında (0,3,0) —
 * limitsiz.css'ten SONRA yüklenir; paylaşılan bileşenleri (.le-card, .le-btn,
 * .le-grid, .le-pager, .le-empty, .le-edv--kart) YENİDEN ÜRETMEZ, yalnız DC'ye
 * hizalayan farkları verir.
 *
 * FİYATSIZ/LEAD MODELİ: fiyat filtresi/fiyat sıralaması bileşeni YOKTUR.
 * Eğitim kartının kendi stili paylaşılan katmandadır (partials/product-card.php
 * yalnız .le-* sınıfları kullanır) — kart 5 farklı sayfada render edildiği için
 * karta özel kural BURAYA YAZILMAZ.
 */

/* =============================================================================
 * 1) HERO — breadcrumb + H1 + lead + arama
 * ========================================================================== */
.limitsiz-app[data-page="courses"] .le-crs-hero{
  background:linear-gradient(180deg,#F8F7FC,#FFFFFF);
  border-bottom:1px solid var(--le-border);
  padding:clamp(24px,3vw,40px) 0 clamp(32px,4vw,56px);
}

.limitsiz-app[data-page="courses"] .le-crs-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--le-muted);margin-bottom:18px;
}
.limitsiz-app[data-page="courses"] .le-crs-crumb a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--le-muted);
  transition:color var(--le-t-color) ease;
}
.limitsiz-app[data-page="courses"] .le-crs-crumb a:hover,
.limitsiz-app[data-page="courses"] .le-crs-crumb a:focus-visible{color:var(--le-brand-700)}
.limitsiz-app[data-page="courses"] .le-crs-crumb__cur{color:var(--le-ink);font-weight:600}

.limitsiz-app[data-page="courses"] .le-crs-hero__h1{max-width:18ch}
.limitsiz-app[data-page="courses"] .le-crs-hero__lead{
  margin:16px 0 0;line-height:1.65;max-width:62ch;
}

.limitsiz-app[data-page="courses"] .le-crs-search{margin:26px 0 0;max-width:620px}
/* line-height AÇIKÇA `normal`: tema reset'i label'a 1 (=13px) veriyordu,
   DC'de etiket kutusu 18px (ÖLÇÜM: maket 620×18 · canlı 620×13). */
.limitsiz-app[data-page="courses"] .le-crs-search__label{
  display:block;font-size:13px;line-height:normal;font-weight:600;
  color:var(--le-brand-700);margin-bottom:8px;
}
.limitsiz-app[data-page="courses"] .le-crs-search__field{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--le-border);border-radius:16px;padding:8px;
  box-shadow:var(--le-sh-soft);
}
.limitsiz-app[data-page="courses"] .le-crs-search__field:focus-within{border-color:var(--le-brand-700)}
.limitsiz-app[data-page="courses"] .le-crs-search__ico{
  margin-left:10px;flex:0 0 auto;color:var(--le-muted);
}
.limitsiz-app[data-page="courses"] .le-crs-search__input{
  flex:1 1 auto;min-width:0;height:48px;
  border:0;outline:none;background:transparent;box-shadow:none;
  font-size:16px;color:var(--le-ink);padding:0;
}
.limitsiz-app[data-page="courses"] .le-crs-search__input::placeholder{color:var(--le-muted);opacity:1}
.limitsiz-app[data-page="courses"] .le-crs-search__go{flex:0 0 auto;padding:0 20px}

/* =============================================================================
 * 2) GÖVDE DÜZENİ — sol filtre kenar çubuğu + sağ sonuç sütunu
 *    DC: flex-wrap; aside flex 1 1 260px (sticky 96px) · main flex 3 1 560px
 * ========================================================================== */
.limitsiz-app[data-page="courses"] .le-crs-body{
  padding:clamp(32px,4vw,56px) 0 clamp(56px,7vw,96px);
}
.limitsiz-app[data-page="courses"] .le-crs-layout{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(20px,2.4vw,32px);
}

.limitsiz-app[data-page="courses"] .le-crs-aside{
  flex:1 1 260px;min-width:0;max-width:100%;
  border:1px solid var(--le-border);border-radius:20px;
  padding:22px;background:#fff;z-index:3;
}
@media (min-width:1001px){
  .limitsiz-app[data-page="courses"] .le-crs-aside{
    position:sticky;top:calc(var(--le-hdr-h) + 19px);
  }
}

/* Başlık satırı DC'de 44px'tir (içindeki "Temizle" düğmesinin dokunma hedefi);
   filtre etkin değilken düğme basılmasa da satır yüksekliği KORUNUR. */
.limitsiz-app[data-page="courses"] .le-crs-aside__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;margin-bottom:16px;
}
.limitsiz-app[data-page="courses"] .le-crs-aside__title{
  margin:0;font-size:17px;font-weight:700;color:var(--le-brand-900);
}
/* Sıfırlama formu düzeni bozmasın: düğme doğrudan başlık satırının flex öğesi. */
.limitsiz-app[data-page="courses"] .le-crs-clearform{display:contents}
.limitsiz-app[data-page="courses"] .le-crs-clear{
  margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  border:0;background:transparent;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--le-brand-700);
}
/* reset.css `button:hover,button:focus{background-color:#CC3366}` (0,2,0) → (0,3,0) */
.limitsiz-app[data-page="courses"] .le-crs-clear:hover,
.limitsiz-app[data-page="courses"] .le-crs-clear:focus{background-color:transparent}
.limitsiz-app[data-page="courses"] .le-crs-clear:hover,
.limitsiz-app[data-page="courses"] .le-crs-clear:focus-visible{color:var(--le-brand-900)}
/* Kapatma düğmesi paylaşılan .le-iconbtn ölçüsünde kalır (44×44 dokunma hedefi). */
.limitsiz-app[data-page="courses"] .le-crs-aside__close{margin-left:2px}

/* DC'de bu satır <h3> ölçüsündedir (13px/normal → 18px kutu); belge başlık
   hiyerarşisi bozulmasın diye etiket <span>'dir, TİPOGRAFİ birebir taşınır. */
.limitsiz-app[data-page="courses"] .le-crs-fgroup{
  display:block;margin:0 0 10px;font-size:13px;line-height:normal;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--le-muted);
}
/* -----------------------------------------------------------------------------
 * 2b) KATEGORİ LİSTESİ — DİKEY, KENDİ İÇİNDE KAYDIRILIR (kullanıcı revizyonu 2)
 * Önceki yatay şerit (tek satır, overflow-x) dar (260-300px) kenar çubuğunda
 * ~1,5 çip gösterip kullanılamaz hâle geliyordu (ÖLÇÜLDÜ, ekran görüntüsü).
 * Kullanıcı talebi birebir: "dikey olarak görünüp inline scroll olacaktı yatay
 * değil". Liste artık alt alta dizilir; TAŞAN kısım listenin KENDİ İÇİNDE
 * (overflow-y) kayar — sayfa uzamaz, `.le-crs-aside` sticky kalır (satır ~84).
 *   .le-crs-catwrap  = konum kabı (courses.js hâlâ `data-le-crs-catwrap`'i arıyor;
 *                      element KORUNDU, artık görsel kenar ipucu üretmiyor)
 *   .le-crs-cats     = dikey kaydırma kabı (overflow-y:auto, sabit max-height,
 *                      CSS-only "scroll shadow" — JS'siz de üstte/altta daha
 *                      fazla öğe olduğunda otomatik ince gölge/soluklaşma verir)
 *   .le-crs-cat      = tam genişlik liste satırı, min 44px dokunma hedefi
 * courses.js bu kapta yalnız YATAY eksende scrollLeft okuyup .is-start/.is-end
 * sınıflarını sürüyordu (dikey listede artık anlamsız — dokunulmadı, `assets/js`
 * bu dosyanın kapsamı DIŞINDA). Dikey eksende overflow olmadığından scrollLeft
 * her zaman 0 kalır, sınıflar sürekli "başta" görünür ama CSS artık onlara
 * bakmıyor → zararsız kalıntı. Ekran görüntüsündeki soldaki/sağdaki minik ok
 * izlenimi aslında bu YATAY kenar-soluklaşma ::before/::after'ıydı; dikeyde
 * anlamsız olduğu için TAMAMEN KALDIRILDI (courses.php'de ayrı bir ok markup'ı
 * yoktu — yalnız bu CSS ipucuydu).
 * -------------------------------------------------------------------------- */
.limitsiz-app[data-page="courses"] .le-crs-catwrap{
  position:relative;margin-bottom:22px;
}

.limitsiz-app[data-page="courses"] .le-crs-cats{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-right:6px;                  /* ince dikey çubuğa yer, satırları itmesin */
  scrollbar-width:thin;scrollbar-color:var(--le-border-strong) transparent;
  /* Maks. yükseklik ~7-9 satır (satır ≈44-50px): klasik değer clamp(260px,34vh,400px);
     aside sticky olduğu için (satır ~84) kutunun TAMAMI viewport'u aşmasın diye
     ikinci sınır 100dvh'den başlık + aside'ın diğer parçalarının (head 60 + grup
     etiketi 23 + kart alt boşluğu 46 + E-Devlet kartı ~90 + sticky top ofseti 19
     ≈ 240px, güvenlik payıyla 260px) düşülmüş hâliyle sınırlanır — hangisi küçükse. */
  max-height:min(clamp(260px,34vh,400px),calc(100dvh - var(--le-hdr-h) - 260px));
  /* CSS-only "scroll shadow": local katman kap arka planıyla aynı renkte kısa bir
     bant çizer (üstte/altta içerik VARSA görünür, taşma yoksa aynı beyaz üstüne
     beyaz olduğundan görünmez) + scroll katmanı (kap ile birlikte KAYMAZ) hafif bir
     gölge ekler. JS'e bağlı değildir, .is-start/.is-end sınıflarını beklemez. */
  background:
    linear-gradient(#fff 40%,rgba(255,255,255,0)) local,
    linear-gradient(rgba(255,255,255,0),#fff 60%) local,
    radial-gradient(farthest-side at 50% 0,rgba(26,0,87,.10),rgba(26,0,87,0)) scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(26,0,87,.10),rgba(26,0,87,0)) scroll 100%;
  background-repeat:no-repeat;
  background-color:#fff;
  background-size:100% 20px,100% 20px,100% 8px,100% 8px;
  background-position:top,bottom,top,bottom;
  background-attachment:local,local,scroll,scroll;
}
.limitsiz-app[data-page="courses"] .le-crs-cats:focus-visible{
  outline:2px solid var(--le-brand-700);outline-offset:2px;border-radius:12px;
}
.limitsiz-app[data-page="courses"] .le-crs-cats::-webkit-scrollbar{width:6px}
.limitsiz-app[data-page="courses"] .le-crs-cats::-webkit-scrollbar-track{background:transparent}
.limitsiz-app[data-page="courses"] .le-crs-cats::-webkit-scrollbar-thumb{
  background:var(--le-border-strong);border-radius:99px;
}
/* Satır: tam genişlik, uzun kategori adları SARAR (kırpılmaz). Bu bir filtre
   listesi — "Aile ve Tüketic..." gibi ellipsis kullanıcının doğru kategoriyi
   seçmesini engelleyebilir; okunabilirlik/işlevsellik kırpmadan önce gelir. */
.limitsiz-app[data-page="courses"] .le-crs-cat{
  display:flex;align-items:center;gap:8px;
  width:100%;flex:0 0 auto;min-height:44px;padding:10px 14px;
  white-space:normal;text-align:left;
  border:1px solid var(--le-border);border-radius:14px;background:#fff;
  font-size:15px;font-weight:500;line-height:1.3;color:var(--le-ink);
  transition:background var(--le-t-color) ease,border-color var(--le-t-color) ease,color var(--le-t-color) ease;
}
.limitsiz-app[data-page="courses"] .le-crs-cat:hover,
.limitsiz-app[data-page="courses"] .le-crs-cat:focus-visible{
  background:var(--le-surface);border-color:var(--le-border-strong);color:var(--le-ink);
}
.limitsiz-app[data-page="courses"] .le-crs-cat.is-active{
  border-color:var(--le-brand-900);background:var(--le-brand-900);
  color:#fff;font-weight:700;
}
.limitsiz-app[data-page="courses"] .le-crs-cat.is-active:hover,
.limitsiz-app[data-page="courses"] .le-crs-cat.is-active:focus-visible{
  background:var(--le-brand-800);border-color:var(--le-brand-800);color:#fff;
}
/* Dikey satırda etiket kalan genişliği doldurup SARAR; sayı rozeti sağa yaslı
   kalması için margin-left:auto (satır tam genişlik olduğundan artık gerekli —
   yatay çipte otomatik genişlik bunu kendiliğinden sağlıyordu). */
.limitsiz-app[data-page="courses"] .le-crs-cat__label{flex:1 1 auto;min-width:0;text-align:left}
.limitsiz-app[data-page="courses"] .le-crs-cat__count{
  flex:0 0 auto;margin-left:auto;align-self:flex-start;
  font-size:12px;font-weight:700;color:var(--le-muted);
  min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--le-surface-2);
}
.limitsiz-app[data-page="courses"] .le-crs-cat.is-active .le-crs-cat__count{
  color:#fff;background:rgba(255,255,255,.18);
}

/* E-Devlet güven kartı — DC: 14px padding · 14px radius · 12px gap · gölgesiz */
.limitsiz-app[data-page="courses"] .le-crs-edv{
  flex-wrap:nowrap;align-items:flex-start;gap:12px;
  padding:14px;border-radius:14px;box-shadow:none;
}
.limitsiz-app[data-page="courses"] .le-crs-edv__mark{flex:0 0 auto;margin-top:2px;display:block}
.limitsiz-app[data-page="courses"] .le-crs-edv__mark img{width:30px;height:23px}
.limitsiz-app[data-page="courses"] .le-crs-edv .le-edv__body{flex:1 1 auto;min-width:0}
.limitsiz-app[data-page="courses"] .le-crs-edv__title{
  display:block;font-size:14px;font-weight:800;line-height:1.3;color:var(--le-edevlet-text);
}
.limitsiz-app[data-page="courses"] .le-crs-edv__desc{
  display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#7A4A4A;
}

/* =============================================================================
 * 3) SONUÇ SÜTUNU — araç çubuğu (sayı + sıralama) + ızgara + sayfalama
 * ========================================================================== */
.limitsiz-app[data-page="courses"] .le-crs-main{flex:3 1 560px;min-width:0}

.limitsiz-app[data-page="courses"] .le-crs-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;margin-bottom:20px;
}
.limitsiz-app[data-page="courses"] .le-crs-count{margin:0;font-size:15px;color:var(--le-muted)}
.limitsiz-app[data-page="courses"] .le-crs-count strong{color:var(--le-ink);font-weight:700}
.limitsiz-app[data-page="courses"] .le-crs-toolbar__right{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
}

/* DC: etiket ve <select> AYNI satırda (label 156×44). `flex-wrap:wrap` iken
   Chrome bu formun otomatik genişliğini en geniş öğe (select) kadar hesaplıyor,
   etiket alt satıra düşüp araç çubuğunu 44 → 68px'e çıkarıyordu (ÖLÇÜLDÜ). */
.limitsiz-app[data-page="courses"] .le-crs-sort{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.limitsiz-app[data-page="courses"] .le-crs-sort__label{
  font-size:14px;color:var(--le-muted);white-space:nowrap;
}
.limitsiz-app[data-page="courses"] .le-crs-sort__select{
  height:44px;border:1px solid var(--le-border);border-radius:12px;background:#fff;
  padding:0 12px;font-size:14px;color:var(--le-ink);cursor:pointer;
}
.limitsiz-app[data-page="courses"] .le-crs-sort__select:focus{
  border-color:var(--le-brand-700);box-shadow:0 0 0 3px rgba(58,35,128,.13);outline:none;
}

/* Izgara boşluğu — DC: clamp(16px,1.6vw,22px) (paylaşılan --le-gap 12px'ten başlar) */
.limitsiz-app[data-page="courses"] .le-crs-grid{gap:clamp(16px,1.6vw,22px)}

/* GENİŞ masaüstünde SABİT 3 sütun. Paylaşılan .le-grid auto-fit'i (minmax(258px,1fr))
   1440px'te bile 2 SÜTUNA düşüyordu: ana sütun 816px, 3 sütun için gereken
   3×258+2×22 = 818px → 2px eksik (ÖLÇÜLDÜ: gridTemplateColumns 2 track, kart 397px).
   Kap 1240px'le sınırlı olduğu için auto-fit bu eşiği HİÇBİR genişlikte geçemez.
   Sayfa başına 12 eğitim 3×4 ızgara olarak tasarlandığından ≥1200px'te sütun sayısı
   sabitlenir (kart 249–257px = DC ölçüsü). 1001–1199px arası auto-fit'te bırakılır:
   orada 3 sütun kartı 181px'e düşürüyordu (ÖLÇÜLDÜ), auto-fit 2 sütun veriyor. */
@media (min-width:1200px){
  .limitsiz-app[data-page="courses"] .le-crs-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* -----------------------------------------------------------------------------
 * 3b) ARŞİV KARTI İNCE AYARI — kart bileşeni PAYLAŞILAN katmandadır; burada
 *     yalnız bu sayfadaki (0,3,0) kapsamla DC'ye hizalayan iki fark verilir.
 *     partials/product-card.php ve limitsiz.css'e DOKUNULMAZ.
 * -------------------------------------------------------------------------- */
/* Başlık: DC'de <h3>'ün KENDİ tipografisi tarayıcı varsayılanıdır (18.72px/normal,
   kutu 26px), görünen metin ise iç <a>'da 18px/1.32 (kutu 24px). İkisi de birebir. */
.limitsiz-app[data-page="courses"] .le-crs-grid .le-course-card__title{
  font-size:18.72px;line-height:normal;
}
.limitsiz-app[data-page="courses"] .le-crs-grid .le-course-card__title>.le-card__link{
  font-size:18px;line-height:1.32;
}
/* Özet: DC'de 2–3 satır (45–67px). Kırpılmayınca kart gövdesi 287 → 347px şişiyordu. */
.limitsiz-app[data-page="courses"] .le-crs-grid .le-course-card .le-card__body>p{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}

.limitsiz-app[data-page="courses"] .le-pager__gap{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--le-muted);
}

/* Boş durum — paylaşılan .le-empty + DC tipografisi */
.limitsiz-app[data-page="courses"] .le-crs-empty__title{
  margin:0;font-size:20px;font-weight:700;line-height:1.3;color:var(--le-brand-900);
}
.limitsiz-app[data-page="courses"] .le-crs-empty__lead{
  margin:10px auto 0;font-size:15px;line-height:1.6;color:var(--le-muted);max-width:46ch;
}
.limitsiz-app[data-page="courses"] .le-crs-empty__cta{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px;
}

/* =============================================================================
 * 4) MOBİL FİLTRE ÇEKMECESİ — YALNIZ JS varken (.is-drawer, courses.js ekler)
 *    JS yoksa kenar çubuğu akışta normal görünür (içerik JS'siz erişilebilir).
 * ========================================================================== */
.limitsiz-app[data-page="courses"] .le-crs-openfilters{display:none}

@media (max-width:1000px){
  .limitsiz-app[data-page="courses"] .le-crs-body.is-drawer .le-crs-openfilters{
    display:inline-flex;
  }
  /* ⚠ Çekmece sabit başlığın ALTINDAN başlar. Elementor global header kabı
     `position:sticky;z-index:100` (limitsiz.css §Elementor override) — çekmece
     z-index 80 olduğu için top:0 iken başlık satırı (Filtreler + Temizle + ✕)
     başlığın ALTINDA kalıyor ve KAPATMA DÜĞMESİ tıklanamıyordu (ÖLÇÜLDÜ: headTop 18,
     başlık yüksekliği 77px). Paylaşılan mobil menü çekmecesiyle aynı desen:
     top = var(--le-hdr-h). */
  .limitsiz-app[data-page="courses"] .le-crs-body.is-drawer .le-crs-aside{
    position:fixed;top:var(--le-hdr-h);right:0;bottom:0;left:auto;
    width:min(360px,92vw);max-width:92vw;
    z-index:80;border-radius:0;border-width:0 0 0 1px;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));
    transform:translateX(101%);
    transition:transform .24s var(--le-ease);
    box-shadow:var(--le-sh-pop);
  }
  .limitsiz-app[data-page="courses"] .le-crs-body.is-drawer .le-crs-aside.is-open{transform:none}
  .limitsiz-app[data-page="courses"] .le-crs-body.is-drawer .le-crs-scrim{
    position:fixed;inset:0;z-index:79;background:rgba(26,0,87,.34);
  }
}

/* Çekmece modunda kapatma düğmesi görünür; masaüstünde asla. */
@media (min-width:1001px){
  .limitsiz-app[data-page="courses"] .le-crs-aside__close,
  .limitsiz-app[data-page="courses"] .le-crs-openfilters,
  .limitsiz-app[data-page="courses"] .le-crs-scrim{display:none!important}
}

/* =============================================================================
 * 5) KÜÇÜK EKRAN İNCE AYARLARI
 * ========================================================================== */
@media (max-width:640px){
  /* Dikey kategori listesi mobilde (çekmece içinde) de aynı bileşen; satırlar
     biraz kısılır. Çekmecenin KENDİSİ de (.le-crs-aside, is-drawer altında)
     overflow-y:auto — burada çift kaydırma bölgesi kasıtlı (madde 4/8): iç
     liste kendi max-height'inde kayar, `overscroll-behavior:contain` (üstte,
     .le-crs-cats tanımında) taşan tekerlek/dokunuşun çekmece gövdesine
     sızmasını engeller; 375px genişlikte doğrulandı (mantık/ölçüm — bkz rapor). */
  .limitsiz-app[data-page="courses"] .le-crs-cat{font-size:14px;padding:9px 12px;gap:6px}
  .limitsiz-app[data-page="courses"] .le-crs-search__field{padding:6px;border-radius:14px}
  .limitsiz-app[data-page="courses"] .le-crs-search__go{padding:0 16px}
  .limitsiz-app[data-page="courses"] .le-crs-toolbar{gap:10px 12px}
  .limitsiz-app[data-page="courses"] .le-crs-sort{width:100%}
  .limitsiz-app[data-page="courses"] .le-crs-sort__select{flex:1 1 auto;min-width:0}
}