/* =====================================================================
   BEP Hazırla 2.0 — Tasarım Sistemi (ui.css)
   Yükleme sırası: bootstrap → style.css (eski bileşen tabanı) → ui.css
   Kurallar:
   - UDA/KDA akordiyonu (.uda-list / .uda-accordion-container) ESKİ görünümde
     kilitli: genel kurallar akordiyon içine sızmaz (:not(... *)), sondaki
     KİLİT bloğu eski token + font değerlerini geri yükler.
   - PDF çıktısı sunucu tarafındadır; bu dosya onu etkilemez.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------ TOKENS */
html, html[data-theme="light"], html[data-theme="light"] body {
  --ux-bg: #f5f7fa;
  --ux-surface: #ffffff;
  --ux-surface-2: #f0f3f7;
  --ux-surface-3: #e8edf3;
  --ux-ink: #0b1324;
  --ux-text: #1d2939;
  --ux-text-2: #475467;
  --ux-muted: #667085;
  --ux-line: #e3e8ef;
  --ux-line-2: #cfd7e2;
  --ux-primary: #0d7a68;
  --ux-primary-hover: #0a6556;
  --ux-primary-soft: #e3f3ef;
  --ux-primary-ink: #ffffff;
  --ux-primary-text: #0b6b5b;
  --ux-ring: rgba(13, 122, 104, .22);
  --ux-accent: #f4a62a;
  --ux-accent-soft: #fff4e0;
  --ux-danger: #c8321f;
  --ux-danger-soft: #fdecea;
  --ux-warn: #a85b05;
  --ux-warn-soft: #fff6e6;
  --ux-success: #067647;
  --ux-success-soft: #e7f6ee;
  --ux-side-bg: #0b1324;
  --ux-side-line: rgba(255, 255, 255, .08);
  --ux-side-text: #a9b4c4;
  --ux-side-strong: #ffffff;
  --ux-side-active: rgba(45, 212, 191, .14);
  --ux-side-accent: #5eead4;
  --ux-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --ux-shadow-2: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .14);
  --ux-shadow-3: 0 24px 60px -24px rgba(11, 19, 36, .35);
  --ux-r-sm: 8px;
  --ux-r: 12px;
  --ux-r-lg: 18px;
  --ux-r-xl: 26px;
  --ux-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ux-container: 1180px;
  color-scheme: light;

  /* eski style.css token'larını yeni sisteme bağla (akordiyon kilitli) */
  --primary: var(--ux-primary);
  --primary-hover: var(--ux-primary-hover);
  --primary-glow: var(--ux-ring);
  --primary-light: var(--ux-primary-soft);
  --background: var(--ux-bg);
  --background-secondary: var(--ux-surface-2);
  --bg: var(--ux-bg);
  --bg-card: var(--ux-surface);
  --bg-muted: var(--ux-surface-2);
  --surface: var(--ux-surface);
  --surface-hover: var(--ux-surface-2);
  --surface-elevated: var(--ux-surface);
  --text: var(--ux-text);
  --text-muted: var(--ux-muted);
  --border: var(--ux-line);
  --border-color: var(--ux-line);
  --border-hover: var(--ux-line-2);
  --border-active: var(--ux-ring);
  --danger: var(--ux-danger);
  --success: var(--ux-success);
  --warning: var(--ux-warn);
  --gradient-primary: linear-gradient(135deg, var(--ux-primary), var(--ux-primary));
  --gradient-bg: var(--ux-bg);
  --gradient-surface: var(--ux-surface);
  --shadow: var(--ux-shadow-1);
  --shadow-lg: var(--ux-shadow-2);
  --shadow-btn: none;
  --shadow-glow: none;
  --sidebar-width: 268px;
  --color-text: var(--ux-ink);
  --color-muted: var(--ux-muted);
  --color-border: var(--ux-line);
  --color-primary: var(--ux-primary-text);
  --color-primary-light: var(--ux-primary-soft);
  --brand-100: var(--ux-line);
  --sh-sm: var(--ux-shadow-1);
  --sh-md: var(--ux-shadow-2);
  --bs-body-bg: var(--ux-bg);
  --bs-body-color: var(--ux-text);
  --bs-border-color: var(--ux-line);
  --bs-link-color: var(--ux-primary-text);
  --bs-link-hover-color: var(--ux-primary-hover);
  --bs-font-sans-serif: var(--ux-font);
}

html[data-theme="dark"] body {
  /* eski style.css token'larını yeni sisteme bağla (akordiyon kilitli) */
  --primary: var(--ux-primary);
  --primary-hover: var(--ux-primary-hover);
  --primary-glow: var(--ux-ring);
  --primary-light: var(--ux-primary-soft);
  --background: var(--ux-bg);
  --background-secondary: var(--ux-surface-2);
  --bg: var(--ux-bg);
  --bg-card: var(--ux-surface);
  --bg-muted: var(--ux-surface-2);
  --surface: var(--ux-surface);
  --surface-hover: var(--ux-surface-2);
  --surface-elevated: var(--ux-surface);
  --text: var(--ux-text);
  --text-muted: var(--ux-muted);
  --border: var(--ux-line);
  --border-color: var(--ux-line);
  --border-hover: var(--ux-line-2);
  --border-active: var(--ux-ring);
  --danger: var(--ux-danger);
  --success: var(--ux-success);
  --warning: var(--ux-warn);
  --gradient-primary: linear-gradient(135deg, var(--ux-primary), var(--ux-primary));
  --gradient-bg: var(--ux-bg);
  --gradient-surface: var(--ux-surface);
  --shadow: var(--ux-shadow-1);
  --shadow-lg: var(--ux-shadow-2);
  --shadow-btn: none;
  --shadow-glow: none;
  --sidebar-width: 268px;
  --color-text: var(--ux-ink);
  --color-muted: var(--ux-muted);
  --color-border: var(--ux-line);
  --color-primary: var(--ux-primary-text);
  --color-primary-light: var(--ux-primary-soft);
  --brand-100: var(--ux-line);
  --sh-sm: var(--ux-shadow-1);
  --sh-md: var(--ux-shadow-2);
  --bs-body-bg: var(--ux-bg);
  --bs-body-color: var(--ux-text);
  --bs-border-color: var(--ux-line);
  --bs-link-color: var(--ux-primary-text);
  --bs-link-hover-color: var(--ux-primary-hover);
  --bs-font-sans-serif: var(--ux-font);
}
html[data-theme="dark"], html[data-theme="dark"] body {
  --ux-bg: #0a0f1a;
  --ux-surface: #111827;
  --ux-surface-2: #172134;
  --ux-surface-3: #1e2a40;
  --ux-ink: #f2f5f9;
  --ux-text: #e3e8ef;
  --ux-text-2: #b8c2d1;
  --ux-muted: #94a0b2;
  --ux-line: #233046;
  --ux-line-2: #33425c;
  --ux-primary: #2dd4bf;
  --ux-primary-hover: #5eead4;
  --ux-primary-soft: rgba(45, 212, 191, .12);
  --ux-primary-ink: #04221d;
  --ux-primary-text: #5eead4;
  --ux-ring: rgba(45, 212, 191, .28);
  --ux-accent: #fbbf4d;
  --ux-accent-soft: rgba(251, 191, 77, .12);
  --ux-danger: #f87171;
  --ux-danger-soft: rgba(248, 113, 113, .12);
  --ux-warn: #fbbf4d;
  --ux-warn-soft: rgba(251, 191, 77, .1);
  --ux-success: #4ade80;
  --ux-success-soft: rgba(74, 222, 128, .1);
  --ux-side-bg: #070b14;
  --ux-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --ux-shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 30px -12px rgba(0, 0, 0, .5);
  --ux-shadow-3: 0 30px 70px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ------------------------------------------------------------ BASE */
html body, html[data-theme] body {
  background: var(--ux-bg) !important;
  background-color: var(--ux-bg) !important;
  color: var(--ux-text) !important;
  font-family: var(--ux-font) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body::before, html body::after { display: none !important; }
html[data-theme] :is(h1, h2, h3, h4, h5):not(:is(.uda-list, .uda-accordion-container) *) {
  font-family: var(--ux-font) !important;
  color: var(--ux-ink);
  letter-spacing: -0.02em;
  -webkit-text-fill-color: currentColor;
  background: none;
}
html[data-theme] a:not(:is(.uda-list, .uda-accordion-container) *) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--ux-primary-soft); color: var(--ux-ink); }
:focus-visible { outline: 3px solid var(--ux-ring) !important; outline-offset: 2px; }
.ux-container { width: 100%; max-width: var(--ux-container); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
@media (max-width: 640px) { .ux-container { padding-inline: 18px; } }
.ux-site i[data-lucide], .ux-site svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }

/* ------------------------------------------------------------ LOGO */
.ux-logo { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-family: var(--ux-font); }
.ux-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ux-primary); color: var(--ux-primary-ink); display: inline-grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); flex-shrink: 0; }
.ux-logo-mark svg, .ux-logo-mark i { width: 18px !important; height: 18px !important; color: var(--ux-primary-ink); stroke: currentColor; }
.ux-logo-text { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.ux-logo-text b { font-weight: 800; margin-left: 1px; }
.ux-logo-light { color: #fff !important; }

/* ------------------------------------------------------------ BUTTONS (yeni) */
.ux-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 11px; border: 1px solid transparent; font-family: var(--ux-font); font-size: 14.5px; font-weight: 700; line-height: 1; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; box-sizing: border-box; }
.ux-btn svg { width: 17px !important; height: 17px !important; }
.ux-btn-lg { min-height: 50px; padding: 0 24px; font-size: 15.5px; border-radius: 13px; }
.ux-btn-block { width: 100%; }
.ux-btn-primary { background: var(--ux-primary); color: var(--ux-primary-ink) !important; box-shadow: 0 1px 2px rgba(16,24,40,.1), inset 0 -2px 0 rgba(0,0,0,.12); }
.ux-btn-primary:hover { background: var(--ux-primary-hover); }
.ux-btn-primary:disabled { opacity: .65; cursor: progress; }
.ux-btn-outline { background: var(--ux-surface); color: var(--ux-ink) !important; border-color: var(--ux-line-2); }
.ux-btn-outline:hover { border-color: var(--ux-ink); }
.ux-btn-ghost { background: transparent; color: var(--ux-ink) !important; }
.ux-btn-ghost:hover { background: var(--ux-surface-2); }
.ux-btn-light { background: #fff; color: #0b1324 !important; }
.ux-btn-light:hover { background: #e9fbf7; }
.ux-btn-ghost-light { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.35); }
.ux-btn-ghost-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ------------------------------------------------------------ THEME TOGGLE */
html[data-theme] #theme-toggle-btn.theme-toggle {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 11px !important;
  border: 1px solid var(--ux-line) !important; background: var(--ux-surface) !important; color: var(--ux-ink) !important;
  font-size: 16px !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center;
}
html[data-theme] #theme-toggle-btn.theme-toggle:hover { border-color: var(--ux-line-2) !important; background: var(--ux-surface-2) !important; }

/* =====================================================================
   LANDING
   ===================================================================== */
.ux-site { background: var(--ux-bg); color: var(--ux-text); min-height: 100vh; overflow-x: clip; }
.ux-site h1, .ux-site h2, .ux-site h3 { margin: 0; }
.ux-site p { margin: 0; }

/* NAV */
.ux-nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ux-bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.ux-nav.is-scrolled { border-bottom-color: var(--ux-line); }
.ux-nav-inner { display: flex; align-items: center; gap: 24px; height: 70px; }
.ux-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex: 1; }
.ux-nav-link { padding: 8px 12px; border-radius: 9px; color: var(--ux-text-2) !important; font-weight: 600; font-size: 14.5px; text-decoration: none !important; }
.ux-nav-link:hover { color: var(--ux-ink) !important; background: var(--ux-surface-2); }
.ux-nav-mobile-actions { display: none; }
.ux-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ux-nav-toggle { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); align-items: center; justify-content: center; cursor: pointer; }
.ux-nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .ux-hide-md { display: none !important; } }
@media (max-width: 920px) {
  .ux-nav-toggle { display: inline-flex; }
  .ux-nav-links { position: fixed; inset: 70px 0 auto 0; margin: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 18px 20px; background: var(--ux-surface); border-bottom: 1px solid var(--ux-line); box-shadow: var(--ux-shadow-2); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; max-height: calc(100dvh - 70px); overflow-y: auto; }
  .ux-nav.is-open .ux-nav-links { opacity: 1; visibility: visible; transform: none; }
  .ux-nav-link { padding: 13px 12px; font-size: 16px; }
  .ux-nav-mobile-actions { display: grid; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ux-line); }
}
@media (max-width: 560px) { .ux-hide-sm { display: none !important; } .ux-logo-text { font-size: 17px; } }
body.ux-nav-locked { overflow: hidden; }

/* HERO */
.ux-hero { position: relative; padding: 64px 0 88px; overflow: hidden; }
.ux-hero-bg { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(600px 340px at 85% 10%, color-mix(in srgb, var(--ux-primary) 16%, transparent), transparent 70%),
  radial-gradient(500px 300px at 8% 90%, color-mix(in srgb, var(--ux-accent) 14%, transparent), transparent 70%); }
.ux-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--ux-line) 1px, transparent 1px), linear-gradient(90deg, var(--ux-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); opacity: .55; }
.ux-hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.ux-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--ux-surface); border: 1px solid var(--ux-line); font-size: 13px; font-weight: 700; color: var(--ux-text-2); box-shadow: var(--ux-shadow-1); }
.ux-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ux-primary); box-shadow: 0 0 0 4px var(--ux-primary-soft); }
.ux-hero-title { margin-top: 22px !important; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.04em !important; color: var(--ux-ink); }
.ux-hl { color: var(--ux-primary-text); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ux-accent) 38%, transparent) 62%); padding: 0 2px; }
.ux-lead { margin-top: 20px !important; font-size: 18px; line-height: 1.65; color: var(--ux-text-2); max-width: 540px; }
.ux-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ux-hero-checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.ux-hero-checks li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ux-text-2); }
.ux-hero-checks svg { width: 16px !important; height: 16px !important; color: var(--ux-primary-text); stroke-width: 3; }

/* hero app mock */
.ux-hero-visual { position: relative; }
.ux-app { background: var(--ux-surface); border: 1px solid var(--ux-line); border-radius: 20px; box-shadow: var(--ux-shadow-3); overflow: hidden; }
.ux-app-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--ux-line); background: var(--ux-surface-2); }
.ux-app-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ux-line-2); }
.ux-app-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--ux-muted); background: var(--ux-surface); border: 1px solid var(--ux-line); padding: 3px 10px; border-radius: 6px; }
.ux-app-body { display: grid; grid-template-columns: 132px 1fr; min-height: 330px; }
.ux-app-side { background: var(--ux-side-bg); padding: 16px 10px; display: flex; flex-direction: column; gap: 6px; }
.ux-app-step { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--ux-side-text); }
.ux-app-step b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: rgba(255,255,255,.08); color: #fff; }
.ux-app-step.done b { background: #2dd4bf; color: #04221d; }
.ux-app-step.active { background: var(--ux-side-active); color: #fff; }
.ux-app-step.active b { background: #f4a62a; color: #2b1a00; }
.ux-app-main { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ux-app-student { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--ux-line); margin-bottom: 4px; }
.ux-app-student strong { display: block; font-size: 14px; color: var(--ux-ink); }
.ux-app-student small { font-size: 12px; color: var(--ux-muted); }
.ux-app-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--ux-primary-soft); color: var(--ux-primary-text); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.ux-app-tag { margin-left: auto; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: var(--ux-accent-soft); color: var(--ux-warn); }
.ux-app-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ux-muted); margin-top: 4px; }
.ux-app-goal { font-size: 13.5px; font-weight: 700; color: var(--ux-ink); background: var(--ux-primary-soft); border: 1px solid color-mix(in srgb, var(--ux-primary) 25%, transparent); padding: 10px 12px; border-radius: 10px; }
.ux-app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ux-app-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ux-text); padding: 7px 10px; border: 1px solid var(--ux-line); border-radius: 9px; }
.ux-app-list li svg { width: 14px !important; height: 14px !important; color: #fff; background: var(--ux-primary); border-radius: 4px; padding: 2px; stroke-width: 3; }
.ux-app-list li.todo i { width: 14px; height: 14px; border: 1.5px solid var(--ux-line-2); border-radius: 4px; }
.ux-app-list em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ux-muted); white-space: nowrap; }
.ux-app-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.ux-app-progress { flex: 1; height: 6px; background: var(--ux-surface-3); border-radius: 99px; overflow: hidden; }
.ux-app-progress i { display: block; height: 100%; background: var(--ux-primary); border-radius: 99px; }
.ux-app-foot b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 7px 12px; border-radius: 8px; background: var(--ux-ink); color: var(--ux-bg); }
.ux-app-foot b svg { width: 14px !important; height: 14px !important; }
.ux-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ux-surface); border: 1px solid var(--ux-line); border-radius: 14px; box-shadow: var(--ux-shadow-2); }
.ux-float svg { width: 20px !important; height: 20px !important; color: var(--ux-primary-text); }
.ux-float strong { display: block; font-size: 13px; color: var(--ux-ink); line-height: 1.2; }
.ux-float small { font-size: 11.5px; color: var(--ux-muted); }
.ux-float-a { left: -28px; bottom: 54px; }
.ux-float-b { right: -18px; top: 70px; }

/* STRIP */
.ux-strip { border-block: 1px solid var(--ux-line); background: var(--ux-surface); }
.ux-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ux-strip-grid > div { display: flex; gap: 12px; align-items: flex-start; padding: 24px 20px; border-right: 1px solid var(--ux-line); }
.ux-strip-grid > div:last-child { border-right: 0; }
.ux-strip-grid svg { width: 22px !important; height: 22px !important; color: var(--ux-primary-text); margin-top: 2px; }
.ux-strip-grid span { font-size: 13.5px; color: var(--ux-muted); line-height: 1.45; }
.ux-strip-grid strong { display: block; color: var(--ux-ink); font-size: 14.5px; margin-bottom: 2px; }

/* SECTIONS */
.ux-section { padding: 96px 0; }
.ux-section-alt { background: var(--ux-surface); border-block: 1px solid var(--ux-line); }
.ux-section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.ux-section-head.ux-left { text-align: left; margin: 0; }
.ux-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ux-primary-text); margin-bottom: 12px; }
.ux-section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.035em !important; }
.ux-section-head p { margin-top: 14px !important; font-size: 17px; color: var(--ux-text-2); }

/* STEPS */
.ux-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.ux-step { position: relative; padding: 26px 22px; background: var(--ux-surface); border: 1px solid var(--ux-line); border-radius: var(--ux-r-lg); box-shadow: var(--ux-shadow-1); }
.ux-step-num { position: absolute; top: 20px; right: 20px; font-size: 13px; font-weight: 800; color: var(--ux-muted); letter-spacing: .04em; }
.ux-step svg { width: 26px !important; height: 26px !important; color: var(--ux-primary-text); margin-bottom: 18px; }
.ux-step h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px !important; }
.ux-step p { font-size: 14.5px; color: var(--ux-text-2); }
.ux-step:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: -14px; width: 10px; height: 10px; border-top: 2px solid var(--ux-line-2); border-right: 2px solid var(--ux-line-2); transform: rotate(45deg); }

/* BENTO */
.ux-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ux-feature { padding: 26px; border-radius: var(--ux-r-lg); background: var(--ux-bg); border: 1px solid var(--ux-line); }
.ux-feature-lg { grid-row: span 2; background: var(--ux-side-bg); border-color: var(--ux-side-bg); color: #c9d2de; display: flex; flex-direction: column; }
.ux-feature-lg h3 { color: #fff !important; font-size: 22px !important; }
.ux-feature-lg p { color: #b4bfcd !important; }
.ux-feature-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ux-primary-soft); color: var(--ux-primary-text); margin-bottom: 18px; }
.ux-feature-lg .ux-feature-icon { background: rgba(45,212,191,.15); color: #5eead4; }
.ux-feature-icon svg { width: 22px !important; height: 22px !important; }
.ux-feature h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px !important; line-height: 1.3; }
.ux-feature p { font-size: 14.5px; color: var(--ux-text-2); }
.ux-feature-demo { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ux-feature-demo span { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); color: #c9d2de; }
.ux-feature-demo span.on { background: #2dd4bf; border-color: #2dd4bf; color: #04221d; }

/* COMPARE */
.ux-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.ux-compare-col { padding: 30px; border-radius: var(--ux-r-lg); border: 1px solid var(--ux-line); background: var(--ux-surface); }
.ux-compare-col h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; margin-bottom: 18px !important; }
.ux-compare-col h3 svg { width: 20px !important; height: 20px !important; }
.ux-compare-col ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.ux-compare-col li { display: flex; gap: 10px; font-size: 15px; color: var(--ux-text-2); }
.ux-compare-col li svg { width: 18px !important; height: 18px !important; margin-top: 3px; flex-shrink: 0; stroke-width: 3; }
.ux-compare-old { background: var(--ux-surface-2); }
.ux-compare-old li svg { color: var(--ux-muted); }
.ux-compare-old li { text-decoration: none; }
.ux-compare-new { border: 2px solid var(--ux-primary); box-shadow: 0 20px 50px -30px var(--ux-primary); }
.ux-compare-new h3 svg, .ux-compare-new li svg { color: var(--ux-primary-text); }
.ux-compare-new li { color: var(--ux-ink); font-weight: 600; }

/* SAMPLE */
.ux-sample { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.ux-sample-copy h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em !important; }
.ux-sample-copy > p { margin: 16px 0 22px !important; font-size: 16.5px; color: var(--ux-text-2); }
.ux-ticks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.ux-ticks li { display: flex; gap: 10px; font-size: 15px; color: var(--ux-text-2); }
.ux-ticks li strong { color: var(--ux-ink); }
.ux-ticks svg { width: 20px !important; height: 20px !important; color: var(--ux-primary-ink); background: var(--ux-primary); border-radius: 6px; padding: 3px; stroke-width: 3; flex-shrink: 0; }
.ux-paper { background: #fff; color: #111; border-radius: 6px; padding: 26px 24px; box-shadow: var(--ux-shadow-3); border: 1px solid #e5e7eb; transform: rotate(1.2deg); font-family: 'Times New Roman', Georgia, serif; }
.ux-paper, .ux-paper * { color: #111 !important; -webkit-text-fill-color: #111 !important; }
.ux-paper-head { text-align: center; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; }
.ux-paper-head small { display: block; font-size: 10.5px; letter-spacing: .08em; }
.ux-paper-head strong { font-size: 13px; letter-spacing: .02em; }
.ux-paper-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11.5px; margin-bottom: 12px; }
.ux-paper-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.ux-paper-table th, .ux-paper-table td { border: 1px solid #333 !important; padding: 6px !important; text-align: left; vertical-align: top; color: #111 !important; background: #fff !important; }
.ux-paper-table th { background: #f1f1f1 !important; font-weight: 700; }
.ux-paper-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; font-size: 10.5px; text-align: center; }
.ux-paper-sign span { border-top: 1px solid #333; padding-top: 6px; }

/* FAQ */
.ux-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.ux-faq { display: grid; gap: 10px; }
.ux-faq-item { background: var(--ux-surface); border: 1px solid var(--ux-line); border-radius: 14px; padding: 0 20px; transition: border-color .15s; }
.ux-faq-item[open] { border-color: var(--ux-line-2); box-shadow: var(--ux-shadow-1); }
.ux-faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ux-ink); }
.ux-faq-item summary::-webkit-details-marker { display: none; }
.ux-faq-item summary svg { width: 18px !important; height: 18px !important; transition: transform .2s; color: var(--ux-muted); flex-shrink: 0; }
.ux-faq-item[open] summary svg { transform: rotate(45deg); color: var(--ux-primary-text); }
.ux-faq-item p { padding: 0 0 18px; font-size: 15px; color: var(--ux-text-2); }

/* CTA */
.ux-cta { padding: 0 0 96px; }
.ux-cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 56px; border-radius: var(--ux-r-xl); background: #0b1324; color: #c9d2de; }
.ux-cta-card::before { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.35), transparent 65%); }
.ux-cta-card > * { position: relative; }
.ux-cta-card h2 { color: #fff !important; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.035em !important; }
.ux-cta-card p { margin-top: 10px !important; font-size: 16.5px; color: #b4bfcd; }
.ux-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* FOOTER */
.ux-footer { background: #0b1324; color: #9aa6b8; padding-top: 64px; }
.ux-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; }
.ux-footer-brand p { margin-top: 16px !important; font-size: 14.5px; line-height: 1.65; max-width: 340px; }
.ux-footer-note { font-size: 12.5px !important; color: #7d8a9e; }
.ux-footer-col h3 { color: #fff !important; font-size: 13px !important; font-weight: 800; letter-spacing: .06em !important; text-transform: uppercase; margin-bottom: 16px !important; }
.ux-footer-col a { display: block; padding: 5px 0; color: #b4bfcd !important; text-decoration: none !important; font-size: 14.5px; }
.ux-footer-col a:hover { color: #5eead4 !important; }
.ux-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 28px !important; border-top: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.ux-footer-bottom nav { display: flex; gap: 18px; }
.ux-footer-bottom a { color: #b4bfcd !important; text-decoration: none !important; }
.ux-footer-bottom a:hover { color: #fff !important; }

/* PWA banner */
html[data-theme] .pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; background: var(--ux-ink) !important; color: var(--ux-bg) !important; border-radius: 16px !important; padding: 12px 14px !important; box-shadow: var(--ux-shadow-3) !important; border: 0 !important; }
html[data-theme] .pwa-install-banner-inner { display: flex; align-items: center; gap: 12px; }
html[data-theme] .pwa-install-banner-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--ux-primary); color: var(--ux-primary-ink); display: grid; place-items: center; flex-shrink: 0; }
html[data-theme] .pwa-install-banner-text { flex: 1; display: grid; font-size: 13px; }
html[data-theme] .pwa-install-banner :is(.pwa-install-banner-text, .pwa-install-banner-text *, .pwa-install-banner-close) { color: var(--ux-bg) !important; -webkit-text-fill-color: var(--ux-bg) !important; }
html[data-theme] .pwa-install-banner-text strong { font-size: 14px; color: inherit; }
html[data-theme] .pwa-install-banner-text span { opacity: 1; }
html[data-theme] .pwa-install-banner-close { background: transparent !important; border: 0 !important; color: inherit !important; font-size: 24px; width: 36px; height: 36px; cursor: pointer; }

/* LANDING RESPONSIVE */
@media (max-width: 1080px) {
  .ux-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ux-hero-copy { text-align: center; }
  .ux-lead { margin-inline: auto; }
  .ux-hero-cta, .ux-hero-checks { justify-content: center; }
  .ux-hero-visual { max-width: 620px; margin: 0 auto; width: 100%; }
  .ux-steps { grid-template-columns: repeat(2, 1fr); }
  .ux-step:nth-child(2)::after { display: none; }
  .ux-bento { grid-template-columns: repeat(2, 1fr); }
  .ux-feature-lg { grid-column: span 2; grid-row: auto; }
  .ux-sample { grid-template-columns: 1fr; gap: 48px; }
  .ux-paper { max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; }
  .ux-faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .ux-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .ux-footer-brand { grid-column: 1 / -1; }
  .ux-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .ux-strip-grid > div:nth-child(2) { border-right: 0; }
  .ux-strip-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--ux-line); }
}
@media (max-width: 720px) {
  .ux-hero { padding: 36px 0 56px; }
  .ux-lead { font-size: 16.5px; }
  .ux-hero-cta .ux-btn { flex: 1 1 100%; }
  .ux-float { display: none; }
  .ux-app-body { grid-template-columns: 1fr; min-height: 0; }
  .ux-app-side { flex-direction: row; overflow: hidden; padding: 10px; }
  .ux-app-step { padding: 6px; font-size: 0; gap: 0; }
  .ux-app-step b { font-size: 11px; }
  .ux-app-step.active { font-size: 12px; gap: 6px; padding-right: 10px; }
  .ux-section { padding: 64px 0; }
  .ux-section-head { margin-bottom: 36px; }
  .ux-section-head p { font-size: 15.5px; }
  .ux-steps, .ux-bento, .ux-compare { grid-template-columns: 1fr; }
  .ux-feature-lg { grid-column: auto; }
  .ux-step::after { display: none; }
  .ux-strip-grid { grid-template-columns: 1fr; }
  .ux-strip-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--ux-line); padding: 16px 4px; }
  .ux-strip-grid > div:last-child { border-bottom: 0; }
  .ux-compare-col { padding: 24px 20px; }
  .ux-paper { transform: none; padding: 18px 14px; }
  .ux-paper-table { font-size: 9.5px; }
  .ux-cta { padding-bottom: 64px; }
  .ux-cta-card { flex-direction: column; align-items: flex-start; padding: 36px 24px; }
  .ux-cta-actions, .ux-cta-actions .ux-btn { width: 100%; }
  .ux-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ux-footer-bottom { flex-direction: column; }
}

/* =====================================================================
   AUTH (giriş / kayıt)
   ===================================================================== */
.ux-auth { display: grid; grid-template-columns: minmax(380px, 0.9fr) 1.1fr; min-height: 100vh; min-height: 100dvh; background: var(--ux-bg); }
.ux-auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 48px; background: #0b1324; color: #b4bfcd; }
.ux-auth-side::before { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,.28), transparent 65%); }
.ux-auth-side::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); }
.ux-auth-side > * { position: relative; z-index: 1; }
.ux-auth-side .ux-logo-mark { background: #2dd4bf; color: #04221d; }
.ux-auth-side .ux-logo-mark svg { color: #04221d; }
.ux-auth-side-body { margin: auto 0; padding: 40px 0; }
.ux-auth-side-body h2 { color: #fff !important; font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em !important; max-width: 420px; }
.ux-auth-side-body p { margin: 14px 0 26px; font-size: 16.5px; max-width: 400px; }
.ux-auth-side-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ux-auth-side-body li { display: flex; align-items: center; gap: 10px; color: #dbe3ec; font-weight: 600; }
.ux-auth-side-body li svg { width: 20px !important; height: 20px !important; padding: 3px; border-radius: 6px; background: rgba(45,212,191,.16); color: #5eead4; stroke-width: 3; }
.ux-auth-side-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); max-width: 360px; backdrop-filter: blur(6px); }
.ux-auth-side-card .ux-app-avatar { background: rgba(45,212,191,.16); color: #5eead4; }
.ux-auth-side-card strong { display: block; color: #fff; font-size: 14px; }
.ux-auth-side-card small { font-size: 12.5px; color: #c3ccd8; }
.ux-auth-side-card > svg { margin-left: auto; width: 22px !important; height: 22px !important; color: #5eead4; }
.ux-auth-side-note { margin-top: 26px; font-size: 12.5px; color: #7d8a9e; }
.ux-auth-main { display: flex; flex-direction: column; padding: 28px 40px 40px; min-width: 0; }
.ux-auth-top { display: flex; justify-content: space-between; align-items: center; }
.ux-auth-home { display: inline-flex; align-items: center; gap: 6px; color: var(--ux-text-2) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; padding: 8px 10px; margin-left: -10px; border-radius: 9px; }
.ux-auth-home:hover { background: var(--ux-surface-2); color: var(--ux-ink) !important; }
.ux-auth-home svg { width: 16px !important; height: 16px !important; }
.ux-auth-logo { display: none !important; }
.ux-auth-card { width: 100%; max-width: 420px; margin: auto; padding: 36px 0; }
.ux-auth-card h1 { font-size: 30px !important; font-weight: 800; letter-spacing: -0.035em !important; margin: 0 0 6px !important; }
.ux-auth-sub { color: var(--ux-muted); font-size: 15.5px; margin: 0 0 28px !important; }
.ux-field { margin-bottom: 18px; }
.ux-field label, .ux-field-row label { display: block; font-size: 14px; font-weight: 700; color: var(--ux-ink); margin-bottom: 7px; }
.ux-field-row { display: flex; justify-content: space-between; align-items: baseline; }
.ux-link { background: none; border: 0; padding: 0; color: var(--ux-primary-text); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.ux-link:hover { text-decoration: underline; }
.ux-input-icon { position: relative; display: flex; align-items: center; }
.ux-input-icon > svg:first-child { position: absolute; left: 14px; width: 18px !important; height: 18px !important; color: var(--ux-muted); pointer-events: none; z-index: 1; }
html[data-theme] #app .ux-auth .ux-input-icon input {
  width: 100% !important; height: 50px !important; padding: 0 14px 0 44px !important; border-radius: 12px !important;
  border: 1.5px solid var(--ux-line-2) !important; background: var(--ux-surface) !important; color: var(--ux-ink) !important;
  font-family: var(--ux-font) !important; font-size: 15.5px !important; box-shadow: none !important; outline: 0; transition: border-color .15s, box-shadow .15s;
}
html[data-theme] #app .ux-auth .ux-input-icon input::placeholder { color: var(--ux-muted) !important; opacity: .8; }
html[data-theme] #app .ux-auth .ux-input-icon input:focus { border-color: var(--ux-primary) !important; box-shadow: 0 0 0 4px var(--ux-ring) !important; background: var(--ux-surface) !important; }
html[data-theme] #app .ux-auth .ux-input-icon input[aria-invalid="true"] { border-color: var(--ux-danger) !important; }
html[data-theme] #app .ux-auth .bh-pass input { padding-right: 50px !important; }
.ux-pass-toggle { position: absolute !important; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0 !important; background: transparent !important; border-radius: 9px; color: var(--ux-muted) !important; display: grid !important; place-items: center; cursor: pointer; padding: 0 !important; }
.ux-pass-toggle:hover { background: var(--ux-surface-2) !important; color: var(--ux-ink) !important; }
.ux-pass-toggle svg { width: 18px !important; height: 18px !important; }
.ux-field-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ux-muted); }
.ux-field-error { display: block; font-size: 13px; color: var(--ux-danger); font-weight: 600; margin-top: 4px; }
.ux-field-error:empty { display: none; }
.ux-form-error { background: var(--ux-danger-soft); color: var(--ux-danger); border: 1px solid color-mix(in srgb, var(--ux-danger) 30%, transparent); padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.ux-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ux-text-2); margin: 4px 0 6px; cursor: pointer; line-height: 1.5; }
.ux-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ux-primary); flex-shrink: 0; }
.ux-check a { color: var(--ux-primary-text) !important; font-weight: 700; }
.ux-auth form .ux-btn { margin-top: 8px; }
.ux-auth-switch { margin-top: 24px !important; text-align: center; color: var(--ux-muted); font-size: 14.5px; }
.ux-auth-switch a { color: var(--ux-primary-text) !important; font-weight: 800; text-decoration: none !important; }
.ux-auth-switch a:hover { text-decoration: underline !important; }
@media (max-width: 960px) {
  .ux-auth { grid-template-columns: 1fr; }
  .ux-auth-side { display: none; }
  .ux-auth-main { padding: 18px 20px 32px; }
  .ux-auth-logo { display: inline-flex !important; margin: 28px auto 0; }
  .ux-auth-card { margin: 0 auto; padding: 24px 0; }
  .ux-auth-card h1 { text-align: center; font-size: 26px !important; }
  .ux-auth-sub { text-align: center; }
}
@media (min-width: 961px) and (max-width: 1100px) { .ux-auth-side { padding: 36px; } }

/* =====================================================================
   PANEL KABUĞU (öğretmen + admin)
   ===================================================================== */
html[data-theme], html[data-theme] .layout, html[data-theme] .layout-body { background: var(--ux-bg) !important; background-color: var(--ux-bg) !important; background-image: none !important; }
html[data-theme] .mobile-nav-wrapper { width: var(--sidebar-width); }

/* sidebar */
html[data-theme] .sidebar {
  width: var(--sidebar-width) !important; background: var(--ux-side-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--ux-side-line) !important; padding: 20px 14px 16px !important; gap: 6px !important; color: var(--ux-side-text) !important; box-shadow: none !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
html[data-theme] .sidebar::after { display: none !important; }
html[data-theme] .sidebar .sidebar-brand { margin: 0 6px 16px !important; padding: 0 !important; font-size: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html[data-theme] .sidebar .ux-logo-mark { background: #2dd4bf; color: #04221d; }
html[data-theme] .sidebar .ux-logo-mark svg { color: #04221d; }
.ux-side-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-bottom: 14px; border: 0; border-radius: 11px; background: #2dd4bf; color: #04221d; font-family: var(--ux-font); font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.ux-side-cta:hover { background: #5eead4; }
.ux-side-cta svg { width: 17px !important; height: 17px !important; stroke-width: 2.6; }
html[data-theme] .sidebar nav.ux-side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
html[data-theme] .sidebar .nav-link {
  display: flex !important; align-items: center !important; gap: 11px !important; padding: 9px 12px !important; border-radius: 10px !important;
  color: var(--ux-side-text) !important; background: transparent !important; border: 0 !important; font-family: var(--ux-font) !important;
  font-size: 14.5px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; position: relative; cursor: pointer; line-height: 1.35 !important;
}
html[data-theme] .sidebar .nav-link svg, html[data-theme] .sidebar .nav-link i { width: 18px !important; height: 18px !important; color: inherit !important; stroke: currentColor !important; opacity: .9; flex-shrink: 0; }
html[data-theme] .sidebar .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
html[data-theme] .sidebar .nav-link.active { background: var(--ux-side-active) !important; color: #fff !important; }
html[data-theme] .sidebar .nav-link.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ux-side-accent); }
html[data-theme] .sidebar .nav-link.active svg { color: var(--ux-side-accent) !important; }
html[data-theme] .sidebar .nav-group-header { justify-content: space-between !important; }
html[data-theme] .sidebar .nav-group-header-label { display: inline-flex; align-items: center; gap: 11px; }
html[data-theme] .sidebar .nav-group-caret { font-size: 12px; opacity: .6; transition: transform .2s; }
html[data-theme] .sidebar .nav-group.open .nav-group-caret { transform: rotate(180deg); }
html[data-theme] .sidebar .nav-sublinks { margin: 2px 0 6px 21px !important; padding-left: 12px !important; border-left: 1px solid var(--ux-side-line) !important; }
html[data-theme] .sidebar .nav-sublink { font-size: 13.5px !important; padding: 7px 10px !important; }
html[data-theme] .sidebar .nav-sublink.active::before { left: -13px; top: 6px; bottom: 6px; }
.ux-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 11px; background: rgba(255,255,255,.06); }
.ux-seg a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border-radius: 8px; color: var(--ux-side-text) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.ux-seg a svg { width: 14px !important; height: 14px !important; }
.ux-seg a.is-active { background: #fff; color: #0b1324 !important; }
.ux-side-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--ux-side-line); }
.ux-side-avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(45,212,191,.16); color: #5eead4; font-weight: 800; flex-shrink: 0; }
.ux-side-user > div { min-width: 0; flex: 1; }
.ux-side-user strong { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-side-user small { font-size: 12px; color: var(--ux-side-text); }
.ux-side-logout { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ux-side-text) !important; flex-shrink: 0; }
.ux-side-logout:hover { background: rgba(248,113,113,.14); color: #fca5a5 !important; }
.ux-side-logout svg { width: 18px !important; height: 18px !important; }
html[data-theme] .sidebar-close-btn { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; }

/* main */
html[data-theme] .main-content { padding: 26px 34px 40px !important; max-width: 1320px !important; animation: none !important; }
html[data-theme] .main-content > h1:first-child,
html[data-theme] .main-content > h1,
.ux-page-head h1, html[data-theme] .students-page-title, html[data-theme] .bep-page-title {
  font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--ux-ink) !important; margin: 0 0 4px !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
html[data-theme] .main-content > h1 { margin-bottom: 18px !important; }
.ux-page-head, html[data-theme] .students-page-header, html[data-theme] .bep-page-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap; margin: 4px 0 22px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.ux-page-sub { margin: 0 !important; color: var(--ux-muted); font-size: 14.5px; }
html[data-theme] .students-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* topbar */
html[data-theme] .panel-header.ux-topbar {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  padding: 10px 12px 10px 14px !important; margin: 0 0 26px !important; background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important;
  border-radius: 16px !important; box-shadow: var(--ux-shadow-1) !important; position: relative; z-index: 20;
}
.ux-topbar-greet { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ux-topbar-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ux-primary-soft); color: var(--ux-primary-text); font-weight: 800; font-size: 14px; flex-shrink: 0; }
.ux-topbar-greet small { display: block; font-size: 12.5px; color: var(--ux-muted); line-height: 1.2; }
.ux-topbar-greet strong { display: block; font-size: 15.5px; color: var(--ux-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
html[data-theme] .ux-topbar .panel-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
.ux-topbar-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 11px; background: var(--ux-surface-2); color: var(--ux-text-2); font-size: 13.5px; font-weight: 600; }
.ux-topbar-chip b { color: var(--ux-ink); }
.ux-topbar-chip svg { width: 16px !important; height: 16px !important; color: var(--ux-primary-text); }
html[data-theme] .ux-icon-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 40px !important; padding: 0 13px !important; border-radius: 11px !important; border: 1px solid var(--ux-line) !important; background: var(--ux-surface) !important; color: var(--ux-ink) !important; font-family: var(--ux-font) !important; font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer; box-shadow: none !important; }
html[data-theme] .ux-icon-btn:hover { background: var(--ux-surface-2) !important; border-color: var(--ux-line-2) !important; }
html[data-theme] .ux-icon-btn svg { width: 17px !important; height: 17px !important; }
@media (max-width: 1100px) { html[data-theme] .ux-icon-btn span { display: none; } html[data-theme] .ux-icon-btn { padding: 0 11px !important; } }

/* bildirim */
html[data-theme] .panel-header-bildirim-btn, html[data-theme] .mobile-header-bildirim-btn {
  position: relative; width: 40px !important; height: 40px !important; border-radius: 11px !important; border: 1px solid var(--ux-line) !important;
  background: var(--ux-surface) !important; color: var(--ux-ink) !important; display: grid !important; place-items: center !important; padding: 0 !important; box-shadow: none !important; cursor: pointer;
}
html[data-theme] .panel-header-bildirim-btn svg, html[data-theme] .mobile-header-bildirim-btn svg { width: 18px !important; height: 18px !important; color: var(--ux-ink) !important; stroke: currentColor !important; }
html[data-theme] .panel-header-bildirim-badge, html[data-theme] .mobile-header-bildirim-badge { position: absolute !important; top: -5px !important; right: -5px !important; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px !important; background: var(--ux-danger) !important; color: #fff !important; font-size: 11px !important; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--ux-surface) !important; }
html[data-theme] .panel-header-bildirim-badge.zero, html[data-theme] .mobile-header-bildirim-badge.zero { display: none !important; }
html[data-theme] .bildirim-dropdown { background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; border-radius: 14px !important; box-shadow: var(--ux-shadow-3) !important; color: var(--ux-text) !important; overflow: hidden; }
html[data-theme] .bildirim-dropdown-header { padding: 14px 16px !important; font-weight: 800 !important; color: var(--ux-ink) !important; border-bottom: 1px solid var(--ux-line) !important; background: transparent !important; }
html[data-theme] .bildirim-dropdown-item { padding: 12px 16px !important; border-bottom: 1px solid var(--ux-line) !important; cursor: pointer; background: transparent !important; }
html[data-theme] .bildirim-dropdown-item:hover { background: var(--ux-surface-2) !important; }
html[data-theme] .bildirim-dropdown-item-title { color: var(--ux-ink) !important; font-weight: 700 !important; }
html[data-theme] .bildirim-dropdown-item-desc, html[data-theme] .bildirim-dropdown-item-time, html[data-theme] .bildirim-dropdown-empty { color: var(--ux-muted) !important; }
html[data-theme] .bildirim-dropdown-footer { background: var(--ux-surface-2) !important; border-top: 1px solid var(--ux-line) !important; }
html[data-theme] .bildirim-dropdown-mark-all, html[data-theme] .bildirim-dropdown-view-all { color: var(--ux-primary-text) !important; font-weight: 700 !important; background: transparent !important; }

/* verify banner */
html[data-theme] .main-content > .alert.alert-warning, html[data-theme] .alert-warning { background: var(--ux-warn-soft) !important; color: var(--ux-text) !important; border: 1px solid color-mix(in srgb, var(--ux-warn) 35%, transparent) !important; border-radius: 14px !important; padding: 14px 16px !important; }
html[data-theme] #email-verify-alert { background: var(--ux-ink) !important; color: var(--ux-bg) !important; border: 0 !important; font-family: var(--ux-font) !important; }
html[data-theme] #email-verify-alert .resend-btn { background: var(--ux-primary) !important; color: var(--ux-primary-ink) !important; border: 0 !important; border-radius: 9px !important; font-weight: 700 !important; }
html[data-theme] #email-verify-alert .close-btn { background: transparent !important; color: inherit !important; border: 0 !important; }

/* app footer (admin linkleri) */
html[data-theme] .app-footer { background: transparent !important; border-top: 1px solid var(--ux-line) !important; color: var(--ux-muted) !important; padding: 22px 34px !important; }
html[data-theme] .app-footer-title { color: var(--ux-ink) !important; font-weight: 800 !important; font-size: 13px !important; }
html[data-theme] .app-footer-link { color: var(--ux-text-2) !important; font-size: 13.5px !important; }
html[data-theme] .app-footer-link:hover { color: var(--ux-primary-text) !important; }

/* =====================================================================
   PANEL BİLEŞENLERİ (akordiyon hariç)
   ===================================================================== */
/* CARD */
html[data-theme] .card:not([class*="uda"]):not(:is(.uda-list, .uda-accordion-container) *) {
  background: var(--ux-surface) !important; background-image: none !important; border: 1px solid var(--ux-line) !important; border-radius: 16px !important;
  box-shadow: var(--ux-shadow-1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 22px 24px !important; margin-bottom: 20px !important; color: var(--ux-text) !important;
}
html[data-theme] .card:not([class*="uda"]):not(:is(.uda-list, .uda-accordion-container) *):hover { transform: none !important; }
html[data-theme] .card:not(:is(.uda-list, .uda-accordion-container) *) > h3:first-child,
html[data-theme] .ux-card-head h3 { font-size: 16.5px !important; font-weight: 800 !important; color: var(--ux-ink) !important; margin: 0 0 14px !important; letter-spacing: -0.015em !important; }
.ux-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ux-card-head h3 { margin: 0 !important; }
.ux-count { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--ux-surface-2); color: var(--ux-text-2); font-size: 12.5px; font-weight: 800; display: inline-grid; place-items: center; }

/* BUTTONS (eski .btn sınıfı, akordiyon dışı) */
html[data-theme] .btn:not(:is(.uda-list, .uda-accordion-container) *) {
  display: inline-flex !important; align-items: center !important; justify-content: center; gap: 7px !important; min-height: 38px; padding: 0 14px !important;
  border-radius: 10px !important; font-family: var(--ux-font) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important;
  transform: none !important; box-shadow: none !important; transition: background-color .15s, border-color .15s, color .15s !important; text-decoration: none !important; cursor: pointer; white-space: nowrap;
}
html[data-theme] .btn:not(:is(.uda-list, .uda-accordion-container) *) svg { width: 16px !important; height: 16px !important; }
html[data-theme] .btn-primary:not(:is(.uda-list, .uda-accordion-container) *) { background: var(--ux-primary) !important; background-image: none !important; border: 1px solid var(--ux-primary) !important; color: var(--ux-primary-ink) !important; }
html[data-theme] .btn-primary:not(:is(.uda-list, .uda-accordion-container) *):hover { background: var(--ux-primary-hover) !important; border-color: var(--ux-primary-hover) !important; }
html[data-theme] .btn-outline:not(:is(.uda-list, .uda-accordion-container) *), html[data-theme] .btn-secondary:not(:is(.uda-list, .uda-accordion-container) *) {
  background: var(--ux-surface) !important; background-image: none !important; border: 1px solid var(--ux-line-2) !important; color: var(--ux-ink) !important;
}
html[data-theme] .btn-outline:not(:is(.uda-list, .uda-accordion-container) *):hover, html[data-theme] .btn-secondary:not(:is(.uda-list, .uda-accordion-container) *):hover { background: var(--ux-surface-2) !important; border-color: var(--ux-ink) !important; }
html[data-theme] .btn-danger-ghost:not(:is(.uda-list, .uda-accordion-container) *), html[data-theme] .btn[style*="--danger"]:not(:is(.uda-list, .uda-accordion-container) *) { color: var(--ux-danger) !important; }
html[data-theme] .btn-danger-ghost:not(:is(.uda-list, .uda-accordion-container) *):hover { background: var(--ux-danger-soft) !important; border-color: color-mix(in srgb, var(--ux-danger) 40%, transparent) !important; }
html[data-theme] .btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
html[data-theme] :is(.btn, .ux-btn, .card, .ux-stat)[style*="display:none"], html[data-theme] :is(.btn, .ux-btn, .card, .ux-stat)[style*="display: none"] { display: none !important; }
html[data-theme] .btn-sm { min-height: 32px !important; padding: 0 10px !important; font-size: 13px !important; }
html[data-theme] .btn-close { width: 36px; height: 36px; border-radius: 10px !important; border: 1px solid var(--ux-line) !important; background: var(--ux-surface) !important; color: var(--ux-ink) !important; font-size: 20px !important; line-height: 1; opacity: 1 !important; display: grid; place-items: center; }
/* tablo satır içi kompakt butonlar (inline padding'i ez) */
html[data-theme] :is(td, .doc-actions, .student-actions) > .btn,
html[data-theme] :is(.doc-actions, .student-actions) .btn { min-height: 32px !important; padding: 0 10px !important; font-size: 13px !important; border-radius: 9px !important; }

/* FORMS (akordiyon dışı) */
html[data-theme] .main-content :is(.form-group, .profile-form) label:not(:is(.uda-list, .uda-accordion-container) *),
html[data-theme] .modal-overlay .form-group label { display: block; font-family: var(--ux-font) !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--ux-ink) !important; margin-bottom: 7px !important; }
html[data-theme] :is(.main-content, .modal-overlay) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):not(:is(.uda-list, .uda-accordion-container) *):not(.ql-editor *) {
  width: 100%; min-height: 44px; padding: 10px 13px !important; border-radius: 11px !important; border: 1.5px solid var(--ux-line-2) !important;
  background: var(--ux-surface) !important; background-color: var(--ux-surface) !important; color: var(--ux-ink) !important; font-family: var(--ux-font) !important; font-size: 14.5px !important;
  box-shadow: none !important; backdrop-filter: none !important; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
html[data-theme] :is(.main-content, .modal-overlay) textarea:not(:is(.uda-list, .uda-accordion-container) *) { min-height: 96px; line-height: 1.5; }
html[data-theme] :is(.main-content, .modal-overlay) :is(input, select, textarea):not(:is(.uda-list, .uda-accordion-container) *):focus { border-color: var(--ux-primary) !important; box-shadow: 0 0 0 4px var(--ux-ring) !important; outline: 0 !important; }
html[data-theme] :is(.main-content, .modal-overlay) :is(input, textarea):not(:is(.uda-list, .uda-accordion-container) *)::placeholder { color: var(--ux-muted) !important; opacity: .85; }
html[data-theme] :is(.main-content, .modal-overlay) :is(input, select):not(:is(.uda-list, .uda-accordion-container) *):disabled,
html[data-theme] :is(.main-content) input[readonly]:not(:is(.uda-list, .uda-accordion-container) *) { background: var(--ux-surface-2) !important; color: var(--ux-muted) !important; }
html[data-theme] input[type=checkbox], html[data-theme] input[type=radio] { accent-color: var(--ux-primary); }
html[data-theme] .main-content .form-group:not(:is(.uda-list, .uda-accordion-container) *) { margin-bottom: 16px !important; }
html[data-theme] .grid-2 { gap: 16px !important; }

/* TABLES */
html[data-theme] .table-container:not(:is(.uda-list, .uda-accordion-container) *) { border: 1px solid var(--ux-line) !important; border-radius: 12px !important; overflow: auto !important; background: var(--ux-surface) !important; box-shadow: none !important; margin-top: 4px !important; }
html[data-theme] .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; font-size: 14px; }
html[data-theme] .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) th {
  background: var(--ux-surface-2) !important; color: var(--ux-muted) !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 14px !important; border-bottom: 1px solid var(--ux-line) !important; text-align: left; white-space: nowrap; font-family: var(--ux-font) !important;
}
html[data-theme] .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) td { padding: 13px 14px !important; border-bottom: 1px solid var(--ux-line) !important; color: var(--ux-text) !important; background: transparent !important; vertical-align: middle; }
html[data-theme] .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) tbody tr:last-child td { border-bottom: 0 !important; }
html[data-theme] .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) tbody tr:hover td { background: color-mix(in srgb, var(--ux-primary-soft) 45%, transparent) !important; }
html[data-theme] .student-name-cell strong { color: var(--ux-ink) !important; font-weight: 700 !important; }
html[data-theme] .doc-actions, html[data-theme] .student-actions { display: flex !important; gap: 6px !important; flex-wrap: wrap; }
html[data-theme] td.empty-state { text-align: center; color: var(--ux-muted) !important; padding: 30px 14px !important; }
.ux-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; }
.ux-empty svg { width: 34px !important; height: 34px !important; color: var(--ux-primary-text); padding: 8px; border-radius: 12px; background: var(--ux-primary-soft); margin-bottom: 4px; box-sizing: content-box; }
.ux-empty strong { color: var(--ux-ink); font-size: 15.5px; }
.ux-empty span { color: var(--ux-muted); font-size: 14px; margin-bottom: 8px; }
html[data-theme] tr.ux-empty-row:hover td { background: transparent !important; }

/* STATS */
.ux-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.ux-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--ux-surface); border: 1px solid var(--ux-line); box-shadow: var(--ux-shadow-1); text-align: left; font-family: var(--ux-font); color: var(--ux-text); }
.ux-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ux-ink); line-height: 1.15; letter-spacing: -0.02em; }
.ux-stat small { font-size: 13px; color: var(--ux-muted); font-weight: 600; }
.ux-stat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ux-primary-soft); color: var(--ux-primary-text); flex-shrink: 0; }
.ux-stat-icon svg { width: 22px !important; height: 22px !important; }
.ux-tone-2 { background: #e8effd; color: #2453b8; }
.ux-tone-3 { background: var(--ux-accent-soft); color: var(--ux-warn); }
html[data-theme="dark"] .ux-tone-2 { background: rgba(96,165,250,.12); color: #93c5fd; }
.ux-stat-action { cursor: pointer; border: 1px dashed var(--ux-line-2); background: transparent; box-shadow: none; transition: border-color .15s, background-color .15s; }
.ux-stat-action b { font-size: 16.5px; }
.ux-stat-action:hover { border-color: var(--ux-primary); border-style: solid; background: var(--ux-surface); }
.ux-stat-go { margin-left: auto; width: 18px !important; height: 18px !important; color: var(--ux-muted); }
/* eski stat-card (admin) */
html[data-theme] .stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 14px !important; margin: 0 0 22px !important; }
html[data-theme] .stat-card:not(:is(.uda-list, .uda-accordion-container) *) { background: var(--ux-surface) !important; background-image: none !important; border: 1px solid var(--ux-line) !important; border-radius: 16px !important; padding: 18px 20px !important; box-shadow: var(--ux-shadow-1) !important; backdrop-filter: none !important; position: relative; overflow: hidden; }
html[data-theme] .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ux-primary); }
html[data-theme] .stat-card::after { display: none !important; }
html[data-theme] .stat-value { font-size: 28px !important; font-weight: 800 !important; color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; letter-spacing: -0.03em; font-family: var(--ux-font) !important; }
html[data-theme] .stat-label { color: var(--ux-muted) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* BADGE / TEXT */
html[data-theme] .badge:not(:is(.uda-list, .uda-accordion-container) *) { display: inline-flex; align-items: center; padding: 3px 9px !important; border-radius: 99px !important; font-size: 12px !important; font-weight: 700 !important; background: var(--ux-surface-2) !important; color: var(--ux-text-2) !important; border: 1px solid var(--ux-line) !important; }
html[data-theme] .badge-primary { background: var(--ux-primary-soft) !important; color: var(--ux-primary-text) !important; border-color: transparent !important; }
html[data-theme] .text-muted:not(:is(.uda-list, .uda-accordion-container) *) { color: var(--ux-muted) !important; }
html[data-theme] .text-danger { color: var(--ux-danger) !important; }
html[data-theme] .text-success { color: var(--ux-success) !important; }
html[data-theme] .main-content code { background: var(--ux-surface-2); color: var(--ux-ink); padding: 2px 6px; border-radius: 6px; font-size: .88em; }

/* MODAL */
html[data-theme] .modal-overlay { background: rgba(8, 13, 24, .55) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
html[data-theme] .modal-overlay > .card, html[data-theme] .modal-overlay .modal-card, html[data-theme] .modal-overlay > div:not(.card) {
  border-radius: 20px !important; box-shadow: var(--ux-shadow-3) !important; border: 1px solid var(--ux-line) !important; background: var(--ux-surface) !important; color: var(--ux-text) !important;
}
html[data-theme] .modal-overlay > .card { padding: 26px !important; }
html[data-theme] .modal-overlay h2 { font-size: 20px !important; font-weight: 800 !important; color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; margin: 0 !important; }

/* =====================================================================
   BEP OLUŞTURMA — stepper + adım kartları
   ===================================================================== */
.ux-stepper { list-style: none; padding: 6px; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--ux-surface); border: 1px solid var(--ux-line); border-radius: 14px; box-shadow: var(--ux-shadow-1); }
.ux-stepper li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ux-muted); min-width: 0; }
.ux-stepper li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-stepper li b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--ux-surface-2); color: var(--ux-muted); flex-shrink: 0; }
.ux-stepper li.is-done b { background: var(--ux-primary); color: var(--ux-primary-ink); }
.ux-stepper li.is-done { color: var(--ux-text); }
.ux-stepper li.is-active { background: var(--ux-primary-soft); color: var(--ux-ink); }
.ux-stepper li.is-active b { background: var(--ux-ink); color: var(--ux-bg); }
html[data-theme] .card.ux-step-card { padding: 24px !important; }
.ux-step-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ux-line); }
.ux-step-card-head h3 { margin: 0 0 2px !important; font-size: 17px !important; font-weight: 800 !important; color: var(--ux-ink) !important; }
.ux-step-card-head p { margin: 0 !important; font-size: 14px; color: var(--ux-muted); }
.ux-step-badge { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ux-ink); color: var(--ux-bg); font-weight: 800; flex-shrink: 0; }
.ux-actionbar { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ux-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--ux-line-2); box-shadow: var(--ux-shadow-2); }
.ux-actionbar-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; flex: 1; }
.ux-actionbar-info span { font-size: 13px; color: var(--ux-muted); flex: 1; min-width: 200px; }
html[data-theme] #bep-save-btn { min-height: 46px !important; padding: 0 20px !important; font-size: 15px !important; }

/* =====================================================================
   DİĞER PANEL SAYFALARI (duyuru, bildirim, belgeler, destek, blog)
   ===================================================================== */
html[data-theme] :is(.duyuru-list-card, .duyuru-detail-card, .bildirim-list-card, .doc-card, .doc-stats-card, .support-page-header, .blog-card, .blog-featured, .doc-empty-card):not(:is(.uda-list, .uda-accordion-container) *) {
  background: var(--ux-surface) !important; background-image: none !important; border: 1px solid var(--ux-line) !important; border-radius: 16px !important; box-shadow: var(--ux-shadow-1) !important; color: var(--ux-text) !important;
}
html[data-theme] :is(.duyuru-page-header, .duyuru-page-header-pro) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 20px !important; }
html[data-theme] :is(.duyuru-page-title, .duyuru-detail-title) { color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; font-weight: 800 !important; }
html[data-theme] :is(.duyuru-page-desc, .duyuru-item-date, .duyuru-detail-date, .doc-card-category, .doc-card-date) { color: var(--ux-muted) !important; }
html[data-theme] .duyuru-item { border-color: var(--ux-line) !important; background: transparent !important; border-radius: 12px !important; }
html[data-theme] .duyuru-item:hover { background: var(--ux-surface-2) !important; }
html[data-theme] .duyuru-item-title, html[data-theme] .doc-card-name { color: var(--ux-ink) !important; }
html[data-theme] :is(.duyuru-filter-btn, .doc-folder-btn, .doc-category-btn, .blog-cat-btn, .admin-sort-btn) { background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; color: var(--ux-text-2) !important; border-radius: 99px !important; font-weight: 700 !important; font-family: var(--ux-font) !important; box-shadow: none !important; }
html[data-theme] :is(.duyuru-filter-btn, .doc-folder-btn, .doc-category-btn, .blog-cat-btn).active { background: var(--ux-ink) !important; color: var(--ux-bg) !important; border-color: var(--ux-ink) !important; }
html[data-theme] .duyuru-badge-new { background: var(--ux-accent) !important; color: #2b1a00 !important; }
html[data-theme] .ql-toolbar.ql-snow, html[data-theme] .ql-container.ql-snow { border-color: var(--ux-line-2) !important; }
html[data-theme] .ql-toolbar.ql-snow { border-radius: 11px 11px 0 0; background: var(--ux-surface-2); }
html[data-theme] .ql-container.ql-snow { border-radius: 0 0 11px 11px; background: var(--ux-surface); color: var(--ux-ink); font-family: var(--ux-font) !important; }

/* =====================================================================
   PUBLIC İÇERİK SAYFALARI (bh-doc yasal/bilgi, blog, 404)
   ===================================================================== */
html[data-theme] .bh-doc-page { background: var(--ux-bg) !important; color: var(--ux-text) !important; font-family: var(--ux-font) !important; }
html[data-theme] .bh-doc-header { background: color-mix(in srgb, var(--ux-bg) 85%, transparent) !important; border-bottom: 1px solid var(--ux-line) !important; backdrop-filter: blur(12px); }
html[data-theme] .bh-doc-brand { color: var(--ux-ink) !important; font-weight: 800 !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html[data-theme] .bh-doc-hero { background: var(--ux-side-bg) !important; background-image: radial-gradient(500px 260px at 90% 0%, rgba(45,212,191,.25), transparent 70%) !important; color: #c9d2de !important; border: 0 !important; }
html[data-theme] .bh-doc-hero h1 { color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; letter-spacing: -0.035em !important; }
html[data-theme] :is(.bh-doc-lead, .bh-doc-crumbs, .bh-doc-crumbs a) { color: #b4bfcd !important; }
html[data-theme] .bh-doc-chips > * { background: rgba(255,255,255,.08) !important; color: #dbe3ec !important; border: 1px solid rgba(255,255,255,.12) !important; }
html[data-theme] :is(.bh-doc-toc, .bh-doc-content, .bh-doc-related, .bh-doc-cta) { background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; border-radius: 16px !important; box-shadow: var(--ux-shadow-1) !important; color: var(--ux-text) !important; }
html[data-theme] .bh-doc-content :is(h2, h3) { color: var(--ux-ink) !important; }
html[data-theme] .bh-doc-content a, html[data-theme] .bh-doc-toc a, html[data-theme] .bh-doc-related a { color: var(--ux-primary-text) !important; }
html[data-theme] :is(.bh-doc-btn-primary) { background: var(--ux-primary) !important; background-image: none !important; color: var(--ux-primary-ink) !important; -webkit-text-fill-color: var(--ux-primary-ink) !important; border-color: var(--ux-primary) !important; border-radius: 10px !important; }
html[data-theme] :is(.bh-doc-btn-ghost, .bh-doc-btn:not(.bh-doc-btn-primary)) { background: var(--ux-surface) !important; color: var(--ux-ink) !important; border: 1px solid var(--ux-line-2) !important; border-radius: 10px !important; }
html[data-theme] .landing-main { padding-top: 0 !important; }
html[data-theme] :is(.landing-page, .landing-main) { background: var(--ux-bg) !important; background-image: none !important; color: var(--ux-text) !important; }
html[data-theme] .blog-hero { background: transparent !important; }
html[data-theme] .blog-hero h1 { color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme] .blog-hero .hero-badge { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 12px !important; border-radius: 999px !important; background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; color: var(--ux-primary-text) !important; font-weight: 700 !important; font-size: 13px !important; box-shadow: var(--ux-shadow-1) !important; }
html[data-theme] .blog-hero .hero-badge * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme] .blog-hero .hero-badge svg { width: 16px !important; height: 16px !important; }
html[data-theme] :is(.blog-card-title, .blog-feat-title) { color: var(--ux-ink) !important; }
html[data-theme] :is(.blog-card-badge, .blog-feat-badge) { background: var(--ux-primary-soft) !important; color: var(--ux-primary-text) !important; }
html[data-theme] .bh-notfound { font-family: var(--ux-font) !important; }
html[data-theme] .bh-notfound-code { color: var(--ux-primary-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }

/* =====================================================================
   MOBİL / TABLET — panel
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  html[data-theme] .layout { --sidebar-width: 236px; }
  html[data-theme] .main-content { padding: 22px 22px 36px !important; }
  .ux-topbar-greet strong { max-width: 180px; }
}
@media (max-width: 768px) {
  html[data-theme] .mobile-nav-wrapper { width: 0 !important; }
  html[data-theme] .mobile-header {
    height: 60px !important; background: color-mix(in srgb, var(--ux-surface) 94%, transparent) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--ux-line) !important; box-shadow: none !important; z-index: 70 !important;
  }
  html[data-theme] .mobile-brand { display: inline-flex !important; justify-content: center; color: var(--ux-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-size: inherit !important; }
  html[data-theme] .mobile-brand .ux-logo-mark { width: 30px; height: 30px; border-radius: 9px; }
  html[data-theme] .mobile-brand .ux-logo-text { font-size: 16.5px; }
  html[data-theme] :is(.mobile-hamburger, .mobile-user-menu-btn, .mobile-header-bildirim-btn, .mobile-header #theme-toggle-btn.theme-toggle) {
    width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 11px !important; border: 1px solid var(--ux-line) !important;
    background: var(--ux-surface) !important; color: var(--ux-ink) !important; box-shadow: none !important;
  }
  html[data-theme] :is(.mobile-hamburger, .mobile-user-menu-btn, .mobile-header-bildirim-btn) :is(i, svg) { color: var(--ux-ink) !important; stroke: var(--ux-ink) !important; }
  html[data-theme] .mobile-user-menu-dropdown { background: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; border-radius: 14px !important; box-shadow: var(--ux-shadow-3) !important; padding: 6px !important; }
  html[data-theme] .mobile-user-menu-item { color: var(--ux-ink) !important; background: transparent !important; border-radius: 9px !important; font-family: var(--ux-font) !important; font-weight: 600 !important; }
  html[data-theme] .mobile-user-menu-item:hover { background: var(--ux-surface-2) !important; }
  html[data-theme] .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; width: min(300px, 86vw) !important; min-width: 0 !important; max-width: 300px !important; z-index: 100 !important; transform: translateX(-105%) !important; transition: transform .28s cubic-bezier(.32,.72,0,1) !important; box-shadow: none !important; padding-top: max(18px, env(safe-area-inset-top)) !important; overflow-y: auto !important; }
  html[data-theme] .layout.mobile-drawer-open .sidebar { transform: none !important; box-shadow: 20px 0 60px rgba(0,0,0,.35) !important; }
  html[data-theme] .layout { flex-direction: column; }
  html[data-theme] .sidebar-backdrop { background: rgba(8,13,24,.55) !important; backdrop-filter: blur(2px); }
  html[data-theme] .main-content { padding: 22px 14px max(28px, env(safe-area-inset-bottom)) !important; }
  html[data-theme] .layout-body { padding-top: 60px !important; }
  html[data-theme] .main-content > h1, .ux-page-head h1, html[data-theme] .students-page-title, html[data-theme] .bep-page-title { font-size: 22px !important; text-align: left !important; padding: 0 !important; }
  html[data-theme] .layout-body .panel-header.ux-topbar { display: none !important; }
  html[data-theme] #app .ux-page-sub { text-align: left; }
  .ux-page-head, html[data-theme] .students-page-header, html[data-theme] .bep-page-header { align-items: stretch !important; flex-direction: column; margin-bottom: 16px !important; }
  html[data-theme] .students-page-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  html[data-theme] .students-page-actions .btn { width: 100%; }
  .ux-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ux-stat { padding: 13px 14px; gap: 10px; }
  .ux-stat-icon { width: 40px; height: 40px; border-radius: 11px; }
  .ux-stat b { font-size: 19px; }
  .ux-stat-action { grid-column: 1 / -1; }
  html[data-theme] .card:not([class*="uda"]):not(:is(.uda-list, .uda-accordion-container) *) { padding: 16px !important; border-radius: 14px !important; }
  html[data-theme] .card.ux-step-card { padding: 16px !important; }
  .ux-stepper { grid-template-columns: repeat(4, auto); overflow-x: auto; scrollbar-width: none; }
  .ux-stepper li { padding: 8px; }
  .ux-stepper li:not(.is-active) span { display: none; }
  .ux-actionbar { bottom: 8px; padding: 12px; }
  .ux-actionbar-info span { display: none; }
  .ux-actionbar .btn, .ux-actionbar-info { width: 100%; }
  html[data-theme] .grid-2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  html[data-theme] .app-footer { padding: 18px 14px !important; }

  /* tablo → kart (öğrenciler, hazırlanan belgeler) */
  html[data-theme] #app :is(.students-table-container, .prepared-docs-table-container) { border: 0 !important; background: transparent !important; overflow: visible !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) thead { display: none !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) tbody { display: grid !important; gap: 10px; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) tr {
    display: grid !important; grid-template-columns: 26px 1fr; align-items: center; column-gap: 10px; row-gap: 6px;
    padding: 14px !important; margin: 0 !important; border: 1px solid var(--ux-line) !important; border-radius: 14px !important; background: var(--ux-surface) !important; box-shadow: none !important;
  }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) tr::after { display: none !important; content: none !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td { display: block !important; float: none !important; padding: 0 !important; border: 0 !important; min-width: 0; font-size: 13.5px !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td:first-child { grid-row: 1; grid-column: 1; display: flex !important; align-items: center; margin: 0 !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td:nth-child(2) { grid-row: 1; grid-column: 2; font-size: 15px !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td:nth-child(n+3) { grid-column: 1 / -1; }
  html[data-theme] #app .prepared-docs-table td:nth-child(3) { color: var(--ux-muted) !important; overflow-wrap: anywhere; padding-bottom: 4px !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td.hide-on-mobile { display: none !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td input[type=checkbox] { width: 18px !important; height: 18px !important; margin: 0 !important; }
  html[data-theme] #app :is(.doc-actions, .student-actions) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px !important; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ux-line); }
  html[data-theme] #app :is(.doc-actions, .student-actions) .btn { width: 100%; min-height: 38px !important; padding: 0 6px !important; font-size: 12.5px !important; gap: 5px !important; }
  html[data-theme] #app .prepared-docs-table .doc-actions { grid-template-columns: 1fr 1fr; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) td::before { content: none !important; display: none !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) tr.ux-empty-row { display: block !important; }
  html[data-theme] #app :is(.students-table, .prepared-docs-table) tr.ux-empty-row td { display: block !important; }
  html[data-theme] #app .main-content table:not(.bep-table):not(:is(.uda-list, .uda-accordion-container) *) tbody tr:hover td { background: transparent !important; }
}
@media (max-width: 340px) {
  .ux-stats { grid-template-columns: 1fr; }
  html[data-theme] .students-page-actions { grid-template-columns: 1fr; }
}

/* =====================================================================
   UDA/KDA AKORDİYON KİLİDİ — kullanıcı onaylı eski görünüm (DOKUNMA)
   theme-pro.css (v24) body token'ları + style.css tema token'ları geri yüklenir.
   ===================================================================== */
html[data-theme] body :is(.uda-list, .uda-accordion-list, .uda-accordion-container) {
  --bs-primary:var(--ds-primary-2); --bs-body-bg:#f1f5f9; --bs-body-color:#0f172a; --bs-border-color:#e2e8f0; --bs-link-color:var(--ds-primary-2); --bs-link-hover-color:var(--ds-primary-ink);
  --bs-font-sans-serif:'Inter',system-ui,-apple-system,sans-serif;
  --primary:var(--ds-primary-2); --primary-hover:var(--ds-primary-ink); --primary-glow:rgba(20,184,166,.12); --primary-light:var(--ds-primary-soft);
  --surface:#fff; --surface-hover:#f8fafc; --bg:#f1f5f9; --background:#f1f5f9;
  --text:#0f172a; --text-secondary:#334155; --text-muted:#64748b; --border:#e2e8f0; --border-hover:#cbd5e1;
  --success:#059669; --warning:#d97706; --danger:#dc2626; --sidebar-width:260px; --radius:10px; --radius-sm:8px; --radius-lg:16px;
  --bg-card: initial; --bg-muted: initial; --border-color: initial;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14.0625px; line-height: 1.6;
  letter-spacing: normal;
}
html[data-theme="light"] body :is(.uda-list, .uda-accordion-list, .uda-accordion-container) { color: #0f172a; }
html[data-theme="dark"] body :is(.uda-list, .uda-accordion-list, .uda-accordion-container) { color: rgb(229, 238, 251); }
html[data-theme="light"] body :is(.uda-list, .uda-accordion-list, .uda-accordion-container) {
  --background-secondary:#eef4fb; --surface-elevated:#ffffff; --border-active:rgba(14,165,233,0.45);
  --shadow:0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-lg:0 12px 32px -8px rgba(16,24,40,0.10), 0 4px 12px -4px rgba(16,24,40,0.06);
  --shadow-glow:0 6px 24px -8px rgba(14,165,233,0.28);
  --shadow-btn:0 1px 2px rgba(14,165,233,0.20), 0 4px 12px -2px rgba(20,184,166,0.24);
  --gradient-primary:linear-gradient(135deg, #22d3ee 0%, #0ea5e9 52%, var(--ds-primary-2) 100%);
  --gradient-bg:linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  --gradient-surface:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
html[data-theme="dark"] body :is(.uda-list, .uda-accordion-list, .uda-accordion-container) {
  --background-secondary:#161822; --surface-elevated:#232842; --border-active:rgba(99,102,241,0.4);
  --shadow:0 4px 20px rgba(0,0,0,0.25); --shadow-lg:0 20px 50px rgba(0,0,0,0.4);
  --shadow-glow:0 0 40px rgba(99,102,241,0.2); --shadow-btn:0 4px 14px rgba(99,102,241,0.35);
  --gradient-primary:linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
  --gradient-bg:linear-gradient(135deg, #0f1117 0%, #141728 50%, #0f1117 100%);
  --gradient-surface:linear-gradient(135deg, rgba(26,29,46,0.8), rgba(30,34,56,0.8));
}

/* Başlık boyutlarını eski h1/h2 mobil kurallarına karşı kilitle */
html[data-theme] #app .ux-hero-title { font-size: clamp(34px, 5.2vw, 56px) !important; line-height: 1.06 !important; }
html[data-theme] #app .ux-section-head h2, html[data-theme] #app .ux-sample-copy h2 { font-size: clamp(27px, 3.4vw, 38px) !important; line-height: 1.15 !important; }
html[data-theme] #app .ux-cta-card h2 { font-size: clamp(25px, 3vw, 34px) !important; line-height: 1.15 !important; }
html[data-theme] #app .ux-auth-side-body h2 { font-size: clamp(28px, 2.8vw, 38px) !important; line-height: 1.12 !important; }
html[data-theme] #app .ux-auth-card h1 { font-size: 30px !important; }
@media (max-width: 960px) { html[data-theme] #app .ux-auth-card h1 { font-size: 26px !important; } }
html[data-theme] #app :is(.ux-step, .ux-feature, .ux-compare-col) h3 { font-size: 17px !important; }
html[data-theme] #app .ux-feature-lg h3 { font-size: 22px !important; }
html[data-theme] #app .ux-compare-col h3 { font-size: 18px !important; }
html[data-theme] #app .ux-faq-item summary { font-size: 16px !important; }

.ux-bento > .ux-feature:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
.ux-bento > .ux-feature:last-child .ux-feature-icon { grid-row: span 2; margin: 0; }
.ux-bento > .ux-feature:last-child h3 { margin: 0 0 2px !important; }
@media (max-width: 720px) { .ux-bento > .ux-feature:last-child { display: block; } .ux-bento > .ux-feature:last-child .ux-feature-icon { margin-bottom: 18px; } }
html[data-theme] .main-content table td:has(> .btn) { white-space: nowrap; }
html[data-theme] .main-content table td > .btn + .btn { margin-left: 4px; }
html[data-theme] .main-content > h1 + .card, html[data-theme] .main-content > h1 + p { margin-top: 6px !important; }