/* ===== CepatCuan — warna terinspirasi uang kertas & slip gaji ===== */
:root{
  --kertas:#F1F4F0;      /* latar halaman */
  --tinta:#14213D;       /* teks utama */
  --tinta-2:#4A5568;     /* teks kedua */
  --hijau:#0B6E4F;       /* hijau uang kertas */
  --hijau-muda:#DCEDE4;
  --stabilo:#FFD84D;     /* sorotan total */
  --slip:#FFFFFF;        /* kertas struk */
  --garis:#C8D2CC;
  --fokus:#1F6FEB;
  --r:14px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --kertas:#0E1815; --tinta:#E6EEE9; --tinta-2:#A7B5AE;
    --hijau:#3FBF8F; --hijau-muda:#163128; --stabilo:#E8C33A;
    --slip:#16221E; --garis:#2B3A34; --fokus:#6EA8FE;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font-family:var(--font);font-size:1.0625rem;line-height:1.6}
img{max-width:100%}
a{color:var(--hijau);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:4px}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--slip);padding:.5rem 1rem;z-index:9}

/* ---- kepala ---- */
.site-head{border-bottom:1px solid var(--garis);background:var(--kertas);position:sticky;top:0;z-index:5}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.2rem;color:var(--tinta);text-decoration:none;letter-spacing:-.02em;margin:0}
.logo .tld{color:var(--tinta-2);font-weight:500}
.koin{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hijau);color:var(--stabilo);font-size:.72rem;font-weight:800;letter-spacing:0}
.menu{display:flex;gap:.25rem;flex-wrap:wrap}
.menu a{color:var(--tinta);text-decoration:none;padding:.45rem .8rem;border-radius:999px;font-weight:500;font-size:.95rem}
.menu a:hover{background:var(--hijau-muda)}
.menu a[aria-current]{background:var(--hijau);color:#fff}

/* ---- beranda ---- */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.hero h1{font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:0 0 1.25rem;max-width:12ch}
.hero .lead{font-size:1.15rem;color:var(--tinta-2);max-width:46ch;margin:0 0 2rem}
.cepat{display:flex;flex-direction:column;gap:.5rem;max-width:420px}
.cepat label{font-weight:700}
.daftar{padding:1rem 0 4rem}
.daftar h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 1rem}
.alat{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.alat li{border-bottom:1px solid var(--garis)}
.alat a{display:grid;grid-template-columns:minmax(180px,280px) 1fr auto;gap:1.5rem;align-items:baseline;padding:1.25rem .25rem;text-decoration:none;color:var(--tinta)}
.alat strong{font-size:1.2rem;letter-spacing:-.01em}
.alat span{color:var(--tinta-2)}
.alat em{font-style:normal;font-weight:700;color:var(--hijau);white-space:nowrap}
.alat a:hover strong{text-decoration:underline;text-decoration-color:var(--stabilo);text-decoration-thickness:4px}
.segera{margin-top:2rem;color:var(--tinta-2)}
.segera ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.5rem 0 0}
.segera li{border:1px dashed var(--garis);border-radius:999px;padding:.3rem .8rem;font-size:.92rem}

/* ---- halaman kalkulator ---- */
.tool{padding:clamp(2rem,5vw,3.5rem) 0 2.5rem}
.tool-grid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.tool h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .75rem}
.tool .lead{color:var(--tinta-2);margin:0 0 1.75rem;max-width:52ch}
.calc{display:grid;gap:1.15rem;max-width:520px}
.field{display:grid;gap:.4rem}
.field > label,.field > .lbl{font-weight:700}
.field small{color:var(--tinta-2);font-size:.88rem}
.rp{display:flex;align-items:center;background:var(--slip);border:2px solid var(--garis);border-radius:var(--r);overflow:hidden}
.rp:focus-within{border-color:var(--hijau)}
.rp span{padding:0 .3rem 0 1rem;font-weight:700;color:var(--tinta-2)}
.rp.akhir span{padding:0 1rem 0 .3rem}
.rp input{flex:1;min-width:0;border:0;background:transparent;font:700 1.35rem/1 var(--font);color:var(--tinta);padding:.85rem 1rem .85rem .2rem}
.rp input:focus{outline:none}
select{font:500 1rem var(--font);color:var(--tinta);background:var(--slip);border:2px solid var(--garis);border-radius:var(--r);padding:.8rem 1rem;width:100%}
.cek{display:flex;gap:.6rem;align-items:flex-start;font-weight:500}
.cek input{width:20px;height:20px;accent-color:var(--hijau);margin-top:.2rem}
.pil{display:flex;flex-wrap:wrap;gap:.4rem}
.pil input{position:absolute;opacity:0}
.pil label{border:2px solid var(--garis);border-radius:999px;padding:.4rem .9rem;cursor:pointer;font-weight:500;background:var(--slip)}
.pil input:checked + label{background:var(--hijau);border-color:var(--hijau);color:#fff}
.pil input:focus-visible + label{outline:3px solid var(--fokus);outline-offset:2px}

/* ---- struk hasil (elemen khas situs) ---- */
.struk{position:relative;background:var(--slip);font-family:var(--mono);font-size:.92rem;padding:1.5rem 1.4rem 1.6rem;border-radius:4px 4px 0 0;box-shadow:0 1px 0 var(--garis),0 18px 40px -24px rgba(20,33,61,.45);margin-bottom:14px}
.struk::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:linear-gradient(135deg,var(--slip) 50%,transparent 50%) 0 0/16px 12px repeat-x,
             linear-gradient(225deg,var(--slip) 50%,transparent 50%) 0 0/16px 12px repeat-x}
.struk-kop{text-align:center;border-bottom:1px dashed var(--garis);padding-bottom:.8rem;margin-bottom:.8rem}
.struk-kop b{display:block;font-size:1rem}
.struk-kop span{color:var(--tinta-2);font-size:.8rem}
.baris{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0}
.baris span:last-child{text-align:right;white-space:nowrap}
.baris.kurang span:last-child{color:#B42318}
@media (prefers-color-scheme:dark){.baris.kurang span:last-child{color:#FF8A80}}
.baris.sub{color:var(--tinta-2);font-size:.85rem}
.total{border-top:1px dashed var(--garis);margin-top:.7rem;padding-top:.9rem}
.total .lbl{display:block;font-size:.85rem;color:var(--tinta-2)}
.total .angka{display:inline-block;font-family:var(--font);font-weight:800;font-size:clamp(1.8rem,4vw,2.3rem);letter-spacing:-.03em;line-height:1.15;color:var(--tinta);
  background:linear-gradient(transparent 58%,var(--stabilo) 58%,var(--stabilo) 92%,transparent 92%);padding:0 .15rem}
@media (prefers-color-scheme:dark){.total .angka{background:linear-gradient(transparent 58%,rgba(232,195,58,.35) 58%,rgba(232,195,58,.35) 92%,transparent 92%)}}
.catatan{font-size:.8rem;color:var(--tinta-2);margin:.9rem 0 0;line-height:1.5}
.bagi{display:flex;gap:.5rem;margin-top:1.1rem;flex-wrap:wrap;font-family:var(--font)}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:2px solid var(--hijau);background:var(--hijau);color:#fff;font:700 .92rem var(--font);padding:.6rem 1rem;border-radius:999px;text-decoration:none;cursor:pointer}
.tombol.garis{background:transparent;color:var(--hijau)}
.tombol:hover{filter:brightness(1.08)}
.struk-anim{animation:cetak .35s ease-out}
@keyframes cetak{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.struk-anim{animation:none}}

/* ---- artikel penjelasan ---- */
.prose{max-width:720px;padding:1rem 0 2rem}
.prose h2{font-size:1.55rem;letter-spacing:-.02em;line-height:1.2;margin:2.25rem 0 .75rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose p,.prose li{color:var(--tinta)}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}
.tabel{overflow-x:auto;margin:1rem 0}
.prose th,.prose td{border-bottom:1px solid var(--garis);padding:.55rem .6rem;text-align:left}
.prose th{background:var(--hijau-muda)}
.kotak{background:var(--hijau-muda);border-radius:var(--r);padding:1rem 1.2rem;margin:1.25rem 0}
.faq details{border-bottom:1px solid var(--garis);padding:.9rem 0}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:.6rem 0 0;color:var(--tinta-2)}
.iklan{margin:1.5rem auto;max-width:720px;min-height:0}  /* slot iklan nanti */

/* ---- kaki ---- */
.site-foot{border-top:2px solid var(--tinta);margin-top:3rem;padding:2.5rem 0 1.5rem}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem}
.foot-note{color:var(--tinta-2);font-size:.9rem;max-width:48ch}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem;align-content:start}
.foot-links a{color:var(--tinta);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.copy{color:var(--tinta-2);font-size:.85rem;margin-top:2rem}

@media (max-width:820px){
  .hero-grid,.tool-grid,.foot-in{grid-template-columns:1fr}
  .alat a{grid-template-columns:1fr;gap:.2rem}
  .alat em{display:none}
  .site-head{position:static}
}