/* ================================================================
   YEAPPLMS SPA — Modern UI v3.0
   Referans tasarım dili: temiz, profesyonel, tutarlı
   ================================================================ */

/* P-11: Font @import BURADAN KALDIRILDI.
   Aynı font zaten spa-loader.php içinde wp_enqueue_style ile yükleniyordu —
   yani iki kez indiriliyordu. Ayrıca CSS içindeki @import, tarayıcının önce
   app.css'i indirip ayrıştırmasını, ardından font isteğini başlatmasını
   gerektiren bir "render-blocking zincir" oluşturur ve <link rel="preconnect">
   ipucunu işlevsiz kılar. Font tek noktadan (spa-loader) yüklenir. */

/* ── Renk Sistemi ────────────────────────────────────────────────── */
:root {
  /* Sidebar */
  --c-sidebar-w:   240px;
  --c-sidebar-bg:  #3b1fa3;
  --c-sidebar-hover: rgba(255,255,255,.1);
  --c-sidebar-active: rgba(255,255,255,.18);

  /* Arkaplan & Yüzeyler */
  --c-bg:       #f4f5f9;
  --c-surface:  #ffffff;
  --c-surface2: #f8f9fc;
  --c-surface3: #eef0f8;
  --c-border:   #e4e7ef;

  /* Metin */
  --c-text:     #1a1d2e;
  --c-text2:    #4b5268;
  --c-muted:    #8891b0;

  /* Vurgu */
  --c-accent:   #5b4fcf;
  --c-accent2:  #7c6fdf;
  --c-accent-bg:#eeedfb;

  /* Durum */
  --c-success:   #12b76a;
  --c-success-bg:#ecfdf5;
  --c-warning:   #f79009;
  --c-warning-bg:#fffaeb;
  --c-danger:    #ef4444;
  --c-danger-bg: #fef2f2;
  --c-info:      #3b82f6;
  --c-info-bg:   #eff6ff;

  /* T-01: Rozet/etiket üzerindeki YAZI renkleri.
     Açık zeminli rozetlerde (yeşil arka plan + koyu yeşil yazı) kontrastı
     sağlayan renkler. Karanlık modda bunların da değişmesi gerektiği için
     ayrı token oldular — eskiden inline stilde sabit kodluydular. */
  --c-success-text: #065f46;
  --c-warning-text: #92400e;
  --c-danger-text:  #991b1b;
  --c-info-text:    #1e40af;
  --c-success-soft: #6ee7b7;
  --c-warning-soft: #fde68a;

  /* T-01: Scratch marka renkleri (Scratch Cup, proje kartları).
     Marka kimliği olduğu için temayla değişmez, ama tek yerden yönetilir. */
  --c-scratch:      #ff7e26;
  --c-scratch-soft: #ffb380;
  --c-gold:         #ffd700;

  /* T-01: Koyu yüzeyler (sertifika önizleme, koyu kartlar) */
  --c-dark-1: #0f172a;
  --c-dark-2: #1e293b;
  --c-dark-3: #1a1a2e;

  /* Bileşen */
  --r-card:  .875rem;
  --r-btn:   .5rem;
  --r-input: .5rem;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
}

/* ── T-02: Karanlık Mod ──────────────────────────────────────────────
 *
 * Eklentide `data-theme` attribute'u JS tarafından set ediliyordu ve
 * templates/app/index.php içinde bir splash kuralı vardı — ama app.css'te
 * TEK BİR karanlık tema kuralı yoktu. Yani karanlık moda geçen kullanıcı
 * sadece açılış ekranının değiştiğini görüyor, uygulama beyaz kalıyordu.
 *
 * Artık token'lar yeniden tanımlanıyor. Inline stiller de var(--token,#hex)
 * biçiminde yazıldığı için karanlık modda otomatik olarak doğru rengi alıyor.
 *
 * Kontrast: metin/zemin çiftleri WCAG AA (4.5:1) hedeflenerek seçildi.
 */
html[data-theme="dark"] {
  --c-sidebar-bg:     #1a1633;
  --c-sidebar-hover:  rgba(255,255,255,.08);
  --c-sidebar-active: rgba(255,255,255,.14);

  --c-bg:       #0f1117;
  --c-surface:  #171a23;
  --c-surface2: #1e222d;
  --c-surface3: #252a38;
  --c-border:   #2f3545;

  --c-text:     #e8eaf2;
  --c-text2:    #b4bacb;
  --c-muted:    #8b93a8;

  --c-accent:    #8b80f0;
  --c-accent2:   #a79cf5;
  --c-accent-bg: #241f4d;

  --c-success:      #34d399;
  --c-success-bg:   #0d2f24;
  --c-success-text: #6ee7b7;
  --c-success-soft: #065f46;

  --c-warning:      #fbbf24;
  --c-warning-bg:   #33260a;
  --c-warning-text: #fcd34d;
  --c-warning-soft: #78350f;

  --c-danger:      #f87171;
  --c-danger-bg:   #3a1417;
  --c-danger-text: #fca5a5;

  --c-info:      #60a5fa;
  --c-info-bg:   #10243f;
  --c-info-text: #93c5fd;

  /* Koyu modda "koyu yüzey" token'ları biraz açılır ki zeminden ayrışsın */
  --c-dark-1: #1c2233;
  --c-dark-2: #262d40;
  --c-dark-3: #242038;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* Karanlık modda görselleri hafif yumuşat — parlak beyaz zeminli
   küçük resimler göz yorar. */
html[data-theme="dark"] .lms-card-img,
html[data-theme="dark"] img[src*="gravatar"] {
  filter: brightness(.92);
}

/* T-02: Sistem tercihi. Kullanıcı henüz seçim yapmadıysa (data-theme="auto")
   işletim sistemi ayarına uyulur. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --c-sidebar-bg: #1a1633;
    --c-bg:       #0f1117;
    --c-surface:  #171a23;
    --c-surface2: #1e222d;
    --c-surface3: #252a38;
    --c-border:   #2f3545;
    --c-text:     #e8eaf2;
    --c-text2:    #b4bacb;
    --c-muted:    #8b93a8;
    --c-accent:    #8b80f0;
    --c-accent2:   #a79cf5;
    --c-accent-bg: #241f4d;
    --c-success:      #34d399;
    --c-success-bg:   #0d2f24;
    --c-success-text: #6ee7b7;
    --c-warning:      #fbbf24;
    --c-warning-bg:   #33260a;
    --c-warning-text: #fcd34d;
    --c-danger:      #f87171;
    --c-danger-bg:   #3a1417;
    --c-danger-text: #fca5a5;
    --c-info:      #60a5fa;
    --c-info-bg:   #10243f;
    --c-dark-1: #1c2233;
    --c-dark-2: #262d40;
    color-scheme: dark;
  }
}


/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { opacity: .8; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── App Shell ───────────────────────────────────────────────────── */
#yeapplms-root { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.lms-sidebar {
  width: var(--c-sidebar-w);
  min-height: 100vh;
  background: var(--c-sidebar-bg);
  background: linear-gradient(175deg, #4a2fc0 0%, #3318a0 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
}
.lms-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 299;
  backdrop-filter: blur(2px);
}
.lms-sidebar-overlay.open { display: block; }
.lms-sidebar.open { transform: translateX(0) !important; }

/* Brand */
.lms-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.375rem 1.25rem 1.125rem;
  text-decoration: none;
  flex-shrink: 0;
}
.lms-brand:hover { opacity: 1; }
.lms-brand-icon {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.2);
  border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  letter-spacing: -.01em;
}
.lms-brand-name { font-size: .9375rem; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.2; }
.lms-brand-sub  { font-size: .625rem; color: rgba(255,255,255,.45); margin-top: .0625rem; }

/* Nav */
.lms-nav-section { padding: .25rem 0; flex: 1; }
.lms-nav-label {
  padding: .5rem 1.25rem .1875rem;
  font-size: .625rem; font-weight: 700;
  color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .1em;
}
.lms-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  margin: .125rem .625rem;
  border-radius: .625rem;
  color: rgba(255,255,255,.7);
  font-size: .8125rem; font-weight: 500;
  text-decoration: none;
  transition: background .14s, color .14s;
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 1.25rem);
  text-align: left;
  line-height: 1.4;
}
.lms-nav-item:hover  { background: var(--c-sidebar-hover); color: #fff; opacity: 1; text-decoration: none; }
.lms-nav-item.active { background: var(--c-sidebar-active); color: #fff; font-weight: 600; }
.lms-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; display: flex; align-items: center; }
.lms-nav-item.active .lms-nav-icon,
.lms-nav-item:hover  .lms-nav-icon { opacity: 1; }
/* S-08: Menüdeki okunmamış sayacı.
 *
 * Yeşil ve durgundu — "bilgi" gibi görünüyordu, "dikkat" gibi değil.
 * Kullanıcı hangi sayfada olursa olsun yeni bildirimi fark etmeli:
 *   - Kırmızı: eylem gerektiren durum
 *   - Nabız: hareket, göz otomatik yakalar
 */
.lms-nav-badge {
  margin-left: auto;
  background: var(--c-danger);
  color: #fff; font-size: .625rem; font-weight: 800;
  padding: .125rem .4375rem; border-radius: 99px; min-width: 18px; text-align: center;
  animation: lms-badge-pulse 2s ease-in-out infinite;
}

@keyframes lms-badge-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  50%      { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lms-nav-badge { animation: none; }
}

/* Sidebar footer */
.lms-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.lms-sidebar-user {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem; border-radius: .625rem;
  text-decoration: none; transition: background .14s; cursor: pointer;
  color: rgba(255,255,255,.8);
}
.lms-sidebar-user:hover { background: var(--c-sidebar-hover); opacity: 1; text-decoration: none; color: #fff; }
.lms-sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,.25); }
.lms-sidebar-user-name { font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.lms-sidebar-user-role { font-size: .625rem; color: rgba(255,255,255,.45); line-height: 1.2; margin-top: .0625rem; }

/* ── Content + Topbar ────────────────────────────────────────────── */
.lms-content { flex: 1; margin-left: var(--c-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.lms-topbar {
  height: 58px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-xs);
  gap: .75rem;
}
.lms-topbar-left  { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.lms-topbar-right { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.lms-topbar-title {
  font-size: .9375rem; font-weight: 700; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lms-hamburger {
  display: none; background: none; border: none;
  color: var(--c-text2); padding: .375rem; border-radius: .5rem;
  cursor: pointer; flex-shrink: 0;
}
.lms-topbar-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 2rem;
  padding: .375rem .875rem;
  min-width: 200px; max-width: 280px;
  transition: border-color .14s, box-shadow .14s;
}
.lms-topbar-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
}
.lms-topbar-search input {
  border: none; background: transparent;
  color: var(--c-text); font-size: .8125rem;
  outline: none; width: 100%;
}
.lms-topbar-search input::placeholder { color: var(--c-muted); }
.lms-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface2); border: 1px solid var(--c-border);
  color: var(--c-text2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .875rem; transition: all .14s; position: relative;
  flex-shrink: 0; text-decoration: none;
}
.lms-icon-btn:hover { background: var(--c-surface3); color: var(--c-text); opacity: 1; }
.lms-notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--c-danger); border-radius: 50%;
  border: 1.5px solid var(--c-surface);
}

/* ── Main ────────────────────────────────────────────────────────── */
.lms-main { flex: 1; padding: 1.5rem; max-width: 1280px; width: 100%; margin: 0 auto; }
.lms-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.lms-page-title { font-size: 1.25rem; font-weight: 800; color: var(--c-text); letter-spacing: -.02em; line-height: 1.25; }
.lms-page-subtitle { font-size: .8125rem; color: var(--c-muted); margin-top: .25rem; }

/* ── Cards ───────────────────────────────────────────────────────── */
.lms-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s;
}
.lms-card:hover { box-shadow: var(--shadow-md); }
.lms-card-body { padding: 1.25rem; }
.lms-card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
}
.lms-card-title { font-size: .9375rem; font-weight: 700; color: var(--c-text); }
.lms-card-img { width: 100%; height: 168px; object-fit: cover; display: block; }

/* ── Kurs Kartı ──────────────────────────────────────────────────── */
.lms-course-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  text-decoration: none; cursor: pointer;
}
.lms-course-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 6px 24px rgba(91,79,207,.14);
  transform: translateY(-2px);
  opacity: 1; text-decoration: none;
}
.lms-course-thumb {
  width: 100%; height: 168px; object-fit: cover;
  background: linear-gradient(135deg, var(--c-accent-bg), var(--c-surface3));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--c-muted); flex-shrink: 0;
}
.lms-course-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .375rem; }
.lms-course-cat { font-size: .6875rem; font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; }
.lms-course-name {
  font-size: .9375rem; font-weight: 700; color: var(--c-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lms-course-meta { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .125rem; }
.lms-course-meta-item { font-size: .75rem; color: var(--c-muted); display: flex; align-items: center; gap: .25rem; }
.lms-course-footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}

/* ── Progress ────────────────────────────────────────────────────── */
.lms-progress-wrap { background: var(--c-surface3); border-radius: 99px; height: 5px; overflow: hidden; }
.lms-progress-bar  { height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent2)); border-radius: 99px; transition: width .5s ease; }
.lms-progress-fill { height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent2)); border-radius: 99px; transition: width .5s ease; }

/* ── Stat Kartları ───────────────────────────────────────────────── */
.lms-stat {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: 1.125rem;
  display: flex; flex-direction: column; gap: .375rem;
  position: relative; overflow: hidden;
  transition: box-shadow .2s;
}
.lms-stat:hover { box-shadow: var(--shadow-md); }
.lms-stat::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stat-color, var(--c-accent));
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.lms-stat-label { font-size: .6875rem; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.lms-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.lms-stat-sub { font-size: .75rem; color: var(--c-success); font-weight: 600; }
.lms-stat-icon { position: absolute; right: .875rem; top: .875rem; font-size: 1.5rem; opacity: .1; }

/* XP Bar */
.lms-xp-bar-wrap { background: var(--c-surface3); border-radius: 99px; height: 8px; overflow: hidden; }
.lms-xp-bar { height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent2)); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.lms-welcome-card .lms-xp-bar-wrap { background: rgba(255,255,255,.25); }
.lms-welcome-card .lms-xp-bar { background: var(--c-surface); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.lms-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5625rem 1.125rem;
  border-radius: var(--r-btn); font-size: .875rem; font-weight: 600;
  border: none; cursor: pointer; transition: all .15s;
  text-decoration: none; line-height: 1.4; white-space: nowrap; font-family: inherit;
}
.lms-btn-primary {
  background: var(--c-accent); color: #fff;
  box-shadow: 0 2px 8px rgba(91,79,207,.3);
}
.lms-btn-primary:hover {
  background: var(--c-accent2); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(91,79,207,.35);
  color: #fff; opacity: 1; text-decoration: none;
}
.lms-btn-secondary {
  background: var(--c-surface); color: var(--c-text2);
  border: 1.5px solid var(--c-border);
}
.lms-btn-secondary:hover { background: var(--c-surface2); color: var(--c-text); opacity: 1; text-decoration: none; }
.lms-btn-ghost {
  background: transparent; color: var(--c-text2);
  border: 1.5px solid var(--c-border);
}
.lms-btn-ghost:hover { color: var(--c-text); border-color: var(--c-text2); opacity: 1; text-decoration: none; }
.lms-btn-success { background: var(--c-success); color: #fff; }
.lms-btn-success:hover { filter: brightness(1.08); color: #fff; opacity: 1; text-decoration: none; }
.lms-btn-danger  { background: var(--c-danger);  color: #fff; }
.lms-btn-danger:hover { filter: brightness(1.08); color: #fff; opacity: 1; text-decoration: none; }
.lms-btn-sm  { padding: .3125rem .75rem; font-size: .8125rem; border-radius: .4375rem; }
.lms-btn-lg  { padding: .75rem 1.5rem; font-size: .9375rem; border-radius: .625rem; }
.lms-btn-full { width: 100%; justify-content: center; }
.lms-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.lms-btn-loading { pointer-events: none; }
.lms-btn-loading::after {
  content: ''; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; margin-left: .25rem;
}

/* ── Form ────────────────────────────────────────────────────────── */
.lms-form-group { display: flex; flex-direction: column; gap: .375rem; }
.lms-label { font-size: .8125rem; font-weight: 600; color: var(--c-text2); }
.lms-label .req { color: var(--c-danger); margin-left: .2rem; }
.lms-input, .lms-select, .lms-textarea {
  background: var(--c-surface2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-input);
  padding: .5625rem .875rem;
  font-size: .875rem; color: var(--c-text);
  font-family: inherit; transition: border-color .14s, box-shadow .14s;
  outline: none; width: 100%;
}
.lms-input:focus, .lms-select:focus, .lms-textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
  background: var(--c-surface);
}
.lms-input::placeholder, .lms-textarea::placeholder { color: var(--c-muted); }
.lms-check-group { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; cursor: pointer; color: var(--c-text2); }
.lms-check-group input { accent-color: var(--c-accent); width: 16px; height: 16px; margin-top: .125rem; flex-shrink: 0; }

/* ── Badges ──────────────────────────────────────────────────────── */
.lms-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1875rem .5625rem; border-radius: 99px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
}
.lms-badge-accent  { background: var(--c-accent-bg);  color: var(--c-accent); }
.lms-badge-success { background: var(--c-success-bg); color: var(--c-success); }
.lms-badge-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.lms-badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger); }
.lms-badge-muted   { background: var(--c-surface3);   color: var(--c-muted); }
.lms-badge-info    { background: var(--c-info-bg);     color: var(--c-info); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.lms-alert { padding: .75rem 1rem; border-radius: .625rem; font-size: .875rem; display: flex; align-items: flex-start; gap: .625rem; border: 1px solid transparent; }
.lms-alert-success { background: var(--c-success-bg); border-color: rgba(18,183,106,.25); color: var(--c-success-text); }
.lms-alert-error   { background: var(--c-danger-bg);  border-color: rgba(239,68,68,.25);  color: var(--c-danger-text); }
.lms-alert-info    { background: var(--c-accent-bg);  border-color: rgba(91,79,207,.25);  color: var(--c-accent); }
.lms-alert-warning { background: var(--c-warning-bg); border-color: rgba(247,144,9,.25);  color: var(--c-warning-text); }

/* ── Auth Layout ─────────────────────────────────────────────────── */
.lms-auth-layout  { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.lms-auth-panel   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: var(--c-bg); }
.lms-auth-form    { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 1rem; padding: 2rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); }
.lms-auth-brand   { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 2rem; text-decoration: none; }
.lms-auth-logo    { width: 40px; height: 40px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent2)); border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 900; color: #fff; box-shadow: 0 4px 12px rgba(91,79,207,.35); }
.lms-auth-hero    { background: #1E1B4B; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 2rem; position: relative; overflow: hidden; }
.lms-auth-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.06) 0%, transparent 60%); pointer-events:none; z-index:1; }

/* Dönen fotoğraf slaytı */
.lms-hero-slideshow { position:absolute; inset:0; z-index:0; overflow:hidden; }
.lms-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  /* Her slide için farklı Ken Burns yönü */
  animation: heroFade var(--slide-dur, 28000ms) ease-in-out infinite;
}
.lms-hero-slide:nth-child(odd)  img { animation: kenBurnsZoomIn  var(--slide-dur, 28000ms) ease-in-out infinite; }
.lms-hero-slide:nth-child(even) img { animation: kenBurnsZoomOut var(--slide-dur, 28000ms) ease-in-out infinite; }
.lms-hero-slide img {
  width:100%; height:100%; object-fit:cover;
  display:block; border-radius:0 !important;
  transform-origin: center center;
}
.lms-hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(30,27,75,.72) 0%, rgba(79,70,229,.48) 100%);
  pointer-events: none;
}
/* Fade animasyonu - 28s slide süresi */
@keyframes heroFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Ken Burns: yavaş zoom-in (tek slaytlar) */
@keyframes kenBurnsZoomIn {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1.0) translate(0%, 0%); }
}
/* Ken Burns: yavaş zoom-out + hafif pan (çift slaytlar) */
@keyframes kenBurnsZoomOut {
  0%   { transform: scale(1.08) translate(1%, 0%); }
  50%  { transform: scale(1.0)  translate(0%, -1%); }
  100% { transform: scale(1.08) translate(1%, 0%); }
}
.lms-auth-title   { font-size: 1.25rem; font-weight: 800; color: var(--c-text); letter-spacing: -.02em; }
.lms-auth-subtitle{ font-size: .875rem; color: var(--c-muted); margin-top: .25rem; margin-bottom: 1.5rem; }
.lms-divider      { display: flex; align-items: center; gap: .875rem; color: var(--c-muted); font-size: .8125rem; margin: 1rem 0; }
.lms-divider::before, .lms-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

/* ── Avatars ─────────────────────────────────────────────────────── */
.lms-avatar { border-radius: 50%; object-fit: cover; display: block; }
.lms-avatar-sm { width: 28px; height: 28px; }
.lms-avatar-md { width: 40px; height: 40px; }
.lms-avatar-lg { width: 56px; height: 56px; }
.lms-avatar-xl { width: 80px; height: 80px; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.lms-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--c-border); margin-bottom: 1.5rem; }
.lms-tab  { padding: .5rem 1rem; font-size: .875rem; font-weight: 500; color: var(--c-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .14s; font-family: inherit; }
.lms-tab:hover  { color: var(--c-text); }
.lms-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 700; }
/* S-09: Klavye kullanıcısı hangi sekmede olduğunu görmeli.
   Genel focus kuralı sekmelerde kesiliyordu (border-bottom -2px). */
.lms-tab:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; border-radius: 4px; }

/* ── Grids ───────────────────────────────────────────────────────── */
/* ── Öğrenme Sayfası ─────────────────────────────────────────────── */
.lms-learn-wrap {
  display: flex;
  height: calc(100vh - 58px);
  overflow: hidden;
}
.lms-learn-sidebar {
  width: 300px; min-width: 300px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  overflow-y: auto; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.lms-learn-main   { flex: 1; overflow-y: auto; background: var(--c-bg); }
.lms-learn-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0;
  background: var(--c-surface); z-index: 10;
}

/* Ders tamamlanma göstergesi */

/* ── Player ──────────────────────────────────────────────────────── */
.lms-player-wrap { background: #000; border-radius: var(--r-card); overflow: hidden; position: relative; aspect-ratio: 16/9; }
.lms-player-wrap video, .lms-player-wrap iframe { width: 100%; height: 100%; border: none; }
.lms-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); cursor: pointer; transition: background .2s; }
.lms-play-overlay:hover { background: rgba(0,0,0,.15); }
.lms-play-btn { width: 60px; height: 60px; background: rgba(255,255,255,.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.3); transition: transform .2s; }
.lms-play-overlay:hover .lms-play-btn { transform: scale(1.08); }

/* ── Toast ───────────────────────────────────────────────────────── */
#lms-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; width: calc(100% - 2rem); pointer-events: none; }
.lms-toast {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: .75rem; padding: .875rem 1rem;
  font-size: .875rem; display: flex; align-items: center; gap: .625rem;
  box-shadow: var(--shadow-lg); color: var(--c-text);
  animation: slideInRight .25s ease;
  pointer-events: auto;
}
.lms-toast-success, .lms-toast.success { border-left-color: var(--c-success); }
.lms-toast-error,   .lms-toast.error   { border-left-color: var(--c-danger); }
.lms-toast-warning, .lms-toast.warning { border-left-color: var(--c-warning); }
.lms-toast.out { animation: slideOutRight .25s ease forwards; }

/* ── Skeleton ────────────────────────────────────────────────────── */
.lms-skeleton {
  background: linear-gradient(90deg, var(--c-surface2) 25%, var(--c-surface3) 50%, var(--c-surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: .5rem;
}

/* ── Leaderboard ─────────────────────────────────────────────────── */
.lms-lb-row { display: flex; align-items: center; gap: .875rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--c-border); transition: background .14s; }
.lms-lb-row:hover { background: var(--c-surface2); }
.lms-lb-rank { width: 2.25rem; text-align: center; font-size: .875rem; font-weight: 800; color: var(--c-muted); flex-shrink: 0; }
.lms-lb-rank.gold   { color: #f5c542; font-size: 1.125rem; }
.lms-lb-rank.silver { color: #b0b8c9; font-size: 1rem; }
.lms-lb-rank.bronze { color: #d08060; }

/* ── Certificate ─────────────────────────────────────────────────── */
.lms-cert { background: var(--c-surface); border: 2px solid var(--c-accent); border-radius: 1rem; padding: 3rem; text-align: center; color: var(--c-text); box-shadow: 0 12px 48px rgba(91,79,207,.12); }
.lms-cert-badge { width: 72px; height: 72px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; box-shadow: 0 4px 16px rgba(91,79,207,.3); }
.lms-cert-title { font-size: 1.875rem; font-weight: 800; color: var(--c-accent); }
.lms-cert-name  { font-size: 2rem; font-weight: 800; color: var(--c-text); margin: 1rem 0; }
.lms-cert-course{ font-size: 1.0625rem; color: var(--c-text2); }
.lms-cert-code  { font-family: monospace; font-size: .875rem; background: #f4f5f9; padding: .375rem .875rem; border-radius: .375rem; display: inline-block; margin-top: .75rem; color: var(--c-text2); }

/* ── Prose (Ders içeriği) ────────────────────────────────────────── */
.lms-prose { color: var(--c-text); line-height: 1.8; font-size: .9375rem; }
.lms-prose h1, .lms-prose h2, .lms-prose h3 { font-weight: 700; margin: 1.25rem 0 .75rem; line-height: 1.3; }
.lms-prose h1 { font-size: 1.5rem; }
.lms-prose h2 { font-size: 1.25rem; }
.lms-prose h3 { font-size: 1.0625rem; }
.lms-prose p  { margin-bottom: 1rem; }
.lms-prose ul, .lms-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.lms-prose li { margin-bottom: .375rem; }
.lms-prose img { max-width: 100%; border-radius: .5rem; margin: 1rem 0; }
.lms-prose a  { color: var(--c-accent); }
.lms-prose blockquote { border-left: 3px solid var(--c-accent); padding: .75rem 1rem; background: var(--c-accent-bg); border-radius: 0 .5rem .5rem 0; margin: 1rem 0; }
.lms-prose code { background: var(--c-surface3); padding: .125rem .375rem; border-radius: .25rem; font-size: .875em; font-family: monospace; color: var(--c-accent); }
.lms-prose pre  { background: var(--c-surface2); padding: 1rem; border-radius: .625rem; overflow-x: auto; margin: 1rem 0; }
.lms-prose pre code { background: none; padding: 0; color: var(--c-text); }
.lms-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; }
.lms-prose th, .lms-prose td { padding: .5rem .75rem; border: 1px solid var(--c-border); text-align: left; }
.lms-prose th { background: var(--c-surface2); font-weight: 700; }

/* ── Empty State ─────────────────────────────────────────────────── */
.lms-empty { text-align: center; padding: 4rem 2rem; color: var(--c-muted); }
.lms-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; }
.lms-empty h3 { font-size: 1rem; font-weight: 700; color: var(--c-text2); margin-bottom: .375rem; }
.lms-empty p  { font-size: .875rem; }

/* ── Dropdown ────────────────────────────────────────────────────── */
.lms-dropdown { position: relative; }
.lms-dropdown-menu { position: absolute; top: calc(100% + .375rem); right: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .75rem; padding: .375rem; min-width: 180px; box-shadow: var(--shadow-lg); z-index: 500; animation: fadeIn .15s ease; }
.lms-dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; color: var(--c-text2); cursor: pointer; transition: all .1s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; text-decoration: none; }
.lms-dropdown-item:hover { background: var(--c-surface2); color: var(--c-text); }
.lms-dropdown-item.danger { color: var(--c-danger); }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes spin          { to { transform: rotate(360deg); } }
@keyframes fadeIn        { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight  { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOutRight { to   { transform: translateX(110%); opacity: 0; } }
@keyframes shimmer       { 0%   { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.lms-fade-in { animation: fadeIn .25s ease; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lms-learn-sidebar { width: 260px; min-width: 260px; }
}
@media (max-width: 768px) {
  .lms-sidebar         { transform: translateX(-100%); }
  .lms-content         { margin-left: 0; }
  .lms-hamburger       { display: flex; }
  .lms-topbar-search   { display: none; }
  .lms-main            { padding: 1rem; }
  .lms-auth-layout     { grid-template-columns: 1fr; }
  .lms-auth-hero       { display: none; }
  .lms-learn-wrap      { flex-direction: column; }
  .lms-learn-sidebar   { width: 100%; min-width: 0; max-height: none; border-right: none; border-bottom: 1px solid var(--c-border); display: none; }
  .lms-learn-sidebar.open { display: block; max-height: 60vh; overflow-y: auto; }
  .lms-learn-toggle    { display: flex !important; }
}
@media (max-width: 480px) {
  .lms-topbar { padding: 0 1rem; }
}

/* ── Topbar özel butonlar ────────────────────────────────────────── */
/* JS'de ID olarak kullanılıyor, görsel class'a ihtiyaç yok */
/* Alias için */
#lms-logout-btn { /* .lms-nav-item stilleri uygulanıyor */ }
#lms-theme-btn  { /* .lms-icon-btn stilleri uygulanıyor */ }
.lms-logout-btn { /* .lms-nav-item stilleri */ }
.lms-theme-btn  { /* .lms-icon-btn stilleri */ }

/* ── Erişilebilirlik ─────────────────────────────────────────────── */

/*
 * A11Y-01: Odak göstergesi.
 *
 * Klavye kullanıcısı (Tab ile gezen) hangi öğede olduğunu görebilmelidir.
 * :focus-visible kullanılır çünkü :focus fare tıklamasında da tetiklenir ve
 * gereksiz halka gösterir. Kontrast için çift halka: dış koyu, iç beyaz —
 * hem açık hem koyu zeminde görünür.
 */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9);
  border-radius: var(--r-btn);
}

/* Koyu zeminli alanlarda (sidebar) iç halka koyu olmalı */
.lms-sidebar a:focus-visible,
.lms-sidebar button:focus-visible {
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .45);
}

/*
 * A11Y-02: Ekran okuyucuya özel metin.
 *
 * Görsel olarak gizli ama ekran okuyucu tarafından okunur. Simge-butonların
 * ("🔔", "☰") ne işe yaradığını anlatmak için kullanılır.
 * display:none veya visibility:hidden KULLANILMAZ — onlar ekran okuyucudan
 * da gizler.
 */
.lms-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * A11Y-03: "İçeriğe atla" bağlantısı.
 *
 * Klavye kullanıcısı her sayfada 15+ menü bağlantısını Tab'layarak geçmek
 * zorunda kalmasın. Normalde gizli, odaklanınca görünür.
 */
.lms-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s ease;
}
.lms-skip-link:focus {
  top: 0;
}

/*
 * A11Y-04: Hareket azaltma tercihi.
 *
 * İşletim sisteminde "hareketi azalt" seçen kullanıcılar (vestibüler
 * rahatsızlık, migren, dikkat dağınıklığı) animasyonlardan rahatsız olur.
 * Çocuk kullanıcılarda bu tercih daha da önemlidir.
 *
 * Animasyonlar tamamen kaldırılmaz — 0.01ms'ye indirilir; böylece
 * animationend/transitionend olaylarına bağlı JavaScript çalışmaya devam eder.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * A11Y-05: Yüksek kontrast tercihi.
 * Görme güçlüğü olan kullanıcılar için kenarlıkları belirginleştirir.
 */
@media (prefers-contrast: more) {
  .lms-card,
  .lms-input,
  .lms-select,
  .lms-btn {
    border-width: 2px;
  }
  :focus-visible {
    outline-width: 4px;
  }
}

/*
 * A11Y-06: Dokunmatik hedef boyutu.
 * WCAG 2.5.8 asgari 24×24 CSS piksel önerir. Çocuk kullanıcıların motor
 * becerileri gelişme aşamasında olduğu için simge butonlarda 44px hedeflenir.
 */
.lms-icon-btn,
.lms-btn-sm {
  min-width: 44px;
  min-height: 44px;
}

/* A11Y-07: Devre dışı öğeler imleçle de belli olsun */
[aria-disabled="true"],
button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ── Selection ───────────────────────────────────────────────────── */
::selection { background: var(--c-accent-bg); color: var(--c-accent); }

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .lms-sidebar, .lms-topbar { display: none !important; }
  .lms-content { margin-left: 0 !important; }
}

/* ── Öğrenme sayfası - progress label ─────────────── */
.lms-learn-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: .375rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.lms-breadcrumb {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--c-muted);
  margin-bottom: .625rem;
}
.lms-breadcrumb a {
  color: var(--c-muted);
  text-decoration: none;
  transition: color .14s;
}
.lms-breadcrumb a:hover { color: var(--c-accent); }
.lms-breadcrumb span { color: var(--c-text); font-weight: 500; }

/* ── Stat Cards ──────────────────────────────────────── */
.lms-stat-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.lms-stat-card .stat-val {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
}
.lms-stat-card .stat-lbl {
  font-size: .8125rem;
  color: var(--c-muted);
}
.lms-stat-card .stat-icon {
  font-size: 1.5rem;
  margin-bottom: .25rem;
}

/* ── Dashboard Tabs ──────────────────────────────────── */
.lms-tabs-wrap {
  border-bottom: 2px solid var(--c-border);
  display: flex;
  gap: 2px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.lms-tab {
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--c-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.lms-tab:hover { color: var(--c-text); }
.lms-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ── Profil Tamamlama ────────────────────────────────── */
.lms-profile-progress {
  background: linear-gradient(135deg, var(--c-accent-bg), #f0f9ff);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--r-card);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.lms-progress-bar-wrap {
  background: var(--c-border);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  margin: .625rem 0;
}
.lms-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--c-accent);
  transition: width .4s ease;
}

/* ── Course Card ─────────────────────────────────────── */
.lms-course-progress {
  height: 4px;
  background: var(--c-border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: .5rem;
}
.lms-course-progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 99px;
}

/* ── Welcome Card ────────────────────────────────────────── */
.lms-welcome-card * { color: #fff !important; }
.lms-welcome-card .opacity-muted { opacity: .8; }
.lms-welcome-card .lms-btn { color: var(--c-accent) !important; background: var(--c-surface) !important; }

/* ── Welcome Card ─────────────────────────────────── */
.lms-welcome-card{background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);border:none!important;border-radius:var(--r-card);padding:1.5rem;margin-bottom:1.25rem;box-shadow:0 4px 20px rgba(79,70,229,.3);overflow:hidden;position:relative}
.lms-welcome-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.lms-welcome-card *{color:#fff!important}
.lms-welcome-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.lms-welcome-title{font-size:1.25rem!important;font-weight:800!important;margin:0 0 .25rem!important;line-height:1.3}
.lms-welcome-sub{font-size:.875rem!important;opacity:.85;margin:0!important}
.lms-welcome-xp-badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:.5rem 1rem;text-align:center;flex-shrink:0;line-height:1.3}
.lms-welcome-xp-badge span{font-size:1.5rem!important;font-weight:800!important;display:block}
.lms-welcome-xp-badge small{font-size:.75rem!important;opacity:.8}
.lms-welcome-progress-labels{display:flex;justify-content:space-between;font-size:.75rem;opacity:.8;margin-bottom:.375rem}
.lms-welcome-bar-bg{background:rgba(255,255,255,.25);border-radius:99px;height:8px;overflow:hidden}
.lms-welcome-bar{height:100%;background:var(--c-surface);border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:4px}

/* ── Sertifika Kartları ────────────────────────────── */
.lms-cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.lms-cert-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.lms-cert-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(79,70,229,.12)}
.lms-cert-top{background:linear-gradient(135deg,var(--c-accent-bg,#EEF2FF) 0%,#f5f3ff 100%);padding:1.5rem;text-align:center;border-bottom:1px solid var(--c-border)}
.lms-cert-icon{font-size:2.5rem;margin-bottom:.5rem;animation:certWiggle 3s ease-in-out infinite;display:inline-block}
@keyframes certWiggle{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
.lms-cert-badge-label{font-size:.6875rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.375rem}
.lms-cert-course{font-size:.9375rem;font-weight:700;color:var(--c-accent);line-height:1.3}
.lms-cert-code{font-family:monospace;font-size:.6875rem;color:var(--c-muted);margin-top:.25rem}
.lms-cert-date{font-size:.8125rem;color:var(--c-muted);padding:.625rem 1rem 0}
.lms-cert-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.75rem 1rem .5rem}
.lms-cert-share{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0 1rem 1rem}

/* Kurs Detay - Responsive */
@media (max-width: 768px) {
  .lms-main div[style*="grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
  }
}
/* Module accordion - z-index ve overflow fix */
.lms-course-module { position: relative; z-index: 1; }
.lms-module-lessons { overflow: hidden; }

@media (max-width:900px) {
  .lms-main div[style*="grid-template-columns:1fr 340px"] {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}
/* Modül listesi - metin taşmasını önle */

/* Enroll kartı sticky */

/* Modül */

/* Video embed */
.lms-video-wrap { position: relative; padding-bottom: 56.25%; border-radius: var(--r-card); overflow: hidden; background: #000; margin-bottom: 1.25rem; }
.lms-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Quiz */

/* Games */
.yegames-card { cursor: pointer; }
#yegames-overlay { display: none; }

/* Module list overflow fix */

/* Quiz opt buttons */

/* Modül accordion */

.yegames-card {
  -webkit-transition: -webkit-transform .2s, -webkit-box-shadow .2s;
  transition: transform .2s, box-shadow .2s;
}
#yegames-overlay {
  display: none;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
#yegames-overlay.active { display: -webkit-box; display: -ms-flexbox; display: flex; }

/* Oyun merkezi shortcode grid responsive */
.yeapplms-game-center {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .yeapplms-game-center { grid-template-columns: 1fr; }
}

/* Dashboard kurs badge'leri */
.lms-badge-done {
  background: var(--c-success); color: #fff;
  font-size: .75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════
   PROFİL SAYFASI CSS DÜZELTMELERİ
═══════════════════════════════════════════════════════════ */
/* Avatar area */
.lms-profile-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.lms-profile-avatar-wrap img,
.lms-profile-avatar-wrap .lms-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Stats row */
.lms-profile-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.lms-stat {
  flex: 1;
  min-width: 90px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: .875rem;
  text-align: center;
}
.lms-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--stat-color, var(--c-accent)); }
.lms-stat-label { font-size: .75rem; color: var(--c-muted); margin-bottom: .25rem; }
.lms-stat-icon  { font-size: 1.25rem; margin-top: .25rem; }

/* Progress bar */
.lms-profile-progress {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.lms-progress-wrap {
  height: 8px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: .5rem;
}
.lms-progress-bar {
  height: 100%;
  background: var(--c-accent);
  border-radius: 4px;
  transition: width .4s ease;
}

/* Kurs kartı */
/* lms-course-card duplicate removed */
.lms-course-footer {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .625rem .875rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2, #f8fafc);
}

/* Kurs Detay Grid */

/* Quiz butonları */

/* Oyun merkezi */
.yegames-card { cursor: pointer; }
#yegames-overlay { display: none; }
.yeapplms-game-center { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.25rem; }
@media (max-width: 600px) { .yeapplms-game-center { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   SERTİFİKA LISTE & GRİD
═══════════════════════════════════════════════════════════ */
.lms-cert-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.lms-cert-list .lms-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem;
}
.lms-cert-list .lms-card .cert-icon-wrap {
  font-size: 2rem;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg,var(--c-accent-bg),#f0f9ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lms-cert-list .lms-card .cert-info { flex: 1; min-width: 0; }
.lms-cert-list .lms-card .cert-info .cert-title {
  font-weight: 700; font-size: .9375rem; margin-bottom: .2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lms-cert-list .lms-card .cert-info .cert-code {
  font-family: monospace; font-size: .6875rem; color: var(--c-muted);
}
.lms-cert-list .lms-card .cert-actions {
  display: flex;
  gap: .375rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.lms-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
@media (max-width: 600px) {
  .lms-cert-list .lms-card { flex-direction: column; align-items: flex-start; }
  .lms-cert-list .lms-card .cert-actions { width: 100%; justify-content: flex-start; }
}
/* ═══ YARDIM SAYFASI ═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .lms-help-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .lms-help-left { position: static !important; }
}
/* ═══════════════════════════════════════════════════════════
   MOBİL OPTİMİZASYON — Küçük ekranlar (≤480px)
═══════════════════════════════════════════════════════════ */

/* Tablet (481px - 768px) */

/* ═══ HATA DÜZELTMELERİ ═══ */

/* Dashboard stat grid fix */
@media (max-width: 900px) { }
@media (max-width: 480px) { }

/* Kurs kartı ilerleme */
/* lms-course-card progress - see override block below */

/* Scratch Cup block */
.lms-scratch-cup-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 0; border-bottom: 1px solid var(--c-border);
  gap: .5rem; flex-wrap: wrap;
}

/* Sertifika kartı */

/* ═══════════════════════════════════════════════════════════════
   YEAPPLMS — KESİN DÜZELTMELER (tüm çakışmaları ezer)
   ═══════════════════════════════════════════════════════════════ */

/* ── Müfredat (kurs detay + öğrenme sidebar) ── */
.lms-learn-module {
  border: 1px solid var(--c-border) !important;
  border-radius: .5rem !important;
  overflow: hidden !important;
  margin-bottom: .5rem !important;
}
.lms-learn-module-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: .625rem 1rem !important;
  background: var(--c-surface2) !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  cursor: pointer !important;
}
.lms-learn-module-head span {
  font-size: .75rem !important;
  color: var(--c-muted) !important;
  font-weight: 400 !important;
}
.lms-learn-lesson {
  display: flex !important;
  align-items: center !important;
  gap: .625rem !important;
  padding: .5rem 1rem !important;
  border-top: 1px solid var(--c-border) !important;
  font-size: .8125rem !important;
  color: var(--c-text2) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.lms-learn-lesson:hover { background: var(--c-accent-bg) !important; }
.lms-learn-lesson.active { background: var(--c-accent-bg) !important; color: var(--c-accent) !important; font-weight: 600 !important; }
.lms-learn-lesson.done { color: var(--c-success) !important; }

/* Circle check — kesinlikle taşmamalı, flex-shrink:0 */
.lms-lesson-check {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--c-border) !important;
  border-radius: 50% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .6875rem !important;
  overflow: visible !important;
}
.lms-lesson-check--done,
.lms-learn-lesson.done .lms-lesson-check {
  background: var(--c-success) !important;
  border-color: var(--c-success) !important;
  color: #fff !important;
}
/* V-13: ÇİFT TİK sorunu.
 *
 * Bu ::after kuralı tik karakterini CSS ile ekliyordu. Ama JavaScript de
 * aynı öğenin içine '✓' yazıyor — sonuç ekranda "✓✓" görünüyordu.
 *
 * Kaynak tek olmalı: işaret JS tarafından, veriye göre üretiliyor.
 * Burada yalnızca biçimlendirme kalır. */
.lms-lesson-check--done {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
/* Başlık span — circle'ın yanında, flex:1, taşmaz */
.lms-learn-lesson > span:first-of-type,
.lms-learn-lesson > span[style*="flex:1"] {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── Dashboard tabs ── */
#tab-all, #tab-ongoing, #tab-done, #tab-discover { min-height: 1px; }

/* ── Kurs kartı ilerleme barı ── */
.lms-course-card .lms-progress-wrap {
  height: 5px !important;
  background: var(--c-border) !important;
  border-radius: 99px !important;
  margin-top: .375rem !important;
  overflow: hidden !important;
}
.lms-course-card .lms-progress-bar {
  height: 100% !important;
  background: var(--c-accent) !important;
  border-radius: 99px !important;
  min-width: 2px !important;
}

/* ── Kurs detay grid ── */
@media (max-width: 900px) {
  .lms-course-detail-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .lms-course-enroll-card { position: static !important; order: -1; }
}

/* ── Sertifika kartı ── */
.lms-cert-item { margin-bottom: .75rem !important; }

/* ── Quiz seçenek butonları ── */
.lms-quiz-opt {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; text-align: left;
  background: var(--c-surface); border: 2px solid var(--c-border);
  border-radius: var(--r-btn); padding: .75rem 1rem;
  cursor: pointer; font-size: .9375rem;
  transition: border-color .15s, background .15s;
  margin-bottom: .5rem; font-family: inherit;
}
.lms-quiz-opt:hover { border-color: var(--c-accent); background: var(--c-accent-bg); }
.lms-quiz-opt.selected { border-color: var(--c-accent); background: var(--c-accent-bg); font-weight: 600; }
.lms-quiz-letter {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--c-border); color: var(--c-text);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .8125rem;
}
.lms-quiz-opt.selected .lms-quiz-letter { background: var(--c-accent); color: #fff; }

/* ── Kurs kartı thumb placeholder - display:none sonrası layout korunur ── */
.lms-course-card { display: flex !important; flex-direction: column !important; }
.lms-course-body { flex: 1 !important; }
.lms-course-thumb[style*="display:none"] + .lms-course-body { margin-top: 0 !important; }

/* ════════════════════════════════════════════════════
   DASHBOARD KURS KARTI — KESİN DÜZELTME
   Ekran görüntüsündeki yatay layout sorununu çözer
   ════════════════════════════════════════════════════ */
/* Kart: sütun yönü, tam genişlik, overflow gizle */
.lms-course-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Resim: tam genişlik, sabit yükseklik, taşmasın */
.lms-course-card .lms-card-img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Thumb placeholder: resim yokken gösterilir */
.lms-course-card .lms-course-thumb {
  width: 100% !important;
  height: 160px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Body: kalan alanı doldur */
.lms-course-card .lms-course-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: .875rem !important;
  min-width: 0 !important;
}

/* Responsive: tablet 2 sütun, mobil 1 sütun */
@media (max-width: 860px) {
  }
@media (max-width: 520px) {
  }

/* ── Dashboard 2-kolon responsive ── */
@media (max-width: 900px) {
  .lms-main div[style*="grid-template-columns:minmax(0,1fr) 300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Grid sistemi - Flexbox (Quirks Mode uyumlu) ── */
.lms-grid-2,
.lms-grid-3,
.lms-grid-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
}
.lms-grid-2 > * { flex: 1 1 calc(50% - .625rem) !important; min-width: 220px !important; max-width: calc(50% - .625rem) !important; box-sizing: border-box !important; }
.lms-grid-3 > * { flex: 1 1 calc(33.333% - .834rem) !important; min-width: 220px !important; max-width: calc(33.333% - .834rem) !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; }
.lms-grid-4 > * { flex: 1 1 calc(25% - .938rem) !important; min-width: 180px !important; max-width: calc(25% - .938rem) !important; box-sizing: border-box !important; }

@media (max-width: 900px) {
  .lms-grid-3 > * { flex: 1 1 calc(50% - .625rem) !important; max-width: calc(50% - .625rem) !important; }
  .lms-grid-4 > * { flex: 1 1 calc(50% - .625rem) !important; max-width: calc(50% - .625rem) !important; }
}
@media (max-width: 600px) {
  .lms-grid-2 > *,
  .lms-grid-3 > *,
  .lms-grid-4 > * { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* ── V-01: Kurs/İçerik Kartları — Izgara ve Liste ────────────────────
 *
 * Tek bileşen iki görünümü de karşılar. Renkler design token'lardan
 * geldiği için karanlık mod ve marka rengi otomatik uyar.
 */

/* Görünüm değiştirici */
.lms-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--c-surface3);
  border-radius: 10px;
}
.lms-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 34px;
  padding: 0 .625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lms-view-btn:hover { color: var(--c-text); }
.lms-view-btn.active {
  background: var(--c-accent);
  color: #fff;
}

/* Yıldız puanı */
.lms-rating {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  line-height: 1;
}
.lms-rating-badge {
  background: var(--c-success);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
}
.lms-rating-stars {
  color: var(--c-warning);
  letter-spacing: .5px;
}
.lms-rating-count { color: var(--c-muted); font-size: .75rem; }

/* Kart gövdesi — ortak */
.lms-cc {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.lms-cc:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}
.lms-cc:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.lms-cc-thumb { position: relative; flex-shrink: 0; background: var(--c-surface3); }
.lms-cc-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lms-cc-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  font-size: 2rem;
}
.lms-cc-badge {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .6875rem; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
  backdrop-filter: blur(4px);
}

.lms-cc-body { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.lms-cc-cat {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--c-accent);
}
.lms-cc-title {
  font-size: 1rem; font-weight: 800; line-height: 1.3;
  color: var(--c-text); margin: 0;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lms-cc-desc {
  font-size: .8125rem; line-height: 1.5; color: var(--c-text2); margin: 0;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.lms-cc-meta {
  display: flex; flex-wrap: wrap; gap: .875rem;
  font-size: .75rem; color: var(--c-muted);
}

.lms-cc-progress {
  height: 6px; background: var(--c-border);
  border-radius: 99px; overflow: hidden; margin-top: .25rem;
}
.lms-cc-progress-bar {
  height: 100%; background: var(--c-accent);
  border-radius: 99px; transition: width .3s;
}
.lms-cc-progress-done { background: var(--c-success); }
.lms-cc-progress-label { font-size: .75rem; color: var(--c-muted); }
.lms-cc-done-label { color: var(--c-success); font-weight: 600; }

/* Eylem düğmeleri */
/* V-08: Eylem düğmeleri.
 *
 * Üç düğmeli kartlarda (tamamlanmış kurs) dar alanda taşma oluyordu.
 * Düğmeler esneyerek satırı paylaşır; sığmayan alta iner ama tam genişlik
 * alır — yarım kalmış görünüm oluşmaz. */
.lms-cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.lms-cc-actions > * {
  flex: 1 1 auto;
  min-width: 0;
}
.lms-cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* V-08: Yatay dolgu azaltıldı — üç düğme dar kartta da yan yana sığsın. */
  padding: .5rem .75rem;
  border: 1px solid transparent; border-radius: 99px;
  font-size: .8125rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: opacity .15s, background .15s;
}
.lms-cc-btn:hover { opacity: .88; }
.lms-cc-btn-primary { background: var(--c-info);    color: #fff; }
.lms-cc-btn-accent  { background: var(--c-accent);  color: #fff; }
.lms-cc-btn-success { background: var(--c-success); color: #fff; }
.lms-cc-btn-outline { background: transparent; color: var(--c-success); border-color: var(--c-success); }
/* V-09: "Değerlendir" düğmesi.
 *
 * Görselde köşeli ve soluk görünüyordu — diğer düğmelerle aynı yuvarlaklıkta
 * olmalı. Rengi de accent'e çekildi: bu bir eylem çağrısı, pasif bir bilgi
 * değil. Kenarlık ince tutuldu ki birincil düğmelerle yarışmasın. */
/* V-10: Değerlendir düğmesi.
 *
 * `.lms-cc-btn` zaten 99px veriyor ama sayfada `!important` içeren başka
 * kurallar var; bu düğme onlarla aynı DOM ağacında bulunabiliyor. Özgüllüğü
 * artırmak için çift sınıf seçici kullanıldı — !important'a başvurmadan
 * garanti sağlanıyor. */
.lms-cc-btn.lms-cc-btn-ghost {
  background: transparent;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 99px;
}
.lms-cc-btn.lms-cc-btn-ghost:hover {
  background: var(--c-accent-bg);
  opacity: 1;
}

/* ── Izgara düzeni ── */
.lms-cc-grid { display: flex; flex-direction: column; }
.lms-cc-grid .lms-cc-thumb { height: 170px; }
.lms-cc-grid .lms-cc-body  { padding: .875rem 1rem; flex: 1; }
.lms-cc-grid .lms-cc-foot  {
  padding: .75rem 1rem; border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: .625rem;
}

/* V-08: Kurs ızgarası — EN FAZLA 3 sütun.
 *
 * Önceden `auto-fill, minmax(280px, 1fr)` kullanılıyordu; geniş ekranda
 * 4 sütun üretiyor ve kart genişliği ~280px'e düşüyordu. O genişlikte
 * "Sertifikanı Al + Tekrar Al + Değerlendir" düğmeleri yan yana sığmayıp
 * alt alta kayıyor, kart yüksekliği bozuluyordu.
 *
 * Sabit 3 sütun yerine `repeat(3, 1fr)` + kırılma noktaları kullanılıyor:
 * içerik alanı ne kadar genişlerse genişlesin kartlar okunabilir kalıyor.
 */
.lms-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  /* V-07: Satırdaki tüm kartlar aynı yüksekliğe uzasın. */
  align-items: stretch;
}

@media (max-width: 1180px) {
  .lms-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lms-course-grid { grid-template-columns: 1fr; }
}

/* V-07: Kart içi dikey hizalama.
   Gövde esneyerek boşluğu doldurur; alt bölüm her kartta aynı hizada kalır. */
.lms-cc-grid { height: 100%; }
.lms-cc-grid .lms-cc-body { flex: 1 1 auto; }
.lms-cc-grid .lms-cc-foot { margin-top: auto; }

/* V-08: Açıklama alanı sabit yükseklik.
 *
 * Kartlarda açıklama uzunluğu değişken; min-height ile üç satırlık alan
 * ayrılıyor ki başlık altındaki ilerleme çubuğu her kartta aynı hizada dursun.
 * (Ekran görüntüsünde bazı kartlarda açıklama yok, bazılarında üç satır vardı;
 * bu, alt bölümü farklı yüksekliklere itiyordu.) */
.lms-cc-grid .lms-cc-desc {
  min-height: 4.5em;   /* 3 satır × 1.5 satır yüksekliği */
  margin-bottom: .25rem;
}

/* İlerleme bölümü gövdenin en altına yaslansın.
   margin-top:auto, açıklama kısa olsa bile çubuğu aşağı iter — böylece
   tüm kartlarda ilerleme çubuğu aynı hizada durur. */
.lms-cc-grid .lms-cc-progress { margin-top: auto; }
.lms-cc-grid .lms-cc-progress + .lms-cc-progress-label { margin-top: .25rem; }

/* Puan rozeti başlığın üstünde durur; boşken yer kaplamasın */
.lms-cc-grid .lms-rating { margin-bottom: .125rem; }

/* ── Liste düzeni ── */
.lms-course-list { display: flex; flex-direction: column; gap: .75rem; }
.lms-cc-list {
  display: grid;
  grid-template-columns: 120px minmax(0, 1.6fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: .875rem 1rem;
}
.lms-cc-list .lms-cc-thumb-sm {
  width: 120px; height: 84px; border-radius: 10px; overflow: hidden;
}
.lms-cc-list .lms-cc-title { font-size: .9375rem; -webkit-line-clamp: 1; }
.lms-cc-list .lms-cc-side {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0;
}
.lms-cc-list .lms-cc-actions { flex-direction: column; align-items: stretch; }
.lms-cc-list .lms-cc-btn { padding: .4375rem .875rem; font-size: .75rem; }

/* Dar ekranda liste, ızgaraya benzer tek sütuna iner */
@media (max-width: 860px) {
  .lms-cc-list {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "thumb body" "side side" "actions actions";
    gap: .75rem 1rem;
  }
  .lms-cc-list .lms-cc-thumb-sm { grid-area: thumb; width: 88px; height: 66px; }
  .lms-cc-list .lms-cc-body     { grid-area: body; }
  .lms-cc-list .lms-cc-side     { grid-area: side; }
  .lms-cc-list .lms-cc-actions  { grid-area: actions; flex-direction: row; }
  .lms-cc-list .lms-cc-btn      { flex: 1; }
}

/* Liste başlığı: sayı + görünüm değiştirici */
.lms-list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}


/* ── R-01: Değerlendirme penceresi ───────────────────────────────── */
.lms-modal-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: lms-fade-in .15s ease;
}
.lms-modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  max-width: 440px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.lms-rate-stars { display: flex; gap: .375rem; }
.lms-rate-star {
  background: none; border: none; cursor: pointer;
  font-size: 2rem; line-height: 1; padding: .125rem;
  color: var(--c-border);
  transition: color .12s, transform .12s;
}
.lms-rate-star:hover { transform: scale(1.12); }
/* V-10: Yıldız renk kuralları — SIRA ÖNEMLİ.
 *
 * Önceki hâlde `.lms-rate-star { color: var(--c-border) }` kuralı
 * `.on` kuralından SONRA geliyordu. Aynı özgüllükte (0,1,0) oldukları için
 * sonraki kazanıyor ve seçili yıldızlar da soluk kalıyordu — kullanıcı
 * tıklıyor ama hiçbir şey olmuyormuş gibi görünüyordu.
 *
 * Ayrıca `:hover .not(.hover)` kuralı, fare kabın üzerindeyken SEÇİLİ
 * yıldızları da soluklaştırıyordu.
 *
 * Şimdi: önce varsayılan (soluk), sonra aktif durumlar. */
.lms-rate-star { color: var(--c-border); }

.lms-rate-star.on,
.lms-rate-star.hover { color: var(--c-warning); }

/* Fare kabın üzerindeyken: yalnızca önizleme sınırının SAĞINDAKİLER solar.
   Seçili olanlar (.on) etkilenmez. */
.lms-rate-stars:hover .lms-rate-star:not(.hover):not(.on) { color: var(--c-border); }
.lms-rate-star:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes lms-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* Hareket azaltma tercihi: pencere aniden belirsin */
@media (prefers-reduced-motion: reduce) {
  .lms-modal-backdrop { animation: none; }
  .lms-rate-star:hover { transform: none; }
}


/* ── V-01: Sertifika kartı ───────────────────────────────────────── */
.lms-cert-hero {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  padding: 1.75rem 1rem;
  text-align: center;
  color: #fff;
}
.lms-cert-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.lms-cert-name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.lms-cert-mini {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
}


/* ── W-01: Sınıf duvarı moderasyon düğmeleri ──────────────────────── */
.lms-wall-act {
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; cursor: pointer;
  color: var(--c-muted);
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.lms-wall-act:hover {
  background: var(--c-surface3);
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.lms-wall-act-danger:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.lms-wall-act:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}


/* ── D-01: Panel alt bölümleri ────────────────────────────────────── */
.lms-dash-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (max-width: 1100px) {
  .lms-dash-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lms-dash-sections { grid-template-columns: 1fr; }
}
.lms-dash-more {
  font-size: .75rem;
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.lms-dash-more:hover { text-decoration: underline; }

/* Son öğenin alt çizgisi gereksiz */
.lms-dash-sections .lms-card-body > *:last-child { border-bottom: none !important; }

/* D-01: Panel istatistik ızgarası.
 *
 * Kart sayısı 4'ten 9'a çıktı. Genel .lms-grid-4 kuralını değiştirmek
 * diğer üç kullanım yerini de etkilerdi; bu yüzden panele özel sınıf. */
/* D-02: 8 kart → 4 sütun × 2 satır.
 *
 * auto-fit kullanıldığında geniş ekranda kartlar tek satıra diziliyor ve
 * her biri daralıyordu; etiketler taşıyordu. Sabit 4 sütun daha okunaklı. */
.lms-dash-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .lms-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .lms-dash-stats { grid-template-columns: 1fr; }
}


/* ── S-03: Okunmamış bildirim işaretleri ──────────────────────────
 *
 * Okunmuş/okunmamış ayrımı yalnızca kenarlık rengiyle yapılıyordu —
 * hızlı bakışta fark edilmiyordu. Üç katmanlı işaret:
 *   1. Nabız atan nokta (dikkat çeker)
 *   2. "YENİ" rozeti (kesin bilgi)
 *   3. Hafif vurgu kenarlığı (bağlam)
 */
.lms-notif-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--c-danger);
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  animation: lms-notif-pulse 2s ease-in-out infinite;
}

@keyframes lms-notif-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}

.lms-notif-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: .375rem;
  background: var(--c-danger);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 99px;
}

.lms-notif-new { box-shadow: 0 0 0 1px var(--c-accent); }

/* Hareket azaltma tercihi: nokta durur ama görünür kalır */
@media (prefers-reduced-motion: reduce) {
  .lms-notif-dot { animation: none; }
}


/* ── S-06: Oyun türü seçim etiketleri ─────────────────────────────── */
.lms-chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
/* S-10: Seçim etiketleri, mevcut .lms-badge diliyle uyumlu.
 *
 * Önceki hâl kenarlıklı ve düz zeminliydi; arayüzün geri kalanı yumuşak
 * zeminli rozetler (--c-accent-bg) kullanıyor. Seçili durum da tam dolgu
 * yerine aynı aileden daha koyu bir tonla belirtiliyor. */
.lms-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--c-surface3);
  border: 1px solid transparent;
  border-radius: 99px;
  padding: .375rem .875rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-family: inherit;
  color: var(--c-text2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lms-chip:hover {
  background: var(--c-accent-bg);
  color: var(--c-accent);
}
.lms-chip.on {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
  color: var(--c-accent);
}
/* Seçili olanı işaretle — renk körlüğünde de ayırt edilebilsin */
.lms-chip.on::before { content: '✓'; font-weight: 800; }

.lms-chip:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════
   M-01: MOBİL DÜZELTMELERİ
   Gerçek cihaz testinde görülen sorunlar (iPhone, Safari).
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Panel istatistik kartları ──────────────────────────────────
     Tek sütuna düşünce her kart ekranın yarısı kadar yer kaplıyordu;
     8 kartı görmek için uzun uzun kaydırmak gerekiyordu.
     İki sütun + kompakt yükseklik: hepsi bir bakışta görünür. */
  .lms-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .625rem;
  }
  .lms-dash-stats .lms-stat {
    padding: .75rem .625rem;
    min-height: auto;
  }
  .lms-dash-stats .lms-stat-label {
    font-size: .625rem;
    letter-spacing: .02em;
    line-height: 1.3;
  }
  .lms-dash-stats .lms-stat-value { font-size: 1.25rem; }
  .lms-dash-stats .lms-stat-icon  { display: none; }

  /* ── Sınav şıkları ──────────────────────────────────────────────
     Uzun şık metinleri kutudan taşıyordu ("Yüzeyindeki Demir Oksit
     (PAS) yüzünde..." kesiliyordu). Metin sarmalı ve esnek genişlik. */
  .lms-quiz-option {
    align-items: flex-start;
    padding: .875rem .75rem;
  }
  .lms-quiz-option-text,
  .lms-quiz-option > span:last-child {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    flex: 1;
    line-height: 1.5;
  }
  .lms-quiz-option-letter { flex-shrink: 0; }

  /* ── Kurs detay yan bloğu ───────────────────────────────────────
     "Ücretsiz" başlığı gereksiz büyüktü ve dikey alanı yiyordu. */
  .lms-course-side-price,
  .lms-card .lms-price-big { font-size: 1.5rem !important; }

  /* ── Yardım/Destek ekranı ───────────────────────────────────────
     İki sütunlu düzen dar ekranda yan yana sıkışıyor, "Taleplerim"
     kolonu okunmaz hale geliyordu. Alt alta alınıyor. */
  .lms-help-layout,
  .lms-main > div[style*="grid-template-columns"] {
    display: block !important;
  }
  .lms-help-layout > * { margin-bottom: 1rem; }

  /* ── Sekme şeridi ───────────────────────────────────────────────
     Sekmeler taşınca son sekme ("Keşfet") ekran dışında kalıyordu.
     Yatay kaydırma + kenar ipucu. */
  .lms-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .lms-tabs::-webkit-scrollbar { display: none; }
  .lms-tab { white-space: nowrap; flex-shrink: 0; }
}

/* M-01: Görsel yüklenemediğinde boş gri alan kalıyordu.
   Kırık/eksik görsel yerine bir simge gösterilir — kullanıcı
   "yüklenmedi mi, yok mu" diye tereddüt etmez. */
.lms-cc-thumb:empty::after,
.lms-cc-thumb img[src=""],
.lms-cc-thumb img:not([src]) {
  content: '🎓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  background: var(--c-surface3);
}


/* B-01: Rozet ilerleme çubuğu */
.lms-badge-progress {
  height: 6px;
  background: var(--c-surface3);
  border-radius: 99px;
  overflow: hidden;
}
.lms-badge-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-warning));
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px; /* %0'da bile çubuk var, "veri yok" gibi görünmesin */
}


/* ── A-27: Giriş ekranı hero düzeni ──────────────────────────────────
 *
 * Oyun kutucukları slideshow'un üzerine biniyor, görseldeki kişileri ve
 * metni kapatıyordu. Artık alta sabitleniyor; üstlerinde yumuşak bir
 * karartma var, böylece hem görsel görünür hem yazılar okunur.
 */
.lms-hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(17,24,39,.78) 0%, rgba(17,24,39,.45) 45%, transparent 100%);
}

.lms-hero-games {
  position: absolute;
  inset: auto 1.5rem 1.5rem 1.5rem;
  z-index: 2;
}

/* Kısa ekranlarda oyun bölümü görselin yarısını yemesin */
@media (max-height: 700px) {
  .lms-hero-games { display: none; }
  .lms-hero-overlay { display: none; }
}

/* Dar ekranda hero zaten gizli; yine de güvenlik için */
@media (max-width: 900px) {
  .lms-hero-games, .lms-hero-overlay { display: none; }
}