/* 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 — kırmızı */
  --red-50:#FCEAEC; --red-100:#F8D0D4; --red-600:#D62839; --red-700:#B31F2E; --red-800:#8F1823;
  /* Nötr — slate */
  --ink:#0F172A; --body:#1E293B; --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(214,40,57,.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:500; 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); }
.btn-ghost { color:var(--ink); padding:11px 10px; }
.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(214,40,57,.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-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:70; }
.drawer { position:fixed; top:0; left:0; bottom:0; width:min(84vw,340px); background:#fff; z-index:71; padding:16px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; box-shadow:var(--shadow-lg); transition:transform .25s ease; }
.drawer-hidden { transform:translateX(-100%); }
.drawer-shown { transform:translateX(0); }
.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-cta { display:flex; align-items:center; justify-content:space-between; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; font-weight:600; color:var(--ink); }
.drawer-nav { display:flex; flex-direction:column; }
.drawer-nav a { padding:13px 6px; font-size:16px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--border); }
.drawer-nav a.active { color:var(--red-700); font-weight:700; }
.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; }
  .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(214,40,57,.07), rgba(214,40,57,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(214,40,57,.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:80; 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(214,40,57,.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);
    transform:translateY(110%); transition:transform .25s ease;
  }
  .cd-mobilebar.is-visible { transform:translateY(0); }
  .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:90; 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:#F8D0D4; }
.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; }
.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; }
@media (max-width:820px){
  .catalog-body { grid-template-columns:1fr; }
  .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); }
  .grid.grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* Satış sayfası (/egitim/{slug}) */
.cd { padding:32px 0 72px; }
.cd-grid { display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:start; }
/* 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; }
.cd-main h1 { font-size:clamp(1.75rem,3vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
/* 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); }
.cd-section h2 { font-size:clamp(23px,2.6vw,28px); 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; }
  .cd-side { order:-1; }
  /* 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); }
.kb-ico { font-size:26px; margin-bottom:12px; }
.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); }
/* 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:#F8D0D4; }
.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 { 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; }
}
@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(214,40,57,.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; }

/* 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; }
.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(214,40,57,.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); }
.drawer-user { padding:12px 4px; }
.drawer-user strong { display:block; font-size:15px; color:var(--ink); }
.drawer-user span { display:block; font-size:13px; color:var(--muted); }

/* 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:12px; 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 { font-size:12.5px; color:var(--muted); font-weight:500; }

.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 */
.checkout-item { display:flex; 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 seçici — vade farksız rozetli, karar anında fiyatın hemen altında (bkz docs/CONVERSION.md §2) */
.checkout-installments { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.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 */
.pay-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300;
  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) ============ */
.authm { position:fixed; inset:0; z-index:200; 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); }

/* ============ 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(214,40,57,.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(214,40,57,.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; }
.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(214,40,57,.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 ── */
.ply-top { flex-shrink:0; height:56px; display:flex; align-items:center; gap:10px; padding:0 14px;
  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); }
.ply-top-title { flex:1; min-width:0; 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; }
.ply-top-prog { flex-shrink:0; display:flex; align-items:center; gap:10px; }
/* 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; } }
.ply-prog-track { width:150px; height:6px; border-radius:99px; background:var(--border); overflow:hidden; }
.ply-prog-fill { height:100%; border-radius:99px; 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; }
@media (max-width:860px) { .ply-fsbtn-txt { display:none; } .ply-fsbtn { padding:0 9px; } }

/* ── 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; }
/* Tam ekranda çerçeve kabı ekranı kaplar (varsayılan siyah zemin yerine içerik zemini) */
.ply-frame-wrap:fullscreen { width:100vw; height:100vh; background:var(--surface); }
.ply-frame-wrap:-webkit-full-screen { width:100vw; height:100vh; background:var(--surface); }
.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 { width:84px; }
  .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; }
.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 — Ayarlar'ı küçültmek/soluklaştırmak reddetme
   yolunu gizler, KVKK rehberinin istemediği tam da bu. 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-decline, .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-decline, .cconsent-settings-btn { background:var(--surface); color:var(--body); border:1px solid var(--border-strong); }
.cconsent-decline:hover, .cconsent-settings-btn:hover { background:var(--bg); }
@media (max-width:600px) {
  .cconsent-inner { flex-direction:column; align-items:stretch; gap:12px; }
  .cconsent-actions { justify-content:stretch; }
  .cconsent-actions .btn { flex:1; }
}

/* Ayarlar paneli — kategori bazlı aç/kapa (CookieYes deseni). */
.cconsent-panel { max-width:640px; margin:0 auto; padding:4px 20px 6px; }
.cconsent-panel-head h2 { font-size:1.0625rem; color:var(--ink); margin:0 0 4px; }
.cconsent-panel-head p { font-size:.875rem; color:var(--muted); margin:0 0 16px; line-height:1.5; }
.cconsent-cat { padding:12px 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; justify-content:space-between; gap:12px; }
.cconsent-cat-name { font-size:.9375rem; font-weight:600; color:var(--ink); cursor:default; }
.cconsent-cat-desc { font-size:.8125rem; color:var(--muted); line-height:1.5; margin:4px 0 0; }
.cconsent-panel-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }

/* 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; }
.cconsent-toggle.is-locked { background:#16A34A; opacity:.55; cursor:default; }
.cconsent-toggle.is-locked .cconsent-toggle-dot { left:20px; }
@media (max-width:600px) {
  .cconsent-panel-actions { flex-direction:column-reverse; }
  .cconsent-panel-actions .btn { width:100%; }
}

/* 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); }