/* ============================================================================
   EXPOSURE ACADEMY — member-portal design system
   Faithful port of the Exposure /members portal spec:
   pure-black canvas, zinc-950 sidebar rail, zinc-900/60 cards, one blue
   accent (#0339A6) used mostly as 10–25% tints, 10px uppercase eyebrows,
   12px controls / 16px cards, Geist. Light cream auth entry (dots + glow).
   ============================================================================ */

:root {
  /* ---- The single brand accent, at its alpha levels ---- */
  --blue:        #0339A6;
  --blue-hover:  rgba(3,57,166,0.90);
  --blue-50:     rgba(3,57,166,0.50);
  --blue-40:     rgba(3,57,166,0.40);
  --blue-30:     rgba(3,57,166,0.30);
  --blue-25:     rgba(3,57,166,0.25);
  --blue-20:     rgba(3,57,166,0.20);
  --blue-15:     rgba(3,57,166,0.15);
  --blue-10:     rgba(3,57,166,0.10);
  --blue-text:   #60a5fa;   /* blue-400 — active nav / emphasis on dark */
  --blue-soft:   #93c5fd;   /* blue-300 */

  /* ---- Dark surface scale ---- */
  --bg-canvas:       #000000;
  --bg-chrome:       #09090b;              /* zinc-950 — sidebar/panels */
  --bg-card:         rgba(24,24,27,0.60);  /* zinc-900/60 — standard card */
  --bg-card-solid:   #18181b;              /* zinc-900 — modals, search */
  --bg-raised:       #27272a;              /* zinc-800 — inputs, chips */
  --bg-raised-hover: #3f3f46;              /* zinc-700 */

  /* ---- Borders (dark) ---- */
  --border:        #18181b;  /* zinc-900 — chrome dividers */
  --border-card:   #3f3f46;  /* zinc-700 — DEFAULT card border */
  --border-input:  #52525b;  /* zinc-600 */
  --border-strong: #71717a;  /* zinc-500 */
  --border-subtle: #27272a;  /* zinc-800 */

  /* ---- Text (dark) ---- */
  --text:        #ffffff;
  --text-body:   #d4d4d8;  /* zinc-300 */
  --text-muted:  #a1a1aa;  /* zinc-400 */
  --text-subtle: #71717a;  /* zinc-500 */
  --text-faint:  #52525b;  /* zinc-600 */

  /* ---- Semantic ---- */
  --ok:#10b981; --ok-text:#34d399; --ok-text-2:#6ee7b7;
  --ok-bg:rgba(16,185,129,0.10); --ok-border:rgba(16,185,129,0.20);
  --err:#ef4444; --err-text:#f87171;
  --err-bg:rgba(239,68,68,0.10); --err-border:rgba(239,68,68,0.20);
  --warn-text:#fbbf24; --warn-text-2:#fcd34d;
  --warn-bg:rgba(245,158,11,0.10); --warn-border:rgba(245,158,11,0.30);

  /* ---- Light surface (auth entry / public) ---- */
  --light-bg:#FFFCF6; --light-ink:#18181b; --light-muted:#71717a;
  --light-faint:#a1a1aa; --light-border:rgba(0,0,0,0.10);

  /* ---- Radii: 12px controls, 16px cards ---- */
  --r-lg:0.5rem; --r-xl:0.75rem; --r-2xl:1rem; --r-pill:9999px;

  /* ---- Type scale ---- */
  --fs-title:1.25rem; --fs-h3:1rem; --fs-body:0.875rem; --fs-sm:0.8125rem;
  --fs-xs:0.75rem; --fs-mini:0.6875rem; --fs-label:0.625rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--light-bg); color:var(--light-ink);
  font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit; }
button { font:inherit; cursor:pointer; }
.ico { width:1rem; height:1rem; flex-shrink:0; }  /* Heroicons @16px, like the portal */

/* ============================================================================
   PUBLIC (light) — topbar, landing hero
   ============================================================================ */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:64px; padding:0 28px; position:sticky; top:0; z-index:20;
  background:rgba(255,252,246,0.90); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.logo { display:inline-flex; align-items:center; gap:10px; }
.topbar-logo { height:22px; width:auto; display:block; }
.logo-tag {
  font-size:var(--fs-label); font-weight:900; text-transform:uppercase;
  letter-spacing:0.15em; color:var(--light-faint);
}

/* Light CTA — near-black, turns brand blue on hover (the auth button style) */
body:not(.portal) .btn-dark {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--light-ink); color:#fff; border:none;
  border-radius:var(--r-xl); padding:10px 20px;
  font-size:var(--fs-sm); font-weight:900; text-transform:uppercase; letter-spacing:0.1em;
  box-shadow:0 4px 6px -1px rgba(3,57,166,0.20);
  transition:all 200ms;
}
body:not(.portal) .btn-dark:hover { background:var(--blue); }
body:not(.portal) .btn-dark.big { padding:14px 32px; }
.loginbox .btn-dark.big { width:100%; }

.hero { text-align:center; padding:110px 20px; position:relative; }
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size:24px 24px;
}
.hero > * { position:relative; }
.pill {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:var(--r-pill);
  padding:8px 18px; font-size:var(--fs-sm); font-weight:600; margin-bottom:24px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.dot::before { content:""; position:absolute; inset:0; border-radius:50%; background:var(--ok-text); opacity:0.75; animation:ping 1s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping { 75%,100% { transform:scale(2.4); opacity:0; } }
.hero h1 { font-size:56px; font-weight:900; letter-spacing:-0.05em; line-height:1.05; margin-bottom:16px; color:var(--light-ink); }
.hero h1 em {
  font-style:normal;
  background:linear-gradient(135deg,#0339A6 0%,#7C3AED 52%,#E8763C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub {
  color:var(--light-muted); font-size:var(--fs-label); margin-bottom:32px;
  letter-spacing:0.2em; font-weight:900; text-transform:uppercase;
}

/* ============================================================================
   AUTH ENTRY (light) — dotted grid + blue glow, borderless centered card
   ============================================================================ */
.auth-wrap {
  position:relative; min-height:calc(100vh - 64px); overflow:hidden;
  display:flex; align-items:flex-start; justify-content:center;
}
.auth-dots {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size:24px 24px;
}
.auth-glow {
  position:absolute; top:33%; left:50%; transform:translateX(-50%);
  width:500px; height:500px; border-radius:var(--r-pill);
  background:rgba(3,57,166,0.04); filter:blur(64px); pointer-events:none;
}
.loginbox { position:relative; z-index:1; width:100%; max-width:28rem; margin:96px 16px; }
.loginbox h1 {
  font-size:1.875rem; font-weight:900; color:var(--light-ink);
  letter-spacing:-0.05em; line-height:1.1; margin-bottom:8px;
}
.auth-sub { color:var(--light-muted); font-weight:300; margin-bottom:22px; }
.auth-sub a { color:var(--blue); font-weight:500; }

.loginbox label {
  display:block; font-size:var(--fs-label); font-weight:600; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--light-muted); margin-bottom:16px;
}
.loginbox input {
  display:block; width:100%; margin-top:6px;
  background:#fff; border:1px solid var(--light-border); border-radius:var(--r-xl);
  padding:14px 16px; font:inherit; font-size:var(--fs-body); color:var(--light-ink);
  box-shadow:0 1px 2px rgba(0,0,0,0.05); outline:none; transition:all 150ms;
  text-transform:none; letter-spacing:normal;
}
.loginbox input::placeholder { color:var(--light-faint); }
.loginbox input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(3,57,166,0.10); }
.loginbox .muted { color:var(--light-muted); font-size:var(--fs-xs); margin-top:18px; }
.loginbox .muted a { color:var(--blue); font-weight:500; }

.notice {
  background:rgba(3,57,166,0.08); border:1px solid var(--blue-15); color:var(--blue);
  border-radius:var(--r-xl); padding:12px 14px; font-size:var(--fs-xs); margin-bottom:16px;
}
.error {
  background:#fef2f2; border:1px solid #fee2e2; color:#dc2626;
  border-radius:var(--r-xl); padding:12px 14px; font-size:var(--fs-xs); margin-bottom:16px;
}

/* ============================================================================
   PORTAL SHELL (dark) — fixed 240px zinc-950 rail + black canvas
   ============================================================================ */
.portal { background:var(--bg-canvas); color:var(--text-body); display:flex; min-height:100vh; }

.sidebar {
  position:fixed; top:0; left:0; height:100vh; z-index:20;
  width:15rem; display:flex; flex-direction:column;
  background:var(--bg-chrome); border-right:1px solid var(--border);
}
.sb-brand { padding:2.5rem 1.5rem 1.25rem; border-bottom:1px solid var(--border); }
.sb-logo { height:20px; width:auto; display:block; margin:0 0 10px 2px; }
.portal-pill {
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r-pill);
  background:var(--blue-15); color:var(--blue-text);
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:0.15em;
}
.sb-nav { flex:1; padding:1rem 0.75rem; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.sb-head {
  font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-subtle); padding:16px 12px 6px;
}
.sb-nav a {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 12px; border-radius:var(--r-xl);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-body);
  transition:all 150ms;
}
.sb-nav a:hover { color:#fff; background:var(--border); }
.sb-nav a.active { color:var(--blue-text); background:var(--blue-20); }
.sb-footer { padding:0.75rem; border-top:1px solid var(--border); }
.sb-user { display:flex; align-items:center; gap:10px; padding:4px 8px; }
.avatar-fb {
  width:32px; height:32px; border-radius:var(--r-pill); flex-shrink:0;
  background:var(--blue-25); color:var(--blue-text);
  font-weight:700; font-size:var(--fs-sm);
  display:flex; align-items:center; justify-content:center;
}
.sb-name { flex:1; min-width:0; font-size:var(--fs-sm); color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-logout {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:var(--r-lg); background:none; border:none; color:var(--text-subtle); transition:all 150ms;
}
.sb-logout:hover { color:var(--err-text); background:var(--err-bg); }

.portal-main { flex:1; margin-left:15rem; min-height:100vh; }
.portal-inner { max-width:64rem; margin:0 auto; padding:2.5rem 2rem; }

/* ---- Portal typography ---- */
.portal h1, .portal .pagetitle { font-size:var(--fs-title); font-weight:700; color:var(--text); margin-bottom:4px; }
.portal .vtitle { font-size:var(--fs-title); font-weight:700; color:var(--text); margin:16px 0 2px; }
.portal .muted { color:var(--text-muted); font-size:var(--fs-body); margin:2px 0 24px; }
.portal .muted a, .portal td a { color:var(--blue-text); }

/* ---- Portal buttons: solid blue primary / raised-zinc secondary ---- */
.portal .btn-dark {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blue); color:#fff; border:none; border-radius:var(--r-xl);
  padding:10px 24px; font-size:var(--fs-body); font-weight:600; transition:all 150ms;
}
.portal .btn-dark:hover { background:var(--blue-hover); }
.portal .btn-dark.big { padding:12px 28px; }
.portal .btn-dark.small { padding:6px 14px; font-size:var(--fs-xs); }
.portal .btn-outline {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-raised); color:var(--text-body); border:none; border-radius:var(--r-xl);
  padding:8px 16px; font-size:var(--fs-xs); font-weight:600; transition:all 150ms;
}
.portal .btn-outline:hover { background:var(--bg-raised-hover); color:#fff; }

/* ============================================================================
   ANA SAYFA HUB — üç büyük hedef: videolar | görevler, altta puan tablosu
   ============================================================================ */
.hubgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.hubcard {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-2xl);
  padding:26px 24px 22px; color:inherit; transition:border-color 200ms, background 200ms, transform 200ms;
}
.hubcard:hover {
  border-color:var(--blue-40); background:var(--bg-card-solid); transform:translateY(-2px);
}
.hubico {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-xl); margin-bottom:8px;
  background:var(--blue-15); color:var(--blue-text); border:1px solid var(--blue-25);
  transition:background 200ms;
}
.hubico .ico { width:1.375rem; height:1.375rem; }
.hubcard:hover .hubico { background:var(--blue-25); }
.portal .hubcard h2 { font-size:1.125rem; font-weight:700; color:var(--text); }
.hubcard p { font-size:var(--fs-body); color:var(--text-muted); line-height:1.5; }
.hubstat {
  font-size:var(--fs-mini); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-subtle); background:var(--bg-raised); border-radius:var(--r-pill);
  padding:4px 10px; margin-top:10px;
}
.hubgo { margin-top:14px; font-size:var(--fs-body); font-weight:600; color:var(--blue-text); }
/* 768px: sidebar zaten drawer'a düşüyor — hub da tek sütuna insin */
@media (max-width:768px) {
  .hubgrid { grid-template-columns:1fr; }
}

/* ---- Level filter chips (pick-chip pattern) ---- */
.chips { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.portal .chip {
  border:1px solid var(--border-strong); background:var(--bg-raised); color:var(--text-body);
  font-size:var(--fs-mini); font-weight:500; padding:6px 12px; border-radius:var(--r-pill);
  transition:all 150ms;
}
.portal .chip:hover { color:#fff; }
.portal .chip.active { border-color:var(--blue); background:var(--blue); color:#fff; }

/* ---- Video grid ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.vcard { display:block; }
.vcard .thumb {
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/9;
  background:var(--bg-card-solid); border:1px solid var(--border-card); transition:all 200ms;
}
.portal .vcard:hover .thumb { border-color:var(--blue-40); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent 40%, rgba(0,0,0,0.10));
}
.progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.15); z-index:2; }
.progress i { display:block; height:100%; background:var(--blue-text); }
.done .progress i { background:var(--ok); }
.portal .vcard h3 { font-size:var(--fs-body); font-weight:600; color:var(--text); margin:10px 2px 2px; line-height:1.35; transition:color 150ms; }
.portal .vcard:hover h3 { color:var(--blue-text); }
.portal .meta { font-size:var(--fs-mini); color:var(--text-muted); margin:0 2px; }

/* ---- Watch page ---- */
.watchwrap { display:flex; gap:24px; align-items:flex-start; }
.playercol { flex:1; min-width:0; }
.playerbox { border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:16/9; background:#000; border:1px solid var(--border-card); }
.playerbox iframe { width:100%; height:100%; display:block; }
.playlist { width:320px; flex-shrink:0; }
.playlist .head {
  font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-muted); padding:0 8px 10px;
}
.plitem {
  display:flex; gap:10px; align-items:center; padding:8px; border-radius:var(--r-xl);
  font-size:var(--fs-xs); font-weight:500; color:var(--text-body); transition:all 150ms;
}
.plitem:hover { background:var(--border); }
.plitem.current { background:var(--blue-20); color:var(--blue-text); }
.plthumb { position:relative; width:110px; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; flex-shrink:0; background:var(--bg-card-solid); border:1px solid var(--border-card); }

/* ---- Board (task cards) ---- */
.tasks { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; margin-top:20px; }
.taskcard {
  background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-2xl);
  padding:20px; transition:all 200ms;
}
.taskcard:hover { border-color:var(--blue-40); background:var(--bg-card-solid); }
.taskhead { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.taskhead h3 { font-size:var(--fs-h3); font-weight:700; color:var(--text); }
.badge {
  display:inline-block; background:var(--blue); color:#fff;
  font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:2px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.desc { font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:12px; white-space:pre-wrap; line-height:1.6; }
.subform { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.subform input { margin-top:0; flex:1; }
/* plan.md yükleme alanı — tıkla ya da sürükle-bırak. Görünmez input tüm alanı
   kaplar: tıklama dosya seçiciyi açar, bırakılan dosya native olarak input'a düşer. */
.dropzone {
  position:relative; flex-basis:100%; margin-bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:16px 12px; text-align:center; cursor:pointer;
  background:rgba(9,9,11,0.50); border:1px dashed var(--border-input);
  border-radius:var(--r-xl); transition:all 150ms;
}
.dropzone:hover, .dropzone.drag, .dropzone:focus-within {
  border-color:var(--blue-50); background:var(--blue-10);
}
.dropzone input[type=file] {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer;
}
.dropzone .ico { width:1.25rem; height:1.25rem; color:var(--text-subtle); margin-bottom:4px; }
.dropzone b {
  font-size:var(--fs-xs); font-weight:600; color:var(--text-body);
  text-transform:none; letter-spacing:normal;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dropzone span { font-size:var(--fs-mini); color:var(--text-subtle); text-transform:none; letter-spacing:normal; }
.dropzone.has-file { border-style:solid; border-color:var(--ok-border); background:var(--ok-bg); }
.dropzone.has-file .ico, .dropzone.has-file b { color:var(--ok-text); }

/* Örnek proje canlı önizlemesi — önizlemenin kendisi bağlantı: iframe tıklamaları
   yutmasın diye pointer-events:none, tıklama <a>'ya düşer ve site yeni sekmede açılır */
.example-preview {
  display:block; position:relative; height:200px; overflow:hidden; margin-bottom:12px;
  border-radius:var(--r-xl); border:1px solid var(--border-card); background:var(--bg-card-solid);
  cursor:pointer; transition:border-color 150ms;
}
.example-preview:hover { border-color:var(--blue-50); }
.example-preview::after {
  content:"Yeni sekmede aç ↗";
  position:absolute; right:8px; bottom:8px; padding:4px 10px;
  background:rgba(9,9,11,0.85); border:1px solid var(--border-card); border-radius:var(--r-pill);
  font-size:var(--fs-mini); font-weight:600; color:var(--text-body);
  opacity:0; transition:opacity 150ms; pointer-events:none;
}
.example-preview:hover::after { opacity:1; }
.example-preview iframe {
  /* 400% + scale(0.25) = fills the container exactly, rendering the site at
     a 4x-container viewport — no dead space regardless of card width */
  width:400%; height:400%; border:0;
  transform:scale(0.25); transform-origin:0 0;
  pointer-events:none;
}

/* Status pills — tinted, per the portal status-pill pattern */
.substatus {
  display:inline-block; font-size:var(--fs-mini); font-weight:700;
  padding:4px 12px; border-radius:var(--r-pill); margin-bottom:10px;
}
.st-pending   { background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-border); }
.st-reviewing { background:rgba(59,130,246,0.15); color:var(--blue-text); }
.st-passed    { background:rgba(16,185,129,0.15); color:var(--ok-text); }
.st-failed    { background:var(--err-bg); color:var(--err-text); border:1px solid var(--err-border); }
.feedback {
  font-size:var(--fs-xs); color:var(--text-body);
  background:rgba(9,9,11,0.50); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); padding:10px 12px; margin-bottom:8px; line-height:1.55;
}

/* ---- Portal forms (zinc-800 fields, blue/50 focus) ---- */
.portal label {
  display:block; font-size:var(--fs-label); font-weight:600; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-muted); margin-bottom:14px;
}
.portal input, .portal select, .portal textarea {
  display:block; width:100%; margin-top:6px;
  background:var(--bg-raised); border:1px solid var(--border-card); border-radius:var(--r-xl);
  padding:10px 14px; font:inherit; font-size:var(--fs-body); color:var(--text);
  outline:none; transition:border-color 150ms; text-transform:none; letter-spacing:normal;
}
.portal input::placeholder, .portal textarea::placeholder { color:var(--text-subtle); }
.portal input:focus, .portal select:focus, .portal textarea:focus { border-color:var(--blue-50); }
.portal textarea { resize:none; }
.portal select option { background:var(--bg-card-solid); color:var(--text); }

/* ---- Admin panels: card + 10px eyebrow section titles ---- */
.admingrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:20px; }
/* grid items default to min-width:auto — wide row-forms would expand the track and
   paint over the neighboring panel; min-width:0 + overflow makes them scroll inside */
.admingrid > * { min-width:0; }
.panel { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--r-2xl); padding:20px; overflow-x:auto; }
.panel.wide { margin-top:16px; }
.panel h2 {
  font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-muted); margin-bottom:14px;
}

/* Gönderimler: öğrencinin yüklediği plan.md içeriği */
.plan-details summary { cursor:pointer; font-size:var(--fs-xs); color:var(--blue-text); }
.plan-pre {
  max-height:320px; max-width:420px; overflow:auto; white-space:pre-wrap; margin-top:6px;
  background:rgba(9,9,11,0.50); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); padding:10px 12px; font-size:var(--fs-mini); line-height:1.55;
  color:var(--text-body);
}

/* ---- Demo cards (interactive HTML demos) ---- */
.demo-card { display:block; color:inherit; text-decoration:none; transition:border-color 200ms; }
.demo-card:hover { border-color:var(--blue-40); }
.demo-card h3 { font-size:var(--fs-body); font-weight:600; color:var(--text); margin-bottom:6px; }
.demo-card:hover h3 { color:var(--blue-text); }

/* ---- Leaderboard ---- */
.mecard { display:flex; align-items:center; gap:16px; margin:20px 0 24px; flex-wrap:wrap; }
.me-rank {
  font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; color:var(--blue-text);
  background:var(--blue-20); border-radius:var(--r-xl); padding:8px 14px; line-height:1;
}
.avatar-fb.big { width:44px; height:44px; font-size:var(--fs-h3); }
.me-id { flex:1; min-width:120px; }
.me-id h3 { font-size:var(--fs-h3); font-weight:700; color:var(--text); }
.mecard .meta { font-size:var(--fs-mini); color:var(--text-muted); margin:2px 0 0; }
.me-stats { display:flex; gap:22px; text-align:right; }
.me-stats div { display:flex; flex-direction:column; gap:2px; }
.me-stats b { font-size:var(--fs-h3); font-weight:700; color:var(--text-body); line-height:1.2; }
.me-stats span { font-size:var(--fs-mini); color:var(--text-subtle); }
.me-total b { font-size:1.5rem; color:var(--blue-text); letter-spacing:-0.03em; }

.lb { display:flex; flex-direction:column; gap:6px; }
.lbrow {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl);
}
.lbrow.mine { border-color:var(--blue-40); background:var(--blue-10); }
.lbrank {
  width:26px; flex-shrink:0; text-align:center; font-size:var(--fs-sm); font-weight:700;
  color:var(--text-subtle); font-variant-numeric:tabular-nums;
}
.lbrow.m1 .lbrank { color:#fbbf24; }
.lbrow.m2 .lbrank { color:#d4d4d8; }
.lbrow.m3 .lbrank { color:#d69f6a; }
.lbrow.m1 { border-color:rgba(245,158,11,0.30); }
.lbname { flex:1; min-width:0; font-size:var(--fs-body); font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbmeta { font-size:var(--fs-mini); color:var(--text-subtle); white-space:nowrap; }
.lbpts { font-size:var(--fs-h3); font-weight:700; color:var(--blue-text); font-variant-numeric:tabular-nums; }
.lbpts small { font-size:var(--fs-mini); font-weight:600; color:var(--text-subtle); margin-left:1px; }
.portal .lbnote { font-size:var(--fs-mini); color:var(--text-subtle); line-height:1.7; margin-top:18px; }

/* ---- Tables (dark) ---- */
.portal table { width:100%; border-collapse:collapse; font-size:var(--fs-xs); background:transparent; }
.portal th, .portal td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-subtle); }
.portal th { font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-subtle); }
.portal td { color:var(--text-body); }
form.inline { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
form.inline input, form.inline select { margin-top:0; width:auto; }

/* Panel içi öğe listeleri (video/görev) — tablo değil satır blokları: başlık üstte,
   kontroller altta sarar, dar panelde yana taşma olmaz */
.minilist { margin-top:14px; border-top:1px solid var(--border-subtle); }
.itemrow { padding:12px 0; border-bottom:1px solid var(--border-subtle); }

/* Yönetici paneli (.stack): paneller alt alta tam genişlik, her öğe tek satır —
   başlık solda, kontroller sağda. Dar sütun yok, kırpılma yok. */
.admingrid.stack { grid-template-columns:1fr; }
.admingrid.stack .panel > form { max-width:28rem; }
.admingrid.stack .itemrow { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.admingrid.stack .item-title { margin-bottom:0; flex:1 1 220px; min-width:0; }
.admingrid.stack .item-controls .urlform { flex:1 1 auto; }
.admingrid.stack .item-controls .urlform input { flex:1; min-width:180px; }
.item-title { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.item-title span:first-child { font-size:var(--fs-xs); font-weight:600; color:var(--text-body); }
.item-meta { font-size:var(--fs-mini); color:var(--text-subtle); white-space:nowrap; }
.item-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.item-controls .urlform { flex:1 1 100%; }
.item-controls .urlform input { flex:1; min-width:0; }

/* ============================================================================
   MOBILE NAV — the drawer chrome. Hidden on desktop; the @media block below is
   the only place it becomes visible, so desktop rendering is untouched.
   Pure CSS: #navtoggle is a hidden checkbox, the hamburger and the scrim are
   both <label for="navtoggle">, and `:checked ~` slides the rail in. No JS, and
   navigating to a new page resets the checkbox, so the drawer closes on tap.
   ============================================================================ */
/* The drawer is built from a checkbox and two <label>s, which the portal form
   styles above would otherwise claim (`.portal input` forces display:block +
   width:100%, `.portal label` adds uppercase and margins). Re-specify here. */
.portal .navtoggle { display:none; }
.portal .mobilebar, .portal .nav-scrim,
.mobilebar, .nav-scrim { display:none; }
.portal .hamburger, .hamburger {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0 0 0 -10px;   /* 44px = iOS minimum tap target */
  border-radius:var(--r-xl); color:var(--text-body); cursor:pointer;
  font-size:inherit; text-transform:none; letter-spacing:normal;
  -webkit-tap-highlight-color:transparent;
}
.hamburger:active { background:var(--border); }
.hamburger .ico { width:1.5rem; height:1.5rem; }
.hamburger .i-close { display:none; }
.navtoggle:checked ~ .mobilebar .hamburger .i-menu { display:none; }
.navtoggle:checked ~ .mobilebar .hamburger .i-close { display:block; }

/* ============================================================================
   RESPONSIVE — phone/tablet only. Everything above this line is the desktop
   design and stays exactly as it was.
   ============================================================================ */
@media (max-width:768px) {

  /* ---- Portal shell: fixed top bar + off-canvas rail ---- */
  /* Clipped rather than display:none, so the checkbox stays focusable and Space
     opens the drawer. Only on mobile — on desktop it stays display:none so it
     never becomes a stray tab stop there. */
  .portal .navtoggle {
    display:block; position:absolute; width:1px; height:1px;
    margin:0; padding:0; opacity:0; border:0;
  }
  .portal .navtoggle:focus-visible ~ .mobilebar .hamburger {
    outline:2px solid var(--blue-text); outline-offset:-4px;
  }

  .portal .mobilebar, .mobilebar {
    display:flex; align-items:center; gap:10px;
    position:fixed; top:0; left:0; right:0; z-index:30; height:56px; padding:0 16px;
    background:var(--bg-chrome); border-bottom:1px solid var(--border);
    margin:0;
  }
  .mb-brand { display:inline-flex; align-items:center; height:44px; padding:0 4px; }
  .mb-logo { height:18px; width:auto; display:block; }

  .sidebar {
    width:17rem; max-width:82vw; z-index:40;
    transform:translateX(-100%); transition:transform 220ms ease;
  }
  .navtoggle:checked ~ .sidebar { transform:translateX(0); }
  .sb-brand { padding:1.25rem 1.5rem 1rem; }
  /* roomier rows — 12px is a fine mouse target and a poor thumb one */
  .sb-nav a { padding:12px; font-size:var(--fs-body); }
  .sb-nav .ico { width:1.125rem; height:1.125rem; }
  .sb-me { min-height:44px; }
  .sb-logout { width:40px; height:40px; }
  .portal .chip { padding:9px 14px; }   /* ~38px tall instead of 32px */

  .portal .navtoggle:checked ~ .nav-scrim, .navtoggle:checked ~ .nav-scrim {
    display:block; position:fixed; inset:0; z-index:35; margin:0;
    background:rgba(0,0,0,0.55);
  }

  .portal-main { margin-left:0; padding-top:56px; }   /* clears the fixed bar */
  /* flex items default to min-width:auto, which would let a wide table stretch
     the whole main column and scroll the page sideways */
  .portal-main { min-width:0; }
  .portal-inner { padding:1.5rem 1rem 3rem; }

  /* ---- Inputs: iOS zooms the whole page on focus below 16px ---- */
  .portal input, .portal select, .portal textarea,
  .loginbox input, .loginbox select { font-size:1rem; }

  /* ---- Grids collapse to one column ---- */
  .grid, .tasks, .admingrid { grid-template-columns:1fr; }
  /* grid items default to min-width:auto, so a wide table inside one would push
     the whole column past the viewport instead of scrolling within its card */
  .grid > *, .tasks > *, .admingrid > * { min-width:0; }

  /* ---- Tables scroll inside their card instead of widening the page ---- */
  .panel { padding:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .portal table { min-width:34rem; }

  /* ---- Forms stack ---- */
  .subform { flex-direction:column; align-items:stretch; }
  .subform .btn-dark { width:100%; }
  form.inline { flex-wrap:wrap; }
  form.inline input, form.inline select { width:100%; margin-top:6px; }

  /* ---- Watch page ---- */
  /* align-items:flex-start is what keeps the playlist from stretching tall on
     desktop; once stacked it would shrink the player to its content width, so
     the cross axis has to go back to stretch here */
  .watchwrap { flex-direction:column; align-items:stretch; gap:20px; }
  .playlist { width:100%; }
  .plthumb { width:88px; }
  /* there is no `.plthumb img` rule, so the 320px YouTube still renders at its
     natural size and gets cropped to the top-left corner. Same on desktop —
     left alone there deliberately, since desktop was to stay untouched. */
  .plthumb img { width:100%; height:100%; object-fit:cover; display:block; }

  /* ---- Leaderboard ---- */
  .me-stats { width:100%; justify-content:space-between; text-align:left; gap:12px; }
  .lbmeta { display:none; }
  .mecard { gap:12px; }

  /* ---- Board card head: badge drops under a long title ---- */
  .taskhead { flex-wrap:wrap; }

  /* ---- Public / auth pages ---- */
  .topbar { padding:0 16px; gap:12px; }
  .logo-tag { white-space:nowrap; }
  body:not(.portal) .btn-dark { white-space:nowrap; padding:10px 16px; }
  .hero { padding:64px 20px; }
  .hero h1 { font-size:40px; }
  .loginbox { margin:40px 16px 64px; }
  .auth-wrap { min-height:auto; }
}

/* Narrow phones — most of the range (iPhone 12/13/14/15 are 390pt). Trims the
   last bits of horizontal pressure; the "AI ACADEMY" tag is the first thing to
   go so the logo and the sign-in button each get a single line. */
@media (max-width:480px) {
  .logo-tag { display:none; }
  .hero h1 { font-size:34px; }
  .loginbox h1 { font-size:1.5rem; }
  .portal-inner { padding:1.25rem 0.875rem 3rem; }
  .chips { gap:6px; }
  .portal .chip { padding:9px 11px; }   /* narrower, but keep the taller target */
}

/* ============================================================================
   PROFILE — sidebar chip links here; also the forced stop for students whose
   onboarding never finished (null nickname).
   ============================================================================ */
.sb-me {
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  padding:4px 6px; margin:-4px -6px; border-radius:var(--r-lg);
  color:inherit; text-decoration:none; transition:background 150ms;
}
.sb-me:hover { background:var(--border); }
.sb-me:hover .sb-name { color:var(--text); }
.sb-me.active .sb-name { color:var(--blue-text); }

.profilewrap { max-width:32rem; margin-top:20px; }
.fieldnote {
  font-size:var(--fs-mini); line-height:1.6; color:var(--text-subtle);
  margin:-10px 0 16px; text-transform:none; letter-spacing:normal; font-weight:400;
}
.portal label .fieldnote { display:block; margin:6px 0 0; }
.portal input:disabled { opacity:0.55; cursor:not-allowed; }
.profilewrap .btn-dark { margin-top:6px; }

/* onboarding form runs long — the light auth card needs the same field-note
   treatment plus a styled <select>, which only the portal had */
.loginbox .fieldnote { display:block; color:var(--light-muted); margin:6px 0 0; }
.loginbox select {
  display:block; width:100%; margin-top:6px;
  background:#fff; border:1px solid var(--light-border); border-radius:var(--r-xl);
  padding:14px 16px; font:inherit; font-size:var(--fs-body); color:var(--light-ink);
  box-shadow:0 1px 2px rgba(0,0,0,0.05); outline:none; transition:all 150ms;
  text-transform:none; letter-spacing:normal;
}
.loginbox select:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(3,57,166,0.10); }
.loginbox .auth-sub b { font-weight:600; color:var(--light-ink); }