/* ============================================================
   Assessment Future Leader — Legacy Solution
   Sistem desain: Navy • Putih • Gold  |  Glassmorphism ala Apple
   ============================================================ */
:root{
  --navy-950:#050D26; --navy-900:#071233; --navy-800:#0A1A3C; --navy-700:#102A63;
  --navy-600:#17397F; --navy-500:#22509F;
  --gold-600:#A8851C; --gold-500:#C9A227; --gold-400:#DDB84A; --gold-300:#EDD183; --gold-100:#F7EBC6;
  --ink:#0B1730; --ink-70:#41506E; --ink-45:#7B879E;
  --paper:#FFFFFF; --paper-2:#F6F8FC;
  --ok:#1E9E6A; --warn:#D98A20; --bad:#D2544B;

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --shadow-1:0 2px 8px rgba(5,13,38,.06), 0 12px 34px rgba(5,13,38,.09);
  --shadow-2:0 4px 14px rgba(5,13,38,.10), 0 26px 70px rgba(5,13,38,.18);
  --glass-dark:rgba(255,255,255,.062);
  --glass-line:rgba(255,255,255,.135);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.55;}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.021em;line-height:1.2}
p{margin:0 0 .85em}
.container{width:min(100% - 32px,1120px);margin-inline:auto}
.narrow{width:min(100% - 32px,760px);margin-inline:auto}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- TEMA GELAP (landing + kuis) ---------- */
body.theme-dark{background:var(--navy-950);color:#EAF0FB}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(1100px 700px at 12% -10%, rgba(34,80,159,.55), transparent 62%),
  radial-gradient(900px 620px at 92% 4%, rgba(201,162,39,.20), transparent 60%),
  radial-gradient(1000px 800px at 50% 108%, rgba(23,57,127,.55), transparent 62%),
  linear-gradient(180deg,#050D26 0%,#071539 46%,#050D26 100%);}
.aurora::after{content:"";position:absolute;inset:-20%;
  background-image:radial-gradient(rgba(255,255,255,.05) .6px, transparent .7px);
  background-size:3px 3px;opacity:.5;mix-blend-mode:overlay}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 18s var(--ease) infinite alternate}
.orb.a{width:340px;height:340px;background:#2A5FBF;top:-90px;left:-70px}
.orb.b{width:300px;height:300px;background:var(--gold-500);bottom:-110px;right:-60px;animation-delay:-7s;opacity:.28}
@keyframes float{to{transform:translate3d(38px,46px,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
.page{position:relative;z-index:1}

/* ---------- KARTU KACA ---------- */
.glass{background:var(--glass-dark);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 24px 60px rgba(2,7,22,.45);}
.glass-light{background:rgba(255,255,255,.78);border:1px solid rgba(11,23,48,.07);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:var(--shadow-1);}
.pad{padding:clamp(20px,4vw,34px)}

/* ---------- MERK / LOGO ---------- */
.brandbar{display:flex;align-items:center;gap:14px;padding:18px 0}
.logo-tile{width:56px;height:56px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(160deg,#fff,#EEF3FB);box-shadow:0 6px 20px rgba(2,7,22,.35), 0 0 0 1px rgba(255,255,255,.5) inset;}
.logo-tile img{width:78%;height:78%;object-fit:contain}
.brandbar .bt{font-weight:700;letter-spacing:-.02em;font-size:1rem;line-height:1.15}
.brandbar .bs{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300);font-weight:600}
body:not(.theme-dark) .brandbar .bs{color:var(--gold-600)}

/* ---------- TIPOGRAFI KHAS ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-300);border:1px solid rgba(221,184,74,.32);
  background:rgba(221,184,74,.09);padding:7px 14px;border-radius:999px}
body:not(.theme-dark) .eyebrow{color:var(--gold-600);border-color:rgba(168,133,28,.28);background:rgba(221,184,74,.12)}
.display{font-size:clamp(2rem,6.2vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.06}
.gold-text{background:linear-gradient(100deg,var(--gold-300),var(--gold-500) 55%,var(--gold-300));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,2.4vw,1.13rem);color:rgba(234,240,251,.76);max-width:60ch}
body:not(.theme-dark) .lead{color:var(--ink-70)}
.muted{color:rgba(234,240,251,.62)}
body:not(.theme-dark) .muted{color:var(--ink-45)}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);border:0;margin:26px 0}
body:not(.theme-dark) .hr{background:linear-gradient(90deg,transparent,rgba(11,23,48,.12),transparent)}

/* ---------- TOMBOL ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  padding:14px 26px;border-radius:999px;font-weight:650;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s;}
.btn:active{transform:scale(.975)}
.btn-gold{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));color:#2A2103;
  box-shadow:0 8px 26px rgba(201,162,39,.34), 0 1px 0 rgba(255,255,255,.6) inset}
.btn-gold:hover{box-shadow:0 12px 34px rgba(201,162,39,.44), 0 1px 0 rgba(255,255,255,.6) inset}
.btn-navy{background:linear-gradient(140deg,var(--navy-600),var(--navy-800));color:#fff;
  box-shadow:0 8px 24px rgba(10,26,60,.30)}
.btn-ghost{background:rgba(255,255,255,.07);color:#EAF0FB;border:1px solid var(--glass-line)}
body:not(.theme-dark) .btn-ghost{background:#fff;color:var(--navy-800);border:1px solid rgba(11,23,48,.12);box-shadow:var(--shadow-1)}
.btn-wa{background:linear-gradient(140deg,#2BD36A,#14A44D);color:#04240F;box-shadow:0 8px 26px rgba(20,164,77,.30)}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none}
.btn-lg{padding:17px 34px;font-size:1.06rem}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- FORM ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.field .hint{font-size:.78rem;color:rgba(234,240,251,.55);margin-top:6px}
body:not(.theme-dark) .field .hint{color:var(--ink-45)}
.input{width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--glass-line);
  background:rgba(255,255,255,.07);color:#EAF0FB;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}
.input::placeholder{color:rgba(234,240,251,.38)}
.input:focus{border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(221,184,74,.18);background:rgba(255,255,255,.10)}
body:not(.theme-dark) .input{background:#fff;color:var(--ink);border-color:rgba(11,23,48,.14)}
.input.err{border-color:var(--bad);box-shadow:0 0 0 4px rgba(210,84,75,.16)}
.err-msg{color:#FFB4AE;font-size:.8rem;margin-top:6px;display:none}
.err-msg.show{display:block}

/* ---------- KUIS ---------- */
.progress-wrap{position:sticky;top:0;z-index:20;padding:10px 0 12px;
  background:linear-gradient(180deg,rgba(5,13,38,.94),rgba(5,13,38,.62) 70%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:.79rem;
  color:rgba(234,240,251,.72);margin-bottom:8px;font-variant-numeric:tabular-nums}
.progress{height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transition:width .35s var(--ease)}
.sec-head{margin:6px 0 20px}
.sec-head .n{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);font-weight:700}
.sec-head h2{font-size:clamp(1.4rem,4vw,1.9rem);margin:6px 0 8px}

.qcard{margin-bottom:14px;padding:20px 20px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);transition:border-color .2s,background .2s}
.qcard.answered{border-color:rgba(221,184,74,.34);background:rgba(221,184,74,.055)}
.qcard.pulse{animation:pulse .5s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(221,184,74,.35)}100%{box-shadow:0 0 0 14px rgba(221,184,74,0)}}
.qnum{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--gold-300);margin-bottom:6px}
.qtext{font-size:1.02rem;font-weight:550;letter-spacing:-.012em;margin-bottom:16px;line-height:1.45}

.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.likert button{position:relative;padding:12px 4px 9px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(234,240,251,.82);
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .16s var(--ease)}
.likert button .dot{width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,.35);transition:all .16s}
.likert button .lb{font-size:.62rem;hyphens:auto;line-height:1.15;text-align:center;letter-spacing:-.01em;opacity:.8}
.likert button:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)}
.likert button[aria-pressed="true"]{background:linear-gradient(150deg,rgba(237,209,131,.24),rgba(201,162,39,.14));
  border-color:var(--gold-400);color:#fff}
.likert button[aria-pressed="true"] .dot{background:linear-gradient(150deg,var(--gold-300),var(--gold-500));
  border-color:var(--gold-300);box-shadow:0 0 0 4px rgba(221,184,74,.18)}
.likert button[aria-pressed="true"] .lb{opacity:1}

.choices{display:grid;gap:9px}
.choices button{text-align:left;padding:15px 17px;border-radius:15px;cursor:pointer;line-height:1.4;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(234,240,251,.9);
  display:flex;gap:12px;align-items:flex-start;transition:all .16s var(--ease);font-size:.95rem}
.choices button .mk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.32);margin-top:1px;transition:all .16s}
.choices button:hover{background:rgba(255,255,255,.09)}
.choices button[aria-pressed="true"]{background:linear-gradient(150deg,rgba(237,209,131,.22),rgba(201,162,39,.12));
  border-color:var(--gold-400);color:#fff}
.choices button[aria-pressed="true"] .mk{background:linear-gradient(150deg,var(--gold-300),var(--gold-500));border-color:var(--gold-300)}

.quiz-nav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:26px 0 40px}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .25s}
.dots i.on{background:var(--gold-400);width:22px;border-radius:999px}
.dots i.done{background:rgba(221,184,74,.5)}

/* ---------- REPORT (tema terang) ---------- */
body.theme-light{background:
  radial-gradient(900px 520px at 8% -6%, rgba(34,80,159,.10), transparent 60%),
  radial-gradient(760px 480px at 96% 2%, rgba(201,162,39,.12), transparent 58%),
  linear-gradient(180deg,#F7F9FD,#FFFFFF 45%,#F5F8FD);
  background-attachment:fixed;color:var(--ink)}
.rep-hero{border-radius:var(--r-xl);padding:clamp(24px,5vw,44px);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900) 60%,var(--navy-950));
  box-shadow:0 24px 64px rgba(7,18,51,.28)}
.rep-hero::before{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(221,184,74,.42),transparent 65%)}
.rep-hero::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) .6px,transparent .7px);background-size:3px 3px;opacity:.6}
.rep-hero > *{position:relative;z-index:2}

.score-ring{display:grid;place-items:center;position:relative;width:170px;height:170px;flex:0 0 auto}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .val{position:absolute;text-align:center}
.score-ring .val b{display:block;font-size:2.9rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.score-ring .val span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}

.card{background:#fff;border:1px solid rgba(11,23,48,.07);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:clamp(20px,3.4vw,30px);margin-bottom:18px}
.card > h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:4px}
.card .sub{font-size:.86rem;color:var(--ink-45);margin-bottom:18px}
.sec-title{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.sec-title .num{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-300),var(--gold-500));color:#2A2103;font-weight:700;font-size:.86rem}
.sec-title h2{font-size:1.32rem;letter-spacing:-.025em}

.bar{margin-bottom:15px}
.bar .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.bar .nm{font-weight:600;font-size:.93rem;letter-spacing:-.01em}
.bar .vl{font-weight:700;font-size:.93rem;font-variant-numeric:tabular-nums;color:var(--navy-700)}
.bar .track{height:9px;border-radius:999px;background:#EBEFF7;overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy-600),var(--navy-500))}
.bar.gold .fill{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.bar.ok .fill{background:linear-gradient(90deg,#17915F,#3CC48C)}
.bar.warn .fill{background:linear-gradient(90deg,#C57A16,#E7B455)}
.bar.bad .fill{background:linear-gradient(90deg,#B8443B,#E0796F)}
.bar .desc{font-size:.79rem;color:var(--ink-45);margin-top:5px;line-height:1.4}

.pill{display:inline-block;padding:5px 13px;border-radius:999px;font-size:.75rem;font-weight:650;letter-spacing:-.005em}
.pill-gold{background:rgba(221,184,74,.16);color:var(--gold-600)}
.pill-navy{background:rgba(23,57,127,.10);color:var(--navy-700)}
.pill-ok{background:rgba(30,158,106,.13);color:#14724B}
.pill-bad{background:rgba(210,84,75,.13);color:#A63B33}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.grid-pilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.tile{border-radius:var(--r-md);padding:18px;background:var(--paper-2);border:1px solid rgba(11,23,48,.06)}
.tile .k{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45);font-weight:650}
.tile .v{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-top:4px;color:var(--navy-800)}
.tile .d{font-size:.8rem;color:var(--ink-45);margin-top:3px}

.plan{border-left:3px solid var(--gold-400);padding-left:16px;margin-bottom:20px}
.plan h4{font-size:1rem;margin-bottom:4px}
.plan .why{font-size:.88rem;color:var(--ink-70);margin-bottom:10px}
.plan ul{margin:0;padding-left:18px;font-size:.88rem;color:var(--ink-70)}
.plan ul li{margin-bottom:5px}
.plan .src{font-size:.78rem;color:var(--ink-45);margin-top:8px;font-style:italic}

table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
  padding:9px 10px;border-bottom:1px solid rgba(11,23,48,.10);font-weight:650}
table.tbl td{padding:11px 10px;border-bottom:1px solid rgba(11,23,48,.06);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}

.sticky-cta{position:sticky;bottom:0;z-index:30;margin-top:22px;padding:14px 0 18px;
  background:linear-gradient(180deg,transparent,rgba(247,249,253,.92) 32%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sticky-cta .inner{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.footer{padding:34px 0 40px;text-align:center;font-size:.8rem;color:var(--ink-45)}
body.theme-dark .footer{color:rgba(234,240,251,.45)}

/* ---------- ADMIN ---------- */
.adm-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.adm-side{background:linear-gradient(180deg,var(--navy-800),var(--navy-950));color:#DDE6F7;padding:20px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.adm-side a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;text-decoration:none;
  color:rgba(221,230,247,.78);font-size:.91rem;font-weight:550;margin-bottom:3px;transition:all .15s}
.adm-side a:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-side a.on{background:linear-gradient(140deg,rgba(221,184,74,.22),rgba(201,162,39,.10));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(221,184,74,.30)}
.adm-main{padding:26px clamp(16px,3vw,32px) 60px;background:var(--paper-2);min-width:0}
.adm-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid rgba(11,23,48,.07);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-1)}
.stat .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);font-weight:650}
.stat .v{font-size:1.85rem;font-weight:700;letter-spacing:-.035em;color:var(--navy-800);margin-top:3px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .input{width:auto;flex:1 1 220px;padding:10px 14px;font-size:.9rem}
.tblwrap{background:#fff;border:1px solid rgba(11,23,48,.07);border-radius:var(--r-md);overflow:auto;box-shadow:var(--shadow-1)}
.tblwrap table{min-width:820px}
@media(max-width:420px){.likert{gap:5px}.likert button{padding:10px 2px 8px;border-radius:12px}.likert button .lb{font-size:.55rem}}
@media(max-width:820px){.adm-shell{grid-template-columns:1fr}
  .adm-side{position:static;height:auto;display:flex;gap:6px;overflow-x:auto;padding:12px}
  .adm-side .adm-brand{display:none}.adm-side a{white-space:nowrap;margin:0}}

/* ---------- CETAK / PDF ---------- */
@media print{
  @page{size:A4;margin:13mm 12mm}
  body.theme-light{background:#fff!important}
  .no-print,.sticky-cta,.aurora{display:none!important}
  .card,.rep-hero{box-shadow:none!important;border:1px solid #DDE3EE!important}
  .card{break-inside:auto;margin-bottom:10px;padding:15px 17px;border-radius:14px}
  .rep-hero{break-inside:avoid;padding:20px;border-radius:16px}
  .bar,.plan,.tile,.stat,tr,.grid3>*{break-inside:avoid}
  body{font-size:12.4px}
  .sec-title{margin:16px 0 8px}
  .sec-title h2{font-size:1.12rem}
  .card>h3{font-size:1.04rem}
  .brandbar{display:none}
  .footer{padding:12px 0 0;font-size:.68rem}
  .rep-hero{background:linear-gradient(150deg,#102A63,#071233)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sec-title{break-after:avoid}
  .page-break{break-before:page}
  .container,.narrow{width:100%!important}
  a[href]::after{content:""}
}