/* ==========================================================================
   DIGIBRANDTAL — Design tokens (PRD 7.2) + dasar bersama landing & dashboard
   Lapis: primitif → semantik → komponen. Lime selalu berteks hitam.
   ========================================================================== */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Primitif */
  --sky-700:#0B63C9; --sky-600:#1479E0; --sky-500:#2E93F0;
  --sky-300:#8CC6F7; --sky-100:#D9ECFC; --sky-pale:#BCD8F4;
  --cyan-500:#35B5EA;
  --lime-400:#D4F75B; --lime-500:#C3E83F; --lime-200:#EAFAA8;
  --ink-900:#0E0E10; --ink-700:#2A2A2E;
  --gray-600:#6B6B72; --gray-400:#9A9AA1; --gray-200:#E3E3E6; --gray-100:#F2F2F3;
  --white:#FFFFFF; --star-400:#F6D83A;
  --green-500:#22A559; --red-500:#E5484D; --amber-500:#F5A524;

  /* Semantik */
  --bg-page:var(--white);
  --bg-hero:linear-gradient(180deg,var(--sky-700) 0%,var(--sky-500) 55%,var(--sky-300) 100%);
  --bg-surface:var(--gray-100);
  --bg-surface-accent:var(--lime-400);
  --bg-surface-dark:var(--ink-900);
  --bg-surface-brand:var(--sky-600);
  --text-primary:var(--ink-900);
  --text-secondary:var(--gray-600);
  --text-muted:var(--gray-400);
  --text-on-brand:var(--white);
  --text-on-brand-soft:var(--sky-pale);
  --text-on-accent:var(--ink-900);
  --text-on-dark:var(--white);
  --border:var(--gray-200);
  --action-primary:var(--lime-400);
  --action-primary-hover:var(--lime-500);
  --action-secondary:var(--ink-900);
  --action-ghost:rgba(11,99,201,.55);
  --focus-ring:var(--cyan-500);
  --success:var(--green-500); --danger:var(--red-500); --warning:var(--amber-500);
  --rating:var(--star-400);

  /* Bentuk & tipografi */
  --radius-panel:28px; --radius-card:24px; --radius-chip:16px; --radius-input:12px; --radius-pill:999px;
  --font-sans:"Geist","Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono","DM Mono",ui-monospace,Menlo,monospace;

  /* Gerak & kedalaman (lembut — kedalaman dari warna, bukan bayangan berat) */
  --ease-out:cubic-bezier(.22,.8,.2,1);
  --shadow-1:0 2px 8px -2px rgba(14,14,16,.04),0 1px 3px 0 rgba(14,14,16,.02);
  --shadow-2:0 12px 32px -4px rgba(14,14,16,.08),0 4px 12px -2px rgba(14,14,16,.04);
  --danger-soft:rgba(229,72,77,.10); --success-soft:rgba(34,165,89,.12); --warning-soft:rgba(245,165,36,.14); --sky-soft:rgba(20,121,224,.10);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--lime-400);color:var(--ink-900)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.ico{width:18px;height:18px;flex:none;stroke-width:2}
.ico-sm{width:15px;height:15px}
.ico-lg{width:22px;height:22px}

/* ---------------------------------------------------------------- label seksi: titik + kapital monospace */
.kicker{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.kicker.is-lime::before{background:var(--lime-400)}
.kicker.is-sky::before{background:var(--sky-600)}

/* ---------------------------------------------------------------- tombol pil */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;border-radius:var(--radius-pill);font:500 13px/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s,transform .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn.is-disabled{opacity:.55;pointer-events:none}
.btn-primary{background:var(--action-primary);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--action-primary-hover)}
.btn-primary.has-arrow{padding-right:6px}
.btn-arrow{width:36px;height:36px;border-radius:50%;background:var(--ink-900);color:var(--white);display:grid;place-items:center;flex:none;transition:transform .25s var(--ease-out)}
.btn:hover .btn-arrow{transform:rotate(45deg)}
.btn-dark{background:var(--action-secondary);color:var(--white)}
.btn-dark:hover{background:var(--ink-700)}
.btn-dark .btn-arrow{background:var(--lime-400);color:var(--ink-900)}
.btn-ghost{background:var(--white);color:var(--ink-900);border-color:var(--border)}
.btn-ghost:hover{background:var(--gray-100)}
.btn-soft{background:var(--gray-100);color:var(--ink-900)}
.btn-soft:hover{background:var(--gray-200)}
.btn-danger{background:var(--danger);color:var(--white)}
.btn-danger:hover{background:#d33a40}
.btn-hero-ghost{background:var(--action-ghost);color:var(--white);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-hero-ghost:hover{background:rgba(11,99,201,.75)}
.btn-sm{min-height:36px;padding:0 14px;font-size:12px;gap:8px}
.btn-sm.has-arrow{padding-right:4px}
.btn-sm .btn-arrow{width:28px;height:28px}
.btn-block{width:100%}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;flex:none;transition:background-color .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.icon-btn:active{transform:scale(.94)}
.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- form */
.field{display:grid;gap:8px}
.field-label{font-size:13px;font-weight:500;color:var(--ink-900);display:flex;justify-content:space-between;gap:8px}
.field-label .req{color:var(--danger);margin-left:2px}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:var(--radius-input);border:1px solid var(--border);background:var(--white);font-size:15px;color:var(--ink-900);transition:border-color .15s,box-shadow .15s,background-color .15s;appearance:none;-webkit-appearance:none}
.textarea{min-height:110px;resize:vertical;line-height:1.55}
.select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6B72' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.input::placeholder,.textarea::placeholder{color:var(--gray-400)}
.input:hover,.select:hover,.textarea:hover{border-color:#cfcfd4}
.input:focus,.select:focus,.textarea:focus{border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(20,121,224,.15);outline:none}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);background:#FFF7F7;box-shadow:none}
.field-hint{font:400 12px/1.4 var(--font-mono);color:var(--text-muted)}
.field-error{font:400 12px/1.4 var(--font-mono);color:var(--danger);display:flex;gap:6px;align-items:flex-start}
.input-wrap{position:relative}
.input-wrap .input{padding-right:48px}
.input-wrap .input-ico{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--gray-600)}
.input-wrap .input-ico:hover{background:var(--gray-100)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-secondary);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #cfcfd4;background:var(--white);flex:none;margin-top:2px;display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.check input:checked{background:var(--lime-400);border-color:var(--ink-900);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E10' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.check input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------------------------------------------------------------- chip & badge */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-pill);font:500 11px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:var(--gray-100);color:var(--ink-900);border:1px solid var(--border)}
.chip-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-lime{background:var(--lime-400);border-color:transparent;color:var(--ink-900)}
.chip-lime-soft{background:var(--lime-200);border-color:transparent;color:var(--ink-900)}
.chip-dark{background:var(--ink-900);border-color:transparent;color:var(--white)}
.chip-sky{background:var(--sky-soft);border-color:transparent;color:var(--sky-700)}
.chip-success{background:var(--success-soft);border-color:transparent;color:#147a3f}
.chip-danger{background:var(--danger-soft);border-color:transparent;color:#c2353a}
.chip-warning{background:var(--warning-soft);border-color:transparent;color:#9a5c00}
.chip-white{background:var(--white);border-color:transparent}

/* ---------------------------------------------------------------- toast */
.toasts{position:fixed;top:16px;right:16px;z-index:1000;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--ink-900);color:var(--white);box-shadow:var(--shadow-2);font-size:14px;line-height:1.45;animation:toast-in .35s var(--ease-out)}
.toast .t-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--lime-400);color:var(--ink-900)}
.toast.is-error .t-ico{background:var(--danger);color:var(--white)}
.toast.is-info .t-ico{background:var(--sky-600);color:var(--white)}
.toast b{display:block;font-weight:600}
.toast .t-close{margin-left:auto;color:var(--gray-400);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;flex:none}
.toast.is-out{opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:640px){.toasts{left:16px;right:16px;width:auto}}

/* ---------------------------------------------------------------- skeleton */
.skel{background:linear-gradient(90deg,#ececee 0%,#f6f6f7 40%,#ececee 80%);background-size:200% 100%;animation:skel 1.3s ease-in-out infinite;border-radius:10px}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------------------------------------------------------------- bintang */
.stars{display:inline-flex;gap:2px;color:var(--rating)}
.stars .ico{width:15px;height:15px;fill:currentColor;stroke:none}
.stars .is-off{color:rgba(154,154,161,.45)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .skel{animation:none}
}