/* IndoFiber Net — design tokens & komponen dasar */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --purple:#3D33FF; --purple-dark:#2B22D9; --purple-50:#EEEDFF; --purple-100:#DDDBFF;
  --cyan:#38B6FF; --cyan-50:#E7F6FF; --cyan-700:#0A6FA8;
  --bg:#F6F8FC; --surface:#FFFFFF; --ink:#172B4D; --muted:#53627C; --line:#DEE4EF; --line-soft:#EBEFF6;
  --ok:#0B7A55; --ok-bg:#E4F6EE; --danger:#B42318; --danger-bg:#FEECEA; --warn:#8A5A00; --warn-bg:#FFF4D6;
  --radius:16px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(23,43,77,.04),0 12px 32px rgba(23,43,77,.08);
  --shadow-lg:0 2px 4px rgba(23,43,77,.05),0 24px 56px rgba(40,34,160,.18);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
img{max-width:100%}
a{color:var(--purple)}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* Tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:background .15s,transform .05s,box-shadow .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 6px 16px rgba(61,51,255,.28)}
.btn-primary:hover{background:var(--purple-dark)}
.btn-primary[disabled]{background:#8e89ff;box-shadow:none;cursor:progress}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple)}
.btn-sm{min-height:38px;padding:0 14px;font-size:.875rem;border-radius:10px}
.btn-block{width:100%}
.btn-lg{min-height:58px;font-size:1.0625rem}
.btn svg{flex:none}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Form */
label.field-label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:8px}
.input{width:100%;min-height:54px;padding:0 16px;font:inherit;font-size:1.125rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#7C8AA3}
.input:hover{border-color:#C4CDDF}
.input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(61,51,255,.14)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(180,35,24,.1)}
.field-error{color:var(--danger);font-size:.9rem;font-weight:600;margin-top:8px;min-height:0}
.field-error:empty{display:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.label{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:700;line-height:1.2}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-bad{background:var(--danger-bg);color:var(--danger)}