/* =========================================================
   PAKSI STUDIO, lembar gaya bersama
   Dipakai oleh semua halaman. Ubah di sini, berubah di mana-mana.

   Sistem bentuk : semua sudut siku (radius 0).
   Warna aksen   : satu saja, --aksen. Tidak ada aksen kedua.
   Tema          : mengikuti setelan sistem, terkunci satu tema per halaman.
   Huruf         : Unbounded khusus logo, Bricolage Grotesque untuk judul,
                   Geist untuk isi. Logo sengaja beda supaya jadi ciri.
   ========================================================= */

:root{
  color-scheme: light dark;

  --dasar:      #EFEFEE;
  --dasar-2:    #E5E5E4;
  --bidang:     #FAFAFA;
  --tinta:      #141516;
  --tinta-2:    #5A5D5F;
  --garis:      #C9CAC8;
  --garis-2:    #DCDCDA;
  --aksen:      #116B4C;
  --aksen-teks: #FFFFFF;
  --gelap:      #141516;
  --gelap-teks: #E8E9E7;
  --gelap-2:    #A9ADAB;
  --gelap-garis:#3A3D3E;
  --bahaya:     #9E2F1B;

  --ukur: 62ch;
  --tepi: clamp(20px, 5vw, 64px);
  --lebar: 1240px;
  --sempit: 820px;
}

@media (prefers-color-scheme: dark){
  :root{
    --dasar:      #131415;
    --dasar-2:    #1B1D1E;
    --bidang:     #1B1D1E;
    --tinta:      #EDEEEC;
    --tinta-2:    #9DA1A0;
    --garis:      #383B3C;
    --garis-2:    #2A2D2E;
    --aksen:      #43B58A;
    --aksen-teks: #0B1310;
    --gelap:      #0B0C0D;
    --gelap-teks: #EDEEEC;
    --gelap-2:    #9DA1A0;
    --gelap-garis:#2E3132;
    --bahaya:     #FF9E8A;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--dasar);
  color:var(--tinta);
  font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16.5px;
  line-height:1.62;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
p{ margin:0 0 1em; max-width:var(--ukur); }
strong{ font-weight:600; }

h1,h2,h3{
  font-family:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  font-weight:800; letter-spacing:-0.028em; line-height:1.05; margin:0;
}
:focus-visible{ outline:2.5px solid var(--aksen); outline-offset:3px; }

.wadah{ width:100%; max-width:var(--lebar); margin:0 auto; padding-inline:var(--tepi); }
.wadah-sempit{ width:100%; max-width:var(--sempit); margin:0 auto; padding-inline:var(--tepi); }
.kisi > *, .barang > *, .rak > *{ min-width:0; }

/* ---------------- gerak ---------------- */
@media (prefers-reduced-motion: no-preference){
  .masuk{ opacity:0; transform:translateY(14px); }
  .masuk.tampil{ opacity:1; transform:none;
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  .tunda-1{ transition-delay:.06s; }
  .tunda-2{ transition-delay:.12s; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .masuk{ opacity:1; transform:none; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------------- logo ---------------- */
.logo{
  font-family:"Unbounded","Bricolage Grotesque",sans-serif;
  font-weight:700; font-size:16.5px; letter-spacing:-0.035em;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  line-height:1;
}
.logo .teks{ white-space:nowrap; letter-spacing:-0.035em; }
.logo .titik{ color:var(--aksen); margin:0; }
.logo .tanda{
  width:15px; height:15px; background:var(--aksen); display:inline-block; flex:none;
}
.logo:hover .tanda{ transform:translateY(-1px); }

/* ---------------- kepala ---------------- */
.kepala{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--dasar) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--garis-2);
  padding-top:env(safe-area-inset-top,0px);
}
.kepala .isi{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px; }
.nav{ display:flex; align-items:center; gap:24px; }
.nav a{ font-size:15px; font-weight:500; text-decoration:none; color:var(--tinta-2); white-space:nowrap; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--tinta); }
.nav .aksi{ background:var(--aksen); color:var(--aksen-teks); padding:9px 16px; font-weight:600; font-size:14.5px; }
.nav .aksi:hover{ color:var(--aksen-teks); filter:brightness(1.08); }
.nav .aksi:active{ transform:translateY(1px); }
@media (max-width:680px){ .nav .sembunyi{ display:none; } .nav{ gap:16px; } }

/* ---------------- tombol ---------------- */
.tombol{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Geist",sans-serif; font-weight:600; font-size:16px;
  padding:14px 26px; border:none; cursor:pointer; text-decoration:none;
  background:var(--aksen); color:var(--aksen-teks); white-space:nowrap;
}
.tombol:hover{ filter:brightness(1.08); }
.tombol:active{ transform:translateY(1px); }
.tombol[disabled]{ opacity:.62; cursor:progress; }
.tombol.garis{ background:transparent; color:var(--tinta); border:1.5px solid var(--garis); }
.tombol.garis:hover{ border-color:var(--tinta); filter:none; }
.tombol.garis-gelap{ color:var(--gelap-teks); border-color:var(--gelap-garis); }
.tombol.garis-gelap:hover{ border-color:var(--gelap-teks); }
.tombol.besar{ font-size:17px; padding:16px 32px; }
.tombol-baris{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ---------------- kepala halaman ---------------- */
.judul-halaman{ padding:clamp(40px,6vw,76px) 0 clamp(28px,4vw,44px); }
.judul-halaman h1{ font-size:clamp(34px,5.4vw,58px); max-width:17ch; margin-bottom:18px; }
.judul-halaman .antar{ font-size:clamp(16.5px,1.9vw,19px); color:var(--tinta-2); max-width:52ch; }
.jejak{ font-size:14px; color:var(--tinta-2); margin-bottom:22px; }
.jejak a{ text-decoration:none; }
.jejak a:hover{ color:var(--tinta); }

/* ---------------- rak ---------------- */
.rak-kepala{ border-bottom:2px solid var(--tinta); padding-bottom:16px; }
.rak-kepala h2{ font-size:clamp(24px,3.2vw,34px); margin-bottom:10px; }
.rak-kepala p{ color:var(--tinta-2); font-size:16px; margin:0; max-width:56ch; }
.rak{
  display:grid; grid-template-columns:minmax(200px,268px) 1fr;
  gap:clamp(16px,3vw,44px); padding:clamp(22px,3vw,30px) 0;
  border-bottom:1px solid var(--garis-2); align-items:start;
}
.rak h3{ font-size:clamp(19px,2.2vw,22px); margin-bottom:8px; }
.rak .guna{ font-size:14.5px; color:var(--tinta-2); margin:0; }
.barang{
  display:grid; grid-template-columns:78px 1fr auto; gap:20px; align-items:center;
  background:var(--bidang); border:1px solid var(--garis-2); border-left:4px solid var(--aksen);
  padding:16px 20px 16px 16px; text-decoration:none;
}
.barang:hover{ background:var(--dasar-2); }
.barang:active{ transform:translateY(1px); }
.barang img{ width:78px; aspect-ratio:3/4; object-fit:cover; background:var(--dasar-2); }
.barang .nama{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.025em; margin-bottom:5px; }
.barang .ringkas{ display:block; font-size:14.5px; color:var(--tinta-2); max-width:48ch; line-height:1.5; }
.barang .harga{ font-weight:600; font-size:16px; white-space:nowrap; }
.kosong{
  border:1px dashed var(--garis); background:var(--dasar-2); padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.kosong p{ font-size:14.5px; color:var(--tinta-2); margin:0; max-width:48ch; }
.kosong a{ font-weight:600; font-size:14.5px; color:var(--aksen); text-decoration:none; border-bottom:2px solid var(--aksen); padding-bottom:2px; white-space:nowrap; }
@media (max-width:820px){ .rak{ grid-template-columns:1fr; gap:14px; } }
@media (max-width:640px){
  .barang{ grid-template-columns:62px 1fr; }
  .barang img{ width:62px; }
  .barang .harga{ grid-column:2; }
}

/* ---------------- bidang gelap ---------------- */
.gelap{ background:var(--gelap); color:var(--gelap-teks); }
.gelap p{ color:var(--gelap-2); }
.gelap h2, .gelap h3{ color:var(--gelap-teks); }
.gelap .pisah{ border-top:1px solid var(--gelap-garis); }

/* ---------------- borang ---------------- */
.ladang{ margin-bottom:18px; }
.ladang label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.ladang input, .ladang textarea, .ladang select{
  width:100%; padding:13px 14px; border:1.5px solid var(--garis);
  background:var(--bidang); color:var(--tinta);
  font-family:"Geist",sans-serif; font-size:16px;
}
.ladang textarea{ min-height:140px; resize:vertical; }
.ladang input::placeholder, .ladang textarea::placeholder{ color:var(--tinta-2); opacity:.85; }
.ladang input:focus, .ladang textarea:focus, .ladang select:focus{ border-color:var(--aksen); outline:none; }
.ladang .bantu{ font-size:13.5px; color:var(--tinta-2); margin:6px 0 0; }
.ladang .galat{ display:none; font-size:13.5px; color:var(--bahaya); font-weight:500; margin:6px 0 0; }
.borang-sebaris{ display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:start; max-width:840px; }
.borang-sebaris .ladang{ margin-bottom:0; }
.borang-sebaris .tombol{ margin-top:26px; }
@media (max-width:760px){
  .borang-sebaris{ grid-template-columns:1fr; }
  .borang-sebaris .tombol{ width:100%; margin-top:4px; }
}
.kotak-borang{ background:var(--bidang); border:1px solid var(--garis-2); padding:clamp(22px,3vw,32px); }

/* ---------------- daftar & keterangan ---------------- */
.daftar-pisah .baris{ padding:16px 0; border-top:1px solid var(--garis-2); }
.daftar-pisah .baris b{ display:block; font-weight:600; font-size:16px; margin-bottom:3px; }
.daftar-pisah .baris span{ font-size:14.5px; color:var(--tinta-2); }
.angka-besar{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:27px; letter-spacing:-0.03em; color:var(--aksen); line-height:1.1; display:block; margin-bottom:3px; }

details.tanya{ border-top:1px solid var(--garis-2); padding:0; }
details.tanya summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
}
details.tanya summary::-webkit-details-marker{ display:none; }
details.tanya summary::after{ content:"+"; font-family:"Bricolage Grotesque",sans-serif; font-size:22px; line-height:1; color:var(--aksen); flex:none; }
details.tanya[open] summary::after{ content:"-"; }
details.tanya .jawab{ padding-bottom:20px; }
details.tanya .jawab p{ color:var(--tinta-2); margin-bottom:.7em; }
details.tanya .jawab p:last-child{ margin-bottom:0; }

.langkah{ counter-reset:langkah; list-style:none; padding:0; margin:0; }
.langkah li{ counter-increment:langkah; padding:18px 0 18px 54px; border-top:1px solid var(--garis-2); position:relative; }
.langkah li::before{
  content:counter(langkah); position:absolute; left:0; top:18px;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--aksen); color:var(--aksen-teks);
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px;
}
.langkah b{ display:block; font-weight:600; margin-bottom:3px; }
.langkah span{ color:var(--tinta-2); font-size:15px; }

/* ---------------- artikel ---------------- */
.artikel{ padding-bottom:clamp(48px,6vw,80px); }
.artikel h2{ font-size:clamp(22px,2.8vw,28px); margin:clamp(30px,4vw,44px) 0 12px; }
.artikel h3{ font-size:18.5px; margin:26px 0 8px; }
.artikel p, .artikel li{ color:var(--tinta-2); }
.artikel ul, .artikel ol{ padding-left:20px; margin:0 0 1em; max-width:var(--ukur); }
.artikel li{ margin-bottom:7px; }
.artikel .catatan{ background:var(--dasar-2); border-left:4px solid var(--aksen); padding:16px 20px; margin:22px 0; }
.artikel .catatan p{ margin:0; color:var(--tinta); }

/* ---------------- ajakan penutup ---------------- */
.ajakan{ padding:clamp(48px,6vw,80px) 0; }
.ajakan h2{ font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; max-width:20ch; }
.ajakan p{ margin-bottom:24px; }

/* ---------------- kaki ---------------- */
.kaki{ background:var(--gelap); color:var(--gelap-2); padding:48px 0 34px; font-size:14.5px; }
.kaki .atas{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:26px; border-bottom:1px solid var(--gelap-garis); }
.kaki .logo{ color:var(--gelap-teks); margin-bottom:10px; }
.kaki p{ color:var(--gelap-2); max-width:32ch; margin:0; }
.kaki h3{ font-family:"Geist",sans-serif; font-weight:600; font-size:14.5px; letter-spacing:0; color:var(--gelap-teks); margin:0 0 10px; }
.kaki a{ color:var(--gelap-2); text-decoration:none; display:block; margin-bottom:8px; }
.kaki a:hover{ color:var(--aksen); }
.kaki .bawah{ padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; }
@media (max-width:760px){ .kaki .atas{ grid-template-columns:1fr 1fr; } }


/* ---------------- lencana coming soon ---------------- */
.segera{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.02em;
  color:var(--aksen); border:1.5px solid var(--aksen); padding:3px 9px;
  white-space:nowrap; vertical-align:2px; margin-left:8px;
}
.barang.nanti{ border-left-color:var(--garis); background:var(--dasar-2); cursor:default; }
.barang.nanti:hover{ background:var(--dasar-2); }
.barang.nanti:active{ transform:none; }
.barang.nanti .kover{
  width:78px; aspect-ratio:3/4; background:var(--dasar); border:1px dashed var(--garis);
  display:grid; place-items:center; color:var(--tinta-2); font-size:11px; text-align:center; padding:6px;
}
.barang .tunggu{
  font-weight:600; font-size:14.5px; color:var(--aksen); text-decoration:none;
  border-bottom:2px solid var(--aksen); padding-bottom:2px; white-space:nowrap;
}
@media (max-width:640px){
  .barang.nanti .kover{ width:62px; }
  .barang .tunggu{ grid-column:2; }
}


/* ---------------- dua produk dalam satu rak ---------------- */
.isi-rak{ display:flex; flex-direction:column; gap:14px; }
.barang .subjudul{
  display:block; font-size:14px; color:var(--tinta); font-weight:500;
  margin-bottom:6px; max-width:52ch; line-height:1.4;
}
.barang.nanti .subjudul{ color:var(--tinta-2); }