@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Ujianku - landing page
   Halaman produk yang tenang: meja kuning, isi berupa lembar ujian.
   ========================================================================== */

:root{
  --yellow:#FFD60A;
  --yellow-deep:#F2C200;
  --yellow-soft:#FFF1A8;
  --ink:#0E0E0E;
  --ink-soft:#4A463C;
  --paper:#FFFFFF;
  --cream:#FFFDF3;
  --line:#141414;
  --green:#1F9D55;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --ui:'Inter',system-ui,sans-serif;
  --bd:2px solid var(--line);
  --radius:20px;
  --pad-x:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{color-scheme:light;scroll-behavior:smooth;}
body{
  font-family:var(--ui);
  color:var(--ink);
  background:var(--yellow);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{position:relative;}

/* ------------------------------------------------------------- utilities */
.wrap{inline-size:min(1120px, 100% - var(--pad-x) * 2);margin-inline:auto;}
.visually-hidden{position:absolute;clip-path:inset(50%);overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;}
.skip{
  position:absolute;inset-inline-start:16px;inset-block-start:-80px;z-index:50;
  background:var(--ink);color:var(--yellow);font-weight:700;text-decoration:none;
  padding:12px 18px;border-radius:0 0 12px 12px;transition:inset-block-start .2s ease;
}
.skip:focus{inset-block-start:0;}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky;inset-block-start:0;z-index:20;
  border-block-end:var(--bd);
  background:color-mix(in oklab, var(--yellow) 90%, white 10%);
  backdrop-filter:blur(8px);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px;}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand__mark{
  display:grid;place-items:center;inline-size:38px;block-size:38px;
  background:var(--ink);color:var(--yellow);border:var(--bd);border-radius:11px;
}
.brand__mark svg{inline-size:20px;block-size:20px;}
.brand__name{font-family:var(--display);font-weight:800;font-size:1.14rem;letter-spacing:-.03em;}
.nav{display:flex;align-items:center;gap:26px;}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  padding-block-end:3px;transition:background-size .28s ease;
}
.nav a:hover,.nav a:focus-visible{background-size:100% 2px;}
.entry{display:flex;align-items:center;gap:16px;}
.entry__link{color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;}
.entry__link:hover,.entry__link:focus-visible{text-decoration:underline;text-underline-offset:3px;}

/* ----------------------------------------------------------------- btn */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-block-size:44px;padding:0 18px;
  border:var(--bd);border-radius:12px;
  font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  background:var(--ink);color:var(--yellow);
  text-decoration:none;cursor:pointer;touch-action:manipulation;
  transition:translate .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.btn:hover:not(:disabled){translate:-2px -2px;box-shadow:6px 6px 0 var(--ink);}
.btn:active{translate:0 0;box-shadow:none;}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover:not(:disabled){background:var(--ink);color:var(--yellow);}

/* ---------------------------------------------------------- sheet layout */
.hero{padding-block:clamp(48px,7vw,84px) clamp(14px,2.4vw,22px);}
.section{padding-block:clamp(14px,2.4vw,22px);}
.section--last{padding-block:clamp(14px,2.4vw,22px) clamp(48px,7vw,84px);}

.hero > .wrap,
.section > .wrap{
  background:var(--paper);
  border:var(--bd);
  border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--ink);
  padding:clamp(22px,5vw,64px);
}

/* ------------------------------------------------------------------ hero */
.hero__kicker{margin:0 0 14px;font-size:.92rem;font-weight:600;color:var(--ink-soft);}
.hero h1{
  font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4vw + 1rem,4.4rem);
  line-height:1.02;letter-spacing:-.035em;margin:0;max-inline-size:16ch;text-wrap:balance;
}
.nb{white-space:nowrap;}
.lede{
  max-inline-size:56ch;margin:20px 0 0;
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.55;color:var(--ink-soft);
  text-wrap:pretty;
}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:30px;}
.facts{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.facts li{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:var(--ink-soft);}
.facts svg{inline-size:17px;block-size:17px;color:var(--green);flex:none;}

/* ----------------------------------------------------------- section head */
.head{max-inline-size:60ch;margin-block-end:clamp(24px,3vw,36px);}
.head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.5vw + 1rem,2.6rem);line-height:1.04;letter-spacing:-.03em;
  margin:0;text-wrap:balance;
}
.head p{margin:12px 0 0;font-size:1rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;}

/* ------------------------------------------------------------------ demo */
.demo{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(18px,2.6vw,28px);align-items:start;}
.paper{background:var(--cream);border:var(--bd);border-radius:16px;padding:clamp(20px,2.6vw,30px);}
.paper__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-block-end:2px dashed var(--line);padding-block-end:16px;margin-block-end:20px;
}
.paper__title{font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0;}
.paper__sub{margin:4px 0 0;font-size:.85rem;color:var(--ink-soft);}
.timer{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--display);font-weight:800;font-size:1rem;
  border:var(--bd);border-radius:10px;padding:7px 12px;background:var(--yellow);
}
.timer svg{inline-size:17px;block-size:17px;}
.q{display:flex;gap:14px;margin:0 0 20px;font-size:1.05rem;line-height:1.5;font-weight:600;}
.q__no{
  display:grid;place-items:center;inline-size:28px;block-size:28px;flex:none;
  border:var(--bd);border-radius:8px;background:var(--ink);color:var(--yellow);
  font-family:var(--display);font-weight:800;font-size:.9rem;
}
.options{display:grid;gap:10px;}
.opt{
  position:relative;display:flex;align-items:center;gap:12px;
  border:var(--bd);border-radius:12px;background:var(--paper);
  padding:13px 16px;font-weight:600;cursor:pointer;
  transition:background .2s ease, translate .18s ease, box-shadow .18s ease;
}
.opt:hover{background:var(--yellow-soft);}
.opt input{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;}
.opt__key{
  display:grid;place-items:center;inline-size:26px;block-size:26px;flex:none;
  border:var(--bd);border-radius:7px;background:var(--paper);
  font-family:var(--display);font-weight:800;font-size:.85rem;
}
.opt:has(input:checked){background:var(--yellow);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);translate:-1px -1px;}
.opt:has(input:checked) .opt__key{background:var(--ink);color:var(--yellow);}
.opt:focus-within{outline:3px solid var(--ink);outline-offset:2px;}

.result{background:var(--ink);color:var(--cream);border:var(--bd);border-radius:16px;padding:clamp(20px,2.6vw,28px);box-shadow:6px 6px 0 var(--ink);}
.result__label{margin:0;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.68);}
.result__score{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:8px 0 18px;color:var(--yellow);}
.result__score small{font-size:.4em;color:var(--cream);}
.result ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.result li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;border-block-start:1px solid rgba(255,255,255,.16);padding-block-start:9px;}
.result li:first-child{border-block-start:0;padding-block-start:0;}
.result li b{font-family:var(--display);font-weight:800;}

/* ----------------------------------------------------------------- roles */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,28px);}
.role{border:var(--bd);border-radius:16px;padding:clamp(22px,2.8vw,32px);background:var(--cream);}
.role h3{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 16px;}
.role ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.role li{display:flex;gap:11px;font-size:.98rem;line-height:1.5;color:var(--ink-soft);}
.role li::before{
  content:"";inline-size:8px;block-size:8px;flex:none;margin-block-start:.5em;
  background:var(--yellow);border:1.5px solid var(--ink);border-radius:2px;
}

/* ------------------------------------------------------------------ flow */
.flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px);
}
.flow__item{border-block-start:3px solid var(--ink);padding-block-start:18px;}
.flow__no{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-block-end:8px;}
.flow__item h3{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 8px;}
.flow__item p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-soft);}

/* ------------------------------------------------------------------- end */
.end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;}
.end h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.03em;margin:0;}
.end p{margin:10px 0 0;color:var(--ink-soft);font-size:1rem;}

/* ------------------------------------------------------------------ foot */
.foot{border-block-start:var(--bd);margin-block-start:clamp(40px,6vw,72px);background:var(--ink);color:var(--cream);}
.foot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;padding-block:clamp(32px,4.5vw,52px);}
.foot .brand{color:var(--cream);}
.foot .brand__mark{background:var(--yellow);color:var(--ink);}
.foot p{margin:14px 0 0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.66);max-inline-size:40ch;}
.foot__links{display:flex;gap:24px;}
.foot__links a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.95rem;transition:color .2s ease;}
.foot__links a:hover,.foot__links a:focus-visible{color:var(--yellow);}
.foot__base{
  border-block-start:1px solid rgba(255,255,255,.14);padding-block:20px;
  font-size:.82rem;color:rgba(255,255,255,.55);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .demo{grid-template-columns:1fr;}
  .roles{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr;gap:20px;}
  .nav{display:none;}
}
@media (max-width:560px){
  .entry__link{display:none;}
  .facts{flex-direction:column;gap:10px;}
  .cta-row .btn{inline-size:100%;}
  .paper__head{flex-direction:column;}
  .end{align-items:stretch;}
  .foot__links{gap:18px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important;}
  .btn:hover:not(:disabled){translate:0 0;box-shadow:none;}
}