/**
 * [asc_courses] — Eğitim arşivi (/egitimler/) + kategori arşivi
 * (/egitim-kategori/<slug>/) sayfa stilleri. TASARIM v2.
 *
 * Kaynak: "Acil Sertifika.dc.html" (handoff v2) satır 571–690 (isArchive) ve
 * 965–1026 (isCategory). Taban bileşenler (.as-container .as-card .as-chip .as-btn
 * .as-select .as-empty .as-pagination .as-breadcrumb .as-edevlet-badge
 * .as-course-card .as-media--1x1 …) assets/css/asc.css içindedir; burada yalnızca
 * bu iki sayfanın yerleşimi ve sayfaya özgü parçalar var.
 *
 * Kurallar:
 *  - Tüm seçiciler .asc-app[data-page="courses"] altında kapsanır (Elementor'u yener).
 *  - Ham hex YOK — yalnızca var(--as-*) token'ları (v1 önekli adlar KALDIRILDI).
 *  - Fiyat/indirim/kontenjan bileşeni YOKTUR (fiyatsız lead-gen modeli).
 *  - Eğitim SÜRESİ ile ilgili hiçbir filtre/çip/sıralama parçası YOKTUR (§2.3).
 *  - JS kapalıyken tüm içerik görünür kalır; yalnızca "Uygula" butonu JS varken gizlenir.
 *
 * Kırılımlar: ≥1160 → 3 kolon · 620–1160 → 2 kolon · altı tek kolon.
 * <1000px yan panel üste geçer ve sticky kalkar.
 */

/* =========================================================================
   1) ARŞİV HERO — beyaz zemin + kırpılmış açık mavi yıkama
   ====================================================================== */
.asc-app[data-page="courses"] .as-arc-hero {
  position: relative;
  overflow: hidden;
  background: var(--as-white);
}
.asc-app[data-page="courses"] .as-arc-hero__wash {
  position: absolute;
  inset: 0;
  background: var(--as-band);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
  pointer-events: none;
}
.asc-app[data-page="courses"] .as-arc-hero__in {
  position: relative;
  padding-block: 38px 52px;
}
.asc-app[data-page="courses"] .as-arc-hero__title {
  margin-top: 18px;
  max-width: 760px;
  /* Tasarım H1 1.08 satır yüksekliğinde (dc-ref 580); taban .as-t-page 1.1 →
     48px'te 52.8px ölçülüyordu, tasarım 51.84px. */
  line-height: 1.08;
  color: var(--as-navy);
  text-wrap: balance;
}
.asc-app[data-page="courses"] .as-arc-hero__lead {
  margin-top: 14px;
  max-width: 640px;
  line-height: 1.65;
  color: var(--as-ink-2);
}
.asc-app[data-page="courses"] .as-arc-hero__facts {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Gerçek sayımlardan beslenen bilgi pill'leri (uydurma istatistik yok). */
.asc-app[data-page="courses"] .as-arc-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-pill);
  background: var(--as-white);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--as-blue);
}
.asc-app[data-page="courses"] .as-arc-fact--ink { color: var(--as-navy-2); }
.asc-app[data-page="courses"] .as-arc-fact__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--as-r-pill);
  background: var(--as-blue);
}
/* Arşiv hero rozeti — §2.1 gereği KOŞULSUZ. Çip dolgusu tasarımdaki gibi
   9px 15px 9px 11px / 13.5px (dc-ref 585).
   İŞARET PUCKU 24px'te BIRAKILIR: rozet fact şeridinin en yüksek öğesi olduğu
   için şeridin boyunu o belirliyor → 24 + 9 + 9 + 2 kenarlık = 44px (tasarım).
   Önceki 26px'lik büyütme şeridi 46px'e çıkarıyordu. */
.asc-app[data-page="courses"] .as-arc-hero__edevlet {
  padding: 9px 15px 9px 11px;
  font-size: 13.5px;
  /* Tasarımda hero şeridindeki ÜÇ pill de 700 ağırlıktadır (dc-ref 583–585);
     canlıdaki 800, asc.css §4.9'daki taban `.as-edevlet-badge` (0,1,0)
     kuralından miras kalıyordu — o değer 11px'lik KART çipi için doğru, 13.5px
     hero pill'i için değil. Metin alt <span>'de kendi ağırlığını taşımıyor,
     bu yüzden pill'e yazmak yeterli. */
  font-weight: 700;
}
.asc-app[data-page="courses"] .as-arc-hero__edevlet .as-edevlet-badge__mark {
  width: 24px;
  height: 24px;
}
.asc-app[data-page="courses"] .as-arc-hero__edevlet .as-edevlet-badge__mark img { width: 16px; height: 16px; }
.asc-app[data-page="courses"] .as-arc-hero__edevlet svg { width: 16px; height: 16px; }

/* =========================================================================
   2) KATEGORİ HERO — degrade + alt kenarlık
   ====================================================================== */
.asc-app[data-page="courses"] .as-cat-hero {
  padding-block: 44px 56px;
  border-bottom: 1px solid var(--as-line-2);
  background: linear-gradient(180deg, var(--as-tint-3), var(--as-white));
}
.asc-app[data-page="courses"] .as-cat-hero__title {
  margin-top: 18px;
  max-width: 760px;
  color: var(--as-navy);
  text-wrap: balance;
}
.asc-app[data-page="courses"] .as-cat-hero__lead {
  margin-top: 14px;
  max-width: 620px;
  line-height: 1.6;
  color: var(--as-ink-2);
}
.asc-app[data-page="courses"] .as-cat-hero__count { margin-top: 22px; }

/* --- Kırıntı (breadcrumb) ------------------------------------------------ */
/* Tasarımda kırıntı öğeleri 40px yüksekliğinde inline-flex kutulardır
   (dc-ref 577: `min-height:40px`) → satır SABİT 40px olur ve bağlantı dokunma
   hedefi 40px'e ulaşır. Canlıda satır 23.6px ölçülmüştü: yükseklik yalnızca
   miras satır yüksekliğinden geliyordu, hedef de o kadar küçüktü.
   RENK: tasarım #64748B (--as-muted). UYGULANMADI — hero yıkaması --as-band
   (#EDF3FC) üzerinde #64748B kontrastı 4.27:1 ölçülüyor, 13.5px normal metin
   için AA eşiği 4.5:1. Bağlantılar aynı mürekkep ailesinin bir ton koyusunda
   (--as-ink-3, 6.8:1) bırakıldı; taban asc.css'teki gerekçeyle aynı. */
.asc-app[data-page="courses"] .as-breadcrumb a,
.asc-app[data-page="courses"] .as-breadcrumb [aria-current],
.asc-app[data-page="courses"] .as-breadcrumb--rm a,
.asc-app[data-page="courses"] .as-breadcrumb--rm .last {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* Rank Math breadcrumb'ı taban .as-breadcrumb tipografisine oturur. */
.asc-app[data-page="courses"] .as-breadcrumb--rm .rank-math-breadcrumb p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--as-muted);
}
/* AA: taban .as-breadcrumb ile aynı gerekçe (--as-muted açık hero zemininde 4.29:1). */
.asc-app[data-page="courses"] .as-breadcrumb--rm a { color: var(--as-ink-3); }
.asc-app[data-page="courses"] .as-breadcrumb--rm a:hover { color: var(--as-blue); }
.asc-app[data-page="courses"] .as-breadcrumb--rm .last {
  font-weight: 600;
  color: var(--as-navy-2);
}

/* =========================================================================
   3) GÖVDE YERLEŞİMİ — yan panel + sonuç sütunu
   ====================================================================== */
.asc-app[data-page="courses"] .as-arc-body { padding-block: 36px 92px; }
.asc-app[data-page="courses"] .as-arc-body--cat { padding-block: 40px 96px; }

.asc-app[data-page="courses"] .as-shop__layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* Grid item'ın min-width:auto varsayılanı yan paneli track'ten taşırır. */
.asc-app[data-page="courses"] .as-shop__layout > * { min-width: 0; }

.asc-app[data-page="courses"] .as-shop__aside {
  position: sticky;
  top: 118px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.asc-app[data-page="courses"] .as-shop__main { min-width: 0; }

/* --- Panel kutusu ------------------------------------------------------- */
.asc-app[data-page="courses"] .as-shop__panel {
  padding: 22px;
  border: 1px solid var(--as-line-2);
  /* Tasarımda yan panel 20px (dc-ref 594/617) — token'lardaki en yakın değer
     --as-r-media 24px'ti ve panel kartlardan yuvarlak görünüyordu. */
  border-radius: 20px;
  background: var(--as-white);
}
/* Danışman kartı zemini. Tasarım #F8FBFF, token --as-tint-2 #F7FAFF: kanal
   başına 1/255 fark (ΔE < 0.5, gözle ayırt edilemez). Dosyanın "ham hex yok"
   kuralını tek bir algılanamaz ton için bozmuyoruz. */
.asc-app[data-page="courses"] .as-shop__panel--help { background: var(--as-tint-2); }

/* --- Mobil açılır filtre (disclosure) ------------------------------------ */
/* MASAÜSTÜ = TASARIM: buton hiç görünmez, gövde her zaman açıktır. Katlama
   davranışının TAMAMI aşağıdaki <1000px medya sorgusunun içinde yaşar; burada
   yalnızca butonu gizleyip gövdeyi doğal akışında bırakıyoruz. Gövdeyi gizleyen
   hiçbir kural bu kırılımda TANIMLI DEĞİL → "masaüstünde panel kapalı kaldı"
   diye bir başarısızlık modu üretilemez.
   Gerekçenin tamamı shortcodes/courses.php'deki nottadır. */
.asc-app[data-page="courses"] .as-shop__fold-btn { display: none; }

/* Alan etiketi — heading DEĞİL (outline bütünlüğü). */
.asc-app[data-page="courses"] .as-shop__flabel {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--as-muted);
}
/* Yan panel başlığı — H3. */
.asc-app[data-page="courses"] .as-shop__ftitle {
  margin-top: 26px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--as-muted);
}

/* --- Arama kutusu ------------------------------------------------------- */
.asc-app[data-page="courses"] .as-shop__search {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-btn);
  background: var(--as-tint);
  transition: border-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-fast) var(--as-ease);
}
.asc-app[data-page="courses"] .as-shop__search:focus-within {
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-ring);
}
.asc-app[data-page="courses"] .as-shop__search .as-ico { color: var(--as-muted-2); }
.asc-app[data-page="courses"] .as-shop__search .as-ico svg { width: 18px; height: 18px; }
.asc-app[data-page="courses"] .as-shop__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--as-font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--as-navy);
  outline: none;
}
.asc-app[data-page="courses"] .as-shop__search-input::placeholder {
  color: var(--as-muted-2);
  opacity: 1;
}
.asc-app[data-page="courses"] .as-shop__search-input::-webkit-search-decoration,
.asc-app[data-page="courses"] .as-shop__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Kategori listesi (gerçek <a> bağlantıları) -------------------------- */
.asc-app[data-page="courses"] .as-shop__cats {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* 12'den fazla kategori varsa liste kaydırılır — panel tasarımdaki boyunda kalır
   (canlıda ölçüldü: 143 terim → panel 9437px). Terim gizlenmez; kutu odaklanabilir
   olduğu için klavyeyle de gezilir. */
/* Kaydırma çubuğu telafisi: kutu panelin 22px'lik iç dolgusuna 6px taşırılır
   (margin-right:-6px), dolgu 4px'e (tasarımdaki değer, dc-ref 601) çekilir.
   Ölçüm: panel iç genişliği 272 − 2 kenarlık − 2×22 dolgu = 226px. Önce
   226 − 6 dolgu − ~8 ince çubuk = 212px öğe genişliği; şimdi 232 − 4 − 8 = 220px
   (+8px). Çubuk panelin dolgusunun içine kayar, kenarlığa 16px mesafede kalır.
   `scrollbar-gutter` burada işe YARAMAZ: kutu zaten her zaman taşıyor, yani
   ayrılacak yer hâlihazırda ayrılmış durumda. */
.asc-app[data-page="courses"] .as-shop__cats--scroll {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -6px;
  padding-right: 4px;
  scrollbar-width: thin;
}
.asc-app[data-page="courses"] .as-shop__cats--scroll::-webkit-scrollbar { width: 8px; }
.asc-app[data-page="courses"] .as-shop__cats--scroll::-webkit-scrollbar-thumb {
  background: var(--as-line-3);
  border-radius: var(--as-r-pill);
}
.asc-app[data-page="courses"] .as-shop__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-btn);
  background: var(--as-white);
  font-size: 14px;
  font-weight: 600;
  /* Tasarımda pasif kategori bağlantısı #0B2A5B (dc-ref 2683 `catChips.color`);
     canlıdaki --as-ink-2 (#334155) listeyi gövde metni gibi soluk gösteriyordu. */
  color: var(--as-navy-2);
  transition: background-color var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease);
}
.asc-app[data-page="courses"] .as-shop__cat:hover,
.asc-app[data-page="courses"] .as-shop__cat:focus-visible {
  border-color: var(--as-blue-ring);
  background: var(--as-tint-3);
  color: var(--as-blue);
}
.asc-app[data-page="courses"] .as-shop__cat.is-active {
  border-color: var(--as-navy);
  background: var(--as-navy);
  color: var(--as-white);
}
.asc-app[data-page="courses"] .as-shop__cat-label { min-width: 0; }
.asc-app[data-page="courses"] .as-shop__cat-n {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  opacity: .62;
}

/* --- Filtreleri temizle -------------------------------------------------- */
.asc-app[data-page="courses"] .as-shop__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--as-red);
}
.asc-app[data-page="courses"] .as-shop__clear:hover,
.asc-app[data-page="courses"] .as-shop__clear:focus-visible { color: var(--as-red-hover); }
.asc-app[data-page="courses"] .as-shop__clear .as-ico svg { width: 15px; height: 15px; }
/* Bağlantı artık tasarımdaki gibi HER ZAMAN basılıyor (gerekçe: shortcodes/
   courses.php'deki not — AJAX yan paneli yenilemiyor). Filtre yokken durumu
   sönük gri anlatır. Renk `opacity` ile SOLDURULMAZ: --as-red (#D93A29) %55
   opaklıkta beyazla karışınca #EA9389 olur ve kontrast 2.33:1'e düşer (AA
   altı). --as-muted (#64748B) panelin beyaz zemininde 4.76:1 hesaplanır →
   13.5px normal metin için AA (4.5:1) eşiğini geçer. */
.asc-app[data-page="courses"] .as-shop__clear.is-idle { color: var(--as-muted); }
.asc-app[data-page="courses"] .as-shop__clear.is-idle:hover,
.asc-app[data-page="courses"] .as-shop__clear.is-idle:focus-visible { color: var(--as-ink-3); }

/* --- Danışman kartı ------------------------------------------------------ */
.asc-app[data-page="courses"] .as-shop__help-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--as-navy);
}
.asc-app[data-page="courses"] .as-shop__help-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--as-ink-3);
}
/* Tasarımda dolu yeşil WhatsApp düğmesi (dc 620) — beyaz metin --as-wa üstünde 5.36:1. */
.asc-app[data-page="courses"] .as-shop__help-wa {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  border: 1px solid var(--as-wa-border);
  border-radius: var(--as-r-btn);
  background: var(--as-wa);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--as-white);
  transition: background-color var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease);
}
.asc-app[data-page="courses"] .as-shop__help-wa:hover,
.asc-app[data-page="courses"] .as-shop__help-wa:focus-visible {
  border-color: var(--as-wa-hover);
  background: var(--as-wa-hover);
  color: var(--as-white);
}
.asc-app[data-page="courses"] .as-shop__help-wa .as-ico { color: currentColor; }
.asc-app[data-page="courses"] .as-shop__help-wa .as-ico svg { width: 19px; height: 19px; }

/* =========================================================================
   4) ARAÇ ÇUBUĞU — toplam + sıralama
   ====================================================================== */
.asc-app[data-page="courses"] .as-shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--as-line-2);
}
.asc-app[data-page="courses"] .as-shop__bar--cat {
  margin-top: 24px;
  padding-bottom: 0;
  border-bottom: 0;
}
/* Sonuç sayacı — tasarımda cümlenin kendisi ikincil (600/#475569), yalnızca
   SAYI vurgulu (800/lacivert): "15 eğitim · 1–9 arası gösteriliyor" (dc-ref 629).
   Canlıda tüm cümle 700/lacivert olduğu için sıralama etiketiyle aynı ağırlıkta
   görünüyordu. */
.asc-app[data-page="courses"] .as-shop__count {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--as-ink-3);
}
.asc-app[data-page="courses"] .as-shop__count-n {
  font-weight: 800;
  color: var(--as-navy);
}
.asc-app[data-page="courses"] .as-shop__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.asc-app[data-page="courses"] .as-shop__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--as-muted);
}
/* Sıralama seçici. KARAR: tasarımdaki gibi YEREL ok (dc-ref 631'de `appearance`
   dokunulmamış, gömülü chevron yok, genişlik içerikten geliyor → 138px).
   Taban .as-select `appearance:none` + data-URI chevron + 42px sağ dolgu
   uyguladığı için buton 168px'e şişiyordu; şeritte "Sırala" etiketiyle birlikte
   tasarımdakinden 30px geniş duruyordu. Gerekçe: (1) yerel ok işletim sisteminin
   açılır listesiyle aynı dili konuşur ve klavye/dokunma davranışı tarayıcının
   kendi kontrolüdür, (2) bu sayfadaki TEK <select> — özel ok görsel tutarlılık
   değil, tek başına bir istisna üretiyordu, (3) 138px şeridi dar ekranda daha
   geç sarmalıyor. Alan yüksekliği/kenarlığı/tipografisi taban bileşende kalır. */
.asc-app[data-page="courses"] .as-shop__select {
  height: 44px;
  width: auto;
  min-width: 0;
  padding: 0 14px;
  -webkit-appearance: menulist;
  appearance: auto;
  background-image: none;
  border-radius: var(--as-r-btn);
  background-color: var(--as-white);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--as-navy-2);
  cursor: pointer;
}
/* JS varken sıralama anında uygulanır → gönder butonu gizlenir.
   JS yokken görünür kalır ve form düz GET ile çalışır. */
.asc-app.js[data-page="courses"] .as-shop__apply { display: none; }

/* =========================================================================
   5) KATEGORİ ÇİP ŞERİDİ (kategori modu)
   ====================================================================== */
.asc-app[data-page="courses"] .as-catbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--as-line-2);
}
.asc-app[data-page="courses"] .as-catbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  flex: 1 1 420px;
}
/* Yan paneldekiyle AYNI taşma gerçeği: 143 terimde şerit tek başına ~1500px olur.
   Kutu sınırlanır, terim gizlenmez. */
.asc-app[data-page="courses"] .as-catbar__chips--scroll {
  max-height: 172px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
}
.asc-app[data-page="courses"] .as-catbar__chips--scroll::-webkit-scrollbar { width: 8px; }
.asc-app[data-page="courses"] .as-catbar__chips--scroll::-webkit-scrollbar-thumb {
  background: var(--as-line-3);
  border-radius: var(--as-r-pill);
}
.asc-app[data-page="courses"] .as-catbar__chip {
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
}
.asc-app[data-page="courses"] .as-catbar__n {
  font-size: 12px;
  opacity: .65;
}

/* =========================================================================
   6) SONUÇ IZGARASI + SAYFALAMA
   Kırılımların hepsinde sabit kolon sayısı → satırlar TAM dolar (ragged bitiş yok).
   ====================================================================== */
.asc-app[data-page="courses"] .as-shop__results { margin-top: 26px; }
.asc-app[data-page="courses"] .as-shop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.asc-app[data-page="courses"] .as-shop__grid > * { min-width: 0; }

@media (min-width: 620px) {
  .asc-app[data-page="courses"] .as-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1160px) {
  .asc-app[data-page="courses"] .as-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   6.1 IZGARA KARTI (.as-course-card--arc)
   Taban kart asc.css §9'dadır; burada YALNIZCA arşiv ızgarasının tasarım
   ölçüleri + kartın hover davranışı var. Modifier'ı partials/product-card.php
   sadece bu ızgarada basar → ana sayfa ve "ilgili eğitimler" kartları bu
   bloktan ETKİLENMEZ.
   Kaynak: dc-ref index.html 642–660 (arşiv kartı) · 275–300 (öne çıkan kart:
   E-Devlet pill'i, WhatsApp ölçüsü ve "Eğitimi İncele" etiketi oradan gelir).
   ---------------------------------------------------------------------- */

/* HOVER — canlıda kartın HİÇBİR hover tepkisi yoktu (yalnızca `color .22s`),
   9 kartlık ızgara ölü hissettiriyordu. Tasarım: translateY(-4px) +
   0 18px 50px rgba(7,29,73,.11) + #2B6FF7 kenarlık (dc-ref 643 style-hover).
   Seçici tasarımdaki gibi `__link` DEĞİL sarmalayıcı <article>: canlı markup'ta
   kenarlık/zemin/yuvarlaklık ve `overflow:hidden` kartın kendisindedir
   (.as-card) — linke verilen transform kırpma kutusunun İÇİNDE kayar, kartı
   yerinden oynatmazdı. :focus-within ile klavyede de aynı geri bildirim.
   Süreler tasarımda .2s; token ailesinin en yakını --as-t-fast (.22s). */
.asc-app[data-page="courses"] .as-course-card--arc {
  transition: transform var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease);
  /* DURAĞAN KENARLIK/GÖLGE — tasarımda ANA SAYFA ve ARŞİV kartı FARKLI:
       · ana sayfa öne çıkan (dc-ref 277): border #E3EAF5 + 0 2px 6px rgba(7,29,73,.04)
       · arşiv ızgarası     (dc-ref 643): border #DCE6F3 + durağan gölge YOK
     asc.css §9.1'deki `.asc-app .as-course-card` (0,2,0) ana sayfa değerlerini
     GLOBAL veriyor — orası doğru, çünkü aynı kart ana sayfada da kullanılıyor;
     o kuralı değiştirmek ana sayfayı bozardı. Sapma bağlama özgü olduğu için
     düzeltme sayfa kapsamında (0,3,0) yapılır ve YALNIZCA arşiv/kategori
     sayfasını etkiler. Hover dili (0,4,0) olduğu için bu kural onu EZMEZ. */
  border-color: var(--as-line-2);   /* #DCE6F3 (canlı: --as-line #E3EAF5) */
  box-shadow: none;                 /* canlı: 0 2px 6px rgba(7,29,73,.04) */
}
.asc-app[data-page="courses"] .as-course-card--arc:hover,
.asc-app[data-page="courses"] .as-course-card--arc:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-card);   /* = 0 18px 50px rgba(7, 29, 73, .11) */
  border-color: var(--as-blue-ring);   /* = #2B6FF7 */
}
/* Hareket duyarlılığı: yükselme kalkar, gölge/kenarlık geri bildirimi kalır. */
@media (prefers-reduced-motion: reduce) {
  .asc-app[data-page="courses"] .as-course-card--arc:hover,
  .asc-app[data-page="courses"] .as-course-card--arc:focus-within { transform: none; }
}

/* Kategori rozeti — tasarım 10.5px / 5px 10px dolgu / 13px offset = 24px
   yükseklik (ls .05em taban kuralda: 10.5 × .05 = .525px). Canlıda 11.5px +
   6px 11px + 14px offset ve MİRAS satır yüksekliği ile 32px ölçülüyordu (%33
   iri). Satır yüksekliği açıkça yazılır ki kutu .as-main tabanından bağımsız
   kalsın. Gölge asc.css'in işi — burada yazılmaz. */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__cat {
  top: 13px;
  left: 13px;
  padding: 5px 10px;
  font-size: 10.5px;
  line-height: 1.35;                   /* 10.5 × 1.35 + 10 = 24.2px */
}

/* E-Devlet MÜHRÜ — kartın en güçlü güven sinyali tasarımda görselin SOL
   ALTINDA mutlak bir pill'dir (dc-ref 283): 24px puck + 11px/800 metin +
   5px 11px 5px 6px dolgu = 157×36. Canlıda gövdedeki çip satırında, 8px
   köşeli düz bir çipti ve o satırı tek başına dolduruyordu. */
/* E-Devlet pill'i artik PAYLASILAN katmanda (asc.css §9.4): ayni standart
   kart ana sayfada ve "ilgili egitimler"de de kullaniliyor ve orada konumsuz
   kaliyordu (olculdu: radius 8px, akista, golgesiz). Sayfaya ozel kopya SILINDI. */

/* Gövde dolgusu tasarımda 19px (canlı 20px). */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__body { padding: 19px; }

/* Başlık 16.5/1.32 = 21.78px (canlı 17/1.3 = 22.1px). */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__title {
  font-size: 16.5px;
  line-height: 1.32;
}

/* Çip — arşiv kartında 11.5px (dc-ref 654), ana sayfa kartında 12px (dc-ref 289).
   asc.css §9.1'deki (0,3,0) taban kural ana sayfa değerini veriyor; sapma yine
   bağlama özgü olduğu için burada (0,5,0) ile arşive çekilir.
   Kutu: 11.5 × 1.35 + 10 = 25.5px (canlı 12 × 1.35 + 10 = 26.2px). */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__chips .as-chip {
  font-size: 11.5px;
}

/* Aksiyon satırı — tasarımda etiket ve ok pucku kendi ÜSTLERİNE 14px alır
   (dc-ref 656–657: `padding-top:14px` / `margin-top:14px`), böylece ayraçtan
   sonra nefes açılır: 1px ayraç + 18px dolgu + 40px içerik = 59px satır.
   Canlıda etiketin üst dolgusu yoktu → 1 + 18 + 26 = 45px.
   FONT: arşiv etiketi tasarımda 13.5px'tir (dc-ref 656); 14px yalnızca ANA
   SAYFA kartının ölçüsü (dc-ref 294). Buradaki 14px, hem etiket metnini hem de
   ölçüsünü ana sayfadan kopyalamanın kalıntısıydı ve kutuyu iki satıra
   kırıyordu (ölçüm: `.as-course-card__more` 79×50, satır 69.4px).
   Yeni kutu: 13.5 × 1.3 + 14 = 31.6px < ok pucku 40px → satır boyunu artık
   yalnızca ok belirliyor: 1 + 18 + 40 = 59px (tasarımın birebir değeri).
   Satır yüksekliği AÇIK 1.3 (miras 1.75 kutuyu şişiriyordu). */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__more {
  padding-top: 14px;
  font-size: 13.5px;
  line-height: 1.3;                    /* 13.5 × 1.3 + 14 = 31.55px */
}
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__arrow { margin-top: 14px; }

/* WhatsApp'a ayrılan pay = buton genişliği + offset − gövde dolgusu.
   Tasarım (arşiv, dc-ref 655/661): 111 + 20 − 19 = 112px.
   Canlıdaki 120px, WhatsApp butonunu ana sayfa ölçüsüne (117×40, offset 22)
   büyüten aşağıdaki override'la birlikte geliyordu; o override kaldırıldığı
   için pay da tasarım değerine döner. Etikete kalan kutu 233.3 − 112 − 26 − 8
   = 87.3px (önce 79.3px) — "İncele" 13.5/700'de ~47px, tek satır garanti.
   NOT: asc.css §9.1 taban kuralı da 112px veriyor; bu satır tasarım hesabını
   sayfa bağlamında AÇIK tutmak için duruyor (aşağıdaki :has() istisnası da
   aynı seçici ailesine dayanıyor). */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__actions { padding-right: 112px; }
/* WhatsApp numarası girilmemişse buton HİÇ basılmaz (product-card.php) — o
   zaman ayrılan pay 120px'lik boş bir aralığa dönüşüyor. Payı yalnızca buton
   gerçekten varsa koruyoruz; :has() desteklenmeyen tarayıcıda kural düşer ve
   bugünkü (payı koruyan, güvenli) davranış kalır. */
.asc-app[data-page="courses"] .as-course-card--arc:not(:has(.as-course-card__wa)) .as-course-card__actions {
  padding-right: 0;
}

/* WhatsApp butonu — SAYFAYA ÖZEL OVERRIDE KALDIRILDI.
   Buradaki 22px offset / 0 14px dolgu / 13px font / 16px ikon değerleri ANA
   SAYFA kartının ölçüleridir (dc-ref 299: 117×40). ARŞİV kartı tasarımda daha
   küçüktür (dc-ref 661): sağ/alt 20px, dolgu 0 13px, font 12.5px, ikon 15px →
   111×40. asc.css §9.1'deki taban `.as-course-card__wa` zaten TAM bu değerleri
   veriyor, dolayısıyla doğru davranış override'ı silmektir; ayrıca butonun
   büyümesi `__actions` payını da 112 → 120px'e itiyordu. */

/* Görsel yer tutucu degradesi tasarımda 150deg (dc-ref 2690); taban .as-media
   140deg veriyordu. */
.asc-app[data-page="courses"] .as-course-card--arc .as-course-card__media {
  background: linear-gradient(150deg, var(--as-tint-3), var(--as-tint-4));
}

.asc-app[data-page="courses"] .as-shop__pagination { margin-top: 36px; gap: 9px; }
.asc-app[data-page="courses"] .as-shop__pagination a {
  min-width: 46px;
  height: 46px;
  border-radius: var(--as-r-btn);
  font-size: 15px;
  /* Tasarımda pasif sayfa numarası #0B2A5B (dc-ref 2695 `pages.color`);
     canlıdaki --as-ink-2 gri duruyordu. Hover ve aktif durum taban bileşende
     (0,2,0) tanımlı → bu (0,3,0) kural onları eziyor, ikisini de geri veriyoruz. */
  color: var(--as-navy-2);
}
.asc-app[data-page="courses"] .as-shop__pagination a:hover,
.asc-app[data-page="courses"] .as-shop__pagination a:focus-visible { color: var(--as-blue); }
.asc-app[data-page="courses"] .as-shop__pagination a.is-active { color: var(--as-white); }
.asc-app[data-page="courses"] .as-shop__pagination .as-pagination__gap {
  min-width: 24px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--as-muted-2);
}
.asc-app[data-page="courses"] .as-shop__pagination .as-ico svg { width: 17px; height: 17px; }

/* AJAX yüklenirken sonuç bölgesi soluklaşır (içerik kaybolmaz). */
.asc-app[data-page="courses"] .as-shop__results.is-loading {
  opacity: .45;
  pointer-events: none;
  transition: opacity var(--as-t-fast) var(--as-ease);
}

/* =========================================================================
   7) BOŞ SONUÇ / AĞ HATASI — TEK bileşen, iki metin varyantı
   ====================================================================== */
.asc-app[data-page="courses"] .as-empty--pane {
  margin-top: 26px;
  padding: 60px 28px;
  border: 1px dashed var(--as-on-navy);
  border-radius: var(--as-r-card);
  background: var(--as-tint-2);
  text-align: center;
}
.asc-app[data-page="courses"] .as-empty--pane .as-empty__ico {
  width: 54px;
  height: 54px;
  margin-inline: auto;
  background: var(--as-white);
}
.asc-app[data-page="courses"] .as-empty--pane .as-empty__ico svg { width: 23px; height: 23px; }
.asc-app[data-page="courses"] .as-empty--pane .as-empty__title {
  margin-top: 16px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.asc-app[data-page="courses"] .as-empty--pane .as-empty__text {
  margin-top: 9px;
  margin-inline: auto;
  max-width: 430px;
  font-size: 15px;
  line-height: 1.6;
}
.asc-app[data-page="courses"] .as-empty--pane .as-empty__actions {
  margin-top: 22px;
  justify-content: center;
}
.asc-app[data-page="courses"] .as-empty--error {
  border-style: solid;
  border-color: var(--as-error-line);
  background: var(--as-error-bg);
}
/* [hidden] inline display'e kaybeder → toggle edilen kutuda inline display YOK. */
.asc-app[data-page="courses"] [data-as-shop-error] { display: block; }
.asc-app[data-page="courses"] [data-as-shop-error][hidden] { display: none; }

/* =========================================================================
   8) DUYARLI DAVRANIŞ
   ====================================================================== */
/* <1000px: yan panel üste geçer, sticky kalkar. */
@media (max-width: 999.98px) {
  .asc-app[data-page="courses"] .as-shop__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .asc-app[data-page="courses"] .as-shop__aside {
    position: static;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    /* `stretch` DEĞİL: yan yana dururken katlanmış filtre paneli (tek 30px'lik
       "Filtreler ⌄" satırı) komşu danışman kartının boyuna geriliyordu →
       768px'te kartın altında ~120px bomboş beyaz alan kalıyor, yarım kalmış
       kutu gibi duruyordu (ölçüldü: panel ~180px, içerik 30px). */
    align-items: flex-start;
  }
  .asc-app[data-page="courses"] .as-shop__panel { flex: 1 1 320px; }
  /* Üstte yatarken liste daha da kısalır — sonuç ızgarası ekranın dışına itilmesin. */
  .asc-app[data-page="courses"] .as-shop__cats--scroll { max-height: 300px; }

  /* AÇILIR FİLTRE — yalnızca bu kırılımda.
     390px'te DÜZELTMEDEN ÖNCE: iki panel de `flex-basis:320px` yüzünden
     (bkz. <768px bloğundaki not) 320px boyundaydı → yan panel 320 + 16 + 320
     = 656px; + 28 ızgara boşluğu + ~101px araç çubuğu + 26px sonuç boşluğu =
     ilk kart ~811px aşağıda.
     SONRA: filtre paneli katlanınca 44 dolgu + 48 buton = 92px, danışman kartı
     içerik boyunda ~201px → yan panel ~309px, ilk kart ~464px
     (≈ %43 daha az kaydırma). */
  .asc-app[data-page="courses"] .as-shop__fold-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    background: transparent;
    font-family: var(--as-font);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--as-navy);
    text-align: left;
    cursor: pointer;
  }
  /* İkon esnemesin (yalnızca etiket büyüsün/küçülsün). */
  .asc-app[data-page="courses"] .as-shop__fold-btn .as-ico { flex: none; color: var(--as-blue); }
  .asc-app[data-page="courses"] .as-shop__fold-btn .as-ico svg { width: 18px; height: 18px; }
  .asc-app[data-page="courses"] .as-shop__fold-label { flex: 1; min-width: 0; }
  .asc-app[data-page="courses"] .as-shop__fold-chev {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--as-r-pill);
    background: var(--as-tint-3);
    color: var(--as-blue);
    transition: transform var(--as-t-fast) var(--as-ease);
  }
  .asc-app[data-page="courses"] .as-shop__fold-chev .as-ico svg { width: 15px; height: 15px; }
  .asc-app[data-page="courses"] .as-shop__fold-item.is-open .as-shop__fold-chev { transform: rotate(180deg); }

  /* GİZLEME YALNIZCA JS VARKEN (.asc-app.js) — JS kapalıyken panel bugünkü gibi
     tam açık kalır, yani içerik JS'siz de görünür (eklenti kuralı). */
  .asc-app.js[data-page="courses"] .as-shop__fold-item:not(.is-open) .as-shop__fold-body { display: none; }
  /* Açıkken butonla gövde arasına nefes; kapalıyken gövde zaten yok. */
  .asc-app[data-page="courses"] .as-shop__fold-body { margin-top: 14px; }
}

@media (max-width: 767.98px) {
  .asc-app[data-page="courses"] .as-arc-hero__in { padding-block: 28px 40px; }
  .asc-app[data-page="courses"] .as-cat-hero { padding-block: 32px 40px; }
  .asc-app[data-page="courses"] .as-arc-body,
  .asc-app[data-page="courses"] .as-arc-body--cat { padding-block: 28px 64px; }
  .asc-app[data-page="courses"] .as-shop__aside { flex-direction: column; }
  /* ⚠️ AÇILIR FİLTRENİN ÖN KOŞULU. Bir üstteki kırılımda panellere `flex: 1 1 320px`
     veriliyor; orada eksen SATIR olduğu için 320px bir GENİŞLİK tabanıdır (iki
     panel yan yana). Burada eksen SÜTUNA döndüğü hâlde o kısayol geçerli
     kalıyordu → 320px artık bir YÜKSEKLİK tabanı. Yüksekliği auto olan bir
     sütun flex kabında dağıtılacak boş alan yoktur, yani her panel içeriği
     ne olursa olsun 320px boyunda kalıyordu: 320 + 16 + 320 = 656px yan panel.
     Katlanan filtre paneli bu yüzden tek başına hiçbir şey kazandırmazdı
     (92px'lik içerik yine 320px kutuda dururdu). Sütunda taban içerikten
     gelmeli: */
  .asc-app[data-page="courses"] .as-shop__panel { flex: 0 0 auto; }

  /* DANIŞMAN KARTI MOBİLDE KOMPAKT.
     390px'te ilk eğitim kartının üst kenarı 987px ölçüldü — ilk ekranda hiç
     eğitim görünmüyordu. Katlanır filtre kazandırdığı yeri (656→92px) bu
     288px'lik kart geri alıyordu.
     ⚠️ `order` ile ızgaranın ALTINA taşımak REDDEDİLDİ: aynı gerekçe §8'deki
     karar notunda yazıyor — klavye odağı 9 kartın altındaki bir bağlantıya
     atlar (WCAG 2.4.3). Bunun yerine kartın KENDİSİ küçültülür: başlık + yeşil
     düğme kalır, açıklama düşer (kartın işi zaten düğme; açıklama düğmenin
     söylediğini tekrar ediyor). ~288px → ~118px. */
  .asc-app[data-page="courses"] .as-shop__panel--help { padding: 18px; }
  .asc-app[data-page="courses"] .as-shop__help-text { display: none; }
  .asc-app[data-page="courses"] .as-shop__help-title { font-size: .97rem; }
  .asc-app[data-page="courses"] .as-shop__help-wa { margin-top: 12px; }
  .asc-app[data-page="courses"] .as-shop__bar { align-items: flex-start; gap: 12px; }
  .asc-app[data-page="courses"] .as-shop__tools { width: 100%; }
  .asc-app[data-page="courses"] .as-shop__sort { width: 100%; justify-content: space-between; }
  .asc-app[data-page="courses"] .as-shop__select { flex: 1; min-width: 0; }
  .asc-app[data-page="courses"] .as-catbar__chips--scroll { max-height: 200px; }
  .asc-app[data-page="courses"] .as-empty--pane { padding: 40px 20px; }
}

/* =========================================================================
   9) ELEMENTOR PEKİŞTİRME (sayfa kapsamı)
   asc.css §8 armor'u genel; buradaki alanlar sayfaya özgü olduğu için
   (0,3,0)+ özgüllükle tekrar sabitlenir. hello-elementor reset.css'in
   `button{color/border}` + `button:hover{background-color}` kuralları ve
   tema `input/select` stilleri bu sayfada da devrededir.
   ====================================================================== */
.asc-app[data-page="courses"] .as-shop__apply {
  border: 1px solid var(--as-line-2);
  color: var(--as-navy-2);
  background-color: var(--as-white);
}
.asc-app[data-page="courses"] .as-shop__apply:hover,
.asc-app[data-page="courses"] .as-shop__apply:focus {
  border-color: var(--as-blue-ring);
  background-color: var(--as-tint-3);
  color: var(--as-navy-2);
}
/* Mobil filtre butonu da gerçek bir <button> — reset.css'in
   `button{color:#CC3366;border:1px solid #CC3366}` (0,1,0) ve
   `button:hover,button:focus{background-color:#CC3366}` (0,2,0) kuralları
   burada da devrede. Taban armor kenarlığı/rengi sıfırlar ama HOVER ZEMİNİNİ
   kapsamaz → (0,3,0) ile açıkça geri veriliyor (şeffaf kalmalı, pembe değil). */
.asc-app[data-page="courses"] .as-shop__fold-btn {
  border: 0;
  color: var(--as-navy);
  background-color: transparent;
}
.asc-app[data-page="courses"] .as-shop__fold-btn:hover,
.asc-app[data-page="courses"] .as-shop__fold-btn:focus {
  background-color: transparent;
  color: var(--as-blue);
}
.asc-app[data-page="courses"] .as-shop__fold-btn:hover .as-shop__fold-chev { color: var(--as-blue); }

.asc-app[data-page="courses"] .as-shop__search-input:focus { box-shadow: none; }
.asc-app[data-page="courses"] .as-catbar__chip.is-active {
  border-color: var(--as-navy);
  background-color: var(--as-navy);
  color: var(--as-white);
}
.asc-app[data-page="courses"] .as-catbar__chip.is-active:hover,
.asc-app[data-page="courses"] .as-catbar__chip.is-active:focus {
  background-color: var(--as-navy);
  color: var(--as-white);
}
/* Dolu yeşil düğme bir <a>'dır; yine de reset'in link hover kuralına karşı
   (0,3,0) ile kendi rengini korur. */
.asc-app[data-page="courses"] a.as-shop__help-wa:hover,
.asc-app[data-page="courses"] a.as-shop__help-wa:focus { color: var(--as-white); }