/* =========================================================================
   Acil Sertifika Core — tek stylesheet (TASARIM SİSTEMİ v2)
   Tüm kurallar .asc-app altında scope'lanır (tema/Elementor çakışmasına dayanıklı).
   Token öneki --as-* · util sınıf öneki .as-* · JS kancası data-as-*.
   Bölümler:
   1) Tokenlar (1b GEÇİCİ v1 köprüsü · 1c yerleşim ölçüleri)
   2) Reset & taban          3) Tipografi ölçeği & yerleşim
   4) PAYLAŞILAN bileşenler  5) Chrome (utilbar/header/nav/drawer/footer/footcta/fabrail/arama)
   6) Responsive             7) Motion
   8) Elementor armor (referans: skills/wp-elementor-reskin/references/elementor-overrides.css)
   9) Kartlar (paylaşılan: eğitim kartı 3 varyant + yazı kartı)

   ⚠️ SAYFAYA ÖZEL CSS BURAYA YAZILMAZ → assets/css/pages/<sayfa>.css
      (Asc_Assets::enqueue_page() 'asc' bağımlılığıyla otomatik yükler.)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) TOKENLAR
   ------------------------------------------------------------------------- */
/* Kaynak: handoff/05-DESIGN-TOKENS.md (v2) — değerler tasarım dosyasından birebirdir.
   KURAL: bu listede olmayan renk kullanılmaz. Kural dışı bir hex'e ihtiyaç doğarsa
   BURAYA "EK" etiketiyle token olarak eklenir; kural gövdesine ham hex YAZILMAZ.
   v1→v2: önek --asc-* → --as-*, palet + ritim değişti. Geçiş tamamlandı; eski
   adlar hiçbir dosyada kalmadı, geçici köprü bloğu kaldırıldı. */
.asc-app {
  /* ---- Marka / lacivert ---- */
  --as-navy:        #071D49;  /* birincil metin, koyu zemin, gradyan başı */
  --as-navy-2:      #0B2A5B;  /* ikincil metin, gradyan durağı */
  --as-navy-3:      #123566;  /* gradyan sonu (ana sayfa E-Devlet kartı) */
  --as-blue:        #155EEF;  /* aksan, ikon, link */
  --as-blue-ring:   #2B6FF7;  /* focus halkası, hover kenarlığı */

  /* ---- Kırmızı: CTA + E-Devlet ----
     E-Devlet gradyanı: deep → mid → light. Üzerindeki TÜM metin saf beyaz
     (en açık durak --as-red-light bile beyazla 5.02:1). */
  --as-red:         #D93A29;  /* birincil CTA */
  --as-red-hover:   #B92F23;
  --as-red-deep:    #B62A1B;  /* E-Devlet gradyan başı */
  --as-red-mid:     #C4301F;
  --as-red-light:   #CE3626;  /* gradyan sonu */
  --as-red-ink:     #A02718;  /* açık zeminde E-Devlet metni */
  --as-red-soft:    #FFB4A6;  /* EK: lacivert şerit üstünde link hover (.dc.html utilbar) */

  /* ---- WhatsApp ----
     Parlak #25D366 KULLANILMAZ (beyaz metinle 1.98:1 — AA'nın çok altında).
     Bu iki ton beyaz metinle 5.36:1 / 6.38:1 ölçüldü. */
  --as-wa:          #0F7B3C;
  --as-wa-hover:    #0B6E33;
  --as-wa-border:   #0B6E33;

  /* ---- Yüzeyler ---- */
  --as-white:       #FFFFFF;
  --as-tint:        #F5F9FF;  /* bölüm bandı, alan zemini */
  --as-tint-2:      #F7FAFF;  /* footer gövdesi, yumuşak kart */
  --as-tint-3:      #ECF4FF;  /* ikon pucku, hover zemini */
  --as-tint-4:      #DCEAFF;  /* EK: degrade bitişi (.dc.html görsel yer tutucuları) */
  --as-band:        #EDF3FC;  /* EK: hero diyagonal bandı + header alt çizgisi */
  --as-blush:       #FFF3F1;  /* E-Devlet açık zemin */

  /* ---- Kenarlık ---- */
  --as-line:        #E3EAF5;  /* varsayılan */
  --as-line-2:      #DCE6F3;  /* form, ikincil, kart */
  --as-line-3:      #D7E3F4;  /* EK: hero güven rayı üst çizgisi */
  --as-line-soft:   #F1F5FB;  /* kart içi ayraç */
  /* TASARIM DÜZELTMESİ: #F6D6CF → #FBD5CE. Prototipte ölçüldü (E-Devlet güven
     bloğu + kart rozeti): borderColor rgb(251,213,206). Tek token, iki kullanım
     yeri (rozet gövdesi + işaret pucku) birlikte düzelir. */
  --as-line-blush:  #FBD5CE;  /* E-Devlet çip kenarı */

  /* ---- Metin ----
     Koyu zeminde gövde metni DAİMA beyaz ya da --as-on-navy* ailesinden.
     Soluk/pembe tonlar normal boyutlu metinde AA eşiğini geçmez. */
  --as-ink:         #071D49;  /* = --as-navy; başlık/gövde en koyu */
  --as-ink-2:       #334155;  /* gövde */
  --as-ink-3:       #475569;  /* ikincil gövde */
  --as-muted:       #64748B;  /* yardımcı metin, etiket */
  --as-muted-2:     #94A3B8;  /* placeholder, pasif ikon */
  --as-on-navy:     #C7D8F2;  /* lacivert üstü gövde */
  /* EK: üst yardımcı şeridin KENDİ tonu. Prototipte ölçüldü: rgb(201,217,240).
     --as-on-navy (#C7D8F2) ile karıştırılmıştı; şerit dışındaki lacivert
     panelleri bozmamak için ayrı token yapıldı. */
  --as-on-navy-bar: #C9D9F0;  /* üst yardımcı şerit metni */
  --as-on-navy-2:   #B8CCEC;  /* lacivert üstü ikincil */
  --as-on-navy-3:   #9CB4DC;  /* lacivert üstü dipnot */

  /* ---- Durum ---- */
  --as-error:       #B42318;
  --as-error-bg:    #FEF3F2;
  --as-error-line:  #FECDC9;
  --as-success:     #0F7B3C;
  --as-success-bg:  #E7F6EE;

  /* ---- Tipografi ---- */
  --as-font: "Manrope", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Spacing ----
     Bölüm dikey ritmi 96/96 ve ANA SAYFA BOYUNCA SABİTTİR. Ana sayfa bölümleri
     yalnızca `.as-section` kullanır; --tight/--wide iç sayfalara özeldir. */
  --as-container: 1240px;
  --as-gutter:    32px;
  --as-section-y:     96px;  /* standart — ana sayfada TEK ritim */
  --as-section-y-sm:  72px;  /* iç sayfa sıkı bandı */
  --as-section-y-lg: 120px;  /* iç sayfa geniş / çapa bandı */

  /* ---- Radius (05-DESIGN-TOKENS.md §Radius) ---- */
  --as-r-chip:     8px;   /* küçük etiket */
  --as-r-puck:    13px;   /* ikon pucku (8–15) */
  --as-r-btn:     12px;   /* buton (11–14) */
  --as-r-btn-lg:  14px;   /* büyük buton / form alanı */
  --as-r-media:   24px;   /* görsel çerçevesi (20–24) */
  --as-r-card:    22px;   /* büyük kart (22–30) */
  --as-r-card-lg: 26px;   /* bölüm kartı / panel */
  --as-r-pill:    99px;   /* çip, rozet, yuvarlak */

  /* ---- Gölge ---- */
  --as-shadow-rest:  0 3px 10px rgba(7, 29, 73, .05);    /* kart dinlenme */
  --as-shadow-soft:  0 8px 24px rgba(7, 29, 73, .07);    /* panel */
  --as-shadow-card:  0 18px 50px rgba(7, 29, 73, .11);   /* yükseltilmiş */
  --as-shadow-hover: 0 22px 54px rgba(7, 29, 73, .13);   /* kart hover */
  --as-shadow-cta:   0 12px 30px rgba(217, 58, 41, .26);
  --as-shadow-wa:    0 10px 24px rgba(15, 123, 60, .26);
  --as-shadow-dark:  0 18px 50px rgba(7, 29, 73, .28);   /* EK: çekmece / modal */
  /* EK: dolu CTA'ların HOVER gölgeleri (.dc.html birebir). Marka renkli rgba
     yalnızca burada durur; kural gövdesinde ham renk yazılmaz. */
  --as-shadow-cta-lg: 0 16px 36px rgba(217, 58, 41, .32);
  --as-shadow-wa-lg:  0 16px 36px rgba(15, 123, 60, .34);
  /* EK: form odak halkası (--as-blue-ring'in %14 alfası). */
  --as-ring: 0 0 0 3px rgba(43, 111, 247, .14);
  /* EK — TASARIM ÖLÇÜMÜ (dc-ref prototipi, computed style).
     Bu değerler "tek gölge her yerde" varsayımını bozar: tasarımda gölge
     BAĞLAMA göre değişiyor, bu yüzden her bağlam kendi token'ını alır.
       kart dinlenme  : rgba(7,29,73,.04) 0 2px 6px   (ana sayfa eğitim kartı)
       kart kategori  : rgba(7,29,73,.08) 0 2px 8px   (görsel üstü beyaz pill)
       header CTA     : rgba(217,58,41,.24) 0 8px 22px
       form CTA       : rgba(217,58,41,.22) 0 10px 26px ("Beni Arayın", h=54)
       yeşil ikincil  : rgba(7,29,73,.06) 0 4px 14px  ("Danışmana Sor" — tasarımda
                        YEŞİL parıltı YOK, nötr yumuşak gölge var)
       yüzen ray tel  : rgba(7,29,73,.14) 0 10px 28px
       yüzen ray wa   : rgba(15,123,60,.34) 0 12px 32px */
  --as-shadow-card-rest: 0 2px 6px  rgba(7, 29, 73, .04);
  --as-shadow-chip:      0 2px 8px  rgba(7, 29, 73, .08);
  --as-shadow-cta-hdr:   0 8px 22px rgba(217, 58, 41, .24);
  --as-shadow-cta-form:  0 10px 26px rgba(217, 58, 41, .22);
  --as-shadow-wa-soft:   0 4px 14px rgba(7, 29, 73, .06);
  --as-shadow-fab-tel:   0 10px 28px rgba(7, 29, 73, .14);
  --as-shadow-fab-wa:    0 12px 32px rgba(15, 123, 60, .34);

  /* ---- Motion — TEK easing dili ---- */
  --as-ease:   cubic-bezier(.22, 1, .36, 1);
  --as-t-fast: .22s;  /* hover: renk, kenarlık */
  --as-t-mid:  .28s;  /* transform, gölge */
  --as-t-slow: .72s;  /* scroll reveal */
}

@media (max-width: 599.98px) { .asc-app { --as-gutter: 24px; } }
@media (max-width: 419.98px) { .asc-app { --as-gutter: 20px; } }

/* v1 (--asc-*) token köprüsü KALDIRILDI: tüm sayfa CSS'leri v2'ye geçti.
   Kullanılabilir token listesi yalnızca yukarıdaki 1) TOKENLAR bloğudur. */

/* -------------------------------------------------------------------------
   1c) YERLEŞİM ÖLÇÜLERİ — chrome yüksekliği JS'siz de doğru olsun diye token.
   (Bölüm 1/1b'ye dokunulmaz; bu ek blok yalnızca ölçü değişkeni tanımlar.)
   ------------------------------------------------------------------------- */
.asc-app {
  --as-utilbar-h: 40px;   /* üst yardımcı şerit */
  --as-hdr-h:     86px;   /* header — normal */
  --as-hdr-h-sm:  68px;   /* header — sticky (is-stuck) */
  --as-logo-h:    56px;   /* logo — normal */
  --as-logo-h-sm: 44px;   /* logo — sticky */
  --as-btn-h:     52px;   /* birincil buton */
  --as-btn-h-sm:  46px;   /* ikincil buton */
  --as-field-h:   52px;   /* form alanı — TASARIM: 52px (prototip /iletisim formu
                             computed h=52). 54px'ti; buton yüksekliğiyle (52px)
                             hizasızdı. */
  --as-tap:       44px;   /* dokunma hedefi (min 40, tercih 44) */
  --as-fab-b:     24px;   /* yüzen ray alt boşluğu (<900px'te 84px) */
}

/* -------------------------------------------------------------------------
   2) RESET & TABAN
   ------------------------------------------------------------------------- */
.asc-app,
.asc-app *,
.asc-app *::before,
.asc-app *::after { box-sizing: border-box; }

/* MİRAS TABANI — TASARIM ÖLÇÜMÜ (dc-ref `body`): 16px / normal / rgb(7,29,73).
   ÖNCEKİ HALİ 17px / 1.75 / #334155 idi ve AÇIK font-size'ı olmayan onlarca
   kutuyu şişiriyordu (ölçüldü: kart kategori pili 32.1px olması gereken 27px;
   kırıntı yolu satırı 23.6px; `.as-course-info__list` 17px/29.75px).
   Taban yalnızca MİRAS eder — kendi font-size/line-height'ını yazan her bileşen
   (`.as-lead`, `.as-body-sm`, `.as-t-*`, kart başlıkları…) etkilenmez.
   ⚠️ Regresyon görülürse taban GERİ ALINMAZ, ilgili bileşene açık değer yazılır. */
.asc-app {
  font-family: var(--as-font);
  font-size: 1rem;                /* 16px — tasarım tabanı */
  line-height: normal;
  color: var(--as-ink);
  background: var(--as-white);
  /* Sticky header için: hidden DEĞİL, clip. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

.asc-app img { max-width: 100%; height: auto; display: block; }
.asc-app svg { display: block; flex: none; }
/* `:where()` = (0,1,0): taban link kuralı, SONRA gelen her bileşen sınıfına
   (.as-btn--*, .as-skip, .as-logo …) otomatik kaybeder. Düz `.asc-app a` (0,1,1)
   idi ve `.as-btn--primary{color}` (0,1,0) gibi bileşen renklerini eziyordu. */
.asc-app :where(a) { color: inherit; text-decoration: none; transition: color var(--as-t-fast) var(--as-ease); }
/* THEME ARMOR — reset.css `a:active,a:hover{color:#336}` (0,1,1). asc.css reset'ten
   ÖNCE yüklendiği için kendi hover kuralı olmayan HER link hover'da #333366 oluyordu
   (ölçüldü: .as-skip, .as-logo, .as-footer__logo, .as-course-card__media,
   .as-post-card__media). `:where(a):hover` = (0,2,0) → reset'i özgüllükle yener.
   ⚠️ Bu blok BİLEREK burada, taban kuralın hemen altında duruyor: bileşenlerin kendi
   (0,2,0) hover kuralları (.as-nav__link:hover, .as-drawer__link:hover, .as-btn--*:hover)
   DAHA SONRA geldiği için eşitlikte onlar kazanır. §8'e taşınırsa onları ezer. */
.asc-app :where(a):hover,
.asc-app :where(a):focus,
.asc-app :where(a):active { color: inherit; }
.asc-app p { margin: 0; text-wrap: pretty; }
.asc-app ul, .asc-app ol { margin: 0; padding: 0; list-style: none; }
.asc-app figure, .asc-app blockquote { margin: 0; }
/* `:where()` = (0,1,0). Düz `.asc-app h1..h6` (0,1,1) idi ve `.as-x__title{color}`
   gibi TEK SINIFLI (0,1,0) başlık kurallarını eziyordu — link/buton/input taban
   kurallarıyla AYNI own-goal ailesi. Bugün ölçülen sayfalarda görünür bir hasar
   yoktu (koyu panel başlıkları ya .asc-app önekli ya da sayfa-scope'lu), ama koyu
   panele tek sınıflı bir başlık eklendiği anda lacivert-üstüne-lacivert olurdu.
   İndirildi → sonra gelen bileşen sınıfı otomatik kazanır. */
.asc-app :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--as-navy);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}
/* Aynı gerekçe: bu taban form/buton kuralları (0,1,1) idi ve `color`/`background`
   ile `.as-btn--*` (0,1,0) ve `.as-input` (0,1,0) bileşenlerini eziyordu
   (kırmızı CTA şeffaf, beyaz CTA metni lacivert, input zemini şeffaf).
   `:where()` ile (0,1,0)'a indirildi → bileşen sınıfları kazanır. */
.asc-app :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}
.asc-app :where(button) { background: none; cursor: pointer; }
.asc-app :where(input, textarea, select) { background: none; }
.asc-app hr { border: 0; border-top: 1px solid var(--as-line-2); margin: 0; }
.asc-app table { border-collapse: collapse; width: 100%; }

/* Etkileşim durumu — tek focus dili (05-DESIGN-TOKENS.md). */
.asc-app :focus-visible {
  outline: 3px solid var(--as-blue-ring);
  outline-offset: 2px;
  border-radius: 6px;
}
.asc-app :focus:not(:focus-visible) { outline: none; }
.asc-app ::selection { background: var(--as-tint-4); color: var(--as-navy); }

/* Ekran okuyucu / atlama bağlantısı */
.as-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.as-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  height: 44px; display: inline-flex; align-items: center;
  padding: 0 18px; border-radius: var(--as-r-btn);
  background: var(--as-navy); color: var(--as-white);
  font-size: 14.5px; font-weight: 700;
  transition: top var(--as-t-fast) var(--as-ease);
}
.as-skip:focus { top: 12px; }

/* -------------------------------------------------------------------------
   3) TİPOGRAFİ ÖLÇEĞİ & YERLEŞİM
   Ölçek birebir handoff/05-DESIGN-TOKENS.md (v2) tablosundan.
   v1→v2: Hero H1 ve Bölüm H2 KÜÇÜLDÜ; kart başlığı 16.5–17px, kart gövdesi
   13.5–14.5px, eyebrow 11–12.5px / .06–.09em olarak sabitlendi.
   ⚠️ Türkçe uppercase için kök öğede `lang="tr"` gerekir (00-CURRENT-STATE §2.9):
   eklenti <html> üretmez, `lang` mirasına güvenilir — tema kontrolü teslim notunda.
   ------------------------------------------------------------------------- */
.as-t-hero    { font-size: clamp(2.35rem, 3.9vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
/* TASARIM DÜZELTMESİ (clamp değerleri prototipten):
   .as-t-section 3vw/2.7rem/1.12  → 2.6vw/2.4rem/1.15
   Bölüm başlığı ölçülen sapmanın en büyüğüydü: 1440px'te 43.2px basıyordu,
   tasarım 37.4px (2.6vw). Sayfa-bazlı istisnalar (Süreç, Yasal) sayfa
   CSS'lerinde ayrıca tanımlanır — token yalnızca tasarımın TABANIDIR. */
/* ⚠️ GERİ ALINDI (3.6vw/3.15rem → 3.4vw/3rem): 3.6vw/3.15rem TEK bir sayfanın
   (Hakkımızda, dc-ref satır 1156) değeridir, token'ın tabanı DEĞİL. Token o
   değere çekilince arşiv H1'i canlıda 50.4px ölçüldü; tasarım 48px istiyor
   (dc-ref 580: clamp(2rem,3.4vw,3rem), ls -.03em → 1527px'te 48px / -1.44px).
   3.4vw/3rem tasarımın YAYGIN değeri: arşiv (580), kategori (974), süreç
   (1096), iletişim (1339), blog (1425), yazı (1514) — 6 sayfa. Hakkımızda
   kendi sayfa CSS'inde (pages/about.css) 3.6vw/3.15rem'i zaten override
   ediyor, bu değişiklikten ETKİLENMEZ (ölçüldü: 50.4px korunuyor).
   line-height 1.08 KORUNDU: dc-ref'te bu ölçekteki H1'lerin tamamı 1.08
   (580/974/1096/1339/1425); yalnız SSS 1.1 (1634) ve yazı 1.12 (1514, kendi
   sayfa CSS'inde override'lı). 1.1'e dönmek iletişim + blog H1'lerini
   satır başına ~1px bozardı — token ölçülen çoğunlukta bırakıldı. */
.as-t-page    { font-size: clamp(2rem, 3.4vw, 3rem);      font-weight: 800; letter-spacing: -.03em;  line-height: 1.08; }
.as-t-product { font-size: clamp(1.85rem, 3.1vw, 2.75rem);font-weight: 800; letter-spacing: -.03em;  line-height: 1.12; }
.as-t-section,
.as-title     { font-size: clamp(1.8rem, 2.6vw, 2.4rem);  font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.as-t-sub     { font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.as-t-card    { font-size: 17px;   font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.as-t-card--sm{ font-size: 16.5px; }

/* Mikro etiket (eyebrow) — 11–12.5px / 800 / .06–.09em uppercase. */
.as-eyebrow {
  font-size: 12.5px; font-weight: 800; line-height: 1.3;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--as-navy);
}
.as-eyebrow--sm    { font-size: 11px; letter-spacing: .06em; }
.as-eyebrow--blue  { color: var(--as-blue); }
.as-eyebrow--light { color: var(--as-on-navy); }
.as-eyebrow--red   { color: var(--as-red-ink); }

/* Gövde varyantları */
.as-lead     { font-size: 1.0625rem; line-height: 1.7;  color: var(--as-ink-2); }
.as-lead--lg { font-size: 1.125rem;  line-height: 1.75; }
.as-body-sm  { font-size: 14.5px; font-weight: 500; line-height: 1.6;  color: var(--as-ink-2); }
.as-body-xs  { font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--as-ink-3); }
.as-help     { font-size: 13px;   font-weight: 600; line-height: 1.55; color: var(--as-muted); }
.as-muted    { color: var(--as-muted); }

/* Lacivert zemin üstü metin tonları (v2) — koyu panellerde ham beyaz yerine bunlar. */
.as-on-navy   { color: var(--as-on-navy); }
.as-on-navy-2 { color: var(--as-on-navy-2); }
.as-on-navy-3 { color: var(--as-on-navy-3); }

/* Okuma kolonu */
.as-prose { max-width: 68ch; }
.as-prose p + p { margin-top: 1.05em; }
.as-prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 2.2vw, 1.75rem); letter-spacing: -.025em; }
.as-prose h3 { margin-top: 1.4em; font-size: 1.25rem; letter-spacing: -.02em; }
.as-prose ul, .as-prose ol { margin: 1em 0; padding-left: 1.25em; }
.as-prose ul { list-style: disc; }
.as-prose ol { list-style: decimal; }
.as-prose li { margin: .4em 0; }
.as-prose a { color: var(--as-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Konteyner & bölüm ritmi */
.as-container {
  width: 100%;
  max-width: var(--as-container);
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}
.as-container--narrow { max-width: 880px; }

/* ANA SAYFA RİTMİ: 96/96, bölüm bölüm SABİT. Ana sayfa şablonu yalnızca düz
   `.as-section` kullanır — `--tight`/`--wide` iç sayfalara özeldir, ana sayfada
   kullanılmaz (v1'in 0/0 · 88/88 · 0/88 · 92/92 karışık ritmi kaldırıldı). */
.as-section { padding-block: var(--as-section-y); }
.as-section--tight { padding-block: var(--as-section-y-sm); }
.as-section--wide  { padding-block: var(--as-section-y-lg); }
.as-section--alt   { background: var(--as-tint); }
.as-section--band  { background: var(--as-band); }
.as-section--soft  { background: var(--as-tint-2); }
.as-section--ink   { background: var(--as-navy); color: var(--as-on-navy); }
.as-section--ink h1, .as-section--ink h2, .as-section--ink h3 { color: var(--as-white); }
.as-section--ink p { color: var(--as-on-navy); }
/* Yalnızca hero/kapanış bandı gibi bitişik bloklarda; ana sayfa gövdesinde YOK. */
.as-section--flush-top { padding-top: 0; }
.as-section--flush-bot { padding-bottom: 0; }

/* Lacivert gradyan yüzey — ana sayfa E-Devlet kartı (00-CURRENT-STATE §2.5).
   Üstündeki gövde metni --as-on-navy*, başlıklar beyaz. */
.as-navy-grad {
  background: linear-gradient(150deg, var(--as-navy) 0%, var(--as-navy-2) 55%, var(--as-navy-3) 100%);
  color: var(--as-on-navy);
}
.as-navy-grad h1, .as-navy-grad h2, .as-navy-grad h3, .as-navy-grad h4 { color: var(--as-white); }

/* E-Devlet kırmızı gradyan bandı — ÜZERİNDEKİ TÜM METİN SAF BEYAZ
   (en açık durak --as-red-light bile beyazla 5.02:1). */
.as-edevlet-band {
  background: linear-gradient(135deg, var(--as-red-deep) 0%, var(--as-red-mid) 52%, var(--as-red-light) 100%);
  color: var(--as-white);
}
.as-edevlet-band h1, .as-edevlet-band h2, .as-edevlet-band h3,
.as-edevlet-band h4, .as-edevlet-band p, .as-edevlet-band li,
.as-edevlet-band a, .as-edevlet-band span, .as-edevlet-band strong { color: var(--as-white); }

/* Bölüm başlığı bloğu */
.as-sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.as-sec-head--center { margin-inline: auto; text-align: center; align-items: center; }
.as-sec-head--row {
  max-width: none; flex-direction: row; align-items: flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.as-sec-head__text { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.as-sec-link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; font-size: 14.5px; font-weight: 700; color: var(--as-blue);
}
.as-sec-link:hover { color: var(--as-navy); }
.as-sec-link svg { width: 16px; height: 16px; }

/* Izgara — kırılımlar 05-DESIGN-TOKENS.md (v2) §Breakpoint tablosundan.
   Prototipte JS `applyResponsive()` yapıyordu; WordPress'te SAF CSS. */
.as-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.as-grid > * { min-width: 0; }
.as-grid--gap-sm { gap: 20px; }
.as-grid--gap-lg { gap: 24px; }
@media (min-width: 620px) {
  .as-grid--2, .as-grid--3, .as-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .as-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .as-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1160px) {
  .as-grid--3-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v2 tablosundaki ADLANDIRILMIŞ ızgaralar — sayfa ajanları bunları kullanır,
   kendi @media'larını yeniden türetmez.
   ≥1060 hedef 4 kolon · ≥700 hedef 2 kolon
   ≥1000 istatistik 4 kolon · ≥640 istatistik 2 kolon
   ≥1000 ilgili 3 kolon · ≥680 ilgili 2 kolon */
@media (min-width: 700px)  { .as-grid--goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .as-grid--goals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .as-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .as-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 680px)  { .as-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .as-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Yığın yardımcıları (sık tekrar eden dikey boşluk) */
.as-stack   { display: flex; flex-direction: column; gap: 14px; }
.as-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.as-row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.as-mt-16 { margin-top: 16px; } .as-mt-22 { margin-top: 22px; }
.as-mt-28 { margin-top: 28px; } .as-mt-40 { margin-top: 40px; }

/* -------------------------------------------------------------------------
   4) PAYLAŞILAN BİLEŞENLER
   Sayfa CSS'leri (assets/css/pages/*.css) bunları YENİDEN YAZMAZ, kullanır.
   ------------------------------------------------------------------------- */

/* 4.1 Buton --------------------------------------------------------------- */
.as-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--as-btn-h-sm);
  padding: 0 20px;
  border: 0; border-radius: var(--as-r-btn);
  font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: -.005em;
  text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-mid) var(--as-ease),
              transform var(--as-t-mid) var(--as-ease);
}
.as-btn svg { width: 17px; height: 17px; }
.as-btn[disabled], .as-btn.is-loading { opacity: .6; pointer-events: none; }

/* Birincil — kırmızı, 52px
   RADIUS: tasarımda taban 14px ("Eğitimleri İncele", "Beni Arayın" — ölçüldü).
   12px'ti; 12px yalnızca HEADER CTA'sının değeri (aşağıda §5.2'de açıkça verilir).
   GÖLGE: tasarımda birincil CTA'nın gölgesi BAĞLAMA bağlı, varsayılan GÖLGESİZ.
   Prototip ölçümü: "Eğitimi Bul" none · "Danışmana Ulaş" none · 404 CTA none ·
   header "Bilgi Al" 0 8px 22px .24 · form "Beni Arayın" 0 10px 26px .22 ·
   hero "Eğitimleri İncele" 0 12px 30px .26. Burada `--as-shadow-cta` (0 12px 30px)
   koşulsuz basılıyordu → her yerde en ağır gölge çıkıyordu. Varsayılan none
   yapıldı; gölgeyi bağlam sınıfları verir. */
.as-btn--primary {
  height: var(--as-btn-h);
  padding: 0 24px;
  border-radius: var(--as-r-btn-lg);
  font-size: 16px;
  background: var(--as-red);
  color: var(--as-white);
  box-shadow: none;
}
.as-btn--primary:hover,
.as-btn--primary:focus-visible {
  background: var(--as-red-hover);
  color: var(--as-white);
  box-shadow: none;
}

/* İkincil — beyaz zemin + kenarlık, 46px */
.as-btn--secondary {
  background: var(--as-white);
  color: var(--as-navy-2);
  border: 1px solid var(--as-line-2);
}
.as-btn--secondary:hover,
.as-btn--secondary:focus-visible {
  background: var(--as-tint-3);
  border-color: var(--as-blue-ring);
  color: var(--as-navy-2);
}

/* Hayalet — koyu zeminde */
.as-btn--ghost {
  background: transparent;
  color: var(--as-white);
  border: 1px solid rgba(255, 255, 255, .34);
}
.as-btn--ghost:hover,
.as-btn--ghost:focus-visible { background: rgba(255, 255, 255, .1); color: var(--as-white); }

/* Beyaz — koyu zeminde dolu */
.as-btn--light { background: var(--as-white); color: var(--as-navy); }
.as-btn--light:hover, .as-btn--light:focus-visible { background: var(--as-tint-3); color: var(--as-navy); }

/* WhatsApp — v2 tonu. Parlak #25D366 KULLANILMAZ (beyaz metinle 1.98:1).
   --as-wa beyaz metinle 5.36:1, --as-wa-hover 6.38:1 (ikisi de AA'yı geçer).
   Kenarlık tasarımdaki gibi bir tık koyu (--as-wa-border) → dolu yüzeyin
   sınırı açık zeminde kaybolmaz. */
/* GÖLGE: tasarımda yeşil ikincil butonun ("Danışmana Sor") gölgesi NÖTR ve
   yumuşaktır — `rgba(7,29,73,.06) 0 4px 14px` (ölçüldü). Burada `--as-shadow-wa`
   (0 10px 24px rgba(15,123,60,.26)) vardı: tasarımda OLMAYAN yeşil bir parıltı.
   Hover'da da aynı gölge kalır (eskiden KIRMIZI `--as-shadow-cta` basıyordu —
   yeşil butonun altında kırmızı hale). */
.as-btn--wa {
  background: var(--as-wa); color: var(--as-white);
  border: 1px solid var(--as-wa-border);
  box-shadow: var(--as-shadow-wa-soft);
}
.as-btn--wa:hover, .as-btn--wa:focus-visible {
  background: var(--as-wa-hover); color: var(--as-white);
  border-color: var(--as-wa-hover);
  box-shadow: var(--as-shadow-wa-soft);
}
.as-btn--wa svg { width: 18px; height: 18px; }

/* Lacivert dolu buton (hero kartı "Birlikte belirleyelim", açık zeminde ikinci ton) */
.as-btn--navy { background: var(--as-navy); color: var(--as-white); }
.as-btn--navy:hover, .as-btn--navy:focus-visible { background: var(--as-navy-2); color: var(--as-white); }

/* Boyut / genişlik */
.as-btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; }
.as-btn--lg { height: 56px; padding: 0 28px; font-size: 16.5px; border-radius: var(--as-r-btn-lg); }
.as-btn--block { width: 100%; }

/* İkon buton (40–44px kare) */
.as-icon-btn {
  width: var(--as-tap); height: var(--as-tap);
  display: grid; place-items: center;
  border: 1px solid var(--as-line-2);
  background: var(--as-white);
  border-radius: var(--as-r-btn);
  color: var(--as-navy-2); cursor: pointer;
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease),
              transform var(--as-t-mid) var(--as-ease);
}
.as-icon-btn:hover, .as-icon-btn:focus-visible {
  background: var(--as-tint);
  border-color: var(--as-blue-ring);
  color: var(--as-blue);
}
.as-icon-btn svg { width: 20px; height: 20px; }
.as-icon-btn--sm { width: 36px; height: 36px; border-radius: 10px; }
.as-icon-btn--sm svg { width: 16px; height: 16px; }

/* 4.2 Çip ----------------------------------------------------------------- */
.as-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 7px 13px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-chip);
  background: var(--as-tint);
  font-size: 13px; font-weight: 700; line-height: 1.2;
  color: var(--as-ink-2);
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              border-color var(--as-t-fast) var(--as-ease);
}
.as-chip svg { width: 15px; height: 15px; }
/* Tıklanabilir çip = gerçek kontrol → dokunma hedefi min 40px. */
a.as-chip, button.as-chip { min-height: 40px; padding-block: 9px; }
a.as-chip:hover, button.as-chip:hover,
a.as-chip:focus-visible, button.as-chip:focus-visible {
  border-color: var(--as-blue-ring); color: var(--as-blue); background: var(--as-tint-3);
}
.as-chip.is-active {
  background: var(--as-navy); border-color: var(--as-navy); color: var(--as-white);
}
/* Pill çip PASİF durumu — tasarım: zemin #FFFFFF, metin #0B2A5B.
   Taban `.as-chip` (tint zemin + --as-ink-2) kalıyordu.
   ⚠️ ÖZGÜLLÜK: §8.1 armor'ı `.asc-app .as-chip{color:var(--as-ink-2)}` (0,2,0)
   ile DAHA SONRA geliyor; düz `.as-chip--pill` (0,1,0) ya da `.asc-app
   .as-chip--pill` (0,2,0) eşitlikte KAYBEDERDİ. `.asc-app .as-chip.as-chip--pill`
   = (0,3,0) → hem armor'ı hem reset'i yener, `.is-active` (aşağıda, aynı
   özgüllükte + SONRA) yine kazanır. */
.as-chip--pill  { border-radius: var(--as-r-pill); }
.asc-app .as-chip.as-chip--pill { background: var(--as-white); color: var(--as-navy-2); }
/* (0,3,0) pasif kural §8.2'nin `.asc-app .as-chip:hover` (0,2,0) kuralını da
   ezerdi → tıklanabilir pill'in hover/aktif dili burada (0,4,0) ile geri verilir. */
.asc-app a.as-chip.as-chip--pill:hover, .asc-app button.as-chip.as-chip--pill:hover,
.asc-app a.as-chip.as-chip--pill:focus, .asc-app button.as-chip.as-chip--pill:focus {
  background: var(--as-tint-3); color: var(--as-blue);
}
.asc-app .as-chip.as-chip--pill.is-active { background: var(--as-navy); color: var(--as-white); }
.as-chip--plain { background: var(--as-white); }
.as-chip--blue  { background: var(--as-tint-3); border-color: var(--as-tint-4); color: var(--as-blue); }

/* Rozet (kart üstü küçük etiket) */
.as-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--as-r-chip);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--as-tint-3); color: var(--as-blue);
}
.as-badge--soft { background: var(--as-tint); color: var(--as-ink-3); }
.as-badge--ink  { background: var(--as-navy);   color: var(--as-white); }

/* Nokta ayracı */
.as-dot { width: 4px; height: 4px; border-radius: var(--as-r-pill); background: var(--as-muted-2); flex: none; }

/* 4.3 Kart ---------------------------------------------------------------- */
.as-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px;
  background: var(--as-white);
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-card);
  transition: border-color var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-mid) var(--as-ease),
              transform var(--as-t-mid) var(--as-ease);
}
.as-card--tight { padding: 19px; }
.as-card--flat  { border-radius: var(--as-r-btn-lg); }
.as-card--soft  { background: var(--as-tint-2); }
.as-card--shadow{ box-shadow: var(--as-shadow-rest); }
/* TASARIM ÖLÇÜMÜ (dc-ref style-hover, satır 277 öne çıkan kart / 397-427 kategori
   kartları): `transform:translateY(-5px); box-shadow:0 22px 54px rgba(7,29,73,.13)`.
   Canlıda -4px ölçüldü → yükselme tasarımdan 1px zayıftı. Gölge zaten doğru:
   --as-shadow-hover = 0 22px 54px rgba(7,29,73,.13) (§1 token, birebir).
   NOT: dc-ref arşiv kartları (643/996) -4px, blog/ilgili kartları (507/936)
   -3px kullanır; taban token ana sayfanın (en görünür) değerini taşır ve
   gölge zaten tüm bağlamlarda tek değere birleştirilmiştir. */
.as-card--hover:hover,
.as-card--hover:focus-within {
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-shadow-hover);
  transform: translateY(-5px);
}
.as-card__head { display: flex; align-items: flex-start; gap: 13px; }
.as-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.as-card__foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--as-line-soft);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.as-card__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--as-navy); }
.as-card__text  { font-size: 14.5px; line-height: 1.65; color: var(--as-ink-3); }

/* Görsel çerçevesi */
.as-media {
  position: relative; overflow: hidden;
  border-radius: var(--as-r-media);
  background: linear-gradient(140deg, var(--as-tint-3), var(--as-tint-4));
}
.as-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-media--16x9 { aspect-ratio: 16 / 9; }
.as-media--4x3  { aspect-ratio: 4 / 3; }
.as-media--1x1  { aspect-ratio: 1 / 1; }
.as-media--contain > img { object-fit: contain; }

/* 4.4 İkon kutusu --------------------------------------------------------- */
.as-icon-box {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--as-tint-3);
  color: var(--as-blue);
}
.as-icon-box svg { width: 21px; height: 21px; }
.as-icon-box--sm { width: 36px; height: 36px; border-radius: 10px; }
.as-icon-box--sm svg { width: 17px; height: 17px; }
.as-icon-box--lg { width: 54px; height: 54px; border-radius: var(--as-r-btn); }
.as-icon-box--lg svg { width: 25px; height: 25px; }
.as-icon-box--round { border-radius: var(--as-r-pill); }
.as-icon-box--red   { background: var(--as-blush); color: var(--as-red); }
.as-icon-box--plain { background: var(--as-white); }
.as-icon-box--ink   { background: rgba(255, 255, 255, .1); color: var(--as-white); }
/* Ortak SVG ikon sarmalayıcısı (asc_icon_html) */
.as-ico { display: inline-flex; flex: none; }
.as-ico svg { width: 1.15em; height: 1.15em; }
.as-ico .as-i-main   { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-ico .as-i-subtle { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.as-ico .as-i-accent { stroke: var(--as-red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.as-ico .as-i-fill   { fill: currentColor; opacity: .16; }

/* 4.5 Form alanları ------------------------------------------------------- */
.as-form { display: flex; flex-direction: column; gap: 14px; }
.as-field { display: flex; flex-direction: column; gap: 7px; }
.as-label { font-size: 13.5px; font-weight: 700; color: var(--as-navy-2); line-height: 1.3; }
/* TASARIM ÖLÇÜMÜ (prototip /iletisim formu, computed):
   background #FFFFFF · border-radius 12px · height 52px · font-weight 400
   · border-color #DCE6F3 (bu doğruydu).
   Buradaki hali #F5F9FF / 14px / 54px / 600 idi — alan "dolu" görünüyor,
   köşeler butondan yuvarlak ve yazı fazla kalın çıkıyordu. */
.as-input, .as-select, .as-textarea {
  width: 100%;
  height: var(--as-field-h);
  padding: 0 16px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-btn);
  background: var(--as-white);
  font-size: 15px; font-weight: 400; color: var(--as-navy);
  transition: border-color var(--as-t-fast) var(--as-ease),
              background-color var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-fast) var(--as-ease);
}
.as-textarea { height: auto; min-height: 128px; padding: 15px 16px; line-height: 1.6; font-weight: 500; resize: vertical; }
.as-select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.as-input::placeholder, .as-textarea::placeholder { color: var(--as-muted-2); opacity: 1; }
.as-input:focus, .as-select:focus, .as-textarea:focus {
  outline: none;
  background: var(--as-white);
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-ring);
}
.as-input.is-invalid, .as-select.is-invalid, .as-textarea.is-invalid {
  border-color: var(--as-error-line); background: var(--as-error-bg);
}
.as-field__err { font-size: 12.5px; font-weight: 600; color: var(--as-error); }
.as-field__hint{ font-size: 12.5px; font-weight: 500; color: var(--as-muted); }

.as-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--as-ink-3); }
.as-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--as-red); }
.as-consent a { color: var(--as-blue); text-decoration: underline; text-underline-offset: 2px; }
.as-input-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.as-form-error {
  margin-top: 4px; padding: 11px 14px;
  border: 1px solid var(--as-error-line); border-radius: var(--as-r-btn);
  background: var(--as-error-bg); color: var(--as-error);
  font-size: 13.5px; font-weight: 600;
}
.as-form-status {
  padding: 14px 16px; border-radius: var(--as-r-btn);
  background: var(--as-success-bg); color: var(--as-success);
  font-size: 14px; font-weight: 700;
}
/* Gönderim sonrası: form gizlenir, teşekkür bloğu görünür (class ile). */
.as-form__sent { display: none; }
.is-sent .as-form__body { display: none; }
.is-sent .as-form__sent { display: block; animation: as-rise-sm .3s var(--as-ease) both; }

/* 4.6 Akordeon (JS kapalıyken içerik OKUNUR kalır) ------------------------ */
.as-accordion { display: flex; flex-direction: column; gap: 12px; }
/* RADIUS: tasarım 18px. `--as-r-card` (22px) kullanılıyordu — akordeon öğesi
   büyük karttan bir tık daha az yuvarlaktır (tasarım ölçüsü). */
.as-accordion__item {
  border: 1px solid var(--as-line-2);
  border-radius: 18px;
  background: var(--as-white);
  overflow: hidden;
  transition: border-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-mid) var(--as-ease);
}
.as-accordion__item.is-open { border-color: var(--as-blue-ring); box-shadow: var(--as-shadow-rest); }
.as-accordion__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 20px;
  text-align: left;
  font-size: 15.5px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em;
  color: var(--as-navy);
  /* MOBİL: uzun soru sarsın (reset `button{white-space:nowrap}` mirası). */
  white-space: normal;
  cursor: pointer;
}
.as-accordion__q:hover { color: var(--as-blue); }
.as-accordion__ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-tint-3); color: var(--as-blue);
  transition: transform var(--as-t-mid) var(--as-ease), background-color var(--as-t-fast) var(--as-ease);
}
.as-accordion__ico svg { width: 16px; height: 16px; }
.as-accordion__item.is-open .as-accordion__ico { transform: rotate(180deg); }
.as-accordion__a { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.7; color: var(--as-ink-3); }
/* JS varsa kapalı öğenin cevabı gizlenir; JS yoksa açık kalır → içerik okunur. */
.asc-app.js .as-accordion__item:not(.is-open) .as-accordion__a { display: none; }

/* 4.7 Sekmeler (JS kapalıyken tüm paneller okunur) ------------------------ */
.as-tabs { display: flex; flex-direction: column; gap: 22px; }
.as-tabs__bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-btn-lg);
  background: var(--as-tint);
}
.as-tabs__tab {
  height: 42px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--as-ink-3);
  cursor: pointer;
  transition: background-color var(--as-t-fast) var(--as-ease), color var(--as-t-fast) var(--as-ease);
}
.as-tabs__tab:hover { color: var(--as-navy); }
.as-tabs__tab.is-active { background: var(--as-white); color: var(--as-navy); box-shadow: var(--as-shadow-rest); }
.as-tabs__panel { animation: as-rise-sm .3s var(--as-ease) both; }
.as-tabs__panel[hidden] { display: none; }

/* 4.8 Geri sayım (tabular-nums) ------------------------------------------- */
.as-countdown { display: flex; align-items: center; gap: 10px; }
.as-countdown__cell {
  min-width: 56px; padding: 9px 10px;
  border-radius: var(--as-r-btn);
  background: var(--as-tint);
  border: 1px solid var(--as-line-2);
  text-align: center;
}
.as-countdown__num {
  display: block;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--as-navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.as-countdown__lbl {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--as-muted);
}
.as-countdown--inline { gap: 4px; font-variant-numeric: tabular-nums; }
/* Süre dolduğunda NEGATİF sayaç YOKTUR: hücreler `00 00 00 00`da donar ve
   blok soluklaşır; aciliyet mesajının yerini "yeni dönem" bloğu alır
   (00-CURRENT-STATE §2.2 — sahte aciliyet üretilmez). */
.as-countdown.is-expired .as-countdown__num { color: var(--as-muted-2); }
.as-countdown.is-expired .as-countdown__cell { background: var(--as-tint-2); }

/* 4.8b Kontenjan / doluluk çubuğu ----------------------------------------
   Dış katmanın GENİŞLİĞİ veridir (sunucudan yüzde), iç katman 0→1 ölçeklenir.
   Kontenjan ≤6 kaldığında `.is-low` → etiket "Son kontenjanlar", renk kırmızı.
   Dolu ise `.is-full`. Yüzde inline `style="width:%"` ile verilir (veri). */
.as-quota { display: flex; flex-direction: column; gap: 9px; }
.as-quota__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.as-quota__label { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--as-blue); }
.as-quota.is-low  .as-quota__label,
.as-quota.is-full .as-quota__label { color: var(--as-red); }
.as-quota__value { font-size: 13.5px; font-weight: 700; color: var(--as-ink-2); font-variant-numeric: tabular-nums; }
.as-quota__track {
  height: 8px; width: 100%;
  border-radius: var(--as-r-pill);
  background: var(--as-tint-3);
  overflow: hidden;
}
/* Dış katman = doluluk oranı (genişlik veriden).
   ⚠️ `display:block` ZORUNLU. Öğe bir <span>; display yazılmazsa computed
   `inline` kalır ve inline kutuda `width` UYGULANMAZ → inline `style="width:88%"`
   sessizce yok sayılır, iç katmanın `width:100%`i tüm track'i boyar ve çubuk
   HER ZAMAN %100 dolu görünür. (Mobil QA, 390px: 316px/316px ölçüldü; metin
   "%88 doldu" derken çubuk "tükendi" diyordu — sayfadaki en yanıltıcı hata.) */
.as-quota__fill { display: block; height: 100%; border-radius: inherit; overflow: hidden; }
/* İç katman = animasyon. fill-mode YOK → çalışmazsa dolu kalır. */
.as-quota__fill > span {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--as-blue), var(--as-blue-ring));
  animation: as-quota .9s var(--as-ease);
}
.as-quota[data-as-quota-key="b"] .as-quota__fill > span { animation-name: as-quota-b; }
.as-quota.is-low .as-quota__fill > span,
.as-quota.is-full .as-quota__fill > span { background: linear-gradient(90deg, var(--as-red-deep), var(--as-red)); }

/* 4.9 E-Devlet rozeti ----------------------------------------------------- */
/* YAZIM: her yerde "E-Devlet" (büyük E) — 00-CURRENT-STATE §2.1.
   v2'de E-Devlet SİTE GENELİ bir gerçektir: ürün bazlı `edevlet` boolean'ı ve
   onu saran koşullar KALDIRILDI; rozet her kartta, güven bloğu her eğitim
   detayında KOŞULSUZ render edilir. Metin tek genel ayardan yönetilir. */
.as-edevlet-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;    /* işaret tarafı dar — tasarımdaki asimetrik çip */
  border: 1px solid var(--as-line-blush);
  border-radius: var(--as-r-chip);
  background: var(--as-blush);
  font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1.35;
  color: var(--as-red-ink);
}
.as-edevlet-badge svg { width: 16px; height: 16px; }
.as-edevlet-badge__note { font-weight: 600; color: var(--as-ink-3); }
.as-edevlet-badge--pill  { border-radius: var(--as-r-pill); padding: 7px 14px 7px 8px; font-size: 12px; }
.as-edevlet-badge--block { border-radius: var(--as-r-btn); }
/* İşaretin beyaz yuvarlak pucku (tasarımdaki 24–26px halka). */
/* İşaret pucku: kenarlık `--as-line-blush` (#FBD5CE) DEĞİL #F6D6CF. Kaynakta
   (dc-ref 118, 283, 342) rozetin DIŞ gövdesi #FBD5CE, içindeki puck #F6D6CF —
   iki ayrı ton. Jetona dokunulmuyor, bileşene kendi değeri veriliyor. */
.as-edevlet-badge__mark {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-white);
  border: 1px solid #F6D6CF;
}

/* E-Devlet İŞARETİ — yalnızca hilal+yıldız simgesi kullanılır; "türkiye.gov.tr"
   yazılı tam logo BİLİNÇLİ olarak kullanılmaz (00-CURRENT-STATE §3).
   Simge yalnızca ÖLÇEKLENİR: renk/biçim/kompozisyon değişmez, üzerine metin
   veya efekt konmaz. Açık zeminde `e-devlet-mark-sm.png`, KIRMIZI gradyan
   bandında `e-devlet-mark-white.png` kullanılır.
   `.elementor img{height:auto}` (0,1,1) height'ı ezerdi → (0,2,0) ile geri alınır. */
.asc-app .as-edevlet-logo {
  height: 16px; width: auto; flex: none;
  display: block;
}
.asc-app .as-edevlet-badge__mark img { width: 16px; height: 16px; object-fit: contain; display: block; }

/* 4.10 Boş / hata durumu — TEK bileşen, iki metin varyantı ----------------- */
.as-empty {
  padding: 26px 22px;
  border-radius: var(--as-r-media);
  background: var(--as-tint);
  animation: as-rise-sm .26s var(--as-ease) both;
}
.as-empty__row { display: flex; gap: 12px; align-items: flex-start; }
.as-empty__ico {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border-radius: var(--as-r-pill);
  background: var(--as-white); color: var(--as-blue);
}
.as-empty__ico svg { width: 16px; height: 16px; }
.as-empty__title { font-size: 14.5px; font-weight: 700; color: var(--as-navy); }
.as-empty__text  { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--as-ink-3); }
.as-empty__actions { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
/* Hata varyantı */
.as-empty--error { background: var(--as-error-bg); border: 1px solid var(--as-error-line); }
.as-empty--error .as-empty__ico   { color: var(--as-error); }
.as-empty--error .as-empty__title { color: var(--as-error); }
.as-empty--error .as-empty__text  { color: var(--as-red-ink); }

/* 4.11 Breadcrumb / sayfalama -------------------------------------------- */
.as-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  /* AA: --as-muted (#64748B) açık mavi hero zemininde (--as-tint-3 #ECF4FF)
     4.29:1 ölçüldü — 13.5px/400 gövde metni için 4.5:1 gerekiyor. Aynı mürekkep
     ailesinden bir ton koyu: ink-500 → surface-4 üzerinde 6.84:1, beyazda 7.58:1.
     [aria-current] ink-700 kaldığı için kırıntı/aktif hiyerarşisi korunur. */
  font-size: 13.5px; color: var(--as-ink-3);
}
/* Dokunma hedefi — TASARIM ÖLÇÜMÜ: kırıntı satırı 40px, çünkü prototipte her
   kırıntı ÖĞESİ `display:flex; min-height:40px`. Bizde öğeler satır içiydi ve
   satırın yüksekliği yalnızca miras line-height'tan geliyordu (ölçüldü: 23.6px
   = 13.5px × 1.75). Taban line-height `normal`e çekilince satır 18px'e düşerdi;
   yükseklik artık line-height'a DEĞİL dokunma hedefine bağlanıyor. */
.as-breadcrumb a,
.as-breadcrumb [aria-current] {
  display: inline-flex; align-items: center;
  min-height: 40px;   /* tasarımdaki değer (min 40, tercih 44 alt sınırı) */
}
.as-breadcrumb a:hover { color: var(--as-blue); }
.as-breadcrumb [aria-current] { color: var(--as-navy-2); font-weight: 600; }

.as-pagination { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.as-pagination a, .as-pagination span {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--as-line-2); border-radius: 10px;
  background: var(--as-white);
  font-size: 14px; font-weight: 700; color: var(--as-ink-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);
}
.as-pagination a:hover { border-color: var(--as-blue-ring); color: var(--as-blue); background: var(--as-tint-3); }
.as-pagination .current, .as-pagination .is-active { background: var(--as-navy); border-color: var(--as-navy); color: var(--as-white); }

/* 4.12 Arama önerisi (header modalı + hero + arşiv ortak) ------------------ */
.as-suggest {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 52vh; overflow: auto;
}
.as-suggest[hidden] { display: none; }
.as-suggest__row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: var(--as-r-btn);
  color: var(--as-navy);
  transition: background-color var(--as-t-fast) var(--as-ease);
}
.as-suggest__row:hover, .as-suggest__row.is-active { background: var(--as-tint); }
.as-suggest__thumb {
  width: 52px; height: 40px; flex: none;
  border-radius: 9px; overflow: hidden;
  background: linear-gradient(140deg, var(--as-tint-3), var(--as-tint-4));
  display: grid; place-items: center; color: var(--as-blue);
}
.as-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.as-suggest__body { min-width: 0; }
.as-suggest__name { display: block; font-size: 15px; font-weight: 700; color: var(--as-navy); }
.as-suggest__cat  { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--as-muted); }
.as-suggest__empty { padding: 14px 12px; font-size: 13.5px; color: var(--as-muted); }
.as-suggest__empty a { color: var(--as-blue); font-weight: 700; }

/* -------------------------------------------------------------------------
   5) CHROME — utilbar / header / nav / drawer / footer / fabrail / arama
   ------------------------------------------------------------------------- */

/* 5.1 Üst yardımcı şerit (40px, lacivert) --------------------------------- */
/* Metin tonu tasarımda #C9D9F0 (ölçüldü); --as-on-navy (#C7D8F2) kullanılıyordu. */
.as-utilbar { background: var(--as-navy); color: var(--as-on-navy-bar); }
.as-utilbar__in {
  height: var(--as-utilbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.as-utilbar__side { display: flex; align-items: center; gap: 22px; min-width: 0; }
.as-utilbar__side--end { gap: 18px; flex-shrink: 0; }
.as-utilbar__item {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--as-utilbar-h);
  font-size: 13px; font-weight: 600; color: var(--as-white);
  white-space: nowrap;
}
.as-utilbar__item svg { width: 14px; height: 14px; }
/* TASARIM ÖLÇÜMÜ (dc-ref 57 utilhours / 64 utilpanel — ikisi de color:#C9D9F0):
   burada --as-on-navy (#C7D8F2 = "lacivert üstü GÖVDE metni") kullanılıyordu →
   canlıda rgb(199,216,242) ölçüldü, tasarım rgb(201,217,240). Şeridin kendi
   token'ı zaten var (--as-on-navy-bar = #C9D9F0, §1) ve `.as-utilbar`'ın taban
   `color`'ı da odur; `--soft` gereksiz yere ondan sapıyordu. */
.as-utilbar__item--soft { font-weight: 500; color: var(--as-on-navy-bar); }
/* Eğitim Paneli bağlantısı tasarımda 600 (dc-ref 64: font-weight:600), çalışma
   saati ise 500 (dc-ref 57) — ikisi de `--soft` sınıfını taşıdığı için ağırlık
   burada ayrışır. (0,1,0) ama kaynakta `--soft`tan SONRA → kazanır. */
.as-utilbar__panel { font-weight: 600; }
a.as-utilbar__item:hover { color: var(--as-red-soft); }
a.as-utilbar__item--soft:hover { color: var(--as-white); }
.as-utilbar__wa svg { width: 13px; height: 13px; }

/* WhatsApp işaret pucku — koyu zeminde marka simgesini taşıyan yuvarlak.
   Zemin --as-wa (AA'yı geçen koyu yeşil), simge beyaz. Parlak #25D366 YOK. */
.as-wa-mark {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-wa);
  color: var(--as-white);
}
.as-wa-mark svg { width: 13px; height: 13px; fill: currentColor; }
.as-wa-mark--sm { width: 20px; height: 20px; }
.as-wa-mark--sm svg { width: 12px; height: 12px; }

/* 5.2 Header (86px → sticky 68px) ----------------------------------------
   LAYOUT SHIFT YOK: header'ın AKIŞ yüksekliği hep 86px kalır; küçülme
   `transform: translateY(-18px)` ile yapılır (transform akışı etkilemez ve
   izinli animasyon özelliğidir). Kutunun üst 18px'i viewport'un üstüne kayar,
   geriye 68px'lik görünür bant kalır; iç bar aynı anda 68px'e inip 18px alt
   hizaya geçtiği için içerik tam ortada durur. Yükseklik animasyonu KULLANILMAZ
   → sticky'ye geçişte sayfa içeriği ZIPLAMAZ. */
.as-hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--as-hdr-h);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border-bottom: 1px solid var(--as-band);
  transition: transform var(--as-t-mid) var(--as-ease),
              padding-top var(--as-t-mid) var(--as-ease),
              box-shadow var(--as-t-mid) var(--as-ease),
              border-color var(--as-t-mid) var(--as-ease),
              background-color var(--as-t-mid) var(--as-ease);
}
/* İçeriği alta hizalayan 18px'lik pay, iç bar'ın `margin-top`'u DEĞİL header'ın
   `padding-top`'u olmalı: `.as-hdr`'nin üst kenarında border/padding olmadığı için
   çocuğun üst margin'i DIŞARI collapse ediyordu → Elementor header kabı 86px yerine
   104px oluyor, hero 18px aşağı zıplıyor, sticky'de görünen beyaz bant 68 yerine
   86px kalıyordu (ÖLÇÜM: .elementor-location-header 86→104, hero docY 86→104,
   body.scrollHeight 6808→6826). Padding collapse ETMEZ; kap 86'da sabit kalır. */
.as-hdr.is-stuck {
  transform: translateY(calc(-1 * (var(--as-hdr-h) - var(--as-hdr-h-sm))));
  padding-top: calc(var(--as-hdr-h) - var(--as-hdr-h-sm));
  background: rgba(255, 255, 255, .94);
  border-color: var(--as-line-2);
  box-shadow: var(--as-shadow-soft);
}

/* TELAFİ GERİ ALINDI — §8.8b'deki Elementor kap düzeltmesi (`--content-width:100%`)
   bar'ın gerçek sınırını serbest bıraktı. Öncesinde kap 1140px'e kilitliydi ve
   bar 1320px'e genişletilerek taşma "telafi" edilmişti (ölçüm: computed
   max-width 1320 ama gerçek genişlik 1140, CTA kırpık). Kap düzeldiği için
   tasarımın kendi ölçüsüne dönülüyor: max-width 1240px (= --as-container),
   gap 28px (prototipte ölçüldü: maxW 1240px, gap 28px, padding-inline 32px). */
.as-hdr__bar {
  height: 100%; display: flex; align-items: center; gap: 28px;
  transition: height var(--as-t-mid) var(--as-ease);
  max-width: var(--as-container);
}
.as-hdr.is-stuck .as-hdr__bar {
  height: var(--as-hdr-h-sm);
}

.as-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.as-logo img {
  height: var(--as-logo-h); width: auto; display: block;
  transition: height var(--as-t-fast) var(--as-ease);
}
.as-hdr.is-stuck .as-logo img { height: var(--as-logo-h-sm); }
.as-logo__wordmark {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--as-navy); line-height: 1.1; white-space: nowrap;
}
.as-hdr__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Header telefon butonu ("Hemen Ara") */
.as-hdr__call {
  height: var(--as-btn-h-sm);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--as-line-2); border-radius: var(--as-r-btn);
  background: var(--as-white);
  font-size: 14.5px; font-weight: 700; color: var(--as-navy-2);
  white-space: nowrap;
  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);
}
.as-hdr__call:hover, .as-hdr__call:focus-visible { background: var(--as-tint-3); border-color: var(--as-blue-ring); color: var(--as-navy-2); }
.as-hdr__call svg { width: 17px; height: 17px; }
/* Header birincil CTA ("Bilgi Al") — 46px, tasarımdaki ölçü.
   RADIUS: header CTA'sı tasarımda 12px'tir (taban `.as-btn--primary` 14px'e
   çekildiği için burada AÇIKÇA geri veriliyor — prototip ölçümü r=12px h=46).
   GÖLGE: `0 8px 22px rgba(217,58,41,.24)` (ölçüldü). `.asc-app` öneki ŞART:
   `.elementor a{box-shadow:none}` (0,1,1) — Elementor global header'ın içindeki
   CTA bir <a> ve bu kural asc.css'ten SONRA yükleniyor; (0,2,0) onu yener. */
.as-hdr__cta { height: var(--as-btn-h-sm); padding: 0 20px; font-size: 14.5px; }
.asc-app .as-hdr__cta { border-radius: var(--as-r-btn); box-shadow: var(--as-shadow-cta-hdr); }
.asc-app .as-hdr__cta:hover,
.asc-app .as-hdr__cta:focus-visible { box-shadow: var(--as-shadow-cta-hdr); }

/* 5.3 Masaüstü menü ------------------------------------------------------- */
.as-nav { display: flex; align-items: center; margin-left: 10px; white-space: nowrap; }
.as-nav__list { display: flex; align-items: center; }
.as-nav__item { position: relative; }
/* ÖLÇÜ: tasarımda 14.5px / margin 0 9px (prototip: fs 14.5px, marginLeft 9px).
   15px / 0 8px idi — o da §8.8b öncesi dar kapta taşmayı önlemek için yapılmış
   bir telafiydi; kap düzeldiği için tasarım ölçüsüne dönüldü.
   AKTİF GÖSTERGE: tasarım alt kenarlık DEĞİL `text-decoration` kullanır —
   prototipte TÜM nav linkleri `underline / 2px / offset 9px`, rengi pasifken
   şeffaf (rgba(217,58,41,0)), aktifken #D93A29; borderBottomWidth 0px.
   Bizde border-bottom vardı ve aktif renk #155EEF idi (tasarım #071D49). */
.as-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 2px; margin: 0 9px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--as-ink-3);
  border-bottom: 0;
  transition: color var(--as-t-fast) var(--as-ease),
              text-decoration-color var(--as-t-mid) var(--as-ease);
}
/* THEME ARMOR — `.elementor a{text-decoration:none}` (0,1,1) Elementor global
   header'da yüklendiği ve asc.css'ten SONRA geldiği için düz `.as-nav__link`
   (0,1,0) alt çizgiyi HİÇ basamıyordu (ölçüldü: textDecorationLine=none).
   `.asc-app` öneki = (0,2,0) → temayı özgüllükle yener. */
.asc-app .as-nav__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
.asc-app .as-nav__link:hover { color: var(--as-navy); text-decoration-color: var(--as-red); }
/* (0,3,0) — aktif öğe hem `.elementor a`'yı hem yukarıdaki (0,2,0) kuralı yener. */
.asc-app .as-nav__link.is-active {
  color: var(--as-navy);
  text-decoration-color: var(--as-red);
}
.as-nav__caret svg { width: 15px; height: 15px; }
.as-nav__sub {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 5;
  min-width: 226px; padding: 8px;
  background: var(--as-white);
  border: 1px solid var(--as-line-2); border-radius: 18px;
  box-shadow: var(--as-shadow-card);
  display: none;
}
.as-nav__item--has-sub:hover .as-nav__sub,
.as-nav__item--has-sub:focus-within .as-nav__sub,
.as-nav__item--has-sub.is-open .as-nav__sub { display: block; animation: as-rise-sm .24s var(--as-ease) both; }
.as-nav__sublink {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap;
}
.as-nav__sublink:hover, .as-nav__sublink.is-active { background: var(--as-tint); color: var(--as-blue); }

/* 5.4 Burger -------------------------------------------------------------- */
.as-burger { display: none; }

/* 5.5 Mobil çekmece (sağdan, min(360px,86vw)) ----------------------------- */
.as-drawer { position: fixed; inset: 0; z-index: 95; display: block; }
.as-drawer[hidden] { display: none; }
.as-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(7, 29, 73, .5);
  animation: as-overlay .22s ease both;
}
.as-drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(360px, 86vw);
  padding: 24px;
  background: var(--as-white);
  box-shadow: var(--as-shadow-dark);
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: as-drawer .34s var(--as-ease) both;
}
.as-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.as-drawer__top img { height: var(--as-logo-h-sm); width: auto; display: block; }
/* Menü kabı DİKEY liste. Kap <nav> sınıfsız olduğu için çocuk seçicisiyle hedeflenir.
   ÖLÇÜM (önce, 375×640): linkler `display:inline` → "Ana Sayfa | Eğitimlerimiz" satır
   içi sarıyor, kutular çakışıyor (nav top 88, ilk link top 79), aktif linkin
   `inset 3px 0` kırmızı çubuğu metnin üstüne biniyordu. */
.as-drawer__panel > nav { display: flex; flex-direction: column; }
.as-drawer__link {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px;                       /* v2: dokunma hedefi (tasarım birebir) */
  padding: 12px; border-radius: var(--as-r-btn);
  font-size: 16px; font-weight: 700; color: var(--as-navy);
  box-shadow: inset 3px 0 0 transparent;
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-mid) var(--as-ease),
              padding-left var(--as-t-mid) var(--as-ease);
}
.as-drawer__link:hover,
.as-drawer__link.is-active {
  background: var(--as-tint); color: var(--as-blue);
  box-shadow: inset 3px 0 0 var(--as-red);
  padding-left: 16px;
}
.as-drawer__sub { display: flex; flex-direction: column; padding-left: 10px; }
.as-drawer__sublink { padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--as-ink-3); }
.as-drawer__sublink:hover, .as-drawer__sublink.is-active { background: var(--as-tint); color: var(--as-blue); }
/* Çekmece CTA'ları — v2: Bilgi Al (kırmızı) + WhatsApp (yeşil). "Eğitim Paneli"
   artık CTA değil, menü dizisinin 6. öğesi (harici bağlantı). */
.as-drawer__cta { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.as-drawer__cta .as-btn { min-height: 52px; height: auto; width: 100%; font-size: 15.5px; border-radius: var(--as-r-btn-lg); }
/* Alt iletişim bloğu — panelin dibindeki ~200px boşluğu doldurur (mobil QA).
   `margin-top:auto` panel flex kabının ALTINA yapıştırır: menü kısaysa blok
   dibe oturur, menü uzayıp panel kaydırılabilir hale gelirse akışta kalır. */
.as-drawer__contact {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--as-line);
}
.as-drawer__tel {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--as-tap);
  padding: 10px 12px;
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-btn);
  background: var(--as-tint-2);
  transition: background-color var(--as-t-fast) var(--as-ease), border-color var(--as-t-fast) var(--as-ease);
}
.as-drawer__tel:hover, .as-drawer__tel:focus-visible { background: var(--as-tint-3); border-color: var(--as-blue-ring); }
.as-drawer__tel-ico {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--as-r-pill); background: var(--as-white);
  display: grid; place-items: center; color: var(--as-blue);
}
.as-drawer__tel-ico svg { width: 17px; height: 17px; }
.as-drawer__tel-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.as-drawer__tel-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--as-muted); }
.as-drawer__tel-value  { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--as-navy); }
.as-drawer__hours { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--as-muted); }
/* Harici menü öğesinin ok işareti (drawer + nav ortak). */
.as-nav__ext, .as-drawer__ext { flex: none; opacity: .65; }
.as-nav__ext svg, .as-drawer__ext svg { width: 13px; height: 13px; }

/* 5.6 Arama modalı -------------------------------------------------------- */
.as-searchmodal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 96px 24px;
  background: rgba(7, 29, 73, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: as-overlay .22s ease both;
  overflow-y: auto;
}
.as-searchmodal[hidden] { display: none; }
.as-searchmodal__panel {
  width: 100%; max-width: 720px;
  padding: 20px;
  background: var(--as-white);
  border-radius: var(--as-r-media);
  box-shadow: var(--as-shadow-dark);
  animation: as-pop .34s var(--as-ease) both;
}
.as-searchmodal__form { display: block; }
.as-searchmodal__bar {
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 18px;
  border-radius: 16px;
  background: var(--as-tint);
  border: 1px solid var(--as-line-2);
}
.as-searchmodal__bar > svg { width: 22px; height: 22px; color: var(--as-blue); }
.as-searchmodal__input {
  flex: 1; min-width: 0;
  height: 100%; border: 0; background: transparent; padding: 0;
  font-size: 17px; font-weight: 600; color: var(--as-navy);
}
.as-searchmodal__input:focus { outline: none; }
.as-searchmodal__input::placeholder { color: var(--as-muted-2); opacity: 1; }
/* line-height AÇIK yazıldı: ÖLÇÜM'de (1440, tüm sayfalar) `.asc-app` altında açık
   satır aralığı olmayıp 60 karakterden uzun metin taşıyan TEK kutu buydu
   (79 karakter, 13.5px → computed line-height "normal" ≈ 15.5px, iki satıra
   düştüğünde sıkışık görünüyordu). Gövde 16px'e çekilirken miras kesildiği için
   bileşene kendi değeri verildi. */
.as-searchmodal__hint { margin-top: 16px; padding: 0 6px 6px; font-size: 13.5px; line-height: 1.5; color: var(--as-muted); }
.as-searchmodal__go { flex: none; }

/* 5.7 Footer — v2: LACİVERT KAPANIŞ CTA BANDI + 5 kolon gövde -------------
   Bant footer'ın EN ÜSTÜNDE, tam genişlikte laciverttir (00-CURRENT-STATE §2.8);
   iki CTA taşır: "Bilgi Al" (kırmızı) + "WhatsApp" (yeşil). ≥860px yatay,
   altında dikey. Ana sayfaya değil, footer'a aittir → her sayfada görünür. */
.as-footcta { background: var(--as-navy); }
.as-footcta__in {
  padding-block: 34px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  gap: 22px;
}
.as-footcta__text { min-width: 0; }
.as-footcta__title {
  display: block;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.25;
  color: var(--as-white);
  text-wrap: balance;
}
.as-footcta__sub {
  display: block; margin-top: 7px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--as-on-navy-2);
  text-wrap: pretty;
}
.as-footcta__actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; flex-shrink: 0; }
.as-footcta__actions .as-btn { height: 50px; padding: 0 22px; font-size: 15px; border-radius: 13px; }
/* TASARIM ÖLÇÜMÜ (dc-ref 1752, kapanış CTA'sının WhatsApp butonu):
   `padding:0 20px` ve KENARLIK YOK — yanındaki "Bilgi Al" (dc-ref 1751) ise
   `padding:0 22px`. Canlıda 22px dolgu + §8.1 armor'unun geri verdiği
   `1px solid var(--as-wa-border)` ölçüldü → buton 148.22px basıyordu (tasarım
   142px) ve aksiyon grubu 6px sola kayıyordu.
   --as-wa-border (#0B6E33) AÇIK zeminde dolu yeşili ayırmak için gerekli; bu
   bandın zemini LACİVERT olduğu için orada yalnızca butonu şişiriyor.
   (0,3,0) — §8.1'deki `.asc-app .as-btn--wa` (0,2,0) armor'unu yener,
   `!important` gerekmedi. Yükseklik 50px + border-box, kenarlık kalkınca
   yükseklik DEĞİŞMEZ. */
.asc-app .as-footcta__actions .as-btn--wa { padding: 0 20px; border: 0; }
@media (min-width: 860px) {
  .as-footcta__in { flex-direction: row; align-items: center; gap: 26px; }
}

/* Dolgu footer'a DEĞİL ızgaraya verilir — lacivert kapanış bandı footer'ın en
   üstünde tam genişlikte durur, üstünde beyaz boşluk oluşmaz. */
.as-footer { background: var(--as-tint-2); border-top: 1px solid var(--as-line); padding-top: 0; }
.as-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 64px; }
.as-footer__logo img { height: 52px; width: auto; display: block; }
.as-footer__blurb { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--as-muted); max-width: 310px; }
.as-footer__social { margin-top: 22px; display: flex; gap: 9px; }
.as-footer__soc {
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--as-line-2);
  display: grid; place-items: center; 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), transform var(--as-t-mid) var(--as-ease);
}
.as-footer__soc svg { width: 18px; height: 18px; }
.as-footer__soc:hover { background: var(--as-tint-3); border-color: var(--as-blue-ring); color: var(--as-blue); transform: translateY(-2px); }

.as-footer__pay {
  margin-top: 22px;
  display: flex; align-items: center; gap: 13px;
  max-width: 310px; padding: 14px 16px;
  border: 1px solid var(--as-line-2); border-radius: var(--as-r-btn-lg);
  background: var(--as-white); box-shadow: var(--as-shadow-rest);
  transition: border-color var(--as-t-fast) var(--as-ease), background-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-mid) var(--as-ease), transform var(--as-t-mid) var(--as-ease);
}
.as-footer__pay:hover {
  border-color: var(--as-blue-ring); background: var(--as-tint-2);
  box-shadow: 0 12px 30px rgba(7, 29, 73, .10); transform: translateY(-2px);
}
.as-footer__pay-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: var(--as-tint-3);
  display: grid; place-items: center; color: var(--as-blue);
}
.as-footer__pay-ico svg { width: 20px; height: 20px; }
.as-footer__pay-txt { min-width: 0; }
.as-footer__pay-title { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--as-navy); }
.as-footer__pay-sub   { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--as-muted); }
.as-footer__pay-arrow { margin-left: auto; flex: none; color: var(--as-muted-2); }
.as-footer__pay-arrow svg { width: 16px; height: 16px; }

.as-footer__h { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--as-navy); }
.as-footer__list { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
/* Dokunma hedefi: footer bağlantıları satır içi DEĞİL, min 40px'lik padded blok
   (05-DESIGN-TOKENS.md §Dokunma hedefi). */
.as-footer__list a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding-block: 2px;
  font-size: 14.5px; font-weight: 500; color: var(--as-ink-2);
  transition: color var(--as-t-fast) var(--as-ease), transform var(--as-t-mid) var(--as-ease);
}
.as-footer__list a:hover { color: var(--as-blue); transform: translateX(3px); }
.as-footer__list a svg { width: 13px; height: 13px; }

.as-footer__contact { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.as-footer__contact li { display: flex; gap: 11px; align-items: center; min-height: 40px; }
.as-footer__contact li > svg,
.as-footer__contact li > .as-ico { flex: none; color: var(--as-blue); }
.as-footer__contact li > svg { width: 17px; height: 17px; }
.as-footer__contact a { font-size: 14px; font-weight: 600; color: var(--as-ink-2); display: flex; gap: 11px; align-items: center; }
.as-footer__contact a:hover { color: var(--as-blue); }
.as-footer__contact .as-footer__phone { font-size: 14.5px; font-weight: 700; color: var(--as-navy); }
.as-footer__hours { align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--as-muted); }
.as-footer__hours > svg { margin-top: 2px; color: var(--as-muted-2); }

.as-footer__bar { margin-top: 52px; border-top: 1px solid var(--as-line-2); background: var(--as-tint); }
.as-footer__bar-in {
  padding-block: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.as-footer__copy { font-size: 13.5px; color: var(--as-muted); }
.as-footer__legal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.as-footer__legal a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 6px 10px; border-radius: var(--as-r-chip);
  font-size: 13.5px; color: var(--as-ink-3);
  transition: background-color var(--as-t-fast) var(--as-ease), color var(--as-t-fast) var(--as-ease);
}
.as-footer__legal a:hover { background: var(--as-white); color: var(--as-blue); }

/* 5.8 Yüzen CTA rayı ------------------------------------------------------ */
.as-fabrail {
  position: fixed; right: 24px; bottom: var(--as-fab-b); z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
}
.as-fabrail__tel {
  height: 54px;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 0 20px 0 15px;
  border-radius: var(--as-r-pill);
  background: var(--as-white);
  border: 1px solid var(--as-line-2);
  box-shadow: 0 10px 28px rgba(7, 29, 73, .14);
  color: var(--as-navy-2);
  transition: background-color var(--as-t-fast) var(--as-ease), border-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-mid) var(--as-ease), transform var(--as-t-mid) var(--as-ease);
}
.as-fabrail__tel:hover, .as-fabrail__tel:focus-visible {
  background: var(--as-tint-3); border-color: var(--as-blue-ring); color: var(--as-navy-2);
  transform: translateY(-2px); box-shadow: 0 16px 38px rgba(7, 29, 73, .2);
}
.as-fabrail__ico {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--as-r-pill); background: var(--as-tint-3);
  display: grid; place-items: center; color: var(--as-blue);
}
.as-fabrail__ico svg { width: 16px; height: 16px; }
.as-fabrail__txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.as-fabrail__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--as-muted); }
.as-fabrail__value  { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--as-navy); }
.as-fabrail__wa {
  height: 58px;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 0 22px 0 16px;
  border-radius: var(--as-r-pill);
  background: var(--as-wa); color: var(--as-white);
  box-shadow: var(--as-shadow-wa);
  transition: background-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-mid) var(--as-ease), transform var(--as-t-mid) var(--as-ease);
}
.as-fabrail__wa:hover, .as-fabrail__wa:focus-visible {
  background: var(--as-wa-hover); color: var(--as-white);
  transform: translateY(-2px); box-shadow: var(--as-shadow-wa-lg);
}
.as-fabrail__wa svg { width: 24px; height: 24px; }
/* Tasarımda kicker de SAF BEYAZ (ölçüldü); .82 alfa yoktu. */
.as-fabrail__wa .as-fabrail__kicker { color: var(--as-white); }
.as-fabrail__wa .as-fabrail__value  { color: var(--as-white); }

/* THEME ARMOR — `.elementor a{box-shadow:none}` (0,1,1), frontend.min.css,
   asc.css'ten SONRA yükleniyor. Yüzen rayın iki düğmesi de <a> olduğu için
   yukarıdaki (0,1,0) gölgeleri SİLİNİYORDU.
   ÖLÇÜM (canlı, Elementor footer kabına enjekte edilen gerçek markup ile):
   .as-fabrail__tel box-shadow=none · .as-fabrail__wa box-shadow=none.
   TASARIM: tel `0 10px 28px rgba(7,29,73,.14)` · wa `0 12px 32px rgba(15,123,60,.34)`.
   `.asc-app` öneki = (0,2,0) → temayı yener. */
.asc-app .as-fabrail__tel { box-shadow: var(--as-shadow-fab-tel); }
.asc-app .as-fabrail__tel:hover,
.asc-app .as-fabrail__tel:focus-visible { box-shadow: 0 16px 38px rgba(7, 29, 73, .2); }
.asc-app .as-fabrail__wa { box-shadow: var(--as-shadow-fab-wa); }
.asc-app .as-fabrail__wa:hover,
.asc-app .as-fabrail__wa:focus-visible { box-shadow: var(--as-shadow-wa-lg); }

/* 5.9 Mobil sticky alt çubuk (sayfa ajanları kullanır; <820px) ------------- */
.as-mobilebar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--as-line-2);
  box-shadow: 0 -6px 24px rgba(7, 29, 73, .08);
}
.as-mobilebar__btn {
  height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 13px;
  font-size: 15px; font-weight: 700;
  transition: background-color var(--as-t-fast) var(--as-ease), color var(--as-t-fast) var(--as-ease), border-color var(--as-t-fast) var(--as-ease);
}
.as-mobilebar__btn--primary { background: var(--as-red); color: var(--as-white); }
.as-mobilebar__btn--primary:hover { background: var(--as-red-hover); color: var(--as-white); }
/* TASARIM: mobil çubuğun WhatsApp düğmesi DOLU yeşildir — bg #0F7B3C,
   kenarlık 1px #0B6E33, metin #FFFFFF. Burada beyaz zemin + #DCE6F3 kenarlık +
   #0B2A5B metin vardı (ikincil buton görünümü) → kırmızı CTA'nın yanında ikinci
   dönüşüm yolu görsel olarak kayboluyordu. */
.as-mobilebar__btn--wa { border: 1px solid var(--as-wa-border); background: var(--as-wa); color: var(--as-white); }
.as-mobilebar__btn--wa:hover { background: var(--as-wa-hover); border-color: var(--as-wa-hover); color: var(--as-white); }
.as-mobilebar__btn svg { width: 18px; height: 18px; }

/* Ana içerik kabı */
.as-main { display: block; }
.as-main:focus { outline: none; }

/* -------------------------------------------------------------------------
   6) RESPONSIVE — 05-DESIGN-TOKENS.md (v2) §Breakpoint tablosunun CSS karşılığı.
      Prototipte tüm kırılım davranışı JS `applyResponsive()` içindeydi; WordPress
      tarafında SAF CSS media query'dir (JS kapalıyken de doğru).

      ≥1240  header'daki ikinci CTA (telefon "Hemen Ara" düğmesi)
      ≥1180  hero kartı görünür · eğitim detay iki kolon · form sticky   → sayfa CSS'i
      ≥1100  masaüstü nav eşiği (1080'den YÜKSELTİLDİ — aşağıdaki ölçüm gerekçesi)
      ≥1060  hedef kartları 4 kolon   (.as-grid--goals)
      ≥1000  arşiv sol paneli · istatistik 4 kolon (.as-grid--stats) · ilgili 3 kolon
      ≥900   hero yatay · mobil sticky bar gizli
      ≥860   footer kapanış CTA bandı yatay (.as-footcta, §5.7)
      ≥820   üst yardımcı şerit görünür
      ≥780   hero arama üç kolon        → sayfa CSS'i
      ≥700   hedef kartları 2 kolon     (.as-grid--goals)
      ≥680   ilgili eğitimler 2 kolon   (.as-grid--related)
      ≥640   istatistik 2 kolon         (.as-grid--stats)
      <1180  eğitim detay 1:1 görseli 236px (≥600) / 168px → sayfa CSS'i
   ------------------------------------------------------------------------- */

/* ≥1240 — header'da ikinci CTA ("Hemen Ara" telefon butonu).
   NOT: 05-DESIGN-TOKENS.md bu satırı "Eğitim Paneli düğmesi" diye adlandırır;
   tasarım dosyasındaki ilgili öğe (`data-as="panel"`) GERÇEKTE `tel:` linkidir
   ve "Hemen Ara" yazar. Etiket değil, markup esas alındı. */
.as-hdr__call { display: none; }
@media (min-width: 1240px) { .as-hdr__call { display: inline-flex; } }

/* ≥1100 — masaüstü nav; altında hamburger + drawer. Footer 5 kolon (≥1080,
   header'dan BAĞIMSIZ: 5 kolonluk footer 1080'de taşmıyor, ölçüldü). */
.as-nav { display: none; }
@media (min-width: 1100px) {
  .as-nav { display: flex; }
}
@media (min-width: 1080px) {
  /* Kolon sayısı dinamik (kategori/iletişim kolonu veri yoksa basılmaz) — bkz. footer.php */
  .as-footer__grid--5 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; }
  .as-footer__grid--4 { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; }
  .as-footer__grid--3 { grid-template-columns: 1.5fr 1fr 1.15fr; }
}
/* Burger kırılımı 1080 → 1100 (yukarıdaki ⚠️ PAY SINIRLI uyarısı GERÇEKLEŞTİ).
   Eski ölçüm 6 öğelik menüye aitti (nav 552px). Menüye tasarımın 7. sekmesi
   "Eğitim Paneli" eklendi; canlıda (ana sayfa, .as-hdr__bar genişliği tek tek
   zorlanarak, .as-hdr__bar>* için flex-shrink:0 ile gerçek ihtiyaç ölçülerek):
     logo 144.7 + nav 681.1 (7 öğe; +19px dış-bağlantı ikonu) + aksiyonlar 166.4
     + 2×28 boşluk + .as-nav'ın 10px sol boşluğu = son öğenin sağ kenarı 1090.2px
   Yani bar 1090.2px'ten darsa "Bilgi Al" GERÇEKTEN kırpılır; `overflow-x:clip`
   bunu sessizce gizliyordu. Ölçülen taşma: bar 1080 → 10.2px, bar 1090 → 0px.
   1100 eşiği kırpılmayı bitirir ve 9.8px pay bırakır (ölçüldü).
   ⚠️ KALAN (bu kırılımın çözemediği, ayrı iş): 1100–1122px arasında son öğe
   kabın 32px sağ DOLGUSUNU yiyor (1100'de 22.2px) — kırpılma yok, hizasızlık
   var. ≥1240'ta "Hemen Ara" da açıldığı için aynı hizasızlık 28.3px'e çıkar ve
   kap 1240px'e sabit olduğundan genişlikle ÇÖZÜLEMEZ; tasarımda bu bütçe
   tutuyor çünkü dc-ref'te logo 132.9 (canlı 144.7) ve nav 662.1 (canlı 681.1).
   Yani kalan ~40px logo genişliği + nav dış-bağlantı ikonu işidir. */
@media (max-width: 1099.98px) {
  .as-burger { display: grid; }
}

/* ≥1000 — üst şeritte çalışma saati */
.as-utilbar__hours { display: none; }
@media (min-width: 1000px) { .as-utilbar__hours { display: inline-flex; } }

/* ≥940 — üst şeritte Eğitim Paneli */
.as-utilbar__panel { display: none; }
@media (min-width: 940px) { .as-utilbar__panel { display: inline-flex; } }

/* ≥820 — üst yardımcı şerit görünür */
.as-utilbar { display: none; }
@media (min-width: 820px) { .as-utilbar { display: block; } }

/* ≥720 — footer 2 kolon (altında tek kolon) */
@media (min-width: 720px) and (max-width: 1079.98px) {
  .as-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥900 — yüzen ray dip payı §8.20'ye TAŞINDI: burada koşulsuzdu ve mobil çubuğun
   basılmadığı sayfalarda rayı 60px havada bırakıyordu. Kural orada `:has()` ile
   çubuğa bağlı; buraya yeniden yazılmamalı (ikisi çakışırsa sonraki kazanır). */

/* ≥900 — yüzen ray etiketleri; altında yalnız ikon
   EŞİK 560 → 900: etiketli ray 768px'te 191px genişliğindeydi ve 704px'lik
   içerik kolonunun 183px'ini kalıcı olarak örtüyordu (ölçüldü: ray x=553–744,
   içerik x=32–736). Örtülenler arasında eğitim kartının başlığı ve "E-Devlet'te
   görünür" rozeti de vardı. Tabletde ray ikon-only daireye döner (~56px) →
   örtme 191 → 56px. Etiketler yalnızca ≥900'de, yani rayın içerikle
   çakışmadığı genişliklerde gösterilir. */
@media (max-width: 899.98px) {
  .as-fabrail__txt { display: none; }
  .as-fabrail__tel { padding: 0 12px; }
  .as-fabrail__wa  { padding: 0 16px; }
}

/* FOOTER ALT BANDI — ray, yasal bağlantıların ÜSTÜNE oturuyordu: 390px'te
   `elementFromPoint("İptal ve İade" merkezi)` → `.as-fabrail`, yani bağlantı
   tıklanamıyordu. Bant görünür olduğunda ray çekilir (asc.js `initFabRail`).
   `visibility` de kapatılır: yalnız `opacity:0` isabet testini geçirmez. */
.as-fabrail { transition: opacity var(--as-t-mid) var(--as-ease), transform var(--as-t-mid) var(--as-ease), visibility var(--as-t-mid) var(--as-ease); }
.as-fabrail.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

/* ≥420 — logo yazı markası */
.as-logo__wordmark { display: none; }
@media (min-width: 420px) { .as-logo__wordmark { display: block; } }

/* Header küçük ekran ince ayarı
   ⚠️ TOKEN EZMELERİ KALDIRILDI (74/64 · logo 48/42): tasarımda header yüksekliği
   ve logo boyu GENİŞLİĞE GÖRE DEĞİŞMİYOR — her kırılımda 86px → sticky 68px,
   logo 56px → sticky 44px (prototipte sticky durumda ölçüldü: header h=68,
   logo h=44). Yalnızca yatay sıkışma ayarları (bar boşluğu + CTA dolgusu)
   kalıyor; onlar dar ekranda metnin kırpılmasını önler, dikey ritmi bozmaz. */
@media (max-width: 899.98px) {
  .as-hdr__bar { gap: 14px; }
  .as-hdr__cta { padding: 0 15px; font-size: 14px; }
}
@media (max-width: 399.98px) {
  /* Çok dar ekran: CTA daralır ama METİN KORUNUR (ikon-only buton yapılmaz). */
  .as-hdr__cta { padding: 0 13px; font-size: 13.5px; gap: 6px; }
  .as-hdr__cta svg { display: none; }
}

/* Bölüm ritmi mobilde sıkışır */
@media (max-width: 899.98px) {
  .asc-app { --as-section-y: 64px; --as-section-y-sm: 52px; --as-section-y-lg: 80px; }
}

/* Arama modalı mobil */
@media (max-width: 599.98px) {
  .as-searchmodal { padding: 72px 16px 24px; }
  .as-searchmodal__panel { padding: 14px; }
  .as-searchmodal__bar { height: 54px; padding: 0 14px; gap: 10px; }
  .as-searchmodal__input { font-size: 16px; }
}

/* Footer mobil */
@media (max-width: 719.98px) {
  .as-footer__grid { padding-top: 52px; }
  .as-footer__bar-in { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   7) MOTION — tek easing, yalnızca transform + opacity
   ------------------------------------------------------------------------- */
@keyframes as-rise      { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes as-rise-sm   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes as-slide-left  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes as-slide-right { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes as-zoom      { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes as-drawer    { from { transform: translateX(100%); } to { transform: none; } }
@keyframes as-overlay   { from { opacity: 0; } to { opacity: 1; } }
@keyframes as-pop       { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes as-pulse     { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes as-spin      { to { transform: rotate(360deg); } }
@keyframes as-fade-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes as-sweep     { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
/* Cam parlaması — `as-sweep` ile aynı yol, ama eğimi (skewX) koruyor.
   Ayrı keyframe: `as-sweep` transform'a eğim yazmadığı için ilk karede eğim
   sıfırlanır ve parlama dikdörtgene döner. */
@keyframes as-shine     { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }

/* Bilgi talebi formunun "nefes alan" halkası — dikkat işareti, dekor değil.
   Ziyaretçi yazmaya başlayınca JS söndürür; reduced-motion'da hiç çalışmaz. */
@keyframes as-leadspin  { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
/* Gradyan kenarlık halkası (eğitim detay form kartı). `as-leadspin`den AYRI:
   o buton çevresinde nabız atan dikkat işareti, bu ise kartın kenarında dönen
   konik gradyan. `translate` transform'un içinde kalmalı — animasyon aynı
   özelliği yazdığı için dışarıda bırakılırsa merkezleme kaybolur. */
@keyframes as-ringspin  { to { transform: translate(-50%, -50%) rotate(1turn); } }

/* Doluluk çubuğu — İKİ EŞ keyframe. Eğitim değişince ad `as-quota` ↔ `as-quota-b`
   arasında takas edilir, böylece tarayıcı animasyonu YENİDEN başlatır.
   ⚠️ `animation-fill-mode` YOK: animasyon hiç çalışmazsa (JS/motion kapalı)
   çubuk DOLU görünür — veri kaybolmaz (00-CURRENT-STATE §2.2). */
@keyframes as-quota   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes as-quota-b { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scroll reveal — İÇERİK BAŞLANGIÇTA GÖRÜNÜR.
   JS yalnızca ekran altındaki öğelere .as-armed ekleyip gizler; script
   yüklenmezse hiçbir bölüm kaybolmaz (ters kurgu KULLANILMAZ). */
.asc-app [data-reveal] { opacity: 1; }
.asc-app [data-reveal].as-armed { opacity: 0; }
/* ⚠️ DOLGU KİPİ `both` DEĞİL `backwards` — ÖLÇÜLDÜ (/egitimler/, 1512px):
   `both` = forwards + backwards. `forwards`, bitiş kare karesini (`to{transform:none}`)
   animasyon bittikten SONRA da uygulamaya devam eder ve CSS kaskadında animasyonlar
   normal bildirimlerin ÜSTÜNDEDİR → `.as-card--hover:hover{transform:translateY(-4px)}`
   hiçbir zaman uygulanamıyordu. Ölçüm: görünüre girmiş bir eğitim kartına gerçek fare
   ile hover → transform = matrix(1,0,0,1,0,0) (translateY 0), beklenen -4px.
   box-shadow ve border-color doğru geliyordu (onları keyframe tutmuyor), yalnız
   YÜKSELME kayıptı — yani sorun kartın hover kuralında değil, bu satırdaydı.
   `backwards` ile: gecikme boyunca başlangıç karesi uygulanır (giriş animasyonu
   birebir aynı), animasyon bitince öğe normal kaskada döner → hover yükselmesi
   ve `transition` yeniden çalışır. Opaklık `.asc-app [data-reveal]{opacity:1}`
   tabanından geldiği için `forwards` olmadan da 1 kalır (.as-armed'i JS kaldırıyor:
   assets/js/asc.js initReveal → classList.remove('as-armed')). */
.asc-app [data-reveal].is-in {
  opacity: 1;
  animation: as-rise var(--as-t-slow) var(--as-ease) backwards;
  animation-delay: var(--as-delay, 0ms);
}
.asc-app [data-reveal="sm"].is-in    { animation-name: as-rise-sm; }
.asc-app [data-reveal="left"].is-in  { animation-name: as-slide-left; }
.asc-app [data-reveal="right"].is-in { animation-name: as-slide-right; }
.asc-app [data-reveal="zoom"].is-in  { animation-name: as-zoom; }

/* Nabız halkası (WhatsApp vb.) */
.as-pulse-ring {
  position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: .4;
  animation: as-pulse 2.4s var(--as-ease) infinite;
  pointer-events: none;
}
/* Bilgi talebi formunun dikkat halkası — JS ilk tuşta söndürür ([hidden]),
   reduced-motion'da hiç basılmaz. Dekor değil, dikkat işaretidir. */
/* Dikkat halkası butonun sarmalayıcısını ölçer ve 1.35 kata ölçeklenir.
   ⚠️ ÖLÇÜM (390px): halka 405px genişliyor (x=-7 → sağ kenar 397) ve butonun
   çerçevesinden taşıyordu. Sayfa kaymıyordu (`.asc-app{overflow-x:clip}` yutuyor)
   ama dar ekranda görsel olarak yanlıştı. Sarmalayıcıya `overflow:clip` verilerek
   halka kendi kutusunda tutuluyor; animasyon ve büyüme aynı kalıyor. */
/* ⚠️ NABIZ KATMANI KALDIRILDI — yerine cam parlaması (2026-08-12, müşteri talebi).
   Eski `.as-leadspin` butonun kardeşiydi, `inset:0` + `background:currentColor` +
   `opacity:.45` ile 1.35 kata büyüyordu. Buton daha SONRA boyandığı için katman
   yalnızca butonun DIŞINA taşan kısmıyla görünüyordu: kırmızı butonun çevresinde
   kocaman soluk pembe bir dikdörtgen. Tasarımda böyle bir öğe yok.
   Tasarım kaynağında `@keyframes as-sweep` TANIMLI ama hiçbir yerde kullanılmamış
   (dc-ref) — yani parlama efekti tasarımın kendi dilinde zaten var, sadece
   bağlanmamış. Onu butonun ÜSTÜNE `::after` olarak bağlıyoruz; kardeş katman
   butonun altında kaldığı için parlama oradan görünemezdi.
   JS ilk girdide `[data-as-leadspin]`e `hidden` verir → kullanıcı yazmaya
   başlayınca dikkat işareti söner; bu davranış korunuyor (bkz. `:has()` kuralı). */
.as-leadform__cta { overflow: clip; }
.as-leadspin { display: none; }                 /* eski nabız katmanı hiç boyanmaz */

.asc-app .as-leadform__submit { overflow: clip; }
.asc-app .as-leadform__submit::after {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%; left: 0;
  width: 34%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .45) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  animation: as-shine 3.2s var(--as-ease) infinite;
  pointer-events: none;
}
/* Dikkat işareti sönünce parlama da durur: JS `hidden`i HALKAYA verir, biz de
   aynı sinyali `:has()` ile butona taşıyoruz — tek kaynak, ek JS yok. */
.asc-app .as-leadform__cta:has(.as-leadspin[hidden]) .as-leadform__submit::after { display: none; }
/* JS yokken ve hareket azaltılmışken parlama hiç çalışmaz. */
.asc-app:not(.js) .as-leadform__submit::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .asc-app .as-leadform__submit::after { display: none; }
}

/* Yükleniyor göstergesi */
.as-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: as-spin .7s linear infinite;
}
.is-loading { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .asc-app *,
  .asc-app *::before,
  .asc-app *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .asc-app [data-reveal] { opacity: 1 !important; animation: none !important; }
  .asc-app [data-reveal].as-armed { opacity: 1 !important; }
}

/* =========================================================================
   8) ELEMENTOR / HELLO-ELEMENTOR ARMOR
   Kaynak: ~/.claude/skills/wp-elementor-reskin/references/elementor-overrides.css
   ({{prefix}} → asc, wrapper .asc-app, util öneki as-).
   Elementor reset/frontend CSS'i eklenti CSS'inden SONRA yüklenir ve
   genel-eleman seçicileriyle tek-sınıflık kurallarımızı yener. Aşağısı geri alır.
   ⚠️ #CC3366, `.elementor img`, `.elementor-field-textual` EVRENSELDİR — değişmez.
   ========================================================================= */

/* 8.1 RESET PEMBESİ — `button{color:#CC3366;border:1px solid #CC3366}` (0,0,1)/(0,1,0).
   `.asc-app button` (0,1,1) onu yener; kenarlık İSTEYENLERİ (0,2,0) ile geri veririz. */
.asc-app button { color: inherit; border: 0; }

.asc-app .as-icon-btn        { border: 1px solid var(--as-line-2); color: var(--as-navy-2); background: var(--as-white); }
.asc-app .as-burger          { border: 1px solid var(--as-line-2); color: var(--as-navy-2); background: var(--as-white); }
.asc-app .as-btn--secondary  { border: 1px solid var(--as-line-2); }
.asc-app .as-btn--ghost      { border: 1px solid rgba(255, 255, 255, .34); }
.asc-app .as-btn--wa         { border: 1px solid var(--as-wa-border); }
.asc-app .as-chip            { border: 1px solid var(--as-line-2); color: var(--as-ink-2); }
.asc-app .as-chip.is-active  { border-color: var(--as-navy); color: var(--as-white); }
.asc-app .as-tabs__tab       { border: 0; color: var(--as-ink-3); }
.asc-app .as-tabs__tab.is-active { color: var(--as-navy); }
.asc-app .as-accordion__q    { border: 0; color: var(--as-navy); }
.asc-app .as-pagination button { border: 1px solid var(--as-line-2); color: var(--as-ink-2); }

/* 8.2 reset.css AYRICA hover/focus'ta PEMBE ARKA PLAN verir
   (`button:hover,[type=submit]:focus… {background-color:#CC3366}` = (0,2,0)).
   Base bileşen :hover'ı (0,2,0) olduğu için yükleme sırasıyla KAYBEDER →
   gerçek <button>'ların hover/focus zeminini (0,3,0) ile geri veriyoruz. */
.asc-app .as-icon-btn:hover, .asc-app .as-icon-btn:focus,
.asc-app .as-burger:hover,   .asc-app .as-burger:focus {
  background-color: var(--as-tint); border-color: var(--as-blue-ring); color: var(--as-blue);
}
.asc-app .as-btn--primary:hover, .asc-app .as-btn--primary:focus { background-color: var(--as-red-hover); color: var(--as-white); }
.asc-app .as-btn--secondary:hover, .asc-app .as-btn--secondary:focus { background-color: var(--as-tint-3); color: var(--as-navy-2); }
.asc-app .as-btn--light:hover, .asc-app .as-btn--light:focus { background-color: var(--as-tint-3); color: var(--as-navy); }
.asc-app .as-btn--ghost:hover, .asc-app .as-btn--ghost:focus { background-color: rgba(255, 255, 255, .1); color: var(--as-white); }
.asc-app .as-btn--wa:hover, .asc-app .as-btn--wa:focus { background-color: var(--as-wa-hover); color: var(--as-white); }
.asc-app .as-chip:hover, .asc-app .as-chip:focus { background-color: var(--as-tint-3); color: var(--as-blue); }
.asc-app .as-chip.is-active:hover, .asc-app .as-chip.is-active:focus { background-color: var(--as-navy); color: var(--as-white); }
.asc-app .as-tabs__tab:hover, .asc-app .as-tabs__tab:focus { background-color: transparent; color: var(--as-navy); }
.asc-app .as-tabs__tab.is-active:hover, .asc-app .as-tabs__tab.is-active:focus { background-color: var(--as-white); }
.asc-app .as-accordion__q:hover, .asc-app .as-accordion__q:focus { background-color: transparent; color: var(--as-blue); }
.asc-app .as-searchmodal__close:hover, .asc-app .as-searchmodal__close:focus { background-color: var(--as-tint-3); color: var(--as-navy-2); }
.asc-app .as-drawer__close:hover, .asc-app .as-drawer__close:focus { background-color: var(--as-tint); color: var(--as-blue); }
.asc-app .as-empty button:hover, .asc-app .as-empty button:focus { background-color: var(--as-error); color: var(--as-white); }

/* 8.3 LOGO DEV OLUYOR — `.elementor img{height:auto}` (0,1,1) height'ı eziyor.
   (0,2,1) ile geri al. `.elementor img` seçicisi EVRENSELDİR. */
.asc-app .as-logo img          { height: var(--as-logo-h); width: auto; display: block; }
.asc-app .as-hdr.is-stuck .as-logo img { height: var(--as-logo-h-sm); }
.asc-app .as-footer__logo img  { height: 52px; width: auto; display: block; }
.asc-app .as-drawer__top img   { height: var(--as-logo-h-sm); width: auto; display: block; }
/* ⚠️ `@media (max-width:899.98px){ .asc-app .as-logo img{height:48px} }` KALDIRILDI:
   §6'daki 48/42 token ezmesinin armor kopyasıydı. Tasarımda logo boyu genişliğe
   göre değişmiyor (56px → sticky 44px), token zaten doğru değeri taşıyor. */

/* 8.4 BURGER / [hidden] TOGGLE
   (a) reset `button{display:block}` burger'ı masaüstünde gösterir → !important ile kapat,
       mobil kuralı yine !important ile açar.
   (b) `[hidden]` inline `display`'e KAYBEDER → toggle edilen öğede inline display YOK;
       gizlemeyi CSS yapar. */
.as-burger { display: none !important; }
@media (max-width: 1099.98px) {   /* §6 ile AYNI kırılım — ölçülen eşik 1100 */
  .as-burger { display: grid !important; place-items: center; }
}
.asc-app .as-drawer { display: block; }
.asc-app .as-drawer[hidden] { display: none; }
.asc-app .as-searchmodal { display: flex; }
.asc-app .as-searchmodal[hidden] { display: none; }
.asc-app .as-suggest[hidden] { display: none; }
.asc-app .as-tabs__panel[hidden] { display: none; }
.asc-app [data-as-filter-drawer] { display: flex; }
.asc-app [data-as-filter-drawer][hidden] { display: none; }

/* 8.5 Izgara/flex taşması — item `min-width:auto` yüzünden track'i aşar. */
.asc-app .as-grid > *, .asc-app [data-grid] > * { min-width: 0; }

/* 8.6 ELEMENTOR PRO FORM ALANLARI — formu `.asc-elform` kabına al.
   `.elementor-field-textual` vb. EVRENSELDİR; Elementor per-element CSS'i
   özgül olduğu için `!important` gerekir. */
.asc-elform .elementor-form-fields-wrapper { margin: 0; }
.asc-elform .elementor-field-group { margin-bottom: 14px; }
.asc-elform .elementor-field-group.elementor-field-type-submit { margin-bottom: 2px; margin-top: 4px; }
.asc-elform .elementor-field-group > label {
  display: block;
  font-family: var(--as-font);
  font-weight: 700; font-size: 13.5px; line-height: 1.3;
  color: var(--as-navy-2); margin-bottom: 7px;
}
.asc-elform .elementor-field.elementor-field-textual {
  width: 100%;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  min-height: 54px !important;
  font-family: var(--as-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--as-navy) !important;
  background: var(--as-tint) !important;
  box-shadow: none !important;
  transition: border-color .22s, box-shadow .22s, background-color .22s;
}
.asc-elform .elementor-field.elementor-field-textual:focus {
  background: var(--as-white) !important;
  border-color: var(--as-blue-ring) !important;
  box-shadow: var(--as-ring) !important;
  outline: none !important;
}
.asc-elform textarea.elementor-field-textual { min-height: 128px !important; padding: 15px 16px !important; line-height: 1.6; font-weight: 500 !important; }
.asc-elform select.elementor-field-textual { cursor: pointer; }
.asc-elform ::placeholder { color: var(--as-muted-2) !important; opacity: 1; }
.asc-elform .elementor-field-type-acceptance .elementor-field-subgroup { align-items: flex-start; gap: 10px; }
.asc-elform .elementor-field-type-acceptance .elementor-field-option label {
  font-size: 13px; line-height: 1.55; font-weight: 400; color: var(--as-ink-3);
}
.asc-elform input[type="checkbox"], .asc-elform input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--as-red); margin-top: 1px; flex: none;
}
.asc-elform .elementor-button {
  width: 100%; justify-content: center;
  border-radius: 12px !important;
  font-family: var(--as-font) !important;
  font-weight: 700 !important; font-size: 16px !important;
  padding: 0 24px !important; min-height: 52px !important;
  background-color: var(--as-red) !important;
  color: var(--as-white) !important;
  transition: background-color .22s;
}
.asc-elform .elementor-button:hover,
.asc-elform .elementor-button:focus { background-color: var(--as-red-hover) !important; color: var(--as-white) !important; }
.asc-elform .elementor-message { border-radius: 12px; font-family: var(--as-font); font-size: 14px; margin-top: 6px; }

/* 8.7 STICKY HEADER — Elementor global Header içinde çalışsın.
   Shortcode header, Elementor'un header-yüksekliğindeki kısa kabında render olur;
   `position:sticky` viewport'a değil o kaba yapışır. Sticky'yi LOCATION kabına
   veriyoruz (containing block <body>). Elementor yoksa seçici eşleşmez (zararsız). */
.elementor-location-header { position: sticky !important; top: 0 !important; z-index: 100; }

/* Üst yardımcı şerit KAYIP GİTMELİ, header yapışmalı (tasarım davranışı).
   Kap negatif offset ile yapışırsa şeridin 40px'i önce yukarı kayar, header 0'a oturur.
   `:has()` ile yalnızca şerit gerçekten render edildiyse (iletişim verisi varsa)
   uygulanır; <820px'te şerit gizli olduğu için offset'e gerek yok.
   40px = tasarımın şerit yüksekliği (--as-utilbar-h; değişken .asc-app'te tanımlı,
   üst kaba miras GEÇMEZ, bu yüzden burada sabit yazılır). */
@media (min-width: 820px) {
  .elementor-location-header:has(.as-utilbar) { top: -40px !important; }
}
/* WP admin çubuğu YALNIZCA giriş yapmış kullanıcıda 32px yer kaplar ve sticky
   header'ın üstünü kesiyordu (yönetici önizlemesinde header yarım görünüyordu).
   Offset admin çubuğu kadar aşağı alınır; ziyaretçi görünümü etkilenmez. */
body.admin-bar .elementor-location-header { top: 32px !important; }
@media (min-width: 820px) {
  body.admin-bar .elementor-location-header:has(.as-utilbar) { top: -8px !important; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .elementor-location-header { top: 46px !important; }
}
/* Header küçülürken (transform ile) kabın alt ~18px'i boşta kalır; görünmez
   bu şerit tıklamayı yutmasın diye kap tıklama geçirgen, gerçek çubuklar değil. */
.elementor-location-header, .asc-app--chrome { pointer-events: none; }
.asc-app--chrome .as-utilbar,
.asc-app--chrome .as-hdr,
.asc-app--chrome .as-drawer,
.asc-app--chrome .as-searchmodal,
.asc-app--chrome .as-skip,
.asc-app--chrome .as-footer,
.asc-app--chrome .as-fabrail { pointer-events: auto; }
/* ⚠️ Yukarıdaki satır §5.8'deki `.as-fabrail.is-tucked{pointer-events:none}`
   kuralını EZİYORDU: ikisi de (0,2,0) ama bu blok dosyada SONRA geliyor → eşit
   özgüllükte sonraki kazanır. Sonuç: ray görünmez oluyor ama tıklamayı yutmaya
   devam ediyordu, yani düzeltmenin asıl amacı (footer yasal bağlantıları
   tıklanabilsin) gerçekleşmiyordu. ÖLÇÜLDÜ: `is-tucked` eklendikten sonra
   computed pointer-events = auto. Bu satır çekilmiş durumu geri kazandırır. */
.asc-app--chrome .as-fabrail.is-tucked { pointer-events: none; }

/* 8.8 Tema başlık/arşiv kalıntıları shortcode sayfasında görünmesin. */
.asc-app .page-header, .asc-app .entry-title { display: none; }

/* 8.8b ELEMENTOR KUTULU KAP — chrome'u daraltıyor.
   [asc_header]/[asc_footer] Elementor global template'inin içinde render olur ve
   Elementor'un "boxed" kabı `.e-con-inner{max-width:min(100%,var(--container-max-width))}`
   ile genişliği KİT AYARINA (varsayılan 1140px) kilitler. Sonuç: header ve footer
   1140px, sayfa gövdesi (Elementor DIŞINDA, .asc-app--bare) 1240px → chrome ile
   içerik HİZASIZ; ayrıca 7 sekmeli menüde bar 195px yatay taşıyordu.
   ÖLÇÜM (canlı): .as-hdr__bar computed max-width=1320px olmasına rağmen w=1140;
   ata zinciri .e-con-inner maxW=min(100%,1140px) → gerçek sınır orası.
   Genişlik kararını kendi .as-container'ımıza geri veriyoruz; yatay dolgu da bizde
   (kap dolgusu kalırsa gutter iki kez uygulanır). Elementor yoksa seçici eşleşmez.

   ⚠️ İLK DENEME BAŞARISIZ OLDU — neden ve kesin çözüm (canlıda ölçüldü):
   Elementor'un gerçek kuralı `custom-frontend.min.css` içinde
       .e-con > .e-con-inner { max-width: var(--content-width) }
   yani (0,2,0) özgüllükte. Bizim ilk seçicimiz `.elementor-location-header
   .e-con-inner` de (0,2,0)'dı ve Elementor bizden SONRA yüklendiği için eşitlik
   sıra kuralıyla ona gidiyordu: computed max-width hâlâ min(100%,1140px), bant
   1140px, "Bilgi Al" CTA'sı 84px kırpık, sticky header'ın yanından sayfa içeriği
   geçiyordu. İki katmanlı çözüm:
     1) DEĞİŞKENİ ezmek — `--content-width` kullanıldığı yerde çözüldüğü için
        kural sırasından bağımsız kazanır. Asıl düzeltme budur.
     2) Yedek olarak child kombinatörlü (0,3,0) seçici — değişken adı ileride
        değişirse de genişlik açık kalır. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
  --content-width: 100%;
}

.elementor-location-header .e-con > .e-con-inner,
.elementor-location-footer .e-con > .e-con-inner,
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con-inner,
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
  max-width: none;
  padding-inline: 0;
}

/* 8.9 Akordeon eşitliği: HEPSİ KAPALI başlar + varsayılan `stretch` korunur.
   ⚠️ `align-self:start` KULLANMA — grid'de eşitsiz yükseklik yaratan tam olarak odur. */

/* 8.10 DOLU .as-btn VARYANTLARI — DİNLENME durumu.
   Taban `.as-btn--x` (0,1,0) iki ayrı kuralı birden kaybediyordu:
   (a) kendi taban eleman kurallarımız (0,1,1) — `<a>`'da metin rengi, `<button>`'da zemin;
   (b) reset.css `[type=submit],[type=button]{background-color:transparent}` (0,1,0) —
       asc.css'ten SONRA yüklendiği için eşitlikte tema kazanıyordu.
   ÖLÇÜM: `<a class="as-btn as-btn--primary">` color=#334155 (beyaz olmalı),
          `<button class="as-btn as-btn--primary">` bg=transparent (kırmızı olmalı).
   `.asc-app` öneki (0,2,0) her ikisini de yener. */
.asc-app .as-btn--primary   { background-color: var(--as-red);   color: var(--as-white); }
.asc-app .as-btn--secondary { background-color: var(--as-white); color: var(--as-navy-2); }
.asc-app .as-btn--light     { background-color: var(--as-white); color: var(--as-navy); }
.asc-app .as-btn--ghost     { background-color: transparent;     color: var(--as-white); }
.asc-app .as-btn--wa        { background-color: var(--as-wa);    color: var(--as-white); }
/* v2'de eklenen dolu varyant — listeye alınmazsa `<button>` hâlinde §8.1'in
   `color:inherit` kuralına düşüp lacivert zeminde koyu metinle çıkıyordu. */
.asc-app .as-btn--navy      { background-color: var(--as-navy);  color: var(--as-white); }

/* 8.11 → §2'ye taşındı (taban link kuralının hemen altına). Gerekçe orada. */

/* 8.12 METİN ALANLARI — reset `input[type=…]{border:1px solid #666;border-radius:3px;
   padding:.5rem 1rem}` (0,1,1) ve `input[type=…]:focus{border-color:#333}` (0,2,1)
   tek sınıflı `.as-input` (0,1,0) / `.as-input:focus` (0,2,0) kurallarını yeniyordu.
   (`select`/`textarea` reset'te (0,0,1) olduğu için ONLAR zaten kazanıyordu — sorun
   yalnızca öznitelik seçicili input'lardaydı.)
   ÖLÇÜM: .as-input rest bd=#666 r=3px pad=8px 16px, focus bd=#333. */
/* (radius §4.5 ile birlikte 14px → 12px'e çekildi — tasarım ölçüsü) */
.asc-app .as-input { border: 1px solid var(--as-line-2); border-radius: var(--as-r-btn); padding: 0 16px; }
.asc-app .as-input.is-invalid { border-color: var(--as-error-line); }
.asc-app .as-input:focus,
.asc-app .as-select:focus,
.asc-app .as-textarea:focus { border-color: var(--as-blue-ring); }
/* Pill içi kenarlıksız arama input'u — reset'in #666 kenarlık + 3px radius'unu geri al. */
.asc-app .as-searchmodal__input { border: 0; border-radius: 0; padding: 0; }

/* 8.13 BUTON KUTU/TİPOGRAFİ GEOMETRİSİ — reset.css'in İKİNCİ dalgası.
   Kaynak kurallar (hello-elementor/assets/css/reset.css):
     [type=button],[type=submit],button { border-radius:3px; display:inline-block;
       font-size:1rem; font-weight:400; padding:.5rem 1rem; text-align:center;
       white-space:nowrap }
     [type=button],[type=reset],[type=submit],button { width:auto }
   KÖK NEDEN: markup'taki her buton `type` taşıdığı için eşleşen seçici `[type=…]`
   = (0,1,0) — tek sınıflı bileşen kurallarımızla (`.as-btn`, `.as-icon-btn`,
   `.as-accordion__q` …) EŞİT özgüllükte. Eşitlikte yükleme sırası karar veriyor ve
   sıra sayfa sayfa DEĞİŞİYOR (ölçüm: ana sayfada matched sırası .as-accordion__q →
   [type=button] yani reset SONRA/kazanıyor; /sss/'de [type=button] → .as-accordion__q
   yani asc.css SONRA/kazanıyor). Bu yüzden aynı bileşen bazı sayfalarda bozuk,
   /sss/'de sağlam görünüyordu.
   ÇÖZÜM: gerçek <button>'lar için (0,2,1) — `.asc-app button.sınıf`. Sayfa kapsamlı
   (0,3,0) kurallar (`.asc-app[data-page=…] .x`) bunun ÜZERİNDE kaldığı için sayfa
   ince ayarları bozulmaz; `<a class="as-btn">` reset'ten hiç etkilenmediği için
   eleman niteleyicisi sayesinde KAPSAM DIŞI (header CTA'sının 14.5px'i korunur).
   ÖLÇÜM (önce): .as-btn--block 141×54 / 112×54 `inline-block` (kap 334 / 686) ·
   .as-accordion__q `inline-block` 239–396px, kutu 83–89px · .as-icon-btn/.as-burger/
   .as-drawer__close 54×44 r=3px · <button> CTA 16px/400. */
.asc-app button.as-btn {
  display: inline-flex; width: auto;
  padding: 0 20px;
  border-radius: var(--as-r-btn);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
/* radius: `.asc-app button.as-btn` (0,2,1) yukarıda 12px veriyor; birincil
   butonun tasarım ölçüsü 14px → aynı özgüllükte ama SONRA gelen kuralla geri alınır. */
.asc-app button.as-btn--primary { padding: 0 24px; font-size: 16px; border-radius: var(--as-r-btn-lg); }
.asc-app button.as-btn--sm      { padding: 0 16px; font-size: 13.5px; border-radius: 10px; }
.asc-app button.as-btn--lg      { padding: 0 28px; font-size: 16.5px; border-radius: var(--as-r-btn-lg); }
.asc-app button.as-btn--block   { width: 100%; }

.asc-app button.as-icon-btn {
  display: grid; width: var(--as-tap);
  padding: 0; border-radius: var(--as-r-btn);
}
.asc-app button.as-icon-btn--sm { width: 36px; border-radius: 10px; }

.asc-app button.as-accordion__q {
  display: flex; width: 100%;
  padding: 19px 20px; border-radius: 0;
  font-size: 15.5px; font-weight: 700;
  text-align: left; white-space: normal;
}
.asc-app button.as-tabs__tab {
  display: inline-flex; width: auto;
  padding: 0 18px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
}

/* 8.14 CTA GÖLGESİ — `.elementor a{box-shadow:none}` (0,1,1) taban `.as-btn--*`
   (0,1,0) gölgesini eziyor: Elementor global header/footer içindeki CTA'lar
   `.elementor` soyundan geldiği için gölgesiz kalıyordu.
   ⚠️ REVİZYON (tasarım ölçümü): birincil CTA'nın gölgesi TEK ve KOŞULSUZ değil.
   Prototipte ölçülen değerler: header CTA 0 8px 22px .24 · form CTA 0 10px 26px .22
   · hero CTA 0 12px 30px .26 · arama/404/"Danışmana Ulaş" CTA'ları GÖLGESİZ.
   Bu yüzden buradaki koşulsuz `--as-shadow-cta` KALDIRILDI; taban artık gölgesiz
   (§4.1) ve gölgeyi bağlam sınıfı veriyor:
     header CTA → `.asc-app .as-hdr__cta`        (§5.2, 0,2,0)
     form CTA   → `.asc-app .as-leadform__submit`(§10,  0,2,0)
     hero CTA   → SAYFA CSS'inin işi (pages/home.css) — burada verilmez.
   Yeşil buton da aynı sebeple nötr yumuşak gölgeye çekildi (§4.1). */
.asc-app .as-btn--wa { box-shadow: var(--as-shadow-wa-soft); }
.asc-app .as-btn--wa:hover,
.asc-app .as-btn--wa:focus-visible { box-shadow: var(--as-shadow-wa-soft); }

/* 8.15 MOBİL STICKY ÇUBUK PAYI — çubuk `position:fixed` ve <900px'te görünür;
   telafi eğitim detay sayfasının içerik bloğuna verilmişti, oysa Elementor global
   FOOTER shortcode'dan SONRA geliyor → footer'ın son satırı çubuğun ALTINDA kalıyor.
   ÖLÇÜM (önce, 375×700, /egitim/…): çubuk top=629 h=71; "Mesafeli Satış" 644–680;
   document.elementFromPoint(link merkezi) → a.as-mobilebar__btn (link TIKLANAMIYOR);
   body/.asc-app padding-bottom = 0.
   Çubuk yalnızca eğitim detay sayfasında BASILDIĞI için `:has()` ile o sayfaya
   otomatik daralır — sayfa-bazlı yamaya gerek yok. Dolgu footer'ın KENDİ zeminine
   verilir (koyu yüzey devam eder, altta beyaz şerit oluşmaz).
   ⚠️ KIRILIM 899.98 → 759.98: çubuğun kendisi tasarımdaki `w < 760` koşuluna
   çekildi (pages/course.css §11). Telafi 899.98'de kalsaydı 760–899px arasında
   footer'a 71px HAYALET dolgu binerdi — çubuk yokken boşluk.
   ⚠️ GÜNCEL DURUM (2026-08-13): pages/course.css çubuğun kırılımını 759.98 →
   1179.98'e GENİŞLETTİ ve telafiyi kendi dosyasında AYNI değerle (71px +
   safe-area) 1179.98 için tekrar veriyor (course.css §11, satır 950-968).
   Bu yüzden buradaki 759.98 kuralı artık yalnızca alt küme — aynı değeri
   verdiği için idempotent, kaldırmaya/genişletmeye GEREK YOK. Burayı
   1179.98'e çekmek çubuğun basılmadığı sayfalarda (`:has()` koruması olmasa)
   hayalet dolgu riskini geri getirirdi; kapsam kararı sayfa CSS'inde kalsın. */
@media (max-width: 759.98px) {
  body:has(.as-mobilebar) .as-footer {
    padding-bottom: calc(71px + env(safe-area-inset-bottom));
  }
}

/* 8.17 TEMA İÇERİK SARMALAYICISI — `.page-content a{text-decoration:underline}`
   ⚠️ ELEMENTOR KAPATILDIKTAN SONRA ORTAYA ÇIKAN EN BÜYÜK REGRESYON (ölçüldü).
   Elementor açıkken sayfa gövdesini Elementor'un kabı sarıyordu ve
   `.elementor a{text-decoration:none}` her linki temizliyordu. Elementor
   kapatılınca hello-elementor `template-parts/single.php` içeriği kendi
   `<div class="page-content">` sarmalayıcısına aldı ve `theme.css`'teki
       .comments-area a, .page-content a { text-decoration: underline }   (0,1,1)
   kuralı devreye girdi. Taban zırhımız `.asc-app :where(a)` — `:where()` özgüllüğü
   SIFIRLADIĞI için (0,1,0) kalıyor ve kaybediyor. Sonuç: <main> içindeki BÜTÜN
   linkler altı çizili — hero CTA'sı, kart bağlantıları, footer değil ama gövdedeki
   her şey. Kırmızı butonun üstünde beyaz alt çizgi olarak görünüyordu.
   ÇÖZÜM: aynı sarmalayıcıyı kendi kökümüzle birlikte hedefleyip (0,2,1) yapmak.
   `.asc-app`i ikizlemek (`.asc-app.asc-app a`) da işe yarardı ama o, chrome'daki
   aktif menü alt çizgisini de ezerdi; bu seçici yalnızca İÇERİK sarmalayıcısının
   içine iner, chrome ondan tamamen dışarıdadır.
   Bilerek alt çizgi İSTEDİĞİMİZ yerler (KVKK bağlantısı (0,3,1), prose linkleri,
   yasal metin bağlantıları) bu kuraldan daha özgül olduğu için etkilenmez. */
.page-content .asc-app a,
.entry-content .asc-app a { text-decoration: none; }

/* 8.18 TEMA İÇERİK GENİŞLİĞİ MERDİVENİ — sayfa gövdesini kelepçeliyor.
   ⚠️ ELEMENTOR KAPATILINCA AÇIĞA ÇIKAN İKİNCİ BÜYÜK REGRESYON (ölçüldü).
   hello-elementor `theme.css`:
       body:not([class*="elementor-page-"]) .site-main {
         @media(min-width:576px){max-width:500px} … (min-width:1200px){max-width:1140px}
       }
   Elementor açıkken body `elementor-page-19247` sınıfını taşıdığı için `:not()`
   EŞLEŞMİYORDU. Elementor kalkınca sınıf da kalktı → kural devreye girdi ve
   `<main>` 1140px'e (1085px ekranda 800px, 768'de 600px) kelepçelendi. Header,
   footer ve kapanış CTA bandı `wp_body_open`/`wp_footer` ile TAM GENİŞLİK
   basıldığı için ekranın iki yanında ölü beyaz kanal oluştu (1512'de 186px,
   1085'te 143px = ekranın %26'sı) ve `--alt` bölüm bantları uçtan uca gitmedi.
   ÖZGÜLLÜK: temanınki (0,2,1). Bizimki `body.asc-plugin-chrome main.site-main`
   = (0,2,2) → sınıf sayısı eşit, eleman sayısı fazla, kaynak sırasından bağımsız
   kazanır. Gövde sınıfını Asc_Plugin::register_shortcodes() ekliyor; chrome'u
   Elementor basıyorsa sınıf hiç eklenmez ve bu blok ölü kalır. */
body.asc-plugin-chrome main.site-main {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/* 8.19 YAPIŞKAN HEADER — chrome sarmalayıcısı yapışma menzilini 40px'e düşürüyor.
   ⚠️ ÖLÇÜLDÜ: `.as-hdr{position:sticky;top:0}` doğru, ama yapışkan öğe EBEVEYNİNİN
   kutusu içinde kalır. Ebeveyn `.asc-app.asc-app--chrome` yalnızca 126px yüksek
   (üst şerit 40 + header 86) → menzil 126−86 = 40px; sayfa kaydırılınca header
   tamamen yukarı kayıp gidiyordu (scrollY=900'de rect.top = −828). Mobilde daha
   ağır: uzun sayfada menüye erişim tamamen kayboluyordu.
   `position:static` / `overflow:visible` vermek ÇÖZMEZ — kısıt kutunun kendisi.
   `display:contents` kabın kutusunu kaldırır, çocuklar <body>'nin doğrudan çocuğu
   gibi yerleşir ve yapışma menzili tüm sayfa olur. Kap DOM'da kaldığı için
   `.asc-app` token'ları ve tipografisi miras yoluyla akmaya devam eder.
   Eski Elementor çözümü (§8.7 `.elementor-location-header{position:sticky!important}`)
   Theme Builder şablonları silindiği için artık ÖLÜ SEÇİCİ; dokunulmadı, zararsız. */
.asc-app--chrome { display: contents; }

/* 8.20 YÜZEN RAY DİP PAYI — yalnızca mobil çubuk BASILDIĞINDA.
   ÖLÇÜLDÜ: `--as-fab-b:84px` <900px'te koşulsuz uygulanıyordu, ama `.as-mobilebar`
   yalnız eğitim detay şablonunda var → ana sayfa/blog/iletişim gibi sayfalarda
   yüzen ray dipte 60px havada duruyordu. `:has()` ile çubuğa bağlandı. */
@media (max-width: 899.98px) {
  .asc-app { --as-fab-b: 24px; }
  body:has(.as-mobilebar) .asc-app { --as-fab-b: 84px; }
}

/* 8.16 .asc-app DIŞINDA KALAN SON PEMBE TAŞIYICILAR.
   ÖLÇÜM (getComputedStyle, 9 sayfa × 1440/390): `.asc-app` içinde pembe SIFIR,
   ancak sarmalayıcının DIŞINDA iki öğe hâlâ #CC3366 taşıyor —
     1) A.skip-link.screen-reader-text  → WP çekirdek atlama bağlantısı, BODY'nin
        doğrudan çocuğu. Dinlenmede `clip:rect(1px,1px,1px,1px)` ile gizli ama
        klavyeyle ilk TAB'da GÖRÜNÜR olur → sayfanın sol üstünde pembe metin.
        Ölçülen: color = rgb(204,51,102), kaynak kural `reset.css :: a` (0,0,1).
     2) BUTTON.pswp__button (PhotoSwipe/WooCommerce galeri ışık kutusu, eğitim
        detayında basılıyor, dinlenmede display:none). Ölçülen: color =
        rgb(204,51,102), kaynak `reset.css :: [type=button],[type=submit],button`
        (0,0,1) + hover/focus dalgası (0,1,1).
   Bu öğeler sarmalayıcının dışında olduğu için `.asc-app` öneki onlara ULAŞMAZ.
   Sızıntı riski olmayan en dar çapa `body:has(.asc-app)` (= yalnızca reskin
   sayfaları); özgüllük (0,2,1) → reset'in (0,0,1) ve (0,1,1) kurallarını yener,
   `!important` gerekmez.
   ⚠️ Renkler DÜZ HEX yazıldı, `var(--as-*)` DEĞİL: jetonlar `.asc-app` üzerinde
   tanımlı (bu dosyanın 25. satırı) ve bu iki öğe sarmalayıcının DIŞINDA olduğu
   için jetonları miras ALMAZ — `var()` burada geçersiz kalırdı. */
body:has(.asc-app) .skip-link,
body:has(.asc-app) .skip-link:hover,
body:has(.asc-app) .skip-link:focus {
  border-color: #071D49;      /* --as-navy karşılığı */
  background-color: #FFFFFF;
  color: #071D49;
}
body:has(.asc-app) .pswp__button,
body:has(.asc-app) .pswp__button:hover,
body:has(.asc-app) .pswp__button:focus {
  border-color: transparent;
  color: #FFFFFF;
}

/* =========================================================================
   9) KARTLAR (paylaşılan)
   TEK kart şablonu kuralı (03-SHORTCODE-REFERENCE.md): ana sayfa, arşiv,
   kategori, arama, ilgili eğitimler ve blog aynı iki bileşeni kullanır —
   partials/product-card.php (.as-course-card) ve partials/blog-card.php
   (.as-post-card). Kullanım yerine göre AYRI kart tasarımı yazılmaz.

   Taban görünüm §4.3'ün .as-card / .as-card--hover / .as-media bileşenlerinden
   gelir; buradaki kurallar yalnızca kart-özgü yerleşimi ekler. Seçiciler
   `.asc-app` ile başlar — §8 armor'ının (0,2,0) kurallarını yenmek zorundalar.

   ⚠️ v2 MARKUP SÖZLEŞMESİ (00-CURRENT-STATE §2.6) — üç ızgarada da AYNI desen
   (öne çıkan 6 · arşiv 9 · ilgili 3, hepsi variant="standard"):
     <article class="as-card as-card--hover as-course-card">  ← relative sarmalayıcı
       <a class="as-course-card__link" href="…">              ← kartın TAMAMI tek link
         <span class="as-course-card__media as-media as-media--1x1">…</span>
         <div class="as-course-card__body"> … başlık/özet/çipler …
           <span class="as-course-card__actions">"İncele" + ok</span>
         </div>
       </a>
       <a class="as-course-card__wa" …>WhatsApp</a>            ← link DIŞINDA, z-index:3
     </article>
   - Görsel 1:1 KARE.
   - "İncele" satırı kart bağlantısının İÇİNDE, normal akışta.
   - WhatsApp METİNLİ yeşil buton; mutlak konumlu, z-index:3; `__actions`
     satırı ona `padding-right:112px` ile yer ayırır.
   - E-Devlet rozeti KOŞULSUZ, çip satırında (§2.1).
   ⚠️ WhatsApp'ı tam genişlikte mutlak bir katman yapmayın: v1'de kartın alt
     şeridindeki TÜM tıklamaları yutuyordu (tasarım notu §2.6'daki uyarı).

   Görsel kırpımları: kart 1:1 · arama satırı 1:1 (104×104) · blog 16:9.
   FİYATSIZ MODEL: kartta fiyat, indirim, puan, kontenjan, sepet YOKTUR.
   ========================================================================= */

/* 9.1 Eğitim kartı — ortak gövde ------------------------------------------ */
/* Sarmalayıcı: kenarlık/zemin `.as-card`tan gelir, dolgu sıfırlanır (görsel
   kenara dayanır) ve WhatsApp butonu için konumlandırma bağlamı açılır. */
/* TASARIM ÖLÇÜMÜ (ana sayfa öne çıkan kart, computed):
   border-radius 22px ✔ · border-color rgb(227,234,245) = --as-line ·
   box-shadow rgba(7,29,73,.04) 0 2px 6px.
   Taban `.as-card` --as-line-2 (#DCE6F3) ve GÖLGESİZ veriyordu → kartlar
   zeminden ayrışmıyordu. Kural (0,2,0), `.as-card` (0,1,0) üstünde. */
.asc-app .as-course-card,
.asc-app .as-post-card {
  border-color: var(--as-line);
  box-shadow: var(--as-shadow-card-rest);
}
/* ⚠️ Yukarıdaki kural (0,2,0) ve §4.3'teki `.as-card--hover:hover` de (0,2,0);
   bu dosyada DAHA SONRA geldiği için hover yükselmesini de ezerdi. Hover dili
   (0,3,0) ile geri veriliyor — değerler §4.3'ün birebir aynısı. */
.asc-app .as-course-card.as-card--hover:hover,
.asc-app .as-course-card.as-card--hover:focus-within,
.asc-app .as-post-card.as-card--hover:hover,
.asc-app .as-post-card.as-card--hover:focus-within {
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-shadow-hover);
}
.asc-app .as-course-card {
  padding: 0;
  overflow: hidden;           /* radius görseli kırpsın */
  height: 100%;               /* ızgarada eşit yükseklik */
  position: relative;
  min-width: 0;
}
/* Kart yüzeyinin tamamı tek link — sarmalayıcıyı doldurur. */
.asc-app .as-course-card__link {
  display: flex; flex-direction: column; flex: 1;
  min-width: 0;
  color: var(--as-navy);
}
.asc-app .as-course-card__link:hover,
.asc-app .as-course-card__link:focus-visible { color: var(--as-navy); }
/* Sarmalayıcı `overflow:hidden` olduğu için odak halkası DIŞARIDA kırpılırdı →
   içeri al (klavye kullanıcısı kartın seçili olduğunu görmeli). */
.asc-app .as-course-card__link:focus-visible { outline-offset: -3px; }

/* Görsel — v2'de KARE (1:1); oran `.as-media--1x1` ile gelir, burada pekiştirilir
   (Elementor'un görsel kurallarına karşı da sabit kalsın → CLS 0). */
.asc-app .as-course-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 0;           /* kart zaten overflow:hidden + radius taşıyor */
  flex: none;
}
.asc-app .as-course-card__img { width: 100%; height: 100%; object-fit: cover; }

/* Görsel yoksa: .as-media degradesi + dekoratif kontur (kırık görsel ikonu YOK). */
.asc-app .as-course-card__deco {
  position: absolute; right: -24px; bottom: -30px;
  width: 150px; height: 150px;
  color: var(--as-blue-ring);
  opacity: .2;
  pointer-events: none;
}

/* Kategori — görselin sol üstünde beyaz pill.
   TASARIM ÖLÇÜMÜ: bg rgba(255,255,255,.94) (.92 idi) + box-shadow
   rgba(7,29,73,.08) 0 2px 8px (hiç yoktu → pill görselin üstünde "yüzmüyordu").
   Yükseklik 27px; bizde 32.1px'ti çünkü line-height tabandan (1.75) miras
   alınıyordu — taban `normal`e çekildi (§2), pill kendi ölçüsüne döndü. */
.asc-app .as-course-card__cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 6px 11px;
  border-radius: var(--as-r-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--as-shadow-chip);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--as-blue);
}

/* E-Devlet pill'i — GÖRSELİN sol altında, mutlak. Tasarım (dc-ref 275–300) bunu
   standart kartın HER kullanımında böyle gösterir; kural önce yalnızca arşive
   kapsanmıştı ve ana sayfa ile "ilgili eğitimler" ızgarasında rozet konumsuz,
   radius 8px, gölgesiz kalıyordu (ölçüldü). Paylaşılan katmana taşındı.
   Zemin rgba(255,255,255,.96): fotoğrafın üstünde okunur ama görseli kesmez.
   Gölge 0 4px 12px rgba(217,58,41,.14) = --as-red %14. */
.asc-app .as-course-card__seal {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  border-radius: var(--as-r-pill);
  background: rgba(255, 255, 255, .96);
  border-color: var(--as-line-blush);
  box-shadow: 0 4px 12px rgba(217, 58, 41, .14);
  white-space: nowrap;
}

/* WhatsApp — v2: METİNLİ dolu yeşil buton, kartın SAĞ ALTINDA, kart linkinin
   DIŞINDA (iç içe <a> olmaz) ve z-index:3 ile onun üstünde. Yalnızca kendi
   40×~112px kutusu tıklamayı yakalar; kartın geri kalanı kart linkinde kalır. */
.asc-app .as-course-card__wa {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  height: 40px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  background: var(--as-wa);
  color: var(--as-white);
  font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              transform var(--as-t-mid) var(--as-ease);
}
.asc-app .as-course-card__wa svg { width: 15px; height: 15px; }
.asc-app .as-course-card__wa:hover,
.asc-app .as-course-card__wa:focus-visible {
  background: var(--as-wa-hover);
  color: var(--as-white);
  transform: translateY(-1px);
}
/* DOKUNMA HEDEFİ — tasarım yüksekliği 40px (dc-ref 661: 111×40) ve masaüstünde
   DOĞRUDUR; ancak canlıda hem 1512 hem 390px'te 111.19×40 ölçüldü, yani
   dokunmatikte 44px eşiğinin ALTINDA kalıyor (sayfadaki diğer tüm etkileşimli
   öğeler ≥44px). Yükseklik yalnızca dar VEYA kaba-işaretçili ekranda 44px'e
   çıkarılır; fareli masaüstünde tasarımın 40px'i KORUNUR. Çift koşul, eğitim
   detay sekme hapının kalıbıyla aynıdır (dokunmatik dizüstülerde de tetiklenir).
   Buton `position:absolute; bottom:20px` olduğu için 4px YUKARI büyür — alt
   kenar hizası ve `__actions`ın 112px sağ payı DEĞİŞMEZ (genişlik sabit).
   Seçici (0,2,0): taban kuralla aynı özgüllük, kaynakta sonra → kazanır. */
@media (max-width: 759.98px), (pointer: coarse) {
  .asc-app .as-course-card__wa { height: 44px; }
}

/* Gövde */
.asc-app .as-course-card__body {
  display: flex; flex-direction: column; flex: 1;
  min-width: 0;
  padding: 20px;
}
.asc-app .as-course-card__title { color: var(--as-navy); }
.asc-app .as-course-card__title a { display: block; color: inherit; }
.asc-app .as-course-card__title a:hover,
.asc-app .as-course-card__title a:focus-visible { color: var(--as-blue); }

.asc-app .as-course-card__excerpt {
  margin-top: 9px;
  font-size: 13.5px; line-height: 1.55; font-weight: 500;
  color: var(--as-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Çipler — attribute yoksa <ul> hiç basılmaz, boş çip üretilmez. */
.asc-app .as-course-card__chips {
  margin-top: 13px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  list-style: none; padding: 0;
}
.asc-app .as-course-card__chips .as-chip {
  min-height: 0;
  padding: 5px 10px;
  border: 0;                                  /* §8.1 armor'ının (0,2,0) kenarlığını ezer */
  border-radius: var(--as-r-chip);
  background: var(--as-tint);
  font-size: 12px; font-weight: 700; line-height: 1.35;
  color: var(--as-ink-2);
}
/* E-Devlet çipi kartın güven sinyalidir ve HER kartta koşulsuz basılır (§2.1).
   Ölçüler §4.9'daki taban rozetten gelir (24px beyaz puck + 16px işaret + 11px
   metin = tasarımdaki arşiv çipi); burada yalnızca dar kartta taşmaması için
   sarma/min-width güvencesi verilir. */
.asc-app .as-course-card__chips .as-edevlet-badge {
  max-width: 100%; min-width: 0;
}
.asc-app .as-course-card__chips .as-edevlet-badge > span:last-child {
  min-width: 0;
  white-space: normal;        /* uzun metin sarsın, çipi taşırmasın */
}

/* "İncele" satırı — kart altına yaslanır (ızgarada hizalı taban) ve KART
   LİNKİNİN İÇİNDE, normal akışta durur. Sağdaki 112px, mutlak konumlu
   WhatsApp butonuna ayrılmış paydır (00-CURRENT-STATE §2.6). */
.asc-app .as-course-card__actions {
  margin-top: auto; padding-top: 18px;
  padding-right: 112px;
  border-top: 1px solid var(--as-line-soft);
  display: flex; align-items: center; gap: 8px;
}
.asc-app .as-course-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700;
  color: var(--as-navy-2);
}
.asc-app .as-course-card__arrow {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-tint-3);
  color: var(--as-blue);
  transition: background-color var(--as-t-fast) var(--as-ease),
              color var(--as-t-fast) var(--as-ease),
              transform var(--as-t-mid) var(--as-ease);
}
.asc-app .as-course-card__arrow svg { width: 13px; height: 13px; }
.asc-app .as-card--hover:hover .as-course-card__arrow { transform: translateX(2px); }

/* 9.2 — LEAD varyantı v2'de KALDIRILDI. Tasarımda 2 kolonluk geniş editoryal
   kart kalmadı; üç ızgara da (öne çıkan 6 · arşiv 9 · ilgili 3) aynı standart
   kartı kullanıyor. Şablon eski `variant="lead"` çağrılarını standard'a düşürür,
   bu yüzden `.as-course-card--lead` sınıfı artık hiç basılmaz. */

/* 9.3 Eğitim kartı — ROW (arama sonucu satırı) ----------------------------
   Tasarım v2 arama satırı: satırın TAMAMI tek link; 104×104 KARE görsel,
   künyede E-Devlet rozeti, sağda 40px ok pucku. WhatsApp butonu YOKTUR
   (dönüşüm yolu mobil bar + yüzen ray). Yatay eksen SARMALAYICIDA değil
   kart LİNKİNDE kurulur — kart yüzeyi artık tek <a>. */
.asc-app .as-course-card--row { height: auto; }
.asc-app .as-course-card--row .as-course-card__link {
  flex-direction: row; align-items: center; gap: 22px;
  padding: 20px;
}
.asc-app .as-course-card--row .as-course-card__media {
  width: 104px; height: 104px; flex: none;
  border-radius: var(--as-r-btn-lg);
  overflow: hidden;
}
.asc-app .as-course-card--row .as-course-card__deco {
  right: -14px; bottom: -18px; width: 90px; height: 90px; opacity: .35;
}
.asc-app .as-course-card--row .as-course-card__body { padding: 0; flex: 1; }
.asc-app .as-course-card__kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 10px;
}
.asc-app .as-course-card--row .as-course-card__title { font-size: 18px; }
.asc-app .as-course-card--row .as-course-card__excerpt { margin-top: 8px; font-size: 14.5px; }
/* Künyedeki E-Devlet rozeti pill'e döner (satırda yuvarlak hat tasarımı). */
.asc-app .as-course-card--row .as-edevlet-badge {
  border-radius: var(--as-r-pill);
  padding: 4px 10px 4px 6px;
  font-size: 10.5px;
}
.asc-app .as-course-card--row .as-edevlet-badge__mark { width: 22px; height: 22px; }
.asc-app .as-course-card--row .as-edevlet-badge__mark img { width: 15px; height: 15px; }
/* Sağdaki ok pucku büyür ve satırın sonuna sabitlenir. */
.asc-app .as-course-card--row .as-course-card__arrow { width: 40px; height: 40px; }
.asc-app .as-course-card--row .as-course-card__arrow svg { width: 17px; height: 17px; }
@media (max-width: 599.98px) {
  .asc-app .as-course-card--row .as-course-card__link { align-items: flex-start; gap: 14px; padding: 16px; }
  .asc-app .as-course-card--row .as-course-card__media { width: 84px; height: 84px; }
  .asc-app .as-course-card--row .as-course-card__arrow { display: none; }  /* dar ekranda yer yok */
}

/* 9.4 Yazı kartı ----------------------------------------------------------
   Eğitim kartıyla AYNI desen: kartın tamamı tek `__link`; başlık ve "Yazıyı Oku"
   ayrı bağlantı DEĞİLDİR (v1'de üç ayrı <a> vardı). Yazı kartında WhatsApp
   butonu yoktur → mutlak katman/ayrılmış pay da yok. */
.asc-app .as-post-card {
  padding: 0;
  overflow: hidden;
  height: 100%;
  min-width: 0;
}
.asc-app .as-post-card__link {
  display: flex; flex-direction: column; flex: 1;
  min-width: 0;
  color: var(--as-navy);
}
.asc-app .as-post-card__link:hover,
.asc-app .as-post-card__link:focus-visible { color: var(--as-navy); }
.asc-app .as-post-card__link:focus-visible { outline-offset: -3px; }
.asc-app .as-post-card__media { display: block; border-radius: 0; flex: none; }
.asc-app .as-post-card__img { width: 100%; height: 100%; object-fit: cover; }
.asc-app .as-post-card__body {
  display: flex; flex-direction: column; flex: 1;
  min-width: 0;
  padding: 20px;
}
.asc-app .as-post-card__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.asc-app .as-post-card__title { margin-top: 12px; font-size: 16.5px; color: var(--as-navy); }
.asc-app .as-card--hover:hover .as-post-card__title { color: var(--as-blue); }
.asc-app .as-post-card__excerpt {
  margin-top: 9px;
  font-size: 13.5px; line-height: 1.55; font-weight: 500;
  color: var(--as-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.asc-app .as-post-card__more {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--as-red);
}
.asc-app .as-post-card__more svg { width: 15px; height: 15px; }
.asc-app .as-card--hover:hover .as-post-card__more { color: var(--as-red-hover); }


/* =========================================================================
   10) BİLGİ TALEP FORMU (paylaşılan) — partials/lead-form.php görünümü
   pages/contact.css'ten TAŞINDI: aynı partial'ı eğitim detay sayfası da
   kullanıyor ama contact.css yalnızca /iletisim/'de yükleniyordu → formun
   kartı, gönder butonu ve dikkat halkası eğitim detayında STİLSİZ kalıyordu
   (ölçüldü: course sayfasında 23 leadform öğesi, 0 kural). Bileşen zaten
   `.asc-app` altında yazılmıştı; yalnızca yeri değişti.
   ========================================================================= */
.asc-app .as-leadform {
  background: var(--as-white);
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-media);
  box-shadow: var(--as-shadow-soft);
  padding: clamp(24px, 4vw, 36px);
}
/* Tam genişlik varyantı: genişliği kap (grid kolonu) belirler. */
.asc-app .as-leadform--wide { width: 100%; }
/* Sticky kolon varyantı (eğitim detayda kullanılır). */
@media (min-width: 1000px) {
  .asc-app .as-leadform--card { position: sticky; top: 104px; }
}

.asc-app .as-leadform__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--as-navy);
}
.asc-app .as-leadform__text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--as-muted);
}
/* `.as-leadform__req` ve `.as-leadform__star` kuralları KALDIRILDI: tasarımda ne
   "Yıldızlı alanlar zorunludur." satırı ne de etiket yıldızları var; markup'tan
   da çıkarıldılar (partials/lead-form.php). Zorunluluk bilgisi `required`
   üzerinden ekran okuyucuya gitmeye devam ediyor.

   EYEBROW HAPI — kaynaktan birebir (dc-ref/index.html 864–866). Kart varyantında
   başlığın üstünde durur; canlıda markup vardı, kural HİÇ YOKTU (biçimsiz düz
   metin çıkıyordu). Nokta `as-pulse` ile nabız atar, reduced-motion'da durur. */
.asc-app .as-leadform__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 99px;
  background: var(--as-blush);
  /* ⚠️ `--as-line-blush` KULLANILMIYOR. O jeton #FBD5CE'dir ve kaynakta yalnızca
     E-Devlet çipinin DIŞ gövdesinde geçer (dc-ref satır 282, 585, 653). Bu hapın
     kendi kenarlığı kaynakta AÇIKÇA #F6D6CF: `border:1px solid #F6D6CF`
     (dc-ref/index.html 864) — aynı değer E-Devlet işaret pucku ve 771'deki
     rozette de kullanılıyor. Tek jetona indirgendiğinde bu bileşen yanlış tona
     kayıyordu. ÖLÇÜM (1440, /egitim/…): önce borderColor rgb(251,213,206),
     beklenen rgb(246,214,207). Paylaşılan jeton ELLENMEDİ (E-Devlet çipleri
     doğru), yalnız bu bileşene kendi değeri verildi. */
  border: 1px solid #F6D6CF;
}
.asc-app .as-leadform__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--as-red);
  animation: as-pulse 2.4s var(--as-ease) infinite;
}
.asc-app .as-leadform__eyebrow-text {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--as-red-ink);
}
/* Hap başlığın üstünde durduğu için başlığın kendi üst boşluğu buradan verilir. */
.asc-app .as-leadform__eyebrow + .as-leadform__title { margin-top: 14px; }

/* Alanlar: dar kapta tek kolon, geniş kapta iki kolon (auto-fit). */
.asc-app .as-leadform__fields {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 18px;
}
.asc-app .as-leadform__fields > * { min-width: 0; }

/* Alan hatası (JS `hidden`'ı kaldırıp metni yazar) — inline display KULLANILMAZ. */
.asc-app .as-field__err[hidden] { display: none; }

/* Gönder butonu + dikkat halkası.
   Halka butonun KARDEŞİ ve sarmalayıcı `position:relative` → `inset:0` butonun
   kutusunu ölçer, buton sonra boyandığı için metin halkanın üstünde kalır. */
/* ⚠️ `display: block` DEĞİL `inline-flex` — REGRESYON DÜZELTMESİ.
   Buton geniş (iletişim) varyantta artık `as-btn--block` taşımıyor, yani içerik
   kadar (≈159px). Sarmalayıcı `block` kaldığı için 674px genişliğinde kalıyor ve
   içindeki dikkat halkası (`.as-leadspin`, `inset:0` + `background:currentColor`
   + `opacity:.45`) butonun sağında KOCAMAN PEMBE BİR DİKDÖRTGEN olarak
   görünüyordu (canlıda ölçüldü, /iletisim/). `inline-flex` sarmalayıcıyı butona
   oturtur → halka tam butonun üstünde kalır. Kart varyantında buton zaten
   `--block` olduğu için orada davranış değişmez. */
.asc-app .as-leadform__cta {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  margin-top: 26px;
  border-radius: var(--as-r-btn-lg);
}
/* Kart varyantında buton tam genişlik → sarmalayıcı da tam genişlik olmalı. */
.asc-app .as-leadform--card .as-leadform__cta { display: flex; }
/* Halkanın rengi HALKAYA verilir (sarmalayıcıya DEĞİL): `background: currentColor`
   olduğu için sarmalayıcıya renk yazmak butona da miras kalır ve armor'daki
   `.asc-app button{color:inherit}` (0,1,1) yüzünden kırmızı üstüne kırmızı metin
   üretirdi. Aynı armor kuralı `.as-btn--primary{color}` (0,1,0)'ı da yendiği için
   butonun beyaz metnini (0,2,0) ile açıkça geri veriyoruz. */
.asc-app .as-leadform__cta .as-leadspin { color: var(--as-red); }
/* GÖLGE: form CTA'sı tasarımda gölgelidir — `0 10px 26px rgba(217,58,41,.22)`
   (prototip "Beni Arayın": r=14px, h=54, bs=rgba(217,58,41,.22) 0 10px 26px).
   §4.1'de birincil butonun gölgesi varsayılan olarak KALDIRILDI, bu yüzden
   burada bağlam sınıfıyla açıkça veriliyor. (0,2,0) — `.elementor a`
   `box-shadow:none` (0,1,1) kuralını da yener (form Elementor sayfasında). */
.asc-app .as-leadform__submit {
  position: relative;
  height: 54px;
  border-radius: var(--as-r-btn-lg);
  font-size: 16px;
  color: var(--as-white);
  box-shadow: var(--as-shadow-cta-form);
}
.asc-app .as-leadform__submit:hover,
.asc-app .as-leadform__submit:focus-visible { box-shadow: var(--as-shadow-cta-form); }
/* JS yokken halka hiç sönmez → JS yoksa hiç basma (asc.js `.js` sınıfını ekler).
   prefers-reduced-motion'da JS zaten `hidden` verir; CSS de güvence altına alır. */
.asc-app:not(.js) .as-leadspin { display: none; }
@media (prefers-reduced-motion: reduce) {
  .asc-app .as-leadspin { display: none; }
}

/* "Gönderiliyor" durumu: buton söner (asc.css .is-loading) + dönen halka. */
.asc-app .as-leadform__spin { display: none; }
.asc-app .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 .as-leadform__submit.is-loading svg { display: none; }

.asc-app .as-leadform__kvkk {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
}
.asc-app .as-leadform__kvkk a {
  font-weight: 700;
  color: var(--as-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asc-app .as-leadform__kvkk a:hover { color: var(--as-navy-2); }

/* WhatsApp alternatifi — yalnızca numara tanımlıysa render edilir. */
.asc-app .as-leadform__alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--as-line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Ayırıcı artık METİNSİZ: tasarımda ortada "VEYA" etiketi yok, çizgiden hemen
   sonra WhatsApp butonu geliyor. Span boş ve `aria-hidden` — eski metin stili
   yerine sıfır yükseklik veriyoruz, yoksa `gap:10px` butonu 20px aşağı itiyordu.
   Görünen çizgi `.as-leadform__alt`'ın `border-top`'u; ayrı bir çizgi ÇİZİLMEZ. */
.asc-app .as-leadform__or { display: none; }

/* Başarı bloğu (.is-sent ile görünür — asc.css §4.5). */
.asc-app .as-leadform__sent {
  text-align: center;
  padding: 40px 20px;
}
.asc-app .as-leadform__sent-ico {
  width: 64px;
  height: 64px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--as-r-pill);
  background: var(--as-success-bg);
  color: var(--as-success);
}
.asc-app .as-leadform__sent-title {
  margin-top: 20px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--as-navy);
}
.asc-app .as-leadform__sent-text {
  margin-top: 12px;
  margin-inline: auto;
  max-width: 420px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--as-ink-2);
}
.asc-app .as-leadform__sent-wa { margin-top: 22px; }