/*
 * Sapaku Web — desain website publik & halaman masuk (rombak total 6 Nov 2026).
 * Memakai palet, huruf, tombol, dan field yang SAMA dengan panel (sapaku-app.css)
 * supaya website → login → panel terasa satu produk. Dimuat PALING AKHIR di
 * <head> sehingga menggantikan gaya lama tanpa menyentuh kontennya.
 */
:root,[data-theme="light"]{
  color-scheme:light;
  --brand:#0e7a55;--brand-strong:#0b6646;--brand-deep:#0b3d2a;--brand-soft:#e3f3ec;--on-brand:#fff;
  --ink:#14231d;--ink-2:#4a5c54;--ink-3:#7d8d86;--canvas:#f4f7f5;--surface:#fff;--surface-2:#f8faf9;--line:#e2e9e5;--line-strong:#cfdad4;
  --shadow:0 1px 2px rgba(11,61,42,.06),0 4px 16px rgba(11,61,42,.05);--shadow-pop:0 18px 48px rgba(11,61,42,.16);
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent);
  /* peta token lama → baru */
  --sapaku-green:var(--brand);--sapaku-green-dark:var(--brand-deep);--sapaku-mint:#eef8f3;--sapaku-mint-soft:#d9f0e4;--sapaku-mint-pale:var(--brand-soft);
  --sapaku-ink:var(--ink);--sapaku-body:#33443c;--sapaku-muted:var(--ink-2);--sapaku-faint:var(--ink-3);--sapaku-border:var(--line);--sapaku-border-strong:var(--line-strong);--sapaku-border-soft:var(--line);
  --sapaku-bg:var(--surface);--sapaku-bg-soft:var(--canvas);--sapaku-surface:var(--surface);--sapaku-chatbox:var(--surface-2);--sapaku-block-dark:var(--brand-deep);--sapaku-heading:var(--ink);--sapaku-accent:var(--brand);
  --sapaku-bubble-in:#eef2f0;--sapaku-btn-bg:var(--brand);--sapaku-btn-text:#fff;--sapaku-footer-text:#d6efe3;--sapaku-footer-muted:#9cc4b1;
  --radius:16px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --brand:#34c48b;--brand-strong:#4fd39d;--brand-deep:#08170f;--brand-soft:#123526;--on-brand:#06281b;
  --ink:#e6efea;--ink-2:#a9bab2;--ink-3:#74867e;--canvas:#0e1613;--surface:#15201b;--surface-2:#1a2721;--line:#24332c;--line-strong:#33463d;
  --shadow:0 1px 2px rgba(0,0,0,.3);--shadow-pop:0 18px 48px rgba(0,0,0,.5);
  --sapaku-mint:#102a1f;--sapaku-mint-soft:#163a2a;--sapaku-body:#c9d8d0;--sapaku-bubble-in:#1c2a24;--sapaku-btn-bg:var(--brand);--sapaku-btn-text:var(--on-brand);--sapaku-footer-text:#cfe9dc;--sapaku-footer-muted:#7fa894;
}

/* Dasar */
*,*::before,*::after{box-sizing:border-box}
body.auth{margin:0}
html body table{display:table;width:100%}
@media (max-width:700px){html body table{display:block;overflow-x:auto}}
.auth-card .pw-wrap{width:100%}
html body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--surface);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
html body *{font-family:inherit}
h1,h2,h3{letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h1{font-weight:800}h2{font-weight:800}
a{color:var(--brand)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
section{max-width:1120px}

/* Navigasi: bilah bersih, garis halus, tombol sama dengan panel */
html body .nav{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:none;border-bottom:1px solid var(--line);padding:12px max(24px,calc((100vw - 1120px)/2));min-height:68px}
html body .logo{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
html body .logo img{border-radius:9px}
html body .logo span{color:var(--brand)}
html body .menu{gap:4px}
html body .menu a:not(.btn){color:var(--ink-2);font-weight:600;font-size:14.5px;padding:0 12px;border-radius:10px;min-height:40px}
html body .menu a:not(.btn):hover{background:var(--surface-2);color:var(--ink)}
html body .menu .btn{margin-left:6px}
html body .hamburger,html body .theme-toggle{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);min-height:40px;min-width:40px;width:auto}
html body .hamburger:hover,html body .theme-toggle:hover{border-color:var(--line-strong);color:var(--ink)}

/* Tombol: persis jenis panel — utama, sekunder */
html body .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:12px!important;border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;box-shadow:none;transform:none;transition:background .12s,border-color .12s,box-shadow .12s}
html body .btn:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-brand);transform:none;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 30%,transparent)}
html body .btn.light,html body .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
html body .btn.light:hover,html body .btn-ghost:hover{border-color:var(--brand);background:var(--surface);color:var(--ink);box-shadow:none}
html body .menu a.btn:not(.light){color:var(--on-brand)}
html body .menu a.btn.light{color:var(--ink)}
html body .menu .btn{min-height:40px;padding:0 16px;font-size:14px}

/* Kartu */
html body .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)!important;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
html body .card:hover{transform:none;border-color:var(--line-strong);box-shadow:0 8px 24px rgba(11,61,42,.08)}

/* Hero & band */
.hero,.sapaku-hero-band{background:radial-gradient(1200px 420px at 15% -10%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),linear-gradient(180deg,var(--sapaku-mint),var(--surface))!important;border-bottom:1px solid var(--line)!important}
.hero h1{font-weight:800;letter-spacing:-.03em}
.hero-ai-badge{background:var(--brand-soft)!important;color:var(--brand)!important;border:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.sapaku-quote{background:var(--brand-soft)!important;border-left:4px solid var(--brand)!important;color:var(--ink)!important}

/* Form (halaman publik: kontak, daftar, dst) */
html body input.f,html body select.f,html body textarea.f,html body input[type=text],html body input[type=email],html body input[type=password],html body input[type=tel],html body input[type=search],html body select,html body textarea{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;min-height:46px;font-size:16px;transition:border-color .12s,box-shadow .12s}
html body textarea,html body textarea.f{padding:12px 14px;min-height:110px}
html body input:focus,html body select:focus,html body textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
html body label,html body label.f{color:var(--ink-2);font-weight:600;font-size:13.5px}
.err{color:#c0392b}
[data-theme="dark"] .err{color:#f07a6b}

/* Footer */
html body footer{background:var(--brand-deep);color:var(--sapaku-footer-muted)}
html body footer b{color:#fff;font-weight:700;letter-spacing:.01em}
html body footer a:hover{color:#fff}
html body footer .foot-bottom{border-top:1px solid rgba(255,255,255,.12)}

/* Tabel & detail */
html body table{border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0}
html body th{background:var(--surface-2);color:var(--ink-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
html body td,html body th{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left}
details.faq,.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 18px}
details.faq summary,.faq-item summary{font-weight:700}

/* Pesan */
html body .ok{background:#e2f5ea;border-color:#b8e6cb;color:#0b5a35;border-radius:12px}
[data-theme="dark"] html body .ok,[data-theme="dark"] .ok{background:#133423;border-color:#1f5a3c;color:#7fe0aa}

/* ───────── Halaman masuk / daftar / OTP (layouts.guest) ───────── */
body.auth{min-height:100vh;background:var(--canvas);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;align-items:stretch}
.auth-side{background:var(--brand-deep);color:#cfe9dc;padding:48px clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:auto -120px -160px auto;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(52,196,139,.28),transparent 65%)}
.auth-side .auth-logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.02em}
.auth-side .auth-logo img{width:38px;height:38px;border-radius:11px}
.auth-side h2{color:#fff;font-size:clamp(26px,3vw,36px);margin:0 0 14px;line-height:1.15}
.auth-side p{color:#a9cdbb;font-size:16px;max-width:42ch}
.auth-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;position:relative}
.auth-points li{display:flex;gap:12px;align-items:flex-start;color:#d6efe3;font-size:15px}
.auth-points svg{width:20px;height:20px;flex:none;color:#34c48b;margin-top:2px}
.auth-side small{color:#7fa894;position:relative}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;position:relative}
.auth-main .auth-back{position:absolute;top:20px;left:24px;margin:0}
.auth-main .auth-back a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600;font-size:14px;min-height:40px;padding:0 10px;border-radius:10px}
.auth-main .auth-back a:hover{background:var(--surface);color:var(--ink)}
.auth-main .theme-toggle{position:absolute;top:20px;right:24px}
.auth-card{width:100%;max-width:420px}
.auth-card .auth-logo-m{display:none}
.auth-card h1{font-size:28px;text-align:left;margin:0 0 6px;color:var(--ink)}
.auth-card .sub{text-align:left;color:var(--ink-2);font-size:15px;margin:0 0 22px}
.auth-card label{display:block;margin:16px 0 6px}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=tel]{width:100%}
.auth-card .btn{width:100%;margin-top:22px}
.auth-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13.5px}
.auth-card .row label{margin:0;font-weight:500;display:flex;align-items:center;gap:8px;color:var(--ink)}
.auth-card .foot{text-align:center;font-size:14px;color:var(--ink-2);margin-top:22px}
.auth-card .errors{background:#fbe6e3;border:1px solid #f3c2bb;color:#8f2418;border-radius:12px;padding:12px 14px;font-size:13.5px;margin:0 0 14px}
.auth-card .status{background:#e2f5ea;border:1px solid #b8e6cb;color:#0b5a35;border-radius:12px;padding:12px 14px;font-size:13.5px;margin:0 0 14px}
[data-theme="dark"] .auth-card .errors{background:#3d1c18;border-color:#6a2e27;color:#f5b5ac}
[data-theme="dark"] .auth-card .status{background:#133423;border-color:#1f5a3c;color:#7fe0aa}
.auth-card .pw-wrap{position:relative}
.auth-card .pw-wrap button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.auth-card .pw-wrap button:hover{color:var(--ink);background:var(--surface-2)}
.auth-card .pw-wrap button svg{width:18px;height:18px}
.auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--ink-3);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.auth-card a.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none}
.auth-card a.btn-google:hover{border-color:var(--brand)}
@media (max-width:900px){
  body.auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-card .auth-logo-m{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ink);margin-bottom:22px;text-decoration:none}
  .auth-card .auth-logo-m img{width:34px;height:34px;border-radius:10px}
  .auth-main{justify-content:flex-start;padding-top:84px}
}

@media (max-width:860px){html body .nav{padding:10px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Pilih bahasa ID | EN (website & halaman masuk) */
.pilih-bahasa{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--surface);gap:2px;margin:0;vertical-align:middle}
.pilih-bahasa .pb-opsi{all:unset;cursor:pointer;font-size:12px;font-weight:700;padding:0 9px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--ink-3)}
.pilih-bahasa .pb-opsi[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand)}
.auth-main .pilih-bahasa{position:absolute;top:22px;right:76px}