@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 - Login (neo-brutalist "lembar ujian")
   ========================================================================== */

@property --spot{
  syntax:"<length-percentage>";
  inherits:false;
  initial-value:0px;
}

:root{
  --yellow:#FFD60A;
  --yellow-deep:#F2C200;
  --ink:#0E0E0E;
  --ink-soft:#4A463C;
  --paper:#FFFFFF;
  --cream:#FFFDF3;
  --line:#141414;
  --red:#D22B2B;
  --red-bg:#FFF0EF;
  --green:#1F9D55;
  --green-bg:#EAFBF0;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --ui:'Inter',system-ui,sans-serif;
  --bd:2px solid var(--line);
  --shadow:10px 10px 0 var(--ink);
  --radius:16px;
}

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

/* ---------------------------------------------------------------- background */
.bg-dots,.bg-spot{
  position:fixed;
  inset:-25%;
  pointer-events:none;
  z-index:0;
}
.bg-dots{
  background-image:radial-gradient(circle, rgba(14,14,14,.20) 1.4px, transparent 1.5px);
  background-size:24px 24px;
  animation:drift 24s linear infinite;
}
.bg-spot{
  inset:0;
  background-image:radial-gradient(circle, rgba(14,14,14,.42) 1.4px, transparent 1.5px);
  background-size:24px 24px;
  --spot:0px;
  -webkit-mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    #000 var(--spot), transparent calc(var(--spot) + 190px));
  mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    #000 var(--spot), transparent calc(var(--spot) + 190px));
  transition:--spot .35s ease;
}
body.is-pointer .bg-spot{--spot:130px;}

@keyframes drift{
  from{background-position:0 0;}
  to{background-position:240px 240px;}
}
.grain{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------------------- ticker */
.ticker{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:5;
  background:var(--ink);
  color:var(--yellow);
  border-block-start:2px solid var(--ink);
  overflow:hidden;
  padding-block:9px;
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:marquee 26s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__group{
  display:flex;
  flex:none;
  align-items:center;
  gap:26px;
  padding-inline-end:26px;
  font-family:var(--display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker__group span{display:inline-flex;align-items:center;gap:26px;}
.ticker__group .dot{width:7px;height:7px;background:var(--yellow);border-radius:50%;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* --------------------------------------------------------------------- stage */
.stage{
  position:relative;
  z-index:2;
  min-height:100dvh;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:clamp(20px,3vw,34px);
  max-inline-size:min(100%,680px);
  margin-inline:auto;
  padding:clamp(88px,11vw,120px) clamp(20px,5vw,64px) clamp(110px,14vw,150px);
}

/* -------------------------------------------------------------------- topbar */
.topbar{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(16px,2.4vw,26px) clamp(20px,4vw,40px);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink);
}
.brand__mark{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  background:var(--ink);
  color:var(--yellow);
  border:var(--bd);
  border-radius:12px;
  box-shadow:4px 4px 0 rgba(14,14,14,.35);
}
.brand__mark svg{width:22px;height:22px;}
.brand__name{
  font-family:var(--display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.03em;
}
.brand__name b{color:var(--ink);}
.brand__tag{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-inline-start:2px solid var(--ink);
  padding-inline-start:11px;
  margin-inline-start:3px;
}

/* seal */
.seal{
  position:relative;
  width:clamp(64px,9vw,88px);
  aspect-ratio:1;
  will-change:transform;
}
.seal svg{width:100%;height:100%;overflow:visible;}
.seal__spin{transform-box:fill-box;transform-origin:center;animation:spin 18s linear infinite;}
.seal__ring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.55;}
.seal__text{
  fill:var(--ink);
  font-family:var(--display);
  font-size:8.4px;
  font-weight:700;
  letter-spacing:1.3px;
}
.seal__core{fill:var(--ink);}
.seal__bolt{fill:var(--yellow);}
@keyframes spin{to{transform:rotate(360deg);}}

/* --------------------------------------------------------------------- hero */
.hero{position:relative;}
.title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3.3rem,11.5vw,8.2rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:0;
}
.title .ln{display:block;overflow:hidden;padding-block:.07em;margin-block:-.07em;}
.title .ln > span{display:block;}
.title .role{
  color:var(--ink);
}
@supports (-webkit-text-stroke:1px #000){
  .title .role{
    color:transparent;
    -webkit-text-stroke:3px var(--ink);
    text-shadow:.055em .055em 0 var(--ink);
  }
}
.is-ready .title .ln > span{
  animation:lineUp .9s cubic-bezier(.2,.8,.2,1) both;
}
.is-ready .title .ln:nth-child(2) > span{animation-delay:.08s;}
@keyframes lineUp{from{transform:translateY(130%);}to{transform:translateY(0);}}

.lede{
  max-width:34ch;
  margin:clamp(16px,2.4vw,24px) 0 0;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ------------------------------------------------------------------- panel */
.panel{
  position:relative;
  width:min(100%,470px);
  background:var(--paper);
  border:var(--bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(24px,3.4vw,36px);
  margin-block-start:clamp(18px,3vw,30px);
  transform:rotate(-1.2deg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.panel::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1.5px dashed rgba(14,14,14,.16);
  border-radius:calc(var(--radius) - 6px);
  pointer-events:none;
}
.panel:hover,.panel:focus-within{
  transform:rotate(0deg);
  box-shadow:14px 14px 0 var(--ink);
}
.is-ready .panel{animation:panelIn .8s cubic-bezier(.2,.9,.2,1) both .18s;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(38px) rotate(-4deg) scale(.97);}
}

.panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-block-end:22px;
}
.panel__head h2{
  font-family:var(--display);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.03em;
  margin:0;
}
.panel__no{
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ------------------------------------------------------------------ fields */
.field{position:relative;margin-block-end:20px;}
.field label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  margin-block-end:7px;
}
.field .wrap-in{position:relative;}
.field .wrap-in:has(.eye) input{padding-inline-end:56px;}

input{
  inline-size:100%;
  min-block-size:54px;
  padding:14px 15px;
  font-family:var(--ui);
  font-size:1rem;
  color:var(--ink);
  background:var(--cream);
  border:var(--bd);
  border-radius:12px;
  touch-action:manipulation;
  transition:translate .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder{color:#A7A399;}
input:hover{background:#fff;}
input:focus-visible{
  outline:none;
  translate:-2px -2px;
  box-shadow:5px 5px 0 var(--ink);
}
input:user-invalid{
  border-color:var(--red);
  background:var(--red-bg);
}
input:user-invalid:focus-visible{box-shadow:5px 5px 0 var(--red);}

.err{
  display:none;
  margin-block-start:7px;
  font-size:.78rem;
  font-weight:600;
  color:var(--red);
}
.field:has(input:user-invalid) .err{display:block;}

/* password eye */
.eye{
  position:absolute;
  inset-block-start:50%;
  inset-inline-end:7px;
  translate:0 -50%;
  inline-size:42px;
  block-size:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
  transition:background .15s ease;
}
.eye:hover{background:#F2EFE3;}
.eye:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.eye svg{inline-size:21px;block-size:21px;display:block;}
.eye .i-off{display:none;}
.eye.is-visible .i-on{display:none;}
.eye.is-visible .i-off{display:block;}

/* ------------------------------------------------------------------ button */
.cta{
  position:relative;
  isolation:isolate;
  inline-size:100%;
  min-block-size:56px;
  margin-block-start:4px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 20px 0 22px;
  border:var(--bd);
  border-radius:12px;
  background:var(--ink);
  color:var(--yellow);
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em;
  cursor:pointer;
  overflow:hidden;
  touch-action:manipulation;
  transform:translate(var(--tx,0px), var(--ty,0px));
  transition:translate .18s cubic-bezier(.2,.8,.2,1), transform .2s ease,
    box-shadow .18s ease, color .25s ease;
}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.cta:hover:not(:disabled){color:var(--ink);translate:-2px -2px;box-shadow:6px 6px 0 var(--ink);}
.cta:hover:not(:disabled)::before{transform:scaleX(1);}
.cta:active:not(:disabled){translate:0 0;box-shadow:none;}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.cta:disabled{opacity:.7;cursor:progress;}
.cta .arrow{
  display:grid;
  place-items:center;
  inline-size:34px;block-size:34px;
  border-radius:8px;
  background:var(--yellow);
  color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.cta:hover:not(:disabled) .arrow{background:var(--ink);color:var(--yellow);transform:translateX(4px);}
.cta svg{inline-size:19px;block-size:19px;}

/* ----------------------------------------------------------------- message */
.msg{
  margin-block-start:18px;
  padding:12px 14px;
  border:var(--bd);
  border-radius:11px;
  font-size:.86rem;
  line-height:1.45;
  font-weight:500;
}
.msg.gagal{background:var(--red-bg);color:#8F1D1D;}
.msg.sukses{background:var(--green-bg);color:#0F5A32;}
.msg:not([hidden]){animation:msgIn .4s cubic-bezier(.2,.9,.2,1) both;}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}}

/* ------------------------------------------------------------------- footer */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-block-start:26px;
  padding-block-start:20px;
  border-block-start:2px solid rgba(14,14,14,.14);
  font-size:.86rem;
  color:var(--ink-soft);
}
.switch{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.switch span{
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  padding-block-end:2px;
  transition:background-size .3s ease;
}
.switch:hover span,.switch:focus-visible span{background-size:100% 2px;}
.switch svg{inline-size:16px;block-size:16px;transition:transform .25s ease;}
.switch:hover svg{transform:translateX(3px);}

.visually-hidden{
  position:absolute;
  clip-path:inset(50%);
  overflow:hidden;
  width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:640px){
  .stage{place-content:start center;align-content:start;justify-items:stretch;padding-block-start:clamp(96px,22vw,140px);}
  .title{font-size:clamp(3rem,17vw,4.6rem);}
  .seal{width:64px;}
}

@media (prefers-reduced-motion:reduce){
  .bg-dots,.bg-spot,.ticker__track,.seal__spin{animation:none !important;}
  .is-ready .title .ln > span,
  .is-ready .panel{animation:none !important;transform:none !important;}
  .title .ln > span{transform:none;}
  .panel{transform:none;}
  *{transition-duration:.001ms !important;}
}