@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--navy:#071c49;--blue:#078bd1;--cyan:#72e5ff;--cream:#fff9eb;--gold:#ffca48;--ink:#102b53}*{box-sizing:border-box}body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 10%,#1a4a89,transparent 30%),linear-gradient(145deg,#061536,#0b2a5e 55%,#061536);background-attachment:fixed}.hero{max-width:1100px;margin:22px auto 0;padding:24px;display:flex;align-items:center;justify-content:center;gap:24px;color:white;background:linear-gradient(115deg,#06163df2,#0b4b8de8);border:1px solid #65dfff66;border-radius:25px 25px 0 0}.hero-art{width:160px;height:130px;flex:0 0 160px;border-radius:20px;background:#fff2 url('assets/bima-ama-banner.png') center/auto 150% no-repeat;border:2px solid var(--cyan);box-shadow:0 0 20px #29bfff55}.eyebrow,.kicker{font-size:.75rem;letter-spacing:1.2px;font-weight:900;color:#f9c94f;margin:0 0 8px}.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1;margin:0;font-weight:900}.hero h1 span{display:block;color:var(--cyan);text-shadow:0 3px #07508c}.subtitle{color:#e8f8ff}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{background:#0b3974;border:1px solid #67dcff77;padding:7px 11px;border-radius:30px;font-weight:800;font-size:.82rem}main{max-width:1100px;margin:0 auto 28px;padding:0 16px}.panel{background:var(--cream);padding:clamp(20px,4vw,36px);border:1px solid #ffe3a0;border-radius:0 0 24px 24px;box-shadow:0 18px 40px #0003}.panel h2{margin:4px 0 10px;font-size:clamp(1.45rem,3vw,2rem);color:var(--navy)}.panel>p:not(.kicker){line-height:1.65;color:#52617b}.counts,.breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.counts div,.breakdown div{background:#fff;border:1px solid #e0e5eb;border-radius:14px;padding:15px;text-align:center;display:flex;flex-direction:column;gap:4px}.counts b{color:#087dbd}.counts span{font-size:.85rem;color:#65738a;font-weight:700}.start{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.start label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;font-weight:900;flex:1;min-width:220px}input{font:inherit} .start input{padding:13px;border:1px solid #cad8e7;border-radius:12px;background:white}button{font:inherit;font-weight:900;border:0;border-radius:12px;padding:13px 18px;cursor:pointer;transition:.15s;background:linear-gradient(135deg,#ffdf65,#ffb72e);color:#092750;box-shadow:0 4px #d79c20}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid #168bd0;outline-offset:3px}.secondary{background:#e9f5ff;color:#174f89;border:1px solid #b8d9f3;box-shadow:none}.hidden{display:none!important}#quiz,#results{border-radius:24px;margin-top:18px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.top h2{margin-bottom:0}.counter{color:#60718a}.counter b{font-size:1.5rem;color:#087dbd}.track{height:10px;background:#e0e6ee;border-radius:30px;overflow:hidden;margin:20px 0}.track div{height:100%;width:2%;background:linear-gradient(90deg,#178ee0,#69e7ff);transition:width .2s}.meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}.meta span{font-size:.7rem;font-weight:900;letter-spacing:.4px;color:#0569a8;background:#dff5ff;border-radius:30px;padding:6px 10px}.meta b{font-size:.85rem;color:#8b6b16}#question{font-size:clamp(1.1rem,2.5vw,1.45rem);line-height:1.5;margin:16px 0 8px}.muted,.fine{color:#69778e;font-size:.9rem}.answers{display:grid;gap:10px}.option{display:flex;gap:12px;align-items:flex-start;background:white;border:1.5px solid #d4dfeb;border-radius:13px;padding:14px;line-height:1.45;cursor:pointer}.option.selected{border-color:#1499de;background:#e7f7ff}.option input{accent-color:#078bd1;margin-top:4px}.letter{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:8px;background:#edf3fb;color:#1c528c;font-weight:900}.option.selected .letter{background:#078bd1;color:white}.actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:24px}.fine{font-size:.78rem;margin-bottom:0}.result-head{text-align:center}.medal{font-size:3rem}.result-head p:last-child{color:#65738a}.score{width:250px;max-width:100%;margin:22px auto;background:linear-gradient(145deg,#0c3470,#0b76b5);color:white;border-radius:18px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center}.score b{font-size:4rem;color:#ffdb61;line-height:1.1}.score small{color:#d5f4ff}.breakdown b{font-size:1.4rem;color:#0879bb}.breakdown span{font-size:.82rem;color:#66758a;font-weight:800}.center{justify-content:center}.review-item{background:white;border:1px solid #dfe7ef;border-radius:13px;padding:15px;margin:10px 0}.review-item h4{margin:0 0 8px;color:#133d73}.review-item p{line-height:1.5;font-size:.9rem}.good{color:#16724b;font-weight:900}.wrong{color:#a94d19;font-weight:900}.explain{color:#66758a}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 5px;color:#d7eaff;font-size:.78rem}@media(max-width:680px){.hero{margin:10px 8px 0;padding:20px 14px;flex-direction:column;text-align:center;border-radius:20px 20px 0 0}.hero-art{width:125px;height:90px;flex-basis:90px}.tags{justify-content:center}main{padding:0 8px}.panel{padding:20px 15px}.counts,.breakdown{grid-template-columns:1fr}.counts div{flex-direction:row;justify-content:space-between}.actions{display:grid;grid-template-columns:1fr 1fr}.actions button:last-child{grid-column:1/-1}.top{align-items:flex-start}footer{justify-content:center;text-align:center}}@media print{body{background:white}.hero-art,.tags,.start,footer,.result-actions{display:none!important}.hero{background:white;color:#111;margin:0}.hero h1,.hero h1 span,.subtitle{color:#111;text-shadow:none}.panel{box-shadow:none;background:white;border:1px solid #ddd}main{margin:0;padding:0}.review-item{break-inside:avoid}}

/* Tema visual revisi: ilustrasi BIMA & AMA di sisi, area tengah tetap bersih */
body{
  background: #f8f1df url('assets/bima-ama-banner.png') center center / cover fixed no-repeat;
}
.hero{
  position:relative;
  min-height:330px;
  margin-top:18px;
  padding:28px;
  border:1px solid rgba(255,208,91,.85);
  border-radius:26px 26px 0 0;
  background:#fff8e9 url('assets/bima-ama-banner.png') center 43% / cover no-repeat;
  color:#102b53;
}
.hero-art{display:none}
.hero>div:not(.hero-art){
  width:min(760px,100%);
  padding:24px clamp(16px,3vw,34px);
  border:1px solid rgba(255,202,72,.8);
  border-radius:24px;
  background:rgba(255,250,238,.93);
  box-shadow:0 10px 35px rgba(8,35,73,.12);
  text-align:center;
}
.hero .eyebrow{color:#07518c}
.hero h1{color:#092c63;text-shadow:none}
.hero h1 span{color:#0789bd;text-shadow:none}
.hero .subtitle{color:#294c70;font-weight:800}
.hero .tags{justify-content:center}
.hero .tags span{background:#fff;border-color:#b9def1;color:#0b3974}
.panel{
  background:rgba(255,250,238,.97);
  backdrop-filter:blur(5px);
}
#quiz,#results{border-radius:24px}
footer{
  padding:18px 14px;
  color:#fff;
  text-shadow:0 1px 4px #09244c;
}
@media(max-width:680px){
  .hero{
    min-height:360px;
    margin:8px 8px 0;
    padding:18px 12px;
    background-position:center center;
    border-radius:20px 20px 0 0;
  }
  .hero>div:not(.hero-art){
    padding:20px 14px;
    background:rgba(255,250,238,.92);
  }
  .hero h1{font-size:clamp(1.9rem,9vw,2.6rem)}
}
@media print{
  body{background:white}
  .hero{background:white;border:1px solid #ddd}
  .hero>div:not(.hero-art){background:white;box-shadow:none}
}


/* Tombol unduh manual PDF yang ikut tersimpan di paket aplikasi */
.manual-download{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px;border:1px solid #c9e3f5;border-radius:18px;background:linear-gradient(120deg,#eef9ff,#fffdf5)}
.manual-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#dff4ff;font-size:1.7rem}
.manual-copy{display:flex;flex:1;flex-direction:column;gap:4px}
.manual-copy strong{color:#0b3974;font-size:1rem}
.manual-copy span{color:#5c6d83;font-size:.85rem;line-height:1.45}
.download-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#0a8bd0,#0756a3);color:white;text-decoration:none;font-weight:900;box-shadow:0 4px #063e7c;white-space:nowrap}
.download-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.download-btn:focus-visible{outline:3px solid #ffca48;outline-offset:3px}
@media(max-width:680px){.manual-download{align-items:stretch;flex-wrap:wrap}.manual-icon{align-self:flex-start}.manual-copy{min-width:calc(100% - 70px)}.download-btn{width:100%;white-space:normal}}