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

:root{
  --bg:#ffffff;--bg2:#f5f7fb;--surface:#ffffff;--surface2:#f3f5f8;
  --border:rgba(15,23,42,0.10);--border2:rgba(15,23,42,0.14);
  --accent:#d61aa3;--accent2:#ff3dbb;--accent-glow:rgba(214,26,163,0.22);
  --cyan:#0ea5e9;--blue:#2563eb;--purple:#7c3aed;--green:#16a34a;--yellow:#f59e0b;--red:#ef4444;
  --text:#111827;--text2:#374151;--muted:#6b7280;
  --font-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --r-sm:10px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;--r-full:999px;
  --shadow-md:0 10px 28px rgba(2,6,23,0.08);
  --shadow-lg:0 20px 60px rgba(2,6,23,0.10);
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}

html[data-theme="dark"]{
  --bg:#070a12;--bg2:#0b1020;--surface:rgba(255,255,255,0.06);--surface2:rgba(255,255,255,0.085);
  --border:rgba(148,210,255,0.12);--border2:rgba(148,210,255,0.18);
  --text:#eaf2ff;--text2:#b7c8dc;--muted:#86a2bf;
  --shadow-md:0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:0 24px 70px rgba(0,0,0,0.55);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:100%}
body{font-family:var(--font-body);font-size:1rem;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;border:none;outline:none;-webkit-tap-highlight-color:transparent}
select{font:inherit}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}
ul,ol{list-style:none}

/* Hilangkan kotak biru tap/focus bawaan mobile */
a,button,[role="button"],input,select,textarea{-webkit-tap-highlight-color:transparent}
a:focus,button:focus,[role="button"]:focus{outline:none}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(214,26,163,0.16)}

.glass{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md)}
.glass-strong{background:var(--surface);border:1px solid var(--border2);box-shadow:var(--shadow-lg)}
.nav-surface{
  position:relative;border-radius:var(--r-full);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(15,23,42,0.09);
  box-shadow:0 12px 32px rgba(2,6,23,0.07),inset 0 1px 0 rgba(255,255,255,0.9);
}
.nav-surface::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(214,26,163,0.07),rgba(255,255,255,0) 38%,rgba(37,99,235,0.06) 100%);
  opacity:0.85;
}
html[data-theme="dark"] .nav-surface{
  background:rgba(8,12,22,0.78);border:1px solid var(--border);
  box-shadow:0 12px 36px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.05);
}

.shell{width:min(1200px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}
.shell-sm{width:min(500px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}
.shell-md{width:min(640px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}

.site-nav{position:sticky;top:0;z-index:100;padding:14px 0 16px}
.nav-inner{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  column-gap:clamp(12px,2.4vw,28px);
  padding:8px clamp(12px,1.8vw,20px) 8px clamp(14px,2vw,18px);
  min-height:62px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
.brand-logo{height:40px;width:auto;max-width:200px;display:block;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(2,6,23,0.07))}
.brand-name{font-family:var(--font-head);font-weight:800;font-size:0.98rem;letter-spacing:-0.02em}
.brand-sub{display:none}
.nav-links{
  justify-self:center;display:inline-flex;align-items:center;gap:2px;
  max-width:100%;padding:4px;
  border-radius:var(--r-full);
  background:rgba(2,6,23,0.035);border:1px solid rgba(15,23,42,0.06);
  white-space:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
html[data-theme="dark"] .nav-links{background:rgba(255,255,255,0.04);border-color:rgba(148,210,255,0.1)}
.nav-links a{
  padding:8px 16px;border-radius:var(--r-full);
  font-size:0.86rem;font-weight:700;color:rgba(17,24,39,0.72);
  transition:background 200ms var(--ease),color 200ms var(--ease);
}
.nav-links a:hover{color:rgba(17,24,39,0.94);background:rgba(255,255,255,0.72)}
html[data-theme="dark"] .nav-links a{color:rgba(234,242,255,0.76)}
html[data-theme="dark"] .nav-links a:hover{color:rgba(234,242,255,0.96);background:rgba(255,255,255,0.08)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;justify-self:end}
.nav-toolbar{display:inline-flex;align-items:center;gap:8px}
.nav-toolbar-sep{width:1px;height:26px;background:rgba(15,23,42,0.1);flex-shrink:0}
html[data-theme="dark"] .nav-toolbar-sep{background:rgba(148,210,255,0.14)}
.nav-account{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:var(--r-full);
  background:rgba(2,6,23,0.025);border:1px solid rgba(15,23,42,0.07);
}
html[data-theme="dark"] .nav-account{background:rgba(255,255,255,0.04);border-color:rgba(148,210,255,0.12)}
.nav-account-link{
  display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--r-full);
  font-size:0.8rem;font-weight:700;color:rgba(17,24,39,0.74);
  text-decoration:none;white-space:nowrap;
  transition:background 180ms var(--ease),color 180ms var(--ease);
}
.nav-account-link:hover{color:rgba(17,24,39,0.94);background:rgba(2,6,23,0.05)}
.nav-account-link.is-admin{color:var(--accent);background:rgba(214,26,163,0.08)}
.nav-account-link.is-admin:hover{background:rgba(214,26,163,0.14)}
.nav-account-link.is-cta{
  color:#fff;
  background:linear-gradient(135deg,#ff37bd 0%,var(--accent) 50%,#a21caf 100%);
  box-shadow:0 6px 18px rgba(214,26,163,0.22);
}
.nav-account-link.is-cta:hover{filter:saturate(1.06);color:#fff;background:linear-gradient(135deg,#ff37bd 0%,var(--accent) 50%,#a21caf 100%)}
.nav-account-link.is-logout{color:var(--muted)}
.nav-account-link.is-logout:hover{color:var(--red);background:rgba(239,68,68,0.08)}
html[data-theme="dark"] .nav-account-link{color:rgba(234,242,255,0.8)}
html[data-theme="dark"] .nav-account-link:hover{color:rgba(234,242,255,0.96);background:rgba(255,255,255,0.07)}
html[data-theme="dark"] .nav-account-link.is-logout:hover{color:#fca5a5;background:rgba(239,68,68,0.14)}
.nav-desktop-only{display:inline-flex}

.nav-toggle{display:none;width:42px;height:42px;border-radius:var(--r-full);background:rgba(2,6,23,0.03);border:1px solid rgba(15,23,42,0.10);align-items:center;justify-content:center;transition:all 200ms var(--ease);color:rgba(17,24,39,0.78)}
.nav-toggle:hover{background:rgba(2,6,23,0.05);border-color:rgba(15,23,42,0.14);transform:translateY(-1px);color:rgba(17,24,39,0.92)}
.nav-toggle .nav-ico{width:20px;height:20px;display:block}
html[data-theme="dark"] .nav-toggle{background:rgba(255,255,255,0.06);border-color:var(--border);color:rgba(234,242,255,0.88)}
html[data-theme="dark"] .nav-toggle:hover{background:rgba(255,255,255,0.09);border-color:var(--border2);color:rgba(234,242,255,0.96)}
.nav-toggle[aria-expanded="true"]{background:rgba(214,26,163,0.10);border-color:rgba(214,26,163,0.22);color:var(--accent)}

.nav-collapse{display:none;margin-top:10px;border-radius:var(--r-xl);padding:10px;overflow:hidden}
.nav-collapse.is-open{display:block;animation:slideInRight 240ms var(--ease) both}
.nav-collapse-links{display:flex;flex-direction:column;gap:6px;padding:6px}
.nav-collapse-links a{padding:12px 14px;border-radius:var(--r-lg);font-size:0.94rem;font-weight:700;color:rgba(17,24,39,0.76);transition:all 200ms var(--ease)}
.nav-collapse-links a:hover{background:rgba(2,6,23,0.05);color:rgba(17,24,39,0.92)}
html[data-theme="dark"] .nav-collapse-links a{color:rgba(234,242,255,0.82)}
html[data-theme="dark"] .nav-collapse-links a:hover{background:rgba(255,255,255,0.08);color:rgba(234,242,255,0.96)}
.nav-collapse-actions{display:flex;flex-direction:column;gap:10px;padding:10px 6px 6px;border-top:1px solid rgba(15,23,42,0.08)}
html[data-theme="dark"] .nav-collapse-actions{border-top:1px solid rgba(148,210,255,0.12)}

.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:200;animation:toastIn 420ms var(--ease) both;pointer-events:none}
.toast-inner{display:flex;align-items:center;gap:10px;border-radius:var(--r-full);padding:10px 12px 10px 12px;min-width:min(520px,calc(100vw - 28px));max-width:min(720px,calc(100vw - 28px));pointer-events:auto}
.toast-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px rgba(56,189,248,0.12)}
.toast-text{flex:1;font-size:0.88rem;color:var(--text2);line-height:1.45}
.toast-x{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 200ms var(--ease)}
.toast-x:hover{background:rgba(255,255,255,0.08);color:var(--text);border-color:var(--border2);transform:translateY(-1px)}
.toast-ok .toast-dot{background:var(--green);box-shadow:0 0 0 5px rgba(52,211,153,0.12)}
.toast-err .toast-dot{background:var(--red);box-shadow:0 0 0 5px rgba(248,113,113,0.14)}
.toast-info .toast-dot{background:var(--cyan);box-shadow:0 0 0 5px rgba(34,211,238,0.12)}
.toast-hide{animation:toastOut 260ms var(--ease) both}

/* Alert inline (halaman tanpa redirect) */
.alert{animation:alertSlideIn 0.45s var(--ease) both}
@keyframes alertSlideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Halaman konten: masuk halus */
main > *:first-child{animation:pageShellIn 0.5s var(--ease) both}
@keyframes pageShellIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Video player */
.video-wrap{position:relative;border-radius:16px;overflow:hidden}
/* Dropzone upload */
.dropzone{border:1px dashed rgba(15,23,42,0.20);background:rgba(2,6,23,0.02);border-radius:var(--r-lg);padding:14px 14px;transition:all 180ms var(--ease);outline:none}
.dropzone:hover{background:rgba(2,6,23,0.03);border-color:rgba(15,23,42,0.26)}
.dropzone:focus{box-shadow:0 0 0 4px rgba(214,26,163,0.16);border-color:rgba(214,26,163,0.4)}
html[data-theme="dark"] .dropzone{border-color:rgba(148,210,255,0.20);background:rgba(255,255,255,0.04)}
html[data-theme="dark"] .dropzone:hover{background:rgba(255,255,255,0.06);border-color:rgba(148,210,255,0.28)}
.dz-top{display:flex;gap:12px;align-items:center}
.dz-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(214,26,163,0.10);color:var(--accent);border:1px solid rgba(214,26,163,0.20)}
.dz-bar{height:10px;border-radius:999px;background:rgba(2,6,23,0.06);overflow:hidden;border:1px solid rgba(15,23,42,0.10)}
.dz-bar-inner{height:100%;width:0%;background:linear-gradient(135deg,#ff37bd 0%,var(--accent) 55%,#a21caf 100%);border-radius:999px;transition:width 120ms linear}
html[data-theme="dark"] .dz-bar{background:rgba(255,255,255,0.06);border-color:rgba(148,210,255,0.14)}

/* WhatsApp floating button + note */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:210;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#ffffff;box-shadow:0 18px 40px rgba(22,163,74,0.28);border:1px solid rgba(255,255,255,0.28);transition:transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(22,163,74,0.34)}
.wa-fab svg{width:26px;height:26px;display:block}
.wa-note{position:fixed;right:86px;bottom:22px;z-index:210;max-width:min(260px,calc(100vw - 120px));background:rgba(255,255,255,0.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(15,23,42,0.10);box-shadow:0 18px 44px rgba(2,6,23,0.14);border-radius:16px;padding:12px 12px 12px 14px;opacity:0;transform:translateX(10px);pointer-events:none;transition:all 220ms var(--ease)}
.wa-note.is-show{opacity:1;transform:translateX(0);pointer-events:auto}
.wa-note-text{font-size:0.86rem;color:rgba(17,24,39,0.72);line-height:1.45}
.wa-note-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:999px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.7);color:rgba(17,24,39,0.7);display:flex;align-items:center;justify-content:center;transition:all 180ms var(--ease)}
.wa-note-x:hover{background:rgba(2,6,23,0.05);color:rgba(17,24,39,0.9)}
html[data-theme="dark"] .wa-note{background:rgba(8,12,22,0.72);border-color:var(--border);box-shadow:0 18px 44px rgba(0,0,0,0.42)}
html[data-theme="dark"] .wa-note-text{color:rgba(234,242,255,0.80)}
html[data-theme="dark"] .wa-note-x{background:rgba(255,255,255,0.06);border-color:var(--border);color:rgba(234,242,255,0.78)}
html[data-theme="dark"] .wa-note-x:hover{background:rgba(255,255,255,0.10);color:rgba(234,242,255,0.96)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-full);font-family:var(--font-body);font-weight:600;font-size:0.9rem;padding:11px 22px;transition:all 200ms var(--ease);cursor:pointer;outline:none;border:none;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#ff37bd 0%,var(--accent) 45%,#a21caf 100%);color:#ffffff;box-shadow:0 10px 26px rgba(214,26,163,0.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(214,26,163,0.30);filter:saturate(1.05)}
.btn-ghost{background:rgba(2,6,23,0.03);color:rgba(17,24,39,0.78);border:1px solid rgba(15,23,42,0.10)}
.btn-ghost:hover{background:rgba(2,6,23,0.05);color:rgba(17,24,39,0.92);border-color:rgba(15,23,42,0.14);transform:translateY(-1px)}
html[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,0.06);color:rgba(234,242,255,0.82);border-color:var(--border)}
html[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,0.09);color:rgba(234,242,255,0.96);border-color:var(--border2)}
.btn-ghost.is-active{background:rgba(214,26,163,0.10);border-color:rgba(214,26,163,0.22);color:rgba(17,24,39,0.92);box-shadow:0 10px 26px rgba(214,26,163,0.14)}
html[data-theme="dark"] .btn-ghost.is-active{background:rgba(214,26,163,0.16);border-color:rgba(214,26,163,0.28);color:rgba(234,242,255,0.96)}
.btn-sm{padding:8px 16px;font-size:0.8rem}
.btn-lg{padding:15px 34px;font-size:1rem}
.btn-full{width:100%;justify-content:center}

.badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-full);font-size:0.71rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.badge-blue{background:rgba(56,189,248,0.13);color:var(--accent);border:1px solid rgba(56,189,248,0.22)}
.badge-green{background:rgba(52,211,153,0.12);color:var(--green);border:1px solid rgba(52,211,153,0.22)}
.badge-yellow{background:rgba(251,191,36,0.12);color:var(--yellow);border:1px solid rgba(251,191,36,0.22)}
.badge-purple{background:rgba(167,139,250,0.12);color:var(--purple);border:1px solid rgba(167,139,250,0.22)}
.badge-cyan{background:rgba(34,211,238,0.12);color:var(--cyan);border:1px solid rgba(34,211,238,0.22)}
.badge-red{background:rgba(248,113,113,0.12);color:var(--red);border:1px solid rgba(248,113,113,0.22)}

h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-0.03em;line-height:1.15;font-weight:800}
h1{font-size:1.85rem}
h2{font-size:1.45rem}
h3{font-size:1.15rem}
h4{font-size:1rem}
.overline{display:inline-flex;align-items:center;gap:8px;font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent)}
.overline::before{content:'';width:18px;height:2px;background:var(--accent);border-radius:2px;flex-shrink:0}
.grad{background:linear-gradient(135deg,#bae6fd 0%,#38bdf8 40%,#22d3ee 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lead{font-size:1.08rem;line-height:1.85;color:var(--text2)}
.muted-text{color:var(--muted)}

.hero{padding:54px 0 42px}
.hero-simple{padding-top:34px}
.hero-simple-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:44px;align-items:center}
.hero-copy{padding:36px 0}
.hero-kicker{font-weight:700;color:var(--accent);letter-spacing:0.03em;margin-bottom:10px}
.hero-h1{font-family:var(--font-head);font-weight:800;letter-spacing:-0.02em;line-height:1.12;font-size:clamp(1.65rem,2.2vw + 1rem,2.45rem);color:rgba(17,24,39,0.86);margin-bottom:16px}
.hero-p{color:rgba(17,24,39,0.62);line-height:1.75;max-width:56ch;margin-bottom:26px}
html[data-theme="dark"] .hero-h1{color:rgba(234,242,255,0.94)}
html[data-theme="dark"] .hero-p{color:rgba(183,200,220,0.88)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:min(440px,100%);height:auto;filter:drop-shadow(0 22px 46px rgba(2,6,23,0.14))}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
.hero-left{display:flex;flex-direction:column;gap:22px;animation:fadeInUp 0.8s var(--ease) both}
.hero-eyebrow{display:flex;align-items:center;gap:10px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 2.2s ease-in-out infinite}
.hero-title{font-size:clamp(1.85rem,3vw + 0.6rem,3rem);line-height:1.06;word-break:break-word;overflow-wrap:anywhere}
.hero-desc{font-size:1.06rem;line-height:1.88;color:var(--text2);max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;margin-top:8px;padding:20px 24px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border)}
.hstat{flex:1;text-align:center;padding:0 16px}
.hstat+.hstat{border-left:1px solid var(--border)}
.hstat strong{display:block;font-family:var(--font-head);font-size:1.7rem;font-weight:800;letter-spacing:-0.04em}
.hstat span{font-size:0.74rem;color:var(--muted)}

.hero-right{animation:fadeInUp 0.8s var(--ease) 0.15s both}
.hero-card{border-radius:var(--r-2xl);padding:28px;min-height:500px;position:relative;overflow:hidden}
.orb{position:absolute;border-radius:50%;animation:float 8s ease-in-out infinite;background:radial-gradient(circle at 28% 28%,rgba(255,255,255,0.75),rgba(56,189,248,0.3) 50%,transparent 75%);border:1px solid rgba(255,255,255,0.22)}
.orb-a{width:230px;height:230px;top:-30px;right:-30px;animation-duration:9s}
.orb-b{width:120px;height:120px;bottom:110px;left:24px;animation-delay:-3.5s;animation-duration:7s}
.orb-c{width:58px;height:58px;top:42%;right:18%;animation-delay:-1.5s;animation-duration:6s}
.mini-player{position:absolute;left:22px;right:22px;bottom:22px;padding:20px 22px;border-radius:var(--r-lg);background:rgba(4,12,22,0.72);border:1px solid rgba(148,210,255,0.14);backdrop-filter:blur(16px)}
.mp-tag{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.mp-title{font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:4px}
.mp-sub{font-size:0.8rem;color:var(--text2);margin-bottom:12px}
.prog-track{height:4px;background:rgba(255,255,255,0.08);border-radius:var(--r-full);overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:var(--r-full)}

.section{padding:78px 0}
.section-head{margin-bottom:62px}
.section-head .overline{margin-bottom:14px}
.section-head h2{font-size:clamp(1.45rem,2.2vw + 0.85rem,2.35rem);margin-bottom:14px}
.section-head p{font-size:1.02rem;color:var(--text2);max-width:60ch;line-height:1.82}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

.feat-card{border-radius:var(--r-xl);padding:28px;transition:transform 260ms var(--ease),border-color 260ms var(--ease),box-shadow 260ms var(--ease);animation:fadeInUp 0.6s var(--ease) both}
.feat-card:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:0 18px 48px rgba(2,6,23,0.10)}
.feat-icon{width:50px;height:50px;border-radius:var(--r-md);margin-bottom:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(214,26,163,0.12),rgba(214,26,163,0.02));border:1px solid rgba(214,26,163,0.18);color:rgba(214,26,163,0.92)}
.feat-icon svg{width:22px;height:22px;display:block}
.feat-card h3{font-size:1rem;margin-bottom:10px}
.feat-card p{font-size:0.87rem;color:var(--text2);line-height:1.78}

.course-card{border-radius:var(--r-xl);padding:26px;display:flex;flex-direction:column;gap:14px;transition:all 280ms var(--ease);animation:fadeInUp 0.65s var(--ease) both;position:relative;overflow:hidden}
.course-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(56,189,248,0.06),transparent 60%);opacity:0;transition:opacity 300ms var(--ease);pointer-events:none}
.course-card:hover{transform:translateY(-6px);box-shadow:0 28px 68px rgba(2,6,23,0.12),0 0 0 1px rgba(214,26,163,0.10)}
.course-card:hover::after{opacity:1}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-price{font-family:var(--font-head);font-size:1.45rem;font-weight:800;letter-spacing:-0.03em}
.course-card h3{font-size:1.1rem;letter-spacing:-0.02em}
.course-card > p{font-size:0.86rem;color:var(--text2);line-height:1.72;flex:1}
.card-meta{display:flex;gap:14px;font-size:0.78rem;color:var(--muted);padding-top:12px;border-top:1px solid rgba(15,23,42,0.08)}
.card-actions{display:flex;gap:8px}

.testi-card{border-radius:var(--r-xl);padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform 260ms var(--ease);animation:fadeInUp 0.6s var(--ease) both}
.testi-card:hover{transform:translateY(-4px)}
.stars{display:flex;gap:2px;font-size:0.82rem;color:var(--yellow);margin-bottom:2px}
.testi-card > p{font-size:0.9rem;color:var(--text2);line-height:1.82;flex:1}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:0.82rem;color:#021220}
.ava-name{font-weight:600;font-size:0.88rem;display:block}
.ava-loc{font-size:0.76rem;color:var(--muted)}

.cta-band{border-radius:var(--r-2xl);padding:54px 38px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fbfbfe);border:1px solid rgba(15,23,42,0.08);box-shadow:var(--shadow-md)}
.cta-band h2{line-height:1.12}
html[data-theme="dark"] .cta-band{background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.05));border-color:var(--border)}
.cta-band::before{content:'';position:absolute;width:520px;height:320px;top:-120px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(214,26,163,0.12),transparent 70%);filter:blur(44px);pointer-events:none}
.cta-band h2{font-size:clamp(1.45rem,2.2vw + 0.85rem,2.35rem);margin-bottom:14px}
.cta-band p{color:var(--text2);margin-bottom:30px;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.82}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.form-label{font-size:0.8rem;font-weight:600;color:var(--text2);letter-spacing:0.03em}
.form-input{width:100%;padding:13px 16px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:0.92rem;transition:all 200ms var(--ease);outline:none}
.form-input textarea{resize:vertical}
.form-input[type="number"]{-moz-appearance:textfield}
.form-input::-webkit-outer-spin-button,.form-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-input{background:var(--surface)}
.form-input::placeholder{color:var(--muted)}
.form-input:focus{border-color:rgba(56,189,248,0.45);background:rgba(56,189,248,0.04);box-shadow:0 0 0 3px rgba(56,189,248,0.10)}
html[data-theme="dark"] .form-input:focus{background:rgba(255,255,255,0.06);box-shadow:0 0 0 3px rgba(214,26,163,0.12);border-color:rgba(214,26,163,0.38)}

.alert{padding:13px 18px;border-radius:var(--r-md);font-size:0.88rem;font-weight:500;margin-bottom:18px}
.alert-err{background:rgba(239,68,68,0.10);border:1px solid rgba(239,68,68,0.22);color:#fca5a5}
.alert-ok{background:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.22);color:#6ee7b7}
.alert-info{background:rgba(56,189,248,0.10);border:1px solid rgba(56,189,248,0.22);color:var(--accent2)}

.auth-page{position:relative;min-height:calc(100vh - 76px);overflow:hidden}
.auth-page-ambient{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 12% 18%,rgba(214,26,163,0.09),transparent 55%),
    radial-gradient(ellipse 60% 45% at 88% 82%,rgba(56,189,248,0.08),transparent 55%);
}
.auth-wrap{position:relative;z-index:1;min-height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;padding:40px 20px 56px}
.auth-shell{width:min(980px,calc(100% - 32px)) !important}
.auth-layout{
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:20px;align-items:stretch;
}
.auth-aside{
  border-radius:var(--r-2xl);padding:32px 28px;display:flex;flex-direction:column;gap:18px;
  min-height:100%;
}
.auth-aside-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.auth-aside-brand img{height:42px;width:auto}
.auth-aside-brand strong{font-family:var(--font-head);font-size:1.05rem;letter-spacing:-0.03em}
.auth-aside-brand span{display:block;font-size:0.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.auth-aside h2{margin:0;font-size:clamp(1.35rem,2vw + 0.6rem,1.75rem);line-height:1.2;max-width:18ch}
.auth-aside > p{margin:0;color:var(--text2);font-size:0.9rem;line-height:1.65;max-width:34ch}
.auth-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.auth-perks li{
  display:flex;align-items:flex-start;gap:10px;font-size:0.86rem;color:var(--text2);line-height:1.55;
  padding:10px 12px;border-radius:14px;background:rgba(2,6,23,0.03);border:1px solid var(--border);
}
.auth-perks li::before{content:'✓';flex-shrink:0;font-weight:800;color:var(--green)}
html[data-theme="dark"] .auth-perks li{background:rgba(255,255,255,0.04)}
.auth-main{display:flex;align-items:center;min-width:0}
.auth-box{border-radius:var(--r-2xl);padding:36px 34px;width:100%;animation:fadeInUp 0.7s var(--ease) both}
.auth-head{margin-bottom:24px}
.auth-head .overline{margin-bottom:10px}
.auth-head h1{font-size:1.75rem;margin-bottom:8px}
.auth-head p{font-size:0.88rem;color:var(--text2);line-height:1.7}
.auth-demo{border-radius:var(--r-lg);padding:16px 18px;margin-bottom:22px}
.auth-demo h4{font-size:0.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;font-family:var(--font-head)}
.auth-demo p{font-size:0.83rem;color:var(--text2);line-height:1.7}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:0.78rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-foot{text-align:center;margin-top:20px;font-size:0.86rem;color:var(--muted)}
.auth-foot a{color:var(--accent);font-weight:600}
.auth-foot a:hover{text-decoration:underline}

.page-hero{border-radius:var(--r-2xl);padding:38px 44px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:28px;animation:fadeInUp 0.7s var(--ease) both}
.page-hero h1{font-size:clamp(1.7rem,3.5vw,2.5rem);margin-bottom:8px}
.page-hero p{color:var(--text2);font-size:0.94rem;max-width:52ch;line-height:1.75}
.page-badge{flex-shrink:0;padding:20px 24px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);text-align:center}
.page-badge strong{display:block;font-family:var(--font-head);font-size:2.2rem;font-weight:800;letter-spacing:-0.04em}
.page-badge span{font-size:0.76rem;color:var(--muted);margin-top:2px;display:block}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{border-radius:var(--r-xl);padding:22px 24px;animation:fadeInUp 0.6s var(--ease) both}
.s-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px}
.s-val{font-family:var(--font-head);font-size:2rem;font-weight:800;letter-spacing:-0.04em}
.s-sub{font-size:0.76rem;color:var(--text2);margin-top:4px}

.panel{border-radius:var(--r-xl);padding:26px 28px;animation:fadeInUp 0.65s var(--ease) both}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.panel-head h2{font-size:1.1rem}

.spark-wrap{display:flex;flex-direction:column;gap:10px}
.spark{width:100%;height:38px}
.spark rect{fill:rgba(214,26,163,0.18)}
html[data-theme="dark"] .spark rect{fill:rgba(255,61,187,0.22)}
.spark-note{font-size:0.86rem;color:var(--muted)}

.table-wrap table td{vertical-align:top}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 14px;text-align:left;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);border-bottom:1px solid var(--border)}
tbody td{padding:14px;font-size:0.87rem;color:var(--text2);border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background 160ms}
tbody tr:hover td{background:rgba(255,255,255,0.02);color:var(--text)}

.clist-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.clist-item:last-child{border-bottom:none}
.clist-info{flex:1;min-width:0}
.clist-info strong{display:block;font-size:0.94rem;font-family:var(--font-head);letter-spacing:-0.01em;margin-bottom:4px}
.clist-meta{font-size:0.76rem;color:var(--muted)}
.clist-prog{flex-shrink:0;width:110px}
.prog-mini{height:5px;background:rgba(255,255,255,0.07);border-radius:var(--r-full);overflow:hidden;margin-bottom:4px}
.prog-mini-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:var(--r-full)}
.prog-label{font-size:0.7rem;color:var(--muted);text-align:right}

.install-wrap{min-height:calc(100vh - 76px);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px 80px}
.install-box{border-radius:var(--r-2xl);padding:48px;animation:fadeInUp 0.7s var(--ease) both}
.install-box h1{font-size:clamp(2rem,5vw,2.6rem);margin:12px 0 12px}
.install-box > p{color:var(--text2);line-height:1.82;margin-bottom:28px}
.step-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.step-item{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);font-size:0.88rem;color:var(--text2);line-height:1.65}
.step-num{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,rgba(56,189,248,0.2),rgba(56,189,248,0.06));border:1px solid rgba(56,189,248,0.25);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:var(--accent);font-family:var(--font-head)}
.install-actions{display:flex;gap:12px;flex-wrap:wrap}
.accounts-box{border-radius:var(--r-xl);padding:22px;margin-top:24px}
.accounts-box h3{font-size:0.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;font-family:var(--font-head)}
.acc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.86rem}
.acc-row:last-child{border-bottom:none}
.acc-label{color:var(--muted);font-size:0.76rem}

.cd-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:28px;align-items:start}
.cd-aside{position:sticky;top:calc(var(--site-nav-h, 88px) + 12px)}
.cd-hero{border-radius:var(--r-2xl);padding:32px 36px;margin-bottom:0;animation:fadeInUp 0.7s var(--ease) both}
.cd-hero .overline{margin-bottom:12px}
.cd-hero h1{font-size:clamp(1.45rem,1.5vw + 1.05rem,2.1rem);margin-bottom:14px}
.cd-hero p{color:var(--text2);font-size:0.95rem;line-height:1.75;max-width:62ch}
.cd-meta{display:flex;gap:8px 0;margin-top:18px;flex-wrap:wrap;align-items:center}
.cd-meta span{
  font-size:0.8rem;
  color:var(--muted);
  font-weight:600;
  padding-right:14px;
  margin-right:14px;
  border-right:1px solid var(--border);
}
.cd-meta span:last-child{border-right:none;margin-right:0;padding-right:0}
.purchase-box{
  border-radius:22px;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation:fadeInUp 0.65s var(--ease) 0.1s both;
}
.purchase-head{
  padding:22px 22px 18px;
  background:linear-gradient(145deg,rgba(56,189,248,0.10),rgba(236,72,153,0.08));
  border-bottom:1px solid var(--border);
}
.purchase-head .overline{margin-bottom:10px}
.purchase-price{
  font-family:var(--font-head);
  font-size:clamp(1.65rem,2.8vw + 0.4rem,2.15rem);
  font-weight:900;
  letter-spacing:-0.04em;
  margin:4px 0 2px;
  line-height:1.1;
}
.purchase-price-note{font-size:0.8rem;color:var(--muted);font-weight:600}
.purchase-perks{
  list-style:none;
  margin:0;
  padding:16px 22px 4px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.purchase-perks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:0.86rem;
  color:var(--text2);
  line-height:1.5;
}
.purchase-perks li::before{
  content:'';
  flex:0 0 18px;
  height:18px;
  margin-top:1px;
  border-radius:999px;
  background:rgba(34,197,94,0.14);
  border:1px solid rgba(34,197,94,0.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.8' fill='none' stroke='%2322c55e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}
.purchase-user-chip{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 22px 0;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(2,6,23,0.03);
  border:1px solid var(--border);
}
html[data-theme="dark"] .purchase-user-chip{background:rgba(255,255,255,0.04)}
.purchase-user-ava{
  flex:0 0 40px;
  width:40px;height:40px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:0.95rem;
  background:linear-gradient(135deg,rgba(56,189,248,0.22),rgba(236,72,153,0.18));
  border:1px solid var(--border);
  color:var(--text);
}
.purchase-user-name{font-weight:800;font-size:0.9rem;line-height:1.3}
.purchase-user-sub{font-size:0.78rem;color:var(--muted);margin-top:2px}
.purchase-actions{padding:16px 22px 6px;display:flex;flex-direction:column;gap:10px}
.purchase-guest-note{
  margin:0;
  font-size:0.82rem;
  color:var(--muted);
  line-height:1.55;
  text-align:center;
}
.purchase-alt-login{
  margin:0;
  font-size:0.84rem;
  color:var(--text2);
  text-align:center;
}
.purchase-alt-login a{font-weight:700;color:var(--accent);text-decoration:none}
.purchase-alt-login a:hover{text-decoration:underline}
.purchase-owned{padding:22px 22px 0}
.purchase-owned-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(34,197,94,0.12);
  border:1px solid rgba(34,197,94,0.35);
  color:var(--green);
  margin-bottom:10px;
}
.purchase-owned-text{margin:0;font-size:0.88rem;color:var(--text2);line-height:1.65}
.purchase-footer{
  padding:12px 22px 20px;
  margin-top:auto;
  text-align:center;
  border-top:1px solid var(--border);
}
.purchase-footer a{
  font-size:0.84rem;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
}
.purchase-footer a:hover{color:var(--accent)}
.outcome-item{display:flex;align-items:flex-start;gap:10px;font-size:0.87rem;color:var(--text2);line-height:1.65;padding:8px 0;border-bottom:1px solid var(--border)}
.outcome-item:last-child{border-bottom:none}
.outcome-item::before{content:'✓';flex-shrink:0;color:var(--green);font-weight:700;margin-top:1px}

.site-footer{padding:34px 0 24px}
.footer-bottom{display:flex;justify-content:center;align-items:center;padding-top:18px;border-top:1px solid rgba(15,23,42,0.08);font-size:0.84rem;color:rgba(17,24,39,0.55)}
html[data-theme="dark"] .footer-bottom{border-top:1px solid rgba(148,210,255,0.12);color:rgba(183,200,220,0.72)}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;min-width:42px;padding:0 12px;border-radius:var(--r-full);background:rgba(2,6,23,0.03);border:1px solid rgba(15,23,42,0.10);transition:all 200ms var(--ease);color:rgba(17,24,39,0.75)}
.theme-toggle:hover{background:rgba(2,6,23,0.05);border-color:rgba(15,23,42,0.14);transform:translateY(-1px)}
.theme-toggle .theme-ico{width:18px;height:18px;display:block}
html[data-theme="light"] .theme-toggle .ico-moon{display:none}
html[data-theme="dark"] .theme-toggle .ico-sun{display:none}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,0.06);border-color:var(--border);color:rgba(234,242,255,0.86)}
html[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,0.09);border-color:var(--border2)}
.theme-toggle-full{width:100%;justify-content:flex-start}
.theme-label{font-size:0.88rem;font-weight:700}
.nav-toolbar .theme-toggle{width:40px;height:40px;min-width:40px;padding:0}

@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-22px) rotate(2deg)}66%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,0.5)}50%{box-shadow:0 0 0 8px rgba(56,189,248,0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(0.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-8px) scale(0.985)}}

.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}.delay-3{animation-delay:0.3s}.delay-4{animation-delay:0.4s}

@media(max-width:1024px){.hero-simple-grid{grid-template-columns:1fr}.hero-copy{padding:14px 0 0}.hero-art{order:2}.grid-4,.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-desktop-only{display:none !important}
  .nav-actions{
    padding:4px;
    border-radius:var(--r-full);
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(15,23,42,0.10);
    box-shadow:0 10px 24px rgba(2,6,23,0.08);
    gap:4px;
  }
  html[data-theme="dark"] .nav-actions{
    background:rgba(8,12,22,0.55);
    border-color:var(--border);
    box-shadow:0 10px 26px rgba(0,0,0,0.32);
  }
  .nav-actions .nav-toggle{
    display:inline-flex;
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    transform:none !important;
  }
  .nav-actions .nav-toggle:hover{
    background:rgba(2,6,23,0.04);
  }
  html[data-theme="dark"] .nav-actions .nav-toggle:hover{
    background:rgba(255,255,255,0.06);
  }
}
@media(max-width:900px){
  .cd-page{grid-template-columns:1fr;gap:20px}
  .cd-aside{position:static}
}
@media(max-width:768px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero{padding:40px 0 44px}
  .section{padding:56px 0}
  .page-hero{flex-direction:column;align-items:flex-start;padding:24px 18px}
  .auth-layout{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-box{padding:26px 18px}
  .install-box{padding:28px 18px}
  .cta-band{padding:38px 18px}
  .cd-hero{padding:24px 18px}
  .hero-h1{font-size:clamp(1.75rem,7.2vw,2.35rem)}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-p{max-width:unset}
  .nav-inner{
    grid-template-columns:auto 1fr auto;
    padding:8px 10px 8px 12px;column-gap:10px;min-height:56px;
  }
  .brand-logo{height:36px;max-width:160px}
  .hero-art{margin-top:10px}
  .hero-art img{width:min(380px,100%);height:auto}
}
@media(max-width:768px){.toast{top:10px}.toast-inner{min-width:calc(100vw - 20px)}}
@media(max-width:480px){
  .shell{width:calc(100% - 32px)}
  .shell-sm,.shell-md{width:calc(100% - 32px)}
  .grid-4,.stats-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{flex-direction:column}
  .hstat+.hstat{border-left:none;border-top:1px solid var(--border);padding:12px 0 0}
  .nav-collapse{padding:8px}
  .nav-collapse-links a{padding:12px 12px}
  .btn-lg{padding:13px 18px;font-size:0.95rem}
  .hero-h1{letter-spacing:-0.03em}
}

/* Admin: tab bar horizontal scroll di mobile */
.admin-tabstrip{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.admin-tabstrip .btn{flex:0 0 auto}

/* Checkout premium layout */
.checkout-shell{padding-top:28px;padding-bottom:72px}
.checkout-hero{margin-bottom:18px}
.checkout-hero-inner{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:stretch;
  justify-content:space-between;
  padding:22px 22px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
}
.checkout-hero-inner::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:420px;height:420px;
  background:radial-gradient(circle at 30% 30%,rgba(236,72,153,0.22),transparent 62%);
  pointer-events:none;
}
.checkout-title{font-size:clamp(1.35rem,4.2vw,2rem);letter-spacing:-0.03em;margin:0 0 8px}
.checkout-lead{max-width:52ch;margin:0}
.co-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.co-pill{
  font-size:0.78rem;font-weight:700;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text2);
}
.checkout-hero-price{
  min-width:200px;
  padding:16px 18px;border-radius:18px;
  background:linear-gradient(145deg,rgba(56,189,248,0.14),rgba(236,72,153,0.12));
  border:1px solid var(--border);
  position:relative;z-index:1;
}
.co-price-label{font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em}
.co-price-val{font-size:clamp(1.4rem,4vw,2rem);font-weight:900;font-family:var(--font-head);margin-top:4px}
.co-price-note{font-size:0.84rem;margin-top:6px}
.co-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:16px;
  align-items:start;
}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}}
.co-card,.co-aside{padding:18px 18px;border-radius:20px}
.co-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.co-card-head h2{margin:0;font-size:1.05rem}
.co-summary{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;padding:12px 14px;border-radius:14px;background:rgba(2,6,23,0.03);border:1px solid var(--border)}
html[data-theme="dark"] .co-summary{background:rgba(255,255,255,0.03)}
.co-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.co-input{text-transform:uppercase;letter-spacing:0.04em}
.co-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.co-aside-title{font-weight:800;font-size:0.92rem;margin-bottom:8px}
.co-list{margin:0;padding-left:18px;line-height:1.65}
.co-step{display:flex;align-items:flex-start;gap:10px;margin:8px 0}
.co-step-dot{
  flex:0 0 26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:0.78rem;background:rgba(56,189,248,0.16);border:1px solid rgba(56,189,248,0.35);color:var(--text);
}
.co-mono{font-family:var(--font-head);font-size:0.86rem}
.co-paypulse{position:relative}
.co-paypulse::after{
  content:"";position:absolute;inset:-2px;border-radius:999px;
  background:linear-gradient(120deg,rgba(236,72,153,0.35),rgba(56,189,248,0.35));
  z-index:-1;opacity:0.55;filter:blur(10px);
}
.co-rise{animation:coRise 0.55s var(--ease) both}
.co-delay{animation-delay:0.08s}
@keyframes coRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.co-shine{animation:coShine 4.5s ease-in-out infinite}
@keyframes coShine{0%,100%{filter:saturate(1)}50%{filter:saturate(1.15)}}

/* Halaman kursus: hero & harga lebih rapat di mobile */
@media(max-width:768px){
  .cd-hero{padding:22px 16px}
  .cd-meta{flex-wrap:wrap;gap:8px}
  .purchase-head,.purchase-perks,.purchase-user-chip,.purchase-actions,.purchase-owned{padding-left:16px;padding-right:16px}
  .purchase-user-chip{margin-left:16px;margin-right:16px}
  .purchase-footer{padding-left:16px;padding-right:16px}
}

/* Admin voucher cards */
.vch-card,.vch-hint,.vch-list{border-radius:20px}

/* Auth: divider + tombol Google */
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--muted);font-size:0.82rem;font-weight:600}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-divider span{flex-shrink:0;text-transform:lowercase}
.auth-google-note{
  margin:14px 0 0;font-size:0.78rem;line-height:1.65;color:var(--muted);text-align:center;
}
.dash-google-status{display:flex;gap:12px;align-items:flex-start;margin:0;color:var(--text2);font-size:0.9rem;line-height:1.55}
.dash-google-status .ico-google-badge{flex-shrink:0;margin-top:2px}
.btn-google-ico .ico-google-badge{display:inline-flex;vertical-align:middle}
.btn-google{
  background:#fff;
  color:#1f1f1f;
  border:1px solid rgba(15,23,42,0.14);
  box-shadow:0 1px 2px rgba(2,6,23,0.06);
  font-weight:600;
  gap:10px;
}
.btn-google:hover{
  background:#f8fafc;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(2,6,23,0.10);
  filter:none;
}
html[data-theme="dark"] .btn-google{
  background:rgba(255,255,255,0.96);
  color:#111827;
  border-color:rgba(15,23,42,0.12);
}
.btn-google-ico{display:flex;flex-shrink:0;line-height:0}
.btn-google-ico svg{display:block}

.complete-profile-wrap .complete-profile-card{max-width:480px}
.complete-profile-form .form-input:disabled{cursor:default}

/* Dashboard pengguna */
.dash-shell{width:min(1240px,calc(100% - 40px))}
.dash-layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;align-items:start}
.dash-side{
  position:sticky;top:88px;border-radius:var(--r-xl);padding:22px 18px;
  display:flex;flex-direction:column;gap:18px;
}
.dash-userblock{display:flex;align-items:flex-start;gap:14px}
.dash-avatar{
  flex-shrink:0;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  background:linear-gradient(135deg,rgba(214,26,163,0.18),rgba(37,99,235,0.12));
  border:1px solid var(--border);color:var(--text);
}
.dash-usermeta{display:flex;flex-direction:column;gap:4px;min-width:0}
.dash-username{font-size:0.95rem;line-height:1.25;word-break:break-word}
.dash-useremail,.dash-userphone{font-size:0.78rem;color:var(--muted);line-height:1.35;word-break:break-all}
.dash-nav{display:flex;flex-direction:column;gap:4px;padding-top:4px;border-top:1px solid var(--border)}
.dash-navlink{
  padding:10px 12px;border-radius:var(--r-md);font-size:0.86rem;font-weight:600;
  color:var(--text2);transition:background 160ms var(--ease),color 160ms;
}
.dash-navlink:hover{background:rgba(2,6,23,0.04);color:var(--text)}
html[data-theme="dark"] .dash-navlink:hover{background:rgba(255,255,255,0.06)}
.dash-navlink-muted{color:var(--muted);font-weight:500}
.dash-navlink-exit{margin-top:6px;color:var(--red);font-weight:700}
.dash-navlink-exit:hover{background:rgba(239,68,68,0.08);color:#b91c1c}
.dash-admincta{padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.dash-adminlabel{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.dash-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.dash-section{scroll-margin-top:96px}
/* ===== Dashboard v7: minimal, tanpa app bar (pakai nav situs) ===== */
.db-shell{width:min(1080px,calc(100% - 32px));display:flex;flex-direction:column;gap:20px}
.db-anim{opacity:0;transform:translateY(14px);animation:dbFadeUp 520ms var(--ease) forwards;animation-delay:var(--anim-delay,0ms)}
@keyframes dbFadeUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.db-anim{animation:none;opacity:1;transform:none}}

.db-hero{
  position:relative;overflow:hidden;
  padding:0;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,rgba(214,26,163,0.09),rgba(37,99,235,0.06) 55%,rgba(22,163,74,0.04));
  border:1px solid var(--border);
}
.db-hero-glow{
  position:absolute;inset:-40% -20% auto auto;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,26,163,0.18),transparent 68%);pointer-events:none;
}
.db-hero-inner{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 20px;
  padding:24px 26px;
}
.db-hero-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 260px}
.db-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:flex-end}
.db-quick-chip{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--text2);
  font-size:0.8rem;font-weight:700;text-decoration:none;
  transition:transform 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease);
}
.db-quick-chip:hover{transform:translateY(-1px);border-color:var(--border2);color:var(--text)}
.db-hero-avatar{
  flex-shrink:0;width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 10px 24px rgba(214,26,163,0.32);
}
.db-hero-kicker{margin:0 0 4px;font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.db-hero-title{margin:0;font-family:var(--font-head);font-size:clamp(1.25rem,1.4vw + 0.6rem,1.7rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:var(--text);word-break:break-word}
.db-hero-sub{margin:6px 0 0;font-size:0.86rem;color:var(--muted);word-break:break-word;line-height:1.45}
.db-hero-cta{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-xl);
  background:var(--text);color:var(--bg);text-decoration:none;
  box-shadow:0 12px 28px rgba(2,6,23,0.18);
  transition:transform 200ms var(--ease),box-shadow 200ms var(--ease);
}
html[data-theme="dark"] .db-hero-cta{background:var(--accent);color:#fff;box-shadow:0 12px 28px rgba(214,26,163,0.32)}
.db-hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(2,6,23,0.22)}
.db-hero-cta-text{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.db-hero-cta-k{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;opacity:0.7}
.db-hero-cta-t{font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:-0.01em}
.db-hero-cta-arrow{font-size:1.2rem;font-weight:800;transition:transform 220ms var(--ease)}
.db-hero-cta:hover .db-hero-cta-arrow{transform:translateX(4px)}

.db-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.db-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.db-stat-grid{grid-template-columns:1fr}}
.db-stat{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 14px rgba(2,6,23,0.04);
  text-decoration:none;color:inherit;
  transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.db-stat:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 10px 24px rgba(2,6,23,0.08)}
.db-stat-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--accent);background:rgba(214,26,163,0.12);border:1px solid rgba(214,26,163,0.22);
}
.db-stat-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.db-stat-num{font-family:var(--font-head);font-size:1.45rem;font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--text)}
.db-stat-num--badge{font-size:0.85rem;display:flex;align-items:center}
.db-stat-lbl{font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted)}

.db-card{padding:22px 22px 20px;border-radius:var(--r-2xl);min-width:0;scroll-margin-top:96px}
.db-card-hd{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.db-card-title{margin:0;font-family:var(--font-head);font-size:1.08rem;font-weight:800;letter-spacing:-0.02em;color:var(--text)}
.db-card-desc{margin:4px 0 0;font-size:0.82rem;color:var(--muted);line-height:1.5}
.db-zero{padding:24px 8px;text-align:center;color:var(--muted);font-size:0.9rem}

.db-featured{
  display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:20px;align-items:center;
  padding:18px 20px;border-radius:var(--r-2xl);border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(214,26,163,0.04),transparent 70%);
}
@media(max-width:640px){.db-featured{grid-template-columns:1fr}}
.db-featured-cover{
  aspect-ratio:16/10;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;
  color:#fff;position:relative;overflow:hidden;min-height:120px;
}
.db-featured-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,0.35),transparent 55%)}
.db-featured-init{font-family:var(--font-head);font-weight:900;font-size:3rem;opacity:0.9;text-shadow:0 8px 24px rgba(0,0,0,0.2)}
.db-featured-kicker{margin:0 0 6px;font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent)}
.db-featured-title{margin:0 0 8px;font-family:var(--font-head);font-size:clamp(1.1rem,1.2vw + 0.5rem,1.45rem);font-weight:800;letter-spacing:-0.03em;line-height:1.2}
.db-featured-meta{margin:0 0 14px;font-size:0.84rem;color:var(--muted)}

.db-tx-cards{display:flex;flex-direction:column;gap:10px}
.db-tx-card{
  padding:14px 16px;border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface);
}
.db-tx-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.db-tx-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.db-tx-date{font-size:0.76rem}
.db-tx-scroll--desk{display:none}
@media(min-width:768px){
  .db-tx-cards{display:none}
  .db-tx-scroll--desk{display:block}
}

.db-tx-scroll{margin:0 -6px;padding:0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.db-tx-table{width:100%;min-width:560px;border-collapse:collapse;font-size:0.86rem}
.db-tx-table thead th{
  text-align:left;padding:10px 12px;font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);
  background:rgba(2,6,23,0.03);border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .db-tx-table thead th{background:rgba(255,255,255,0.05)}
.db-tx-table tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2)}
.db-tx-table tbody tr:last-child td{border-bottom:none}
.db-tx-table tbody tr:hover td{background:rgba(2,6,23,0.02)}
html[data-theme="dark"] .db-tx-table tbody tr:hover td{background:rgba(255,255,255,0.03)}
.db-tx-inv{font-family:var(--font-head);font-size:0.8rem;font-weight:800;color:var(--text);word-break:break-all}
.db-tx-course{font-size:0.78rem;color:var(--muted);margin-top:4px;line-height:1.35}
.db-tx-right{text-align:right}
.db-tx-money{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.db-tx-disc{font-size:0.72rem;font-weight:600;color:var(--muted);margin-top:4px}
.db-tx-act{text-align:right;white-space:nowrap}

.db-stat-ico--accent{color:var(--accent);background:rgba(214,26,163,0.12);border:1px solid rgba(214,26,163,0.22)}
.db-stat-ico--blue{color:var(--blue);background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.22)}
.db-stat-ico--green{color:var(--green);background:rgba(22,163,74,0.12);border:1px solid rgba(22,163,74,0.22)}
.db-stat-ico--purple{color:var(--purple);background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.22)}

/* Kartu preview kursus di dashboard */
.db-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.db-course{
  display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 14px rgba(2,6,23,0.05);
  text-decoration:none;color:inherit;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease);
}
.db-course:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 14px 28px rgba(2,6,23,0.1)}
.db-course-cover{
  position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;
}
.db-course-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,0.3),transparent 55%);pointer-events:none}
.db-course-init{
  font-family:var(--font-head);font-weight:900;font-size:2.4rem;letter-spacing:-0.05em;
  text-shadow:0 6px 20px rgba(0,0,0,0.25);opacity:0.85;
}
.db-course-play{
  position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.95);color:var(--accent);display:flex;align-items:center;justify-content:center;
  padding-left:3px;box-shadow:0 6px 16px rgba(0,0,0,0.25);transition:transform 220ms var(--ease);
}
.db-course:hover .db-course-play{transform:scale(1.1)}
.db-course-level{
  position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,0.35);color:#fff;font-size:0.66rem;font-weight:700;letter-spacing:0.06em;backdrop-filter:blur(4px);
}
.db-course-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.db-course-title{font-family:var(--font-head);font-weight:800;font-size:0.92rem;letter-spacing:-0.01em;line-height:1.3;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.db-course-meta{font-size:0.74rem;color:var(--muted)}

.db-zero{padding:24px 8px;text-align:center;color:var(--muted);font-size:0.9rem}
.db-zero--course{padding:36px 12px}
.db-zero-art{display:flex;justify-content:center;color:var(--accent);opacity:0.75;margin-bottom:10px}
.db-zero-title{margin:0 0 6px;font-family:var(--font-head);font-weight:800;font-size:0.96rem;color:var(--text)}
.db-zero-text{margin:0;color:var(--muted);font-size:0.86rem}

/* ===== Halaman Akun & Keamanan ===== */
.ak-shell{width:min(820px,calc(100% - 32px));display:flex;flex-direction:column;gap:18px}
.ak-anim{opacity:0;transform:translateY(14px);animation:dbFadeUp 520ms var(--ease) forwards;animation-delay:var(--anim-delay,0ms)}
.ak-crumbs{display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--muted)}
.ak-crumbs a{color:var(--text2);font-weight:600}
.ak-crumbs a:hover{color:var(--accent)}
.ak-crumbs-here{color:var(--text);font-weight:700}
.ak-hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:22px 24px;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,rgba(214,26,163,0.07),rgba(37,99,235,0.05) 60%,transparent);
}
.ak-hero-avatar{
  width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:#fff;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 8px 22px rgba(214,26,163,0.32);
}
.ak-hero-kicker{margin:0 0 4px;font-size:0.7rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.ak-hero-title{margin:0;font-family:var(--font-head);font-size:clamp(1.2rem,1.3vw + 0.6rem,1.55rem);font-weight:800;letter-spacing:-0.02em;line-height:1.2;color:var(--text)}
.ak-hero-sub{margin:4px 0 0;font-size:0.86rem;color:var(--muted);line-height:1.5}
.ak-form{display:flex;flex-direction:column;gap:14px}
.ak-card{padding:20px 22px;border-radius:var(--r-2xl)}
.ak-card-hd{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ak-card-title{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:800;letter-spacing:-0.02em;color:var(--text)}
.ak-card-desc{margin:4px 0 0;font-size:0.82rem;color:var(--muted);line-height:1.45}
.ak-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media(max-width:560px){.ak-grid{grid-template-columns:1fr}}
.ak-span2{grid-column:1/-1}
.ak-hint{font-size:0.76rem;color:var(--muted);margin:6px 0 0;line-height:1.45}
.ak-form .form-input:disabled{opacity:0.85;cursor:default}
.ak-pw{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:rgba(2,6,23,0.02)}
html[data-theme="dark"] .ak-pw{background:rgba(255,255,255,0.04)}
.ak-pw-sum{
  cursor:pointer;list-style:none;padding:12px 14px;font-weight:800;font-size:0.9rem;display:flex;align-items:center;justify-content:space-between;gap:10px;
  user-select:none;
}
.ak-pw-sum::-webkit-details-marker{display:none}
.ak-pw-sum::after{content:'+';color:var(--muted);font-weight:900;font-size:1.05rem}
.ak-pw[open] .ak-pw-sum::after{content:'−'}
.ak-pw-tag{font-style:normal;font-weight:600;font-size:0.66rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted)}
.ak-pw-body{padding:0 14px 14px}
.ak-google{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.ak-google-h{margin:0 0 8px;font-size:0.86rem;font-family:var(--font-head);font-weight:800;letter-spacing:-0.01em}
.ak-google-status{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--text2);font-size:0.88rem;line-height:1.55}
.ak-google-status .ico-google-badge{flex-shrink:0;margin-top:2px}
.ak-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:6px}

/* ===== Admin: tab Server ===== */
.adm-srv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:780px){.adm-srv-grid{grid-template-columns:1fr}}
.adm-srv-card{padding:18px 20px;border-radius:var(--r-xl)}
.adm-srv-span2{grid-column:1/-1}
.adm-srv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.adm-srv-h h2{margin:0;font-family:var(--font-head);font-size:0.98rem;font-weight:800;letter-spacing:-0.02em}
.adm-srv-h-sub{font-size:0.74rem}
.adm-srv-big{margin:0;font-family:var(--font-head);font-size:1.8rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.adm-srv-sub{margin:6px 0 0;font-size:0.8rem;color:var(--muted)}
.adm-srv-note{margin:10px 0 0;font-size:0.8rem;line-height:1.55;color:var(--muted)}
.adm-srv-note code{font-size:0.8rem;background:rgba(2,6,23,0.06);padding:2px 6px;border-radius:6px}
html[data-theme="dark"] .adm-srv-note code{background:rgba(255,255,255,0.08)}
.adm-srv-meter{height:10px;border-radius:999px;background:rgba(2,6,23,0.08);overflow:hidden;border:1px solid var(--border)}
html[data-theme="dark"] .adm-srv-meter{background:rgba(255,255,255,0.08)}
.adm-srv-meter-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--blue));border-radius:999px;transition:width 380ms var(--ease)}
.adm-srv-meter-lbl{margin:8px 0 4px;font-size:0.82rem;color:var(--text2)}
.adm-srv-pair{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.adm-srv-pair--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:680px){.adm-srv-pair,.adm-srv-pair--3{grid-template-columns:1fr}}
.adm-srv-pair li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(2,6,23,0.03);font-size:0.84rem}
html[data-theme="dark"] .adm-srv-pair li{background:rgba(255,255,255,0.04)}
.adm-srv-pair li span{color:var(--muted)}
.adm-srv-pair li strong{font-family:var(--font-head);font-variant-numeric:tabular-nums;color:var(--text)}
.adm-srv-pings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:640px){.adm-srv-pings{grid-template-columns:1fr}}
.adm-srv-ping{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface)}
.adm-srv-ping-dot{width:10px;height:10px;border-radius:50%}
.adm-srv-ping.is-ok .adm-srv-ping-dot{background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,0.18)}
.adm-srv-ping.is-bad .adm-srv-ping-dot{background:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,0.18)}
.adm-srv-ping-name{font-weight:700;font-size:0.86rem;color:var(--text)}
.adm-srv-ping-ms{font-family:var(--font-head);font-weight:800;font-variant-numeric:tabular-nums;font-size:0.86rem;color:var(--text)}
.adm-srv-howto{margin-top:14px;border:1px dashed var(--border);border-radius:var(--r-md);padding:10px 12px;background:rgba(250,204,21,0.06)}
html[data-theme="dark"] .adm-srv-howto{background:rgba(250,204,21,0.08)}
.adm-srv-howto > summary{cursor:pointer;font-weight:800;font-size:0.86rem;list-style:none}
.adm-srv-howto > summary::-webkit-details-marker{display:none}
.adm-srv-howto > summary::before{content:'›';display:inline-block;margin-right:8px;transition:transform 200ms var(--ease)}
.adm-srv-howto[open] > summary::before{transform:rotate(90deg)}
.adm-srv-howto-body{font-size:0.84rem;line-height:1.6;color:var(--text2);margin-top:10px}
.adm-srv-howto-body pre{background:rgba(2,6,23,0.06);padding:10px 12px;border-radius:8px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.78rem;margin:8px 0}
html[data-theme="dark"] .adm-srv-howto-body pre{background:rgba(255,255,255,0.06)}

/* ===== Halaman status publik ===== */
.st-shell{width:min(720px,calc(100% - 32px));display:flex;flex-direction:column;gap:16px}
.st-hero{display:flex;align-items:center;gap:18px;padding:24px 26px;border-radius:var(--r-2xl)}
.st-badge{flex-shrink:0;width:56px;height:56px;border-radius:50%;position:relative}
.st-badge.is-ok{background:rgba(22,163,74,0.16);box-shadow:0 0 0 6px rgba(22,163,74,0.08)}
.st-badge.is-bad{background:rgba(239,68,68,0.18);box-shadow:0 0 0 6px rgba(239,68,68,0.08)}
.st-badge::after{
  content:'';position:absolute;inset:18px;border-radius:50%;
}
.st-badge.is-ok::after{background:var(--green);animation:stPulse 2.4s ease-in-out infinite}
.st-badge.is-bad::after{background:var(--red);animation:stPulse 1.2s ease-in-out infinite}
@keyframes stPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.86);opacity:0.7}}
.st-kicker{margin:0 0 4px;font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.st-title{margin:0;font-family:var(--font-head);font-size:clamp(1.2rem,1.6vw + 0.4rem,1.6rem);font-weight:800;letter-spacing:-0.02em;line-height:1.2}
.st-sub{margin:4px 0 0;font-size:0.86rem;color:var(--muted)}
.st-card{padding:18px 20px;border-radius:var(--r-xl)}
.st-card-h{margin:0 0 12px;font-family:var(--font-head);font-size:0.96rem;font-weight:800;letter-spacing:-0.01em}
.st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface)}
.st-row-dot{width:10px;height:10px;border-radius:50%}
.st-row.is-ok .st-row-dot{background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,0.18)}
.st-row.is-bad .st-row-dot{background:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,0.18)}
.st-row-name{font-weight:700;font-size:0.88rem;color:var(--text)}
.st-row-val{font-family:var(--font-head);font-weight:800;font-variant-numeric:tabular-nums;font-size:0.84rem;color:var(--text)}
.st-foot{text-align:center;font-size:0.86rem;margin-top:8px}
.st-standalone{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.st-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);
}
.st-topbar-brand{font-family:var(--font-head);font-weight:800;font-size:0.88rem;letter-spacing:0.06em;color:var(--text)}
.st-topbar-pill{
  font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
  padding:5px 12px;border-radius:999px;
}
.st-topbar-pill.is-ok{background:rgba(22,163,74,0.12);color:var(--green);border:1px solid rgba(22,163,74,0.25)}
.st-topbar-pill.is-bad{background:rgba(239,68,68,0.12);color:var(--red);border:1px solid rgba(239,68,68,0.25)}
.st-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px 48px}
.st-main .st-shell{width:min(720px,100%)}
.st-footer{text-align:center;padding:16px;font-size:0.78rem;border-top:1px solid var(--border)}

/* ===== Halaman watch (video per bab) ===== */
.watch-shell{width:min(1180px,calc(100% - 32px));display:flex;flex-direction:column;gap:20px}
.watch-head{padding:22px 24px;border-radius:var(--r-2xl)}
.watch-kicker{margin:0 0 4px;font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.watch-title{margin:0;font-family:var(--font-head);font-size:clamp(1.3rem,1.5vw + 0.5rem,1.85rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15}
.watch-lead{margin:8px 0 0;font-size:0.9rem;color:var(--text2);line-height:1.55;max-width:62ch}
.watch-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.watch-layout{grid-template-columns:1fr}}
.watch-sidebar{padding:16px 14px;border-radius:var(--r-xl);max-height:min(72vh,640px);overflow:auto;position:sticky;top:88px}
@media(max-width:900px){.watch-sidebar{position:static;max-height:none}}
.watch-sidebar-h{margin:0 0 12px;font-family:var(--font-head);font-size:0.92rem;font-weight:800;letter-spacing:-0.01em}
.watch-chapters{display:flex;flex-direction:column;gap:8px}
.watch-chapter{border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(2,6,23,0.02);overflow:hidden}
html[data-theme="dark"] .watch-chapter{background:rgba(255,255,255,0.03)}
.watch-chapter-sum{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;cursor:pointer;font-weight:700;font-size:0.88rem;list-style:none;
  user-select:none;
}
.watch-chapter-sum::-webkit-details-marker{display:none}
.watch-chapter-title{flex:1;min-width:0;color:var(--text)}
.watch-chapter-count{font-size:0.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
.watch-ch-empty{padding:0 14px 12px;font-size:0.82rem}
.watch-vlist{list-style:none;margin:0;padding:0 0 8px;display:flex;flex-direction:column;gap:2px}
.watch-vlist-flat{padding:0}
.watch-vitem a,.watch-vlink-disabled{
  display:flex;align-items:flex-start;gap:10px;padding:9px 14px 9px 12px;text-decoration:none;color:inherit;font-size:0.86rem;
  border-left:3px solid transparent;transition:background 160ms,border-color 160ms;
}
.watch-vitem a:hover{background:rgba(14,165,233,0.06)}
.watch-vitem.is-active a{background:rgba(14,165,233,0.1);border-left-color:var(--accent);font-weight:700}
.watch-vitem.is-locked .watch-vlink-disabled{opacity:0.55;cursor:not-allowed}
.watch-vico{flex-shrink:0;width:18px;text-align:center;font-size:0.72rem;line-height:1.5;color:var(--muted)}
.watch-vtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.watch-vtitle{line-height:1.35;color:var(--text)}
.watch-vtag{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent)}
.watch-player{padding:18px;border-radius:var(--r-2xl)}
.watch-player-empty{
  min-height:280px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:var(--r-xl);color:var(--muted);font-size:0.92rem;
}
.watch-player-tools{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}

/* ===== Halaman Kursus Saya ===== */
.ks-shell{width:min(1180px,calc(100% - 32px));display:flex;flex-direction:column;gap:20px}
.ks-anim{opacity:0;transform:translateY(16px);animation:dbFadeUp 560ms var(--ease) forwards;animation-delay:var(--anim-delay,0ms)}
.ks-crumbs{display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--muted)}
.ks-crumbs a{color:var(--text2);font-weight:600}
.ks-crumbs a:hover{color:var(--accent)}
.ks-crumbs-here{color:var(--text);font-weight:700}
.ks-hero{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 28px;
  padding:26px 28px;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,rgba(214,26,163,0.08),rgba(37,99,235,0.06) 60%,transparent);
  position:relative;overflow:hidden;
}
.ks-hero::before{
  content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,26,163,0.25),transparent 65%);pointer-events:none;
}
.ks-hero-text{min-width:0;flex:1 1 280px;position:relative;z-index:1}
.ks-hero-kicker{margin:0 0 6px;font-size:0.72rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.ks-hero-title{margin:0 0 6px;font-family:var(--font-head);font-size:clamp(1.4rem,1.8vw + 0.6rem,2rem);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.ks-hero-lead{margin:0;font-size:0.92rem;color:var(--text2);line-height:1.6;max-width:54ch}
.ks-hero-stats{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1;
}
.ks-hero-stats li{
  min-width:96px;padding:12px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:4px;align-items:center;
}
.ks-stat-num{font-family:var(--font-head);font-size:1.4rem;font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--text)}
.ks-stat-lbl{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted)}

.ks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ks-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(2,6,23,0.05);
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease),border-color 240ms var(--ease);
}
.ks-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 18px 36px rgba(2,6,23,0.1)}
.ks-card-cover{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 60%,#7c3aed 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.ks-card-cover::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.25),transparent 55%);
}
.ks-card-cover-play{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,0.95);color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;padding-left:4px;box-shadow:0 10px 24px rgba(0,0,0,0.2);
  transition:transform 240ms var(--ease);
}
.ks-card:hover .ks-card-cover-play{transform:scale(1.12)}
.ks-card-cover-tag{
  position:absolute;top:12px;left:12px;z-index:1;padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,0.35);color:#fff;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;backdrop-filter:blur(4px);
}
.ks-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.ks-card-title{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:800;letter-spacing:-0.02em;line-height:1.3;color:var(--text)}
.ks-card-desc{margin:0;font-size:0.84rem;color:var(--text2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ks-card-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:0.78rem;color:var(--muted)}
.ks-card-meta li{display:inline-flex;align-items:center;gap:5px}
.ks-card-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}

.ks-empty{padding:48px 24px;text-align:center;border-radius:var(--r-2xl)}
.ks-empty-art{display:flex;justify-content:center;color:var(--accent);margin-bottom:14px}
.ks-empty-title{margin:0 0 8px;font-family:var(--font-head);font-size:1.1rem;font-weight:800;letter-spacing:-0.02em}
.ks-empty-text{margin:0 auto 18px;font-size:0.9rem;color:var(--muted);max-width:46ch;line-height:1.55}
.ks-empty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dash-hero{
  display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;
  padding:26px 28px;border-radius:var(--r-2xl);
}
.dash-hero-title{font-size:clamp(1.35rem,2vw + 0.5rem,1.85rem);margin:0 0 8px;font-family:var(--font-head);font-weight:800;letter-spacing:-0.03em;line-height:1.15}
.dash-hero-lead{margin:0;max-width:52ch;font-size:0.92rem;color:var(--text2);line-height:1.7}
.dash-hero-stats{display:flex;flex-wrap:wrap;gap:14px}
.dash-mini{
  min-width:100px;padding:12px 14px;border-radius:var(--r-lg);
  background:rgba(2,6,23,0.03);border:1px solid var(--border);text-align:center;
}
html[data-theme="dark"] .dash-mini{background:rgba(255,255,255,0.04)}
.dash-mini-val{display:block;font-family:var(--font-head);font-size:1.45rem;font-weight:800;letter-spacing:-0.03em}
.dash-mini-lbl{display:block;font-size:0.72rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.06em}
.dash-panel{padding:22px 24px}
.dash-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
@media(max-width:640px){.dash-form-grid{grid-template-columns:1fr}}
.dash-subhead{font-size:0.88rem;font-weight:700;margin:0 0 6px;font-family:var(--font-head)}
.dash-hint{font-size:0.78rem;color:var(--muted);margin:6px 0 0}
.dash-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:960px){.dash-two{grid-template-columns:1fr}}
.dash-empty{text-align:center;padding:36px 16px;color:var(--muted)}
.dash-empty-ico{font-size:2.2rem;margin-bottom:10px;line-height:1}
.dash-course-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.dash-course-row{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.dash-course-row:last-child{border-bottom:none}
.dash-course-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.dash-course-meta{font-size:0.78rem;color:var(--muted)}
.dash-course-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}
@media(max-width:960px){
  .dash-layout{grid-template-columns:1fr}
  .dash-side{position:static;display:grid;grid-template-columns:1fr auto;align-items:start;gap:16px}
  .dash-nav{flex-direction:row;flex-wrap:wrap;border-top:none;padding-top:0;grid-column:1/-1}
  .dash-navlink{white-space:nowrap}
  .dash-admincta{grid-column:1/-1}
}

.dash-shell-v2{width:min(1180px,calc(100% - 40px))}
.dash-shell-v2 .dash-hero{border:1px solid var(--border);box-shadow:var(--shadow-md)}
.dash-shell-v2 .dash-panel{border:1px solid var(--border)}

/* Ikon Google kecil (badge admin, dll.) */
.ico-google-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.ico-google-badge svg{display:block;width:100%;height:100%}

/* ——— Admin panel v3 (sidebar + responsif) ——— */
.adm-app{
  position:relative;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  min-height:calc(100vh - 80px);
  padding:20px 0 64px;
}
.adm-shell{width:min(1360px,calc(100% - 32px))}
.adm-layout-v3{padding-top:0;padding-bottom:0}
.adm-migrate-banner{border-radius:var(--r-xl);margin-bottom:16px;font-size:0.86rem;line-height:1.6}
.adm-migrate-banner--top{grid-column:1/-1}
.adm-layout{
  display:grid;grid-template-columns:minmax(220px,248px) minmax(0,1fr);gap:32px;align-items:start;
  isolation:isolate;
}

.adm-side-overlay{
  display:none;position:fixed;inset:0;z-index:140;
  background:rgba(15,23,42,0.45);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity 200ms var(--ease);
}
.adm-side-overlay.is-open{opacity:1;pointer-events:auto}

.adm-sidebar{
  position:sticky;top:calc(var(--site-nav-h, 88px) + 12px);
  border-radius:20px;padding:16px 14px 16px 12px;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;
  max-height:calc(100vh - 110px);
  overflow:hidden;
  flex-shrink:0;z-index:2;width:100%;max-width:100%;
  box-shadow:0 8px 28px rgba(2,6,23,0.05);
}
html[data-theme="dark"] .adm-sidebar{box-shadow:0 12px 36px rgba(0,0,0,0.28)}
.adm-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 4px}
.adm-sidebar-brand{font-family:var(--font-head);font-size:0.92rem;font-weight:900;letter-spacing:-0.02em}
.adm-sidebar-warn{
  width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:900;background:rgba(245,158,11,0.15);color:var(--yellow);border:1px solid rgba(245,158,11,0.35);
}
.adm-sidebar-user{
  margin:0;padding:0 10px 8px;font-size:0.78rem;color:var(--muted);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.adm-side-nav{
  display:flex;flex-direction:column;gap:14px;
  min-height:0;overflow-x:hidden;overflow-y:auto;
  padding:0 2px 8px 0;margin:0;
  scrollbar-width:thin;scrollbar-color:rgba(2,6,23,0.18) transparent;
}
.adm-side-nav::-webkit-scrollbar{width:5px}
.adm-side-nav::-webkit-scrollbar-thumb{background:rgba(2,6,23,0.16);border-radius:999px}
.adm-side-group{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.adm-side-label{
  padding:0 10px;font-size:0.66rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.adm-side-link{
  display:block;padding:10px 12px;border-radius:12px;
  font-size:0.86rem;font-weight:700;color:var(--text2);text-decoration:none;
  line-height:1.35;min-height:40px;
  transition:background 180ms var(--ease),color 180ms var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-side-link:hover{background:rgba(2,6,23,0.05);color:var(--text)}
.adm-side-link.is-active{
  background:linear-gradient(135deg,rgba(214,26,163,0.12),rgba(56,189,248,0.08));
  color:var(--text);border:1px solid rgba(214,26,163,0.18);
  box-shadow:0 6px 18px rgba(214,26,163,0.08);
}
html[data-theme="dark"] .adm-side-link:hover{background:rgba(255,255,255,0.05)}

.adm-sidebar-foot{
  margin-top:0;padding-top:14px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;flex-shrink:0;
  background:inherit;position:relative;z-index:2;
}
.adm-side-foot-link{
  display:block;font-size:0.8rem;font-weight:600;color:var(--muted);text-decoration:none;
  padding:8px 10px;border-radius:10px;line-height:1.35;min-height:36px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color 160ms,background 160ms;
}
.adm-side-foot-link:hover{color:var(--accent);background:rgba(214,26,163,0.06)}
.adm-danger-zone{
  margin-top:6px;padding:8px 10px;border-radius:12px;
  border:1px dashed rgba(239,68,68,0.35);background:rgba(239,68,68,0.04);
  font-size:0.76rem;color:var(--text2);line-height:1.5;
}
.adm-danger-zone summary{cursor:pointer;font-weight:800;color:var(--red);list-style:none}
.adm-danger-zone summary::-webkit-details-marker{display:none}
.adm-danger-zone p{margin:8px 0 0}
.adm-danger-zone a{color:var(--red);font-weight:700}

.adm-main{min-width:0;display:flex;flex-direction:column;gap:16px;overflow:hidden;position:relative;z-index:1;padding-left:6px}
.adm-page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:18px 20px;border-radius:20px;
}
.adm-page-head-main{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1}
.adm-menu-btn{
  display:none;flex-shrink:0;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--border);background:rgba(2,6,23,0.03);color:var(--text);
  align-items:center;justify-content:center;transition:all 180ms var(--ease);
}
.adm-menu-btn:hover{background:rgba(214,26,163,0.08);border-color:rgba(214,26,163,0.22)}
.adm-page-kicker{margin:0 0 4px;font-size:0.68rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.adm-page-title{margin:0 0 4px;font-family:var(--font-head);font-size:clamp(1.15rem,1.4vw + 0.5rem,1.45rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15}
.adm-page-desc{margin:0;font-size:0.86rem;color:var(--text2);line-height:1.55;max-width:52ch}
.adm-page-head-aside{display:flex;gap:10px;flex-shrink:0}
.adm-head-stat{
  padding:10px 14px;border-radius:14px;text-align:right;
  background:linear-gradient(145deg,rgba(214,26,163,0.08),rgba(56,189,248,0.06));
  border:1px solid var(--border);min-width:130px;
}
.adm-head-stat span{display:block;font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.adm-head-stat strong{font-family:var(--font-head);font-size:1.05rem;font-weight:900;letter-spacing:-0.03em}

.adm-content{display:flex;flex-direction:column;gap:18px;animation:fadeInUp 0.45s var(--ease) both;min-width:0}
.adm-content .panel{padding:22px 24px;overflow:hidden;min-width:0}
.adm-content .panel .panel-head{margin-bottom:14px}

.adm-videos-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;
}
@media(max-width:1180px){.adm-videos-grid{grid-template-columns:1fr}}

.adm-video-form{display:flex;flex-direction:column;gap:0}
.adm-video-form .form-group{margin-bottom:16px}
.adm-video-form .form-group:last-of-type{margin-bottom:0}
.adm-video-form .dropzone{margin-bottom:4px}
.adm-video-form .muted-text{margin-bottom:8px;line-height:1.55}
.adm-video-form .adm-form-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border);
}
.adm-video-form .adm-form-row .form-group{margin-bottom:0}
.adm-video-form .adm-form-actions{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
}
.adm-video-form .adm-form-actions .btn{align-self:flex-start}
@media(max-width:640px){.adm-video-form .adm-form-row{grid-template-columns:1fr;gap:14px}}

.adm-quick{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  padding:12px;border-radius:18px;margin-bottom:4px;
}
.adm-quick-item{
  display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;
  text-decoration:none;color:inherit;border:1px solid var(--border);
  background:rgba(2,6,23,0.02);transition:all 200ms var(--ease);
}
.adm-quick-item:hover{transform:translateY(-2px);border-color:rgba(214,26,163,0.25);background:rgba(214,26,163,0.05)}
.adm-quick-item span{font-size:0.88rem;font-weight:800;color:var(--text)}
.adm-quick-item small{font-size:0.72rem;color:var(--muted)}
html[data-theme="dark"] .adm-quick-item{background:rgba(255,255,255,0.03)}

@media(max-width:1180px){
  .adm-layout{grid-template-columns:1fr;gap:0}
  .adm-main{padding-left:0}
  .adm-sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:150;width:min(280px,88vw);
    max-height:none;border-radius:0 20px 20px 0;
    transform:translateX(-105%);transition:transform 260ms var(--ease);
    box-shadow:0 20px 60px rgba(2,6,23,0.18);
  }
  .adm-sidebar.is-open{transform:translateX(0)}
  .adm-side-overlay{display:block}
  .adm-menu-btn{display:inline-flex}
  body.adm-nav-open{overflow:hidden}
  .adm-quick{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .adm-quick{grid-template-columns:repeat(2,1fr)}
  .adm-page-head-aside{width:100%}
  .adm-head-stat{width:100%;text-align:left}
  .adm-kpi-val{font-size:1.35rem}
}
.adm-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media(max-width:900px){.adm-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.adm-kpi-row{grid-template-columns:1fr}}
.adm-kpi{padding:16px 18px;border-radius:var(--r-xl);display:flex;flex-direction:column;gap:4px}
.adm-kpi-lbl{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.adm-kpi-val{font-family:var(--font-head);font-size:1.55rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.adm-kpi-sub{font-size:0.78rem;color:var(--text2)}
.adm-kpi-accent{background:linear-gradient(145deg,rgba(214,26,163,0.08),rgba(56,189,248,0.06))}
.adm-kpi-money{font-size:1.15rem !important}
.adm-range-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:12px 16px;border-radius:var(--r-xl);margin-bottom:18px;
}
.adm-range-lbl{font-size:0.82rem;font-weight:600;color:var(--text2)}
.adm-range-select{max-width:160px;padding:9px 12px;font-size:0.86rem}
.adm-range-hint{flex:1;min-width:200px;font-size:0.78rem;color:var(--muted);line-height:1.45}
.adm-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:960px){.adm-chart-grid{grid-template-columns:1fr}}
.adm-chart-card{padding:18px 20px}
.adm-chart-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.adm-chart-head h2{margin:0;font-size:1rem}
.adm-chart-caption{margin:0 0 10px;font-size:0.78rem;color:var(--muted)}
.adm-chart-canvas{position:relative;height:220px;width:100%}
.adm-chart-canvas-tall{height:280px}
.adm-mini-server{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px;border-radius:var(--r-xl);margin-top:4px;
}
@media(max-width:768px){.adm-mini-server{grid-template-columns:1fr}}
.adm-mini-cell{display:flex;flex-direction:column;gap:4px}
.adm-mini-lbl{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted)}
.adm-user-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:20px;align-items:start}
@media(max-width:1024px){.adm-user-grid{grid-template-columns:1fr}}
.adm-panel-list{min-width:0}
.adm-panel-detail{position:sticky;top:88px}
@media(max-width:1024px){.adm-panel-detail{position:static}}
.adm-table-head h2{font-size:1.05rem}
.adm-table-wrap{border-radius:var(--r-lg);overflow:hidden}
.adm-table{width:100%;border-collapse:collapse;font-size:0.86rem}
.adm-table thead th{
  text-align:left;padding:10px 12px;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--muted);background:rgba(2,6,23,0.03);border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .adm-table thead th{background:rgba(255,255,255,0.04)}
.adm-table tbody td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text2)}
.adm-table tbody tr:hover td{background:rgba(2,6,23,0.02);color:var(--text)}
html[data-theme="dark"] .adm-table tbody tr:hover td{background:rgba(255,255,255,0.03)}
.adm-table tbody tr.is-active td{background:rgba(214,26,163,0.08)}
.adm-th-n{width:48px}.adm-th-act{width:100px;text-align:right}
.adm-th-act,.adm-table td:last-child{text-align:right}
.adm-td-muted{color:var(--muted);font-variant-numeric:tabular-nums;font-size:0.82rem}
.adm-td-name{font-weight:700;font-size:0.9rem;color:var(--text)}
.adm-td-email{font-size:0.8rem;word-break:break-all;max-width:240px}
.adm-verify-cell{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.adm-google-wrap{display:inline-flex;align-items:center;vertical-align:middle}
.adm-google-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;
  font-size:0.76rem;font-weight:700;background:rgba(56,189,248,0.1);border:1px solid rgba(56,189,248,0.22);color:var(--text2);
}
.adm-mail-tests-wrap{margin-top:20px}
.adm-mail-tests-form{margin-top:4px}
.adm-mail-tests-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;
}
@media(max-width:1100px){.adm-mail-tests-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.adm-mail-tests-grid{grid-template-columns:1fr}}
.adm-mail-card{
  padding:16px 18px;border-radius:var(--r-xl);display:flex;flex-direction:column;gap:0;min-height:100%;
}
.adm-mail-card-title{margin:0 0 6px;font-size:0.98rem;font-weight:800;letter-spacing:-0.02em;color:var(--text)}
.adm-mail-card-desc{margin:0 0 12px;font-size:0.8rem;line-height:1.5;color:var(--muted)}
.adm-mail-card-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.adm-mail-tests-all{border:1px solid var(--border)}

.adm-mail-tpl-wrap{margin-top:20px}
.adm-mail-tpl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.adm-mail-tpl-tab{
  padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);
  font-size:0.78rem;font-weight:700;color:var(--text2);text-decoration:none;
  transition:background 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease);
}
.adm-mail-tpl-tab:hover{color:var(--text);border-color:var(--border2)}
.adm-mail-tpl-tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.adm-mail-tpl-settings{margin-bottom:12px}
.adm-mail-tpl-desc{margin:0 0 10px;font-size:0.84rem}
.adm-mail-tpl-ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.adm-mail-tpl-ph-lbl{font-size:0.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.adm-mail-tpl-ph-btn{
  padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);
  font-family:ui-monospace,Consolas,monospace;font-size:0.72rem;color:var(--text2);cursor:pointer;
}
.adm-mail-tpl-ph-btn:hover{border-color:var(--accent);color:var(--accent)}
.adm-mail-tpl-editor-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;
}
@media(max-width:1100px){.adm-mail-tpl-editor-grid{grid-template-columns:1fr}}
.adm-mail-tpl-textarea{
  min-height:380px;font-family:ui-monospace,Consolas,monospace;font-size:0.78rem;line-height:1.5;
  resize:vertical;
}
.adm-mail-tpl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.adm-mail-tpl-preview{
  display:flex;flex-direction:column;min-height:420px;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;
}
.adm-mail-tpl-preview-h{
  padding:10px 14px;font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface2);
}
.adm-mail-tpl-preview iframe{flex:1;width:100%;min-height:360px;border:0;background:#f0f4f8}

/* ——— UI refresh (kurang “template AI”, lebih solid & rapi) ——— */
.ui-panel{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(2,6,23,0.06);
  border-radius:var(--r-xl);
}
.ui-panel-strong{
  background:var(--surface);
  border:1px solid var(--border2);
  box-shadow:0 14px 36px rgba(2,6,23,0.08);
  border-radius:var(--r-2xl);
}
html[data-theme="dark"] .ui-panel,
html[data-theme="dark"] .ui-panel-strong{
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}

.brand-lockup{align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.brand-text-stack{display:flex;flex-direction:column;gap:2px;line-height:1.1;min-width:0}
.brand-text-title{
  font-family:var(--font-head);font-weight:800;font-size:0.98rem;letter-spacing:-0.03em;
  color:rgba(17,24,39,0.92);white-space:nowrap;
}
.brand-text-sub{font-size:0.68rem;font-weight:600;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
html[data-theme="dark"] .brand-text-title{color:rgba(234,242,255,0.96)}
@media(max-width:1100px){
  .nav-account-link{padding:7px 10px;font-size:0.78rem}
  .nav-links a{padding:8px 12px;font-size:0.82rem}
}
@media(max-width:1050px){
  .brand-text-sub{display:none}
}
@media(max-width:420px){
  .brand-text-title{font-size:0.9rem}
}

.auth-devnote{
  padding:14px 16px;border-radius:var(--r-lg);margin-bottom:18px;font-size:0.84rem;line-height:1.55;color:var(--text2);
  border:1px dashed rgba(234,179,8,0.45);background:rgba(250,204,21,0.08);
}
.auth-devnote strong{display:block;margin-bottom:6px;color:var(--text);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase}
.auth-devnote code{font-size:0.78rem;background:rgba(2,6,23,0.06);padding:2px 6px;border-radius:6px}
html[data-theme="dark"] .auth-devnote{border-color:rgba(250,204,21,0.35);background:rgba(250,204,21,0.06)}

.auth-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:16px;font-size:0.88rem}
.auth-foot-note{margin-top:10px;font-size:0.8rem;line-height:1.55;text-align:left}

.modal-overlay{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,0.45);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 200ms var(--ease);
}
.modal-overlay.is-open{opacity:1;pointer-events:auto}
.modal-card{max-width:420px;width:100%;padding:22px 22px 20px;border-radius:var(--r-xl)}
.modal-title{margin:0 0 8px;font-size:1.2rem;font-family:var(--font-head);font-weight:800;letter-spacing:-0.02em}
.modal-desc{margin:0 0 14px;font-size:0.88rem;line-height:1.55}
.modal-recap{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.modal-recap li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:rgba(2,6,23,0.03);border:1px solid var(--border)}
.modal-recap strong{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted)}
.modal-recap span{font-size:0.92rem;font-weight:600;color:var(--text);word-break:break-word}
.modal-count{margin:0 0 14px;font-size:0.82rem}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.modal-actions{grid-template-columns:1fr}}

.section-tight{padding:48px 0 64px}

.dash-hero{
  display:flex;flex-direction:column;gap:18px;
  padding:22px 22px 20px;border-radius:var(--r-2xl);
}
@media(min-width:900px){
  .dash-hero{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
    grid-template-rows:auto auto;
    gap:18px 22px;
    align-items:start;
  }
  .dash-hero-copy{grid-column:1;grid-row:1}
  .dash-hero-stats{grid-column:2;grid-row:1 / span 2;justify-content:flex-end}
  .dash-quick{grid-column:1;grid-row:2}
}
.dash-quick{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
@media(max-width:720px){.dash-quick{grid-template-columns:1fr}}
.dash-qcard{
  display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-lg);
  border:1px solid var(--border);background:rgba(2,6,23,0.02);text-decoration:none;color:inherit;
  transition:border-color 180ms,transform 180ms var(--ease),background 180ms;
}
.dash-qcard:hover{border-color:rgba(14,165,233,0.45);background:rgba(14,165,233,0.06);transform:translateY(-1px)}
html[data-theme="dark"] .dash-qcard{background:rgba(255,255,255,0.04)}
.dash-qcard-k{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted)}
.dash-qcard-t{font-size:0.9rem;font-weight:700;color:var(--text)}

.dash-course-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 4px;border-bottom:1px solid var(--border);
}
.co-paypulse::after{display:none}

.adm-devtools-hint{margin:12px 0 0;font-size:0.78rem;line-height:1.55;color:var(--muted)}

/* ——— Liquid glass ——— */
.liquid-glass{
  background:rgba(255,255,255,0.58);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:0 10px 40px rgba(2,6,23,0.07),inset 0 1px 0 rgba(255,255,255,0.85);
}
.liquid-glass-inset{
  background:rgba(255,255,255,0.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  border-radius:var(--r-xl);
}
html[data-theme="dark"] .liquid-glass{
  background:rgba(12,18,32,0.55);
  border:1px solid rgba(148,210,255,0.14);
  box-shadow:0 14px 44px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] .liquid-glass-inset{
  background:rgba(255,255,255,0.04);
  border-color:rgba(148,210,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ——— Top loading bar (semua halaman) ——— */
.top-progress{
  position:fixed;top:0;left:0;right:0;height:0;z-index:999;
  pointer-events:none;opacity:0;transition:opacity 160ms var(--ease);
}
.top-progress.is-active{opacity:1;height:3px}
.top-progress-bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#ff37bd 0%,var(--accent) 38%,var(--cyan) 100%);
  box-shadow:0 0 12px rgba(214,26,163,0.55),0 0 4px rgba(14,165,233,0.45);
  border-radius:0 2px 2px 0;
  transition:width 180ms var(--ease);
  position:relative;
}
.top-progress.is-loading .top-progress-bar::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);
  animation:topProgShine 1.2s ease-in-out infinite;
}
@keyframes topProgShine{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

/* ——— Beranda ——— */
.home-page{position:relative;overflow:hidden;padding-bottom:32px}
.home-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.home-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:0.45;
  animation:blobDrift 18s ease-in-out infinite;
}
.home-blob-a{width:min(520px,70vw);height:min(520px,70vw);top:-12%;left:-8%;background:radial-gradient(circle,rgba(236,72,153,0.24),transparent 68%)}
.home-blob-b{width:min(440px,60vw);height:min(440px,60vw);top:38%;right:-10%;background:radial-gradient(circle,rgba(56,189,248,0.18),transparent 70%);animation-delay:-6s;animation-duration:22s}
.home-blob-c{width:min(300px,45vw);height:min(300px,45vw);bottom:-6%;left:32%;background:radial-gradient(circle,rgba(167,139,250,0.14),transparent 72%);animation-delay:-11s;animation-duration:16s}
@keyframes blobDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(24px,-18px,0) scale(1.04)}66%{transform:translate3d(-16px,14px,0) scale(0.97)}}

.home-wrap{position:relative;z-index:1;padding-top:12px}
.home-block{padding-bottom:24px}

.home-hero{padding:8px 0 28px}
.hero-panel{border-radius:28px;padding:32px 34px 0;animation:fadeInUp 0.65s var(--ease) both;overflow:hidden}
.hero-panel-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:36px;align-items:center;
}
.hero-panel-copy{display:flex;flex-direction:column;gap:0;padding-bottom:28px}
.home-hero .hero-kicker{font-size:0.82rem;margin:0;font-weight:700}
.home-hero .hero-eyebrow{margin-bottom:14px}
.home-hero .hero-h1{margin-bottom:14px}
.home-hero .hero-p{margin-bottom:22px}
.hero-panel-visual{display:flex;justify-content:center;align-items:center;padding-bottom:12px}
.hero-visual-frame{padding:20px;border-radius:26px;display:flex;justify-content:center;align-items:center}
.hero-float{animation:heroFloat 7s ease-in-out infinite;filter:drop-shadow(0 22px 46px rgba(2,6,23,0.14));width:min(400px,100%);height:auto}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border-top:1px solid var(--border);
  margin:0 -34px;padding:0;
}
.hero-metric{
  padding:18px 20px;text-align:center;
  border-right:1px solid var(--border);
}
.hero-metric:last-child{border-right:none}
.hero-metric strong{
  display:block;font-family:var(--font-head);font-size:1.3rem;font-weight:900;
  letter-spacing:-0.03em;color:var(--text);margin-bottom:2px;
}
.hero-metric span{font-size:0.76rem;color:var(--muted);font-weight:600}

.section-head-row h2 br{display:none}
.home-section .section-head{margin-bottom:40px}
.home-section .section-head h2{max-width:28ch}
.home-section .feat-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(2,6,23,0.09)}

/* E-kursus section */
.courses-section{padding-top:64px}
.courses-catalog{max-width:1040px;margin:0 auto;width:100%}
.courses-catalog-foot{display:flex;justify-content:center;margin-top:18px}
.courses-show-more{min-width:220px}
.courses-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:24px 26px;border-radius:22px;margin-bottom:28px;min-width:0;
  max-width:1040px;margin-left:auto;margin-right:auto;
}
.courses-section-intro{min-width:0;flex:1}
.courses-section-intro h2{margin-bottom:8px;max-width:22ch}
.courses-section-intro p{margin:0;max-width:52ch;font-size:0.96rem}
.courses-section-stat{
  flex-shrink:0;text-align:center;padding:14px 20px;border-radius:16px;
  background:linear-gradient(145deg,rgba(214,26,163,0.10),rgba(56,189,248,0.08));
  border:1px solid rgba(214,26,163,0.14);min-width:108px;
}
.courses-section-stat strong{display:block;font-family:var(--font-head);font-size:1.75rem;font-weight:900;letter-spacing:-0.04em;line-height:1}
.courses-section-stat span{font-size:0.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.06em}

.course-feature{
  display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;min-width:0;
  transition:transform 280ms var(--ease),box-shadow 280ms var(--ease);
  max-width:1040px;margin:0 auto;width:100%;
}
.course-feature:hover{transform:translateY(-4px);box-shadow:0 24px 56px rgba(2,6,23,0.11)}
.course-feature-video-block{
  width:100%;min-width:0;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.course-feature-cover{
  position:relative;width:100%;aspect-ratio:16/9;
  overflow:hidden;min-width:0;
  background:#000;line-height:0;
}
.course-feature-media{
  position:absolute;inset:0;z-index:2;
}
.course-feature-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:none;background:#000;
  max-width:100%;max-height:100%;
}
.course-feature-cover.is-playing .course-feature-video{display:block}
.course-feature-cover.is-playing .course-feature-play{opacity:0;pointer-events:none}
.course-feature-cover.is-playing .course-feature-cover-bg{opacity:0;visibility:hidden}
.course-feature-chips{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 18px;background:rgba(2,6,23,0.02);
}
html[data-theme="dark"] .course-feature-chips{background:rgba(255,255,255,0.03)}
.course-feature-chip{
  font-size:0.72rem;font-weight:700;color:var(--text2);
  padding:5px 10px;border-radius:999px;
  background:rgba(2,6,23,0.04);border:1px solid var(--border);
}
.course-feature-chip--trial{
  color:var(--green);background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.22);
}
.course-feature-play{
  position:absolute;top:50%;left:50%;z-index:3;
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px 10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);background:rgba(15,23,42,0.55);
  color:#fff;cursor:pointer;backdrop-filter:blur(10px);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),background 200ms var(--ease);
  max-width:calc(100% - 28px);
}
.course-feature-play:hover{transform:translate(-50%,calc(-50% - 2px));background:rgba(15,23,42,0.68)}
.course-feature-play-ico{
  width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(214,26,163,0.85),rgba(56,189,248,0.75));
  box-shadow:0 8px 22px rgba(2,6,23,0.22);
}
.course-feature-play-ico svg{width:18px;height:18px;margin-left:2px}
.course-feature-play-txt{text-align:left;line-height:1.3;min-width:0}
.course-feature-play-txt strong{display:block;font-size:0.88rem;font-weight:800}
.course-feature-play-txt small{display:block;font-size:0.76rem;opacity:0.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.course-feature-trial-hint{margin:0;font-size:0.84rem;line-height:1.55}
.course-feature-benefits{
  padding:14px 16px;border-radius:16px;
  background:rgba(2,6,23,0.025);border:1px solid var(--border);
}
html[data-theme="dark"] .course-feature-benefits{background:rgba(255,255,255,0.03)}
.course-feature-benefits h4{
  margin:0 0 10px;font-size:0.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--muted);
}
.course-feature-benefits ul{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;
}
.course-feature-benefits li{
  position:relative;padding-left:16px;font-size:0.82rem;color:var(--text2);line-height:1.5;
}
.course-feature-benefits li::before{
  content:'';position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
}
.course-feature-cover-bg{
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(214,26,163,0.22) 0%,rgba(56,189,248,0.18) 45%,rgba(124,58,237,0.14) 100%);
}
.course-feature-cover-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,0.35),transparent 55%);
}
.course-feature-cover-ico{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:72px;height:72px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.45);
  color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(2,6,23,0.12);
}
.course-feature-cover-ico svg{width:30px;height:30px;margin-left:3px}
.course-feature-body{
  padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;min-width:0;
}
.course-feature-body-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:16px 22px;align-items:start;min-width:0;
}
.course-feature-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.course-feature-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.course-feature-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.course-feature-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.course-feature-price{font-family:var(--font-head);font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:900;letter-spacing:-0.04em}
.course-feature-body h3{font-size:1.25rem;margin:0;line-height:1.25}
.course-feature-main > p{margin:0;font-size:0.9rem;color:var(--text2);line-height:1.68}
.course-feature-cta{margin-top:0}
.course-feature-perks{
  list-style:none;margin:4px 0 8px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.course-feature-perks li{
  font-size:0.78rem;font-weight:700;color:var(--text2);
  padding:6px 11px;border-radius:999px;
  background:rgba(2,6,23,0.04);border:1px solid var(--border);
}
html[data-theme="dark"] .course-feature-perks li{background:rgba(255,255,255,0.05)}

.courses-grid{display:grid;gap:14px}
.courses-grid--duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin:0 auto}
.courses-grid--multi{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.courses-grid.is-collapsed .course-card-v2--more{display:none}
.course-card-v2{
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease);
}
.course-card-v2:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,0.08)}
.course-card-v2-cover{position:relative;height:92px;padding:12px 14px;display:flex;align-items:flex-start}
.course-card-v2-cover-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(214,26,163,0.18),rgba(56,189,248,0.14));
}
.course-card-v2-cover .badge{position:relative;z-index:1}
.course-card-v2-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.course-card-v2-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.course-card-v2-top h3{margin:0;font-size:0.95rem;flex:1;line-height:1.3}
.course-card-v2-price{font-family:var(--font-head);font-weight:900;font-size:0.98rem;letter-spacing:-0.03em;white-space:nowrap}
.course-card-v2-body > p{
  margin:0;font-size:0.82rem;color:var(--text2);line-height:1.55;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.course-card-v2-meta{
  display:flex;flex-wrap:wrap;gap:8px 12px;
  font-size:0.76rem;color:var(--muted);font-weight:600;
  padding-top:8px;border-top:1px solid var(--border);
}
.course-card-v2-meta span:not(:last-child)::after{
  content:'·';margin-left:12px;opacity:0.5;
}

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.65s var(--ease),transform 0.65s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal] .course-card,
[data-reveal] .course-card-v2,
[data-reveal] .course-feature,
[data-reveal] .testi-card,
[data-reveal] .feat-card{opacity:0;transform:translateY(16px);transition:opacity 0.55s var(--ease),transform 0.55s var(--ease);transition-delay:var(--reveal-delay,0.1s)}
[data-reveal].is-visible .course-card,
[data-reveal].is-visible .course-card-v2,
[data-reveal].is-visible .course-feature,
[data-reveal].is-visible .testi-card,
[data-reveal].is-visible .feat-card{opacity:1;transform:translateY(0)}

@media(min-width:1080px){
  .course-feature-video-block{
    display:flex;flex-direction:column;align-items:center;
    background:transparent;
  }
  .course-feature-cover{
    width:100%;max-width:640px;max-height:360px;
    aspect-ratio:16/9;
  }
  .course-feature-chips{
    width:100%;max-width:640px;justify-content:flex-start;
    background:transparent;border-top:1px solid var(--border);
    padding-top:10px;margin-top:0;
  }
  .course-feature-body-top{
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    gap:16px 24px;
  }
  .course-feature-body{padding:20px 24px 24px}
  .course-feature-benefits ul{
    display:grid;grid-template-columns:1fr;gap:6px;
  }
  .course-feature-benefits li{font-size:0.78rem}
  .courses-grid--multi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .courses-grid--many{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1280px){
  .courses-grid--many{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1024px){
  .hero-panel-grid{grid-template-columns:1fr;gap:20px}
  .hero-panel{padding:24px 22px 0}
  .hero-metrics{margin:0 -22px;grid-template-columns:repeat(2,1fr)}
  .hero-metric:nth-child(2){border-right:none}
  .hero-metric:nth-child(1),.hero-metric:nth-child(2){border-bottom:1px solid var(--border)}
  .hero-panel-visual{order:-1}
  .hero-float{width:min(320px,88vw)}
  .course-feature-body-top{grid-template-columns:1fr}
  .courses-grid--multi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .courses-section-head{flex-direction:column;align-items:flex-start}
}

@media(max-width:768px){
  .home-section{padding:52px 0}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .hero-metric{padding:14px 12px}
  .hero-metric strong{font-size:1.15rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .courses-grid--duo,.courses-grid--multi{grid-template-columns:1fr}
  .course-feature-body{padding:20px 18px 22px}
  .courses-section-head{padding:20px 18px}
}

/* Kontak beranda */
.contact-section{padding-bottom:48px}
.contact-panel{border-radius:24px;padding:28px 30px 24px}
.contact-panel-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px 32px;align-items:start;
}
.contact-intro h2{margin:0 0 10px;font-size:clamp(1.35rem,2vw + 0.8rem,2rem)}
.contact-intro p{margin:0 0 10px;color:var(--text2);line-height:1.72;max-width:46ch;font-size:0.94rem}
.contact-intro a{color:var(--accent);font-weight:700;text-decoration:none}
.contact-intro a:hover{text-decoration:underline}
.contact-hours{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:0.84rem;font-weight:700;color:var(--muted);
  padding:8px 12px;border-radius:999px;
  background:rgba(2,6,23,0.04);border:1px solid var(--border);
}
.contact-channels{display:flex;flex-direction:column;gap:12px}
.contact-channel{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--border);background:rgba(2,6,23,0.02);
  text-decoration:none;color:inherit;transition:all 220ms var(--ease);
}
.contact-channel:hover{transform:translateY(-2px);border-color:rgba(14,165,233,0.35);box-shadow:0 12px 28px rgba(2,6,23,0.08)}
.contact-channel--wa:hover{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.contact-channel--mail:hover{border-color:rgba(214,26,163,0.28);background:rgba(214,26,163,0.04)}
.contact-channel--empty{opacity:0.85;cursor:default}
.contact-channel--empty:hover{transform:none;box-shadow:none}
.contact-channel-ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,6,23,0.04);border:1px solid var(--border);color:var(--text);
}
.contact-channel--wa .contact-channel-ico{background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.25);color:#16a34a}
.contact-channel-ico svg{width:22px;height:22px;display:block}
.contact-channel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-channel-txt strong{font-size:0.92rem;font-weight:800}
.contact-channel-txt span{font-size:0.82rem;color:var(--muted);line-height:1.45;word-break:break-word}
.contact-social{margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.contact-social-head{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:12px}
.contact-social-grid{display:flex;flex-wrap:wrap;gap:10px}
.contact-soc{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  font-size:0.84rem;font-weight:700;text-decoration:none;color:var(--text2);
  border:1px solid var(--border);background:rgba(2,6,23,0.03);transition:all 200ms var(--ease);
}
.contact-soc:hover{transform:translateY(-2px);color:var(--text);border-color:var(--border2)}
.contact-soc-ico{
  width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:0.68rem;font-weight:900;font-family:var(--font-head);
  background:rgba(2,6,23,0.06);border:1px solid var(--border);
}
.contact-soc--ig .contact-soc-ico{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);color:#fff;border:none}
.contact-soc--fb .contact-soc-ico{background:#1877f2;color:#fff;border:none}
.contact-soc--tt .contact-soc-ico{background:#010101;color:#fff;border:none}
.contact-soc--yt .contact-soc-ico{background:#ff0000;color:#fff;border:none}
.contact-soc--tg .contact-soc-ico{background:#229ed9;color:#fff;border:none}
html[data-theme="dark"] .contact-channel{background:rgba(255,255,255,0.04)}
html[data-theme="dark"] .contact-soc{background:rgba(255,255,255,0.04)}
@media(max-width:900px){
  .contact-panel-grid{grid-template-columns:1fr;gap:20px}
  .contact-panel{padding:22px 18px 20px}
}

/* Trial beranda */
.home-trial-section{padding-top:48px}
.trial-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;
}
.trial-section-head h2{margin:0 0 8px;max-width:28ch;font-size:clamp(1.35rem,2vw + 0.8rem,2rem)}
.trial-section-head p{margin:0;max-width:52ch;color:var(--text2);font-size:0.94rem;line-height:1.65}
.trial-shuffle-badge{
  flex-shrink:0;font-size:0.78rem;font-weight:800;padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,rgba(34,197,94,0.12),rgba(56,189,248,0.1));
  border:1px solid rgba(34,197,94,0.28);color:var(--green);
}
.trial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trial-card{
  border-radius:20px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;
  transition:transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.trial-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(2,6,23,0.09)}
.trial-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.trial-course{font-size:0.76rem;font-weight:700;color:var(--muted)}
.trial-card h3{margin:0;font-size:1.05rem;line-height:1.35}
.trial-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.trial-preview-wrap{
  position:relative;border-radius:14px;overflow:hidden;background:#0f172a;
  aspect-ratio:16/9;margin:-4px 0 4px;
}
.trial-preview-video{width:100%;height:100%;object-fit:contain;display:block;vertical-align:top;background:#000}
.trial-preview-wrap--home .trial-preview-video{object-fit:contain}
.trial-clip-badge{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-size:0.68rem;font-weight:800;padding:5px 10px;border-radius:999px;
  background:rgba(15,23,42,0.72);color:#fff;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);max-width:calc(100% - 20px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trial-watch-notice{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:14px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(56,189,248,0.08));
  border:1px solid rgba(34,197,94,0.22);font-size:0.86rem;line-height:1.55;
}
.trial-clip-end{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
  background:rgba(15,23,42,0.82);backdrop-filter:blur(6px);border-radius:16px;
}
.trial-clip-end-title{margin:0;font-weight:800;font-size:1.05rem;color:#fff}
.trial-clip-end-desc{margin:0;max-width:36ch;font-size:0.88rem;color:rgba(255,255,255,0.82);line-height:1.55}
@media(max-width:900px){.trial-grid{grid-template-columns:1fr}}
@media(max-width:768px){.trial-section-head{flex-direction:column;align-items:flex-start}}

/* Admin: edit video */
.adm-video-edit{padding:16px 18px;border-radius:16px;margin-bottom:16px}
.adm-video-edit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.adm-video-edit-form .form-group{margin-bottom:12px}
.adm-vid-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.adm-table tbody tr.is-editing td{background:rgba(214,26,163,0.06)}

@media(prefers-reduced-motion:reduce){
  .home-blob,.hero-float,.top-progress.is-loading .top-progress-bar::after{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-reveal] .course-card,[data-reveal] .course-card-v2,[data-reveal] .course-feature,[data-reveal] .testi-card,[data-reveal] .feat-card{opacity:1;transform:none;transition:none}
}