:root{
  /* Larang browser HP "membalik" warna situs (auto/force dark) —
     tanpa ini, sidebar gelap bisa dirender pucat & teks putih jadi tak terbaca */
  color-scheme: light only;
  --bg:#0f172a; --card:#fff; --ink:#0f172a; --muted:#64748b;
  --brand:#1d4ed8; --brand2:#0ea5e9; --line:#e2e8f0;
  --ok:#16a34a; --bad:#dc2626; --warn:#b45309;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:#f1f5f9;line-height:1.55;-webkit-text-size-adjust:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}
a{color:var(--brand)}

header.top{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  padding:24px 0 20px;border-radius:0 0 22px 22px;box-shadow:0 10px 30px rgba(2,8,23,.18)}
header.top .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px}
header.top .logo{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:20px}
header.top p{margin:9px 0 0;opacity:.95;font-size:14px;max-width:62ch}

nav{position:sticky;top:0;z-index:9;background:#ffffffe6;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 16px}
nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:14px;padding:7px 12px;
  border-radius:999px;background:#eff6ff;color:var(--brand)}
nav a.active{background:var(--brand);color:#fff}

section{margin:20px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 6px 18px rgba(2,8,23,.05);margin-bottom:16px}
h1{font-size:22px;margin:4px 0 2px}
h2{font-size:19px;margin:0 0 6px}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.badge{display:inline-block;background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:10px}

.mode-banner{font-size:13px;font-weight:600;padding:9px 14px;border-radius:12px;margin:14px 0;border:1px solid}
.mode-banner.local{background:#fffbeb;border-color:#fcd34d;color:var(--warn)}
.mode-banner.supabase{background:#f0fdf4;border-color:#86efac;color:var(--ok)}

.field{margin:0 0 13px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;font-size:15px;font-family:inherit;background:#fff}
.field input[type=file]{padding:10px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}

.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:12px;
  padding:13px 18px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
.btn.alt{background:#0f766e}
.btn.small{padding:9px 13px;font-size:13.5px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed}

.msg{padding:12px 14px;border-radius:12px;font-size:14px;margin-top:12px;display:none}
.msg.show{display:block}
.msg.ok{background:#f0fdf4;border:1px solid #86efac;color:var(--ok)}
.msg.err{background:#fef2f2;border:1px solid #fca5a5;color:var(--bad)}

.gallery{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.gallery{grid-template-columns:1fr 1fr}}
.karya{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 5px 14px rgba(2,8,23,.05)}
.karya model-viewer{width:100%;height:240px;background:#e8eef6;display:block}
.karya-info{padding:12px 14px}
.karya-info b{display:block;font-size:15px}
.karya-info>span{display:block;font-size:13px;color:var(--muted);margin:2px 0 8px}
.nilai-badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#f0fdf4;color:var(--ok);border:1px solid #86efac}
.nilai-badge.belum{background:#f8fafc;color:var(--muted);border-color:var(--line)}
.ar-btn{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--brand);
  color:#fff;border:none;border-radius:999px;padding:9px 15px;font-weight:700;font-size:13px;
  box-shadow:0 8px 20px rgba(29,78,216,.4);cursor:pointer}

.grader{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.grader input[type=number]{width:120px}
.grader input[type=text]{flex:1;min-width:140px}
.grader input{padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.save-status{font-size:12.5px;font-weight:700}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14.5px}

footer{color:var(--muted);font-size:12.5px;text-align:center;padding:26px 16px 40px}
.loading{text-align:center;color:var(--muted);padding:24px;font-size:14px}

/* ====== AKUN / LOGIN ====== */
.auth-wrap{max-width:460px;margin:0 auto;padding:0 16px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 12px 34px rgba(2,8,23,.10);margin:18px 0}
.auth-card h1{font-size:21px;margin:0 0 2px}
.seg{display:flex;gap:6px;background:#f1f5f9;border-radius:12px;padding:5px;margin:4px 0 16px}
.seg button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-weight:700;
  font-size:14px;color:var(--muted);cursor:pointer}
.seg button.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(2,8,23,.08)}
.linkrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px}
.linkbtn{background:none;border:none;color:var(--brand);font-weight:600;font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline}
.fold{display:none;border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.fold.open{display:block}
.fold h3{font-size:15px;margin:0 0 4px}
.btn.block{display:block;width:100%;text-align:center}
.btn.ghost{background:#eff6ff;color:var(--brand)}
.tiny{font-size:12.5px;color:var(--muted);margin-top:8px}
.role-pick{display:flex;gap:8px;margin-bottom:13px}
.role-pick label{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px;font-size:14px;
  font-weight:600;text-align:center;cursor:pointer;background:#fff}
.role-pick input{display:none}
.role-pick input:checked + span{color:var(--brand)}
.role-pick label:has(input:checked){border-color:var(--brand);background:#eff6ff}

/* ====== USER BAR (sesudah login) ====== */
.userbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:10px 14px;margin:14px 0}
.userbar .who{font-weight:700;font-size:14px}
.userbar .pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:#eff6ff;color:var(--brand)}
.userbar .pill.guru{background:#f5f3ff;color:#7c3aed}
.userbar .spacer{flex:1}

/* ====== HERO TABS (dashboard) ====== */
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.tabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:999px;cursor:pointer}
.tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.hero{background:linear-gradient(135deg,#eef4ff,#e6f7ff);border:1px solid var(--line);border-radius:18px;
  padding:18px;display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
@media(min-width:640px){.hero{grid-template-columns:1.05fr .95fr}}
.hero-illust{background:#fff;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;
  min-height:200px;overflow:hidden}
.hero-illust svg{width:100%;height:auto;display:block}
.hero h2{font-size:20px;margin:0 0 6px}
.hero p{font-size:14px;color:#334155;margin:0 0 14px}
.panel{display:none}
.panel.active{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.panel.active{grid-template-columns:1.05fr .95fr}}

/* ====== FEATURE GRID ====== */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:640px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:13px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.feat a .fi{width:38px;height:38px;border-radius:10px;background:#eff6ff;display:grid;place-items:center;font-size:19px;flex:none}
.feat a.guru .fi{background:#f5f3ff}

/* ====== DAFTAR AKUN (panel guru) ====== */
.acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin-bottom:9px;background:#fff}
.acct .info{flex:1;min-width:150px}
.acct .info b{display:block;font-size:14.5px}
.acct .info span{font-size:12.5px;color:var(--muted)}
.acct .tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#eff6ff;color:var(--brand)}
.acct .tag.guru{background:#f5f3ff;color:#7c3aed}
.btn.danger{background:#dc2626}
.btn.warnavy{background:#475569}

/* tombol hapus pada kartu karya */
.karya-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* =====================================================================
   MODERN + ANIMASI  (dipakai SEMUA halaman)
   ===================================================================== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulseo{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(13px)}}
@keyframes spark{0%,100%{opacity:0}45%,55%{opacity:1}}

/* header gradient yang bergerak + logo FreeCAD di brand */
header.top{background:linear-gradient(125deg,#1e3a8a,#1d4ed8,#0ea5e9,#1d4ed8);
  background-size:300% 300%;animation:gradientShift 16s ease infinite}
.brand .fclogo{height:26px;width:auto;vertical-align:middle;margin-left:6px;
  background:#fff;border-radius:7px;padding:3px;box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* muncul halus saat scroll (digerbangi .js → tetap tampil bila JS mati) */
.js .reveal{opacity:0}
.js .reveal.in{animation:revealUp .7s cubic-bezier(.2,.7,.2,1) forwards}

/* kartu sedikit hidup saat disentuh */
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(2,8,23,.10)}

/* pita logo (footer semua halaman) */
.brandband{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:24px 0 8px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.brandband img{height:48px;width:auto;display:block}
.brandband img.fc{height:40px}
.brandband .sep{width:1px;height:36px;background:var(--line)}
.brandband .bb-txt{font-size:12px;color:var(--muted);font-weight:600;text-align:left;line-height:1.4}

/* helper animasi untuk ilustrasi SVG */
.gear{transform-box:fill-box;transform-origin:center}
.g-slow{animation:spin 9s linear infinite}
.g-fast{animation:spinr 6s linear infinite}
.fl{animation:floaty 4.5s ease-in-out infinite}
.fl.d1{animation-delay:.6s}.fl.d2{animation-delay:1.2s}
.arglow{animation:pulseo 2.3s ease-in-out infinite}
.tool{animation:slideX 2.6s ease-in-out infinite}
.spark{animation:spark 2.6s ease-in-out infinite}

/* ====== LAYAR LOGIN (landing sangat modern + bergerak) ====== */
.landing{position:relative;overflow:hidden;border-radius:0 0 30px 30px;margin-bottom:8px;color:#fff;
  background:linear-gradient(125deg,#0f2a6b,#1d4ed8,#0ea5e9,#2563eb);background-size:320% 320%;
  animation:gradientShift 16s ease infinite;padding:16px 16px 28px;box-shadow:0 22px 50px rgba(2,8,23,.30)}
.landing .blob{position:absolute;border-radius:50%;background:#fff;filter:blur(12px);opacity:.16;z-index:0}
.landing .lb1{width:210px;height:210px;top:-80px;right:-50px;animation:floaty 11s ease-in-out infinite}
.landing .lb2{width:160px;height:160px;bottom:-70px;left:-40px;opacity:.12;animation:floaty2 8s ease-in-out infinite}
.land-top{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;z-index:2;margin-bottom:6px}
.land-top img{height:50px;width:auto;background:#fff;border-radius:12px;padding:5px;
  box-shadow:0 8px 20px rgba(0,0,0,.20);animation:pop .6s both}
.land-top img.fc{height:42px}
.land-top .lt-sep{width:1px;height:32px;background:rgba(255,255,255,.5)}
.land-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
@media(min-width:760px){.land-grid{grid-template-columns:1.05fr .95fr}}
.land-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.25))}
.land-head{text-align:center}
@media(min-width:760px){.land-head{text-align:left}}
.land-head .chip{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:999px;animation:fadeIn .9s both}
.land-head h1{font-size:25px;line-height:1.18;margin:10px 0 6px;animation:revealUp .7s .1s both}
.land-head p{font-size:13.8px;opacity:.95;margin:0;animation:revealUp .7s .25s both}

/* kartu login bergaya glass */
.glasscard{background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.6);border-radius:22px;
  padding:20px;box-shadow:0 24px 50px rgba(2,8,23,.26);animation:revealUp .7s .15s both}

/* ================= HALAMAN LOGIN: kartu login langsung terlihat tanpa menggulung =================
   Dulu ilustrasi hero yang tinggi mendorong form login jauh ke bawah, sehingga
   pengguna harus scroll dulu untuk bisa masuk. Sekarang:
   - Layar lebar (>=820px): hero di KIRI, kartu login di KANAN (berdampingan),
     jadi keduanya tampil sekaligus tanpa scroll.
   - Layar HP (<820px): hero dipadatkan & ilustrasi diperkecil supaya kartu login
     naik ke layar pertama.
   Penjaga :not([style*="none"]) penting: aturan grid HANYA berlaku saat login
   ditampilkan; ketika pengguna masuk ke dasbor, index.html men-set display:none
   pada #auth-view sehingga [style*="none"] cocok, :not() gagal, dan kartu benar-benar
   tersembunyi (kalau tanpa penjaga, display:grid !important akan memaksanya tetap tampil). */
@media(min-width:820px){
  #auth-view:not([style*="none"]){max-width:1120px;margin:0 auto;display:grid !important;
    grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:16px 16px 10px}
  #auth-view .landing{margin:0;border-radius:26px;padding:20px;height:100%}
  #auth-view .land-grid{grid-template-columns:1fr;gap:8px}
  #auth-view .land-art{max-width:360px;margin:4px auto 0}
  #auth-view .land-art svg{max-height:230px}
  #auth-view .auth-wrap{margin:0;max-width:none;padding:0;align-self:center}
  #auth-view .glasscard{padding:18px}
  #auth-view .field{margin-bottom:11px}
}
@media(max-width:819px){
  .landing{padding:14px 16px 18px}
  .land-top img{height:42px}
  .land-top img.fc{height:36px}
  .land-art{display:none}                 /* ilustrasi disembunyikan di HP supaya kartu
                                             login naik ke layar; tetap tampil di desktop */
  .land-head h1{font-size:21px;margin:8px 0 4px}
  .land-head .chip{font-size:10px;padding:4px 10px}
  .land-head p{font-size:13px;margin-top:3px}
  .auth-wrap{margin-top:-4px}
  .glasscard{padding:16px}
  .glasscard>.seg + form h1,#form-masuk h1,#form-daftar h1{font-size:18px;margin:2px 0 1px}
  .glasscard .sub{font-size:12.5px;margin-bottom:9px}
  .field{margin-bottom:10px}
  .field label{margin-bottom:4px}
}
/* HP berlayar pendek (mis. HP lawas ~640 px): ringkaskan hero lebih jauh supaya
   tombol Masuk pun ikut terlihat tanpa menggulung. */
@media(max-width:819px) and (max-height:700px){
  .land-top img{height:36px}
  .land-head .chip{display:none}
  .land-head p{display:none}
  .land-head h1{font-size:19px;margin:5px 0 3px}
}

/* logo kecil di pojok userbar dashboard */
.userbar .ub-logos{display:flex;align-items:center;gap:8px}
.userbar .ub-logos img{height:26px;width:auto}
.userbar .ub-logos img.fc{height:22px}

/* =====================================================================
   DASHBOARD APP-SHELL  (menu kiri / drawer ☰ + view yang berganti)
   ===================================================================== */
/* di dalam aplikasi, sembunyikan header & footer global → tampil app penuh */
body.in-app header.top, body.in-app > footer{display:none}

.dashbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;color:#fff;min-height:58px;
  background:linear-gradient(125deg,#1e3a8a,#1d4ed8,#0ea5e9,#1d4ed8);background-size:300% 300%;
  animation:gradientShift 16s ease infinite;padding:10px 14px;box-shadow:0 6px 18px rgba(2,8,23,.18)}
.dashbar .db-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.dashbar .db-brand .fclogo{height:22px;width:auto;background:#fff;border-radius:6px;padding:2px}
.dashbar .spacer{flex:1}
.dashbar .who-mini{font-size:13px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.dashbar .who-mini .pill{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.22);color:#fff}
.dashbar .who-mini .pill.guru{background:#fde047;color:#1e293b}

.ham{width:42px;height:38px;border:none;border-radius:11px;background:rgba(255,255,255,.16);cursor:pointer;padding:0}
.ham span{display:block;width:20px;height:2.4px;background:#fff;border-radius:2px;margin:4px auto;transition:.3s}
.nav-open .ham span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.nav-open .ham span:nth-child(2){opacity:0}
.nav-open .ham span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

.shell{position:relative;max-width:1140px;margin:0 auto}
.sidebar{position:fixed;top:0;left:0;z-index:40;width:268px;height:100vh;overflow-y:auto;padding:14px;
  background:linear-gradient(180deg,#0b1f4d,#0f2a6b 55%,#123a86);border-right:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px rgba(2,8,23,.35);
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.nav-open .sidebar{transform:translateX(0)}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(2,8,23,.45);opacity:0;visibility:hidden;transition:.3s}
.nav-open .scrim{opacity:1;visibility:visible}

.side-user{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.side-user .su-ava{width:42px;height:42px;border-radius:12px;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 6px 16px rgba(14,165,233,.35);
  display:grid;place-items:center;font-size:20px}
.side-user b{display:block;font-size:14.5px;line-height:1.2;color:#fff}
.side-user .su-kelas{font-size:12.5px;color:#9fb6e8}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav .snav,.side-nav a{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:none;background:transparent;color:#e7eefb;font-weight:700;font-size:14.5px;
  padding:10px 11px;border-radius:11px;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(2,8,23,.5);
  border-left:3px solid transparent;
  transition:background .17s,color .17s,border-color .17s,transform .12s ease}
.side-nav .snav .si,.side-nav a .si{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:16px;flex:none;
  box-shadow:0 3px 8px rgba(2,8,23,.28);transition:transform .15s ease,box-shadow .15s ease}

/* --- WARNA KHAS TIAP MENU ---
   Tiap item punya warna sendiri (--mc terang untuk teks & tepi, --mc2 untuk gradasi ikon).
   Teks memakai warna cerah yang tetap kontras tinggi di atas sidebar biru gelap. */
.side-nav [data-k="beranda"]     {--mc:#38bdf8;--mc2:#0284c7}
.side-nav [data-k="desain"]      {--mc:#fb923c;--mc2:#ea580c}
.side-nav [data-k="model3d"]     {--mc:#22d3ee;--mc2:#0891b2}
.side-nav [data-k="ar"]          {--mc:#a78bfa;--mc2:#7c3aed}
.side-nav [data-k="kuis"]        {--mc:#fb7185;--mc2:#e11d48}
.side-nav [data-k="materi"]      {--mc:#34d399;--mc2:#059669}
.side-nav [data-k="baca"]        {--mc:#fbbf24;--mc2:#d97706}
.side-nav [data-k="proyeksi"]    {--mc:#818cf8;--mc2:#4f46e5}
.side-nav [data-k="tanya-ai"]    {--mc:#c084fc;--mc2:#9333ea}
.side-nav [data-k="galeri"]      {--mc:#e879f9;--mc2:#c026d3}
.side-nav [data-k="upload"]      {--mc:#60a5fa;--mc2:#2563eb}
.side-nav [data-k="pasang-macro"]{--mc:#a3e635;--mc2:#65a30d}
.side-nav [data-k="template"]    {--mc:#2dd4bf;--mc2:#0d9488}
.side-nav [data-k="guru"]        {--mc:#c4b5fd;--mc2:#8b5cf6}

.side-nav [data-k]{color:var(--mc)}
.side-nav [data-k] .si{background:linear-gradient(135deg,var(--mc),var(--mc2))}

.side-nav .snav:hover,.side-nav a:hover{background:rgba(255,255,255,.08)}
.side-nav [data-k]:hover{border-left-color:var(--mc)}
.side-nav [data-k]:hover .si{transform:scale(1.08);box-shadow:0 5px 14px rgba(2,8,23,.4)}
.side-nav .snav:active,.side-nav a:active{transform:scale(.97)}

/* Item AKTIF: seluruh baris menyala dengan warna menunya, teks jadi putih. */
.side-nav [data-k].active{color:#fff;border-left-color:transparent;
  background:linear-gradient(90deg,var(--mc),var(--mc2));
  box-shadow:0 8px 20px rgba(2,8,23,.4)}
.side-nav .snav.active .si,.side-nav a.active .si{background:rgba(255,255,255,.28)}
.side-nav .danger-link{color:#fda4af}
.side-nav .danger-link .si{background:rgba(244,63,94,.30)}
.side-sep{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:#7f97c9;
  text-transform:uppercase;padding:13px 11px 5px}

.content{padding:16px;min-height:62vh}

/* DESKTOP: sidebar menetap, tombol ☰ disembunyikan.
   PENTING (fix bug): sidebar "menempel" TEPAT DI BAWAH topbar biru (top:58px)
   dan z-index-nya DI BAWAH topbar (20 < 30) — jadi saat halaman di-scroll,
   sidebar putih tidak lagi menutupi topbar biru. */
@media(min-width:980px){
  .ham{display:none}
  .shell{display:grid;grid-template-columns:268px 1fr}
  .sidebar{position:sticky;top:58px;z-index:20;transform:none;box-shadow:none;
    height:calc(100vh - 58px);min-height:0;max-height:none}
  .scrim{display:none}
  .content{padding:22px 26px}
}

/* PERGANTIAN VIEW (animasi halus: muncul + naik) */
.view{display:none}
.view.active{display:block;animation:viewIn .45s cubic-bezier(.2,.7,.2,1) both}

/* ====== BERANDA: welcome hero + visi ====== */
.welcome-hero{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;color:#fff;
  background:linear-gradient(135deg,#0f2a6b,#1d4ed8,#0ea5e9);background-size:200% 200%;
  animation:gradientShift 14s ease infinite;border-radius:20px;padding:20px;
  box-shadow:0 18px 40px rgba(2,8,23,.22)}
@media(min-width:760px){.welcome-hero{grid-template-columns:1fr 1fr}}
.welcome-hero .wh-art{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:10px}
.welcome-hero .wh-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 22px rgba(0,0,0,.25))}
.welcome-hero h1{font-size:23px;line-height:1.22;margin:9px 0 8px}
.welcome-hero .grad{background:linear-gradient(90deg,#fde047,#fca5a5);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-hero p{font-size:14px;opacity:.96;margin:0 0 15px}
.chip2{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:999px;animation:fadeIn .9s both}
.wh-cta{display:flex;flex-wrap:wrap;gap:9px}
.welcome-hero .btn.ghost{background:rgba(255,255,255,.18);color:#fff}

.visi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:16px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.visi>p{color:#334155;font-size:14.5px;margin:6px 0 0}
.visi-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:15px}
@media(min-width:760px){.visi-cards{grid-template-columns:repeat(4,1fr)}}
.vc{background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid var(--line);border-radius:14px;
  padding:15px 13px;text-align:center}
.vc .vi{font-size:28px;display:block;margin-bottom:7px}
.vc b{display:block;font-size:14px;margin-bottom:3px}
.vc p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}

/* ====== AR UKURAN ASLI ====== */
.realsize{background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 18px;margin-top:14px;
  box-shadow:0 6px 18px rgba(2,8,23,.05)}
.rs-row{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px dashed var(--line)}
.rs-row:last-child{border-bottom:none}
.rs-ic{width:46px;height:46px;border-radius:13px;background:#eff6ff;display:grid;place-items:center;
  font-size:23px;flex:none}
.rs-row b{font-size:15px}
.rs-row p{margin:4px 0 0;font-size:13.5px;color:#475569}
.rs-row code{background:#0f172a;color:#7dd3fc;padding:1px 7px;border-radius:6px;font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.ar-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}

/* ====== KUIS (kerjakan + editor guru) ====== */
.kuis-top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.qsoal{font-weight:700;margin:0 0 8px;font-size:15px}
.q{margin:0 0 16px}
.guru-edit{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.qedit{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:12px;background:#f8fafc}
.qe-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.qe-soal{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font-family:inherit;
  font-size:14px;resize:vertical;background:#fff}
.qe-opt{display:flex;align-items:center;gap:10px;margin:8px 0}
.qe-opt input[type=radio]{width:20px;height:20px;flex:none;cursor:pointer}
.qe-optx{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;background:#fff}
.kuis-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:8px}

/* ====== DESAIN 2D: pemilih etiket A4 ====== */
.etk-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.etk-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:#fff;border:2px solid var(--line);border-radius:15px;padding:12px 12px 14px;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.etk-opt:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(2,8,23,.12)}
.etk-opt.active{border-color:var(--brand);box-shadow:0 16px 34px rgba(29,78,216,.20)}
.etk-opt img{width:100%;height:auto;max-height:180px;object-fit:contain;
  border:1px solid var(--line);border-radius:9px;background:#fff}
.etk-opt .etk-num{position:absolute;top:9px;left:9px;width:27px;height:27px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;
  box-shadow:0 4px 10px rgba(29,78,216,.4)}
.etk-opt .etk-lab{font-weight:700;font-size:14px;color:var(--ink);text-align:center}
.etk-opt.active .etk-lab{color:var(--brand)}

.etk-detail{animation:fadeIn .4s both}
.etk-detail h3{font-size:16px;margin:17px 0 5px}
.etk-show{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.etk-show img{width:100%;max-width:660px;height:auto;display:inline-block}
.etk-fields{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
@media(min-width:560px){.etk-fields{grid-template-columns:1fr 1fr}}
.etk-fields>div{background:#f8fafc;border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.etk-fields>div b{font-size:13.5px;color:var(--ink)}
.etk-fields>div span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.etk-3d{margin-top:6px}

/* =====================================================================
   V2 — MODERN & BERANI: animasi saat DITEKAN (ripple + squish),
   AR ukuran asli 1:1 (chip ukuran + tombol menyala), aksesibilitas.
   ===================================================================== */
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rippleGo{to{transform:scale(1);opacity:0}}
@keyframes arPulse{0%,100%{box-shadow:0 8px 20px rgba(29,78,216,.45)}50%{box-shadow:0 10px 32px rgba(14,165,233,.8)}}

/* tombol utama: gradasi + terangkat saat disentuh + mengecil saat ditekan */
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--brand2));
  transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 6px 16px rgba(29,78,216,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(29,78,216,.35)}
.btn:active{transform:scale(.96)}
.btn.ghost{box-shadow:0 4px 12px rgba(2,8,23,.06)}

/* efek riak (ripple) saat ditekan — dibuat oleh ui.js */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.5);
  transform:scale(0);opacity:.85;animation:rippleGo .6s ease-out forwards}
.btn.ghost .ripple,.seg button .ripple,.etk-opt .ripple,nav a .ripple,.toc-r a .ripple,
.role-pick label .ripple,.chip-q .ripple{background:rgba(29,78,216,.20)}

/* elemen lain ikut "hidup" saat ditekan */
.seg button,.etk-opt,.chip-q,.bbtn,.role-pick label,.linkbtn{position:relative;overflow:hidden}
.seg button:active,.etk-opt:active,.chip-q:active,.bbtn:active,.role-pick label:active,
.ham:active,.vc:active,.acct .btn:active{transform:scale(.96)}
.vc{transition:transform .2s ease,box-shadow .2s ease}
.vc:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(2,8,23,.10)}

/* ====== AR 1:1 ====== */
model-viewer{position:relative}
.ar-btn{background:linear-gradient(135deg,var(--brand),var(--brand2));animation:arPulse 2.4s ease-in-out infinite}
/* chip ukuran asli benda (dibuat otomatis oleh ui.js dari model .glb) */
.dim-chip{position:absolute;top:10px;left:10px;z-index:5;background:rgba(11,31,77,.85);color:#e0f2fe;
  font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;pointer-events:none;
  border:1px solid rgba(125,211,252,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:pop .5s both}
/* petunjuk di laptop/PC (AR hanya tersedia dari HP) */
.ar-hint{position:absolute;bottom:10px;right:10px;z-index:5;background:rgba(255,255,255,.92);color:#334155;
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;pointer-events:none;
  border:1px solid var(--line)}
/* tip pemindaian AR — toast bawah, muncul sekali per sesi saat AR dibuka (ui.js).
   Membantu tracking stabil supaya benda tidak terasa bergeser/melompat. */
.ar-tip{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);z-index:9999;
  max-width:min(92vw,440px);background:rgba(11,31,77,.96);color:#eaf4ff;
  font-size:13.5px;line-height:1.45;font-weight:600;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(125,211,252,.45);box-shadow:0 12px 34px rgba(2,10,30,.4);
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ar-tip.in{opacity:1;transform:translate(-50%,0)}
.ar-tip b{color:#fff}

/* topbar: nama panjang tidak merusak baris */
.dashbar .who-mini b{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}

/* konten tidak tertutup topbar saat auto-scroll */
.content{scroll-margin-top:64px}

/* ====== APPLE (iPhone / iPad / Mac) ====== */
/* tombol AR Quick Look (dibuat ui.js hanya di perangkat Apple) */
.ar-ios{display:inline-flex;align-items:center;gap:7px;text-decoration:none;z-index:6;cursor:pointer}
.ar-ios img{display:none}
/* iOS Safari otomatis MEN-ZOOM halaman bila kolom isian berhuruf <16px —
   di iPhone semua input dipaksa 16px supaya layar tidak "loncat" saat mengetik */
@supports (-webkit-touch-callout: none){
  input,select,textarea{font-size:16px !important}
}

/* ===== HEMAT RAM/CPU (HP kelas bawah): kartu karya di luar layar tidak
   dirender sama sekali oleh browser sampai di-scroll mendekat ===== */
.karya{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ===== AR_LOADER — kartu progres profesional (upload & proyeksi) ===== */
.ldr{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:0 6px 18px rgba(2,6,23,.06)}
.ldr-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ldr-spin{width:20px;height:20px;border-radius:50%;border:3px solid #dbeafe;
  border-top-color:var(--brand);animation:ldrspin .8s linear infinite;flex:none}
.ldr.done .ldr-spin{border-color:#16a34a;animation:none}
.ldr.err .ldr-spin{border-color:#dc2626;animation:none}
@keyframes ldrspin{to{transform:rotate(360deg)}}
.ldr-label{font-weight:700;font-size:14px;color:#0f172a;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldr.done .ldr-label{color:#15803d;white-space:normal}
.ldr.err .ldr-label{color:#b91c1c;white-space:normal}
.ldr-pct{font-weight:800;font-size:15px;color:var(--brand);font-variant-numeric:tabular-nums;
  min-width:44px;text-align:right}
.ldr.done .ldr-pct{color:#16a34a}
.ldr-bar{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative}
.ldr-fill{height:100%;width:0%;border-radius:999px;position:relative;
  background:linear-gradient(90deg,#2563eb,#38bdf8,#2563eb);background-size:200% 100%;
  animation:ldrflow 1.4s linear infinite;transition:width .25s ease}
.ldr.indet .ldr-fill{width:38%;position:absolute;left:-38%;animation:ldrindet 1.1s ease-in-out infinite}
@keyframes ldrflow{to{background-position:-200% 0}}
@keyframes ldrindet{0%{left:-38%}100%{left:100%}}
.ldr.done .ldr-fill{background:#16a34a;animation:none}
.ldr.err .ldr-fill{background:#dc2626;animation:none}
.ldr-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12.5px;
  color:#64748b;font-weight:600;font-variant-numeric:tabular-nums}

/* aksesibilitas: fokus keyboard terlihat, hormati pengguna anti-gerak */
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto !important}
}