/* TOKO XCODE — Indonesian storefront design system. Light, chunky, flat.
   No external assets, no gradients, no glass. Ink borders + hard shadows. */
:root{
  --paper:#FAF5EC; --ink:#16130E; --card:#FFFFFF;
  --amber:#F59E0B; --amber-soft:#FDEBC8; --amber-bg:#FFF7E6;
  --green:#059669; --green-soft:#D1FAE5;
  --red:#E11D48; --red-soft:#FDE3EA;
  --violet:#7C3AED; --violet-soft:#EDE9FE;
  --muted:#6F6455; --hair:#E7DFCE;
  --r:16px; --r-s:12px;
  --shadow:5px 5px 0 var(--ink); --shadow-s:3px 3px 0 var(--ink);
  --font:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
code,pre{font-family:var(--mono)}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)} .small{font-size:.85rem} .mono{font-family:var(--mono)}
h1,h2,h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.08}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:var(--card);
  color:var(--ink);padding:11px 20px;border-radius:var(--r-s);font-size:.93rem;font-weight:800;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;text-decoration:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--amber)}
.btn.ink{background:var(--ink);color:#fff}
.btn.danger{color:var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.btn.sm{padding:6px 13px;font-size:.83rem;border-radius:10px;box-shadow:var(--shadow-s)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.input{width:100%;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--card);
  padding:11px 14px;font-size:.95rem;color:var(--ink)}
.input:focus{outline:none;box-shadow:0 0 0 3px var(--amber-soft), var(--shadow-s)}
/* Browser autofill paints its own background (password field turns into a
   solid dark box in Chrome) — force the storefront look on autofilled
   inputs so email/password stay identical in every state. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;
}
.input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 3px var(--amber-soft),0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;
}
textarea.input{resize:vertical}
.field{margin-bottom:15px}
.field label{display:block;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}

/* ---------- stickers & badges ---------- */
.sticker{display:inline-block;background:var(--amber);border:2px solid var(--ink);border-radius:99px;
  padding:3px 13px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  transform:rotate(-3deg);box-shadow:var(--shadow-s)}
.sticker.green{background:var(--green);color:#fff}
.sticker.violet{background:var(--violet);color:#fff}
.sticker.ink{background:var(--ink);color:#fff}
.sticker.white{background:#fff}
.fbadge{display:inline-block;border:2px solid var(--ink);border-radius:99px;background:var(--amber-soft);
  padding:0 9px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.fbadge.combo{background:var(--violet-soft)}
.free-tag{display:inline-block;background:var(--green);color:#fff;border:2px solid var(--ink);border-radius:99px;
  padding:0 9px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;transform:rotate(-3deg)}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.logo .mark{display:inline-flex;border:2px solid var(--ink);border-radius:9px;box-shadow:var(--shadow-s);transform:rotate(-3deg);line-height:0}
.logo em{font-style:normal;color:var(--amber);-webkit-text-stroke:.4px var(--ink)}

/* ---------- promo marquee ---------- */
.promo{background:var(--ink);overflow:hidden;padding:8px 0;border-bottom:2px solid var(--ink)}
.mq-track{display:flex;width:max-content;animation:mq 36s linear infinite}
.mq-group{display:flex;flex:none}
.mq-item{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--amber);
  text-transform:uppercase;white-space:nowrap;padding-right:14px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- landing header ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav-in{display:flex;align-items:center;gap:24px;min-height:66px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.nav-links{display:flex;gap:20px;font-size:.88rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:99px;
  background:#fff;padding:5px 13px;font-family:var(--mono);font-size:.74rem;font-weight:700}
.status-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--ink);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ---------- hero ---------- */
.hero{padding:56px 0 30px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:start}
.hero h1{font-size:clamp(2.5rem,6vw,4.3rem);margin:18px 0 16px}
.hero h1 .hl{box-shadow:inset 0 -.42em 0 var(--amber);padding:0 .04em}
.hero .sub{font-size:1.08rem;max-width:34rem;color:#3D362A}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 28px}
.hero-stack{display:flex;flex-direction:column}
.hcard{position:relative;width:min(330px,92%);background:#fff;border:2px solid var(--ink);border-radius:18px;
  box-shadow:7px 7px 0 var(--ink);padding:18px 18px 24px}
.hcard h3{font-size:1.02rem;margin:8px 0 4px}
.hcard p{font-size:.86rem;color:#3D362A}
.hcard .hprice{font-family:var(--mono);font-weight:700;font-size:.8rem;margin-top:10px;display:block}
.hcard.c1{align-self:flex-start;transform:rotate(-3deg);z-index:1}
.hcard.c2{align-self:flex-end;transform:rotate(2deg);z-index:2;margin-top:-10px}
.hcard.c3{align-self:flex-start;margin-left:5%;transform:rotate(-1.5deg);z-index:3;margin-top:-10px}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-s);padding:10px 16px;min-width:132px}
.stat b{display:block;font-family:var(--mono);font-size:1.3rem;line-height:1.15}
.stat span{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* ---------- sections ---------- */
.block{padding:52px 0}
.sec-head{margin-bottom:26px;max-width:44rem}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:12px 0 8px}
.sec-head p{color:#3D362A}

/* paket cards */
.paket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.paket{background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:20px;
  display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.paket:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.paket h3{font-size:1.12rem}
.paket p{font-size:.88rem;color:#3D362A;flex:1}
.paket .pmeta{font-family:var(--mono);font-size:.78rem}
.paket .pmeta b{font-size:.92rem}
.paket .prow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}

/* paket unlimited (harga paket) */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.plan-grid.compact{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.plan{background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:20px;
  display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.plan:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.plan h3{font-size:1.25rem}
.plan-price{font-family:var(--mono);font-weight:700;font-size:1.65rem;line-height:1.1}
.plan-perday{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.plan-feats{list-style:none;flex:1;display:flex;flex-direction:column;gap:5px;margin:4px 0 8px}
.plan-feats li{font-size:.87rem;padding-left:24px;position:relative}
.plan-feats li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--green)}
.plan .btn{justify-content:center}
.plan .pmeta{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.plan.mini{padding:16px;box-shadow:var(--shadow-s)}
.plan.mini h3{font-size:1.05rem}
.plan.mini .plan-price{font-size:1.3rem}

/* katalog */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px}
.chip{border:2px solid var(--ink);background:#fff;border-radius:99px;padding:7px 16px;font-weight:800;font-size:.82rem}
.chip:hover{background:var(--amber-soft)}
.chip.on{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--amber)}
.model-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.model-tools .input{max-width:430px}
#model-count{font-family:var(--mono);font-size:.8rem;font-weight:700}
#model-grid{margin-top:16px}
.mrow{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow-s);padding:11px 16px;margin-bottom:9px;flex-wrap:wrap}
.mrow-id{font-family:var(--mono);font-weight:700;font-size:.9rem;cursor:pointer;word-break:break-all}
.mrow-id:hover{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.mrow-badges{display:inline-flex;gap:6px;margin-left:9px;vertical-align:middle}
.mrow-price{margin-left:auto;font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.mrow-price b{font-size:.88rem}
.model-grid-empty{background:#fff;border:2px dashed var(--ink);border-radius:14px;padding:22px;text-align:center;color:var(--muted)}

/* cara pakai */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid var(--ink);
  border-radius:12px;background:var(--amber);font-family:var(--mono);font-weight:700;font-size:1.05rem;transform:rotate(-3deg);margin-bottom:12px}
.step b{display:block;font-size:1rem;text-transform:uppercase;margin-bottom:5px}
.step p{font-size:.88rem;color:#3D362A}
.endpoint-card{margin-top:22px;background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);
  padding:18px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.endpoint-card code{font-size:1.02rem;font-weight:700;word-break:break-all}
.endpoint-card .small{flex-basis:100%}

/* code box (dark code on light page) */
.codebox{margin-top:22px;background:var(--ink);border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--amber);overflow:hidden}
.codetabs{display:flex;gap:6px;padding:12px 14px 0}
.codetabs button{border:2px solid transparent;background:transparent;color:#CFC6B2;border-radius:10px;
  padding:6px 14px;font-family:var(--mono);font-size:.8rem;font-weight:700}
.codetabs button.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.codepane{display:block;padding:16px 18px 20px;color:#F5EFE2;font-size:.83rem;line-height:1.65;overflow-x:auto;white-space:pre}
.codepane .s{color:#FFC95C}.codepane .k{color:#C4A7F5}

/* faq */
.faq details{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-s);margin-bottom:11px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:800;padding:15px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 0 16px;font-size:.92rem;color:#3D362A}
.qa-ic{flex:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:7px;background:var(--amber);position:relative}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%}
.qa-ic::before{width:10px;height:2.4px;transform:translate(-50%,-50%)}
.qa-ic::after{width:2.4px;height:10px;transform:translate(-50%,-50%);transition:transform .18s}
.faq details[open ] .qa-ic::after{transform:translate(-50%,-50%) rotate(90deg)}

/* footer */
footer{background:var(--ink);color:#EFE8D8;border-top:2px solid var(--ink);margin-top:20px}
.foot{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:24px 0;font-size:.86rem}
.foot a{color:var(--amber);font-weight:700;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .mono{font-size:.78rem}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 18px;gap:18px}
.auth-card{position:relative;background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);
  padding:34px 30px 26px;width:100%;max-width:430px}
.auth-card .sticker{position:absolute;top:-15px;left:24px}
.auth-card h1{font-size:1.5rem;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.form-err{display:none;background:var(--red-soft);border:2px solid var(--red);color:#9F1239;border-radius:var(--r-s);
  padding:10px 14px;font-size:.87rem;font-weight:700;margin-bottom:15px}
.form-err.show{display:block}
.auth-alt{margin-top:18px;text-align:center}
.auth-link{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.auth-link:hover{color:var(--amber);text-decoration-color:var(--ink)}

/* ---------- dashboard ---------- */
.dash{max-width:1180px;margin:0 auto;padding:0 20px 70px}
.dhead{display:flex;align-items:center;gap:18px;padding:20px 0 6px;flex-wrap:wrap}
.dhead-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bal-ticket{background:var(--amber);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-s);
  padding:7px 15px;font-family:var(--mono);display:flex;align-items:baseline;gap:9px;transform:rotate(-1deg)}
.bal-ticket span{font-size:.64rem;font-weight:800;letter-spacing:.1em}
.bal-ticket b{font-size:1.02rem}
.duser{text-align:right;line-height:1.3}
.duser p:first-child{font-weight:800}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.pills button{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;
  border-radius:99px;padding:9px 18px;font-weight:800;font-size:.88rem;transition:transform .12s}
.pills button:hover{transform:translateY(-2px)}
.pills button.on{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--amber)}
#page-title{font-size:clamp(1.7rem,4vw,2.5rem);margin:14px 0 6px}
.page{display:none}
.page.on{display:block;animation:fadeUp .22s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px;margin-top:16px}
.card{background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card>span{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  background:var(--amber-soft);border:2px solid var(--ink);border-radius:99px;padding:1px 10px;margin-bottom:9px}
.card b{display:block;font-family:var(--mono);font-size:1.35rem;line-height:1.2;word-break:break-word}
.card p{font-size:.88rem}
.sub2{font-size:1.12rem;margin:30px 0 12px}
.tblwrap{background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.89rem;min-width:560px}
.tbl th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:12px 14px;
  border-bottom:2px solid var(--ink);background:var(--paper);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.pill{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:0 10px;font-size:.7rem;
  font-weight:800;background:var(--amber-soft);white-space:nowrap}
.pill.ok{background:var(--green-soft);color:#065F46}
.pill.err{background:var(--red-soft);color:#9F1239}
.rowflex{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-start}
.rowflex .grow{flex:1;min-width:150px}
.newkey{display:none;border:2.5px dashed var(--amber);background:var(--amber-bg);border-radius:var(--r);padding:18px;margin-top:14px}
.newkey.show{display:block;animation:fadeUp .22s ease both}
.newkey code{font-size:1rem;font-weight:700;word-break:break-all;background:#fff;border:2px solid var(--ink);
  border-radius:10px;padding:8px 12px;display:inline-block}

/* plan status banner (dashboard ringkasan) */
.plan-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:2px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-top:16px}
.plan-banner.active{background:var(--amber-soft)}
.plan-banner-main{flex:1;min-width:220px}
.plan-banner-main>b{display:block;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px}
.plan-banner-main p{font-size:.88rem;color:#3D362A}
.plan-limits{font-family:var(--mono);font-size:.74rem;font-weight:700;border:2px solid var(--ink);
  border-radius:99px;background:#fff;padding:4px 12px;white-space:nowrap}

/* admin plan price editor */
.plan-price-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--hair)}
.plan-price-row:last-child{border-bottom:none}
.plan-price-row>span{min-width:90px}
.plan-price-row .input{max-width:190px}
.dash .codebox{box-shadow:6px 6px 0 var(--amber)}
.dash .codebox pre{padding:16px 18px;color:#F5EFE2;font-size:.83rem;line-height:1.65;overflow-x:auto;white-space:pre}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);background:var(--ink);color:#fff;
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--amber);border-radius:12px;padding:12px 22px;
  font-weight:800;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:999;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stack{gap:14px}
  .hcard{width:calc(100% - 8px);align-self:center;transform:rotate(-1.5deg)}
  .hcard.c1{align-self:center}
  .hcard.c2{align-self:center;transform:rotate(1.5deg);margin-top:0}
  .hcard.c3{align-self:center;transform:rotate(-1deg);margin-top:0;margin-left:0}
}
@media (max-width:640px){
  .nav-links{display:none}
  .stat{min-width:calc(50% - 6px)}
  .mrow-price{margin-left:0}
  .duser{display:none}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .pills button{flex:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mq-track{width:auto;flex-wrap:wrap}
}