/* CampusOnline — co_platform tasarım sistemi + ana sayfa
   Tam spec: docs/DESIGN.md · Stripe-rafine tipografi/buton (2026-07) */

/* Hanken Grotesk — lokal barındırılan variable font (Google Fonts CDN yerine).
   Tek dosya 400-700 arası tüm ağırlıkları kapsar (variable font); latin + latin-ext TR karakterlerini kapsar. */
   @font-face {
    font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  }
  @font-face {
    font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  :root {
    /* Marka — Şapka ve Fil mor */
    --red-50:#EEEDFE; --red-100:#DCD9FC; --red-600:#5649F6; --red-700:#4338CA; --red-800:#3528B8;
    /* Nötr — siyah gövde */
    --ink:#000000; --body:#1A1A1A; --muted:#64748B; --faint:#94A3B8;
    --border:#E2E8F0; --border-strong:#CBD5E1; --bg:#F8FAFC; --surface:#FFFFFF;
    /* Radius */
    --radius-sm:5px; --radius-btn:6px; --radius:8px; --radius-lg:10px; --radius-xl:14px; --radius-pill:999px;
    /* Gölge */
    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow:0 4px 16px rgba(15,23,42,.06);
    --shadow-lg:0 12px 32px rgba(15,23,42,.10);
    --shadow-btn:0 1px 2px rgba(15,23,42,.10);
  }
  
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  /* Navigasyon progress bar (tıklamada anında geri bildirim) */
  #nprog { position:fixed; top:0; left:0; height:3px; width:0; background:var(--red-600); z-index:9999; opacity:0;
    transition:width .28s ease, opacity .2s; box-shadow:0 0 8px rgba(86,73,246,.55); }
  #nprog.on { opacity:1; }
  body {
    font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--body); background:var(--bg);
    font-size:16px; line-height:1.6; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4 { color:var(--ink); line-height:1.15; letter-spacing:-.025em; }
  /* Stripe-ölçek: büyük ama ZARİF ağırlık (500) + SIKI tracking (kurumsal) */
  h1 {font-size:clamp(2.375rem, 4.8vw, 3.9rem);font-weight: 700;line-height:1.08;letter-spacing:-.038em;}
  h2 { font-size:clamp(1.75rem, 3vw, 2.25rem); font-weight:600; letter-spacing:-.03em; }
  h3 { font-size:1.375rem; font-weight:600; }
  a { color:inherit; text-decoration:none; }
  img { max-width:100%; display:block; }
  
  .container { max-width:1340px; margin:0 auto; padding:0 24px; }
  .eyebrow { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--red-600); }
  .muted { color:var(--muted); }
  
  /* Butonlar — Stripe geometrisi: kompakt, radius 8px, ok affordance */
  .btn { display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:15px; line-height:1;
    padding:11px 18px; border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s, transform .05s; white-space:nowrap; }
  .btn:active { transform:translateY(1px); }
  .btn .arrow { font-size:1.15em; line-height:0; transition:transform .15s; }
  .btn:hover .arrow { transform:translateX(2px); }
  .btn-primary { background:var(--red-600); color:#fff; box-shadow:var(--shadow-btn); }
  .btn-primary:hover { background:var(--red-700); }
  .btn-secondary { background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:var(--shadow-btn); }
  .btn-secondary:hover { border-color:var(--red-600); color:var(--red-700); }
  /* background/border BİLEREK açıkça yazılıyor: <button> öğesinde tarayıcının
     varsayılan görünümü sızıyordu — iOS Safari çıkış butonunu MAVİ basıyordu
     (2026-08-03). Masaüstünde fark edilmemişti, orada UA varsayılanı gri. */
  .btn-ghost { color:var(--ink); padding:11px 10px; background:transparent; border:1px solid transparent; }
  .btn-ghost:hover { color:var(--red-700); }
  .btn-outline { background:transparent; color:var(--red-600); border:1.5px solid var(--red-600); box-shadow:none; }
  .btn-outline:hover { background:var(--red-50); color:var(--red-700); }
  .btn-lg { padding:14px 24px; font-size:16px; }
  
  /* Persona şeridi (Coursera deseni) — ince üst bar, audience tab'ları */
  /* Persona şeridi: lacivert bar + aktif tabın altında 3px beyaz çizgi (minimal) */
  .persona-bar { background:var(--ink); }
  .persona-inner { display:flex; }
  .persona-tabs { display:flex; gap:2px; overflow-x:auto; }
  .persona-tabs a { font-size:13.5px; font-weight:500; color:#94A3B8; padding:12px 16px 9px; white-space:nowrap;
    border-bottom:3px solid transparent; transition:color .15s, border-color .15s; }
  .persona-tabs a:hover { color:#fff; }
  .persona-tabs a.active { color:#fff; border-bottom-color:#fff; }
  
  /* Nav */
  .nav { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
  .nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
  .brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.02em; }
  .brand-mark { width:30px; height:30px; border-radius:8px; background:var(--red-600); display:grid; place-items:center; color:#fff; font-weight:700; font-size:16px; }
  .brand b { font-weight:600; } .brand span.lite { color:var(--muted); font-weight:500; }
  .brand-logo { height:28px; width:auto; display:block; color:var(--ink); overflow:visible; }
  /* Sub-brand kilidi (CampusOnline | Studio / Business) — ince şık çizgi + thin karakter */
  /* Alt marka ("Business"/"Studio"): logodan daha ince ve daha koyu okunur; hiyerarşiyi
     punto + ağırlık farkı taşır, renk değil (Google Cloud / Adobe Express tipi kilit).
     Boşluk dengesi: .brand'ın flex gap'i 9px, buna margin-left ekleniyor → 9+7=16px,
     ayıraçtan metne de 16px. Eski hâlde 9+14=23px'e karşı 15px vardı, ayıraç "Business"a
     yapışık, logoya uzak duruyordu. */
  /* Alt marka ("Business"/"Studio"). Not: font 400'ün altına inmiyor (woff2 ekseni
     400-700; 200/300/400 birebir aynı render ediliyor), bu yüzden "daha hafif" görünüm
     ağırlıkla değil RENKLE veriliyor — #334155, paletin (Tailwind slate) --body ile
     --muted arasındaki basamağı. Punto büyürken tonun açılması dengeyi korur.
     Boşluklar: .brand'ın flex gap'i 9px + margin-left 4px = 13px, ayıraçtan metne de 13px. */
  .brand-sub { position:relative; margin-left:4px; padding-left:13px; font-size:18px; font-weight:400; color:#334155; letter-spacing:.01em; line-height:1;
    transition:margin-left .35s ease, padding-left .35s ease; }
  .brand-sub::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:22px; background:var(--border-strong);
    transition:opacity .25s ease; }
  /* Logo "co"ya katlanınca (bkz logo.js): ayıraç kaybolur, boşluk sıkışır → "co Business"
     tek kilit hâline gelir. Ayıraç genişken iki ayrı marka gibi okunuyordu. */
  .nav.is-collapsed .brand-sub { margin-left:0; padding-left:9px; }
  .nav.is-collapsed .brand-sub::before { opacity:0; }
  /* Logo animasyonu artık GSAP scroll-morph (assets/js/logo.js) — CampusOnline → co simgesi. */
  .nav-links { display:flex; align-items:center; gap:26px; }
  .nav-links a { font-size:15px; font-weight:500; color:var(--body); }
  .nav-links a:hover { color:var(--red-700); }
  .nav-actions { display:flex; align-items:center; gap:8px; }
  /* Giriş bilerek buton değil — tek CTA (Üye Ol) kalsın diye düz link. */
  .nav-login-link { background:none; border:0; padding:8px 4px; font-size:14px; font-weight:500;
    color:var(--body); cursor:pointer; }
  .nav-login-link:hover { color:var(--ink); text-decoration:underline; }
  /* Header'daki tek CTA, hemen yanındaki arama kutusuyla (pill) aynı radius dilini
     konuşsun diye — sitenin geri kalanındaki --radius-btn'e (6px) dokunmadan,
     yalnız bu bağlamda override. */
  .nav-cta-pill { border-radius:var(--radius-pill); }
  /* Dil seçici CTA'ya çok yapışık durup "üçüncü buton" gibi okunuyordu. */
  .lang-dd.nav-hide-mobile { margin-left:6px; }
  [x-cloak] { display:none !important; }
  
  /* Dil switcher (TR/EN) */
  /* Dil seçici — sade dropdown (pill/border yok, muted; baskın değil) */
  .lang-dd { position:relative; margin-left:2px; }
  .lang-dd-btn { display:inline-flex; align-items:center; gap:3px; padding:6px 6px; font-size:13px; font-weight:500; color:var(--muted); background:none; border:0; cursor:pointer; line-height:1; }
  .lang-dd-btn:hover { color:var(--ink); }
  .lang-dd-btn svg { width:11px; height:11px; opacity:.55; }
  .lang-dd-menu { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:5px; min-width:150px; z-index:60; }
  .lang-dd-menu a { display:block; padding:9px 12px; font-size:13px; color:var(--body); border-radius:8px; white-space:nowrap; }
  .lang-dd-menu a:hover { background:var(--bg); }
  .lang-dd-menu a.active { color:var(--red-700); font-weight:600; }
  
  /* Nav sol grup: logo + Eğitimler */
  .nav-left { display:flex; align-items:center; gap:24px; }
  /* Logo katlanınca (logo.js viewBox'ı simgeye daraltır) .nav-left 155px'ten 34px'e
     düşüyor ve space-between arama kutusunu sola kaydırıyordu. Açık genişliği rezerve
     ederek arama çubuğunu sabit tutar. 155px = 28px yükseklikteki logonun doğal genişliği;
     .brand-logo yüksekliği değişirse bu değer de güncellenmeli.
     Yalnız masaüstünde: mobilde morph zaten çalışmıyor (bkz logo.js). */
  @media (min-width:901px) { .nav-inner.is-consumer .nav-left { min-width:155px; } }
  .nav-egitimler { font-size:15px; font-weight:500; color:var(--body); }
  .nav-egitimler:hover { color:var(--red-700); }
  
  /* Global arama (üst bar): "Tüm Eğitimler | ara" birleşik pill + autocomplete */
  .nav-search { position:relative; flex:1; max-width:560px; margin:0 24px; display:flex; align-items:center;
    border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--bg);
    transition:border-color .15s, background .15s, box-shadow .15s; }
  .nav-search:focus-within { border-color:var(--red-600); background:#fff; box-shadow:0 0 0 3px rgba(86,73,246,.08); }
  .ns-catalog { padding:9px 16px; font-size:14px; font-weight:500; color:var(--body); white-space:nowrap;
    border-radius:var(--radius-pill) 0 0 var(--radius-pill); }
  .ns-catalog:hover { color:var(--red-700); }
  .ns-sep { width:1px; align-self:stretch; margin:8px 0; background:var(--border-strong); flex:none; }
  .nav-search .ns-icon { margin-left:12px; color:var(--faint); flex:none; }
  .nav-search input { flex:1; min-width:0; padding:9px 16px 9px 8px; border:none; background:transparent;
    font-size:14px; font-family:inherit; border-radius:0 var(--radius-pill) var(--radius-pill) 0; }
  .nav-search input:focus { outline:none; }
  /* background/border sıfırlaması ŞART: <button> olduğu için tarayıcı varsayılan
     çerçeve+zemin uyguluyordu ve ikon, yanındaki .nav-burger'ın aksine kutulu
     görünüyordu. Dokunma alanı 44px (WCAG 2.5.8) — görsel boyut değişmiyor,
     yalnız padding'le hedef büyüyor. */
  .nav-msearch { display:none; background:none; border:0; cursor:pointer; color:var(--body);
    padding:0; width:44px; height:44px; align-items:center; justify-content:center; border-radius:8px; }
  .nav-msearch:hover { color:var(--red-700); }
  @media (min-width:901px){ .nav-hide-desktop { display:none !important; } }
  .nav-suggest { position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; z-index:40; padding:6px; }
  .ns-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; }
  .ns-item:hover { background:var(--bg); }
  .ns-thumb { width:48px; height:36px; border-radius:6px; overflow:hidden; flex:none; background:linear-gradient(135deg,#334155,#0F172A); }
  .ns-thumb img { width:100%; height:100%; object-fit:cover; }
  .ns-text { display:flex; flex-direction:column; min-width:0; }
  .ns-title { font-size:14px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ns-meta { font-size:12px; color:var(--muted); }
  .ns-all { display:block; padding:10px; margin-top:4px; border-top:1px solid var(--border); font-size:13px; font-weight:500; color:var(--red-700); }
  .ns-all:hover { background:var(--red-50); }
  .ns-recent-head { display:flex; align-items:center; justify-content:space-between; padding:6px 10px 4px; }
  .ns-recent-head span { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
  .ns-recent-clear { background:none; border:0; padding:0; font-size:12px; color:var(--red-700); cursor:pointer; }
  .ns-recent-clear:hover { text-decoration:underline; }
  .ns-recent-item { display:flex; align-items:center; gap:4px; border-radius:8px; }
  .ns-recent-item:hover { background:var(--bg); }
  .ns-recent-link { flex:1; display:flex; align-items:center; gap:10px; padding:8px 6px 8px 10px; min-width:0; color:var(--ink); font-size:14px; }
  .ns-recent-link span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ns-recent-link svg { flex:none; color:var(--muted); }
  .ns-recent-x { flex:none; background:none; border:0; padding:6px 10px; color:var(--muted); cursor:pointer; font-size:12px; }
  .ns-recent-x:hover { color:var(--ink); }
  .ns-recent { border-bottom:1px solid var(--border); margin-bottom:4px; padding-bottom:4px; }
  /* ── Mobil navigasyon: hamburger + logo + arama (dünya standardı, sepetsiz — affiliate) ── */
  /* 44px dokunma hedefi (WCAG 2.5.8) — birincil mobil navigasyon kontrolü, eskiden 34px'ti */
  .nav-burger { display:none; background:none; border:0; color:var(--ink); padding:0; width:44px; height:44px;
    align-items:center; justify-content:center; margin-left:-10px; cursor:pointer; border-radius:8px; }
  .nav-burger:hover { background:var(--bg); }
  .nav-msearch-bar { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:12px 0; z-index:55; }
  .msb-field { display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); padding:10px 12px; }
  .msb-field svg { color:var(--faint); flex:none; }
  .msb-field input { flex:1; min-width:0; border:none; background:none; font-size:15px; font-family:inherit; }
  .msb-field input:focus { outline:none; }
  .msb-close { background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:2px 4px; }
  .msb-suggest { margin-top:8px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; max-height:58vh; overflow-y:auto; }
  /* Drawer */
  /* Drawer görünürlüğü tamamen CSS'te (bkz partials/nav.blade.php): panel DOM'da
     kalır, yalnız .is-open ile kayar. Alpine geçişi kullanılmıyor — takılıp panelin
     hiç açılmamasına yol açıyordu. visibility, kapalıyken odak/tıklama almasını da
     engeller (transform tek başına engellemez). */
  .drawer-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:10000;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s; }
  .drawer-backdrop.is-open { opacity:1; visibility:visible; }
  .drawer { position:fixed; top:0; left:0; bottom:0; width:min(84vw,340px); background:#fff; z-index:10001; padding:16px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; box-shadow:var(--shadow-lg);
    transform:translateX(-100%); visibility:hidden; transition:transform .25s ease, visibility .25s; }
  .drawer.is-open { transform:translateX(0); visibility:visible; }
  .drawer-head { display:flex; align-items:center; justify-content:space-between; }
  .drawer-brand svg, .drawer-brand img { height:26px; }
  .drawer-close { background:none; border:0; font-size:19px; color:var(--muted); cursor:pointer; line-height:1; }
  /* Drawer gezinme — TEK satır biçimi. Önceden kutulu CTA + çizgili liste +
     çerçeveli butonlar bir aradaydı; kullanıcı hangi öğenin ne olduğunu ayırt
     edemiyordu (2026-08-03). Artık gezinilebilir her şey aynı görünüyor,
     yalnız dönüşüm eylemleri buton kalıyor. */
  .drawer-section { padding:14px 6px 6px; font-size:11px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--muted); }
  .drawer-list { display:flex; flex-direction:column; }
  .drawer-list a { display:flex; align-items:center; gap:12px; min-height:46px; padding:11px 8px;
    font-size:15.5px; font-weight:500; color:var(--ink); border-radius:10px; }
  .drawer-list a svg { width:19px; height:19px; color:var(--muted); flex:none; }
  .drawer-list a:active, .drawer-list a:hover { background:var(--bg); }
  .drawer-list a.is-active { color:var(--red-700); font-weight:600; }
  .drawer-list a.is-active svg { color:var(--red-600); }
  .drawer-auth { display:flex; flex-direction:column; gap:10px; }
  .drawer-auth .btn { width:100%; justify-content:center; }
  .drawer-lang { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
  .drawer-lang > span { font-size:13px; color:var(--muted); font-weight:600; }
  .drawer-lang-opts { display:flex; gap:6px; }
  .drawer-lang-opts a { padding:6px 12px; font-size:13px; border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--body); }
  .drawer-lang-opts a.active { background:var(--ink); color:#fff; border-color:var(--ink); }
  
  @media (max-width:900px){
    .persona-bar { display:none; }             /* persona sekmeleri → drawer'a taşındı */
    .nav-search { display:none; }
    .nav-burger { display:inline-flex; align-items:center; }
    .nav-msearch { display:inline-flex; align-items:center; }
    /* Butonlar mobilde 44px dokunma hedefi (WCAG 2.5.8). Masaüstünde 39px kalır —
       imleçle 39px sorun değil, parmakla değil. .btn-lg zaten 46px. */
    .btn { min-height:44px; }
    .nav-hide-mobile { display:none; }          /* Giriş + CTA + dil → drawer'da */
    .nav-inner { height:56px; }
    /* Logonun optik hizası ve boyutu — ölçüyle değil GÖZLE ayarlandı (2026-08-03).
       Hamburger ikonu kare bir kutuda ortalı, logo ise yazı tipi taban çizgisiyle
       geliyor; ikisi matematiksel olarak hizalı olsa da göze kaçık duruyordu. */
    .nav-left .brand { transform:translate(-2px, 1px); }
    .nav-left .brand-logo { height:25px; }
    .nav-left { gap:10px; }
  }
  
  /* Hero — Stripe hissi: büyük başlık + ölçülü aksan wash */
  .hero { position:relative; padding:76px 0 64px; overflow:hidden; }
  .hero::before { content:''; position:absolute; top:-160px; right:-120px; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(86,73,246,.07), rgba(86,73,246,0) 68%); pointer-events:none; z-index:0; }
  .hero .container { position:relative; z-index:1; }
  .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
  .hero .eyebrow { margin-bottom:16px; }
  /* Global h1 (max 62px) ana sayfa hero'sunda 1. satırı taşırıp 3 satıra düşürüyordu:
     "Dünyanın En İyilerinden Öğren," 62px'te 788px yer istiyor, sütunda 653px var.
     48px'te 606px'e iner → <br> ile birlikte tam 2 satır, tüm 2-sütun aralığında güvenli. */
  .hero h1 { max-width:720px; font-size:clamp(2.25rem, 3.4vw, 3rem); }
  .hero p.lead { font-size:clamp(1.125rem,1.6vw,1.35rem); color:var(--muted); max-width:520px; margin-top:20px; line-height:1.5; }
  .hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
  .hero-sub { margin-top:18px; font-size:14px; color:var(--muted); }
  /* Hero sağ görsel — iki zarif panel: öne çıkan kurs + rafine istatistik (sade, prestijli) */
  .hero-bento { display:grid; grid-template-columns:1.14fr .86fr; gap:16px; height:452px; }
  .bento { background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:0 18px 46px rgba(15,23,42,.10); overflow:hidden; position:relative; }
  .bento-course { display:flex; flex-direction:column; }
  .bento-course-thumb { flex:1; min-height:0; background:linear-gradient(135deg,#334155,#0F172A); }
  .bento-course-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .bento-course-body { padding:20px 22px 22px; }
  .bento-prov { font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
  .bento-course-body strong { display:block; font-size:17px; line-height:1.34; margin:7px 0 14px; color:var(--ink); font-weight:650; }
  .bento-foot { display:flex; align-items:center; gap:10px; }
  .bento-rating { font-size:14px; font-weight:700; color:var(--ink); } .bento-rating .star { color:#F59E0B; }
  .bento-tr { font-size:11px; font-weight:600; color:#0F766E; background:#CCFBF1; padding:3px 9px; border-radius:var(--radius-pill); }
  /* Koyu istatistik paneli — tam boy, sade, editoryal */
  .bento-stat { display:flex; flex-direction:column; justify-content:space-between; padding:28px 26px; color:#fff;
    background:linear-gradient(158deg,#213049,#0E1626); border-color:transparent; }
  .bento-stat::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 84% 10%, rgba(86,73,246,.28), transparent 52%); pointer-events:none; }
  .bento-stat-top { position:relative; }
  .bento-stat-num { display:block; font-size:46px; font-weight:700; letter-spacing:-.035em; line-height:1; }
  .bento-stat-label { display:block; font-size:14.5px; color:#CBD5E1; margin-top:9px; }
  .bento-stat-list { position:relative; display:flex; flex-direction:column; gap:15px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10); }
  .bento-stat-list div { display:flex; align-items:baseline; gap:11px; }
  .bento-stat-list b { font-size:20px; font-weight:700; letter-spacing:-.02em; min-width:54px; color:#fff; }
  .bento-stat-list span { font-size:13px; color:#94A3B8; }
  @media (max-width:980px){ .hero-grid { grid-template-columns:1fr; } .hero-bento { display:none; } }
  /* İlginizi çekebilecek eğitimler — carousel (masaüstü ~4 + peek, mobil ~1.5) */
  .cd-related { margin-top:56px; padding-top:40px; border-top:1px solid var(--border); }
  .cd-related-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
  .cd-related-head h2 { font-size:1.4rem; font-weight:600; margin:0; }
  .cd-related-nav { display:flex; gap:8px; }
  .cd-related-nav button { width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:50%; font-size:20px; line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; }
  .cd-related-nav button:hover { border-color:var(--red-600); color:var(--red-600); }
  .cd-related-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .cd-related-track > .card { flex:0 0 22.5%; scroll-snap-align:start; }
  .cd-related-track::-webkit-scrollbar { height:6px; }
  .cd-related-track::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
  @media (max-width:900px){ .cd-related-track > .card { flex:0 0 42%; } .cd-related-nav { display:none; } }
  @media (max-width:600px){ .cd-related-track > .card { flex:0 0 70%; } }
  
  /* Yönlendirme modal'ı — minimal handoff (CampusOnline → platform) */
  .rd-overlay { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); }
  .rd-modal { position:relative; width:min(92vw,440px); background:#fff; border-radius:20px; padding:34px 30px 28px; box-shadow:0 24px 60px rgba(15,23,42,.28); text-align:center; transition:opacity .2s ease, transform .2s ease; }
  .rd-hidden { opacity:0; transform:scale(.96); }
  .rd-shown { opacity:1; transform:scale(1); }
  .rd-x { position:absolute; top:14px; right:16px; background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; }
  .rd-brands { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:22px; }
  .rd-co { color:var(--red-600); display:inline-flex; }          /* CampusOnline logosu kırmızı (currentColor) */
  .rd-co svg, .rd-co img { height:26px; width:auto; }
  .rd-co .brand-logo { color:var(--red-600); }   /* .brand-logo kendi color:ink'i SVG'ye doğrudan yazıyor — inherited kırmızıyı eziyordu, burada üzerine yaz */
  .rd-swap { width:20px; height:20px; color:var(--faint); flex:none; }
  .rd-plat-logo { height:17px; width:auto; display:block; }  /* coursera/edX wordmark'ı kalın → biraz daha küçük tutuldu */
  .rd-plat { font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
  .rd-title { font-size:1.25rem; font-weight:600; margin-bottom:10px; }
  .rd-desc { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
  .rd-actions { display:flex; flex-direction:column; gap:10px; }
  .rd-actions .btn { width:100%; justify-content:center; }
  /* Yönlendirme interstitial — Class Central tarzı animasyonlu barlar (buton yok, otomatik) */
  /* Yolculuk motifi — CampusOnline'dan platforma "seyahat" (Class Central'ın 3-bar'ından bilinçli olarak farklı,
     tek kırmızı komet + öncü nokta; marka rengiyle tutarlı, jenerik değil) */
  .rd-route { position:relative; height:5px; border-radius:6px; background:var(--red-50); margin:26px 6px 10px; overflow:hidden; }
  .rd-route-comet { position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:6px;
    background:linear-gradient(90deg, transparent, var(--red-600) 70%, var(--red-700));
    animation:rdcomet 1.6s cubic-bezier(.45,0,.2,1) infinite; }
  .rd-route-head { position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
    background:var(--red-600); box-shadow:0 0 0 3px var(--red-50), 0 2px 6px rgba(86,73,246,.35);
    transform:translateY(-50%); animation:rdhead 1.6s cubic-bezier(.45,0,.2,1) infinite; }
  @keyframes rdcomet { 0%{ left:-40%; } 100%{ left:100%; } }
  @keyframes rdhead { 0%{ left:0%; opacity:0; } 10%{ opacity:1; } 92%{ opacity:1; } 100%{ left:calc(100% - 9px); opacity:0; } }
  .rd-cancel { margin-top:18px; background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; }
  .rd-cancel:hover { color:var(--ink); }
  
  /* ♡ Kaydet — kart üzeri */
  .card-thumb { position:relative; }
  .card-save { position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:.15s; }
  .card-save svg { width:18px; height:18px; fill:none; color:var(--muted); }
  .card-save:hover { background:#fff; transform:scale(1.08); }
  .card-save.is-saved svg { fill:var(--red-600); color:var(--red-600); }
  /* ♡ Kaydet — kurs detayı sidebar */
  .cd-save-btn { margin-top:10px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); background:#fff; color:var(--ink); font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; transition:.15s; }
  .cd-save-btn svg { width:18px; height:18px; fill:none; color:var(--muted); }
  .cd-save-btn:hover { border-color:var(--red-600); }
  .cd-save-btn.is-saved { border-color:var(--red-600); color:var(--red-700); background:var(--red-50); }
  .cd-save-btn.is-saved svg { fill:var(--red-600); color:var(--red-600); }
  
  /* ── Mobil sabit kayıt çubuğu (kurs detayı) ─────────────────────────────────
     Masaüstünde hiç basılmaz. Mobilde sayfa ~7000px ve fiyat kartı yalnız en
     tepede olduğu için kaydıran kullanıcının kayıt yolu kayboluyordu. Yukarıdaki
     inline CTA ekrandan çıkınca belirir (IntersectionObserver, bkz. blade). */
  .cd-mobilebar { display:none; }
  @media (max-width:900px) {
    .cd-mobilebar {
      display:flex; align-items:center; gap:14px;
      position:fixed; left:0; right:0; bottom:0; z-index:70;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:var(--surface); border-top:1px solid var(--border);
      box-shadow:0 -4px 20px rgba(15,23,42,.08);
      /* --vv-alt: iOS Safari düzeltmesi, nav.js tarafından yazılır.
         Sorun: aşağı kaydırırken Safari alt araç çubuğunu gizliyor, GÖRSEL viewport
         uzuyor ama position:fixed öğe LAYOUT viewport'un altına yapışık kaldığı için
         çubuk ekranın ortalarında havada kalıyor, altından sayfa içeriği görünüyor.
         Salt CSS ile çözülmüyor — bottom:0 zaten "doğru", yanlış olan hangi
         viewport'a hizalandığı. Bu yüzden gerçek fark VisualViewport API'siyle
         ölçülüp çubuk o kadar aşağı ötelenir. API yoksa değer 0 kalır (masaüstü,
         Android — onlarda zaten sorun yok). */
      transform:translateY(calc(110% + var(--vv-alt, 0px)));
      transition:transform .25s ease;
    }
    .cd-mobilebar.is-visible { transform:translateY(var(--vv-alt, 0px)); }
    .cd-mobilebar-price { flex:none; display:flex; flex-direction:column; line-height:1.15; }
    .cd-mobilebar-price s { font-size:12px; color:var(--faint); }
    .cd-mobilebar-price strong { font-size:19px; color:var(--ink); font-weight:600; }
    .cd-mobilebar-cta { flex:1; min-width:0; }
    .cd-mobilebar-cta .cd-cta { width:100%; margin:0; }
    /* Destek balonu (.sbot bottom:22px z-index:80) çubuğun üstünde kalıp CTA'yı
       kapatıyordu — çubuk görünürken yukarı kaydırılır. */
    body.has-mobilebar .sbot { bottom:calc(78px + env(safe-area-inset-bottom)); transition:bottom .25s ease; }
  }
  /* Fiyat-düşüş uyarısı (KVKK onaylı) */
  .cd-alert { margin-top:12px; }
  .cd-alert-toggle { display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; padding:2px 0; font-family:inherit; }
  .cd-alert-toggle svg { width:16px; height:16px; }
  .cd-alert-toggle:hover { color:var(--red-700); }
  .cd-alert-form { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
  .cd-alert-form input[type=email] { padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); font-size:14px; font-family:inherit; }
  .cd-alert-form input[type=email]:focus { outline:none; border-color:var(--red-600); }
  .cd-alert-kvkk { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); line-height:1.4; cursor:pointer; }
  .cd-alert-kvkk input { margin-top:2px; flex:none; }
  .cd-alert-submit { width:100%; justify-content:center; }
  .cd-alert-submit:disabled { opacity:.5; cursor:not-allowed; }
  .cd-alert-done { margin-top:10px; font-size:13px; color:#0F766E; font-weight:600; }
  
  /* Karşılaştırma alt çubuğu */
  .cmp-bar { position:fixed; left:0; right:0; bottom:0; z-index:65; background:#fff; border-top:1px solid var(--border); box-shadow:0 -6px 24px rgba(15,23,42,.1); transition:transform .25s ease; }
  .cmp-bar-hidden { transform:translateY(100%); } .cmp-bar-shown { transform:translateY(0); }
  .cmp-bar-in { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
  .cmp-bar-left { display:flex; align-items:center; gap:14px; min-width:0; }
  .cmp-thumbs { display:flex; }
  .cmp-thumbs img { width:44px; height:30px; object-fit:cover; border-radius:5px; border:2px solid #fff; margin-left:-8px; box-shadow:var(--shadow-sm); }
  .cmp-thumbs img:first-child { margin-left:0; }
  .cmp-more { align-self:center; margin-left:6px; font-size:13px; color:var(--muted); font-weight:600; }
  .cmp-count { font-size:14px; color:var(--body); white-space:nowrap; }
  .cmp-bar-right { display:flex; align-items:center; gap:14px; }
  .cmp-clear { background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; }
  .cmp-clear:hover { color:var(--red-700); }
  @media (max-width:600px){ .cmp-count { display:none; } }
  
  /* Karşılaştırma tablosu (tam ekran) */
  .cmp-overlay { position:fixed; inset:0; z-index:10001; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
  .cmp-modal { background:#fff; border-radius:18px; width:min(96vw,920px); max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; }
  .cmp-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
  .cmp-head h3 { font-size:1.15rem; font-weight:600; }
  .cmp-x { background:none; border:0; font-size:16px; color:var(--muted); cursor:pointer; }
  .cmp-table-wrap { overflow:auto; }
  .cmp-table { width:100%; border-collapse:collapse; }
  .cmp-table th, .cmp-table td { padding:12px 14px; text-align:center; font-size:14px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .cmp-rowlabel { text-align:left !important; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; white-space:nowrap; background:var(--bg); position:sticky; left:0; z-index:1; }
  .cmp-col { position:relative; min-width:150px; vertical-align:bottom; }
  .cmp-rm { position:absolute; top:6px; right:6px; background:none; border:0; color:var(--faint); font-size:12px; cursor:pointer; }
  .cmp-rm:hover { color:var(--red-600); }
  .cmp-col-head { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink); }
  .cmp-col-thumb img { width:112px; height:62px; object-fit:cover; border-radius:8px; }
  .cmp-col-title { font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cmp-star { color:#F59E0B; }
  .cmp-yes { color:#0F766E; font-weight:700; font-size:16px; }
  .cmp-dash { color:var(--faint); }
  .cmp-best { background:#ECFDF5; font-weight:700; color:#065F46; }
  .cmp-hl-row td { background:#F0FDFA; }
  .cmp-hl-row .cmp-rowlabel { color:#0F766E; background:#CCFBF1; }
  .cmp-action-row td { border-bottom:0; padding-top:16px; }
  .cmp-go { padding:9px 14px; font-size:13px; }
  
  /* Exit-intent (yalnız masaüstü) */
  .exit-toast { position:fixed; left:24px; bottom:24px; z-index:66; width:320px; max-width:calc(100vw - 32px); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:18px 20px; }
  .exit-toast strong { display:block; font-size:15px; margin-bottom:4px; color:var(--ink); }
  .exit-toast p { font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
  .exit-x { position:absolute; top:10px; right:12px; background:none; border:0; color:var(--muted); cursor:pointer; }
  .btn-sm { padding:8px 14px; font-size:13px; }
  @media (max-width:600px){ .exit-toast { display:none; } }
  .hero-sub a { color:var(--red-700); font-weight:500; }
  
  /* Güven şeridi */
  .trust { padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
  .trust-label { font-size:13px; color:var(--muted); text-align:center; margin-bottom:16px; }
  /* Trust band — 6 esnek slot; logolar üniform 560×140 canvas (iki-katman optik normalize)
     → max-height display hepsini aynı yüksekliğe getirir (hub deseni, orantılı) */
  .trust-logos { display:grid; grid-template-columns:repeat(6,1fr); justify-content:center; gap:16px; align-items:center;
    max-width:1120px; margin:0 auto; min-height:52px; animation:trustIn .7s ease both; }
  @keyframes trustIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  .trust-slot { display:flex; align-items:center; justify-content:center; height:52px; }
  .uni-logo { max-height:38px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(100%); opacity:.72; transition:filter .3s, opacity .3s; }
  .trust-slot:hover .uni-logo { filter:grayscale(0); opacity:1 !important; }
  @media (max-width:900px){ .trust-logos { grid-template-columns:repeat(3,1fr); gap:14px 16px; } }
  @media (max-width:520px){ .trust-logos { grid-template-columns:repeat(2,1fr); } }
  
  /* Section başlık */
  .section { padding:80px 0; }
  .section-head { max-width:640px; margin-bottom:40px; }
  .section-head .eyebrow { margin-bottom:12px; }
  .section-head p { color:var(--muted); margin-top:12px; font-size:1.0625rem; }
  
  /* Katalog kartları */
  .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .card { display:block; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:.15s; }
  .card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
  .card-thumb { height:150px; background:linear-gradient(135deg,#334155,#0F172A); }
  .card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .card-body { padding:16px; }
  .card-cat { font-size:12.5px; font-weight:600; color:#475569; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card h4 { margin:6px 0 6px; font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
  .card .meta { font-size:13px; color:var(--muted); }
  /* Kart alt şeridi: gerçek puan + TR altyazı rozeti + aksiyon */
  .card-foot { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .card-signals { display:flex; align-items:center; gap:8px; min-height:20px; }
  .card-rating { display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:700; color:var(--ink); }
  .card-rating .star { color:#F59E0B; font-size:13px; line-height:1; }
  .card-rating .rc { font-weight:500; color:var(--muted); font-size:12px; }
  .card-tr { font-size:11px; font-weight:600; color:#0F766E; background:#CCFBF1; padding:2px 7px; border-radius:var(--radius-pill); letter-spacing:.01em; }
  .card-foot .price { margin:0; font-weight:600; color:var(--ink); font-size:14px; white-space:nowrap; }
  
  /* Kurumsal band (B2B kapısı) — koyu, ayrışan */
  .enterprise { background:var(--ink); color:#CBD5E1; border-radius:var(--radius-xl); padding:56px 48px; margin:40px 0; }
  .enterprise .eyebrow { color:#DCD9FC; }
  .enterprise h2 { color:#fff; margin:14px 0; max-width:560px; }
  .enterprise p { color:#94A3B8; max-width:600px; font-size:1.0625rem; }
  .enterprise-feats { display:flex; gap:32px; margin:28px 0; flex-wrap:wrap; }
  .enterprise-feat { display:flex; align-items:flex-start; gap:10px; max-width:260px; }
  .enterprise-feat .dot { width:8px; height:8px; border-radius:50%; background:var(--red-600); margin-top:8px; flex:none; }
  .enterprise-feat strong { color:#fff; display:block; font-size:15px; }
  .enterprise-feat span { font-size:13px; color:#94A3B8; }
  
  /* ── Footer ──────────────────────────────────────────────────────────────────
     Beyaz yüzey (sayfa bg'si #F8FAFC üstünde ayrı bir "panel" gibi okunur) + grid.
     Eski hali flex+space-between'di; marka bloğu 260px'te kesilince aradaki boşluk
     devasa oluyor, tek linkli "Üniversite" sütunu sağda yalnız kalıyordu. */
  .footer { border-top:1px solid var(--border); background:var(--surface); margin-top:56px; color:var(--muted); font-size:14px; }
  /* Marka bloğu + 4 gezinme sütunu (Bireysel/Kurumsal/Kategoriler/CampusOnline).
     Marka sütunu künye ve adres taşıdığı için diğerlerinden geniş. */
  .footer-top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:36px; padding:56px 0 40px; }
  /* Footer logosu: marka kırmızısı + "co" simgesi KAPALI (sadece wordmark).
     Simgeyi normalde logo.js gizliyor (GSAP fromTo autoAlpha:0, sayfa yüklenirken uygulanır);
     footer instance'ı anime olmadığı için ID taşımıyor → gizleyen kimse kalmıyordu ve
     simge wordmark'ın üstüne biniyordu. Burada CSS ile kapatılıyor. */
  .footer-logo { display:block; margin-bottom:14px; }
  .footer-logo .brand-logo { height:26px; width:auto; display:block; color:var(--red-600); }
  /* Anime olmayan her logo kopyasında "co" simgesi kapalı. Simgeyi normalde logo.js
     gizliyor (GSAP fromTo autoAlpha:0, sayfa yüklenirken uygulanır); is-static kopyalar
     ID taşımadığı için gizleyen kimse kalmıyor ve simge wordmark'ın "C"sinin üstüne
     binip "©ampusOnline" gibi okunuyordu. Tek yerde çözülür ki yeni bir statik
     yerleşim eklendiğinde aynı hata tekrarlanmasın. */
  .brand-logo.is-static .logo-symbol { display:none; }
  /* Mobilde morph HİÇ çalışmıyor (logo.js 900px altında erken dönüyor), dolayısıyla
     nav'ın anime logosunda da simgeyi gizleyen kimse kalmıyor → header "©ampusOnline"
     gibi okunuyordu. 900px altında istisnasız tüm logolarda kapat. */
  @media (max-width:900px) { .brand-logo .logo-symbol { display:none; } }
  /* Masaüstü nav'daki anime logo: simgeyi gizleyen GSAP tween'i ("#group-symbol" fromTo)
     timeline'da t=0'da değil, scroll tetiklenince (tl.play()) başlıyor — paused bir
     timeline yalnız playhead'in ANDA üzerinde durduğu tween'lerin "from" değerini hemen
     uygular, sonrakileri değil. Sonuç: sayfa ilk açıldığında (henüz scroll yok) simge
     opacity:1/transform:none kalıyor, "C" harfinin üstüne biniyor; kullanıcı bir kez
     scroll edip tl.play()/reverse() çalışınca GSAP inline style yazıp kendiliğinden
     düzeliyordu (2026-07-31, "logo bozuk geliyor, loading esnasında" bulgusuyla fark
     edildi). CSS'te varsayılanı GSAP'ın autoAlpha:0 hedefiyle AYNI yapıp ilk boyamadan
     itibaren doğru göstermek daha sağlam: visibility:hidden kullanıyoruz (display:none
     DEĞİL) çünkü logo.js simgenin getBBox()'ını okuyup nav kutusunu ona göre daraltıyor;
     display:none bbox'ı sıfırlardı. GSAP scroll'da devreye girince inline autoAlpha
     stiliyle bunun üzerine yazıyor, çakışma yok. */
  .brand-logo:not(.is-static) .logo-symbol { opacity:0; visibility:hidden; }
  .footer-tagline { max-width:300px; margin-bottom:20px; line-height:1.55; }
  
  /* İletişim — güven sinyali; adres/telefon/e-posta eskiden hiç yoktu */
  .footer-contact { font-style:normal; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
  .footer-contact span, .footer-contact a { display:flex; align-items:flex-start; gap:9px; max-width:320px; line-height:1.5; color:var(--muted); }
  .footer-contact svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--faint); }
  .footer-contact a:hover { color:var(--red-700); }
  .footer-contact a:hover svg { color:var(--red-600); }
  
  .footer-social { display:flex; gap:8px; list-style:none; }
  .footer-social a { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border);
    border-radius:var(--radius); color:var(--muted); transition:border-color .15s, color .15s, background .15s; }
  .footer-social a:hover { border-color:var(--border-strong); color:var(--red-700); background:var(--bg); }
  .footer-social svg { width:17px; height:17px; }
  
  .footer-nav h2 { color:var(--ink); font-size:13.5px; font-weight:600; margin-bottom:14px; letter-spacing:.01em; }
  .footer-nav ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
  .footer-nav a { color:var(--muted); line-height:1.4; }
  .footer-nav a:hover { color:var(--red-700); }
  
  /* Künye şeridi — satıcı kimliği (ünvan/MERSİS/vergi no) */
  .footer-company { display:flex; flex-wrap:wrap; gap:6px 20px; align-items:baseline;
    padding:16px 0; border-top:1px solid var(--border); font-size:13px; color:var(--faint); }
  .footer-company strong { color:var(--body); font-weight:600; }
  
  .footer-legal { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap;
    padding:16px 0 28px; border-top:1px solid var(--border); font-size:13px; }
  .footer-legal-links { display:flex; gap:6px 20px; flex-wrap:wrap; }
  .footer-legal-links a { color:var(--muted); }
  .footer-legal-links a:hover { color:var(--red-700); }
  
  @media (max-width:900px) {
    .footer-top { grid-template-columns:1fr 1fr; gap:36px 28px; padding:44px 0 32px; }
    .footer-brand { grid-column:1 / -1; }
    .footer-tagline, .footer-contact span, .footer-contact a { max-width:none; }
  }
  @media (max-width:560px) {
    .footer-top { grid-template-columns:1fr; gap:30px; }
    .footer-legal { justify-content:flex-start; }
  }
  
  /* Katalog sayfası (/egitimler) */
  .catalog { padding:28px 0 72px; }
  .catalog-head { margin-bottom:8px; }
  /* Bağlamsal özet (h1) — büyük başlık yok, üst navdaki arama yeterli */
  .catalog-lead { font-size:1.0625rem; font-weight:500; color:var(--body); letter-spacing:-.01em; line-height:1.45; max-width:760px; }
  .catalog-search { display:flex; gap:10px; margin-top:20px; max-width:640px; }
  .catalog-search input { flex:1; padding:13px 16px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); font-size:15px; font-family:inherit; box-shadow:var(--shadow-btn); }
  .catalog-search input:focus { outline:none; border-color:var(--red-600); }
  .catalog-body { display:grid; grid-template-columns:250px 1fr; gap:36px; margin-top:32px; align-items:start; }
  .catalog-filters .filter-group { margin-bottom:26px; }
  .catalog-filters h4 { font-size:14px; margin-bottom:10px; }
  .catalog-filters ul { list-style:none; }
  .catalog-filters ul.scroll { max-height:52vh; overflow-y:auto; padding-right:4px; }
  .catalog-filters a { display:flex; justify-content:space-between; gap:10px; padding:7px 9px; border-radius:6px; font-size:13.5px; color:var(--body); line-height:1.3; }
  .catalog-filters a:hover { background:var(--bg); }
  .catalog-filters a.active { background:var(--red-50); color:var(--red-800); font-weight:600; }
  .catalog-filters .pc { color:var(--faint); font-size:12px; flex:none; }
  .filter-more { background:none; border:none; color:var(--red-700); font-size:13px; font-weight:500; cursor:pointer; padding:7px 9px; font-family:inherit; text-align:left; }
  .filter-more:hover { text-decoration:underline; }
  .grid.grid-3 { grid-template-columns:repeat(3,1fr); }
  /* Aktif filtre şeridi — etiketli, tek tek kaldırılabilir chip'ler */
  .catalog-active { margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .catalog-active .ca-label { font-size:13px; color:var(--muted); font-weight:600; }
  .ca-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 11px 5px 9px; font-size:13.5px; color:var(--ink); font-weight:500; }
  .ca-chip:hover { border-color:var(--red-600); }
  .ca-chip .ca-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; }
  .ca-chip .ca-x { color:var(--muted); font-weight:600; font-size:15px; line-height:1; }
  .ca-chip:hover .ca-x { color:var(--red-600); }
  .ca-clear { font-size:13px; color:var(--red-700); font-weight:600; margin-left:4px; }
  /* Kategori kapıları — indekslenebilir kategori sayfalarına taranabilir bağlantı.
     Yalnız filtresiz katalog görünümünde; filtre açıkken alakasız gürültü olur. */
  .cat-hubs { margin-top:48px; padding-top:28px; border-top:1px solid var(--border); }
  .cat-hubs h2 { font-size:18px; margin:0 0 14px; color:var(--ink); }
  .cat-hubs ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
  .cat-hubs a { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border);
    border-radius:999px; font-size:14px; color:var(--ink); background:#fff; min-height:36px; }
  .cat-hubs a:hover { border-color:var(--red-600); color:var(--red-700); }
  .cat-hubs .pc { color:var(--muted); font-size:12px; }
  .pagination { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:44px; }
  .pagination a { color:var(--red-700); font-weight:500; }
  .pagination span { color:var(--muted); font-size:14px; }
  /* Masaüstünde filtre çubuğu/sheet parçaları görünmez — kenar çubuğu zaten açık */
  .cat-filter-btn, .cat-sheet-backdrop, .cat-sheet-head, .cat-sheet-foot { display:none; }
  
  @media (max-width:820px){
    .catalog-body { grid-template-columns:1fr; }
    .grid.grid-3 { grid-template-columns:repeat(2,1fr); }
  
    /* MOBİL FİLTRE PANELİ — filtreler artık sonuçları itmiyor, alttan açılan bir
       panelde duruyor (bkz catalog.blade.php). Sayfa açılır açılmaz eğitimler
       görünüyor; önceden ~5 ekran filtre çipi kaydırmak gerekiyordu. */
    .cat-filter-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px;
      margin-bottom:18px; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
      font-family:inherit; font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer; }
    .cat-filter-btn svg { width:18px; height:18px; }
    .cat-filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
      padding:0 6px; border-radius:999px; background:var(--red-600); color:#fff; font-size:12px; font-weight:700; }
  
    /* z-index çerez çubuğunun (.cconsent, 9998) ÜSTÜNDE olmak zorunda: çubuk da
       ekranın altına yapışık ve panelin "Sonuçları gör" butonunu tam olarak
       örtüyordu — çerezi henüz kabul etmemiş ilk ziyaretçi filtreyi uygulayamıyordu.
       Panel kapanınca çubuk yine erişilebilir kalıyor. */
    .cat-sheet-backdrop { display:block; position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.5);
      opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s; }
    .cat-sheet-backdrop.is-open { opacity:1; visibility:visible; }
  
    .catalog-filters { position:fixed; left:0; right:0; bottom:0; z-index:10001; max-height:88dvh;
      display:flex; flex-direction:column; background:var(--surface);
      border-radius:18px 18px 0 0; box-shadow:0 -8px 32px rgba(15,23,42,.18);
      transform:translateY(100%); visibility:hidden; transition:transform .28s ease, visibility .28s; }
    .catalog-filters.is-open { transform:translateY(0); visibility:visible; }
  
    .cat-sheet-head { display:flex; align-items:center; justify-content:space-between; flex:none;
      padding:16px 18px 12px; border-bottom:1px solid var(--border); }
    .cat-sheet-head strong { font-size:1.0625rem; color:var(--ink); }
    .cat-sheet-head button { background:none; border:0; font-size:19px; color:var(--muted); cursor:pointer;
      min-width:44px; min-height:44px; }
  
    /* Kaydırılabilir gövde — başlık ve alt bar sabit kalır */
    .cat-sheet-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:14px; }
    .catalog-filters .filter-group { margin:0; padding:0 18px 18px; }
    .catalog-filters ul, .catalog-filters ul.scroll { max-height:none; display:flex; flex-wrap:wrap; gap:6px; }
    .catalog-filters a { border:1px solid var(--border); min-height:38px; align-items:center; }
  
    .cat-sheet-foot { display:flex; align-items:center; gap:12px; flex:none;
      padding:12px 18px calc(12px + env(safe-area-inset-bottom));
      border-top:1px solid var(--border); background:var(--surface); }
    .cat-sheet-foot .btn { flex:1; }
    .cat-sheet-clear { flex:none; color:var(--muted); font-size:14px; padding:10px 4px; }
  }
  
  /* Satış sayfası (/egitim/{slug}) */
  .cd { padding:32px 0 72px; }
  /* row-gap:0 — .cd-head ayrı bir satır olduğu için 44px'lik boşluk başlıkla içerik
     arasına da girerdi; dikey boşluklar zaten kendi margin'lerinden geliyor. */
  .cd-grid { display:grid; grid-template-columns:1fr 360px; column-gap:44px; row-gap:0; align-items:start; }
  /* Masaüstünde .cd-head ve .cd-main sol sütunda üst üste, .cd-side ikisinin
     hizasında sağda: başlık .cd-main'den çıkarılmadan önceki görünümün aynısı. */
  .cd-head { grid-column:1; grid-row:1; min-width:0; }
  .cd-main { grid-column:1; grid-row:2; }
  .cd-side { grid-column:2; grid-row:1 / span 2; }
  /* Sidebar hücresi ana içerik kadar UZASIN (align-self:stretch) — yoksa sticky kartın "kayacak
     alanı" kalmaz, kısa sidebar kutusunun sonunda hemen sayfayla birlikte kaybolur (co_pro_new
     .cd-side{align-self:stretch} birebir — TOBB'daki kalıcı sticky davranışının sırrı bu). */
  .cd-side { align-self:stretch; }
  .cd-crumb { font-size:13px; color:var(--muted); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
  .cd-crumb a { color:var(--muted); } .cd-crumb a:hover { color:var(--red-700); }
  .cd-crumb-current { color:var(--ink); font-weight:600; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cd-badges { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .cd-platform { background:var(--red-50); color:var(--red-800); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:var(--radius-pill); }
  .cd-prov { font-size:14px; color:var(--muted); font-weight:500; }
  /* Eğitimi veren kurum rozeti (logo veya monogram + ad) */
  .prov-badge { display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; text-decoration:none; border-radius:8px; transition:background .12s; }
  .prov-badge:hover { background:var(--bg); }
  .prov-badge:hover .prov-badge-name { color:var(--red-600); }
  .prov-badge-logo { height:44px; max-width:190px; width:auto; object-fit:contain; display:block; }
  .prov-badge-mono { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; color:#fff; font-weight:700; font-size:16px; letter-spacing:.02em; flex:none; }
  .prov-badge-name { font-size:16px; color:var(--ink); font-weight:500; }
  .cd-main { min-width:0; }
  /* Seçici .cd-main h1 İDİ; başlık .cd-head'e taşınınca eşleşmeyi bıraktı ve genel
     h1 kuralı — clamp(2.375rem, 4.8vw, 3.9rem) — devreye girdi: masaüstünde ~61px,
     mobilde ~38px. Satış sayfası için fazlasıyla iri.
     Yeni ölçek dönüşüm odaklı: 26px mobil → 36px masaüstü (Udemy/Coursera ürün
     sayfası başlıkları da bu aralıkta). Başlık ne satıldığını söylemeli ama ekranı
     yutmamalı; dikkati fiyat kartı ve CTA ile paylaşması gerekiyor. */
  .cd-head h1 { font-size:clamp(1.625rem,2.6vw,2.25rem); font-weight:700; letter-spacing:-.025em; line-height:1.18; }
  /* Sosyal kanıt satırı: puan + kayıtlı öğrenci + TR altyazı */
  .cd-social { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:14px; }
  .cd-rating { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); font-size:15px; }
  .cd-rating .star { color:#F59E0B; }
  .cd-rating .cd-rc { font-weight:500; color:var(--muted); font-size:13.5px; }
  .cd-enrolled { display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--muted); font-weight:500; }
  .cd-enrolled svg { width:15px; height:15px; flex:none; color:var(--faint); }
  /* Öğrenecekleriniz / Kimler katılabilir — CSS columns (co_pro_new deseni): uzun madde kısa
     maddenin altında boşluk YARATMAZ (grid'in satır-hizası sorunu columns'ta yok). */
  .cd-skills { list-style:none; column-count:2; column-gap:36px; margin:0; padding:0; }
  .cd-skills li { break-inside:avoid; position:relative; padding-left:26px; font-size:15px; color:var(--body); line-height:1.55; margin-bottom:14px; }
  .cd-skills li:last-child { margin-bottom:0; }
  .cd-skills li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--red-600); font-weight:700; }
  @media (max-width:560px){ .cd-skills { column-count:1; } }
  /* Sertifika bölümü — TOBB (co_pro_new) birebir: güven şeridi üstte, paspartu çerçeveli
     örnek görsel ortada, kural listesi ALTINDA (yan yana değil). */
  .cd-cert-trust { display:flex; flex-wrap:wrap; gap:14px 32px; margin-bottom:22px; }
  .cd-cert-trust span { display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); font-weight:600; }
  .cd-cert-badgeimg { height:22px; width:auto; object-fit:contain; flex:none; }
  .cd-cert-paper { position:relative; border:1px solid var(--border); border-radius:4px; padding:clamp(20px,4.5vw,48px); background:var(--bg); box-shadow:0 24px 60px -20px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.04); }
  .cd-cert-img { display:block; width:100%; height:auto; border-radius:2px; }
  .cd-cert-notes { list-style:none; margin:24px 0 0; padding:0; column-count:1; }
  .cd-cert-notes li { font-size:14px; color:var(--muted); line-height:1.8; padding-left:20px; }
  .cd-cert-notes li::before { content:"•"; margin-left:-20px; padding-right:8px; color:var(--muted); }
  /* TOBB deseni: her bölüm öncesi ince ayraç + geniş boşluk (üstte+altta) */
  .cd-section { margin-top:40px; padding-top:40px; border-top:1px solid var(--border); }
  /* h1 ile AYNI 2.6vw'yi kullanıyordu; ikisi birlikte ölçeklenince aralarındaki fark
     yalnız 1.19× kalıyordu ve sayfa başlığı bölüm başlıklarından zor ayırt ediliyordu.
     Başlığı büyütmek yerine bölüm başlıkları indirildi — satış sayfasında dikkatin
     fiyat/CTA'da kalması gerekiyor. Yeni oran ~1.4× (33/24), tipografik ölçeklerin
     önerdiği aralık. */
  .cd-section h2 { font-size:clamp(20px,1.9vw,24px); font-weight:500; letter-spacing:-.01em; margin-bottom:20px; }
  .cd-desc { color:var(--body); line-height:1.7; font-size:16px; white-space:pre-line; }
  /* Başlık altı açıklama (başlıksız, lead) — TOBB (co_pro_new) deseni: cd-overview__text birebir */
  .cd-lead { color:var(--body); line-height:1.7; font-size:16px; margin-top:16px; max-width:none; }
  /* Program içeriği — alt-dersler listesi (TOBB deseni: bağımsız kartlar, sola yaslı) */
  .cd-subs-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
  .cd-subs-head h2 { margin-bottom:0; }
  .cd-sub-count { flex:none; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); }
  .cd-sub-count svg { width:15px; height:15px; flex:none; }
  .cd-subs { list-style:none; display:flex; flex-direction:column; gap:12px; }
  .cd-sub { border:1px solid var(--border); border-radius:14px; overflow:hidden; }
  .cd-sub-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:transparent; border:none; font-family:inherit; text-align:left; cursor:default; }
  .cd-sub-head.is-toggle { cursor:pointer; transition:background .12s; }
  .cd-sub-head.is-toggle:hover { background:var(--bg); }
  .cd-sub-no { display:block; font-size:12.5px; color:var(--muted); font-weight:500; margin-bottom:3px; }
  .cd-sub-body strong { display:block; font-size:16.5px; color:var(--ink); font-weight:700; line-height:1.35; }
  .cd-sub-right { flex:none; display:flex; align-items:center; gap:16px; }
  .cd-sub-min { font-size:13.5px; color:var(--muted); white-space:nowrap; }
  .cd-sub-chevron { width:15px; height:15px; color:var(--muted); transition:transform .15s; }
  .cd-sub-chevron.is-open { transform:rotate(180deg); }
  /* Ders içine açılan konu ağacı (co_pro_new .cd-lesson__topics/.cd-outline__* birebir) */
  .cd-outline { padding:2px 24px 22px 24px; border-top:1px solid var(--border); }
  .cd-outline-head { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 14px; }
  .cd-outline-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 32px; }
  .cd-outline-item { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-top:1px solid var(--border); }
  .cd-outline-item:nth-child(1), .cd-outline-item:nth-child(2) { border-top:none; }
  .cd-outline-num { flex:none; width:22px; height:22px; border-radius:50%; background:var(--bg); color:var(--muted); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  .cd-outline-title { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; }
  @media (max-width:760px) {
    .cd-outline-list { grid-template-columns:1fr; }
    .cd-outline-item:nth-child(2) { border-top:1px solid var(--border); }
  }
  /* Eğitmenler (in-platform) */
  /* Eğitmenler — yatay carousel, avatar kartın üst kenarına biner (TOBB/co_pro_new birebir) */
  .cd-instr-carousel { position:relative; }
  .cd-instr-grid { display:flex; flex-wrap:nowrap; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px;
    mask-image:linear-gradient(to right, black calc(100% - 48px), transparent 100%); -webkit-mask-image:linear-gradient(to right, black calc(100% - 48px), transparent 100%); }
  .cd-instr-grid::-webkit-scrollbar { display:none; }
  .cd-instr-card { position:relative; width:270px; flex:0 0 auto; scroll-snap-align:start; margin-top:46px; padding:62px 20px 24px; border:1px solid var(--border); border-radius:16px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .cd-instr-nav { position:absolute; top:calc(50% + 23px); transform:translateY(-50%); z-index:2; width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
  .cd-instr-nav:hover { background:var(--bg); }
  .cd-instr-nav svg { width:16px; height:16px; }
  .cd-instr-nav--prev { left:-18px; }
  .cd-instr-nav--next { right:-18px; }
  @media (max-width:640px){ .cd-instr-nav { display:none; } }
  .cd-instr-avatar { position:absolute; top:-46px; left:50%; transform:translateX(-50%); width:92px; height:92px; border-radius:50%; object-fit:cover; border:4px solid var(--surface); box-shadow:0 4px 14px rgba(0,0,0,.10); }
  .cd-instr-avatar--ph { display:flex; align-items:center; justify-content:center; background:var(--red-50); color:var(--red-700); font-size:28px; font-weight:700; }
  .cd-instr-name { font-weight:700; font-size:17px; color:var(--ink); }
  .cd-instr-title { font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.45; }
  .cd-instr-head-meta { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); }
  .cd-instr-head-meta svg { width:17px; height:17px; }
  .cd-details { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
  .cd-details li { background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
  .cd-details span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .cd-details strong { font-size:14.5px; color:var(--ink); font-weight:500; }
  /* Sağ satın-alma kartı — YALNIZ fiyat/CTA kartı sticky, görsel normal akışta kalır */
  .cd-thumb-standalone { border-radius:16px; overflow:hidden; margin-bottom:0; box-shadow:none; background:var(--surface); }
  /* Fiyat kartı: sticky + görselin altına biner (co_pro_new .cd-buycard birebir) */
  .cd-card-sticky { position:sticky; top:80px; z-index:2; margin-top:-34px; box-shadow:0 10px 34px rgba(0,0,0,.10); }
  /* Eğitim özellikleri — fiyat kartının İÇİNDE (tek kutu, TOBB deseni), üstte ayraç */
  .cd-feats { list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:11px; }
  .cd-feats li { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); }
  .cd-feats li svg { width:17px; height:17px; color:var(--red-600); flex:none; stroke-linecap:round; stroke-linejoin:round; }
  .cd-feats li strong { font-weight:600; color:var(--ink); }
  /* Program vurgu kutusu (TOBB deseni) — nötr/indigo info görünümü (uyarı değil) */
  .cd-highlight { display:flex; align-items:center; gap:16px; width:max-content; max-width:100%; margin-top:22px; padding:18px 22px; background:#F1F5F9; border:1px solid #E2E8F0; border-radius:14px; }
  .cd-hl-icon { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:13px; background:var(--red-100); color:var(--red-700); flex:none; }
  .cd-hl-icon svg { width:25px; height:25px; }
  .cd-highlight strong { display:block; font-size:15.5px; color:var(--ink); font-weight:600; }
  .cd-highlight span { font-size:13.5px; color:var(--muted); margin-top:2px; }
  @media (max-width:640px){ .cd-highlight { width:auto; } }
  /* Özet şerit (Sertifika · Format · Süre) */
  /* Fact-sheet deseni (co_pro_new .cd-facts birebir) — ince dikey ayraç, ikon küçük, değer kalın */
  .cd-specs { display:flex; flex-wrap:wrap; margin-top:22px; }
  .cd-spec { display:flex; align-items:center; gap:9px; padding:0 28px; border-left:1px solid var(--border); flex:none; }
  .cd-spec:first-child { padding-left:0; border-left:none; }
  .cd-spec svg { width:13px; height:13px; color:var(--red-600); flex:none; }
  .cd-spec > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .cd-spec span { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-weight:700; }
  .cd-spec strong { font-size:16.5px; color:var(--ink); font-weight:700; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:640px){
    .cd-specs { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
    .cd-spec { padding:0; border-left:none; }
    .cd-spec:first-child { padding-left:0; }
    .cd-spec strong { font-size:15px; }
  }
  .cd-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .cd-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,#334155,#0F172A); position:relative; }
  .cd-thumb img { width:100%; height:100%; object-fit:cover; }
  .cd-thumb-play { position:relative; display:block; width:100%; height:100%; border:0; padding:0; margin:0; cursor:pointer; background:none; }
  .cd-thumb-play-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .cd-thumb-play-icon::before { content:''; position:absolute; inset:0; background:rgba(15,23,42,.25); transition:background .15s; }
  .cd-thumb-play:hover .cd-thumb-play-icon::before { background:rgba(15,23,42,.4); }
  /* box-sizing:content-box şart — global "* { box-sizing:border-box }" (satır 32) burada padding'i
     34px'in İÇİNE yiyip görünür üçgeni 6x6px'e düşürüyordu ("beyaz daire içinde nokta" gibi
     görünüyordu, 2026-07-31). content-box ile padding dışa eklenir, gerçek daire 62px olur. */
  .cd-thumb-play-icon svg { position:relative; width:34px; height:34px; color:#0F172A; background:#fff; border-radius:50%; padding:14px; box-shadow:0 4px 16px rgba(0,0,0,.3); box-sizing:content-box; }
  .cd-thumb-video { width:100%; height:100%; }
  .cd-thumb-video iframe { width:100%; height:100%; border:0; display:block; }
  .cd-card-body { padding:20px 22px; }
  /* Eski fiyat üstte küçük+üstü çizili, güncel fiyat büyük+kalın (co_pro_new .cd-price__old/.cd-price__now) */
  /* Sahiplik rozeti — fiyatın yerine geçer (satın alınmışta fiyat gösterilmez) */
  .cd-owned { display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; padding:9px 14px; border-radius:10px; background:#DCFCE7; color:#166534; font-size:14.5px; font-weight:600; }
  .cd-owned svg { width:18px; height:18px; flex:none; }
  .cd-price { margin-bottom:14px; display:flex; flex-direction:column; gap:1px; }
  .cd-price-now { font-size:26px; font-weight:800; color:var(--ink); }
  .cd-orig { color:var(--muted); font-weight:500; font-size:15px; }
  .cd-free { font-size:1.25rem; color:var(--muted); }
  .cd-cta { width:100%; justify-content:center; }
  .cd-note { font-size:12.5px; color:var(--muted); text-align:center; margin-top:12px; }
  @media (max-width:860px){
    .cd-grid { grid-template-columns:1fr; gap:28px; }
    /* Mobil sıra: BAŞLIK → görsel+fiyat → içerik.
       Eskiden .cd-side'a order:-1 verilip fiyat kartı en üste alınıyordu; breadcrumb,
       sağlayıcı ve h1 de .cd-main'in içinde olduğu için kartın ALTINA düşüyordu —
       sayfa "bağlamsız bir fiyat"la açılıyordu. Başlık ayrı hücreye (.cd-head)
       alındığı için artık ikisi bağımsız sıralanabiliyor. CTA erişimi kaybolmuyor:
       kaydırınca .cd-mobilebar zaten fiyat + Kaydol'u sabitliyor. */
    .cd-head { order:0; grid-column:1; grid-row:auto; }
    .cd-side { order:1; grid-column:1; grid-row:auto; }
    /* grid-row:auto ŞART — masaüstü kuralı .cd-main'i satır 2'ye sabitliyor; mobilde
       sıfırlanmazsa .cd-side otomatik yerleşimde onun altına düşüyor ve fiyat kartı
       açıklamanın da altında kalıyor (order tek başına yetmiyor). */
    .cd-main { order:2; grid-column:1; grid-row:auto; }
    /* Breadcrumb tek satır: uzun kurs adlarında 2 satıra sarıp başlığı aşağı itiyordu.
       Sarmak yerine yatay kaydırma (Amazon/Booking deseni) — çubuk gizli. */
    .cd-crumb { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
      margin-bottom:12px; }
    .cd-crumb::-webkit-scrollbar { display:none; }
    .cd-crumb > * { flex:none; }
    .cd-crumb-current { max-width:none; }
    /* static DEĞİL relative: mobilde sticky istemiyoruz (alt sabit çubuk o işi yapıyor)
       ama static yapmak z-index:2'yi de öldürüyordu. Kartın margin-top:-34px ile kapağın
       altına girmesi kasıtlı; z-index çalışmayınca position:relative olan kapak kartın
       üstünü boyuyor ve o 34px'te duran üstü çizili eski fiyat kırpılıyordu. */
    /* static DEĞİL relative: mobilde sticky istemiyoruz (alt sabit çubuk o işi yapıyor)
       ama static yapmak z-index:2'yi de öldürüyordu. Kartın margin-top:-34px ile kapağın
       altına girmesi kasıtlı; z-index çalışmayınca position:relative olan kapak kartın
       üstünü boyuyor ve o 34px'te duran üstü çizili eski fiyat kırpılıyordu.
       top:auto ŞART — relative'de sticky'nin top:80px'i göreli kaydırmaya dönüşüp
       kartı 80px aşağı itiyor, bindirme yerine boşluk bırakıyordu. */
    .cd-card-sticky { position:relative; top:auto; }
    .cd-details { grid-template-columns:1fr; }
  }
  
  /* Destek sohbeti (SupportBot) — sağ alt yüzen widget */
  .sbot { position:fixed; right:22px; bottom:22px; z-index:80; }
  .sbot-fab { width:56px; height:56px; border-radius:50%; background:var(--red-600); color:#fff; border:none;
    box-shadow:var(--shadow-lg); display:grid; place-items:center; cursor:pointer; transition:background .15s, transform .1s; }
  .sbot-fab:hover { background:var(--red-700); }
  .sbot-fab:active { transform:scale(.94); }
  .sbot-panel { position:absolute; right:0; bottom:70px; width:360px; max-width:calc(100vw - 32px); height:520px; max-height:70vh;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
    display:flex; flex-direction:column; overflow:hidden; }
  .sbot-head { padding:16px 18px 12px; border-bottom:1px solid var(--border); flex:none; }
  .sbot-head strong { font-size:15px; color:var(--ink); }
  .sbot-sub { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
  .sbot-persona { display:flex; gap:6px; margin-top:10px; }
  .sbot-persona button { flex:1; font-size:12px; font-weight:500; padding:6px 4px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); background:var(--surface); color:var(--muted); cursor:pointer; transition:.15s; }
  .sbot-persona button.active { background:var(--ink); border-color:var(--ink); color:#fff; }
  .sbot-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; background:var(--bg); }
  .sbot-msg { display:flex; flex-direction:column; max-width:85%; }
  .sbot-msg.user { align-self:flex-end; align-items:flex-end; }
  .sbot-msg.bot { align-self:flex-start; align-items:flex-start; }
  .sbot-bubble { padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; }
  .sbot-msg.user .sbot-bubble { background:var(--red-600); color:#fff; border-bottom-right-radius:4px; }
  .sbot-msg.bot .sbot-bubble { background:var(--surface); border:1px solid var(--border); color:var(--body); border-bottom-left-radius:4px; }
  .sbot-action { margin-top:6px; font-size:12.5px; font-weight:600; color:#fff; background:var(--red-600); padding:6px 12px; border-radius:var(--radius-pill); }
  .sbot-action:hover { background:var(--red-700); }
  .sbot-action-ghost { background:transparent; color:var(--red-700); border:1px solid var(--red-600); margin-top:4px; }
  .sbot-typing { display:flex; gap:4px; padding:12px 13px; }
  .sbot-typing span { width:6px; height:6px; border-radius:50%; background:var(--faint); animation:sbot-bounce 1.2s infinite; }
  .sbot-typing span:nth-child(2){ animation-delay:.15s; } .sbot-typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes sbot-bounce { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
  .sbot-input { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); flex:none; background:var(--surface); }
  .sbot-input input { flex:1; border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:9px 14px; font-size:13.5px; font-family:inherit; }
  .sbot-input input:focus { outline:none; border-color:var(--red-600); }
  .sbot-input button { width:36px; height:36px; border-radius:50%; background:var(--red-600); color:#fff; border:none; display:grid; place-items:center; cursor:pointer; flex:none; }
  .sbot-input button:disabled { background:var(--faint); cursor:default; }
  @media (max-width:480px){ .sbot { right:14px; bottom:14px; } .sbot-panel { width:calc(100vw - 28px); height:65vh; } }
  
  /* Kurumsal (B2B) landing — CampusOnline Business */
  .kb-hero { padding:72px 0 56px; background:linear-gradient(180deg,#fff,var(--bg)); border-bottom:1px solid var(--border); }
  .kb-hero h1 { max-width:760px; margin:14px 0 0; }
  .kb-hero .lead { font-size:clamp(1.125rem,1.6vw,1.375rem); color:var(--muted); max-width:620px; margin-top:18px; line-height:1.5; }
  /* Görsel hazır olana kadar geçici: metni ortala, sağda boş kalan alanı kapat */
  .kb-hero--centered { text-align:center; }
  .kb-hero--centered h1, .kb-hero--centered .lead { margin-left:auto; margin-right:auto; }
  .kb-hero--centered .kb-cta, .kb-hero--centered .kb-stats { justify-content:center; }
  .kb-cta { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
  .kb-feats { grid-template-columns:repeat(4,1fr); }
  .kb-feat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
  /* KART İKONU — emoji yerine inline SVG (2026-08-14).
     Emoji her işletim sisteminde farklı çiziliyor, boyutu/ağırlığı kontrol
     edilemiyor ve marka rengini almıyordu; kurumsal B2B sayfasında ciddiyetsiz
     duruyordu. Gerekçe: resources/views/partials/ikon.blade.php */
  .kb-ico {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-bottom:14px;
    border-radius:12px; background:var(--surface);
    border:1px solid var(--border); color:var(--red-600);
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .kb-ico svg { width:22px; height:22px; }
  /* Hareket YALNIZ hover'da ve çok hafif: kart bir bütün olarak tepki versin,
     ikon tek başına zıplamasın. */
  .kb-feat:hover .kb-ico { border-color:var(--red-600); background:#fff; transform:translateY(-1px); }
  @media (prefers-reduced-motion: reduce) {
    .kb-ico { transition:none; }
    .kb-feat:hover .kb-ico { transform:none; }
  }
  .kb-feat h3 { font-size:1.05rem; margin-bottom:8px; }
  .kb-feat p { color:var(--muted); font-size:14.5px; line-height:1.55; }
  .kb-steps-wrap { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .kb-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .kb-step { display:flex; gap:14px; align-items:flex-start; }
  .kb-num { flex:none; width:34px; height:34px; border-radius:50%; background:var(--red-600); color:#fff; font-weight:600; display:grid; place-items:center; }
  .kb-step h3 { font-size:1.05rem; margin-bottom:5px; }
  .kb-step p { color:var(--muted); font-size:14.5px; line-height:1.55; }
  .kb-audience { text-align:center; color:var(--muted); margin-top:36px; font-size:15px; }
  .kb-steps-4 { grid-template-columns:repeat(4,1fr); }
  /* ÜÇ ADIM — GENİŞLİK SINIRLI, KART GÖRÜNÜMLÜ (2026-08-14).
  
     Dört adım tam genişliği doldururken üçe inince aynı alana yayıldı ve
     adımlar birbirinden kopuk üç ada gibi durdu. İki düzeltme:
       1) Izgara 940px ile sınırlandı — sütunlar birbirine yaklaştı. Ortalamak
          yerine SOLA hizalı bırakıldı; başlık ve sayfanın geri kalanı da solda
          (SSS'te aynı hatayı yapıp düzeltmiştik).
       2) Her adım hafif bir kart oldu: sıralı bir akış olduğu okunuyor,
          boşlukta yüzen metin hissi kalkıyor. */
  .kb-steps-3 { grid-template-columns:repeat(3,1fr); max-width:940px; gap:18px; }
  .kb-steps-3 .kb-step {
    background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px; align-items:flex-start;
  }
  .kb-onsoz { max-width:680px; margin:0 0 26px; color:var(--body); font-size:15.5px; line-height:1.65; }
  /* Kitle satırı ortalıydı; solda hizalı bir sayfada ortalanmış tek satır
     dengesiz duruyordu. */
  .kb-steps-wrap .kb-audience { text-align:left; max-width:940px; margin-top:24px; }
  
  /* AKIŞ GÖRÜNÜMÜ — /kurumsal üç adım, masaüstü (2026-08-15).
     Önceki "sola hizalı + kart" kararının yerine geçiyor (yukarıdaki
     960'lardaki not artık bu sayfa için geçerli değil — /universite'nin
     dört adımlık bölümü .kb-steps-4 kullanıyor, ondan HİÇ etkilenmiyor,
     .kb-flow sınıfı sadece bu sayfada var).
  
     Kart kutusu kaldırıldı: numaralar + bağlantı çizgisi + ortalanmış
     metin — "akış" izlenimini kutulardan değil doğrudan çizgiden alıyor,
     ikisi birden olunca rekabet ediyordu.
  
     Çizgi tek bir kb-steps-3::before ile çiziliyor (adım başına değil):
     3 eşit sütun olduğu için ilk/son dairenin yatay merkezi container
     genişliğinin sabit bir yüzdesinde kalıyor, satır içi hesaplamaya
     gerek kalmıyor. Dairenin z-index'i çizginin üstünde — çizgi görsel
     olarak dairenin içine giriyor, kopuk durmuyor. */
  .kb-flow .section-head { margin-left:auto; margin-right:auto; text-align:center; }
  .kb-flow .kb-onsoz { margin-left:auto; margin-right:auto; text-align:center; }
  .kb-flow .kb-steps-3, .kb-flow .kb-steps-4 { margin:0 auto; position:relative; }
  .kb-flow .kb-steps-4 { max-width:1180px; }
  .kb-flow .kb-steps-3::before, .kb-flow .kb-steps-4::before {
    content:""; position:absolute; top:17px; left:16%; right:16%; height:2px;
    background:var(--border-strong); z-index:0;
  }
  /* Dört adımda sütunlar dara olduğu için daire merkezleri konteynerin
     %16'sından değil %12'sinden başlıyor — üç adımdaki oranla karıştırılmasın. */
  .kb-flow .kb-steps-4::before { left:12%; right:12%; }
  .kb-flow .kb-steps-3 .kb-step, .kb-flow .kb-steps-4 .kb-step {
    background:none; border:none; padding:0;
    flex-direction:column; align-items:center; text-align:center; gap:10px;
  }
  .kb-flow .kb-num { position:relative; z-index:1; }
  
  /* Hedef kitle satırı — rozet + nabız animasyonu (2026-08-15).
     Düz metinken gözden kaçıyordu; artık pill biçiminde, ortalı ve
     yanındaki kırmızı nokta yavaşça nefes alıyor — dikkat çekiyor ama
     rahatsız etmiyor (prefers-reduced-motion'da duruyor). */
  /* .kb-flow ve .kb-steps-wrap AYNI <section> elemanının üzerinde — aralarında boşluk
     bırakmak (torun-selector) hiç eşleşmeyen bir kural üretiyordu, bileşik sınıf şart. */
  .kb-flow.kb-steps-wrap .kb-audience {
    display:flex; align-items:center; gap:9px; width:fit-content;
    margin:36px auto 0; padding:9px 20px;
    background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius-pill);
    font-size:13.5px; font-weight:500; color:var(--body); text-align:left;
  }
  .kb-audience-dot {
    width:7px; height:7px; border-radius:50%; background:var(--red-600); flex:none;
    animation:kbAudiencePulse 1.8s ease-in-out infinite;
  }
  @keyframes kbAudiencePulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(1.4); }
  }
  @media (prefers-reduced-motion:reduce) { .kb-audience-dot { animation:none; } }
  
  /* Adımlardan sonraki boşluk fazla kalıyordu — kutular kalkınca bölüm
     kısaldı ama alt padding aynı kaldığı için "Öne çıkanlar" öncesi boş
     bir boşluk oluştu. Yalnız akış görünümünde daralt; üstteki 80px'e dokunma.
     NOT (2026-08-15): ilk düzeltme boşluğu TAMAMEN çizginin ÜSTÜNE yıkmıştı —
     #neden'in inline padding-top:0'ı yüzünden "Öne çıkanlar" çizgiye yapışık
     duruyordu. Şimdi iki tarafa bölünüyor: burada 40px + #neden'de 32px
     (bkz kurumsal.blade.php / universite.blade.php inline style). */
  .section.kb-flow { padding-bottom:40px; }
  /* Hero istatistik şeridi */
  .kb-stats { display:flex; gap:44px; margin-top:36px; flex-wrap:wrap; }
  .kb-stat strong { display:block; font-size:2rem; font-weight:600; color:var(--ink); letter-spacing:-.03em; line-height:1; }
  .kb-stat span { font-size:13.5px; color:var(--muted); }
  /* Avantajlar (why us) */
  .kb-adv { display:grid; grid-template-columns:repeat(3,1fr); gap:20px 32px; }
  .kb-adv-item { display:flex; gap:12px; align-items:flex-start; }
  .kb-adv-dot { width:8px; height:8px; border-radius:50%; background:var(--red-600); margin-top:7px; flex:none; }
  .kb-adv-item strong { display:block; font-size:15px; color:var(--ink); }
  .kb-adv-item span { font-size:13.5px; color:var(--muted); line-height:1.5; }
  /* Katalog örnek chip'leri */
  .kb-cats { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:36px; }
  .kb-cats-label { font-size:14px; color:var(--muted); }
  .kb-chip { font-size:13px; font-weight:500; color:var(--body); background:var(--surface); border:1px solid var(--border-strong); padding:6px 14px; border-radius:var(--radius-pill); }
  
  /* Bize güvenen kurumlar — sabit 8 slot, rastgele rotasyonlu logo grid */
  .clients-head { text-align:center; margin-left:auto; margin-right:auto; }
  .client-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,116px); gap:18px; }
  .client-slot { display:flex; align-items:center; justify-content:center; padding:20px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
  .client-slot:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .client-logo { max-width:100%; max-height:48px; object-fit:contain; filter:grayscale(100%); opacity:.72; transition:filter .3s; pointer-events:none; }
  .client-slot:hover .client-logo { filter:grayscale(0); opacity:1 !important; }
  @media (max-width:768px){ .client-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,96px); gap:12px; } }
  .kb-demo { background:var(--ink); border-radius:var(--radius-xl); padding:48px; margin:40px 0 60px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .kb-demo-copy .eyebrow { color:#DCD9FC; }
  .kb-demo-copy h2 { color:#fff; margin:12px 0; }
  .kb-demo-copy p { color:#94A3B8; font-size:1.0625rem; }
  .kb-demo-form { background:var(--surface); border-radius:var(--radius-lg); padding:26px; }
  .kb-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .kb-demo-form label { display:block; font-size:13px; font-weight:500; color:var(--body); margin-bottom:14px; }
  .kb-demo-form input, .kb-demo-form select, .kb-demo-form textarea { width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-btn); font-size:14px; font-family:inherit; }
  .kb-demo-form input:focus, .kb-demo-form select:focus, .kb-demo-form textarea:focus { outline:none; border-color:var(--red-600); }
  .kb-demo-form button { width:100%; justify-content:center; margin-top:4px; }
  .kb-ok { background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; padding:20px; border-radius:var(--radius-lg); font-weight:500; }
  .kb-err { color:var(--red-700); font-size:13px; margin:-6px 0 10px; }
  @media (max-width:900px){
    .kb-feats { grid-template-columns:repeat(2,1fr); }
    .kb-steps, .kb-steps-4, .kb-steps-3 { grid-template-columns:1fr; gap:20px; }
    .kb-adv { grid-template-columns:1fr 1fr; }
    .kb-demo { grid-template-columns:1fr; padding:32px 24px; }
    .kb-row { grid-template-columns:1fr; }
    .kb-stats { gap:28px; }
  
    /* Akış görünümü MASAÜSTÜNE ÖZEL — tek sütuna düşen mobilde yatay
       bağlantı çizgisi anlamsız kalır, eski sola hizalı kart hâline dön. */
    .kb-flow .section-head, .kb-flow .kb-onsoz, .kb-flow.kb-steps-wrap .kb-audience { text-align:left; margin-left:0; }
    .kb-flow .kb-steps-3::before, .kb-flow .kb-steps-4::before { display:none; }
    .kb-flow .kb-steps-3 .kb-step, .kb-flow .kb-steps-4 .kb-step {
      background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
      padding:20px; flex-direction:row; align-items:flex-start; text-align:left;
    }
  }
  @media (max-width:560px){ .kb-adv { grid-template-columns:1fr; } }
  @media (max-width:520px){ .kb-feats { grid-template-columns:1fr; } }
  
  @media (max-width:900px){
    .grid{grid-template-columns:repeat(2,1fr);}
    .nav-links{display:none;}
    .enterprise{padding:36px 24px;}
  }
  @media (max-width:640px){
    .hero { padding:44px 0 36px; }
    .kb-hero { padding:44px 0 36px; }
    .section { padding:48px 0; }
    .enterprise { padding:32px 22px; }
    .trust-logos { gap:20px; }
    .uni-logo { max-height:36px; }
  }
  @media (max-width:520px){ .grid{grid-template-columns:1fr;} .hero-search{flex-direction:column;} .hero-search input{width:100%;} }
  
  /* ============ Auth (giriş / kayıt) ============ */
  .auth { display:flex; justify-content:center; padding:56px 20px 72px; background:linear-gradient(180deg,var(--bg),#fff); }
  .auth-card { width:100%; max-width:428px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:0 18px 46px rgba(15,23,42,.08); padding:36px 34px; }
  .auth-card h1 { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
  .auth-sub { margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.5; }
  .auth-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:24px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:#fff; font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:background .15s,border-color .15s; text-decoration:none; }
  .auth-google:hover { background:var(--bg); border-color:#CBD5E1; }
  .auth-or { display:flex; align-items:center; gap:12px; margin:22px 0 18px; color:var(--muted); font-size:12.5px; }
  .auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:var(--border); }
  .auth-form { display:flex; flex-direction:column; gap:14px; }
  .auth-form > label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink); }
  /* font-size:16px ŞART, 15px DEĞİL: iOS Safari 16px'ten küçük bir input'a odaklanınca
     sayfayı otomatik yakınlaştırıyor ve çoğu zaman geri döndürmüyor. Ödeme formunda
     (kart numarası alanına dokunulduğu an) ve giriş modalında bu ciddi sürtünme yaratıyordu.
     Bu kural checkout + auth modalı tarafından paylaşılıyor, ikisi birden düzeliyor.
     padding 13px: dokunma hedefini 44px'e (WCAG 2.5.8) çıkarır. */
  .auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] { padding:13px; border:1px solid var(--border); border-radius:10px; font-size:16px; font-family:inherit; color:var(--ink); background:#fff; }
  .auth-form input:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .auth-err { color:#DC2626; font-size:12.5px; margin-top:-6px; }
  .auth-row { display:flex; justify-content:space-between; align-items:center; }
  .auth-check { flex-direction:row; align-items:center; gap:8px; font-weight:500; font-size:13px; color:var(--muted); cursor:pointer; }
  .auth-check input { width:16px; height:16px; accent-color:var(--red-600); flex:none; }
  .auth-kvkk { align-items:flex-start; }
  .auth-kvkk span { line-height:1.45; }
  .auth-kvkk a { color:var(--red-600); text-decoration:underline; }
  .auth-submit { width:100%; margin-top:6px; justify-content:center; }
  .auth-turnstile { display:flex; justify-content:center; margin-top:2px; }
  /* Ödeme CTA'sı marka kırmızısından bilinçli ayrılır — kırmızı "uyarı/hata" çağrışımı yapar,
     ödeme hata toast'uyla da karışabilir. Yeşil: "güvenli, tamamla" hissi (Stripe/Shopify pratiği). */
  .checkout-form .auth-submit.btn-primary { background:#16A34A; box-shadow:0 10px 24px rgba(22,163,74,.28); }
  .checkout-form .auth-submit.btn-primary:hover { background:#15803D; }
  .auth-alt { margin-top:20px; text-align:center; font-size:14px; color:var(--muted); }
  .auth-alt a { color:var(--red-600); font-weight:600; }
  
  /* OTP adımı kurtarma şeridi — kod gelmediğinde kullanıcının çıkış yolu (bkz auth-modal) */
  .auth-rescue { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); text-align:center; }
  .auth-rescue-q { margin:0 0 10px; font-size:13.5px; color:var(--muted); }
  .auth-rescue-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
  .auth-rescue-or { font-size:12.5px; color:var(--muted); }
  .auth-rescue-btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 16px;
    border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--ink);
    font-size:13.5px; font-weight:500; font-family:inherit; cursor:pointer; text-decoration:none; }
  .auth-rescue-btn:hover:not(:disabled) { background:var(--bg); }
  .auth-rescue-btn:disabled { opacity:.5; cursor:default; }
  .auth-rescue-hint { margin:10px 0 0; font-size:12.5px; color:var(--muted); }
  
  /* Nav kullanıcı menüsü (oturum açık) */
  .user-dd { position:relative; }
  .user-dd-btn { display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:2px; }
  .user-dd-btn svg { width:16px; height:16px; color:var(--muted); }
  .user-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
  .user-avatar-mono { display:flex; align-items:center; justify-content:center; background:var(--red-600); color:#fff; font-weight:700; font-size:15px; }
  .user-dd-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:232px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.14); padding:8px; z-index:60; }
  .user-dd-head { padding:10px 12px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
  .user-dd-head strong { display:block; font-size:14px; color:var(--ink); }
  .user-dd-head span { display:block; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-dd-item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; font-size:14px; color:var(--ink); text-decoration:none; }
  .user-dd-item:hover { background:var(--bg); }
  .user-dd-item svg { width:17px; height:17px; color:var(--muted); flex:none; }
  /* Yönetim bölümü — kursiyer eylemlerinden görsel olarak ayrılsın */
  .user-dd-sep { height:1px; background:var(--border); margin:6px 0; }
  .user-dd-label { padding:2px 12px 4px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .user-dd-logout { display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px; font-size:14px; color:#DC2626; background:none; border:none; cursor:pointer; font-family:inherit; }
  /* Üst nav'daki koşullu "Eğitimlerim" (yalnız satın alması olanlara) */
  .nav-mylearning { font-size:14.5px; font-weight:600; color:var(--ink); padding:8px 4px; white-space:nowrap; }
  .nav-mylearning:hover { color:var(--red-700); }
  
  /* ============ Eğitimlerim (kütüphane) ============ */
  .mycourses { padding:40px 0 72px; }
  .mc-title { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; letter-spacing:-.025em; margin-bottom:28px; }
  .mc-empty { text-align:center; padding:56px 20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
  .mc-empty p { color:var(--muted); font-size:15.5px; margin-bottom:18px; }
  .mc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }
  .mc-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
  .mc-thumb { display:block; aspect-ratio:16/9; background:linear-gradient(135deg,#334155,#0F172A); }
  .mc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .mc-body { padding:16px 18px 8px; flex:1; }
  .mc-prov { display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:5px; }
  .mc-name { font-size:15.5px; line-height:1.35; font-weight:600; margin-bottom:12px; }
  .mc-name a { color:var(--ink); }
  .mc-name a:hover { color:var(--red-700); }
  .mc-progress { height:6px; border-radius:99px; background:var(--bg); overflow:hidden; margin-bottom:8px; }
  .mc-progress span { display:block; height:100%; background:#16A34A; border-radius:99px; }
  .mc-meta { font-size:12.5px; color:var(--muted); }
  .mc-soon { display:block; line-height:1.5; }
  .mc-foot { padding:12px 18px 18px; }
  .mc-cta { width:100%; justify-content:center; }
  /* ---- Sertifika bilgi kapısı ---- */
  .cert-form { margin-top:20px; gap:16px; }
  /* Doğum tarihi: type=date, .auth-form'un input seçicisinde YOK (text/email/password) →
     stil almıyordu, native görünüyordu. Diğer alanlarla aynı görünüm + tarayıcı takvim ikonu. */
  .cert-date, .cert-select { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px;
    font-size:15px; font-family:inherit; color:var(--ink); background:#fff; box-sizing:border-box; min-height:44px; }
  .cert-date:focus, .cert-select:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .cert-date::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }
  .cert-date::-webkit-calendar-picker-indicator:hover { opacity:1; }
  /* Doğum tarihi + cinsiyet yan yana — dikey listeyi kısaltır, form daha derli toplu */
  .cert-row2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .auth-form .cert-row2 > label { display:flex; flex-direction:column; gap:6px; }
  @media (max-width:420px){ .cert-row2 { grid-template-columns:1fr; } }
  /* CTA yeşil — kırmızı "uyarı/hata" çağrışımı yapıyordu (checkout "Öde" ile aynı karar) */
  .cert-submit { background:#16A34A; color:#fff; box-shadow:0 10px 24px rgba(22,163,74,.26); }
  .cert-submit:hover:not(:disabled) { background:#15803D; }
  /* KVKK: butonun ALTINDA, sessiz dipnot — üstte kutu olarak durunca formu boğuyordu */
  .cert-kvkk { margin:2px 0 0; font-size:12px; line-height:1.5; color:var(--muted); text-align:center; }
  .cert-kvkk a { color:var(--muted); text-decoration:underline; }
  .cert-kvkk a:hover { color:var(--ink); }
  .user-dd-logout:hover { background:var(--bg); }
  /* Profil bloğu — masaüstü hesap menüsüyle aynı desen (avatar + ad + e-posta) */
  .drawer-user { display:flex; align-items:center; gap:11px; padding:12px 4px; }
  .drawer-user-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
  .drawer-user-avatar--ph { display:flex; align-items:center; justify-content:center; background:var(--bg);
    color:var(--muted); font-weight:600; font-size:15px; }
  .drawer-user-text { min-width:0; }
  .drawer-user strong { display:block; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .drawer-user-text > span { display:block; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* iOS metni yine de bağlantıya çevirirse mavi/altı çizili görünmesin — meta
     format-detection ana çözüm, bu görsel emniyet kemeri. */
  .drawer-user-mail, .drawer-user-mail a { color:var(--muted) !important; text-decoration:none !important; pointer-events:none; }
  
  /* Çıkış: buton değil sade bağlantı — "Eğitimlerim" ile aynı ağırlıkta olması
     yanlış vurgu yaratıyordu (bkz partials/nav.blade.php) */
  .drawer-logout-form { margin-top:2px; }
  .drawer-logout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px;
    background:none; border:0; padding:10px; font-family:inherit; font-size:14.5px; font-weight:500;
    color:var(--muted); cursor:pointer; border-radius:10px; }
  .drawer-logout svg { width:17px; height:17px; }
  .drawer-logout:hover { color:var(--red-600); background:var(--bg); }
  
  /* Legal (KVKK aydınlatma) */
  .legal { padding:48px 0 72px; }
  .legal-body { max-width:760px; }
  .legal-body h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
  .legal-body h2 { font-size:19px; font-weight:650; color:var(--ink); margin:28px 0 10px; }
  .legal-body p, .legal-body li { color:var(--ink); line-height:1.65; font-size:15px; }
  .legal-body ul { padding-left:20px; margin-top:8px; display:flex; flex-direction:column; gap:6px; }
  .legal-note {margin-top: 22px;margin-bottom: 22px;padding:12px 16px;background:#FEF3C7;border:1px solid #FDE68A;border-radius:10px;color:#92400E;font-size:14px;}
  
  /* ============ Checkout (native ödeme) ============ */
  /* Minimal checkout bar (layouts/checkout.blade) — marka + güven, nav/arama/dil/hesap YOK */
  .checkout-body { background:var(--bg); min-height:100vh; }
  .checkout-bar { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; max-width:520px; margin:0 auto; }
  .checkout-bar-logo .brand-logo { height:22px; width:auto; color:var(--red-600); display:block; }
  /* checkout'ta JS/GSAP yok (bilinçli, dikkat dağıtmasın) → morph animasyonunun "co" simge grubu
     sabit gizli kalır, yoksa JS'siz iki hal (tam wordmark + co simgesi) üst üste render olur */
  .checkout-bar-logo #group-symbol { opacity:0; visibility:hidden; }
  .checkout-bar-secure { display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; color:var(--muted); font-weight:500; }
  .checkout-bar-secure svg { width:14px; height:14px; flex:none; }
  
  /* iyzico rozeti: kart alanının üstünde, sessiz. Genişliği sınırlı — rozet
     formdan daha çok yer kaplarsa reklam gibi okunur. */
  /* SOLA DAYALI, ortalı değil: sayfadaki her şey (fiyat, taksit satırları,
     "Kart numarası" etiketi) sola dayalı. Ortalanınca rozet akışın parçası
     değil, araya sıkışmış bir süs gibi okunuyordu; sola alınınca "aşağıya
     gireceğin kartın kabul edilen türleri" diye okunuyor. */
  .ck-iyzico { display:block; height:22px; width:auto; max-width:100%;
    margin:2px auto 14px 0; opacity:.9; }
  
  /* ÖDEME FORMUNDA ODAK HALKASI KIRMIZI DEĞİL.
     Marka kırmızısı her yerde odak rengi ve doğru; ama boş bir kart alanının
     etrafındaki kırmızı çerçeve ödeme ekranında "hata yaptın" diye okunuyor —
     üstelik alan masaüstünde OTOMATİK odaklanıyor, yani kullanıcı daha hiçbir
     şey yazmadan kırmızı görüyor. Nötr koyu ton: aynı görünürlük, uyarı yok.
     Gerçek hata durumunda mesaj zaten ayrıca gösteriliyor. */
  /* ÖDEME FORMUNDA ODAK HALKASI NÖTR (koyu), kırmızı da yeşil de değil.
     KIRMIZI DEĞİL: marka kırmızısı sitenin her yerinde odak rengi, ama boş bir
     kart alanının etrafındaki kırmızı çerçeve ödeme ekranında "hata yaptın"
     diye okunuyordu — üstelik alan masaüstünde OTOMATİK odaklandığı için
     kullanıcı daha hiçbir şey yazmadan kırmızı görüyordu.
     YEŞİL DE DEĞİL: yeşil "doğrulandı" der; boş bir alanda, kullanıcı daha
     hiçbir şey yazmadan "bu doğru" demiş oluruz. Ayrıca "Öde" butonu yeşil,
     alan da yeşil olunca butonun tekliği bozulur.
     Nötr koyu ton aynı görünürlüğü veriyor, hiçbir yargı bildirmiyor. Kırmızı
     yalnız gerçek hataya ayrıldı (showError).
     Seçici .auth-form.checkout-form: form iki sınıfı da taşıyor; tek sınıflı
     seçici .auth-form kuralıyla EŞİT özgüllükte kalıp sıraya bağımlı oluyordu. */
  .auth-form.checkout-form input:focus { outline:none; border-color:var(--ink,#0F172A);
    box-shadow:0 0 0 3px rgba(15,23,42,.10); }
  
  /* GÜVEN ŞERİDİ — ödeme butonunun altında. Sessiz olmalı: bağırırsa "neden
     bu kadar ısrarla güvenli diyorsun" sorusunu doğurur, tersine çalışır. */
  .ck-guven { list-style:none; margin:16px 0 0; padding:0;
    display:flex; flex-direction:column; gap:9px; }
  .ck-guven li { display:flex; align-items:flex-start; gap:9px;
    font-size:12.5px; line-height:1.5; color:var(--body); }
  .ck-guven svg { width:15px; height:15px; flex:none; margin-top:1px; color:var(--muted); }
  
  /* Künye en altta, en soluk: aranan bilgi, dikkat çekmesi gereken bilgi değil. */
  .ck-kunye { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border);
    font-size:11.5px; line-height:1.6; color:var(--faint); }
  
  .checkout { padding:8px 0 72px; }
  .checkout-grid { max-width:460px; margin:0 auto; }
  .checkout-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:0 18px 46px rgba(15,23,42,.08); padding:28px; }
  /* Kompakt ürün şeridi — ikna edici içerik yok, sadece ne+ne kadar */
  /* flex-wrap ŞART: kontenjan satırı dördüncü çocuk olarak eklendiğinde satıra
     sıkışıyor, başlık "Sey..."e iniyor ve metin ekran dışına taşıyordu. Sarmalı
     açıp kontenjana tam satır vererek çözülüyor. */
  .checkout-item { display:flex; flex-wrap:wrap; align-items:center; gap:13px;
    padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border); }
  .ci-thumb { width:48px; height:48px; border-radius:10px; flex:none; overflow:hidden; background:linear-gradient(135deg,#334155,#0F172A); }
  .ci-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .ci-body { flex:1; min-width:0; }
  .ci-body strong { display:block; font-size:14px; color:var(--ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ci-body span { font-size:12px; color:var(--muted); }
  .ci-price { font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em; flex:none; }
  /* Taksit KATLANMIŞ (2026-08-13): seçici artık varsayılan açık değil, tek tıkla
     açılıyor. Gerekçe checkout/show.blade.php ve config/iyzico.php içinde —
     özeti: 8K+ bandında tarihsel taksit kullanımı %1,9 ama komisyon farkı satış
     başına ~₺1.740 ve vade farkını biz üstleniyoruz.
  
     Açma düğmesi bir BAĞLANTI gibi görünüyor, buton gibi değil: dikkat çekmesi
     değil, arayanın bulması gerekiyor. */
  .ci-odeme { margin-bottom:20px; }
  .ci-taksit-ac { display:inline-flex; align-items:center; gap:6px; padding:6px 0;
    border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:600;
    color:var(--muted); cursor:pointer; }
  .ci-taksit-ac:hover { color:var(--ink); }
  .ci-taksit-ac svg { width:15px; height:15px; transition:transform .18s ease; }
  .checkout-installments { display:flex; flex-direction:column; gap:8px; margin:10px 0 0; }
  .ci-opt { display:flex; align-items:center; gap:8px; width:100%; padding:12px 14px; border:1.5px solid var(--border);
    border-radius:10px; background:#fff; font-family:inherit; font-size:14px; color:var(--body); cursor:pointer;
    transition:border-color .15s, background .15s; text-align:left; }
  .ci-opt strong { margin-left:auto; color:var(--ink); font-size:15px; }
  .ci-opt.is-active { border-color:var(--red-600); background:var(--red-50); }
  .ci-opt-tag { font-size:11px; font-weight:600; color:#16A34A; background:#DCFCE7; padding:2px 7px; border-radius:999px; }
  .cd-installment-hint { font-size:13px; color:var(--muted); margin-top:4px; }
  /* Gerçek sosyal kanıt — CTA'nın hemen altında, sakin: aciliyet ROZETİ değil
     bilgi satırı. Kırmızı/turuncu "acele et" tonu bilinçli kullanılmadı; sayı
     gerçek olduğu için abartılı sunum güveni düşürürdü (docs/CONVERSION.md §4.1). */
  .cd-social-proof { display:flex; align-items:center; gap:7px; margin-top:10px;
    font-size:13px; color:#15803D; font-weight:500; }
  .cd-social-proof svg { width:15px; height:15px; flex:none; }
  .checkout-alert { background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; padding:10px 13px; margin-top:12px; }
  /* minmax(0,1fr) şart — düz 1fr'de <input> min-content genişliği grid track'i taşırır (klasik grid overflow) */
  .checkout-row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .checkout-row3 input { width:100%; min-width:0; box-sizing:border-box; }
  .checkout-secure { margin-top:16px; text-align:center; font-size:12px; color:var(--muted); line-height:1.5; }
  /* Ödeme hatası toast — gözden kaçmasın diye ekranın altında sabit, belirgin */
  /* ÇEREZ ÇUBUĞUNUN ÜSTÜNDE — ve ÜSTÜNE (2026-08-13).
  
     Kusur: bottom:24px + z-index:300 idi. .cconsent bottom:0, tam genişlik ve
     z-index:9998 — yani çerez tercihini henüz vermemiş HERKESTE ödeme hata
     mesajının tamamı görünmez oluyordu: kart reddi, limit yetersiz, iyzico
     hatası, sözleşme onayı uyarısı. Kartı reddedilen müşteri ekranda hiçbir şey
     görmüyor, "site bozuk" deyip çıkıyor. Sessiz dönüşüm kaybı.
  
     Sitedeki diğer TÜM alt-sabit öğeler (.kmpk, .htrl, .inc-toast) bu offset'i
     zaten uyguluyordu; ödeme toast'ı — en kritik olanı — atlanmış.
  
     z-index 9999: çubuğun (9998) üstünde. Ödeme hatası, çerez tercihinden
     önceliklidir; ikisi aynı anda ekrandaysa görünmesi gereken bu. */
  .pay-toast { position:fixed; left:50%; bottom:calc(24px + var(--cconsent-h, 0px));
    transform:translateX(-50%); z-index:9999;
    display:flex; align-items:center; gap:10px; max-width:min(92vw,440px);
    background:#1F2937; color:#fff; padding:14px 16px; border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.28); font-size:14px; line-height:1.4; }
  .pay-toast-icon { flex:none; color:#FCA5A5; font-size:16px; }
  .pay-toast-close { flex:none; margin-left:auto; background:none; border:none; color:#9CA3AF; cursor:pointer; font-size:14px; padding:2px 4px; }
  .pay-toast-close:hover { color:#fff; }
  .pay-toast-enter { transition:opacity .25s ease, transform .25s ease; }
  .pay-toast-enter-start { opacity:0; transform:translateX(-50%) translateY(12px); }
  .pay-toast-enter-end { opacity:1; transform:translateX(-50%) translateY(0); }
  /* Sonuç (başarılı/hata) — normal site layout'unda kalır */
  .checkout-result { max-width:520px; margin:0 auto; text-align:center; padding:40px 0; }
  .cr-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; margin:0 auto 20px; }
  .cr-ok { background:#DCFCE7; color:#16A34A; }
  .cr-fail { background:#FEF2F2; color:#DC2626; }
  .checkout-result h1 { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
  .checkout-result-note { margin:14px 0 24px; color:var(--muted); font-size:14.5px; line-height:1.55; }
  @media (max-width:520px){ .checkout-card { padding:22px; border-radius:16px; } .checkout-bar { padding:16px 20px; } }
  
  /* ============ Auth modal (nav'dan açılır) ============ */
  /* z-index çerez çubuğunun (.cconsent, 9998) üstünde: modal ortalanmış ve SABİT —
     kaydırılamıyor. 812px'lik bir telefonda çubuk 660px'den başlıyor, yani 508px'ten
     uzun her modalın alt kısmı (giriş modalinde "Devam et" butonu) çubuğun altında
     kalıyordu. Çerezi henüz kabul etmemiş = ilk kez gelen ziyaretçi; giriş/kayıt
     tam da orada tıkanıyordu. Aynı gerekçe .rd-overlay ve .cmp-overlay için de geçerli. */
  .authm { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; }
  .authm-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(3px); }
  .authm-box { position:relative; z-index:1; width:100%; max-width:424px; max-height:92vh; overflow-y:auto; background:#fff; border-radius:var(--radius-xl); box-shadow:0 30px 72px rgba(15,23,42,.30); padding:34px 32px 32px; }
  .authm-close { position:absolute; top:14px; right:14px; background:none; border:none; font-size:17px; color:var(--muted); cursor:pointer; width:32px; height:32px; border-radius:9px; line-height:1; }
  .authm-close:hover { background:var(--bg); color:var(--ink); }
  .authm-head h2 { font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
  .authm-head .auth-sub { margin-top:6px; }
  .authm .auth-google { margin-top:22px; }
  .authm .auth-alt { margin-top:16px; }
  
  /* Passwordless checkout (OTP) */
  .checkout-otp { border-top:1px solid var(--border); padding-top:16px; margin-top:4px; }
  .checkout-otp input { letter-spacing:6px; font-size:18px; text-align:center; font-weight:600; }
  .checkout-resend { margin-top:8px; font-size:12.5px; color:var(--muted); }
  .checkout-resend a { color:var(--red-600); font-weight:600; }
  .checkout-kvkk { margin-top:14px; font-size:12px; color:var(--muted); text-align:center; line-height:1.5; }
  .checkout-kvkk a { color:var(--red-600); text-decoration:underline; }
  
  /* Passwordless OTP (modal + /giris) */
  .authm-sent { font-size:13.5px; color:var(--muted); line-height:1.5; margin-bottom:2px; }
  .authm-otp { letter-spacing:8px; font-size:20px; text-align:center; font-weight:600; }
  
  /* Checkout — mesafeli satış onay checkbox'ı.
     NOT: ".auth-form > label{flex-direction:column}" (0,1,1) ".auth-check"tan (0,1,0)
     daha özgül olduğu için satırı sütuna zorluyordu — burada özgüllüğü artırıp eziyoruz. */
  .auth-form > label.checkout-terms { display:flex; flex-direction:row; align-items:flex-start; gap:8px; margin-top:2px; }
  .checkout-terms input { margin-top:3px; }
  .checkout-terms span { font-size:12px; line-height:1.5; color:var(--muted); }
  /* Checkout — opsiyonel telefon. Zorunlu alanlardan görsel olarak AYRIŞMALI:
     ödeme adımında "bir alan daha" hissi dönüşümü düşürür; isteğe bağlı olduğu
     ilk bakışta anlaşılmazsa alan kazanç değil kayıp getirir. */
  .checkout-optional { font-weight:400; font-size:12px; color:var(--muted); }
  .checkout-phone small { display:block; margin-top:6px; font-size:12px; line-height:1.45; color:var(--muted); }
  /* Onay satırındaki yasal linkler: kırmızı+kalın vurgu kaldırıldı, gövde metniyle
     aynı ağırlıkta duruyorlar. Altı çizgi KORUNUYOR — global "a{text-decoration:none}"
     yüzünden tek keşfedilebilirlik işareti o; mesafeli satışta kullanıcının bu iki
     belgeye ulaşabilmesi gerekiyor. Çizgi rengi soluk, hover'da kırmızıya döner. */
  .checkout-terms a { color:var(--body); font-weight:inherit; text-decoration:underline;
    text-decoration-color:var(--border-strong); text-underline-offset:2px; }
  .checkout-terms a:hover { color:var(--red-700); text-decoration-color:var(--red-600); }
  /* ONAY EKSİK UYARISI (2026-08-13). Toast ekranın altında çıkıyor ve "ne eksik"
     sorusunu cevaplıyor; "nerede" sorusunu bu vurgu cevaplıyor. Kutuyu çerçeveye
     alıp metni koyulaştırıyor, 4 sn sonra sönüyor — kalıcı kırmızı bir hata
     durumu değil, tek seferlik bir işaret.
     prefers-reduced-motion: animasyon kapansa da renk/çerçeve kalıyor, yani
     uyarı hiçbir koşulda kaybolmuyor. */
  .checkout-terms.is-uyari { margin:2px -8px 0; padding:8px; border-radius:9px;
    background:var(--red-50,#fef2f2); box-shadow:inset 0 0 0 1.5px var(--red-600,#dc2626);
    animation:onayUyar .4s ease; }
  .checkout-terms.is-uyari span { color:var(--ink); }
  @keyframes onayUyar { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); }
    75% { transform:translateX(4px); } }
  @media (prefers-reduced-motion:reduce) { .checkout-terms.is-uyari { animation:none; } }
  
  /* ============ Sertifika: kart rozeti (Eğitimlerim) ============ */
  .mc-cert { display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:600; line-height:1.4; }
  .mc-cert svg { width:16px; height:16px; flex:none; }
  .mc-cert.is-ready { background:#DCFCE7; color:#166534; text-decoration:none; }
  .mc-cert.is-ready:hover { background:#BBF7D0; }
  .mc-cert.is-pending { background:var(--bg); color:var(--muted); font-weight:500; }
  
  /* ============ Yönetim ekranı (Sertifika Yöneticisi) ============ */
  .adm { padding:36px 0 72px; }
  .adm-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
  .adm-head h1 { font-size:clamp(1.6rem,2.6vw,2rem); font-weight:700; letter-spacing:-.02em; }
  .adm-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap; }
  .adm-tab { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .adm-tab:hover { color:var(--ink); }
  .adm-tab.is-active { color:var(--red-700); border-bottom-color:var(--red-600); }
  .adm-count { background:var(--bg); color:var(--muted); border-radius:99px; padding:1px 8px; font-size:12px; font-weight:700; }
  .adm-tab.is-active .adm-count { background:var(--red-50); color:var(--red-700); }
  .adm-search { display:flex; gap:8px; margin-bottom:18px; }
  .adm-search input { flex:1; max-width:420px; padding:10px 13px; border:1px solid var(--border); border-radius:10px; font-size:14.5px; font-family:inherit; }
  .adm-search input:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  /* Kayıt Yöneticisi ekranı — manuel erişim açma formu */
  .adm-flash-ok { background:#DCFCE7; border:1px solid #BBF7D0; color:#15803D; border-radius:10px; padding:11px 15px; font-size:14px; margin-bottom:16px; }
  .adm-enroll-form { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:24px; }
  .adm-enroll-row { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
  .adm-enroll-row label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--muted); flex:1; min-width:200px; }
  .adm-enroll-row input, .adm-enroll-row select { padding:10px 13px; border:1px solid var(--border); border-radius:10px; font-size:14.5px; font-family:inherit; color:var(--ink); }
  .adm-enroll-row input:focus, .adm-enroll-row select:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .adm-enroll-row button { flex-shrink:0; }
  .adm-empty { color:var(--muted); padding:40px 0; text-align:center; }
  .adm-tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
  .adm-table { width:100%; border-collapse:collapse; font-size:14px; min-width:820px; }
  .adm-table th { text-align:left; padding:12px 16px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
  .adm-table td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .adm-table tr:last-child td { border-bottom:none; }
  .adm-table strong { color:var(--ink); font-weight:600; display:block; }
  
  /* Havale ekranı yardımcıları. Sınıflar burada çünkü tablo deseninin kendisi
     ortak — ayrı bir tablo stili yazmak iki farklı yönetim görünümü üretirdi. */
  .adm-sag { text-align:right; }
  .adm-nowrap { white-space:nowrap; }
  .adm-mini { display:block; font-size:12px; color:var(--muted); font-weight:400; }
  /* Referans TAM görünür ve seçilebilir: bankadaki açıklama alanıyla göz
     karşılaştırması yapılan tek değer, kısaltmak işi imkânsızlaştırır. */
  .adm-ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
    background:var(--bg); padding:2px 6px; border-radius:5px; user-select:all; }
  .adm-inline { display:inline; }
  .adm-inline + .adm-inline { margin-left:6px; }
  
  /* ── Havale talimat ekranı (checkout/havale.blade.php) ────────────────────── */
  .hv-baslik { margin:0 0 6px; font-size:22px; font-weight:800; color:var(--ink); }
  .hv-alt { margin:0 0 18px; color:var(--muted); line-height:1.5; }
  .hv-kutu { margin:16px 0 0; padding:14px 16px; border:1px solid var(--border);
    border-radius:var(--radius-lg); background:var(--bg); display:flex; flex-direction:column; gap:11px; }
  .hv-satir { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .hv-etiket { flex:0 0 78px; font-size:12.5px; color:var(--muted); }
  .hv-satir strong { color:var(--ink); font-weight:600; }
  /* IBAN SEÇİLEBİLİR olmalı — kopyala düğmesi çalışmazsa (eski tarayıcı, izin
     reddi) elle seçmek tek yol kalıyor.
     .hv-ref burada kalıyor: müşteri ekranından kaldırıldı (2026-08-13, gerekçe
     checkout/havale.blade.php içinde) ama referans yönetim ekranında hâlâ
     gösteriliyor ve aynı biçimi kullanıyor. */
  .hv-iban, .hv-ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:14px; letter-spacing:.02em; user-select:all; word-break:break-all; }
  .hv-kopyala { margin-left:auto; padding:5px 11px; border:1px solid var(--border);
    border-radius:99px; background:var(--surface); font-family:inherit; font-size:12.5px;
    font-weight:600; color:var(--body); cursor:pointer; white-space:nowrap; }
  .hv-kopyala:hover { border-color:var(--border-strong,#CBD5E1); color:var(--ink); }
  .hv-sure { margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
  
  /* Kasadaki "bekleyen havale siparişin var" şeridi. NÖTR renk bilerek: sarı ya
     da kırmızı olsaydı "bir sorun var" derdi — oysa yanlış bir şey yapılmadı,
     yalnız açık bir sipariş duruyor ve iki yol da açık. */
  .ck-bekleyen { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin:0 0 18px; padding:12px 14px; border:1px solid var(--border);
    border-radius:11px; background:var(--bg); }
  .ck-bekleyen > div { flex:1 1 220px; min-width:0; }
  .ck-bekleyen strong { display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; }
  .ck-bekleyen span { display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45; }
  .ck-bekleyen a { flex:none; font-size:13px; font-weight:600; color:var(--red-600);
    white-space:nowrap; text-decoration:underline; text-decoration-color:var(--border-strong);
    text-underline-offset:3px; }
  .ck-bekleyen a:hover { text-decoration-color:var(--red-600); }
  /* Metin bağlantısı, buton DEĞİL: bu ekranın asıl işi havale talimatını
     göstermek, kartla ödemeye dönmek ikincil bir çıkış kapısı. TEK link
     (2026-08-13) — önce ayrıca "Eğitimlerime dön" de vardı, iki metin linki göz
     için seçim yükü üretiyordu (ürün sahibi: "temiz değil"). "‹" öneki linkin
     kendisinin geri gittiğini gösteriyor, ayrı bir "geri" kelimesine gerek
     bırakmıyor. */
  .hv-kartadon { display:flex; align-items:center; justify-content:center; gap:5px;
    margin-top:20px; font-size:13.5px; font-weight:600; color:var(--red-600);
    text-decoration:underline; text-decoration-color:var(--border-strong);
    text-underline-offset:3px; text-align:center; }
  .hv-kartadon span { font-size:16px; line-height:1; }
  .hv-kartadon:hover { text-decoration-color:var(--red-600); }
  
  /* ── Ödeme sayfasındaki havale seçeneği ───────────────────────────────────── */
  /* "veya" ayracı: kartla havale arasındaki ilişkiyi tek bakışta anlatıyor —
     ikisi alternatif, biri diğerinin devamı değil. */
  .ci-havale-ayrac { display:flex; align-items:center; gap:12px; margin:18px 0 14px;
    font-size:12.5px; color:var(--muted); }
  .ci-havale-ayrac::before, .ci-havale-ayrac::after { content:''; flex:1; height:1px; background:var(--border); }
  .ci-havale-btn { width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .ci-havale-not { font-size:12px; font-weight:500; color:var(--muted); }
  
  .adm-sub { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
  .adm-mono { font-variant-numeric:tabular-nums; color:var(--body); }
  .adm-noedit { display:flex; gap:8px; align-items:center; }
  .adm-noinput { width:150px; padding:8px 11px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; font-variant-numeric:tabular-nums; }
  .adm-noinput:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .adm-nobtn { padding:8px 14px; font-size:13.5px; min-width:74px; }
  .adm-pager { margin-top:18px; }
  
  /* ============ Sertifika sayfası (yazdırılabilir) ============ */
  .cert-page { background:var(--bg); margin:0; padding:0; }
  .cert-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; max-width:900px; margin:0 auto; }
  .cert-sheet { max-width:900px; margin:0 auto 48px; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 18px 46px rgba(15,23,42,.10); }
  .cert-inner { border:2px solid var(--red-600); margin:14px; padding:clamp(28px,6vw,64px) clamp(20px,5vw,56px); text-align:center; }
  .cert-brand { font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red-600); margin-bottom:28px; }
  .cert-heading { font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-bottom:32px; }
  .cert-intro { font-size:14px; color:var(--muted); margin-bottom:6px; }
  .cert-name { font-size:clamp(22px,3.4vw,30px); font-weight:700; color:var(--ink); margin-bottom:22px; }
  .cert-text { font-size:15.5px; line-height:1.8; color:var(--body); max-width:560px; margin:0 auto 36px; }
  .cert-meta { display:flex; justify-content:center; gap:clamp(20px,5vw,52px); flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--border); }
  .cert-meta div { display:flex; flex-direction:column; gap:4px; }
  .cert-meta span { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .cert-meta strong { font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
  @media print {
    .cert-toolbar { display:none; }
    .cert-page { background:#fff; }
    .cert-sheet { box-shadow:none; border:none; margin:0; max-width:none; }
    @page { size:A4 landscape; margin:12mm; }
  }
  
  /* ════════════════════════════════════════════════════════════════════
     PLAYER (ders izleme) — co_academy .ply-* tasarımının uyarlaması.
     Tam ekran uygulama kabuğu: sayfa scroll etmez, iç bölmeler kayar.
     ════════════════════════════════════════════════════════════════════ */
  .ply-body-root { margin:0; height:100vh; overflow:hidden; background:var(--surface); }
  .ply { height:100vh; display:flex; flex-direction:column; background:var(--surface); }
  
  /* ── Üst bar ── */
  /* ÜST BAR — beş kontrol tek satırda sıkışıyordu (✕ ☰ başlık ilerleme ⛶):
     başlık sert kırpılıyor, ilerleme çubuğu ortada yer kaplıyor, boşluklar
     dengesizdi (kullanıcı 2026-08-10).
  
     ÇÖZÜM, sektör deseni (Udemy/Coursera/LinkedIn Learning): ilerleme çubuğu
     satırdan ÇIKARILIP barın alt kenarına tam genişlikte ince bir çizgi olarak
     alındı. İki kazanç birden — satırda yer açılıyor (başlığa nefes) ve çubuk
     "sayfa ilerlemesi" olarak zaten tanıdık bir yere oturuyor.
  
     Kalan sıralama da standarda uyuyor: solda kaçış (✕), yanında birincil
     gezinme (☰), ortada başlık, sağda bağlamsal eylem (⛶). */
  .ply-top { position:relative; flex-shrink:0; height:56px; display:flex; align-items:center;
    gap:0; padding:0 0 0 2px; background:var(--surface);
    border-bottom:1px solid var(--border); z-index:4; }
  .ply-iconbtn { flex-shrink:0; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
    border:0; background:transparent; border-radius:8px; color:var(--muted); font-size:17px; cursor:pointer;
    text-decoration:none; transition:background .15s; }
  .ply-iconbtn:hover { background:var(--bg); color:var(--ink); }
  /* Müfredat (☰) mobilde ASIL gezinme kontrolü: içerik ağacına tek giriş yolu o.
     38px dokunma hedefi küçük kalıyordu (kullanıcı 2026-08-10). Yalnız mobilde
     büyütülüyor — masaüstünde rail zaten ekranda, ikon ikincil. */
  @media (max-width:860px) {
    .ply-top .ply-iconbtn { width:46px; height:46px; font-size:21px; }
    /* MÜFREDAT (☰): mobilde içerik ağacına TEK giriş yolu o, ✕ (çıkış) ise
       nadir kullanılan ikincil eylem. Hiyerarşi kutu ölçüsüyle değil ikon
       ağırlığıyla kuruluyor — kutu 46px kalıyor, dokunma hedefleri eşit.
  
       3px YUKARI: ☰ glifinin yazı tipi metrikleri ✕'ten farklı, tam ortada
       olmasına rağmen göze aşağıda duruyor. Kaydırma padding-bottom ile
       yapılıyor, transform ile DEĞİL: transform hover zeminini de taşır ve
       vurgu komşularıyla hizasız kalırdı. Kutu 46px, içerik alanı üstte
       kalıyor, glif 3px yukarı çıkıyor. */
    .ply-top .ply-iconbtn.ply-only-mob { box-sizing:border-box; font-size:24px;
      line-height:1; padding-bottom:6px; }
  }
  .ply-top-title { flex:1; min-width:0; margin:0 10px 0 8px; font-weight:650; font-size:15px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ply-top-title-sep { color:var(--faint); font-weight:400; margin:0 2px; }
  .ply-top-title-lesson { color:var(--muted); font-weight:500; }
  /* Sağ grup: sayı + tam ekran. İlerleme çubuğu artık barın alt kenarında,
     bu grubun içinde yer kaplamıyor. */
  .ply-top-prog { flex-shrink:0; display:flex; align-items:center; gap:8px; }
  /* Sınav geri sayımı — soru sayısı/baraj artık burada TEKRARLANMIYOR, ön-sınav ekranında
     bir kez gösteriliyor (bkz .ply-q-intro). Üst barda kalıcı olan tek şey süre. */
  .ply-top-timer { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
    background:var(--bg); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .ply-top-timer svg { width:14px; height:14px; }
  .ply-top-timer.is-urgent { background:#FEF2F2; color:#B91C1C; }
  @media (max-width:640px) { .ply-top-title-lesson { display:none; } }
  /* Barın ALT KENARINDA, tam genişlikte ince çizgi — satırdan çıkarıldı.
     position:absolute, kapsayıcısı .ply-top (position:relative). */
  .ply-prog-track { position:absolute; left:0; right:0; bottom:-1px; width:auto; height:3px;
    border-radius:0; background:var(--border); overflow:hidden; }
  .ply-prog-fill { height:100%; border-radius:0; background:#16A34A; transition:width .35s ease; }
  .ply-prog-num { font-size:12.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
  /* Tam ekran: ikon TEK BAŞINA dekorasyon gibi okunuyordu → metinli, çerçeveli buton */
  .ply-fsbtn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; margin-left:4px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
    color:var(--body); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s; }
  .ply-fsbtn:hover { background:var(--bg); border-color:var(--ink); color:var(--ink); }
  .ply-fsbtn svg { width:16px; height:16px; flex:none; }
  /* Mobilde ikon-only ve DİĞER İKON DÜĞMELERLE AYNI ÖLÇÜ (46px). Önce 34px
     yüksekliğinde, çerçeveli ve farklı ölçüdeydi — satırdaki dengesizliğin
     ana kaynağı buydu: yan yana üç kontrol, üç farklı boy. */
  /* Mobilde ✕ ☰ ⛶ ÜÇÜ DE AYNI KUTU: 46px, çerçevesiz, saydam zemin.
     Tam ekran düğmesi çerçeveli, 34px yüksekliğinde ve margin-left:4px ile
     kenardan 12px içerideydi; komşuları çerçevesiz ve 6px içerideydi. Bu
     asimetri "kaymış" görüntüsünü yaratıyordu (kullanıcı 2026-08-10). */
  @media (max-width:860px) {
    .ply-fsbtn-txt { display:none; }
    .ply-fsbtn { width:46px; height:46px; padding:0; margin:0 -2px 0 0;
      border:0; background:transparent; border-radius:10px; color:var(--muted); }
    .ply-fsbtn:hover { background:var(--bg); border-color:transparent; color:var(--ink); }
    .ply-fsbtn svg { width:19px; height:19px; }
  }
  
  /* ── Gövde ── */
  .ply-content-body { flex:1; display:flex; overflow:hidden; position:relative; }
  
  /* ── Rail (müfredat) ── */
  .ply-rail { width:320px; transition:width .2s ease; flex-shrink:0; display:flex; flex-direction:column; background:var(--surface);
    border-right:1px solid var(--border); overflow:hidden; }
  .ply-rail-head { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
    font-weight:700; font-size:13px; color:var(--ink); border-bottom:1px solid var(--border);
    text-transform:uppercase; letter-spacing:.04em; }
  .ply-rail-scroll { flex:1; overflow-y:auto; padding-bottom:24px; }
  
  /* Panel içi daraltma ikonu (rail-head'de) + panel kapalıyken aynı köşede beliren eşleniği */
  .ply-railtoggle { flex-shrink:0; width:26px; height:26px; display:inline-flex; align-items:center;
    justify-content:center; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; }
  .ply-railtoggle:hover { background:var(--bg); color:var(--ink); }
  .ply-railtoggle svg { width:16px; height:16px; }
  .ply-railreopen { position:absolute; top:0; left:0; z-index:5; width:48px; height:49px;
    display:flex; align-items:center; justify-content:center; border:0; border-right:1px solid var(--border);
    border-bottom:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer;
    transition:background .12s, color .12s; }
  .ply-railreopen:hover { background:var(--bg); color:var(--ink); }
  .ply-railreopen svg { width:17px; height:17px; }
  .ply-unit { padding:14px 16px 6px; font-size:11.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted); }
  .ply-lrow { width:100%; display:flex; gap:10px; align-items:flex-start; padding:11px 16px; text-align:left;
    border-left:3px solid transparent; background:transparent; text-decoration:none; transition:background .12s; }
  .ply-lrow:hover { background:var(--bg); }
  .ply-lrow.is-active { background:var(--red-50); border-left-color:var(--red-600); }
  .ply-lrow.is-locked { opacity:.45; pointer-events:none; }
  .ply-lrow-ic { flex-shrink:0; width:20px; text-align:center; font-size:15px; color:var(--faint); margin-top:1px; line-height:1.3; }
  .ply-lrow.is-active .ply-lrow-ic { color:var(--red-600); }
  .ply-lrow.is-done .ply-lrow-ic { color:#16A34A; font-weight:700; }
  .ply-lrow-main { min-width:0; display:flex; flex-direction:column; }
  .ply-lrow-title { font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ply-lrow.is-active .ply-lrow-title { color:var(--red-700); font-weight:650; }
  .ply-lrow-meta { font-size:11.5px; color:var(--muted); margin-top:2px; }
  
  /* ── Sahne ── */
  .ply-stage { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
  .ply-stage-scroll { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
  .ply-caption { width:100%; max-width:920px; margin:0 auto; padding:20px 24px 10px; }
  .ply-h1 { margin:0; font-size:22px; font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:-.02em; }
  .ply-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .ply-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px;
    font-size:12px; font-weight:600; background:var(--bg); border:1px solid var(--border); color:var(--body); }
  .ply-chip-req { background:#FEF3C7; border-color:#FDE68A; color:#B45309; }
  .ply-chip-ok { background:#DCFCE7; border-color:#BBF7D0; color:#15803D; }
  .ply-content { width:100%; max-width:920px; margin:0 auto; padding:0 24px 28px; }
  /* Sınav: kart kısa (özellikle ön-sınav ekranı) ama kapsayıcı tam viewport yüksekliğinde —
     üstte kalıp altında koca boş alan bırakmasın, dikey ortalansın (kullanıcı 2 kez işaret etti,
     bu ÖNCEKİ "padding" şikayetinden farklı bir sorundu: kart içi değil, kart-altı boşluk). */
  .ply-content.is-centered { display:flex; flex-direction:column; justify-content:center; min-height:100%; }
  .ply-content.is-scorm { max-width:1120px; }
  
  .ply-video-wrap { width:100%; aspect-ratio:16/9; position:relative; background:#000; border-radius:12px;
    overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.12); }
  .ply-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
  .ply-vbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; }
  .ply-guard-note { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:12.5px; color:var(--muted); }
  
  /* SCORM/etkileşimli: çerçevesiz, kenardan kenara — paketin kendi kabuğu var,
     üstüne kutu koymak "kutu içinde kutu" yaratıyordu. Sahne dikeyde tamamen içeriğe ayrılır. */
  .ply-stage-scroll.is-immersive { overflow:hidden; }
  .ply-stage-scroll.is-immersive .ply-content { max-width:none; padding:0; height:100%; }
  .ply-frame-wrap { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; background:var(--surface); }
  .ply-frame { width:100%; height:100%; border:0; display:block; }
  /* Yüklenirken GÖRÜNMEZ ama YER KAPLAR. display:none olsaydı iframe'in layout
     kutusu olmazdı ve içerideki SCORM paketi kendini 0x0 sanardı; Storyline
     düzenini yalnız yüklemede seçtiği için de bir daha düzelmezdi. */
  .ply-frame.is-yukleniyor { opacity:0; }
  /* ─────────────────────────────────────────────────────────────────────────
     TAM EKRAN — CSS ile, Fullscreen API ile DEĞİL.
  
     requestFullscreen() iPhone Safari'de <video> dışındaki öğelerde ÇALIŞMIYOR;
     düğme sessizce hiçbir şey yapmıyordu (2026-08-09). CSS yaklaşımı her yerde
     aynı davranıyor: tek kod yolu, tahmin edilebilir sonuç.
     Bedeli masaüstünde tarayıcı çubuklarının görünür kalması — mobildeki
     "hiç çalışmıyor" durumunun yanında kabul edilebilir bir takas.
     ───────────────────────────────────────────────────────────────────────── */
  .ply-frame-wrap.is-tamekran {
    position:fixed; inset:0; z-index:9998; width:100vw; height:100dvh;
    background:#000; border-radius:0;
  }
  /* iOS'ta adres çubuğu yüzünden 100vh taşar; dvh destekleyen tarayıcıda üstteki
     kural geçerli, desteklemeyende bu yedek çalışır. */
  @supports not (height: 100dvh) { .ply-frame-wrap.is-tamekran { height:100vh; } }
  
  /* Tam ekrandan çıkış düğmesi — paketin kendi kabuğunun üstünde, sağ üstte.
     Sayfadaki üst şerit gizlendiği için buraya bir çıkış yolu şart. */
  .ply-fsexit { position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); right:12px;
    z-index:9999; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(15,23,42,.62); color:#fff; font-size:19px; line-height:1;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
  .ply-fsexit:hover { background:rgba(15,23,42,.8); }
  
  /* ── YATAY ÇEVİRME DAVETİ ──────────────────────────────────────────────────
     Tam ekrana basıldığı AN gösterilir: kullanıcı "daha büyük görmek istiyorum"
     niyetini yeni beyan etmiştir, davet için doğru an budur.
  
     ENGELLEYİCİ DEĞİL, bilerek: içerik zaten büyüdü, bu bir ikram. Ortada duran
     kapatılası bir kutu, tam ekranı angaryaya çevirirdi. Altta belirir, dokunmayı
     geçirir (pointer-events:none), kendiliğinden söner ve telefon çevrilir
     çevrilmez kaybolur. */
  .ply-rotate-hint { position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 22px); z-index:9999;
    display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:99px;
    background:rgba(15,23,42,.82); color:#fff; font-size:13.5px; font-weight:500;
    backdrop-filter:blur(6px); pointer-events:none; box-shadow:0 6px 24px rgba(0,0,0,.3); }
  .ply-rotate-hint svg { width:18px; height:18px; flex:none; animation:ply-rot 2.2s ease-in-out infinite; }
  @keyframes ply-rot { 0%,55%,100% { transform:rotate(0); } 75%,90% { transform:rotate(-90deg); } }
  
  /* ── DİKEY TELEFONDA ÇERÇEVE: içeriğin ORANINDA ───────────────────────────
     Paket 1000x540 sabit sahneyle üretilmiş, yeniden akmıyor. Çerçeve ekran
     yüksekliğini doldurunca içerik ortada kalıyor, üstte ve altta ekranın %85'i
     siyah bant oluyordu (ölçüldü: 390x640 kutuda oynatıcı 388x241).
  
     Çerçeveye içeriğin oranını verince bant tamamen kalkıyor ve altta kalan yer
     ders başlığı / ilerleme / sonraki ders için kullanılabilir hale geliyor —
     YouTube'un mobildeki deseni. Tam ekranda bu kural devre dışı (is-tamekran
     position:fixed ile devralıyor). */
  @media (max-width:860px) and (orientation:portrait) {
    .ply-stage-scroll.is-immersive { overflow-y:auto; }
    .ply-stage-scroll.is-immersive .ply-content { height:auto; }
    .ply-frame-wrap:not(.is-tamekran) { height:auto; aspect-ratio:1000/540; background:#000; }
  
    /* Alt aksiyon barı SCORM'da GİZLİ: gezinme artık listenin üstünde, göz
       hizasında. İkisi birden dursa aynı iki düğme ekranda iki kez olurdu.
       Yalnız is-immersive (SCORM) kapsamında — video/sınavda bar yerinde kalır,
       oralarda CTA (tamamla/gönder) da bu barda yaşıyor. */
    .ply-stage-scroll.is-immersive ~ .ply-actions { display:none; }
  }
  
  /* ── Mobil dikeyde içerik altı müfredat ──────────────────────────────────
     Varsayılan GİZLİ: masaüstünde ve yatayda sol rail zaten ekranda, ikisini
     birden göstermek aynı listeyi iki kez basmak olurdu. */
  .ply-mobout { display:none; padding:0 0 28px; }
  /* GÖRÜNÜRLÜK KURALI TABANDAN SONRA GELMELİ.
     Önce medya sorgusu içinde display:block yazıp tabanı altına koymuştum:
     aynı özgüllükte (0,1,0) sonraki kural kazanır → liste HER ZAMAN gizli
     kalıyordu (2026-08-10, kullanıcı boş beyaz alanı gösterdi).
     Kaskad sırası burada davranışı belirliyor; ikisini ayırmak yerine
     görünürlüğü tek yerde, tabandan SONRA tanımlıyoruz. */
  @media (max-width:860px) and (orientation:portrait) {
    .ply-mobout { display:block; }
  }
  
  /* Gezinme listenin ÜSTÜNDE: en sık yapılan iş "sonraki ders", onu ekranın en
     dibinde aramak zorunda kalmasın. Dokunma hedefi 48px — eski aksiyon barındaki
     düğmeler mobilde küçük kalıyordu (kullanıcı 2026-08-10). */
  /* Konu listesinin ALTINDA — üstte olduğunda paketin kendi slayt oklarıyla
     karışıyordu. Üstte ayırıcı çizgi: listenin devamı değil, ayrı bir eylem. */
  .ply-mobnav { display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:16px; margin-top:4px; border-top:1px solid var(--border); }
  .ply-mobnav-btn { display:flex; align-items:center; justify-content:center; min-height:48px;
    padding:0 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
    font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; }
  .ply-mobnav-btn.is-primary { background:var(--red-600); border-color:var(--red-600); color:#fff; }
  .ply-mobnav-btn.is-disabled { opacity:.4; pointer-events:none; }
  
  .ply-mobout-head { display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px 8px; font-size:12px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--muted); border-top:1px solid var(--border); }
  .ply-mobout-say { font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none;
    font-size:13px; color:var(--body); }
  /* Satırlar rail ile aynı sınıfları kullanıyor (.ply-lrow) — tek partial, tek
     görünüm. Burada yalnız dokunma yüksekliği artırılıyor. */
  /* Bu dersin konu başlıkları — satış sayfasındaki cd-outline deseniyle aynı
     görünüm (numara + başlık), farklı bir dil kurmamak için. */
  .ply-konular { list-style:none; margin:0; padding:0 16px 8px; }
  .ply-konu { display:flex; align-items:flex-start; gap:12px; padding:11px 0;
    border-bottom:1px solid var(--border); }
  .ply-konu:last-child { border-bottom:0; }
  .ply-konu-num { flex:none; min-width:20px; font-size:12px; font-weight:600;
    color:var(--faint); font-variant-numeric:tabular-nums; line-height:1.5; }
  .ply-konu-ad { font-size:14px; color:var(--body); line-height:1.45; }
  
  .ply-mobout-list .ply-lrow { min-height:56px; padding:12px 16px; }
  .ply-mobout-list .ply-unit { padding:14px 16px 6px; }
  .ply-frame-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:14px; color:var(--muted); font-size:14px; background:var(--surface); }
  .ply-spinner { width:30px; height:30px; border-radius:50%;
    border:3px solid var(--border); border-top-color:var(--red-600); animation:ply-spin .8s linear infinite; }
  @keyframes ply-spin { to { transform:rotate(360deg); } }
  .ply-frame-loading-slow { font-size:12.5px; color:var(--faint); max-width:260px; text-align:center; }
  
  /* Ses / dosya / boş-içerik durumları */
  .ply-audio-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px 24px;
    display:flex; flex-direction:column; align-items:center; gap:18px; }
  .ply-audio-ic { font-size:52px; line-height:1; }
  .ply-audio-card audio { width:100%; max-width:520px; }
  .ply-filebox { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:44px;
    background:var(--surface); border:1px dashed var(--border-strong); border-radius:12px; }
  .ply-filebox-ic { font-size:44px; line-height:1; }
  .ply-filebox-name { font-weight:600; color:var(--ink); }
  .ply-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:64px 20px;
    color:var(--muted); text-align:center; }
  .ply-empty-ic { font-size:40px; line-height:1; margin-bottom:4px; }
  .ply-empty p { margin:0; font-size:15px; font-weight:600; color:var(--ink); }
  .ply-empty-sub { font-size:13.5px; }
  
  .ply-doc { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:30px 34px;
    max-width:760px; margin:0 auto; font-size:15.5px; line-height:1.75; color:var(--body); }
  .ply-doc h1,.ply-doc h2,.ply-doc h3 { color:var(--ink); line-height:1.3; margin:1.3em 0 .5em; }
  .ply-doc p { margin:0 0 1em; } .ply-doc img { max-width:100%; border-radius:8px; }
  
  /* ── Sınav ── */
  /* Üst boşluk yanlardan/alttan DAHA DAR: başlık kaldırılınca (breadcrumb'a taşındı) üst
     padding hiçbir şeye hizmet etmeyen boş bir bant gibi görünüyordu. */
  .ply-quiz { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:760px; margin:0 auto; }
  .ply-quiz-result { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px; margin-bottom:20px; border:1px solid; font-size:24px; }
  .ply-quiz-result-txt { display:flex; flex-direction:column; }
  .ply-quiz-result-txt strong { font-size:15px; }
  .ply-quiz-result-txt span { font-size:13px; opacity:.85; }
  .ply-quiz-result.is-pass { background:#DCFCE7; border-color:#BBF7D0; color:#15803D; }
  .ply-quiz-result.is-fail { background:var(--red-50); border-color:var(--red-100); color:var(--red-700); }
  .ply-qlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
  .ply-q-text { font-weight:650; font-size:15px; color:var(--ink); margin-bottom:11px; line-height:1.4; }
  .ply-opts { display:flex; flex-direction:column; gap:8px; }
  .ply-opt { display:flex; align-items:center; gap:11px; padding:11px 14px; border:1.5px solid var(--border);
    border-radius:9px; cursor:pointer; transition:border-color .12s, background .12s; }
  .ply-opt:hover:not(.is-lock) { border-color:var(--border-strong); background:var(--bg); }
  /* Seçili şık NÖTR renkte — kırmızı marka rengi burada "yanlış/uyarı" gibi okunuyordu,
     kullanıcı henüz cevap vermiş olmanın dışında bir sinyal almamalı. */
  .ply-opt.is-sel { border-color:var(--ink); background:var(--bg); }
  .ply-opt.is-lock { cursor:default; }
  .ply-opt input { position:absolute; opacity:0; width:0; height:0; }
  .ply-opt-mark { flex-shrink:0; width:19px; height:19px; border-radius:50%; border:2px solid var(--border-strong); position:relative; }
  .ply-opt.is-sel .ply-opt-mark { border-color:var(--ink); }
  .ply-opt.is-sel .ply-opt-mark::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ink); }
  .ply-opt-txt { font-size:14.5px; color:var(--body); }
  .ply-quiz-retry { margin-top:18px; }
  
  /* ── Aksiyon barı (sticky) ── */
  .ply-actions { flex-shrink:0; display:flex; align-items:center; gap:16px; padding:12px 24px;
    background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -2px 12px rgba(0,0,0,.04); z-index:3; }
  .ply-navbtn { flex-shrink:0; height:42px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    border:1px solid var(--border-strong); background:var(--surface); border-radius:9px; color:var(--body);
    font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; text-decoration:none; transition:background .12s; }
  .ply-navbtn:hover:not(:disabled) { background:var(--bg); }
  .ply-navbtn:disabled { opacity:.4; cursor:not-allowed; }
  .ply-action-mid { flex:1; display:flex; justify-content:center; min-width:0; }
  .ply-hint { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); background:var(--bg);
    padding:7px 13px; border-radius:99px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .ply-cta { flex-shrink:0; height:44px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:0; border-radius:10px; background:var(--border-strong); color:#fff; font-weight:700; font-size:15px;
    font-family:inherit; cursor:pointer; text-decoration:none; transition:filter .12s, box-shadow .12s, transform .08s; }
  .ply-cta.is-ready { background:#16A34A; box-shadow:0 4px 16px rgba(22,163,74,.35); }
  .ply-cta.is-ready:hover { filter:brightness(1.06); }
  .ply-cta.is-ready:active { transform:translateY(1px); }
  .ply-cta:disabled { cursor:not-allowed; opacity:.85; box-shadow:none; }
  
  /* ── Kutlama ── */
  .ply-celebrate { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
    background:rgba(15,15,18,.55); backdrop-filter:blur(4px); padding:20px; }
  .ply-cel-card { background:var(--surface); border-radius:18px; padding:38px 32px; max-width:460px; width:100%;
    text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.35); }
  .ply-cel-emoji { font-size:58px; line-height:1; }
  .ply-cel-card h2 { margin:14px 0 4px; font-size:24px; font-weight:800; color:var(--ink); }
  .ply-cel-sub { margin:0; color:var(--muted); font-size:14.5px; }
  .ply-cel-cert { margin:16px 0 0; padding:11px 14px; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--red-50); color:var(--red-700); border-radius:10px; font-size:13px; font-weight:600; }
  .ply-cel-btns { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
  .ply-cel-btns .ply-cta, .ply-cel-btns .ply-navbtn { width:100%; }
  
  /* ── Toast ── */
  .ply-toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); background:var(--ink); color:#fff;
    padding:12px 20px; border-radius:10px; font-size:14px; font-weight:500; z-index:90;
    box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:90vw; text-align:center; }
  
  /* ── Mobil ── */
  /* DİKKAT: bu iki yardımcı display'i !important ile yazıyor, dolayısıyla Alpine'ın
     x-show'dan gelen inline display'ini EZER. x-show kullanan bir öğeye .ply-only-mob
     verme — öğe koşul false olsa bile görünür kalır (scrim tam bunu yaşadı: mobilde
     kalıcı açık kalıp player'daki her dokunmayı yuttu). Böyle durumlarda öğeye kendi
     duyarlı display kuralını yaz, x-show onun üstüne inline yazabilir. */
  .ply-only-mob { display:none !important; }
  .ply-only-desk { display:inline-flex; }
  .ply-scrim { display:none; }
  /* Müfredat gizlendiğinde rail genişliği 0'a iner (görünür kalan içerik alanı büyür).
     html.co-rail-hidden: tercih Alpine'DAN ÖNCE uygulanır → ilk boyamada doğru, titreme yok. */
  .ply.is-rail-hidden .ply-rail,
  html.co-rail-hidden .ply-rail { width:0; border-right:0; overflow:hidden; }
  
  /* ── Müfredat butonu (üst bar) ── TEK panel kontrolü, masaüstü+mobil.
     Kenar tutamağı denendi ve BULUNAMADI: 24px'lik bir kenar şeridi keşfedilebilir değil,
     göz üst bara gider. Etiket yazılı çünkü panel ikonu tek başına tanınmıyor.
     Panel kapalıyken buton vurgulanır — kapalı olduğu butonun kendisinden anlaşılır. */
  .ply-panelbtn { flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
    height:38px; padding:0 12px; border:1px solid transparent; border-radius:9px;
    background:transparent; color:var(--muted); cursor:pointer;
    font:inherit; font-size:14px; font-weight:500; transition:background .15s, color .15s, border-color .15s; }
  .ply-panelbtn svg { width:18px; height:18px; flex-shrink:0; }
  .ply-panelbtn:hover { background:var(--bg); color:var(--ink); }
  .ply-panelbtn[aria-expanded="false"] { background:var(--bg); color:var(--ink); border-color:var(--border); }
  /* Dar ekranda etiket düşer, ikon kalır — başlığa yer açmak için */
  @media (max-width:560px) { .ply-panelbtn-txt { display:none; } .ply-panelbtn { padding:0 9px; } }
  @media (max-width:860px) {
    .ply-only-mob { display:inline-flex !important; }
    .ply-only-desk { display:none !important; }
    .ply.is-rail-hidden .ply-rail,
    html.co-rail-hidden .ply-rail { width:min(86vw,340px); border-right:1px solid var(--border); }
    .ply-rail { position:absolute; top:0; left:0; bottom:0; z-index:20; width:min(86vw,340px);
      transform:translateX(-100%); transition:transform .25s ease; box-shadow:6px 0 24px rgba(0,0,0,.18); }
    .ply-rail.is-open { transform:translateX(0); }
    .ply-scrim { display:block; position:absolute; inset:0; z-index:15; background:rgba(0,0,0,.42); }
    .ply-top-title { font-size:14px; }
    /* .ply-prog-track artık satırda değil (barın alt kenarında) — genişlik
       daraltmaya gerek kalmadı. Sayı mobilde gizli: dar ekranda başlığa yer aç. */
    .ply-prog-num { display:none; }
    .ply-caption { padding:16px 16px 10px; }
    .ply-h1 { font-size:18px; }
    .ply-content { padding:0 16px 22px; }
    .ply-doc { padding:20px 18px; }
    .ply-quiz { padding:18px 16px; }
    .ply-actions { padding:10px 14px; gap:10px; }
    .ply-navbtn { padding:0 13px; }
    .ply-cta { flex:1; padding:0 16px; }
  }
  @media (max-width:520px) { .ply-action-mid { display:none; } }
  
  /* ── Tek-soru sınav kartı ── Sorular artık TEK TEK gösteriliyor (üst bardaki
     .ply-top-exam kural+süreyi taşıyor, burada yalnız soru+ilerleme var). */
  .ply-q-card { display:flex; flex-direction:column; gap:18px; }
  .ply-q-progress { display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--muted); font-weight:600; }
  .ply-q-progress-track { flex:1; height:4px; border-radius:99px; background:var(--border); overflow:hidden; }
  .ply-q-progress-fill { height:100%; border-radius:99px; background:var(--ink); transition:width .3s ease; }
  .ply-q-next { align-self:flex-end; margin-top:4px; }
  
  /* ── Ön-sınav bilgi ekranı ── resmi ama sade: kurallar liste halinde, tek CTA çifti.
     Rozet/renkli süsleme YOK bilinçli olarak — bir sertifika sınavının güven vermesi
     süsten değil kısıtlamadan gelir (bkz co_academy tasarım notları). */
  .ply-q-intro { display:flex; flex-direction:column; gap:22px; padding:8px 4px 4px; text-align:center; }
  .ply-q-intro-title { margin:0; font-size:19px; font-weight:650; color:var(--ink); line-height:1.35; }
  .ply-q-intro-sub { margin:-10px 0 0; font-size:13.5px; color:var(--muted); }
  .ply-q-intro-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px;
    margin:0; padding:20px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
  .ply-q-intro-facts > div { display:flex; flex-direction:column; gap:4px; }
  .ply-q-intro-facts dt { font-size:12px; color:var(--muted); font-weight:500; }
  .ply-q-intro-facts dd { margin:0; font-size:18px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }
  .ply-q-intro-blocked { margin:0; font-size:13.5px; color:var(--red-700); background:var(--red-50);
    border:1px solid var(--red-100); border-radius:8px; padding:10px 14px; }
  .ply-q-intro-actions { display:flex; align-items:center; justify-content:center; gap:12px; }
  @media (max-width:560px) { .ply-q-intro-facts { grid-template-columns:repeat(2,1fr); } }
  
  /* ── Referanslar (gerçek müşteri yorumları) ───────────────────────────────── */
  .tst { padding:56px 0; border-top:1px solid var(--border); }
  .tst-head { font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:32px; }
  .tst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .tst-card { display:flex; flex-direction:column; gap:16px; margin:0; padding:24px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
  .tst-card blockquote { margin:0; font-size:15px; line-height:1.6; color:var(--body); }
  .tst-card figcaption { display:flex; align-items:center; gap:12px; margin-top:auto; }
  .tst-card figcaption img, .tst-mono { width:44px; height:44px; border-radius:50%; flex:none; object-fit:cover; }
  .tst-mono { display:grid; place-items:center; background:var(--bg); color:var(--muted);
    font-weight:600; font-size:17px; border:1px solid var(--border); }
  .tst-who { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
  .tst-who strong { font-size:14.5px; color:var(--ink); }
  .tst-who span { font-size:13px; color:var(--muted); }
  @media (max-width:900px) { .tst-grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px) { .tst-grid { grid-template-columns:1fr; } .tst { padding:40px 0; } }
  .card-enrolled { font-size:12px; color:var(--muted); font-weight:500; }
  
  /* Çerez onay bandı (KVKK) — bkz docs/TRACKING.md §5.
     Alt şerit tercih edildi, tam ekran modal DEĞİL: modal içeriği tamamen kapatıp
     "kurtulmak için tıkla" refleksi yaratıyor; şerit hem görünür hem sayfayı okumayı
     engellemiyor → daha bilinçli ve daha yüksek kabul oranı. */
  /* max-height+overflow şart: "Ayarlar" paneli (başlık+3 kategori+açıklama+butonlar) basit
     banner'dan çok daha uzun. Kısa mobil ekranlarda kural olmadan panel viewport'u aşıyor,
     kaydırma da olmayınca üst kısım (başlık, ilk kategoriler) erişilemez kalıyordu — kullanıcı
     "bembeyaz bir ekran" görüyordu (2026-08-03). */
  .cconsent { position:fixed; left:0; right:0; bottom:0; z-index:9998; background:var(--surface);
    border-top:1px solid var(--border); box-shadow:0 -6px 24px rgba(15,23,42,.10); padding:14px 0;
    max-height:90dvh; overflow-y:auto; }
  /* Ayarlar/detay görünümü — bu da MODAL DEĞİL, bant ile AYNI mantık: karartma
     yok, sayfayı bloklamıyor, "kurtulmak için tıkla" refleksi yaratmıyor
     (yukarıdaki not). Yalnız daha yüksek bir şerit: ekranın ~1/3'ü, akordeon
     kategori satırları içeride kayar, başlık ve butonlar sabit kalır. */
  .cconsent--modal { padding:0; max-height:none; overflow:hidden; }
  .cconsent-inner { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center;
    gap:20px; flex-wrap:wrap; justify-content:space-between; }
  .cconsent-text { color:var(--body); font-size:.9375rem; line-height:1.5; margin:0; flex:1 1 380px; }
  .cconsent-text a { color:var(--red-600); text-decoration:underline; }
  .cconsent-actions { display:flex; gap:10px; flex-shrink:0; }
  /* Ayarlar ve Kabul et AYNI ölçüde. Renk farkı serbest: yeşil "devam/güvenli"
     okunur, kırmızı marka rengi burada "dur" çağrışımı yapardı — ödeme
     CTA'sında zaten aynı gerekçeyle kırmızıdan ayrıldık. */
  .cconsent-accept, .cconsent-settings-btn { min-height:44px; padding:0 22px; font-size:.9375rem; }
  .cconsent-accept { background:#16A34A; border-color:#16A34A; color:#fff; }
  .cconsent-accept:hover { background:#15803D; border-color:#15803D; }
  .cconsent-settings-btn { background:var(--surface); color:var(--body); border:1px solid var(--border-strong); }
  .cconsent-settings-btn:hover { background:var(--bg); }
  @media (max-width:600px) {
    .cconsent-inner { flex-direction:column; align-items:stretch; gap:12px; }
    /* flex-basis ANA EKSENE uygulanır: konteyner column'a dönünce masaüstündeki
       "1 1 380px" (min genişlik) 380px YÜKSEKLİK oldu ve metinle butonlar arasında
       kocaman boşluk açtı — bar ekranın yarısını kaplıyordu (2026-08-03). */
    .cconsent-text { flex:0 1 auto; }
    .cconsent-actions { justify-content:stretch; }
    .cconsent-actions .btn { flex:1; }
  }
  
  /* Ayarlar paneli — kategori bazlı akordeon (CookieYes deseni). onlineakademi'nin
     .cc-modal'ıyla AYNI görsel dili konuşur: başlık+kapat, "daha fazla göster" ile
     açılan uzun açıklama, Zorunlu için yeşil "Her zaman aktif" etiketi. */
  .cconsent-panel { max-width:1180px; margin:0 auto; width:100%;
    height:33vh; min-height:360px; max-height:min(600px,80vh);
    display:flex; flex-direction:column; }
  .cconsent-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 24px; border-bottom:1px solid var(--border); flex:none; }
  .cconsent-panel-head h2 { font-size:1.0625rem; color:var(--ink); margin:0; }
  .cconsent-panel-close { flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--muted); font-size:1.05rem; line-height:1; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center; transition:border-color .15s,color .15s; }
  .cconsent-panel-close:hover { border-color:var(--red-600); color:var(--red-600); }
  .cconsent-panel-body { padding:20px 24px; overflow-y:auto; }
  .cconsent-intro { font-size:.875rem; color:var(--body); line-height:1.6; margin:0 0 16px; }
  .cconsent-more-btn { background:none; border:0; padding:0; margin-left:4px; color:var(--red-600);
    font-size:.875rem; text-decoration:underline; cursor:pointer; }
  .cconsent-cat { padding:14px 0; border-top:1px solid var(--border); }
  .cconsent-cat:first-of-type { border-top:0; padding-top:0; }
  .cconsent-cat-head { display:flex; align-items:center; gap:10px; cursor:pointer; }
  .cconsent-chevron { flex:none; width:14px; color:var(--muted); transition:transform .15s; font-size:1.2rem; line-height:1; }
  .cconsent-chevron.is-open { transform:rotate(90deg); }
  .cconsent-cat-name { flex:1; font-size:.9375rem; font-weight:600; color:var(--ink); }
  .cconsent-always { flex:none; font-size:.8125rem; font-weight:700; color:#16A34A; }
  .cconsent-cat-desc { font-size:.8125rem; color:var(--muted); line-height:1.5; margin:8px 0 0 24px; }
  .cconsent-panel-actions { display:flex; gap:10px; flex-wrap:wrap; padding:18px 24px;
    border-top:1px solid var(--border); flex:none; }
  .cconsent-panel-actions .btn { flex:1; min-height:44px; padding:0 14px; font-size:.875rem;
    justify-content:center; text-align:center; }
  
  /* Toggle switch — button role=switch, CSS-only anahtar görünümü. */
  .cconsent-toggle { position:relative; width:42px; height:24px; border-radius:999px; border:none;
    background:var(--border-strong); flex-shrink:0; cursor:pointer; padding:0; transition:background .15s; }
  .cconsent-toggle-dot { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.25); transition:left .15s; }
  .cconsent-toggle.is-on { background:#16A34A; }
  .cconsent-toggle.is-on .cconsent-toggle-dot { left:20px; }
  @media (max-width:600px) {
    .cconsent-panel-actions { flex-direction:column; }
  }
  
  /* Kurum hakediş raporu (bkz docs/REVENUE.md) */
  .rv-note { color:var(--muted); font-size:.9375rem; line-height:1.55; max-width:760px; margin:0 0 24px; }
  .rv-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }
  .rv-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; }
  .rv-card span { display:block; color:var(--muted); font-size:.8125rem; margin-bottom:6px; }
  .rv-card strong { display:block; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; }
  .rv-card small { display:block; color:var(--faint); font-size:.75rem; margin-top:4px; }
  .rv-card-due { border-color:var(--red-600); }
  .rv-card-due strong { color:var(--red-600); }
  .rv-actions { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
  .rv-h2 { font-size:1.125rem; margin:28px 0 12px; }
  /* Tablo dar ekranda sayfayı yatay kaydırmasın, kendi içinde kaysın */
  .rv-tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
  .rv-table { width:100%; border-collapse:collapse; font-size:.875rem; min-width:640px; }
  .rv-table th { text-align:left; padding:11px 14px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
  .rv-table td { padding:11px 14px; border-bottom:1px solid var(--border); }
  .rv-table tr:last-child td { border-bottom:0; }
  .rv-table tr.is-pending td { color:var(--faint); }
  
  /* Ödev adımı — kursiyer yükleme / not görüntüleme (bkz learning/play.blade.php) */
  .ply-odev { max-width:560px; margin:0 auto; padding:28px 24px; text-align:center; }
  .ply-odev-not { padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--surface); margin-bottom:18px; }
  .ply-odev-puan { font-size:2.5rem; font-weight:700; color:var(--ink); line-height:1; }
  .ply-odev-puan span { font-size:1rem; font-weight:500; color:var(--muted); }
  .ply-odev-not p { margin:8px 0 0; color:var(--body); font-size:.9375rem; }
  .ply-odev-geri { margin-top:12px !important; padding-top:12px; border-top:1px solid var(--border); color:var(--muted) !important; font-size:.875rem !important; }
  .ply-odev-bekliyor { padding:18px; border:1px dashed var(--border-strong); border-radius:12px; margin-bottom:18px; color:var(--body); }
  .ply-odev-bekliyor p { margin:2px 0; font-size:.9375rem; }
  .ply-odev-aciklama { color:var(--body); font-size:.9375rem; margin:0 0 14px; }
  .ply-odev-form input[type=file] { display:block; width:100%; margin:0 auto 14px; padding:10px; border:1px solid var(--border-strong); border-radius:10px; font-size:.875rem; }
  .ply-odev-uyari { margin-top:10px; font-size:.8125rem; color:var(--muted); }
  /* Eğitmen carousel: "devamı var" solma efekti YALNIZ gerçekten taşınca (bkz course-detail) */
  .cd-instr-grid { mask-image:none; -webkit-mask-image:none; }
  .cd-instr-grid.is-scrollable { mask-image:linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 48px), transparent 100%); }
  
  /* Satın alma sonrası telefon kutusu — ödeme formundan buraya taşındı
     (bkz checkout/success.blade.php). Satış tamamlandığı için sürtünme maliyetsiz. */
  .cr-phone { margin-top:28px; padding-top:22px; border-top:1px solid var(--border); max-width:420px; margin-left:auto; margin-right:auto; }
  .cr-phone-q { margin:0 0 10px; font-size:.9375rem; color:var(--body); }
  .cr-phone-row { display:flex; gap:8px; }
  .cr-phone-row input { flex:1; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:10px; font-size:.9375rem; font-family:inherit; }
  .cr-phone-row .btn { flex:none; }
  .cr-phone-err { display:block; margin-top:8px; color:var(--red-600); font-size:.8125rem; }
  .cr-phone-ok { margin:0; color:var(--muted); font-size:.9375rem; }
  
  /* ============================================================================
     BLOG  (/blog, /blog/{slug})
     Okuma deneyimi ölçütleri — global yayıncılık standardı:
     · satır uzunluğu 60-70 karakter (Bringhurst aralığı 45-75)
     · gövde 19px/1.75 masaüstü, 17.5px/1.7 mobil — 16px "arayüz" boyutu,
       uzun metin için küçük kalıyor
     · paragraf arası boşluk satır yüksekliğinden büyük (göz paragrafı seçsin)
     ========================================================================== */
  .blog-list { padding:40px 0 80px; }
  .blog-list-head { max-width:640px; margin:8px 0 40px; }
  .blog-list-head h1 { font-size:clamp(2rem,4vw,2.75rem); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
  .blog-list-head p { margin-top:12px; color:var(--muted); font-size:1.0625rem; }
  .blog-empty { color:var(--muted); padding:40px 0; }
  
  .blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:32px 28px; }
  .blog-card { min-width:0; }
  .blog-card-link { display:flex; flex-direction:column; gap:14px; color:inherit; }
  .blog-card-img { aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-lg); background:var(--bg);
    border:1px solid var(--border); }
  .blog-card-img img { width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .35s ease; }
  .blog-card-link:hover .blog-card-img img { transform:scale(1.03); }
  .blog-card-cat { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.02em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:8px; }
  .blog-card-body h2 { font-size:1.1875rem; font-weight:650; line-height:1.35; letter-spacing:-.015em;
    color:var(--ink); }
  .blog-card-link:hover .blog-card-body h2 { color:var(--red-700); }
  .blog-card-body p { margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.6;
    /* 3 satırda kes: kartların yüksekliği özet uzunluğuna göre zıplamasın */
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .blog-card-meta { display:block; margin-top:12px; font-size:13px; color:var(--faint); }
  
  /* --- Yazı sayfası --- */
  .post { padding:32px 0 80px; }
  .post-head { max-width:68ch; margin:8px auto 0; }
  .post-cat { display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.02em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:14px; }
  .post-head h1 { font-size:clamp(1.875rem,3.6vw,2.75rem); font-weight:700; line-height:1.18;
    letter-spacing:-.03em; color:var(--ink); }
  .post-meta { margin-top:14px; color:var(--muted); font-size:14.5px; }
  .post-cover { margin:36px auto 0; max-width:900px; }
  .post-cover img { width:100%; height:auto; display:block; border-radius:var(--radius-xl);
    border:1px solid var(--border); }
  
  .post-body { max-width:68ch; margin:40px auto 0; font-size:19px; line-height:1.75; color:var(--body); }
  .post-body > * + * { margin-top:1.35em; }
  .post-body p { margin:0; }
  .post-body h2 { font-size:1.5rem; font-weight:680; line-height:1.3; letter-spacing:-.02em;
    color:var(--ink); margin-top:2.2em; }
  .post-body h3 { font-size:1.1875rem; font-weight:650; line-height:1.35; color:var(--ink); margin-top:1.9em; }
  .post-body strong { font-weight:650; color:var(--ink); }
  .post-body a { color:var(--red-700); text-decoration:underline; text-underline-offset:3px;
    text-decoration-thickness:1px; }
  .post-body ul, .post-body ol { padding-left:1.4em; }
  .post-body li + li { margin-top:.6em; }
  .post-body img { max-width:100%; height:auto; border-radius:var(--radius-lg); display:block; }
  .post-body figure { margin:0; }
  .post-body figcaption { margin-top:10px; font-size:14px; color:var(--muted); text-align:center; }
  .post-body blockquote { border-left:3px solid var(--red-600); padding:2px 0 2px 22px;
    color:var(--ink); font-size:1.0625em; }
  .post-body blockquote p + p { margin-top:.9em; }
  .post-body hr { border:0; border-top:1px solid var(--border); margin:2.4em 0; }
  .post-body table { width:100%; border-collapse:collapse; font-size:.92em; display:block; overflow-x:auto; }
  .post-body th, .post-body td { border:1px solid var(--border); padding:10px 12px; text-align:left; }
  
  /* --- Yazı içi eğitim bandı --- */
  /* Metnin ortasındaki band TEK SATIR: kart koymak okuma akışını bölüyordu.
     Kenarlıkla ayrılıyor ama rengi bağırmıyor — reklam değil, öneri gibi dursun. */
  .promo-inline { margin:2.4em 0; }
  .promo-inline a { display:flex; align-items:center; gap:12px; padding:16px 18px;
    border:1px solid var(--border); border-left:3px solid var(--red-600); border-radius:var(--radius-lg);
    background:var(--bg); color:inherit; font-size:16px; line-height:1.4; }
  .promo-inline a:hover { background:var(--red-50); border-color:var(--red-100); border-left-color:var(--red-600); }
  .promo-inline-label { flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--red-700); }
  .promo-inline-title { flex:1; min-width:0; font-weight:600; color:var(--ink); }
  .promo-inline-go { flex:none; color:var(--red-600); font-size:18px; }
  
  /* Yazı sonundaki band tam kart — okuma bitti, dikkat dağıtma kaygısı yok. */
  .promo-card { max-width:68ch; margin:56px auto 0; display:flex; gap:22px; align-items:center;
    padding:22px; border:1px solid var(--border); border-radius:var(--radius-xl);
    background:var(--surface); box-shadow:var(--shadow-sm); }
  .promo-card-img { flex:none; width:150px; aspect-ratio:16/10; border-radius:var(--radius);
    overflow:hidden; background:var(--bg); }
  .promo-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .promo-card-body { min-width:0; }
  .promo-card-label { display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:8px; }
  .promo-card-body h2 { font-size:1.1875rem; font-weight:650; line-height:1.35; color:var(--ink); }
  .promo-card-meta { margin:8px 0 16px; font-size:14px; color:var(--muted); }
  .promo-card .btn { display:inline-flex; }
  
  /* --- İlgili yazılar --- */
  .post-related { max-width:68ch; margin:64px auto 0; padding-top:36px; border-top:1px solid var(--border); }
  .post-related h2 { font-size:1.25rem; font-weight:650; letter-spacing:-.02em; color:var(--ink); margin-bottom:22px; }
  .post-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:22px; }
  .post-related-card { display:flex; flex-direction:column; gap:10px; color:inherit; }
  .post-related-card img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius);
    border:1px solid var(--border); display:block; }
  .post-related-title { font-size:15px; font-weight:600; line-height:1.35; color:var(--ink); }
  .post-related-card:hover .post-related-title { color:var(--red-700); }
  .post-related-meta { font-size:12.5px; color:var(--faint); }
  
  @media (max-width:820px) {
    .blog-list { padding:24px 0 56px; }
    .blog-grid { grid-template-columns:1fr; gap:28px; }
    .post { padding:20px 0 56px; }
    .post-cover { margin-top:24px; }
    .post-cover img { border-radius:var(--radius-lg); }
    /* Mobilde 19px fazla iri duruyor (ekran dar, satır zaten kısa) */
    .post-body { font-size:17.5px; line-height:1.7; margin-top:28px; }
    .post-body h2 { font-size:1.3125rem; }
    .post-body h3 { font-size:1.0625rem; }
    .post-body blockquote { padding-left:16px; }
    /* Kart yan yana sığmıyor: görsel üstte, metin altta */
    .promo-card { flex-direction:column; align-items:stretch; gap:16px; margin-top:40px; }
    .promo-card-img { width:100%; aspect-ratio:16/9; }
    .promo-card .btn { width:100%; justify-content:center; }
    .promo-inline a { flex-wrap:wrap; gap:6px 10px; }
    .promo-inline-label { width:100%; }
    .post-related { margin-top:48px; }
    .post-related-grid { grid-template-columns:1fr 1fr; gap:16px; }
  }
  
  /* Panel (/yonetim) — yetkiye göre değişen kart ızgarası */
  .panel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:8px; }
  .panel-card { display:flex; flex-direction:column; gap:6px; padding:22px; color:inherit;
    border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
  .panel-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-1px); }
  .panel-card-title { font-size:1.0625rem; font-weight:650; letter-spacing:-.015em; color:var(--ink); }
  .panel-card-desc { font-size:14px; line-height:1.5; color:var(--muted); }
  /* Canlı sayı — kartın "neden şimdi tıklamalıyım"ı. Kalın değil: başlıkla yarışmasın. */
  .panel-card-stat { margin-top:8px; font-size:13px; font-weight:600; color:var(--red-700); }
  @media (max-width:820px) { .panel-grid { grid-template-columns:1fr; gap:14px; } }
  
  /* Kurs önizlemesi (/egitim/{slug}/onizle) */
  .prev { padding:28px 0 72px; }
  .prev-head { max-width:820px; margin:6px 0 22px; }
  .prev-badge { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--red-700); background:var(--red-50);
    padding:5px 10px; border-radius:var(--radius-pill); margin-bottom:14px; }
  .prev-head h1 { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; letter-spacing:-.025em;
    line-height:1.2; color:var(--ink); }
  .prev-sub { margin-top:10px; color:var(--muted); font-size:15px; }
  /* SCORM paketleri 16:9 üretilmiş; sabit yükseklik yerine oran vermek her
     ekranda kırpılmadan sığdırıyor. */
  .prev-stage { aspect-ratio:16/9; width:100%; background:var(--ink); border-radius:var(--radius-xl);
    overflow:hidden; border:1px solid var(--border); }
  .prev-stage iframe { width:100%; height:100%; border:0; display:block; }
  .prev-cta { display:flex; align-items:center; justify-content:space-between; gap:24px;
    margin-top:26px; padding:22px 24px; border:1px solid var(--border);
    border-radius:var(--radius-xl); background:var(--bg); }
  .prev-cta strong { display:block; font-size:1.0625rem; color:var(--ink); }
  .prev-cta p { margin-top:6px; color:var(--muted); font-size:14.5px; line-height:1.55; max-width:56ch; }
  .prev-cta .btn { flex:none; }
  @media (max-width:820px) {
    .prev { padding:18px 0 56px; }
    .prev-stage { border-radius:var(--radius-lg); }
    .prev-cta { flex-direction:column; align-items:stretch; gap:16px; }
    .prev-cta .btn { width:100%; justify-content:center; }
  }
  
  /* Müfredat satırındaki "Önizle" — fiyat kartından BURAYA taşındı (kart satın alma
     kararına ayrılmalı; Udemy/Coursera deseni). Süre rozetinin solunda, ikincil ağırlıkta. */
  .cd-sub-preview { display:inline-flex; align-items:center; gap:6px; flex:none;
    padding:6px 12px; min-height:34px; border:1px solid var(--border-strong);
    border-radius:var(--radius-pill); background:var(--surface);
    font-size:13.5px; font-weight:600; color:var(--red-700); white-space:nowrap; }
  .cd-sub-preview:hover { border-color:var(--red-600); background:var(--red-50); }
  .cd-sub-preview svg { width:11px; height:11px; flex:none; }
  @media (max-width:520px) { .cd-sub-preview { padding:6px 10px; font-size:12.5px; } }
  
  /* Önizleme katmanı (satış sayfası). z-index çerez çubuğunun (9998) üstünde —
     diğer modallarla aynı kural, bkz .authm gerekçesi. */
  .prevm { position:fixed; inset:0; z-index:10001; display:flex; align-items:center;
    justify-content:center; padding:24px; }
  .prevm-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.62); }
  .prevm-box { position:relative; display:flex; flex-direction:column; width:min(1100px,100%);
    max-height:92dvh; background:var(--surface); border-radius:var(--radius-xl);
    overflow:hidden; box-shadow:var(--shadow-lg); }
  .prevm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    flex:none; padding:16px 20px; border-bottom:1px solid var(--border); }
  .prevm-badge { display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:4px; }
  .prevm-titles strong { font-size:1.0625rem; color:var(--ink); line-height:1.3; }
  .prevm-close { flex:none; min-width:44px; min-height:44px; border:0; background:none;
    font-size:19px; color:var(--muted); cursor:pointer; border-radius:var(--radius); }
  .prevm-close:hover { background:var(--bg); color:var(--ink); }
  /* SCORM paketleri 16:9 üretilmiş; oran vermek her ekranda kırpılmadan sığdırıyor */
  /* position:relative — yükleme örtüsü (.ply-frame-loading, inset:0) buna göre konumlanır */
  .prevm-stage { position:relative; flex:1 1 auto; aspect-ratio:16/9; min-height:0; background:var(--ink); }
  .prevm-stage iframe { width:100%; height:100%; border:0; display:block; }
  .prevm-foot { display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex:none; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg); }
  .prevm-foot span { font-size:14px; color:var(--muted); }
  
  @media (max-width:820px) {
    /* Mobilde tam ekran — küçük bir kutuda SCORM içeriği okunmuyor */
    .prevm { padding:0; }
    .prevm-box { width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
    .prevm-stage { aspect-ratio:auto; }
    /* Alt şerit mobilde YOK: sabit "Kaydol" çubuğu zaten ekranda ve iki kırmızı
       düğme birbiriyle yarışıyordu. Kapatma başlıktaki ✕ ile — dokunma hedefi 44px. */
    .prevm-foot { display:none; }
  }
  
  /* ── Program upsell kartı ────────────────────────────────────────────────────
     Tekil eğitim sayfasında "bu, X programının içinde" karşılaştırması.
     Bilinçli olarak SESSİZ bir kart: birincil CTA'nın altında, kendi rengi yok,
     dikkat çalmıyor. Amacı satın almayı bölmek değil, daha büyük seçeneği
     görünür kılmak. Karartma/modal YOK — Google araya giren geçiş reklamı
     yaptırımı ve bu sayfalar aramadan trafik alıyor. */
  .pupsell { margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
  .pupsell-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .pupsell-lead { margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--ink); }
  .pupsell-compare { display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
  .pupsell-compare > div { flex:1; min-width:0; }
  .pupsell-k { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
  .pupsell-compare strong { font-size:17px; font-weight:700; color:var(--ink); }
  .pupsell-win strong { color:var(--red-700); }
  .pupsell-badge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
    background:var(--red-50, #fef2f2); color:var(--red-700); font-size:11px; font-weight:700; white-space:nowrap; }
  .pupsell-total { margin:0 0 12px; font-size:13px; color:var(--muted); }
  .pupsell-inst { white-space:nowrap; }
  .pupsell-go { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
    border:1px solid var(--red-600); border-radius:8px; color:var(--red-700);
    font-size:14px; font-weight:600; background:#fff; }
  .pupsell-go:hover { background:var(--red-600); color:#fff; }
  @media (max-width:480px) {
    .pupsell-compare { flex-direction:column; gap:8px; }
    .pupsell-go { width:100%; justify-content:center; }
  }
  
  /* ── Hoş geldin kampanya bandı ──────────────────────────────────────────────
     Fiyat kutusunun EN ÜSTÜNDE. Altındayken "Kaydol"un hemen üstüne düşüyor ve
     iki eylem yan yana geliyordu; üstte ise fiyatı çerçeveliyor.
     Tıklanabilir ama DOLU KIRMIZI BUTON DEĞİL — sayfada tek birincil buton
     kalmalı, yoksa göz asıl eylemi seçemez. */
  .wcamp { display:block; position:relative; margin:0 0 14px; padding:12px 34px 12px 14px;
    border:1px solid var(--red-200,#fecaca); border-radius:10px; background:var(--red-50,#fef2f2); }
  a.wcamp:hover { border-color:var(--red-600); }
  .wcamp-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:4px; }
  .wcamp-head { display:block; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--ink); }
  .wcamp-meta { display:block; margin-top:5px; font-size:12.5px; color:var(--muted); }
  .wcamp-off { font-weight:700; color:var(--red-700); }
  .wcamp-quota { font-weight:600; }
  .wcamp-off + .wcamp-quota::before { content:" · "; font-weight:400; color:var(--muted); }
  .wcamp-go { position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-size:17px; color:var(--red-700); }
  .wcamp-note { display:block; font-size:12.5px; line-height:1.5; color:var(--muted); }
  .wcamp-price { display:block; font-size:20px; font-weight:700; color:var(--red-700); }
  .wcamp-price span { font-size:13px; }
  .wcamp.is-aktif { padding-right:14px; }
  .wcamp.is-dolu { background:transparent; border-color:var(--border); padding-right:14px; }
  
  /* ── Kayıt onayları ─────────────────────────────────────────────────────────
     auth-consent: ticari ileti AÇIK RIZASI — ayrı ve işaretsiz kutu (mevzuat).
     auth-legal  : kullanım koşulları + KVKK aydınlatması — "devam ederek kabul"
                   metni yeterli, aydınlatma bilgilendirme yükümlülüğü (rıza değil). */
  /* ÖZGÜLLÜK TUZAĞI: ".auth-form > label" (0,1,1) flex-direction:column veriyor
     ve ".auth-consent"i (0,1,0) eziyordu — kutu üstte, yazı altta kalıyordu.
     Aynı tuzak .checkout-terms'te de yaşanmış ve orada da label'a bağlanarak
     çözülmüş (bkz aşağısı). Seçici label ile birleşince (0,2,1) oluyor. */
  .auth-form > label.auth-consent,
  .auth-consent { display:flex; flex-direction:row; align-items:flex-start; gap:9px; margin:0 0 14px;
    font-size:13px; line-height:1.45; color:var(--ink); cursor:pointer; }
  .auth-consent input[type=checkbox] { width:18px; height:18px; margin:1px 0 0; flex:0 0 auto;
    accent-color:var(--red-600); cursor:pointer; }
  .auth-consent > span { flex:1; min-width:0; font-weight:400; }
  .auth-legal { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--muted); text-align:center; }
  .auth-legal a { color:var(--muted); text-decoration:underline; }
  .auth-legal a:hover { color:var(--red-700); }
  
  /* ── YÖNETİM KABUĞU (layouts.panel) ─────────────────────────────────────────
     Pazarlama kabuğundan ayrı: sol sabit menü + orta içerik. Yönetim ekranları
     eskiden layouts.app içindeydi, yani her birinde kurs arama kutusu, dil
     seçici, çerez bandı ve 5 sütunluk pazarlama footer'ı vardı; ekranlar arası
     geçiş de yoktu (her seferinde Panel'e dönmek gerekiyordu). */
  .pnl-body { background:var(--bg); }
  .pnl { min-height:100vh; }
  
  .pnl-top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
    height:56px; padding:0 16px; background:#fff; border-bottom:1px solid var(--border); }
  .pnl-brand { font-weight:700; font-size:15px; color:var(--ink); white-space:nowrap; }
  .pnl-brand span { font-weight:500; color:var(--muted); }
  .pnl-top-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
  .pnl-site { font-size:13px; color:var(--red-700); font-weight:600; white-space:nowrap; }
  .pnl-user { font-size:13px; color:var(--muted); max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pnl-burger { display:none; width:40px; height:40px; margin-left:-8px; align-items:center; justify-content:center;
    border:0; background:none; color:var(--ink); cursor:pointer; }
  .pnl-burger svg { width:22px; height:22px; }
  
  .pnl-side { position:fixed; top:56px; left:0; bottom:0; width:232px; padding:16px 12px;
    display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--border); overflow-y:auto; }
  .pnl-nav { display:block; padding:9px 12px; margin-bottom:2px; border-radius:8px;
    font-size:14px; color:var(--ink); line-height:1.35; }
  .pnl-nav:hover { background:var(--bg); }
  .pnl-nav.is-active { background:var(--red-50,#fef2f2); color:var(--red-700); font-weight:600; }
  .pnl-side-foot { margin:auto 0 0; padding-top:16px; font-size:11.5px; line-height:1.5; color:var(--muted); }
  
  .pnl-main { margin-left:232px; padding:28px 24px 64px; }
  .pnl-backdrop { display:none; }
  
  @media (max-width:900px) {
    .pnl-burger { display:flex; }
    /* Menü mobilde çekmece: sabit bırakmak dar ekranda içeriği yarıya indirirdi */
    .pnl-side { transform:translateX(-100%); transition:transform .22s ease; z-index:40; box-shadow:0 8px 32px rgba(15,23,42,.14); }
    .pnl-side.is-open { transform:translateX(0); }
    .pnl-main { margin-left:0; padding:20px 16px 56px; }
    .pnl-backdrop { display:block; position:fixed; inset:56px 0 0; z-index:35;
      background:rgba(15,23,42,.4); opacity:0; pointer-events:none; transition:opacity .22s ease; }
    .pnl-backdrop.is-open { opacity:1; pointer-events:auto; }
    .pnl-user { display:none; }
  }
  /* Yönetim ekranları .container kullanıyordu (pazarlama genişliği + orta hizalama);
     kabuk artık kendi payını verdiği için sıfırlanıyor. */
  .pnl-main .container { max-width:none; padding:0; }
  
  /* ── İş panoraması (yönetim > aktivite) ─────────────────────────────────────
     Huni + ciro, seçilen aralık için. Kartlarda önceki dönem karşılaştırması:
     yön göstermeyen pano bakılıp geçilir. */
  .pano { margin-bottom:28px; }
  .pano-kartlar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
  .pano-kart { padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:10px; }
  .pano-k-ad { display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px; }
  .pano-k-deger { display:block; font-size:21px; font-weight:700; color:var(--ink); line-height:1.15; }
  .pano-k-fark { display:block; margin-top:3px; font-size:11.5px; font-weight:700; }
  .pano-k-fark em { display:block; font-style:normal; font-weight:400; color:var(--muted); font-size:10.5px; }
  .pano-k-fark.is-up { color:#15803d; }
  .pano-k-fark.is-down { color:var(--red-700); }
  .pano-k-fark.is-flat { color:var(--muted); }
  
  .pano-huni { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; margin-bottom:14px;
    background:#fff; border:1px solid var(--border); border-radius:10px; font-size:13px; color:var(--muted); }
  .pano-huni strong { color:var(--ink); font-size:15px; margin-left:5px; }
  .pano-ok { color:var(--red-700); font-weight:700; }
  
  .pano-seri, .pano-kurslar { margin-bottom:14px; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .pano-seri h3, .pano-kurslar h3 { margin:0; padding:12px 14px; font-size:13.5px; border-bottom:1px solid var(--border); }
  .pano-seri table, .pano-kurslar table { width:100%; border-collapse:collapse; font-size:13px; }
  .pano-seri th, .pano-kurslar th { padding:8px 14px; text-align:right; font-size:11.5px; font-weight:600;
    color:var(--muted); background:var(--bg); white-space:nowrap; }
  .pano-seri th:first-child, .pano-kurslar th:first-child { text-align:left; }
  .pano-seri td, .pano-kurslar td { padding:8px 14px; text-align:right; border-top:1px solid var(--border); white-space:nowrap; }
  .pano-seri td:first-child, .pano-kurslar td:first-child { text-align:left; }
  .pano-kurslar td:first-child { max-width:340px; overflow:hidden; text-overflow:ellipsis; }
  .pano-ciro { font-weight:600; }
  /* Dönüşüm oranı sayının yanında soluk: asıl bilgi adet, oran yardımcı. */
  .pano-oran { margin-left:6px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  /* Hareketsiz günü soluk göster ama GİZLEME: delik seri, "bakılmadı" ile
     "satış olmadı"yı ayırt edilemez kılar. */
  .pano-seri tr.is-bos td { color:var(--muted); }
  @media (max-width:700px) {
    .pano-seri, .pano-kurslar { overflow-x:auto; }
  }
  
  /* Affiliate bölümü — kendi ciromuzdan AYRI. Impact tıklaması siteden ÇIKAN
     trafik, kazancı komisyon; aynı kartlarda toplamak iki bağımsız geliri tek
     sayıya karıştırıp hangisinin çalıştığını görünmez kılardı. */
  .pano-affil { margin-bottom:14px; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:10px; }
  .pano-affil > h3 { margin:0 0 10px; font-size:13.5px; }
  .pano-affil > h3 span { font-weight:400; color:var(--muted); font-size:12px; margin-left:6px; }
  .pano-affil .pano-kartlar { margin-bottom:0; }
  .pano-affil .pano-kart { background:var(--bg); }
  
  /* ── Teklif katmanları (program paneli + hoş geldin toast'ı) ────────────────
     İkisi de AÇILIŞTA çıkmaz; ilgi sinyalinden sonra (bkz partials/teklif).
     Google'ın araya giren geçiş reklamı yaptırımı sayfa yüklenir yüklenmez
     içeriği kapatan katmanları hedefliyor, etkileşim sonrası açılanları değil. */
  .tk-dim { position:fixed; inset:0; z-index:9998; background:rgba(15,23,42,.55); }
  
  /* Program paneli — mobilde alttan (YouTube Premium deseni), masaüstünde ortada */
  .tk-sheet { position:fixed; z-index:9999; left:0; right:0; bottom:0; padding:22px 20px 24px;
    background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(15,23,42,.22);
    max-height:86vh; overflow-y:auto; }
  @media (min-width:720px) {
    .tk-sheet { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
      width:min(460px,92vw); border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.28); }
  }
  .tk-in { transition:transform .26s ease, opacity .26s ease; }
  .tk-out { transition:transform .2s ease, opacity .2s ease; }
  
  .tk-x { position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; background:none;
    color:var(--muted); font-size:15px; cursor:pointer; line-height:1; }
  .tk-x:hover { color:var(--ink); }
  .tk-etiket { display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--red-700); margin-bottom:6px; }
  .tk-baslik { display:block; font-size:16px; font-weight:700; line-height:1.35; color:var(--ink); }
  .tk-metin { margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--muted); }
  .tk-off { font-weight:700; color:var(--red-700); }
  .tk-rozet { display:inline-block; margin-top:10px; padding:3px 10px; border-radius:999px;
    background:var(--red-50,#fef2f2); color:var(--red-700); font-size:12px; font-weight:700; }
  .tk-cta { display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    min-height:44px; margin-top:14px; }
  .tk-vazgec { display:block; width:100%; margin-top:8px; padding:10px; border:0; background:none;
    color:var(--muted); font-size:13.5px; cursor:pointer; }
  .tk-vazgec:hover { color:var(--ink); text-decoration:underline; }
  /* Telefon seçeneğini görünür kılan ipucu — kutu ikiye bölünmedi, seçenek ve
     faydası tek satırda söyleniyor (WhatsApp kodu hızlı gelir, spam'e düşmez). */
  .auth-hint { margin:6px 0 12px; font-size:12.5px; line-height:1.5; color:var(--muted); }
  
  /* Program paneli — okunabilirlik revizyonu (kullanıcı geri bildirimi 2026-08-05):
     metin küçük kalıyordu ve mobil alt çubuk panelin altından görünüp ikinci bir
     eylem izlenimi veriyordu. */
  .tk-panel-acik .cd-mobilebar { display:none !important; }
  .tk-gorsel { display:block; width:100%; max-height:150px; object-fit:cover;
    border-radius:10px; margin:0 0 14px; background:var(--bg); }
  .tk-sheet .tk-baslik { font-size:19px; line-height:1.3; letter-spacing:-.01em; }
  .tk-sheet .tk-metin { font-size:15px; line-height:1.6; color:var(--ink); }
  .tk-sheet .tk-etiket { font-size:11.5px; }
  .tk-sheet .tk-rozet { font-size:13px; padding:5px 12px; margin-top:12px; }
  .tk-sheet .tk-cta { min-height:50px; font-size:16px; margin-top:18px; }
  .tk-sheet .tk-vazgec { font-size:14.5px; padding:12px; }
  @media (min-width:720px) {
    .tk-sheet { width:min(500px,92vw); padding:26px; }
    .tk-gorsel { max-height:170px; }
    .tk-sheet .tk-baslik { font-size:21px; }
  }
  
  
  
  /* ── Hoş geldin kampanya kartı (Booking deseni) ─────────────────────────────
     İki tur denendi ve ikisi de tutmadı: (1) beyaz, nötr, hareketsiz köşe kartı
     → çerez bandı gibi algılandı, körlük; (2) site geneli üst şerit → klişe
     reklam çubuğu.
  
     Booking'in gerçekte yaptığı: MARKA PROGRAMI gibi görünen, renkli, içeri
     KAYARAK giren, etkileşimden sonra beliren bir kart. Körlüğü yaratan konum
     değildi — nötr renk, hareketsizlik ve açılışta gelmekti. Üçü de tersine
     çevrildi; konum köşede kaldı. */
  .kmpk { position:fixed; z-index:9997; left:20px; bottom:calc(20px + var(--cconsent-h, 0px)); width:min(360px,calc(100vw - 40px));
    padding:18px 40px 18px 18px; border-radius:14px; color:#fff;
    background:linear-gradient(135deg,var(--red-700,#b91c1c),var(--red-600,#dc2626));
    box-shadow:0 18px 48px rgba(185,28,28,.34); }
  .kmpk-rozet { display:inline-flex; align-items:center; gap:6px; margin-bottom:9px;
    padding:5px 12px 5px 9px; border-radius:999px; background:rgba(255,255,255,.2);
    font-size:11.5px; font-weight:800; letter-spacing:.04em; }
  /* Hediye/kurdele ikonu — kontenjan ve indirim UYARI değil ÖDÜL çağrışımı
     yapmalı; ünlem ya da saat ikonu tam tersini yapardı. */
  .kmpk-rozet svg { width:15px; height:15px; flex:none; }
  .kmpk-baslik { display:block; font-size:18px; font-weight:800; line-height:1.3; }
  .kmpk-metin { margin:7px 0 0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.92); }
  /* Kontenjan BUTONUN ALTINDA, kendi şeridinde. Metnin içindeyken silik
     kalıyordu ve havuç işlevini kaybediyordu — kararı verdiren bilgi bu,
     son sözü o söylüyor. */
  /* "Hesap başına bir kez" notu: küçük ve soluk. Manşet değil, kapıyı kapatan
     dipnot — büyük yazılsaydı şart koşuyormuş gibi okunurdu. */
  .kmpk-not { margin:9px 0 0; font-size:12px; line-height:1.45; color:rgba(255,255,255,.72); }
  
  .kmpk-kota { display:flex; align-items:center; justify-content:center; gap:7px;
    margin:10px -18px -18px 0; margin-left:-18px; padding:10px 14px;
    border-top:1px solid rgba(255,255,255,.22); border-radius:0 0 14px 14px;
    background:rgba(0,0,0,.14); font-size:13.5px; font-weight:800; color:#fff; }
  .kmpk-kota svg { width:15px; height:15px; flex:none; opacity:.9; }
  .kmpk-cta { display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    min-height:44px; margin-top:14px; border-radius:10px; background:#fff;
    color:var(--red-700,#b91c1c); font-size:14.5px; font-weight:700; }
  .kmpk-cta:hover { background:#fff; color:var(--red-800,#991b1b); }
  .kmpk-x { position:absolute; top:10px; right:10px; width:30px; height:30px; border:0;
    background:none; color:rgba(255,255,255,.7); font-size:14px; line-height:1; cursor:pointer; }
  .kmpk-x:hover { color:#fff; }
  
  /* HAREKET: soldan kayarak girer. Nötr bir kartın "belirmesi" fark edilmiyor;
     hareket, körlüğü kıran asıl unsur. */
  /* GİRİŞ ANİMASYONU SAF CSS, Alpine'ın x-transition'ı DEĞİL (2026-08-11).
   *
   * Alpine geçişi requestAnimationFrame'e dayanıyor. Chrome odaklanmamış
   * pencerede rAF'ı durduruyor (kullanıcı tarayıcıdan terminale geçtiğinde
   * document.hidden FALSE kalır ama rAF yine durur). Sonuç: Alpine kartı "açık"
   * işaretliyor, sınıfları yapıştırıyor, ama display:none'da donduruyordu — ve
   * tetik kendini harcadığı için kart BİR DAHA hiç çıkmıyordu. Kullanıcı üç ayrı
   * denemede çıkış kartını hiç göremedi, sebebi buydu.
   *
   * KRİTİK AYRINTI — 'to' bloğu ve fill-mode BİLEREK YOK: elemanın KENDİ stili
   * zaten görünür hâl. Animasyon hiç çalışmazsa ya da yarıda kalırsa taban stil
   * geçerli olur, yani kart GÖRÜNÜR kalır. Ters kurgu (fill: both + opacity 0
   * başlangıç) aynı tuzağı CSS'te yeniden kurardı.
   */
  @keyframes kmpkGir { from { transform:translateX(-120%); opacity:0; } }
  /* Emniyet ağı: 1,5 sn sonra animasyon iptal, taban (görünür) stil geçerli.
     Bkz partials/teklif — CSS animasyonları da odaksız pencerede duruyor. */
  .tk-animasyonsuz .kmpk, .tk-animasyonsuz .inc-toast { animation:none !important; }
  .kmpk { animation:kmpkGir .38s cubic-bezier(.2,.8,.2,1); }
  
  .kmpk-in { transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
  .kmpk-out { transition:transform .25s ease, opacity .2s ease; }
  .kmpk-in-basla { transform:translateX(-120%); opacity:0; }
  
  @media (max-width:520px) {
    /* Mobilde tam genişlik ve alt sabit çubuğun ÜSTÜNDE — çubuğu örtmek
       "Kaydol"u erişilemez kılardı. */
    .kmpk { left:12px; right:12px; width:auto; bottom:calc(var(--cd-bar-h, 72px) + 12px + var(--cconsent-h, 0px)); }
  }
  
  
  /* ── Kupon rozeti: fiyatın İÇİNDE (kurs sayfası + ödeme sayfası ortak) ──────
     Ayrı kutu olduğunda ekranda iki fiyat bloğu oluşuyor ve "hangisini
     ödüyorum" sorusu doğuyordu. Kupon bir duyuru değil, ödenecek tutarın
     kendisi. Ödeme sayfasında rozet satırın dördüncü çocuğuydu ve başlığın
     üstüne biniyordu — artık fiyat hücresinin içinde. */
  .cd-kbadge { display:inline-flex; align-items:center; gap:4px; margin-left:8px;
    padding:3px 9px; border-radius:999px; background:var(--red-50,#fef2f2);
    color:var(--red-700); font-size:12px; font-weight:800; vertical-align:middle; white-space:nowrap; }
  .cd-kbadge svg { width:13px; height:13px; }
  .ci-price { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
  .ci-price-now { font-size:17px; font-weight:700; color:var(--ink); }
  
  /* Kontenjan satırı — fiyatın altında, tam genişlik, tek satır. */
  .cd-kota, .ci-kota { display:flex; align-items:center; gap:6px; margin:8px 0 0;
    font-size:12.5px; font-weight:700; color:var(--red-700); }
  .cd-kota svg, .ci-kota svg { width:14px; height:14px; flex:none; opacity:.85; }
  /* Tam satır: ürün satırının altında, kendi çizgisiyle. */
  .ci-kota { flex:0 0 100%; margin:2px 0 0; padding-top:12px; border-top:1px solid var(--border); }
  /* Ürün adı ve sağlayıcı dar ekranda da okunabilir kalsın — fiyat sütunu
     rozetle birlikte genişleyince başlık eziliyordu. */
  .ci-body { flex:1 1 auto; min-width:45%; }
  .ci-body span { display:block; line-height:1.35; }
  .ci-price { flex:0 0 auto; }
  
  /* ── Mahsup tablosu (fatura düzeni) ────────────────────────────────────────
     İndirim rozeti yerine geçti (2026-08-13). Görsel dil bilerek "fatura":
     sola etiket, sağa tutar, toplam çizgiyle ayrılmış. ₺22.899'luk üründe
     sessiz bir hesap dökümü, kırmızı bir "−%50" rozetinden daha inandırıcı.
     Gerekçenin tamamı checkout/show.blade.php içinde. */
  .ci-hesap { margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:7px; font-size:14px; }
  /* baseline DEĞİL flex-start: indirim satırının başlığı artık iki satır
     (ad + tek seferlik notu), baseline hizası tutarı notun hizasına çekiyordu. */
  .ci-hesap > div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .ci-hesap dt { color:var(--muted); margin:0; }
  .ci-hesap dd { margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
  /* İndirim satırı yeşil DEĞİL: yeşil "kazandın" diye bağırır ve promosyon
     tonuna döner. Nötr koyu, tutarın kendisi konuşsun. */
  .ci-hesap-indirim dd { color:var(--ink); }
  /* TEK SEFERLİK NOTU — açıkladığı satırın altında (2026-08-13).
     Önce toplamın altında ayrı bir paragraftı (.ci-tekseferlik) ve ürün sahibi
     haklı olarak "silik ve bağlamdan kopuk, okunmaz" dedi. İki şey düzeltildi:
     YER (artık indirim satırının alt satırı, ne anlattığı belli) ve KONTRAST
     (--muted #64748B yerine --body: dipnot değil, okunması istenen bir kural). */
  .ci-hesap-indirim dt small { display:block; margin-top:3px; font-size:12px;
    line-height:1.4; color:var(--body); }
  .ci-hesap-toplam { margin-top:3px; padding-top:9px; border-top:1px solid var(--border); }
  .ci-hesap-toplam dt { color:var(--ink); font-weight:600; }
  .ci-hesap-toplam dd { font-size:19px; font-weight:700; color:var(--ink); }
  
  /* ── Ödeme ekranı ince ayar ─────────────────────────────────────────────────
     Seçili taksit satırı kırmızıydı ve yeşil "Öde" düğmesinin yanında UYARI gibi
     okunuyordu. Yeşile çevirmek de doğru değil: yeşil tek bir şeye ayrılmalı, o
     da ödeme eylemi. Seçim nötr (koyu kenar + hafif zemin) — hangi seçenek
     işaretli belli, ama renk yükü yok. */
  .ci-opt.is-active { border-color:var(--ink); background:#F1F5F9; }
  .ci-opt.is-active strong { color:var(--ink); }
  
  /* Fiyat sütunu kart kenarına dayanmasın; rozet fiyattan geniş olduğu için
     sağa taşmış görünüyordu. */
  .ci-price { align-items:flex-end; text-align:right; max-width:52%; }
  
  /* Fiyat sütununda artık TEK değer var: ödenecek tutar. Üstü çizili liste
     fiyatı ve indirim rozeti 2026-08-13'te kaldırıldı; mahsup artık .ci-hesap
     fatura tablosunda (gerekçe checkout/show.blade.php içinde). Satır düzeni
     yine de flex kalıyor — tutar sağa yaslı ve gözün durduğu yerde. */
  .ci-price { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:8px; }
  .ci-price-now { font-size:19px; }
  
  /* ── Ödeme özet satırı: sütunlar sabit, başlık kendi içinde sarar ───────────
     İki tur denendi ve ikisi de kırıldı:
       (1) başlıkta ellipsis + min-width:0  → "Sey..." diye kırpılıyordu
       (2) min-width:45%                    → uzun başlıkta fiyat alt satıra
                                              düşüyor, düzen dağılıyordu
     Doğrusu: gövde flex:1 1 0 + min-width:0 ile SIKIŞABİLİR olmalı, başlık ise
     kırpılmak yerine KENDİ SÜTUNUNDA 2 satıra sarmalı. Böylece fiyat sütunu
     satırda kalır, uzun başlık da okunur. */
  .checkout-item { align-items:flex-start; }
  .ci-body { flex:1 1 0; min-width:0; }
  .ci-body strong { white-space:normal; overflow:visible; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ci-price { flex:0 0 auto; max-width:none; margin-left:auto; }
  
  /* ÇIKIŞTA HATIRLATMA ŞERİDİ (partials/hatirlat).
     Sol alt — "N kişi inceledi" toast'ı sağ altta, çakışmıyorlar.
     Koyu zemin: bu bir teklif değil, bir hizmet önerisi. Kırmızı olsaydı
     ödeme formunun yanında ikinci bir aciliyet kurardı. */
  .htrl { position:fixed; left:20px; bottom:calc(20px + var(--cconsent-h, 0px));
    z-index:9997; width:min(330px, calc(100vw - 40px));
    background:var(--ink,#0F172A); color:#fff; border-radius:12px;
    padding:14px 16px; box-shadow:0 16px 40px rgba(15,23,42,.30);
    animation:kmpkGir .38s cubic-bezier(.2,.8,.2,1); }
  .htrl strong { display:block; font-size:14.5px; font-weight:700; line-height:1.35; }
  .htrl p { margin:5px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.78); }
  .htrl-dugmeler { display:flex; gap:8px; margin-top:12px; }
  .htrl-evet { flex:1; min-height:38px; border:0; border-radius:9px; background:#fff;
    color:var(--ink,#0F172A); font-size:13.5px; font-weight:700; cursor:pointer; }
  .htrl-hayir { min-height:38px; padding:0 12px; border:0; border-radius:9px;
    background:transparent; color:rgba(255,255,255,.6); font-size:13px; cursor:pointer; }
  .htrl-hayir:hover { color:#fff; }
  .htrl-tesekkur { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
  .htrl-tesekkur svg { width:17px; height:17px; flex:none; color:#22c55e; }
  @media (max-width:520px) {
    .htrl { left:12px; right:12px; width:auto; bottom:calc(var(--cd-bar-h, 72px) + 12px + var(--cconsent-h, 0px)); }
  }
  
  /* Kart numarası: BOŞKEN vurgulu çerçeve — ama KIRMIZI DEĞİL (2026-08-11).
  
     Vurgunun kendisi doğru ve kalıyor: "sıradaki adım burası" işaretinin odağa
     bağlı olması güvenilmezdi (iOS autofocus'u çoğu zaman uygulamıyor,
     kaydırınca odak düşüyor), o yüzden :placeholder-shown ile alan doluncaya
     kadar duruyor. Doğru karar.
  
     YANLIŞ OLAN RENKTİ. Kırmızı, boş bir zorunlu alanın etrafında "hata yaptın"
     diye okunuyor ve bunu ödeme ekranında, kullanıcı daha hiçbir şey yazmadan
     yapıyor. Ürün sahibi bunu üç ayrı turda "şu kırmızı çerçeve" diye işaret
     etti; ben ise üç turdur yanlış yerde (:focus kurallarında) aradım — kırmızıyı
     basan bu satırdı.
  
     Nötr koyu ton aynı "buraya bak" işini görüyor, uyarı çağrışımı yapmıyor.
     Kırmızı yalnız gerçek hataya ayrıldı (showError). */
  .checkout-form input[autocomplete="cc-number"]:placeholder-shown {
    border-color:var(--border-strong,#CBD5E1); box-shadow:0 0 0 3px rgba(15,23,42,.06); }
  /* Kontenjan satırı rozetin hizasında: fiyat bloğuna ait olduğu görünsün,
     Kaydol'un hemen üstünde "bu eğitimde 3 yer kaldı" diye okunmasın. */
  /* 6px → 3px: satır artık indirim rozetinin DİPNOTU, ayrı bir duyuru değil.
     Aradaki boşluk büyüdükçe ikisi ilgisiz iki bilgi gibi okunuyordu.
     TEK SATIRA indi (2026-08-13, süre mesajı kaldırıldı): align-items artık
     temel .cd-kota,.ci-kota kuralındaki `center`'a döndü — `flex-start`
     yalnız ikinci satır varken gerekliydi. .cd-kota-metin / .cd-kota-alt bu
     yüzden kaldırıldı, ikinci satır kalmadı. */
  .cd-kota { margin:3px 0 10px; font-size:12px; }
  
  /* Üye olmayana "kapının arkasında fiyat var" satırı.
  
     BELİRGİNLEŞTİRİLDİ (2026-08-13): önce gri, punto 12, düz metindi ve fiyatın
     altında dipnot gibi kayboluyordu — oysa kayıt olmak için tek görünür sebep o.
     Artık kendi zeminli kutusu var ve yeşile çalıyor.
  
     KIRMIZI DEĞİL, bilerek: kırmızı bu sayfada hem CTA rengi hem aciliyet rengi.
     Üye olmayanın henüz kaybedeceği bir şey yok, dolayısıyla aciliyet karşılıksız
     kalırdı. Yeşil "kazanç/fırsat" diyor, baskı kurmadan.
  
     TEK SEFERLİK, ÇOK KISA ANİMASYON: 2,2 sn sonra bir kez hafifçe belirip
     yerine oturuyor. Sonsuz dönen/yanıp sönen bir şey değil — sayfa yüklenirken
     gözden kaçan satırı bir kez işaret ediyor, sonra susuyor. Gecikme bilerek:
     açılışta oynarsa göz zaten sayfayı tarıyor olur ve fark edilmez. */
  /* align-items:flex-start (center değil): metin 2026-08-13'te iki satıra çıktı
     ("bu fiyatın üzerine" ifadesi eklendi) ve ortalanmış ikon ikinci satırın
     hizasına kayıyordu. İkon ilk satırla hizalı durmalı. */
  .cd-uyefiyat { display:flex; align-items:flex-start; gap:7px; margin:8px 0 10px;
    padding:8px 11px; border-radius:9px;
    /* Yeşil tonları .kmpk-elde kartıyla aynı aileden (#047857/#059669) — kuponu
       elinde olana gösterilen kartla aynı dili konuşsun. Değişken YOK, projede
       yeşil paleti tanımlı değil; uydurma değişken referansı vermektense sabit. */
    background:#ecfdf5; border:1px solid #a7f3d0;
    font-size:12.5px; font-weight:600; color:#065f46; line-height:1.4; }
  .cd-uyefiyat svg { width:15px; height:15px; flex:none; opacity:.9; margin-top:1px; }
  
  /* Bir kez, yumuşak: hafif büyüyüp yerine oturur. transform+opacity dışında bir
     şey değişmiyor — düzen kaymıyor, sayfa zıplamıyor. */
  @keyframes uyeFiyatCit {
    0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(5,150,105,0); }
    35%  { transform:scale(1.025); box-shadow:0 0 0 5px rgba(5,150,105,.13); }
    100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(5,150,105,0); }
  }
  .cd-uyefiyat { animation:uyeFiyatCit 1.1s ease-out 2.2s 1 both; }
  
  /* Hareketi azalt tercihi: animasyon hiç oynamaz, kutu yine görünür kalır. */
  @media (prefers-reduced-motion: reduce) {
    .cd-uyefiyat { animation:none; }
  }
  
  /* ── Ödeme sonrası fatura + sertifika formu ─────────────────────────────────
     Ödemeden ÖNCE sorulmuyor: kart girmeden önceki her alan doğrudan dönüşüm
     kaybı ve bu bilgiler satıştan önce zaten hiçbir işe yaramıyor. */
  .cr-fatura { max-width:520px; margin:28px auto 0; padding:20px; text-align:left;
    background:#fff; border:1px solid var(--border); border-radius:14px; }
  .cr-fatura h2 { margin:0 0 4px; font-size:17px; }
  .cr-fatura-not { margin:0 0 18px; font-size:13px; color:var(--muted); }
  .cr-grup { margin-bottom:18px; }
  .cr-grup-ad { display:block; margin-bottom:10px; font-size:11.5px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .cr-fatura label { display:flex; flex-direction:column; gap:5px; margin-bottom:10px;
    font-size:13px; font-weight:600; color:var(--ink); }
  .cr-fatura input, .cr-fatura textarea { padding:12px; border:1px solid var(--border);
    border-radius:10px; font-size:16px; font-family:inherit; color:var(--ink); background:#fff; }
  .cr-fatura input:focus, .cr-fatura textarea:focus { outline:none; border-color:var(--red-600);
    box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .cr-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  
  /* SEGMENT — checkbox değil: kurumsal bir "ek özellik" değil, TÜR seçimi;
     alan seti tamamen değişiyor. Checkbox'ta işaretsiz hâl örtük olarak
     "bireysel" demek olurdu ve fatura hukuki bir veri. */
  .cr-segment { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px;
    margin-bottom:12px; background:var(--bg); border-radius:12px; }
  .cr-segment button { min-height:42px; border:0; border-radius:9px; background:none;
    font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
  .cr-segment button.is-active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }
  
  .cr-fatura-err { margin:0 0 10px; font-size:13px; color:var(--red-700); font-weight:600; }
  .cr-fatura-gonder { width:100%; }
  .cr-fatura label small { font-weight:400; color:var(--muted); }
  .cr-fatura-ipucu { margin:-4px 0 10px; font-size:12px; color:var(--muted); }
  .cr-fatura-kvkk { margin:12px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
  .cr-fatura-kvkk a { color:var(--muted); text-decoration:underline; }
  .cr-fatura-ok { margin:24px auto 0; max-width:520px; font-size:14px; font-weight:600;
    color:#15803D; }
  @media (max-width:520px) { .cr-row2 { grid-template-columns:1fr; } }
  
  /* Aynı fatura formu modal içinde de kullanılıyor (/egitimlerim şeridi).
     Modal kutusunun zaten çerçevesi ve dolgusu var; kartın kendi çerçevesi
     üstüne binince çift kenarlık çıkıyordu. */
  .authm-box .cr-fatura { margin:0; border:0; padding:0; background:none; max-width:none; }
  
  /* /egitimlerim fatura şeridi — UYARI DEĞİL HATIRLATMA: kırmızı yok, ikon yok.
     Erişimi engellemediği için alarm tonuna gerek yok; alarm tonu burada
     "eğitimim kilitlendi mi?" paniği yaratırdı. */
  .mc-fatura { margin:0 0 20px; }
  .mc-fatura-serit { display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--border);
    border-radius:12px; background:#F8FAFC; }
  .mc-fatura-serit strong { display:block; font-size:14px; color:var(--ink); }
  .mc-fatura-serit span { font-size:13px; color:var(--muted); }
  .mc-fatura-serit .btn { min-height:40px; padding:0 18px; white-space:nowrap; }
  .mc-fatura-ok { margin:0; padding:14px 18px; border-radius:12px; background:#F0FDF4;
    font-size:14px; font-weight:600; color:#15803D; }
  @media (max-width:560px) {
    .mc-fatura-serit { flex-direction:column; align-items:stretch; }
    .mc-fatura-serit .btn { width:100%; }
  }
  
  /* Kupon geri sayımı (.cd-sayac/.ci-sayac) 2026-08-11'de KALDIRILDI — kullanıcı
     kararı: kontenjanla yan yana iki kıtlık göstergesi bağırıyordu. Kıtlığı artık
     tek başına kontenjan anlatıyor (bkz .kota-fisilti). Süre dolunca sayfayı
     yenileyen mantık duruyor (kontenjan-js sureDoldu), yalnız görseli gitti. */
  
  /* ── Affiliate çıkış katmanı (benzer eğitim bildirimi) ─────────────────────
     ORTADA + KARARTMALI, köşede sessiz kart DEĞİL (2026-08-12). Önce sol alt
     köşeye konmuştu ve gözden kaçıyordu; ürün sahibinin gözlemi "çok sessiz
     duruyor" idi.
  
     GÜÇLÜ OLMASI ARTIK TUTARLI: affiliate sayfada kendiliğinden açılan tek
     katman bu (inceleyen toast'ı ve kupon şeridi bu sayfalardan çekildi). Sayfa
     başına tek kesinti varsa, o kesintinin görülmesi gürültü değil. Beş zayıf
     uyarı yerine bir net an. */
  .afk { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
  .afk-fon { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
             animation:afkFon .22s ease both; }
  @keyframes afkFon { from { opacity:0; } }
  .afk-kutu { position:relative; width:420px; max-width:100%; background:var(--surface);
              border-radius:18px; box-shadow:0 28px 68px rgba(15,23,42,.28); padding:30px 32px 24px;
              animation:afkGir .32s cubic-bezier(.16,1,.3,1) both; }
  @keyframes afkGir { from { opacity:0; transform:translateY(18px) scale(.97); } }
  .afk-x { position:absolute; top:12px; right:14px; width:30px; height:30px; border:none; background:none;
           color:var(--muted); font-size:16px; cursor:pointer; line-height:1; border-radius:8px; }
  .afk-x:hover { background:var(--bg); color:var(--ink); }
  /* Başlık köşe kartındakinden büyük: ortada duran bir panelde 15px başlık
     "bildirim" gibi okunuyor, karar isteyen bir soru gibi değil. */
  .afk-baslik { display:block; font-size:19px; font-weight:700; color:var(--ink); margin:0 24px 8px 0; line-height:1.28; letter-spacing:-.01em; }
  .afk-metin { font-size:14.5px; color:var(--body); margin:0 0 16px; line-height:1.55; }
  .afk-input { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:11px;
               font-size:15px; font-family:inherit; }
  .afk-input:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .afk-kvkk { display:flex; gap:10px; align-items:flex-start; margin:12px 0 4px; font-size:12.5px;
              color:var(--muted); line-height:1.45; cursor:pointer; }
  .afk-kvkk input { margin-top:2px; flex:none; }
  .afk-hata { font-size:13px; color:var(--red-700); margin:8px 0 0; }
  .afk-gonder { width:100%; margin-top:14px; padding:13px; font-size:15px; }
  .afk-gecti { width:100%; margin-top:8px; padding:9px; border:none; background:none; cursor:pointer;
               font-family:inherit; font-size:13.5px; color:var(--muted); }
  .afk-gecti:hover { color:var(--ink); text-decoration:underline; }
  .afk-tamam { margin:6px 24px 0 0; font-size:16px; font-weight:600; color:#15803D; }
  
  /* MOBİLDE ALTTAN AÇILAN PANEL: ortada duran kutu, küçük ekranda klavye
     açılınca yukarı sıkışıp kırpılıyor. Alt panel klavyeyle birlikte yükselen
     doğal desen (aynısı katalog filtresinde de kullanılıyor). */
  @media (max-width:640px) {
    .afk { align-items:flex-end; padding:0; }
    .afk-kutu { width:100%; border-radius:20px 20px 0 0; padding:26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
                animation:afkAlttan .3s cubic-bezier(.16,1,.3,1) both; }
    @keyframes afkAlttan { from { transform:translateY(100%); } }
    .afk-baslik { font-size:18px; }
  }
  
  /* ── Türkçe program bandı (affiliate kurs sayfası) ─────────────────────────
     AKIŞ İÇİNDE bir kart: kaplama/panel değil. Affiliate sayfada çıkışta zaten
     ikinci bir katman var; içeriği okuyan kişinin önünü iki kez kesmemek için
     bu blok sayfanın kendi ritminde duruyor.
  
     Laciverti bilerek: kırmızı (--red-600) bu sitede İNDİRİM/aciliyet rengi.
     Bu bant indirim değil ALTERNATİF öneriyor; aynı kırmızıyı kullansaydı
     kupon şeridiyle aynı vaadi veriyormuş gibi okunurdu. */
  .trp { display:flex; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--border);
         border-left:3px solid #1E3A8A; border-radius:var(--radius-lg); padding:20px 22px; margin:28px 0; }
  .trp-gorsel { flex:none; width:132px; height:74px; object-fit:cover; border-radius:10px; background:var(--bg); }
  .trp-icerik { flex:1; min-width:0; }
  .trp-etiket { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
                color:#1E3A8A; background:#EFF3FF; border-radius:99px; padding:3px 10px; margin-bottom:8px; }
  .trp-baslik { display:block; font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:6px; }
  .trp-metin { font-size:14px; color:var(--body); margin:0 0 14px; }
  .trp-cta { display:inline-block; padding:10px 20px; font-size:14.5px; }
  
  /* Mobilde alt alta: 132px'lik görsel yan yana dururken metne 150px kalıyordu
     ve ders başına maliyet satırı üç satıra kırılıyordu. */
  @media (max-width:640px) {
    .trp { flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
    .trp-gorsel { width:100%; height:150px; }
    .trp-cta { display:block; text-align:center; }
  }
  
  /* ── Kullanıcı detayı (/yonetim/kullanicilar/{id}) ────────────────────────
     BÖLÜMLER AYRI KART: tek uzun sayfada altı farklı veri kümesi (kimlik,
     eğitim, sipariş, sertifika, izin) var. Aralarına yalnız başlık koymak
     yetmiyordu — destek anında "siparişler nerede" diye taranıyor, kart kenarı
     gözü doğrudan bloğa götürüyor. */
  /* Tablodaki ad linki LİNK GİBİ görünmeli: .adm-table strong siyah ve kalın
     olduğu için link olduğu anlaşılmıyordu, kullanıcı tıklayacak yeri aradı. */
  .adm-ad strong { color:var(--red-700); }
  .adm-ad:hover strong { text-decoration:underline; }
  /* "Bağlan" listede ama SESSİZ bir düğme: dolu kırmızı olsaydı her satırda bir
     çağrı gibi durur, göz asıl bilgiyi (kim, ne zaman) atlayıp düğmelere kayardı.
     Çerçeveli/nötr duruyor, hover'da kırmızıya dönüyor. */
  .adm-ac { text-align:right; white-space:nowrap; }
  .adm-ac form { margin:0; }
  .adm-baglan { font-size:13px; font-weight:600; color:var(--body); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px; cursor:pointer; font-family:inherit; }
  .adm-baglan:hover { border-color:var(--red-600); color:var(--red-700); background:var(--red-50); }
  
  .adm-geri { margin-bottom:14px; font-size:14px; }
  .adm-geri a { color:var(--muted); }
  .adm-geri a:hover { color:var(--ink); }
  .adm-kart { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:18px; }
  .adm-kart > h2 { font-size:16px; font-weight:700; color:var(--ink); margin:0 0 16px; display:flex; align-items:center; gap:9px; }
  .adm-kart > h3 { font-size:13.5px; font-weight:700; color:var(--ink); margin:22px 0 10px; }
  .adm-kart > h3:first-of-type { margin-top:14px; }
  .adm-kart .adm-empty { padding:18px 0; text-align:left; font-size:14px; }
  /* Kart içindeki tablo zaten çerçeveli bir kutunun içinde: ikinci çerçeve
     kutu-içinde-kutu görüntüsü yapıyordu. */
  .adm-kart .adm-tablewrap { border:none; border-radius:0; background:transparent; }
  .adm-kart .adm-table { min-width:640px; }
  
  /* Künye: etiket üstte küçük, değer altta — dar ekranda iki sütunlu dl
     satırları kırpılıyordu. */
  .adm-kunye { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px 24px; margin:0; }
  .adm-kunye dt { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:3px; }
  .adm-kunye dd { margin:0; font-size:14.5px; font-weight:600; color:var(--ink); }
  
  .adm-liste { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .adm-liste li { padding-bottom:11px; border-bottom:1px solid var(--border); }
  .adm-liste li:last-child { padding-bottom:0; border-bottom:none; }
  .adm-liste strong { display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
  
  /* İYS durumu rozetleri — approved dışındaki her durum "gönderilemez" demek,
     ikisi de aynı nötr griyle gösterilirse ekran yanıltır. */
  .adm-rozet { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:99px; padding:3px 10px; background:var(--bg); color:var(--muted); }
  .adm-rozet--approved { background:#DCFCE7; color:#15803D; }
  .adm-rozet--pending  { background:#FEF3C7; color:#B45309; }
  .adm-rozet--rejected { background:#FEE2E2; color:#B91C1C; }
  
  .adm-uyari { color:var(--red-700) !important; }
  .adm-flash-err { background:#FEE2E2; border:1px solid #FECACA; color:#B91C1C; border-radius:10px; padding:11px 15px; font-size:14px; margin-bottom:16px; }
  
  /* ── Kurumsal talepler (/yonetim/talepler) ────────────────────────────────
     Tablo DEĞİL kart: talepte serbest metin (mesaj + görüşme notu) var, tablo
     hücresinde ya kırpılır ya satırı devirir. Ayda birkaç kayıt olacağı için
     dikey yer harcamak sorun değil, okunabilirlik önemli. */
  .adm-leads { display:grid; gap:14px; }
  .adm-lead { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:12px; padding:18px 20px; }
  .adm-lead--yeni { border-left-color:var(--red-600); }        /* dokunulmamış talep göze çarpsın */
  .adm-lead--arandi { border-left-color:#F59E0B; }
  .adm-lead--kapandi { border-left-color:#94A3B8; opacity:.72; }
  .adm-lead-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
  .adm-lead-head h2 { font-size:17px; font-weight:700; color:var(--ink); margin:0 0 3px; }
  .adm-lead-meta { font-size:12.5px; color:var(--muted); margin:0; }
  .adm-lead-durum { flex:none; font-size:12px; font-weight:700; color:var(--muted); background:var(--bg); border-radius:99px; padding:4px 11px; white-space:nowrap; }
  .adm-lead-alan { display:grid; grid-template-columns:auto 1fr; gap:5px 16px; margin:0 0 12px; font-size:14px; }
  .adm-lead-alan dt { color:var(--muted); }
  .adm-lead-alan dd { margin:0; font-weight:600; color:var(--ink); }
  .adm-lead-mesaj { background:var(--bg); border-radius:8px; padding:11px 14px; font-size:14px; color:var(--body); margin:0 0 14px; white-space:pre-line; }
  .adm-lead-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .adm-lead-form select, .adm-lead-form input { padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--surface); }
  .adm-lead-form input { flex:1; min-width:200px; }
  .adm-lead-form select:focus, .adm-lead-form input:focus { outline:none; border-color:var(--red-600); box-shadow:0 0 0 3px rgba(86,73,246,.12); }
  .adm-lead-form .btn { padding:9px 18px; font-size:13.5px; }
  @media (max-width:640px) {
    .adm-lead-head { flex-direction:column; gap:8px; }
    .adm-lead-form input { min-width:0; width:100%; flex:1 1 100%; }
  }
  
  /* Bal küpü — gerçek kullanıcı ASLA görmez. display:none DEĞİL: bazı botlar
     display:none alanları atlayacak kadar akıllı; ekran dışına alınıyor. */
  .lead-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
  
  /* ── Taksit teklifi kartı (çıkış anı, yüksek biletli kurslar) ────────────────
     Kampanya kartıyla (.kmpk) aynı yapı ve hareket, farklı renk: hediye kırmızısı
     yerine güven laciverti. Mesaj "kaçırma" değil "ulaşılabilir" — renk de onu
     söylemeli, yoksa aynı kırmızıda iki farklı vaat birbirine karışır. */
  /* KUPON ELDE KARTI — yeşil. Kırmızı kart bir TEKLİF sunuyor ("üye ol, indirim
     al"), bu kart kişinin ZATEN sahip olduğu bir şeyi hatırlatıyor. Aynı kırmızı
     ile çıkmak "yeni bir kampanya daha" gibi okunur ve elindekinin değerini
     silerdi. */
  .kmpk-elde { background:linear-gradient(135deg,#047857,#059669);
    box-shadow:0 18px 48px rgba(4,120,87,.32); }
  .kmpk-elde .kmpk-cta { color:#047857; }
  .kmpk-elde .kmpk-cta:hover { background:#fff; color:#065f46; }
  
  .kmpk-taksit { background:linear-gradient(135deg,#1e293b,#0f172a); }
  .kmpk-taksit .kmpk-rozet { background:rgba(255,255,255,.14); }
  .kmpk-taksit .kmpk-cta { color:#0f172a; }
  .kmpk-taksit .kmpk-cta:hover { background:#fff; color:#1e293b; }
  
  
  /* ── Kontenjan "fısıltısı" ────────────────────────────────────────────────────
     Geri sayım sayacı kaldırıldı (2026-08-11); kıtlığı tek başına kontenjan
     anlatıyor. Dikkati çeken şey ARTIK SAYININ DEĞİŞMESİ — sürekli tiklayan bir
     sayaç değil.
  
     Animasyon SÜREKLİ DEĞİL, yalnız sayı değişince bir kez oynar (Alpine :key
     değişince eleman yeniden oluşuyor, animasyon o an tetikleniyor). Sürekli
     yanıp sönen bir şey birkaç saniyede görmezden gelinir — bir kez kıpırdayan
     şey fark edilir. Süre 1.1sn ve hareket 2px: "bağırmasın, fısıldasın". */
  @keyframes kotaFisilti {
    0%   { opacity:.55; transform:translateY(2px); }
    40%  { opacity:1;   transform:translateY(0); }
    100% { opacity:1;   transform:translateY(0); }
  }
  .kota-fisilti { display:inline-block; animation:kotaFisilti 1.1s cubic-bezier(.2,.7,.3,1); }
  
  /* Erişilebilirlik: hareket azaltma tercihi açıksa animasyon çalışmaz.
     Bilgi zaten metinde — animasyon yalnız vurgu, taşıyıcı değil. */
  @media (prefers-reduced-motion: reduce) { .kota-fisilti { animation:none; } }
  
  /* ── "Son 7 günde N kişi inceledi" (sağ alt) ─────────────────────────────────
     Booking'in YERLEŞİMİ, ama içi gerçek: sayı funnel_events'ten geliyor, eşiğin
     (10) altında blok hiç basılmıyor. Uydurma "şu an X kişi bakıyor" göstergesi
     bilerek yapılmadı — gerekçesi App\Support\IncelemeSayisi başlığında.
  
     SAĞ ALT: çıkış teklifi kartları (.kmpk) sol altta duruyor, çakışmasınlar. */
  /* KOYU ZEMİN, bilerek. Beyaz kart beyaz sayfanın ve beyaz yan panelin üstünde
     kayboluyordu — kullanıcı "geldiğini fark etmedim" dedi. Koyu zemin onu
     sayfanın bir parçası olmaktan çıkarıp BİLDİRİM yapıyor; kırmızı seçilmedi
     çünkü marka CTA'sı (Kaydol) kırmızı ve onunla yarışırdı. */
  .inc-toast { position:fixed; right:20px; bottom:calc(20px + var(--cconsent-h, 0px)); z-index:9996;
    display:flex; align-items:center; gap:11px;
    max-width:min(340px, calc(100vw - 40px));
    background:var(--ink,#0F172A); border:1px solid rgba(255,255,255,.10);
    border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.30);
    padding:11px 13px 11px 15px; color:#fff; }
  
  .inc-metin { display:flex; flex-direction:column; gap:1px; min-width:0; }
  
  /* Üst satır bağlam: küçük ve soluk. Aynı puntoda olsaydı sayıyla yarışırdı. */
  .inc-ust { font-size:11px; font-weight:500; letter-spacing:.02em;
    color:rgba(255,255,255,.58); }
  
  .inc-asil { font-size:13.5px; font-weight:650; line-height:1.35; color:#fff; }
  
  /* Canlılık noktası — yanıp sönen değil, YAVAŞ nefes alan. Hızlı yanıp sönen
     nokta "uyarı" der; yavaş olan "burası canlı" der. */
  /* Koyu zeminde #16a34a mat kalıyor — bir ton açık yeşil. */
  .inc-nokta { width:8px; height:8px; flex:none; border-radius:50%;
    background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5);
    animation:incNefes 2.6s ease-in-out infinite; }
  @keyframes incNefes {
    0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,.45); }
    50%     { box-shadow:0 0 0 5px rgba(22,163,74,0); }
  }
  
  /* Toast da aynı sebeple saf CSS — bkz kmpkGir başlığı. */
  /* ROTASYON GEÇİŞİ — ödeme sayfasındaki tek satır süre↔kontenjan arasında
     dönerken. Yukarıdan hafifçe süzülüp beliriyor: fark ediliyor ama
     bağırmıyor. 'to' bloğu ve fill-mode YOK — elemanın kendi stili zaten
     görünür hâl, animasyon çalışmazsa metin yine okunur (bkz kmpkGir). */
  @keyframes kotaDonus { from { opacity:0; transform:translateY(-5px); } }
  .kota-donus { animation:kotaDonus .42s cubic-bezier(.2,.8,.2,1); }
  
  /* Ödeme ekranında kontenjan artık her zaman nötr koyu (2026-08-13 —
     süre/kırmızı mesajı kaldırıldı, dönecek ikinci renk kalmadı; .ci-kota-notr
     şimdi statik uygulanıyor, ama .transition ileride benzer bir geçiş
     gerekirse diye duruyor). */
  .ci-kota { transition:color .3s ease; }
  .ci-kota-notr { color:var(--ink,#0F172A); }
  
  @keyframes incGir { from { transform:translateX(130%); opacity:0; } }
  .inc-toast { animation:incGir .44s cubic-bezier(.2,.85,.25,1); }
  
  .inc-in { transition:transform .44s cubic-bezier(.2,.85,.25,1), opacity .3s ease; }
  .inc-out { transition:transform .22s ease, opacity .18s ease; }
  /* Ekranın sağ kenarından İÇERİ KAYAR. 14px'lik itiliş "geldi mi gitti mi"
     belli olmuyordu; kenardan gelen hareket periferik görüşte yakalanıyor. */
  .inc-basla { transform:translateX(130%); opacity:0; }
  
  /* Kapatma düğmesi: toast artık kendiliğinden kapanmıyor, kapatma kullanıcının.
     Metinden ayrık dursun diye margin-left:auto. */
  .inc-x { flex:none; margin-left:auto; width:30px; height:30px; padding:0; border:0;
    display:flex; align-items:center; justify-content:center; border-radius:8px;
    background:none; color:rgba(255,255,255,.5); cursor:pointer; }
  .inc-x svg { width:15px; height:15px; }
  .inc-x:hover { background:rgba(255,255,255,.12); color:#fff; }
  
  @media (prefers-reduced-motion: reduce) {
    .inc-nokta, .inc-toast, .kmpk, .kota-donus { animation:none; }
    /* Kayma yerine yalnız soluklaşma — toast görünmeye devam eder, kaymaz. */
    .inc-in, .inc-out { transition:opacity .2s ease; }
    .inc-basla { transform:none; }
  }
  /* Mobilde alta yapışık "Kaydol" çubuğu var (.cd-mobilebar, 900px altında,
     z-index 70) — toast onun ÜSTÜNE alınıyor, yoksa CTA'yı örter. safe-area
     iOS'ta çentik/ana ekran çubuğu payı. */
  @media (max-width:900px) {
    .inc-toast { left:14px; right:14px; max-width:none;
      bottom:calc(74px + env(safe-area-inset-bottom) + var(--cconsent-h, 0px)); }
    /* Tam genişlikteyken yandan kaymak ekran dışına taşar — alttan yukarı. */
    .inc-basla { transform:translateY(150%); }
    @keyframes incGir { from { transform:translateY(150%); opacity:0; } }
    /* Dokunma hedefi 44px (bkz mobil erişilebilirlik kuralı). */
    .inc-x { width:44px; height:44px; margin-right:-8px; }
  }
  
  /* ---- SSS (accordion) — /universite ve /kurumsal ------------------------- */
  /* <details> kullanılıyor: JS'siz açılıp kapanır, klavye ve ekran okuyucuyla
     kutudan çıktığı gibi çalışır. Alpine yüklenmeden önce de erişilebilir —
     kurs sayfasındaki LCP dersinden sonra bilinçli tercih. */
  /* SOLA HİZALI: başlık (h2) sayfanın geri kalanı gibi solda duruyor; listeyi
     margin:auto ile ortalamak ikisini birbirinden koparıp düzensiz gösteriyordu
     (2026-08-14, kullanıcı ekran görüntüsüyle fark etti). Genişlik sınırı kalıyor
     — uzun satır okunmayı zorlaştırır. */
  .kb-faq { max-width: 820px; margin: 24px 0 0; }
  .kb-faq-item { border-bottom: 1px solid var(--border); }
  .kb-faq-item summary {
    cursor: pointer; padding: 18px 34px 18px 0; position: relative;
    list-style: none; user-select: none;
  }
  .kb-faq-item summary::-webkit-details-marker { display: none; }
  .kb-faq-item summary h3 {
    display: inline; margin: 0; font-size: 16px; font-weight: 600;
    line-height: 1.45; color: var(--ink);
  }
  .kb-faq-item summary::after {
    content: ''; position: absolute; right: 6px; top: 50%;
    width: 9px; height: 9px; margin-top: -6px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .18s;
  }
  .kb-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .kb-faq-item p { margin: 0 0 20px; color: var(--muted); line-height: 1.65; font-size: 15px; }
  
  /* ---- Sertifika doğrulama ekranı (/sertifika-dogrula) ------------------- */
  .kb-note { border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.6; }
  .kb-note p { margin: 0 0 6px; }
  .kb-note p:last-child { margin-bottom: 0; }
  .kb-note--ok   { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
  .kb-note--warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
  .kb-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
  .kb-form input[type="text"] {
    display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
    font-family: inherit; font-size: 16px; /* 16px: iOS'ta odaklanınca sayfayı yakınlaştırmasın */
  }
  .kb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .kb-table th, .kb-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
  .kb-table th { width: 40%; font-weight: 600; color: var(--muted); font-size: 14px; }
  
  /* ── DEMO FORMU ONAY KUTULARI + BILDIRIM SERIDI (2026-08-15) ────────────── */
  /* KVKK aydinlatma teyidi zorunlu, ticari ileti opsiyonel — ikisi gorsel olarak
     esit agirlikta cunku birini soluklastirmak "onemsiz" izlenimi verirdi. */
  /* Onay bloğu form alanlarından ÇİZGİYLE ayrılıyor: alanlar "doldurulacak şey",
     onaylar "karar verilecek şey" — aynı görsel akışta durunca ikisi karışıyordu.
     Turnstile de bu bloğun altına taşındı (bkz kurumsal/universite blade). */
  .lead-onay { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:14px; }
  /* ÖZGÜLLÜK NOTU (2026-08-15): aşağıdaki seçiciler '.kb-demo-form' ile
     niteleniyor çünkü formun genel kuralları onay satırlarını eziyordu:
       .kb-demo-form label → margin-bottom:14px  (benim margin:0'ımdan güçlü)
          sonuç: iki satır arasında 14+14=28px, aradaki boşluk şişiyordu
       .kb-demo-form input → padding:10px 12px + border + width:100%
          sonuç: checkbox'a form-alanı görünümü uygulanıp hizası bozuluyordu
     Bu yüzden hem margin/font hem de kutunun padding/border'ı açıkça sıfırlanıyor. */
  .kb-demo-form .lead-onay-satir { display:flex; align-items:flex-start; gap:10px;
    margin:0; font-size:13px; line-height:1.55; color:var(--body); font-weight:400; cursor:pointer; }
  /* 2px: 13px×1.55 satır kutusu ~20px, kutu 16px → ilk satırla optik hizalanır. */
  .kb-demo-form .lead-onay-satir input[type=checkbox] {
    width:16px; height:16px; min-width:16px; margin:2px 0 0; padding:0; border:0;
    border-radius:3px; flex:none; accent-color:var(--red-600); cursor:pointer;
  }
  .lead-onay-satir a { color:var(--red-600); text-decoration:underline; }
  
  /* Turnstile kutusu: onaylarla gönder butonunun arasında kendi nefesi olsun.
     Cloudflare iframe'i sabit ~300×65px; dar formda taşmasın diye ölçekleniyor. */
  .kb-demo-form .cf-turnstile { margin:16px 0 4px; }
  .kb-demo-form .cf-turnstile iframe { max-width:100%; }
  
  /* Bildirim seridi — sabit, ustte, 6 sn'de soluyor.
     pointer-events:none SART: solduktan sonra gorunmez bir katman olarak kalirsa
     altindaki baglantilari tiklanamaz yapardi. */
  .toast {
    position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:10000;
    display:flex; align-items:center; gap:9px; max-width:min(92vw, 460px);
    padding:13px 20px; border-radius:var(--radius-pill);
    background:#065F46; color:#fff; font-size:14.5px; font-weight:500; line-height:1.4;
    box-shadow:0 8px 28px rgba(6,95,70,.28);
    animation:toastGirCik 6s ease forwards; pointer-events:none;
  }
  .toast-ikon { font-size:16px; }
  @keyframes toastGirCik {
    0%        { opacity:0; transform:translate(-50%, -14px); }
    4%, 88%   { opacity:1; transform:translate(-50%, 0); }
    100%      { opacity:0; transform:translate(-50%, -14px); }
  }
  @media (prefers-reduced-motion:reduce) {
    .toast { animation:none; opacity:1; }
  }
  
  /* ── DRAWER MARKA SATIRI (2026-08-15) ───────────────────────────────────────
     HATA, TASARIM TERCIHI DEGIL: .drawer-brand flex konteyner degildi, logo ve
     .brand-sub satir ici olarak akiyordu. Dar drawer'da "Business" alt satira
     dusuyor, .brand-sub::before ayiraci da (position:absolute left:0) tek basina
     dikey bir cizgi olarak metnin solunda kaliyordu — ekran goruntusundeki
     bicimsizlik tam olarak buydu.
     Cozum masaustuyle ayni: tek satir, ayirac ortada. Punto biraz kucultuldu ki
     320px genislikte de sigsin. */
  .drawer-brand { display:flex; align-items:center; min-width:0; }
  .drawer-brand .brand-sub { font-size:16px; padding-left:11px; margin-left:3px; white-space:nowrap; }
  .drawer-brand .brand-sub::before { height:19px; }