/* ARIBA Kasbon — halaman publik dan dashboard Ariba Indonesia */
:root{
  --bg:#f3f5f2; --surface:#ffffff; --surface-2:#edf1ed; --ink:#17201a; --muted:#5b6a60; --line:#d6dfd8;
  --accent:#2d6a4f; --accent-ink:#ffffff; --accent-soft:#e0eee6; --deep:#1f3d30; --deep-ink:#e6f0ea;
  --bad:#b42318; --bad-soft:#fdecea; --warn:#a6500a; --warn-soft:#fdeedb; --good:#067647; --good-soft:#e2f3e9; --info:#2c58a6; --info-soft:#e5edfa; --gold:#9a6d1f; --gold-soft:#f6ecd6;
  --f-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --f-num:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1512; --surface:#161f1a; --surface-2:#1c2620; --ink:#e3ebe5; --muted:#98a89e; --line:#2b3831;
  --accent:#6cc39a; --accent-ink:#0d1a13; --accent-soft:#1d3428; --deep:#0b110e; --deep-ink:#e3ebe5;
  --bad:#f97066; --bad-soft:#3b1d1a; --warn:#f7b267; --warn-soft:#382817; --good:#6ce9a6; --good-soft:#163024; --info:#93b4f5; --info-soft:#1c2840; --gold:#e0b45e; --gold-soft:#33291a; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-ui)}
a{color:var(--accent)}
h1,h2,h3{line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.88rem}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-h{background:var(--deep);color:var(--deep-ink)}
.site-h .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700;letter-spacing:.02em}
.brand img{width:34px;height:34px}
.brand small{display:block;font-weight:500;font-size:.72rem;color:#9fb8aa;letter-spacing:0}
.site-nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.site-nav a{color:var(--deep-ink);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:500;font-size:.92rem}
.site-nav a:hover{background:rgba(255,255,255,.08)}
.site-nav a.cta{background:#6cc39a;color:#0d1a13;font-weight:700}

/* tombol & form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 .95rem var(--f-ui);padding:10px 16px;border-radius:10px;cursor:pointer;text-decoration:none;min-height:44px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:6px 12px;font-size:.86rem;min-height:36px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem}
.field small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;width:100%}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:auto;margin-top:5px}
.form{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.flash{padding:12px 14px;border-radius:10px;font-size:.92rem}
.flash.bad{background:var(--bad-soft);color:var(--bad)} .flash.good{background:var(--good-soft);color:var(--good)} .flash.info{background:var(--info-soft);color:var(--info)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--surface-2);color:var(--muted)}
.chip.good{background:var(--good-soft);color:var(--good)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.info{background:var(--info-soft);color:var(--info)} .chip.gold{background:var(--gold-soft);color:var(--gold)}

/* halaman publik */
.page{padding-block:40px 64px}
.narrow{max-width:520px;margin:0 auto}
.mid{max-width:760px;margin:0 auto}
.hero{background:var(--deep);color:var(--deep-ink);padding-block:56px 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700}
.hero p.lead{font-size:1.1rem;color:#c9dbd1;margin-top:16px;max-width:60ch}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero .ctas .btn{border-color:transparent}
.hero .ctas .btn.ghost{background:transparent;color:var(--deep-ink);border-color:#4f7a66}
.hero .badge{display:inline-flex;gap:8px;align-items:center;background:rgba(108,195,154,.16);color:#a8e3c4;padding:4px 12px;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:16px}
.hero-card{background:#173126;border:1px solid #2f5443;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.hero-card .row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #2f5443;padding-bottom:8px;font-size:.92rem}
.hero-card .row:last-child{border:0;padding:0}
.hero-card b.big{font:700 2rem var(--f-num);color:#a8e3c4}
section.block{padding-block:56px}
section.block.alt{background:var(--surface)}
.block h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.block .sub{color:var(--muted);margin-top:8px;max-width:65ch}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
.feat .card h3{font-size:1.05rem}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:28px}
.steps .card::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700}
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.price .card.main{border:2px solid var(--accent)}
.price .amt{font:700 2rem var(--f-num)}
.price ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.94rem}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface-2)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
details{border-top:1px solid var(--line);padding:12px 0}
details summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--muted)}
.cta-band{background:var(--deep);color:var(--deep-ink);border-radius:16px;padding:32px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.site-f{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:.88rem}
.site-f .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.req li.ok::marker{content:"✓  ";color:var(--good)} .req li.no::marker{content:"✕  ";color:var(--bad)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.site-nav{margin-left:0;width:100%}.site-h .wrap{padding-block:10px}}

/* dashboard Ariba Indonesia */
.k-app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
.k-side{background:var(--deep);color:var(--deep-ink);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.k-side a{color:var(--deep-ink);text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:500;font-size:.93rem}
.k-side a[aria-current]{background:#2d5443}
.k-side .brand{margin-bottom:14px}
.k-main{padding:24px max(16px,2vw) 48px;display:flex;flex-direction:column;gap:18px;min-width:0}
.k-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.k-top h1{font-size:1.4rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kpi span{font-size:.82rem;color:var(--muted)} .kpi b{font:600 1.25rem var(--f-num)}
.k-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline input,.inline select{width:auto}
@media (max-width:860px){.k-app{grid-template-columns:1fr}.k-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.k-side .brand{width:100%}}
/* promo + perkiraan tagihan */
.promo-bar{display:flex;flex-direction:column;gap:6px;margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.promo-item{line-height:1.5}
.est{background:var(--surface-2);gap:8px}
.est-t{width:100%;border-collapse:collapse}
.est-t td{padding:6px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.08));vertical-align:top}
.est-t td.r{text-align:right;white-space:nowrap;padding-left:12px}
.est-t td.good{color:var(--good)}
.est-t tr.tot td{border-bottom:0}