/* ═══════════════════════════════════════════════════════════
   EduLMS v3 — Responsive & Kompakt Tasarım
   Mayer İlkeleri: tutarlılık, sinyalleme, yakınlık, bölümleme
   ─────────────────────────────────────────────────────────
   Breakpoints:
     xs  < 480px   (küçük telefon)
     sm  480–768px (büyük telefon / tablet dikey)
     md  768–1024px (tablet yatay / küçük laptop)
     lg  > 1024px  (masaüstü)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Tokenlar ─────────────────────────────────────────────── */
:root {
  --ink:        #0f1117;
  --paper:      #181c27;
  --paper-2:    #1e2333;
  --paper-3:    #252b3d;
  --border:     #2c3249;
  --border-2:   #3a4260;

  --blue:       #4f8ef7;
  --blue-glow:  rgba(79,142,247,.15);
  --teal:       #38bdf8;
  --green:      #34d399;
  --amber:      #fbbf24;
  --coral:      #f87171;
  --purple:     #a78bfa;
  --pink:       #f6339a;
  --violet:     #a855f7;
  --indigo:     #6366f1;

  /* Marka gradyanı — güven veren, mavi tonlu; eğlenceli/ders temalı vurgular için (logo, birincil butonlar, marka adı) */
  --fun-grad:   linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #6366f1 100%);
  --fun-glow:   rgba(59,130,246,.22);

  --text:       #e8eaf2;
  --text-2:     #8892aa;
  --text-3:     #525e7a;

  --input-bg:   #0c0f18;               /* koyu girdi/ilerleme arka planı */
  --highlight:  var(--blue-glow);      /* vurgulu satır (ör. lider tablosunda "sen") */
  --topbar-bg:  rgba(15,17,23,.95);    /* yapışkan üst bar (yarı saydam) */

  color-scheme: dark;

  --r:          10px;  /* border-radius */
  --r-sm:       7px;
  --r-lg:       16px;

  --font:       'Inter', system-ui, sans-serif;
  --mono:       'IBM Plex Mono', monospace;

  /* Spacing scale — compact by default */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 14px;
  --sp-lg: 20px;
  --sp-xl: 28px;

  /* Sidebar */
  --sidebar-w: 220px;
  --topbar-h:  54px;
}

/* ── Açık (light) tema ────────────────────────────────────────
   Kullanıcı temayı değiştirince <html data-theme="light"> ayarlanır
   (bkz. js/theme.js). Aynı tokenlar açık palet ile ezilir. */
:root[data-theme="light"] {
  --ink:        #f4f6fb;
  --paper:      #ffffff;
  --paper-2:    #f0f3fa;
  --paper-3:    #e6eaf3;
  --border:     #d9dfec;
  --border-2:   #c3cbdd;

  --blue-glow:  rgba(79,142,247,.14);

  --text:       #1a1f2e;
  --text-2:     #55607a;
  --text-3:     #8a93a8;

  --input-bg:   #ffffff;
  --highlight:  #e8eef9;
  --topbar-bg:  rgba(255,255,255,.9);

  color-scheme: light;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--ink); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a  { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4em; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .9rem; }
p  { margin: 0 0 .8em; }
img { max-width: 100%; }

/* ── Topbar ───────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: var(--topbar-h);
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  gap: 8px;
}
.brand { font-weight: 700; font-size: 1rem; color: var(--text);
         display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand .dot { width: 7px; height: 7px; border-radius: 50%;
              background: var(--blue); box-shadow: 0 0 8px var(--blue); flex-shrink: 0; }
.topnav nav { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
#whoami { font-size: .8rem; color: var(--text-2); white-space: nowrap;
          max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Koyu/açık tema değiştirme butonu — logodan sonra, sağa yaslı */
.theme-toggle {
  margin-left: auto; order: 0;
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0; transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--blue); background: var(--paper-3); }
.topnav nav { margin-left: 8px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); font-weight: 600; font-size: .84rem;
  padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .12s, border-color .12s, transform .08s;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-primary  { background: var(--fun-grad); color: #fff; box-shadow: 0 2px 12px var(--fun-glow); }
.btn-outline  { background: transparent;  color: var(--text);   border-color: var(--border-2); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost    { background: transparent;  color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--paper-2); }
.btn-danger   { background: transparent;  color: var(--coral);  border-color: var(--coral); }
.btn-danger:hover { background: var(--coral); color: #fff; }
.btn-success  { background: transparent;  color: var(--green);  border-color: var(--green); }
.btn-success:hover { background: var(--green); color: var(--ink); }
.btn-sm  { padding: 5px 11px; font-size: .8rem; }
.btn-xs  { padding: 3px 8px;  font-size: .75rem; }
.btn-block { width: 100%; }

/* ── Cards ────────────────────────────────────────────────── */
.card    { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-lg); }
.card-sm { padding: var(--sp-md); }
.card + .card { margin-top: 10px; }

/* ── Form inputs ──────────────────────────────────────────── */
.field { margin-bottom: 12px; }
.field label {
  display: block; margin-bottom: 4px;
  font-size: .74rem; color: var(--text-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
input, select, textarea {
  width: 100%; background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; color: var(--text); font-family: var(--font); font-size: .88rem;
  transition: border-color .15s; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
/* Genel input sıfırlaması radio/checkbox'ı da tam genişlik bir kutuya
   çeviriyordu (görünmez/bozuk görünüm) — bunları kendi doğal haline döndür. */
input[type="radio"], input[type="checkbox"] {
  width: auto; padding: 0; appearance: auto; -webkit-appearance: auto;
  accent-color: var(--blue); flex-shrink: 0;
}
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238892aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px; cursor: pointer; }
select option { background: var(--paper); }

/* İki ve üç sütunlu form satırı */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ── Auth ─────────────────────────────────────────────────── */
.auth-shell { max-width: 400px; margin: 48px auto; padding: 0 16px; }
.auth-shell h2 { margin-bottom: 4px; }

/* ── Dashboard layout ─────────────────────────────────────── */
.dash { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.dash-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 12px 8px; overflow-y: auto;
  background: var(--paper);
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.sec-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); margin: 14px 0 4px 8px; font-weight: 700;
}
.side-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: .85rem; cursor: pointer;
  margin-bottom: 1px; transition: background .1s, color .1s;
  border: none; background: none; width: 100%; text-align: left;
}
.side-item:hover  { background: var(--paper-2); color: var(--text); }
.side-item.active { background: var(--paper-2); color: var(--blue); font-weight: 600; }
.side-item .sicon { font-size: .9rem; flex-shrink: 0; }
.side-item .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.dash-main { flex: 1; padding: var(--sp-xl) var(--sp-xl); min-width: 0; overflow-y: auto; }

/* ── Course header ────────────────────────────────────────── */
.course-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.course-header-info { flex: 1; min-width: 0; }
.course-header-info h2 { margin-bottom: 2px; }
.course-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.join-code-box {
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  background: var(--blue-glow); color: var(--blue);
  border: 1px solid rgba(79,142,247,.3); border-radius: var(--r-sm);
  padding: 4px 10px; letter-spacing: .08em; cursor: default;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab-btn {
  padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
  color: var(--text-2); border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s; margin-bottom: -1px;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Module add actions ───────────────────────────────────── */
.module-add-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* ── Module card ──────────────────────────────────────────── */
.module-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
}
.module-header {
  padding: 11px 14px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer;
  transition: background .1s; gap: 8px;
}
.module-header:hover { background: var(--paper-2); }
.module-header-left {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}
.week-badge {
  font-size: .7rem; font-weight: 700; color: var(--blue);
  background: var(--blue-glow); padding: 2px 7px; border-radius: 999px;
  flex-shrink: 0;
}
.date-badge {
  font-size: .74rem; color: var(--text-2);
  background: var(--paper-2); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.collapse-icon { color: var(--text-3); font-size: .8rem; transition: transform .15s; }
.module-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.module-body.collapsed { display: none; }

/* Syllabus block */
.syllabus-block {
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; margin-top: 12px;
}
.syllabus-text {
  font-size: .83rem; color: var(--text-2); white-space: pre-wrap; margin: 0;
}

/* ── Section headers ──────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.section-label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3);
}

/* ── Task rows ────────────────────────────────────────────── */
.task-row {
  padding: 8px 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.task-row:last-child { border-bottom: none; }
.task-check {
  width: 17px; height: 17px; border: 2px solid var(--border-2);
  border-radius: 4px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.task-check.done { background: var(--green); border-color: var(--green); color: var(--ink); font-size: .7rem; }
.task-check:not(.done):hover { border-color: var(--blue); }
.task-info { flex: 1; min-width: 0; }
.task-title        { font-size: .88rem; font-weight: 600; }
.task-instructions { font-size: .8rem; color: var(--text-2); margin-top: 2px; }

/* Görev satırı — dikey (ek dosya + teslim alanı barındırır) */
.task-row-col { flex-direction: column; align-items: stretch; }

/* ── Ek dosya / teslim dosyası çipleri ────────────────────── */
.attach-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--paper-2);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.attach-chip:hover { border-color: var(--blue); }
.attach-chip a { color: inherit; text-decoration: none; }
.attach-x {
  border: none; background: none; color: var(--text-3); cursor: pointer;
  font-size: .72rem; line-height: 1; padding: 0;
}
.attach-x:hover { color: var(--coral); }

/* ── Öğrenci teslim bloğu ─────────────────────────────────── */
.submission-block {
  margin: 8px 0 4px 29px; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.submission-form textarea, .submission-status textarea {
  width: 100%; padding: 6px 8px; font-size: .82rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--text); font-family: var(--font);
  resize: vertical; line-height: 1.45;
}
.submission-note {
  font-size: .82rem; color: var(--text-2); margin: 6px 0;
  white-space: pre-wrap;
}
.feedback-box {
  margin-top: 8px; padding: 8px 10px; font-size: .82rem;
  border-left: 3px solid var(--amber); background: rgba(251,191,36,.06);
  border-radius: var(--r-sm); color: var(--text);
}

/* ── Öğretmen: teslim kartı ───────────────────────────────── */
.submission-card {
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r);
}
.submission-card textarea {
  width: 100%; padding: 6px 8px; font-size: .82rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--text); font-family: var(--font);
  resize: vertical; line-height: 1.45;
}
.review-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.review-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.review-fields input, .review-fields select {
  padding: 5px 8px; font-size: .82rem; min-width: 90px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--text); font-family: var(--font);
}

/* ── Öğretmen: yapay zeka önerisi ─────────────────────────── */
.ai-review-box {
  padding: 10px 12px; font-size: .82rem;
  border-left: 3px solid var(--violet); background: rgba(168,85,247,.06);
  border-radius: var(--r-sm); color: var(--text);
}
.ai-list { margin: 4px 0 0 18px; padding: 0; }
.ai-list li { margin: 2px 0; }

/* ── Session card ─────────────────────────────────────────── */
.session-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--paper-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 6px; flex-wrap: wrap;
}
.session-card .session-meta { flex: 1; min-width: 0; }
.session-card .session-title { font-weight: 600; font-size: .88rem; }
.session-card .session-time  { font-size: .78rem; color: var(--text-2); margin-top: 2px; }
.session-platform { font-size: 1rem; flex-shrink: 0; }

/* ── Resource card ────────────────────────────────────────── */
.resource-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--paper-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 5px;
}
.resource-icon  { font-size: 1rem; flex-shrink: 0; }
.resource-title { font-size: .86rem; font-weight: 600; flex: 1; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-type  { font-size: .72rem; color: var(--text-2); flex-shrink: 0; }

/* ── Form panel ───────────────────────────────────────────── */
.form-panel {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--sp-lg);
}

/* ── İzlence Sihirbazı ────────────────────────────────────── */
#swRows { max-height: 55vh; overflow-y: auto; padding-right: 4px; }

.sw-row {
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px;
}
.sw-row-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.sw-dates {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.sw-dates input {
  width: 120px; padding: 4px 7px; font-size: .78rem; border-radius: 0;
}
.sw-dates input:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.sw-dates input:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: none; }
.sw-title {
  flex: 1; min-width: 160px; padding: 4px 8px; font-size: .86rem;
  border-radius: var(--r-sm);
}
.sw-syl {
  width: 100%; padding: 6px 8px; font-size: .82rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--text); font-family: var(--font);
  resize: vertical; min-height: 44px; line-height: 1.45;
}
.sw-syl:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-2); white-space: nowrap;
}
.badge-blue   { color: var(--blue);  border-color: rgba(79,142,247,.4);  background: rgba(79,142,247,.08); }
.badge-green  { color: var(--green); border-color: rgba(52,211,153,.4);  background: rgba(52,211,153,.08); }
.badge-amber  { color: var(--amber); border-color: rgba(251,191,36,.4);  background: rgba(251,191,36,.08); }
.badge-coral  { color: var(--coral); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.badge-purple { color: var(--purple); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.08); }
.mono { font-family: var(--mono); }

/* ── Progress ─────────────────────────────────────────────── */
.progress-track { height: 5px; background: var(--input-bg); border-radius: 999px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s; }

/* ── Stats ────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; margin-bottom: 20px; }
.stat-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.stat-card .stat-val   { font-size: 1.8rem; font-weight: 700; color: var(--blue); line-height: 1; }
.stat-card .stat-label { font-size: .76rem; color: var(--text-2); margin-top: 3px; }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; padding: 9px 11px; color: var(--text-3);
     font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
     border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 9px 11px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--paper-2); }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-2); }
.empty-icon  { font-size: 1.8rem; margin-bottom: 10px; }

/* ── Utility ──────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.gap-4  { gap: 4px; }  .gap-6  { gap: 6px; }  .gap-8  { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4  { margin-top:4px; }  .mt-8  { margin-top:8px; }
.mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; } .mb-16 { margin-bottom:16px; }
.muted   { color: var(--text-2); }
.fs-sm   { font-size: .82rem; }
.fs-xs   { font-size: .74rem; }
.fw-bold { font-weight: 700; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.error-text   { color: var(--coral); font-size: .82rem; margin-top: 4px; }
.success-text { color: var(--green); font-size: .82rem; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── md: 768–1024px ───────────────────────────────────────── */
@media (max-width:1024px) {
  :root { --sidebar-w: 190px; }
  .dash-main { padding: var(--sp-lg); }
}

/* ── sm: 480–768px (tablet dikey / büyük telefon) ─────────── */
@media (max-width:768px) {
  :root { --sidebar-w: 100%; --topbar-h: 50px; }

  /* Sidebar yatay kaydırmalı üst çubuk hâline gelir */
  .dash { flex-direction: column; }
  .dash-sidebar {
    width: 100%; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: row; overflow-x: auto;
    padding: 6px 8px; gap: 4px;
    scrollbar-width: none;
  }
  .dash-sidebar::-webkit-scrollbar { display: none; }
  .sec-label { display: none; }
  .side-item { flex-direction: column; gap: 2px; padding: 5px 10px;
               font-size: .72rem; text-align: center; white-space: nowrap; flex-shrink: 0; }
  .side-item .sicon { font-size: 1.1rem; }
  .side-item .truncate { max-width: 70px; }

  .dash-main { padding: 14px 12px; }

  /* Form ızgara tek sütun */
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }

  /* Modül başlığında üst üste */
  .module-header-left { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Kurs başlığı */
  .course-header { flex-direction: column; }
  .course-header-actions { width: 100%; }
  .join-code-box { font-size: .8rem; }

  /* İzlence sihirbazı tarihler */
  .sw-row-header { flex-direction: column; align-items: stretch; }
  .sw-dates { width: 100%; }
  .sw-dates input { flex: 1; }
  .sw-title { width: 100%; }

  /* Tablo yatay kaydırma */
  .table-wrap { overflow-x: auto; }

  /* Sekme çubuğu 5 sekmeye çıkınca dar ekranda taşıyordu — yatay kaydırmalı */
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; }

  /* Stat grid 2 sütun */
  .stat-grid { grid-template-columns: repeat(2,1fr); }

  /* Modül ekleme butonları dikey */
  .module-add-actions { flex-direction: column; }
  .module-add-actions .btn { text-align: center; }

  /* Session card */
  .session-card { flex-wrap: wrap; }

  /* Mobilde rahat kullanım: iOS Safari, font-size 16px'in altındaki
     input'lara dokununca otomatik yakınlaştırma yapıyordu — bu can sıkıcı
     davranışı önler. Ayrıca küçük butonların/sekmelerin/menü öğelerinin
     dokunma alanını büyütür (parmakla tıklaması rahat olsun diye). */
  input, select, textarea { font-size: 16px; }
  .btn-xs, .btn-sm { min-height: 34px; }
  .tab-btn { padding: 11px 14px; }
  .side-item { padding: 9px 12px; min-height: 40px; }
}

/* ── xs: < 480px (küçük telefon) ─────────────────────────── */
@media (max-width:480px) {
  body { font-size: 13px; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }

  .topnav { padding: 0 10px; }
  #whoami { max-width: 80px; font-size: .75rem; }

  .btn    { font-size: .8rem; padding: 6px 11px; }
  .btn-sm { font-size: .76rem; padding: 4px 9px; }
  .btn-xs { font-size: .72rem; padding: 2px 7px; }

  .card    { padding: 12px; }
  .card-sm { padding: 10px; }

  .module-card  .module-header { padding: 9px 11px; }
  .module-body  { padding: 0 11px 11px; }

  .stat-grid { grid-template-columns: repeat(2,1fr); gap: 7px; }
  .stat-card .stat-val { font-size: 1.4rem; }

  /* Session & resource kartları daraltılmış */
  .session-card, .resource-card { padding: 7px 9px; gap: 7px; }

  .auth-shell { margin: 24px auto; }

  /* İzlence sihirbazı scroll alanı */
  #swRows { max-height: 45vh; }
  .sw-dates input { width: 100px; font-size: .74rem; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .topnav, .dash-sidebar, .btn, .module-add-actions { display: none !important; }
  .dash-main { padding: 0; }
  .module-body.collapsed { display: block !important; }
}

/* ══════════════════════════════════════════════════════════
   KursHub — Marka & Mayer Ek Stilleri
   Mayer İlkeleri uygulamaları:
   • Tutarlılık  : Sadece işlevsel renkler, dekoratif ögeler yok
   • Sinyalleme  : Tipografi hiyerarşisi — boyut+ağırlık+renk anlam taşır
   • Yakınlık    : İlgili ögeler aynı "card" içinde gruplanır
   • Bölümleme   : Her bölüm kendi kartında, aralarında nefes boşluğu
   • Kişiselleştirme: Doğrudan, sade Türkçe
══════════════════════════════════════════════════════════ */

/* ── KursHub marka renkleri (override) ─────────────── */
:root {
  --km-primary:   #3b82f6;
  --km-primary-d: #6366f1;
  --km-glow:      var(--fun-glow);
  --km-amber:     #f59e0b;   /* Ücret / premium vurgusu için ayrıldı */
  --km-green:     #10b981;
  --km-red:       #ef4444;
}

/* ── Logo bileşeni ──────────────────────────────────────── */
.km-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text); font-weight: 700;
  font-size: .97rem; white-space: nowrap;
}
.km-brand img,
.km-brand svg { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; }
.km-brand .km-name {
  letter-spacing: -.02em;
  background: var(--fun-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.km-brand .km-tagline {
  font-size: .65rem; font-weight: 500; color: var(--text-2);
  letter-spacing: .03em;
}

/* ── Topbar (Mayer: tutarlılık — tüm sayfalarda aynı yükseklik) ── */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 54px;
  background: var(--topbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200; gap: 10px;
}
.topnav nav { display: flex; align-items: center; gap: 8px; }

/* ── Landing page ────────────────────────────────────────── */
.lp-hero {
  text-align: center; padding: 68px 20px 52px;
  max-width: 660px; margin: 0 auto;
}
/* Mayer-Sinyalleme: başlıkta iki katman */
.lp-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--km-primary);
  background: var(--km-glow); border: 1px solid rgba(59,130,246,.3);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 20px;
}
.lp-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 800; line-height: 1.12;
  letter-spacing: -.04em; margin-bottom: 16px;
}
.lp-hero h1 em { font-style: normal; color: var(--km-primary); }
.lp-hero .lead {
  font-size: .97rem; color: var(--text-2); line-height: 1.65;
  max-width: 480px; margin: 0 auto 32px;
}
.lp-btns {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.lp-btns .btn { min-width: 152px; padding: 11px 22px; font-size: .9rem; }

/* ── Feature grid (Mayer-Uzamsal yakınlık: ikon+başlık+metin grupta) ── */
.lp-features { padding: 40px 24px 60px; max-width: 1000px; margin: 0 auto; }
.lp-features > h2 {
  text-align: center; font-size: 1.2rem; margin-bottom: 8px;
}
.lp-features > p {
  text-align: center; color: var(--text-2); font-size: .88rem; margin-bottom: 28px;
}
.feat-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.feat-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px;
  transition: border-color .15s, transform .15s;
}
.feat-card:hover { border-color: rgba(59,130,246,.4); transform: translateY(-2px); }
/* Mayer-Sinyalleme: ikon boyutu hiyerarşide birinci, başlık ikinci */
.feat-card .ficon { font-size: 1.5rem; margin-bottom: 10px; line-height: 1; display: block; }
.feat-card h3 { font-size: .92rem; margin-bottom: 6px; }
.feat-card p  { font-size: .82rem; color: var(--text-2); margin: 0; line-height: 1.55; }

/* ── Token durumu (sadece admin görür) ─────────────────── */
.token-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 3px 8px;
  border-radius: 999px; border: 1px solid;
}
.token-chip.active  { color: var(--km-green); border-color: var(--km-green); background: rgba(16,185,129,.1); }
.token-chip.expiring{ color: var(--km-amber); border-color: var(--km-amber); background: rgba(245,158,11,.1); }
.token-chip.expired { color: var(--km-red);   border-color: var(--km-red);   background: rgba(239,68,68,.1); }

/* ── Dosya yükleme alanı ────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border-2); border-radius: var(--r);
  padding: 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--input-bg);
}
.upload-zone:hover,
.upload-zone.drag-over { border-color: var(--km-primary); background: var(--km-glow); }
.upload-zone p { font-size: .85rem; color: var(--text-2); margin: 6px 0 0; }
.upload-zone .uz-icon { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.upload-file-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 10px; font-size: .8rem;
  max-width: 100%; overflow: hidden;
}
.upload-file-chip .fc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.upload-file-chip .fc-size { color: var(--text-2); flex-shrink: 0; }
.upload-file-chip .fc-del  { color: var(--km-red); cursor: pointer; flex-shrink: 0; }

/* ── CTA bar ─────────────────────────────────────────────── */
.lp-cta {
  background: var(--paper-2); border-top: 1px solid var(--border);
  padding: 40px 24px; text-align: center;
}
.lp-cta h2 { font-size: 1.2rem; margin-bottom: 8px; }
.lp-cta p  { color: var(--text-2); font-size: .88rem; margin-bottom: 22px; }

/* ── Footer ──────────────────────────────────────────────── */
.lp-footer {
  padding: 18px 24px; text-align: center;
  font-size: .76rem; color: var(--text-3);
  border-top: 1px solid var(--border);
}
.lp-footer a { color: var(--text-3); }
.lp-footer a:hover { color: var(--text-2); }

/* ── Responsive ek ───────────────────────────────────────── */
@media (max-width: 768px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .lp-features { padding: 32px 16px 48px; }
  .lp-hero { padding: 48px 16px 40px; }
}
@media (max-width: 480px) {
  .feat-grid { grid-template-columns: 1fr; }
  .topnav { padding: 0 12px; }
  .topnav .topnav-hide-xs { display: none; }
}