/* =========================================================================
   Acil Sertifika Core — Sayfaya özel CSS: Eğitim Detayı ([asc_course]) · v2
   Scope: .asc-app[data-page="course"]
   Kaynak: "Acil Sertifika.dc.html" satır 691–964 (isCourse) + handoff v2
           (00-CURRENT-STATE.md §2.1/§2.2/§2.3 · 05-DESIGN-TOKENS.md)

   KURAL: paylaşılan bileşenler (.as-btn .as-card .as-media .as-countdown
   .as-quota .as-edevlet-band .as-tabs .as-accordion .as-prose .as-form
   .as-mobilebar .as-leadspin .as-grid--related …) assets/css/asc.css içinde
   tanımlıdır — burada YENİDEN YAZILMAZ, yalnızca sayfaya özgü yerleşim ve
   tasarım farkları eklenir. Token DIŞI hex YOKTUR (yalnızca --as-* + tasarımın
   gradyan üstü saydam beyaz katmanları).

   Elementor armor notu: asc.css §8 `.asc-app button{border:0}` (0,1,1) ve
   reset'in `button:hover{background-color:<reset pembesi>}` (0,2,0) kuralları yüzünden
   gerçek <button>'ların kenarlığı/hover zemini burada (0,3,0)+ seçicilerle geri
   verilir; sayfa scope'u `.asc-app[data-page="course"]` zaten (0,2,0)'dır.

   Bölümler:
     0) Sayfa yerel "EK" token'ları (asc.css'te karşılığı olmayan tasarım değerleri)
     1) Hero (band · 1:1 kare görsel · başlık · çipler)
     2) E-Devlet güven bandı (KOŞULSUZ)
     3) Kontenjan + canlı geri sayım (TEK blok)
     4) Hero CTA satırı
     5) Gövde ızgarası
     6) Eğitim Hakkında (uzun açıklama)
     7) Global süreç sekmeleri
     8) SSS akordeonu
     9) Bilgi talebi form kartı
    10) İlgili eğitimler
    11) Mobil sticky çubuk
    12) Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   0) SAYFA YEREL "EK" TOKEN'LARI
   Tasarımda (dc-ref/index.html, isCourse bloğu) ölçülen ama asc.css token
   listesinde KARŞILIĞI OLMAYAN dört değer. Kural gövdesine ham hex yazmamak için
   burada, sayfa scope'unda token olarak durur. Kalıcı yeri asc.css §token
   listesidir ("EK" etiketiyle); bu geçişte asc.css bu ajanın dosyası değil.
     --as-course-panel : #F8FBFF (asc.css --as-tint-2 #F7FAFF'ten 1 ton açık)
     --as-course-track : #EEF3FA (asc.css --as-tint-3 #ECF4FF daha mavi)
     --as-course-*-shadow: tasarımın birebir gölge değerleri
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] {
  --as-course-panel: #F8FBFF;                              /* dc-ref: tabpanel + cdrow zemini */
  --as-course-track: #EEF3FA;                              /* dc-ref: progressbar track */
  --as-course-edevlet-shadow: 0 18px 44px rgba(217, 58, 41, .32);  /* dc-ref satır 722 */
  --as-course-faq-shadow: 0 2px 6px rgba(7, 29, 73, .04);          /* dc-ref satır 840 */
  --as-course-ring-bg: #F1D9D3;                            /* dc-ref 857: form kartının gradyan kenarlık zemini */
  --as-course-divider: #EEF3FA;                            /* dc-ref 887: form içi ayırıcı çizgi */
  /* Hero ana CTA gölgesi — dc-ref satır 787 birebir. asc.css'te en yakın token
     `--as-shadow-cta` (0 12px 30px rgba(217,58,41,.26)); alfa .26 ≠ .24 olduğu
     için tasarımın kendi değeri burada EK token olarak durur (§4'te kullanılır). */
  --as-course-cta-shadow: 0 12px 30px rgba(217, 58, 41, .24);
}

/* -------------------------------------------------------------------------
   1) HERO
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-hero {
  position: relative;
  overflow: hidden;
  background: var(--as-white);
}
/* Buz mavisi eğik yüzey — tasarımdaki clip-path birebir. */
.asc-app[data-page="course"] .as-course-hero__band {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 74%;
  background: var(--as-band);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  pointer-events: none;
}
.asc-app[data-page="course"] .as-course-hero__in {
  position: relative;
  padding-block: 36px 64px;
}
.asc-app[data-page="course"] .as-course-hero__crumbs p { margin: 0; }
/* Yolun son halkası tasarımda KATEGORİdir (link değil, düz metin): tasarımda
   3 seviye var (Ana Sayfa / Eğitimler / Kategori), canlıda ürün adı 4. seviye
   olarak ekleniyordu ve uzun adlarda satır taşırıyordu. Ürün adı yolun sonundan
   kaldırıldığı için `[aria-current]` de yok → görünümü bu sınıf taşır
   (asc.css `.as-breadcrumb [aria-current]` ile BİREBİR aynı: #0B2A5B / 600). */
.asc-app[data-page="course"] .as-course-hero__crumb-cat {
  color: var(--as-navy-2);
  font-weight: 600;
}

.asc-app[data-page="course"] .as-course-hero__grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.asc-app[data-page="course"] .as-course-hero__grid > * { min-width: 0; }

/* 1:1 KARE görsel — oran HER genişlikte korunur; <1180px'te yalnızca KUTU
   küçülür (236 / 168px), oran değişmez. */
.asc-app[data-page="course"] .as-course-hero__media {
  animation: as-zoom .8s var(--as-ease) both;   /* JS'siz de görünür (both) */
}
.asc-app[data-page="course"] .as-course-hero__frame {
  width: 100%;
  border: 1px solid var(--as-line-2);
  box-shadow: var(--as-shadow-card);
}
.asc-app[data-page="course"] .as-course-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Görsel yoksa: .as-media degradesi + dekoratif kontur (kırık ikon/boş kutu YOK). */
.asc-app[data-page="course"] .as-course-hero__deco {
  position: absolute; right: -30px; bottom: -38px;
  width: 230px; height: 230px;
  color: var(--as-blue-ring);
  opacity: .32;
  pointer-events: none;
}
.asc-app[data-page="course"] .as-course-hero__cat {
  position: absolute; top: 18px; left: 18px;
  padding: 7px 13px;
  border-radius: var(--as-r-pill);
  background: rgba(255, 255, 255, .94);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.2;
  color: var(--as-blue);
}

.asc-app[data-page="course"] .as-course-hero__body { min-width: 0; }
/* ÖZET SATIR SINIRI — tasarımda özet 1 satır (kutu 29px = 17px × 1.7), canlıda
   gerçek ürün özeti 4 satıra çıkıyordu (kutu 116px) ve E-Devlet bandı + kontenjan
   kartı + CTA'yı ~87px aşağı itip ilk ekrandan çıkarıyordu. 2 satırda kırpılır
   (kutu 57.8px) → kayma 87px yerine ~29px. Kırpılan metin kaybolmaz: tam açıklama
   hemen altta "Eğitim Hakkında" bölümünde. <600px'te kolon daraldığı için aynı
   cümle daha çok satıra bölünüyor → orada 3 satır. */
.asc-app[data-page="course"] .as-course-hero__lead {
  margin-top: 16px;
  max-width: 620px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Çipler — v2'de yalnızca eğitim modeli + belge türü (SÜRE ÇİPİ YOK, §2.3).
   Bilgi çipidir, filtre değil: `.as-chip`in hover/aktif durumu KULLANILMAZ. */
.asc-app[data-page="course"] .as-course-hero__chips {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.asc-app[data-page="course"] .as-course-hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--as-line-2);
  border-radius: 10px;
  background: var(--as-white);
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  color: var(--as-navy-2);
}
.asc-app[data-page="course"] .as-course-hero__chip .as-ico { color: var(--as-blue); }
.asc-app[data-page="course"] .as-course-hero__chip svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   2) E-DEVLET GÜVEN BANDI — her eğitim detayında KOŞULSUZ (§2.1).
   Kırmızı gradyan + üzerindeki TÜM metin saf beyaz: renk/kontrast .as-edevlet-band
   bileşeninden gelir, burada yalnızca yerleşim var.
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-edevlet {
  position: relative;
  margin-top: 20px;
  max-width: 620px;
  padding: 24px 26px;
  border-radius: 20px;
  /* Tasarım (dc-ref satır 722): orta durak %46 ve gölge 0 18px 44px.
     Canlıda asc.css `.as-edevlet-band` %52 durağını, `--as-shadow-cta-lg` ise
     0 16px 36px'i veriyordu (o gölge dolu CTA hover'ı için tanımlı, band için
     değil). Renk durakları token'dan gelir; yalnızca konum düzeltilir. */
  background: linear-gradient(135deg, var(--as-red-deep) 0%, var(--as-red-mid) 46%, var(--as-red-light) 100%);
  box-shadow: var(--as-course-edevlet-shadow);
  overflow: hidden;
}
.asc-app[data-page="course"] .as-course-edevlet__glow {
  position: absolute; right: -46px; top: -58px;
  width: 190px; height: 190px;
  border-radius: var(--as-r-pill);
  background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.asc-app[data-page="course"] .as-course-edevlet__row {
  position: relative;
  display: flex; align-items: center; gap: 18px;
}
/* İşaret yuvası — yalnızca ÖLÇEKLENİR; renk/biçim/kompozisyon değişmez.
   `.elementor img{height:auto}` (0,1,1) → (0,3,1) ile geri alınır. */
.asc-app[data-page="course"] .as-course-edevlet__mark {
  width: 72px; height: 72px; flex: none;
  display: grid; place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
}
.asc-app[data-page="course"] .as-course-edevlet__mark img {
  width: 40px; height: 40px;
  object-fit: contain;
  display: block;
}
.asc-app[data-page="course"] .as-course-edevlet__mark svg { width: 34px; height: 34px; }
.asc-app[data-page="course"] .as-course-edevlet__tx { min-width: 0; }
.asc-app[data-page="course"] .as-course-edevlet__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.asc-app[data-page="course"] .as-course-edevlet__title {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.asc-app[data-page="course"] .as-course-edevlet__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: var(--as-r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .30);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2;
}
.asc-app[data-page="course"] .as-course-edevlet__badge svg { width: 11px; height: 11px; }
.asc-app[data-page="course"] .as-course-edevlet__text {
  margin-top: 7px;
  font-size: 14.5px; line-height: 1.6;
}
/* İddianın sınırı aynı blokta kalır (ayraç + dipnot). */
.asc-app[data-page="course"] .as-course-edevlet__fine {
  position: relative;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 12.5px; line-height: 1.55;
}

/* -------------------------------------------------------------------------
   3) KONTENJAN + CANLI GERİ SAYIM — TEK blok (§2.2)
   Sunucu verisi yoksa blok hiç basılmaz; burada yalnızca görünüm vardır.
   Vurgu rengi tek değişkenden akar: normalde mavi, `.is-low`/`.is-full`ta kırmızı.
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-quota {
  --as-quota-accent: var(--as-blue);
  position: relative;
  margin-top: 22px;
  max-width: 620px;
  padding: 22px 24px;
  border: 1px solid var(--as-line);
  border-radius: 18px;
  background: var(--as-white);
  box-shadow: var(--as-shadow-soft);
  overflow: hidden;
}
/* Bileşen içi dikey ritim (.as-quota tabanı 9px; blokta üç katman var).
   Vurgu rengi BURADA devredilir: accent'i tüketen her öğe (.as-quota__label,
   __num, sayaç rakamları) bu kabın içindedir → `:has()` gerekmez. */
.asc-app[data-page="course"] .as-course-quota__body { gap: 16px; }
.asc-app[data-page="course"] .as-course-quota__body.is-low,
.asc-app[data-page="course"] .as-course-quota__body.is-full { --as-quota-accent: var(--as-red); }

/* JS runtime'da süre dolduğunda bu iki durum takas edilir (course.js).
   [hidden] inline display'e KAYBEDERDİ → gizleme yalnızca CSS/hidden ile. */
.asc-app[data-page="course"] .as-course-quota [hidden] { display: none; }

.asc-app[data-page="course"] .as-course-quota__row { align-items: flex-start; gap: 18px; }
.asc-app[data-page="course"] .as-course-quota__meta { min-width: 0; }
.asc-app[data-page="course"] .as-course-quota__label {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .08em;
  color: var(--as-quota-accent);
}
/* Nabız: yalnızca transform+opacity (as-pulse), erişilebilirlik için dekoratif. */
.asc-app[data-page="course"] .as-course-quota__dot {
  position: relative;
  width: 7px; height: 7px; flex: none;
  border-radius: var(--as-r-pill);
  background: currentColor;
}
.asc-app[data-page="course"] .as-course-quota__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: as-pulse 2.4s var(--as-ease) infinite;
}
.asc-app[data-page="course"] .as-course-quota__text {
  margin-top: 8px;
  font-size: 15px; line-height: 1.55;
  color: var(--as-ink-2);
}
.asc-app[data-page="course"] .as-course-quota__text strong {
  font-weight: 800;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-quota__count {
  flex: none;
  text-align: right;
}
.asc-app[data-page="course"] .as-course-quota__num {
  display: block;
  font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--as-quota-accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.asc-app[data-page="course"] .as-course-quota__unit {
  display: block;
  margin-top: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--as-muted);
}

/* Canlı geri sayım satırı */
.asc-app[data-page="course"] .as-course-quota__cd {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--as-line);
  border-radius: var(--as-r-btn-lg);
  background: var(--as-course-panel);   /* dc-ref cdrow: #F8FBFF (canlı --as-tint-2 #F7FAFF idi) */
}
.asc-app[data-page="course"] .as-course-quota__deadline { flex: 1 1 160px; min-width: 0; }
.asc-app[data-page="course"] .as-course-quota__cd-label {
  display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--as-muted);
}
.asc-app[data-page="course"] .as-course-quota__cd-date {
  display: block;
  margin-top: 4px;
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-quota__timer { gap: 7px; flex: none; }
.asc-app[data-page="course"] .as-course-quota__timer .as-countdown__cell {
  min-width: 52px;
  padding: 8px 6px;
  border-radius: 11px;
  background: var(--as-white);
  border-color: var(--as-line);
}
.asc-app[data-page="course"] .as-course-quota__timer .as-countdown__num {
  font-size: 19px; line-height: 1;
  color: var(--as-quota-accent);
}
/* Etiketin satır yüksekliği AÇIK yazılır: asc.css tabanı değer vermiyor, gövde
   satır yüksekliği miras kalınca (10px × 1.6 = 16px) hücre 56px oluyordu.
   Tasarımda etiket `normal` satır yüksekliğinde (10px ≈ 13.7px) ve hücre 54px:
   8 (üst dolgu) + 19 (rakam) + 3 (etiket marjı) + 13.7 + 8 + 2 (kenarlık) ≈ 54. */
.asc-app[data-page="course"] .as-course-quota__timer .as-countdown__lbl {
  font-size: 10px; letter-spacing: .05em; line-height: normal;
}
/* Süre dolduğunda NEGATİF sayaç YOK: 00 00 00 00 donar ve soluklaşır. */
.asc-app[data-page="course"] .as-course-quota__timer.is-expired .as-countdown__num { color: var(--as-muted-2); }

/* Doluluk çubuğu — dış katman genişliği VERİ, iç katman 0→1 ölçeklenir
   (`as-quota` / `as-quota-b`). `animation-fill-mode` YOK: animasyon çalışmazsa
   çubuk DOLU görünür. Yükseklik tasarımda 10px (.as-quota__track tabanı 8px). */
.asc-app[data-page="course"] .as-course-quota__track {
  height: 10px;
  background: var(--as-course-track);   /* dc-ref: #EEF3FA (asc.css tabanı --as-tint-3 #ECF4FF) */
}

/* Alt not tasarımda çubuğun 12px altında (dc-ref satır 760: margin-top:12px);
   blok gövdesinin flex gap'i 16px olduğu için aradaki 4px burada düşülür.
   Tipografi (12.5px/600/--as-muted) tasarımla ZATEN birebir — dc-ref satır 761:
   `font-size:12.5px;font-weight:600;color:#64748B`. */
.asc-app[data-page="course"] .as-course-quota__foot {
  margin-top: -4px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  color: var(--as-muted);
}

/* Kapanış durumu (kontenjan doldu VEYA başvuru süresi doldu):
   sahte aciliyet yok, "yeni dönem" daveti var. */
.asc-app[data-page="course"] .as-course-quota__closed {
  display: flex; align-items: flex-start; gap: 12px;
}
/* Kapanış bloğu GÖRÜNÜRKEN altındaki (donmuş sayaç) kutuya nefes ver; gizliyken
   ([hidden]) bitişik kardeş kuralı da devre dışı kalmalı → :not([hidden]). */
.asc-app[data-page="course"] .as-course-quota__closed:not([hidden]) + .as-course-quota__body { margin-top: 16px; }
.asc-app[data-page="course"] .as-course-quota__closed .as-icon-box {
  background: var(--as-tint);
  color: var(--as-blue);
}
.asc-app[data-page="course"] .as-course-quota__closed-tx { min-width: 0; }
.asc-app[data-page="course"] .as-course-quota__closed-title {
  font-size: 14.5px; font-weight: 800; line-height: 1.35;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-quota__closed-text {
  margin-top: 4px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--as-ink-2);
}
.asc-app[data-page="course"] .as-course-quota__closed-link {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--as-tap);
  font-size: 14px; font-weight: 700;
  color: var(--as-blue);
}
.asc-app[data-page="course"] .as-course-quota__closed-link:hover { color: var(--as-navy); }
.asc-app[data-page="course"] .as-course-quota__closed-link svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   4) HERO CTA SATIRI
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-hero__cta {
  margin-top: 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.asc-app[data-page="course"] .as-course-hero__go,
.asc-app[data-page="course"] .as-course-hero__wa {
  height: var(--as-btn-h);
  border-radius: var(--as-r-btn-lg);
}
.asc-app[data-page="course"] .as-course-hero__go { padding: 0 24px; font-size: 16px; }
/* ⚠️ SAYFANIN ANA DÖNÜŞÜM BUTONU GÖLGESİZ KALIYORDU (canlıda ölçüldü:
   box-shadow = `none`). Sebep: asc.css §8.14'te `.as-btn--primary` tabanından
   koşulsuz `--as-shadow-cta` KALDIRILDI ("hero CTA gölgesi sayfa CSS'inin işi")
   ve bu sayfa gölgeyi hiç vermemişti — geometri (h52 · 0 24 · r14 · #D93A29)
   doğruydu, buton düz duruyordu. Tasarım: dc-ref 787 `0 12px 30px rgba(217,58,41,.24)`.
   ÖZGÜLLÜK: tema/Elementor tarafındaki `.elementor a{box-shadow:none}` (0,1,1)
   asc.css'ten SONRA yüklenir (bkz. asc.css §5.8 yüzen ray notu) → seçici (0,3,0)
   olmak zorunda; sayfa scope'u `.asc-app[data-page="course"]` zaten (0,2,0).
   HOVER: tasarımda hover YALNIZCA zemini değiştirir (style-hover="background:#B92F23"),
   gölge aynı kalır — bu yüzden hover/focus'ta da aynı değer yazılır (temanın
   `a:hover{box-shadow:none}` türevlerine karşı emniyet). */
.asc-app[data-page="course"] .as-course-hero__go,
.asc-app[data-page="course"] .as-course-hero__go:hover,
.asc-app[data-page="course"] .as-course-hero__go:focus-visible { box-shadow: var(--as-course-cta-shadow); }
.asc-app[data-page="course"] .as-course-hero__wa { padding: 0 20px; font-size: 15.5px; }
.asc-app[data-page="course"] .as-course-hero__wa svg { width: 19px; height: 19px; }

/* -------------------------------------------------------------------------
   5) GÖVDE IZGARASI — içerik + sabit form kolonu
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-body { padding-block: 64px 88px; }
.asc-app[data-page="course"] .as-course-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 392px);
  gap: 56px;
  align-items: start;
}
.asc-app[data-page="course"] .as-course-body__grid > * { min-width: 0; }
.asc-app[data-page="course"] .as-course-info,
.asc-app[data-page="course"] .as-course-faq { margin-top: 56px; }

/* Bölüm başlıkları — tasarımda h2'lerde satır yüksekliği YOK (normal): 25.6px
   yazı → kutu 35px. asc.css `.as-t-sub` 1.25 veriyor → kutu 32px, dört bölüm
   başlığında da 3px'lik fark.
   ÖLÇEK: tasarım bu başlıkları HER genişlikte sabit 1.6rem verir (dc-ref 800/817:
   `font-size:1.6rem`, medya sorgusu/JS ölçek değişimi yok). asc.css token'ı ise
   `clamp(1.35rem, 2.2vw, 1.6rem)` → 25.6px'i ancak ≥1163px viewport'ta verir;
   982px'in altında tabana (21.6px) oturur. Bu iki sonucu doğuruyordu:
     · 768'de bölüm başlığı 21.6px — tasarımın 25.6px'inden 4px küçük (sapma);
     · aynı genişlikte içerik başlıklarıyla (prose h3 = 20.8px sabit) neredeyse
       eşitleniyor, başlık merdiveni çöküyordu.
   Tasarımın sabit değeri geri verilir; masaüstünde ölçülen 25.6px DEĞİŞMEZ. */
.asc-app[data-page="course"] .as-t-sub { font-size: 1.6rem; line-height: normal; }

/* -------------------------------------------------------------------------
   6) EĞİTİM HAKKINDA — WooCommerce uzun açıklaması (sekme/accordion içinde DEĞİL)
   ------------------------------------------------------------------------- */
/* Okuma kolonu — tasarımda 68ch, ama tasarımda `max-width` TAŞIYAN kutu 16px
   gövde yazısında (ch = 9.76px → 663.68px); bizde aynı kutu 1.0625rem/17px
   olduğu için asc.css `.as-prose{max-width:68ch}` 705.16px'e çıkıyordu
   (ch = 10.37px). 17px'te aynı genişlik = 64ch (64 × 10.37 ≈ 663.68px). */
.asc-app[data-page="course"] .as-course-about__prose {
  margin-top: 18px;
  max-width: 64ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--as-ink-2);
}
.asc-app[data-page="course"] .as-course-about__prose > *:first-child { margin-top: 0; }
/* İçerikteki h1/h2/h3 sunucuda bir seviye indirildi (h2/h3/h4) — ölçek buna göre. */
/* ⚠️ İÇERİKTEN İNEN BAŞLIK SAYFANIN BÖLÜM BAŞLIĞINDAN BÜYÜKTÜ (canlıda ölçüldü:
   prose h2 = 28px, bölüm başlığı `.as-t-sub` = 25.6px). Sebep: editörün açıklamaya
   yazdığı <h1> artık <h2>ye iniyor (course.php $asc_demote_headings) ama bu sayfada
   prose h2 için kural yoktu → asc.css `.as-prose h2` (clamp(1.5rem, 2.2vw, 1.75rem))
   devralıyordu ve tavanı (28px) sayfanın bölüm başlığını AŞIYORDU. Editörün yazdığı
   alt başlık, sayfanın kendi bölüm başlığından iri görünüyordu.
   YENİ MERDİVEN (her genişlikte sabit, çünkü komşularının ikisi de sabit):
     H1 ürün adı 29.6px+ › bölüm başlığı 25.6 › prose h2 23.2 › h3 20.8 › h4 17.6.
   1.45rem = 23.2px: bölüm başlığının 2.4px altında, h3'ün 2.4px üstünde — iki
   komşuya da eşit uzaklıkta. `line-height:normal` ve -.025em, kardeş h3/h4 ile
   aynı tipografi ailesinden (dc-ref içerik başlıkları). Boşluk: h3 32px, h4 26px
   → bir üst seviye 38px. */
.asc-app[data-page="course"] .as-course-about__prose h2 {
  margin-top: 38px;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.025em; line-height: normal;
  color: var(--as-navy);
}
/* Satır yüksekliği tasarımda `normal` (20.8px yazı → kutu 28px); canlıdaki 1.25
   kutuyu 26px'e indiriyordu. Ölçek/ağırlık/harf aralığı tasarımla birebir. */
.asc-app[data-page="course"] .as-course-about__prose h3 {
  margin-top: 32px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: normal;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-about__prose h4 {
  margin-top: 26px;
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-about__prose p { margin-top: 12px; }

/* MADDE İŞARETİ SİSTEMİ — tasarımda `disc` yoktur: liste girintisiz (padding-left:0,
   list-style:none), her madde 7×7px mavi yuvarlak + 12px boşlukla başlar.
   Canlıda asc.css tabanı `list-style:disc` + `padding-left:1.25em` (21.25px) veriyordu:
   maddeler 21px içeri kaçıyor, `li{margin:.4em 0}` (6.8px) ve 1.8 satır yüksekliği
   (30.6px) yüzünden blok tasarıma göre ~%35 uzuyordu.
   Ölçüler tasarımdan: ul margin 14px 0 0 · maddeler arası 11px · li satırı 28.9px
   (17px × 1.7) · yuvarlak sol kenarda, metin 19px'te (7 + 12) başlar.
   NOT: tasarım bunu `li{display:flex}` + ayrı bir <span> ile yapıyor; burada içerik
   WooCommerce editöründen geldiği için flex KULLANILMAZ (madde içindeki <strong>/<a>
   ayrı flex öğesine dönüşüp satır akışını bozardı) → aynı geometri mutlak konumlu
   ::before ile kurulur. */
.asc-app[data-page="course"] .as-course-about__prose ul {
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
}
.asc-app[data-page="course"] .as-course-about__prose ul > li {
  position: relative;
  margin: 0;
  padding-left: 19px;                 /* 7px yuvarlak + 12px boşluk */
  line-height: 1.7;                   /* 17px × 1.7 = 28.9px (tasarım) */
}
.asc-app[data-page="course"] .as-course-about__prose ul > li + li { margin-top: 11px; }
.asc-app[data-page="course"] .as-course-about__prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: 11px;   /* ilk satırın optik ortası: 28.9/2 − 3.5 */
  width: 7px; height: 7px;
  border-radius: var(--as-r-pill);
  background: var(--as-blue);
}
/* Sıralı listeler (ol) `decimal` kalır — yalnızca rakam rengi markadan. */
.asc-app[data-page="course"] .as-course-about__prose li::marker { color: var(--as-blue); }
.asc-app[data-page="course"] .as-course-about__prose img { border-radius: var(--as-r-btn-lg); }
.asc-app[data-page="course"] .as-course-about__prose blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--as-red);
  border-radius: 0 var(--as-r-btn) var(--as-r-btn) 0;
  background: var(--as-tint);
  font-size: 1rem; line-height: 1.7;
}
.asc-app[data-page="course"] .as-course-about__prose table { margin: 20px 0; font-size: 15px; }
.asc-app[data-page="course"] .as-course-about__prose th,
.asc-app[data-page="course"] .as-course-about__prose td {
  padding: 10px 12px;
  border: 1px solid var(--as-line-2);
  text-align: left;
}
.asc-app[data-page="course"] .as-course-about__prose th { background: var(--as-tint); color: var(--as-navy); }
.asc-app[data-page="course"] .as-course-about__prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--as-tint);
  font-size: .95em;
}
.asc-app[data-page="course"] .as-course-about__empty { margin-top: 18px; }

/* -------------------------------------------------------------------------
   7) GLOBAL SÜREÇ SEKMELERİ — tüm genişliklerde sekme (ayrı mobil varyant YOK)
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-info__lead {
  margin-top: 10px;
  font-size: 15.5px; line-height: 1.6;
  color: var(--as-muted);
}
.asc-app[data-page="course"] .as-course-info__tabs { gap: 0; }

/* Tasarımda sekme çubuğunun kabı YOK: serbest pill'ler. */
.asc-app[data-page="course"] .as-course-info__bar {
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 9px;
}
/* (0,3,0): asc.css §8 `.asc-app .as-tabs__tab{border:0}` (0,2,0) ve
   `.asc-app button.as-tabs__tab` (0,2,1) kurallarının ÜZERİNDE kalır. */
.asc-app[data-page="course"] .as-course-info__tab {
  height: auto;
  padding: 11px 17px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-pill);
  background: var(--as-white);
  font-size: 14px; font-weight: 700;
  /* Satır yüksekliği AÇIK yazılır (tasarımda değer yok = normal): tema/Elementor
     tabanının 1.75'i miras kalınca 14px yazı 24.5px satıra çıkıyor ve buton
     11+24.5+11+2 = 48.5px oluyordu; tasarım 11+19+11+2 ≈ 43px. Bu kural asc.css'teki
     genel düzeltmeden BAĞIMSIZ durması için burada da yazılıdır. */
  line-height: normal;
  white-space: normal;
  color: var(--as-ink-2);            /* tasarım pasif sekme #334155 (canlı #475569 idi) */
  box-shadow: none;
}
/* reset.css `button:hover{background-color:<reset pembesi>}` (0,2,0) → (0,4,0) ile ezilir.
   Ham değer asc.css §8'de belgelidir; sayfa CSS'inde hex yazılmaz. */
.asc-app[data-page="course"] .as-course-info__tab:hover,
.asc-app[data-page="course"] .as-course-info__tab:focus {
  background-color: var(--as-tint-3);
  border-color: var(--as-blue-ring);
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-info__tab.is-active,
.asc-app[data-page="course"] .as-course-info__tab.is-active:hover,
.asc-app[data-page="course"] .as-course-info__tab.is-active:focus {
  background-color: var(--as-navy);
  border-color: var(--as-navy);
  color: var(--as-white);
  box-shadow: none;
}

.asc-app[data-page="course"] .as-course-info__panel {
  margin-top: 18px;
  padding: 26px 28px;
  border: 1px solid var(--as-line-2);
  border-radius: 20px;
  background: var(--as-course-panel);   /* tasarım #F8FBFF (canlı --as-tint-2 #F7FAFF idi) */
}
/* JS kapalıyken dört panel de okunur; aralarında nefes olsun. */
.asc-app[data-page="course"] .as-course-info__panel + .as-course-info__panel { margin-top: 12px; }
.asc-app[data-page="course"] .as-course-info__title {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-info__text {
  margin-top: 10px;
  max-width: 64ch;
  font-size: 15.5px; line-height: 1.7;
  color: var(--as-ink-2);
}
/* Madde arası boşluk tasarımda 0 (satır aralığı yeterli): 3 maddelik liste
   tasarımda 74px (3 × 24.75), canlıda 8px gap ile 91px'e uzuyordu. */
.asc-app[data-page="course"] .as-course-info__list {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 0;
}
.asc-app[data-page="course"] .as-course-info__list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.65;
  color: var(--as-ink-2);
}
.asc-app[data-page="course"] .as-course-info__tick {
  width: 22px; height: 22px; flex: none;
  margin-top: 3px;
  display: grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-tint-3);
  color: var(--as-blue);
}
.asc-app[data-page="course"] .as-course-info__tick svg { width: 12px; height: 12px; }

/* -------------------------------------------------------------------------
   8) SSS — hepsi KAPALI başlar (eşit kutu yüksekliği). JS kapalıyken cevaplar açık.
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-faq__list { margin-top: 20px; gap: 10px; }
/* Gölge tasarımda kart-dinlenme gölgesinden DAHA sığ: 0 2px 6px rgba(7,29,73,.04)
   (canlıda --as-shadow-rest = 0 3px 10px rgba(7,29,73,.05) idi) — 10 kutu alt alta
   dizildiği için fark listede birikiyordu. */
.asc-app[data-page="course"] .as-course-faq__item {
  border-color: var(--as-line);
  border-radius: 16px;
  box-shadow: var(--as-course-faq-shadow);
}
/* Soru metni h3'tür; başlık ölçeği butondan gelir (outline korunur, görünüm değil). */
.asc-app[data-page="course"] .as-course-faq__h {
  margin: 0;
  font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit;
}
.asc-app[data-page="course"] .as-course-faq__q {
  gap: 14px;
  padding: 17px 18px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--as-navy);
  white-space: normal;                       /* uzun soru mobilde sarsın */
}
.asc-app[data-page="course"] .as-course-faq__q:hover,
.asc-app[data-page="course"] .as-course-faq__q:focus {
  background-color: var(--as-tint-2);        /* reset'in pembe hover zemini ezilir */
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-course-faq__q .as-accordion__ico {
  width: 28px; height: 28px;
  background: var(--as-tint);
}
.asc-app[data-page="course"] .as-course-faq__q .as-accordion__ico svg { width: 14px; height: 14px; }
.asc-app[data-page="course"] .as-course-faq__a {
  padding: 0 18px 18px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--as-ink-2);
}

/* Bölüm başlığı — TASARIMDA YOK, müşteri talebiyle eklendi (bkz. course.php).
   ⚠️ HİYERARŞİ TERSTİ (canlıda ölçüldü): bu H2 16.8px/800, hemen altındaki kart
   başlığı (H3 "Bu eğitim için bilgi alın") 21.6px/800 → H2, kendi çocuğu olan
   H3'ten 4.8px KÜÇÜKTÜ. Eski gerekçe "kartı ezmesin" idi; sonuç, kartın kendi
   başlığının bölüm başlığı gibi okunması oldu.
   KARAR — EYEBROW DEĞİL, BÖLÜM BAŞLIĞI TİERİ (`.as-t-sub`, course.php'de sınıf
   olarak verilir; buradaki kural yalnızca boşluk + renk):
     · Bu blok sayfanın diğer dört bölümüyle (Eğitim Hakkında · Süreç ve Sertifika
       Bilgileri · SSS · İlgili Eğitimler) AYNI belge seviyesinde bir H2'dir;
       ikisini farklı ölçekte basmak belge anahattıyla görsel anahattı ayırırdı.
       Aynı token → 25.6px, kart başlığının (21.6px) 4px ÜSTÜ, ters hiyerarşi biter.
     · Eyebrow (11–12.5px uppercase, `.as-eyebrow`) da tersliği "farklı tier"
       hissiyle örterdi, ama <1180'de yan sütun tam genişliğe geçip içerik
       akışının içine girer; orada mikro etiket, üstündeki gerçek bölüm
       başlıklarının yanında ikinci sınıf bir alt satır gibi durur ve tek
       dönüşüm bloğunun sayfadaki ağırlığını düşürür. Dönüşüm bloğunun ağırlığı
       DÜŞMEMELİ (bu sayfanın tek hedefi form).
   Ölçek/ağırlık/harf aralığı artık `.as-t-sub`ten gelir; bu kuralda YOK. */
.asc-app[data-page="course"] .as-course-aside__title {
  margin: 0 0 16px;
  color: var(--as-navy);
}

/* -------------------------------------------------------------------------
   9) BİLGİ TALEBİ FORM KARTI — partials/lead-form.php (2 görünür alan + KVKK).

   ⚠️ YENİDEN YAZILDI (2026-08-12) — kaynaktan birebir (dc-ref/index.html 856–862).
   Tasarımdaki kart bir "gradyan kenarlık" yapısıdır, üç katman:
     1) DIŞ KAP  — radius 24, padding **1.5px**, `overflow:hidden`, zemin #F1D9D3.
        Bu 1.5px'lik dolgu kenarlığın KENDİSİDİR; ayrıca `border` YOKTUR.
     2) HALKA    — kabın içinde 190% boyutunda konik gradyan, 7 saniyede bir tam
        tur döner. Kenarlıkta gezinen parlak yay bundan gelir.
     3) İÇ YÜZEY — radius 22.5 (24 − 1.5), beyaz, padding 27.
   Öncekinde kart saydamdı, kenarlık `.as-leadform`'a 1px olarak veriliyordu ve
   halka `.as-leadspin` (butonun nabız katmanı) olduğu için ÖLÇÜLDÜĞÜNDE 392×632
   boyutunda, opaklığı ~0 olan görünmez bir dikdörtgendi — kullanıcının "form
   alanı sorunlu / efekt olmamış" dediği şey buydu.
   `overflow:hidden` yerine `clip`: yapışkan kolonun (`position:sticky`) çalışması
   için kaydırma kabı OLUŞTURULMAMALI. `clip` de halkayı kutuda tutar.
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-formcard {
  position: relative;
  overflow: clip;
  border-radius: var(--as-r-media);           /* 24px */
  padding: 1.5px;                             /* = gradyan kenarlığın kalınlığı */
  background: var(--as-course-ring-bg);
  box-shadow: var(--as-shadow-card);          /* 0 18px 50px rgba(7,29,73,.11) */
}
/* Dönen konik gradyan. Kare (aspect-ratio:1) ve kaptan büyük olmalı, yoksa
   köşelerde yay kopuyor. Merkezden döner; `translate` transform'un içinde
   kalmalı çünkü animasyon aynı özelliği yazıyor. */
.asc-app[data-page="course"] .as-course-formcard__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
      rgba(217, 58, 41, 0) 0deg,
      rgba(217, 58, 41, 0) 250deg,
      var(--as-red) 320deg,
      #FFB8A8 344deg,
      rgba(217, 58, 41, 0) 360deg);
  animation: as-ringspin 7s linear infinite;
  pointer-events: none;
}
.asc-app[data-page="course"] .as-course-formcard__in {
  position: relative;
  overflow: clip;                             /* köşe parlaması taşmasın */
  border-radius: calc(var(--as-r-media) - 1.5px);
  background: var(--as-white);
}
/* Sağ üst köşedeki yumuşak kırmızı ışıma (dc-ref 859) — tasarımda vardı, bizde yoktu. */
.asc-app[data-page="course"] .as-course-formcard__in::after {
  content: "";
  position: absolute;
  right: -54px; top: -54px;
  width: 170px; height: 170px;
  border-radius: var(--as-r-pill);
  background: radial-gradient(circle, rgba(217, 58, 41, .08), rgba(217, 58, 41, 0) 68%);
  pointer-events: none;
}
/* İç yüzeyin dolgusu forma verilir; kartın kendi kenarlığı/gölgesi ARTIK YOK
   (ikisi de dış kapta). Daha önce burada 1px kenarlık + ikinci bir gölge vardı. */
/* ⚠️ `top: auto` ŞART — REGRESYON DÜZELTMESİ (canlıda ölçüldü).
   asc.css §10'da `.as-leadform--card { position: sticky; top: 104px }` var: form
   kartı ESKİDEN yapışkan öğenin kendisiydi. Bu sayfada yapışkanlık bir üstteki
   `.as-course-aside`e (top:110px) ait; forma burada `position: relative` verince
   miras kalan `top:104px` yapışkan ofset olmaktan çıkıp GÖRECELİ KAYDIRMAYA
   dönüştü ve form kendi kabından 104px aşağı kaydı — kartın üstünde kocaman boş
   alan, altında da taşma oluşuyordu (ölçüm: kap 1217→1851, form 1321→1955). */
.asc-app[data-page="course"] .as-leadform {
  position: relative;
  top: auto;
  padding: 27px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}
.asc-app[data-page="course"] .as-leadform__title {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-leadform__text {
  margin-top: 9px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--as-ink-3);
}
/* NOT: `.as-leadform__req` (Yıldızlı alanlar zorunludur) ve `.as-leadform__star`
   kuralları KALDIRILDI — partials/lead-form.php artık bu iki öğeyi basmıyor
   (tasarımda da yoklar; yerlerini eyebrow hapı aldı). */

.asc-app[data-page="course"] .as-leadform__fields {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
/* Yükseklik `--as-field-h`'e (52px) BAĞLANMAZ: o token iletişim sayfasının
   alanları için; eğitim detay kartında tasarım 54px veriyor (dc-ref 875/881). */
.asc-app[data-page="course"] .as-leadform .as-input {
  height: 54px;
  border-radius: 13px;
  background: var(--as-white);
  font-size: 15.5px;
}
.asc-app[data-page="course"] .as-leadform .as-input:focus {
  background: var(--as-white);
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-ring);
}
.asc-app[data-page="course"] .as-leadform .as-input[aria-invalid="true"] {
  border-color: var(--as-error-line);
  background: var(--as-error-bg);
}
/* Alan hatası: JS `hidden`'ı kaldırıp metni yazar — inline display KULLANILMAZ. */
.asc-app[data-page="course"] .as-leadform .as-field__err[hidden] { display: none; }
.asc-app[data-page="course"] .as-leadform .as-field__err { font-size: 13px; }

/* ⚠️ Yükseklik `--as-field-h`'e BAĞLANMAZ. O token girdi alanının yüksekliğidir
   ve tasarımın iletişim formuna göre 52px'e çekildi; gönder butonu ise tasarımda
   (dc-ref lead kartı) 54px'tir. Token'a bağlıyken buton sessizce 52px'e düşüyordu. */
.asc-app[data-page="course"] .as-leadform__submit {
  margin-top: 20px;
  height: 54px;
  border-radius: var(--as-r-btn-lg);
  font-size: 16px;
}
/* "Gönderiliyor": buton metni kalır, dönen halka görünür (asc.js .is-loading). */
.asc-app[data-page="course"] .as-leadform__spin { display: none; }
.asc-app[data-page="course"] .as-leadform__submit.is-loading .as-leadform__spin {
  display: block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: var(--as-white);
  border-radius: var(--as-r-pill);
  animation: as-spin .7s linear infinite;
}
.asc-app[data-page="course"] .as-leadform__submit.is-loading svg { display: none; }

.asc-app[data-page="course"] .as-leadform__kvkk { margin-top: 13px; font-size: 12.5px; line-height: 1.6; }
.asc-app[data-page="course"] .as-leadform__kvkk a {
  font-weight: 700;
  color: var(--as-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asc-app[data-page="course"] .as-leadform__kvkk a:hover { color: var(--as-navy-2); }

.asc-app[data-page="course"] .as-leadform__alt {
  margin-top: 18px;
  padding-top: 18px;
  /* dc-ref 887 çizgiyi #EEF3FA veriyor; `--as-line-soft` (#F1F5FB) bir ton açıktı. */
  border-top: 1px solid var(--as-course-divider);
}
/* Ayırıcıdaki "VEYA" etiketi partial'dan kaldırıldı (tasarımda yok); geriye kalan
   BOŞ dekoratif span, asc.css `.as-leadform__alt{gap:10px}` + eski margin ile
   WhatsApp butonunu 20px aşağı itiyordu. Tasarımda çizgiden hemen sonra buton
   geliyor (dc-ref: `margin-top:18px;padding-top:18px;border-top` + <a>) → span
   düzenden çıkarılır (boş olduğu için içerik kaybı yok). */
.asc-app[data-page="course"] .as-leadform__or { display: none; }
.asc-app[data-page="course"] .as-leadform__wa { height: 50px; border-radius: 13px; font-size: 15px; }
.asc-app[data-page="course"] .as-leadform__wa svg { width: 19px; height: 19px; }

/* Başarı ekranı (asc.css .is-sent gövdeyi gizler) */
.asc-app[data-page="course"] .as-leadform__sent {
  text-align: center;
  padding: 32px 8px;
  animation: as-pop .4s var(--as-ease) both;
}
.asc-app[data-page="course"] .as-leadform__sent-ico {
  width: 60px; height: 60px;
  display: inline-grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-success-bg);
  color: var(--as-success);
}
.asc-app[data-page="course"] .as-leadform__sent-ico svg { width: 28px; height: 28px; }
.asc-app[data-page="course"] .as-leadform__sent-title {
  margin-top: 18px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em;
  color: var(--as-navy);
}
.asc-app[data-page="course"] .as-leadform__sent-text {
  margin-top: 10px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--as-ink-2);
}
.asc-app[data-page="course"] .as-leadform__sent-wa {
  margin-top: 18px;
  width: 100%;
  height: 50px;
  border-radius: 13px;
}

/* -------------------------------------------------------------------------
   10) İLGİLİ EĞİTİMLER — TEK kart şablonu (partials/product-card.php)
   Kolon kırılımları paylaşılan `.as-grid--related` içindedir (≥680: 2, ≥1000: 3).
   ------------------------------------------------------------------------- */
.asc-app[data-page="course"] .as-course-related {
  padding-block: 72px 88px;
  border-top: 1px solid var(--as-line-2);
  background: var(--as-tint);
}
.asc-app[data-page="course"] .as-course-related .as-sec-head { gap: 10px; }
.asc-app[data-page="course"] .as-course-related__grid { margin-top: 28px; gap: 24px; }

/* -------------------------------------------------------------------------
   11) MOBİL STICKY ÇUBUK — <1180px (yapışkan form kolonunun BAŞLADIĞI yere kadar)

   ⚠️ KIRILIM GENİŞLETİLDİ 759.98 → 1179.98 (2026-08-13, canlıda ölçüldü).
   SORUN: 760–1179px arasında sayfada HİÇBİR kalıcı dönüşüm yolu yoktu —
     · `.as-mobilebar` display:none (kırılım 759.98),
     · `.as-course-aside` position:static (yapışkanlık ≥1180'de başlıyor),
     ölçüm (768×1024): form kartı 4956–5606px, sayfa 8184px → kullanıcı formu
     görmek için sayfanın %60'ını kaydırmak, sonra da tekrar yukarı çıkmak
     zorunda. Tasarımın kendisinde de bu boşluk var (dc-ref 2156/2209: çubuk
     w<760, `formsticky` w>=1000) — prototipte fark edilmemiş bir açık.
   NEDEN "YAN KOLONU 768'DE DE YAPIŞKAN YAP" DEĞİL: <1180'de gövde ızgarası TEK
   kolona düşüyor (§12) ve aside kendi ızgara satırının tek öğesi oluyor. Yapışkan
   öğe ancak KENDİ kapsayıcı bloğunun kutusu içinde gezebilir; tek kolonda o kutu
   aside'ın kendi yüksekliğine eşit → gezinme payı 0, `position:sticky` görünür
   hiçbir şey yapmaz (ölçüm: aside h=650, satır h=650). İki kolona dönmek ise
   768'de ana kolonu ~330px'e düşürürdü (tasarım kararı: iki kolon ≥1180).
   Kalan tek gerçek seçenek: çubuğu yapışkan formun başladığı yere kadar uzatmak.
   Böylece dönüşüm yolu kesintisiz olur: <1180 çubuk · ≥1180 yapışkan form.
   ------------------------------------------------------------------------- */
@media (max-width: 1179.98px) {
  .asc-app[data-page="course"] .as-course-mbar { display: grid; }
  .asc-app[data-page="course"] .as-course-mbar--single { grid-template-columns: 1fr; }

  /* (4) SABİT ÇUBUK TELAFİSİ — çubuk `position:fixed` h=71 (ölçüldü), akıştan
     çıktığı için sayfanın son 71px'ini örter. Dolgu, çubuğun BASILDIĞI koşula
     bağlıdır (`body:has(.as-mobilebar)`) ve yalnızca bu media aralığında geçerlidir
     → çubuk yokken hayalet boşluk oluşmaz. `env(safe-area-inset-bottom)` ŞART:
     çubuğun kendi alt dolgusu da `calc(10px + env(...))` (asc.css §5.9), iOS'ta
     çubuk inset kadar uzuyor.
     Dolgu footer'ın KENDİ zeminine verilir (koyu yüzey devam eder, altta beyaz
     şerit oluşmaz) — body'ye verilseydi tema zemini görünürdü.
     ⚠️ TOPLANMAZ: asc.css §8.15 aynı seçici + aynı özellik + aynı DEĞER ile
     ≤759.98'de zaten yazıyor; burada yalnızca aralık genişliyor, iki bildirim
     üst üste geldiğinde sonuç yine 71px'tir (dolgular toplanmaz).
     ÖLÇÜM (390×844, düzeltmeyle): footer padding-bottom = 71px, en alttaki
     bağlantı ("Mesafeli Satış") alt kenarı 752.8, çubuk üst kenarı 773 →
     20px pay, elementFromPoint hiçbir bağlantıda çubuğu döndürmüyor. */
  body:has(.as-mobilebar) .as-footer { padding-bottom: calc(71px + env(safe-area-inset-bottom)); }

  /* Yüzen ray çubuğun üstüne çıkar. asc.css §8.20 bunu ≤899.98'de yapıyor;
     çubuk artık 1179.98'e kadar basıldığı için 900–1179'da AYNI değer burada
     tekrarlanır (yoksa ray dipte 24px'te kalıp çubuğun altında kaybolurdu). */
  body:has(.as-mobilebar) .asc-app { --as-fab-b: 84px; }

  /* İKİDEN FAZLA WHATSAPP YOK: bu genişlikte sayfada hero CTA'sı + form altı +
     sticky çubuk WhatsApp taşıyor; yüzen rayın WA'sı DÖRDÜNCÜ olurdu → rayda
     yalnızca telefon kalır (telefon tek erişim yolu olarak korunur).
     HATA DÜZELTMESİ: bu kural media bloğunun DIŞINDA yazılmıştı → masaüstünde de
     (çubuk yokken, yani WhatsApp'a tek erişim rayken) WA butonu gizleniyordu.
     Artık yalnızca çubukla AYNI kırılımda geçerli.
     Ray Elementor global footer'ında AYRI bir .asc-app--chrome kabında basıldığı
     için sayfa scope'u ona ulaşmaz; bu dosya yalnızca eğitim detayında
     yüklendiğinden kural başka sayfaya sızmaz. */
  .asc-app .as-fabrail__wa { display: none; }
}
.asc-app[data-page="course"] .as-course-mbar .as-ico { color: var(--as-wa); }

/* -------------------------------------------------------------------------
   12) RESPONSIVE — 05-DESIGN-TOKENS.md (v2) §Breakpoint tablosu
   ------------------------------------------------------------------------- */

/* ≥1180 — sabit form kolonu (altında sticky KALKAR) */
@media (min-width: 1180px) {
  .asc-app[data-page="course"] .as-course-aside {
    position: sticky;
    top: 110px;
  }
}

/* <1180 — tek kolon; kare görselin KUTUSU 236px ile sınırlanır (oran 1/1 kalır)
   ki başlık, güven bandı, kontenjan bloğu ve CTA ilk ekranda kalsın. */
@media (max-width: 1179.98px) {
  .asc-app[data-page="course"] .as-course-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .asc-app[data-page="course"] .as-course-hero__media { max-width: 236px; }
  .asc-app[data-page="course"] .as-course-body__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .asc-app[data-page="course"] .as-course-formcard { max-width: 560px; }
}

/* <1000 — bölüm ritmi ve panel dolgusu sıkışır */
@media (max-width: 999.98px) {
  .asc-app[data-page="course"] .as-course-body { padding-block: 52px 72px; }
  .asc-app[data-page="course"] .as-course-info,
  .asc-app[data-page="course"] .as-course-faq { margin-top: 44px; }
  .asc-app[data-page="course"] .as-course-info__panel { padding: 22px 20px; }
  .asc-app[data-page="course"] .as-course-related { padding-block: 56px 72px; }
}

/* <900 — hero/gövde ritmi sıkışır. (Mobil çubuk artık BURADA DEĞİL, <1180'de —
   bkz. §11; bu bloktaki dolgular çubuktan bağımsız yerleşim ayarıdır.) */
@media (max-width: 899.98px) {
  .asc-app[data-page="course"] .as-course-body { padding-bottom: 56px; }
  .asc-app[data-page="course"] .as-course-hero__in { padding-block: 24px 48px; }
}

/* <600 — kare görselin kutusu 168px; kart dolguları küçülür */
@media (max-width: 599.98px) {
  .asc-app[data-page="course"] .as-course-hero__media { max-width: 168px; }
  .asc-app[data-page="course"] .as-course-hero__cat { top: 12px; left: 12px; padding: 6px 10px; font-size: 10.5px; }
  .asc-app[data-page="course"] .as-course-edevlet { padding: 20px 18px; }
  .asc-app[data-page="course"] .as-course-edevlet__row { align-items: flex-start; gap: 14px; }
  .asc-app[data-page="course"] .as-course-edevlet__mark { width: 56px; height: 56px; border-radius: 15px; }
  .asc-app[data-page="course"] .as-course-edevlet__mark img { width: 32px; height: 32px; }
  .asc-app[data-page="course"] .as-course-edevlet__title { font-size: 17.5px; }
  .asc-app[data-page="course"] .as-course-quota { padding: 18px 16px; }
  /* Sayaç kutusu satır sonuna SARDIĞINDA sağa yaslı kalıyordu: büyük "4"
     68px'lik kutunun sağında (x≈105), altındaki "KİŞİLİK YER" etiketi ise
     x=37'de → sayı ile etiketi ayrı eksende duruyordu. Yan yanayken sağa
     yaslama doğru (satırın sağ ucu), alt alta düşünce sola dönmeli. */
  .asc-app[data-page="course"] .as-course-quota__count { text-align: left; }
  .asc-app[data-page="course"] .as-course-quota__cd { padding: 12px 12px; }
  .asc-app[data-page="course"] .as-course-quota__timer { width: 100%; }
  .asc-app[data-page="course"] .as-course-quota__timer .as-countdown__cell { min-width: 0; flex: 1; }
  .asc-app[data-page="course"] .as-leadform { padding: 22px 18px; }
  .asc-app[data-page="course"] .as-course-hero__cta .as-btn { width: 100%; }
}

/* DOKUNMA HEDEFİ — sekme hapları (ölçüldü: 43px = 11 dolgu + 19 satır + 11 dolgu
   + 2 kenarlık) tasarımın kendi değeriyle birebir, ama 44px'lik dokunma eşiğinin
   1px altında kalıyor. Masaüstünde tasarım değeri KORUNUR (43px); yalnızca
   dokunmatik bağlamda `min-height` ile 44px'e çıkar — dolgu/yazı boyutu değişmez,
   `.as-tabs__tab` zaten `inline-flex; align-items:center` olduğu için etiket
   ortada kalır, tek fark 1px yükseklik.
   Koşul ÇİFT: dar viewport VEYA kaba işaretçi → dokunmatik tablet/dizüstü de
   44px alır, fare kullanan masaüstü tasarımdaki 43px'te kalır. */
@media (max-width: 759.98px), (pointer: coarse) {
  .asc-app[data-page="course"] .as-course-info__tab { min-height: var(--as-tap); }
}

/* iOS: 16px altı font alanlara odaklanınca sayfayı yakınlaştırır. */
@media (max-width: 767.98px) {
  .asc-app[data-page="course"] .as-leadform .as-input { font-size: 16px; }
}