/* ============================================================
   Warna, huruf, dan jarak. Semua halaman memakai berkas ini.
   ============================================================ */

/* ------------------------------------------------------------
   Huruf disajikan dari server ini sendiri (public/huruf), bukan dari
   Google Fonts. Memuatnya dari Google berarti alamat IP setiap
   pengunjung terkirim ke luar negeri hanya karena membuka halaman —
   dan Kebijakan Privasi (/privasi) menyatakan halaman ini tidak memuat
   apa pun dari situs lain. Lisensinya SIL Open Font License, salinannya
   di sebelah berkas hurufnya.

   Berkasnya huruf variabel: satu berkas memuat semua ketebalan. Yang
   disimpan hanya latin dan latin-ext, cukup untuk Bahasa Indonesia.
   ------------------------------------------------------------ */
/* Archivo, latin-ext */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-display:swap;src:url(/huruf/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Archivo, latin */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-display:swap;src:url(/huruf/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Source Serif 4, latin-ext */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/huruf/source-serif-4-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Source Serif 4, latin */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/huruf/source-serif-4-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --kertas:#EDEFE7;
  --kertas-terang:#F8F9F3;
  --nota:#FFFDF4;
  --tinta:#15241C;
  --tinta-lembut:#4B5B51;
  --hijau:#0F6E3F;
  --hijau-tua:#0A4D2C;
  --hijau-muda:#D8E7DC;
  --jingga:#C9430F;
  --jingga-tua:#A93509;
  --merah:#A32218;
  --garis:#D1D7C7;

  --judul:"Archivo","Helvetica Neue",Arial,sans-serif;
  --badan:"Source Serif 4",Georgia,"Times New Roman",serif;

  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;background:var(--kertas);color:var(--tinta);
  font-family:var(--badan);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-judul{font-family:var(--judul);letter-spacing:-.02em;line-height:1.06;margin:0}
h1{font-weight:800;font-size:clamp(1.9rem,4.3vw,3rem);letter-spacing:-.035em}
h2{font-weight:700;font-size:clamp(1.75rem,3.9vw,2.8rem)}
h3{font-weight:700;font-size:1.18rem;line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--jingga);outline-offset:3px;border-radius:4px}

.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.wrap-sempit{width:min(760px,calc(100% - 40px));margin-inline:auto}
.sec{padding:clamp(58px,8.5vw,112px) 0}
.sec-kertas{background:var(--kertas)}
.sec-terang{background:var(--kertas-terang)}
.sec-hijau{background:var(--hijau-tua);color:var(--kertas)}
.sec-hijau .lead{color:#C9DCCF}

.lead{font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--tinta-lembut);max-width:60ch}
.kepala{margin-bottom:clamp(30px,4vw,52px);text-align:center}
.kepala h2{margin-bottom:14px}
.kepala .lead{margin-inline:auto}

/* ---------- tombol ---------- */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--judul);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background .15s ease,color .15s ease;
}
.tbl:active{transform:translateY(1px)}
.tbl[disabled]{opacity:.55;cursor:not-allowed}
.tbl-utama{background:var(--jingga);color:#fff}
.tbl-utama:hover{background:var(--jingga-tua)}
.tbl-garis{border-color:currentColor;background:transparent}
.tbl-garis:hover{background:var(--tinta);color:var(--kertas);border-color:var(--tinta)}
.sec-hijau .tbl-garis:hover,.hero .tbl-garis:hover{background:var(--kertas);color:var(--hijau-tua);border-color:var(--kertas)}
.tbl-kecil{padding:9px 16px;font-size:.9rem}
/* Untuk tindakan yang tidak bisa dibatalkan: menghapus, mengembalikan ke
   isi bawaan. Warnanya berbeda dari tombol utama supaya jempol yang sudah
   hafal letak tombol tetap berhenti sebentar. */
.tbl-bahaya{background:var(--merah);color:#fff}
.tbl-bahaya:hover{background:#7E1A12}
.tombol-baris{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- jendela tanya ----------

   Pengganti confirm() bawaan peramban.

   Bukan soal cantik. confirm() cuma bisa memuat tulisan polos, sedangkan
   yang perlu dibaca sebelum mengganti paket adalah daftar: harga lama ke
   harga baru, dan tiap batasan yang ikut berubah. Dijejalkan ke dalam
   satu paragraf tanpa baris dan tanpa penebalan, yang terjadi bukan
   orang membacanya lebih cepat — melainkan tidak membacanya sama
   sekali, lalu menekan OK.
   ---------------------------------------------------------------- */
.tirai{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(21,36,28,.55);
  /* Sengaja tanpa animasi masuk. Jendela yang muncul perlahan sempat
     menerima klik yang sebenarnya ditujukan ke tombol di belakangnya. */
}
.tirai[hidden]{display:none}

.jendela{
  width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--kertas-terang);border:2px solid var(--garis);border-radius:16px;
  padding:26px;box-shadow:0 18px 48px rgba(21,36,28,.22);
}
.jendela h3{
  font-family:var(--judul);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;margin:0 0 12px;
}
.jendela-isi{font-size:.98rem;line-height:1.6;color:var(--tinta)}
.jendela-isi ul{margin:8px 0 0 18px}
.jendela-isi li{margin-bottom:3px}
.jendela-isi .penting{color:var(--jingga);font-weight:700}
/* Kotak isian di dalam jendela tanya, misalnya mengetik nama toko
   sebelum menghapusnya. */
.jendela-isi input[type="text"]{
  width:100%;padding:11px 13px;border:2px solid var(--garis);border-radius:10px;
  font-family:var(--badan);font-size:1rem;background:var(--kertas);color:var(--tinta);
}
.jendela-isi input[type="text"]:focus{outline:none;border-color:var(--jingga)}

/* Daftar pilihan di dalam jendela tanya, misalnya memilih Compose mana
   milik klien ini. */
.kotak-pilih{
  width:100%;padding:11px 13px;border:2px solid var(--garis);border-radius:10px;
  font-family:var(--badan);font-size:.96rem;background:var(--kertas);color:var(--tinta);
}
.kotak-pilih:focus{outline:none;border-color:var(--jingga)}

.jendela-kaki{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
@media (max-width:520px){
  .jendela-kaki{flex-direction:column-reverse}
  .jendela-kaki .tbl{width:100%}
}

/* Jendela penjelasan di halaman umum: <dialog> bawaan peramban dengan rupa
   .jendela. Peramban yang mengurus fokus, tombol Esc, dan latar gelapnya. */
dialog.jendela{width:min(520px, calc(100% - 32px));color:var(--tinta)}
dialog.jendela::backdrop{background:rgba(21,36,28,.55)}
dialog.jendela .jendela-isi p{margin:0 0 10px}
dialog.jendela .jendela-isi p:last-child{margin-bottom:0}

/* Tombol yang tampil sebagai tautan di tengah kalimat. Tombol, bukan <a>,
   karena ia membuka jendela, tidak membawa ke halaman lain. */
.tautan-tombol{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--hijau-tua);
  text-decoration:underline;text-underline-offset:2px;
}
.tautan-tombol:hover{color:var(--hijau)}
.tautan-tombol:focus-visible{outline:2px solid var(--jingga);outline-offset:2px;border-radius:3px}

/* Hasil akhir dua isian kedaluwarsa pembayaran, digambar ulang tiap kali
   salah satunya diketik. Ditaruh di dalam bagiannya sendiri supaya
   terbaca bersama kedua kotak yang menentukannya. */
.hasil-bayar:empty{display:none}
.hasil-bayar{
  margin-top:18px;padding:14px 16px;border-radius:12px;
  background:var(--hijau-muda);border:2px solid transparent;
  font-size:.94rem;line-height:1.55;
}
.hasil-bayar-bahaya{background:#FCF2F0;border-color:var(--merah);color:var(--tinta)}

/* ---------- kepala halaman ---------- */
.bar{padding:22px 0 6px}
.bar-isi{display:flex;align-items:center;justify-content:space-between;gap:20px}
.merek{display:flex;align-items:center;text-decoration:none}
.merek img{display:block;height:34px;width:auto}
.menu{display:flex;gap:26px;font-family:var(--judul);font-weight:500;font-size:.95rem}
.menu a{text-decoration:none;opacity:.82}
.menu a:hover{opacity:1}
@media (max-width:860px){.menu{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--hijau-tua);color:var(--kertas);padding-bottom:clamp(60px,8vw,104px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,70px);align-items:center;padding-top:clamp(44px,6vw,76px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;padding-top:34px}}
.hero h1{margin-bottom:18px}
.hero-blok{background:var(--jingga);color:#fff;padding:0 .18em;border-radius:6px;display:inline-block}
.hero p{color:#CBDCD1;font-size:clamp(1.05rem,1.7vw,1.22rem);max-width:46ch}
.hero .tombol-baris{margin-top:30px}
.hero-cek{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-family:var(--judul);font-size:.9rem;font-weight:500;color:#B9CFC0}
.hero-cek li{display:flex;align-items:center;gap:7px}
.tik{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.masuk{animation:naik .6s cubic-bezier(.2,.7,.3,1) backwards}
.masuk-2{animation-delay:.09s}
.masuk-3{animation-delay:.17s}
@keyframes naik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- nota ---------- */
.nota{
  position:relative;background:var(--nota);color:var(--tinta);
  padding:30px 28px 34px;border-radius:6px 6px 0 0;
  box-shadow:0 22px 44px rgba(0,0,0,.22);transform:rotate(-1.1deg);
}
.nota::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:11px;
  background:
    linear-gradient(45deg,transparent 50%,var(--nota) 50%),
    linear-gradient(-45deg,transparent 50%,var(--nota) 50%);
  background-size:14px 14px;background-position:0 0,7px 0;background-repeat:repeat-x;
}
.nota-atas{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:var(--judul);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  padding-bottom:12px;border-bottom:2px solid var(--tinta)}
.nota-atas small{font-family:var(--judul);font-weight:500;font-size:.82rem;color:var(--tinta-lembut);letter-spacing:0}
.nota-baris{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  padding:11px 0;border-bottom:1px dashed var(--garis);font-size:.98rem;line-height:1.45}
.nota-baris b{font-family:var(--judul);font-weight:600;font-size:.97rem}
.nota-baris i{font-style:normal;color:var(--tinta-lembut);font-size:.86rem;display:block;margin-top:2px}
.nota-nilai{font-family:var(--judul);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--hijau)}
.nota-kaki{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:20px}
.nota-total{font-family:var(--judul);font-weight:500;font-size:.88rem;color:var(--tinta-lembut);line-height:1.5}
.nota-total b{display:block;font-weight:800;font-size:1.18rem;color:var(--tinta);letter-spacing:-.02em}
.stempel{
  font-family:var(--judul);font-weight:800;font-size:1.25rem;letter-spacing:.12em;
  color:var(--jingga);border:3px double var(--jingga);border-radius:8px;
  padding:7px 15px;transform:rotate(-9deg);opacity:.95;white-space:nowrap;
}

/* ---------- kartu ---------- */
.kisi{display:grid;gap:18px}
.k4{grid-template-columns:repeat(4,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.k4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.k3{grid-template-columns:1fr}}
@media (max-width:560px){.k4{grid-template-columns:1fr}}

.kartu{background:var(--kertas-terang);border:1px solid var(--garis);border-radius:var(--r);padding:24px}
.kartu h3{margin-bottom:8px}
.kartu p{font-size:.97rem;color:var(--tinta-lembut)}
.sec-terang .kartu{background:#fff}

.masalah{background:var(--nota);border:1px solid var(--garis);border-radius:var(--r);padding:26px 24px;border-top:5px solid var(--jingga)}
.masalah h3{margin-bottom:9px}
.masalah p{font-size:.97rem;color:var(--tinta-lembut)}

.dapat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.dapat{grid-template-columns:1fr}}
.dapat-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column}
.dapat-kartu h3{font-size:1.32rem;margin-bottom:10px}
.dapat-kartu > p{color:var(--tinta-lembut);font-size:.97rem;margin-bottom:18px}
.daftar-tik li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:.96rem;border-top:1px dashed var(--garis)}
.daftar-tik li:first-child{border-top:0}
.daftar-tik .tik{margin-top:5px;color:var(--hijau)}

/* ---------- pemilih jenis bisnis ---------- */
.pilih-baris{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.pilih{
  font-family:var(--judul);font-weight:600;font-size:.95rem;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  background:transparent;border:2px solid var(--garis);color:var(--tinta);
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.pilih:hover{border-color:var(--hijau)}
.pilih[aria-pressed="true"]{background:var(--hijau);border-color:var(--hijau);color:#fff}
.papan{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.papan-kisi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:820px){.papan-kisi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.papan-kisi{grid-template-columns:1fr}}
.papan-item h4{font-family:var(--judul);font-weight:600;font-size:.86rem;color:var(--tinta-lembut);margin-bottom:6px}
.papan-item p{font-family:var(--judul);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;line-height:1.3}
.papan-catatan{margin-top:22px;padding-top:18px;border-top:1px dashed var(--garis);color:var(--tinta-lembut);font-size:.97rem}

/* ---------- kalkulator ---------- */
.kalk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:860px){.kalk{grid-template-columns:1fr}}
.kalk-kotak{background:var(--nota);color:var(--tinta);border-radius:var(--r);padding:clamp(24px,3vw,32px);box-shadow:0 18px 36px rgba(0,0,0,.18)}
.kolom{margin-bottom:22px}
.kolom label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--judul);font-weight:600;font-size:.92rem;margin-bottom:10px}
.kolom output{font-family:var(--judul);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums;color:var(--hijau)}
input[type=range]{width:100%;accent-color:var(--hijau);height:26px;cursor:pointer}
.hasil{border-top:2px solid var(--tinta);padding-top:20px}
.hasil-utama{font-family:var(--judul);font-weight:800;font-size:clamp(2rem,5.4vw,2.9rem);letter-spacing:-.035em;color:var(--jingga);font-variant-numeric:tabular-nums;line-height:1.05}
.hasil small{display:block;font-family:var(--judul);font-weight:500;font-size:.9rem;color:var(--tinta-lembut);margin-top:6px}
.hasil-tahun{margin-top:16px;padding-top:14px;border-top:1px dashed var(--garis);display:flex;justify-content:space-between;gap:12px;font-family:var(--judul);font-weight:600;font-size:.98rem;font-variant-numeric:tabular-nums}
.hasil-modal{margin-top:14px;font-size:.94rem;color:var(--tinta-lembut)}

/* ---------- langkah ---------- */
.langkah{counter-reset:l;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.langkah{grid-template-columns:1fr}}
.langkah li{counter-increment:l;background:var(--kertas-terang);border:1px solid var(--garis);border-radius:var(--r);padding:26px 24px;position:relative}
.langkah li::before{
  content:counter(l);display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;
  background:var(--hijau);color:#fff;border-radius:50%;
  font-family:var(--judul);font-weight:800;font-size:1.05rem;
}
.langkah h3{margin-bottom:8px}
.langkah p{font-size:.97rem;color:var(--tinta-lembut)}

/* ---------- paket ---------- */
.paket{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media (max-width:940px){.paket{grid-template-columns:1fr}}
.pk{position:relative;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;height:100%}
.pk-pilihan{border:2px solid var(--hijau);box-shadow:0 16px 34px rgba(15,110,63,.14);padding-top:36px}

/* Lencana duduk tepat di atas garis kartu, di tengah. Diangkat keluar
   dari alur supaya isi kartu tetap sejajar dengan kartu di sebelahnya. */
.pk-label{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  font-family:var(--judul);font-weight:700;font-size:.8rem;
  color:#fff;background:var(--hijau);border-radius:999px;
  padding:6px 15px;white-space:nowrap;text-align:center;
}
.pk h3{font-size:1.5rem;margin-bottom:6px}
.pk-untuk{color:var(--tinta-lembut);font-size:.95rem;margin-bottom:20px}
.pk-harga{font-family:var(--judul);font-weight:800;font-size:2.3rem;letter-spacing:-.035em;line-height:1;margin-bottom:4px}
.pk-per{font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--tinta-lembut)}
.pk-satuan{font-family:var(--judul);font-weight:500;font-size:.88rem;color:var(--tinta-lembut);margin-bottom:22px}
.pk .daftar-tik{margin-bottom:24px}
.pk .tbl{margin-top:auto;width:100%}

/* ---------- cocok / belum cocok ---------- */
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){.dua-kolom{grid-template-columns:1fr}}
.kotak-ya{background:var(--hijau-muda);border:1px solid #B9D2C1;border-radius:var(--r);padding:26px 24px}
.kotak-tidak{background:#F6E9E3;border:1px solid #E4C7B9;border-radius:var(--r);padding:26px 24px}
.kotak-ya h3,.kotak-tidak h3{margin-bottom:14px}
.kotak-ya li,.kotak-tidak li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-top:1px dashed rgba(21,36,28,.18);font-size:.97rem;line-height:1.5;
}
.kotak-ya li:first-child,.kotak-tidak li:first-child{border-top:0}
.kotak-ya li .tik,.kotak-tidak li .tik{margin-top:5px}
.kotak-ya li .tik{color:var(--hijau)}
.kotak-tidak li .tik{color:#A3452B}
.kutip{margin:64px auto 0;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;max-width:44ch;font-weight:600;text-align:center;text-wrap:balance}
/* Di layar lebar tiap kalimat satu baris, jadi dua baris saja; di ponsel
   kalimatnya mengalir biasa. */
@media (min-width:861px){
  .kutip{max-width:none}
  .kutip span{display:block}
}

.jujur{background:var(--nota);border:1px dashed var(--tinta-lembut);border-radius:var(--r);padding:clamp(24px,3vw,34px);margin-top:20px}
.jujur ul{columns:2;column-gap:34px;margin-top:14px}
@media (max-width:680px){.jujur ul{columns:1}}
.jujur li{padding:6px 0;font-size:.97rem;color:var(--tinta-lembut);break-inside:avoid}
.jujur li b{color:var(--tinta);font-family:var(--judul);font-weight:600}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--garis)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--judul);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--judul);font-weight:500;font-size:1.5rem;color:var(--hijau);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 22px;max-width:70ch;color:var(--tinta-lembut);font-size:1rem}

/* ---------- penutup dan kaki ---------- */
.penutup{text-align:center}
.penutup .tombol-baris{justify-content:center;margin-top:28px}
.penutup p{margin-inline:auto}

/* ---------- toko demo (halaman depan) ----------
   Slideshow: satu toko per tampilan supaya bagian ini tidak memanjang,
   terutama di HP. Geserannya bawaan peramban (scroll-snap), jadi tetap
   bisa digeser dengan jari walau JavaScript mati; tombol panah dan titik
   dimunculkan oleh skrip halaman depan. Gambarnya disajikan dari server
   sendiri (public/demo), bukan dimuat dari situs demonya. */
.demo-jalur{
  /* Jarak antarkartu 80px: bayangan kartu berikutnya tidak sampai
     mengintip di tepi kanan layar lebar. */
  display:flex;gap:80px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:20px;
  /* Melebar 20px ke kiri dan kanan (sama dengan jarak .wrap ke tepi
     layar) supaya bayangan bingkai tidak terpotong tepi area geser. */
  margin-inline:-20px;padding:12px 20px 48px;
  scrollbar-width:thin;scrollbar-color:rgba(237,239,231,.35) transparent;
}
/* Bilah geser hanya disembunyikan kalau tombol panah dan titik sudah ada. */
.demo-geser[data-siap] .demo-jalur{scrollbar-width:none}
.demo-geser[data-siap] .demo-jalur::-webkit-scrollbar{display:none}
.demo-kartu{
  flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:center;
}
@media (max-width:820px){
  .demo-jalur{gap:16px;padding-bottom:24px}
  /* Ujung kartu berikutnya sedikit terlihat, tanda bahwa bisa digeser. */
  .demo-kartu{flex-basis:88%;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
}
.demo-tampilan{position:relative;display:block;padding:0 15% 11% 0}
.demo-web{
  display:block;overflow:hidden;background:#fff;
  border-radius:10px;box-shadow:0 16px 36px rgba(0,0,0,.32);
}
.demo-web-bilah{display:flex;gap:5px;padding:7px 10px;background:#E4E8DD;border-bottom:1px solid var(--garis)}
.demo-web-bilah i{width:7px;height:7px;border-radius:50%;background:#B9C2B2}
.demo-web img,.demo-hp img{display:block;width:100%;height:auto}
.demo-hp{
  position:absolute;right:0;bottom:0;width:26%;overflow:hidden;
  background:var(--tinta);border:4px solid var(--tinta);border-radius:16px;
  box-shadow:0 0 0 1px rgba(237,239,231,.18),0 18px 36px rgba(0,0,0,.4);
}
.demo-hp img{border-radius:11px}
.demo-tampilan:hover .demo-web,.demo-tampilan:hover .demo-hp{transform:translateY(-2px)}
.demo-web,.demo-hp{transition:transform .2s ease}
.demo-teks{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.demo-jenis{font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--kertas)}
.demo-teks p{font-size:1rem;color:#C9DCCF;line-height:1.6;margin:0 0 8px;max-width:42ch}

.demo-kendali{display:flex;align-items:center;justify-content:center;gap:12px}
.demo-kendali[hidden]{display:none}
.demo-panah{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid rgba(237,239,231,.5);background:transparent;color:var(--kertas);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.demo-panah svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.demo-titik{display:flex;align-items:center}
/* Tombolnya 28px supaya mudah disentuh; titik yang terlihat lebih kecil. */
.demo-titik button{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;
}
.demo-titik button::after{
  content:"";width:8px;height:8px;border-radius:999px;background:rgba(237,239,231,.4);
  transition:width .2s ease,background .2s ease;
}
.demo-titik button[aria-current="true"]::after{width:22px;background:var(--kertas)}
/* Efek hover hanya untuk tetikus: di layar sentuh, tombol yang baru diketuk
   tidak tertinggal dalam keadaan menyala. */
@media (hover:hover){
  .demo-panah:hover{background:var(--kertas);color:var(--hijau-tua);border-color:var(--kertas)}
  .demo-titik button:hover::after{background:rgba(237,239,231,.75)}
  .demo-titik button[aria-current="true"]:hover::after{background:var(--kertas)}
}

footer{background:var(--tinta);color:#C2CCC5;padding:clamp(48px,6vw,72px) 0 0;font-size:.96rem}
.kaki{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
@media (max-width:760px){.kaki{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.kaki{grid-template-columns:1fr}}
footer h4{font-family:var(--judul);font-weight:700;font-size:1rem;color:var(--kertas);margin-bottom:14px}
footer a{color:#C2CCC5;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer li{padding:5px 0}
.kaki-bawah{
  margin-top:44px;padding:22px 0;border-top:1px solid rgba(237,239,231,.16);font-size:.88rem;color:#8FA096;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}
.kaki-hukum{display:flex;flex-wrap:wrap;gap:6px 18px}
/* WhatsApp dan Instagram di kolom Kontak: ikon saja, bidang tekan 40px */
.kaki-sosial{display:flex;gap:10px;margin-top:12px}
.kaki-sosial a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(237,239,231,.1);color:#C2CCC5;transition:background .15s,color .15s}
.kaki-sosial a:hover{background:rgba(237,239,231,.2);color:#fff;text-decoration:none}
.kaki-sosial svg{width:20px;height:20px;fill:currentColor}

.bilah{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(21,36,28,.96);backdrop-filter:blur(6px)}
.bilah .tbl{width:100%;padding:14px}
@media (max-width:720px){
  .bilah{display:block}
  body.ada-bilah{padding-bottom:78px}
}

/* ============================================================
   Halaman form pemesanan
   ============================================================ */

.kepala-tipis{background:var(--hijau-tua);color:var(--kertas);padding:20px 0}
.kepala-tipis .bar-isi small{font-family:var(--judul);font-size:.88rem;color:#A9C4B4}

.form-sec{padding:clamp(34px,5vw,64px) 0 clamp(60px,8vw,100px)}
.form-judul{margin-bottom:10px}
.form-lead{margin-bottom:clamp(28px,4vw,44px)}

/* ---------- langkah-langkah form pemesanan ----------
   Form dibagi tiga langkah dan hanya satu yang tampil. Penunjuknya di
   atas form: garis tebal di atas tiap langkah, hijau untuk yang sedang
   dibuka. Tiap langkah bisa ditekan untuk berpindah. */
.tahap-daftar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px;scroll-margin-top:16px}
.tahap-tombol{
  width:100%;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  background:none;border:0;border-top:4px solid var(--garis);padding:12px 2px 0;
  font-family:var(--judul);font-weight:600;font-size:.94rem;line-height:1.25;color:var(--tinta-lembut);
}
.tahap-tombol:hover{color:var(--tinta)}
.tahap-nomor{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--garis);font-weight:700;font-size:.88rem;
}
.tahap-tombol[aria-current="step"]{border-top-color:var(--hijau);color:var(--tinta)}
.tahap-tombol[aria-current="step"] .tahap-nomor{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tahap-tombol.selesai{border-top-color:#9CC3AA}
.tahap-tombol.selesai .tahap-nomor{background:var(--hijau-muda);border-color:var(--hijau);color:var(--hijau);font-size:0}
.tahap-tombol.selesai .tahap-nomor::after{content:"✓";font-size:.9rem}
@media (max-width:520px){
  .tahap-tombol{flex-direction:column;align-items:flex-start;gap:6px;font-size:.82rem}
  .tahap-nomor{width:26px;height:26px;font-size:.8rem}
}

.tahap-kepala{margin-bottom:24px}
.tahap-kepala h2{font-size:clamp(1.45rem,3.4vw,1.85rem);margin-bottom:6px}
.tahap-kepala h2:focus{outline:none}
.tahap-kepala p{font-size:.97rem;color:var(--tinta-lembut);margin:0;line-height:1.55}

/* Kelompok pertanyaan di langkah 1. min-width:0 karena fieldset bawaannya
   selebar isinya, dan kisi kartu di dalamnya akan mendorong halaman
   bergeser ke samping di ponsel. */
.kelompok{border:0;padding:0;margin:0 0 30px;min-width:0}
.tanya-besar{font-family:var(--judul);font-weight:600;font-size:1.02rem;margin-bottom:12px;padding:0}

.tahap-tombol-baris{display:flex;gap:12px;flex-basis:100%}
.form-kaki .tahap-tombol-baris .tbl{min-width:0}
.form-kaki .tahap-tombol-baris .tbl-kembali{flex:0 0 auto}
/* .tbl memakai display:inline-flex, yang mengalahkan atribut hidden. */
.form-kaki .tahap-tombol-baris .tbl[hidden]{display:none}
.form-kaki .tahap-tombol-baris ~ small{flex-basis:100%;max-width:none}
@media (max-width:520px){
  .tahap-tombol-baris{flex-direction:column-reverse}
  .form-kaki .tahap-tombol-baris .tbl-kembali{flex:1 1 auto}
}

.pilih-paket{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.pilih-paket{grid-template-columns:1fr}}
.form-kotak .kartu-paket .isi{background:var(--kertas-terang)}
.form-kotak .kartu-paket input:checked + .isi{background:#fff}
.kartu-paket{position:relative;display:block;cursor:pointer}
.kartu-paket input{position:absolute;opacity:0;width:1px;height:1px}
.kartu-paket .isi{
  height:100%;background:#fff;border:2px solid var(--garis);border-radius:var(--r);
  padding:20px 20px 22px;transition:border-color .14s ease,box-shadow .14s ease;
}
.kartu-paket:hover .isi{border-color:var(--hijau)}
.kartu-paket input:checked + .isi{border-color:var(--hijau);box-shadow:0 12px 26px rgba(15,110,63,.16)}
.kartu-paket input:focus-visible + .isi{outline:3px solid var(--jingga);outline-offset:3px}
.kartu-paket h3{font-size:1.24rem;margin-bottom:4px}
.kartu-paket .harga{font-family:var(--judul);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--hijau);margin:8px 0 6px}
.kartu-paket .untuk{font-size:.92rem;color:var(--tinta-lembut);line-height:1.5}
.kartu-paket .tanda{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--garis);display:grid;place-items:center;background:#fff;
}
.kartu-paket input:checked ~ .isi .tanda,
.kartu-paket input:checked + .isi .tanda{background:var(--hijau);border-color:var(--hijau)}
.kartu-paket .tanda svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.kartu-paket input:checked + .isi .tanda svg{opacity:1}

/* Lama berlangganan: satu baris yang memenuhi lebar form, kolomnya
   sebanyak pilihannya (paling banyak empat, diisi dari --kolom). Di
   ponsel jadi dua kali dua. */
.pilih-durasi{display:grid;grid-template-columns:repeat(var(--kolom,4),minmax(0,1fr));gap:10px;margin-bottom:12px}
@media (max-width:560px){.pilih-durasi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.durasi{position:relative;display:block;cursor:pointer}
.durasi input{position:absolute;opacity:0;width:1px;height:1px}
.durasi .isi{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-align:center;background:var(--kertas-terang);
  border:2px solid var(--garis);border-radius:12px;padding:16px 10px;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.durasi:hover .isi{border-color:var(--hijau)}
.durasi input:checked + .isi{border-color:var(--hijau);background:#fff;box-shadow:0 10px 22px rgba(15,110,63,.14)}
.durasi input:focus-visible + .isi{outline:3px solid var(--jingga);outline-offset:3px}
.durasi b{font-family:var(--judul);font-weight:700;font-size:1.08rem;letter-spacing:-.02em}
.durasi span{font-family:var(--judul);font-weight:600;font-size:.84rem;color:var(--hijau)}
.durasi span:empty{display:none}
.durasi .durasi-tanda{
  font-style:normal;font-family:var(--judul);font-weight:700;font-size:.72rem;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;background:var(--jingga);border-radius:999px;padding:2px 9px;margin-top:4px;
}

.rangkuman{
  background:var(--hijau-muda);border:1px solid #B9D2C1;border-radius:var(--r);
  padding:20px 22px;margin:30px 0 24px;
}
.rangkuman-judul{font-size:1rem;margin-bottom:8px}
.rangkuman-baris{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.98rem}
.rangkuman-baris:last-child{
  margin-top:8px;padding-top:12px;border-top:1px dashed rgba(21,36,28,.25);
  font-family:var(--judul);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;
}
.rangkuman-baris span:first-child{color:var(--tinta-lembut);flex:1;min-width:0}
.rangkuman-baris span:last-child{text-align:right;max-width:65%}
.rangkuman-baris:last-child span:first-child{color:var(--tinta);font-size:1rem;align-self:center}
.rangkuman-hemat{color:var(--hijau);font-weight:600}

.form-kotak{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:clamp(22px,3.4vw,36px)}
.bidang{margin-bottom:24px}
.bidang > label,.bidang .tanya{
  display:block;font-family:var(--judul);font-weight:600;font-size:.98rem;margin-bottom:8px;
}
.bidang .bantu{display:block;font-family:var(--badan);font-weight:400;font-size:.9rem;color:var(--tinta-lembut);margin-top:3px}
.wajib{color:var(--jingga)}

input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;font-family:var(--badan);font-size:1.02rem;color:var(--tinta);
  background:var(--kertas-terang);border:2px solid var(--garis);border-radius:10px;
  padding:13px 14px;transition:border-color .14s ease,background .14s ease;
}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5B51' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hijau);background:#fff}
input.salah,select.salah{border-color:var(--merah);background:#FCF2F0}

.kotak-centang{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:600px){.kotak-centang{grid-template-columns:1fr}}
.centang{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--kertas-terang);border:2px solid var(--garis);border-radius:10px;
  padding:12px 14px;font-size:.98rem;transition:border-color .14s ease,background .14s ease;
}
.centang:hover{border-color:var(--hijau)}
.centang input{width:20px;height:20px;accent-color:var(--hijau);flex:none;margin:0}
.centang:has(input:checked){border-color:var(--hijau);background:var(--hijau-muda)}

.geser-nilai{
  font-family:var(--judul);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  color:var(--hijau);font-variant-numeric:tabular-nums;
}
.geser-tepi{display:flex;justify-content:space-between;font-family:var(--judul);font-size:.84rem;color:var(--tinta-lembut);margin-top:2px}

.jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pesan-salah{
  background:#FBECE8;border:1px solid #E7BFB2;color:#8A2C15;
  border-radius:10px;padding:13px 15px;font-size:.97rem;margin-bottom:20px;
}
.pesan-salah:empty{display:none}

.form-kaki{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:8px}
.form-kaki .tbl{flex:1;min-width:220px}
.form-kaki small{font-size:.9rem;color:var(--tinta-lembut);max-width:38ch}
/* Persetujuan syarat di bawah tombol kirim: satu baris penuh, bukan
   kolom ketiga di sebelah tombolnya. */
.form-kaki .form-setuju{flex-basis:100%;max-width:none;font-size:.86rem}
.form-setuju a{color:var(--hijau);font-weight:600}

/* ---------- bagian di dalam form pemesanan ----------
   Form ini menanyakan empat hal yang berbeda sifatnya: siapa pemesannya,
   alamat tokonya, cara dia menerima uang, dan cara dia mengirim barang.
   Tanpa pemisah, keempatnya terbaca sebagai satu tumpukan kolom panjang
   dan orang berhenti di tengah. */
.form-bagian{margin:36px 0 22px;padding-top:26px;border-top:1px solid var(--garis)}
.form-bagian h2,.form-bagian h3{font-size:1.32rem;margin-bottom:6px}
.form-bagian p{font-size:.95rem;color:var(--tinta-lembut);margin:0;line-height:1.55}
.form-bagian p + p{margin-top:8px}

.kotak-pilihan{display:grid;gap:10px}
.centang-pilih{align-items:flex-start}
.centang-pilih span{display:block;line-height:1.45}
.centang-pilih b{font-family:var(--judul);font-weight:600;font-size:.97rem;display:block}
.centang-pilih i{
  font-style:normal;font-size:.9rem;color:var(--tinta-lembut);
  display:block;margin-top:2px;line-height:1.45;
}

/* Kolom subdomain dan akhiran domain induknya, disambung jadi satu kotak
   supaya terbaca sebagai satu alamat, bukan dua isian. */
.alamat-baris{display:flex;align-items:stretch}
.alamat-baris input{flex:1;min-width:0;border-radius:10px 0 0 10px;border-right-width:0}
.alamat-induk{
  display:flex;align-items:center;padding:0 15px;white-space:nowrap;
  font-family:var(--judul);font-weight:600;font-size:.98rem;color:var(--tinta-lembut);
  background:var(--hijau-muda);border:2px solid var(--garis);border-left:0;
  border-radius:0 10px 10px 0;
}
@media (max-width:480px){
  .alamat-baris{display:block}
  .alamat-baris input{border-radius:10px;border-right-width:2px}
  .alamat-induk{display:block;border:0;background:none;padding:6px 0 0;font-size:.94rem}
}

.cek-hasil{font-size:.93rem;line-height:1.5;margin-top:9px}
.cek-hasil:empty{display:none}
.cek-ok{color:var(--hijau);font-weight:600}
.cek-salah{color:var(--merah);font-weight:600}
.cek-netral{color:var(--tinta-lembut)}

/* Kolom yang cuma muncul kalau pilihan di atasnya menuntutnya. Digeser
   masuk supaya jelas kepunyaan pilihan yang mana. */
.bidang-anak{
  margin:0 0 26px;padding:18px 20px;
  background:var(--kertas-terang);border-left:3px solid var(--hijau-muda);
  border-radius:0 10px 10px 0;
}
.bidang-anak > .bidang:last-child{margin-bottom:0}

.petunjuk-kecil{
  font-size:.92rem;color:var(--tinta-lembut);line-height:1.6;margin:0 0 16px;
}
.petunjuk-kecil a{color:var(--hijau);font-weight:600}
.bidang-anak > .petunjuk-kecil{margin-top:0}

.petunjuk{margin-top:14px;font-size:.93rem}
.petunjuk summary{
  cursor:pointer;font-family:var(--judul);font-weight:600;color:var(--hijau);
}
.petunjuk ol{list-style:decimal;margin:12px 0 0;padding-left:22px;color:var(--tinta-lembut);line-height:1.6}
.petunjuk li{margin-bottom:7px}
.petunjuk li:last-child{margin-bottom:0}
.petunjuk a{color:var(--hijau);font-weight:600}

/* ============================================================
   Halaman pesanan dan pembayaran
   ============================================================ */

.status-lencana{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--judul);font-weight:700;font-size:.9rem;
  padding:7px 15px;border-radius:999px;
}
.st-menunggu{background:#FBE9C8;color:#7A4A05}
.st-lunas{background:var(--hijau-muda);color:#0A4D2C}
.st-batal{background:#F3D9D4;color:#8A2C15}
.st-kedaluwarsa{background:#E2E5DA;color:#4B5B51}

/* Toko klien yang sedang mati atau instalasinya sudah dihapus. Merah,
   bukan abu-abu: ini keadaan yang harus terbaca dari seberang ruangan,
   bukan keterangan tambahan yang boleh terlewat. */
.lencana-mati{background:#F3D9D4;color:#8A2C15}

.bayar-kotak{background:var(--nota);border:1px solid var(--garis);border-radius:var(--r);padding:clamp(22px,3.4vw,34px);margin-bottom:20px}
.bayar-total{text-align:center;padding:6px 0 20px;border-bottom:2px solid var(--tinta);margin-bottom:22px}
.bayar-total .angka{
  font-family:var(--judul);font-weight:800;font-size:clamp(2.1rem,7vw,3.1rem);
  letter-spacing:-.04em;color:var(--tinta);font-variant-numeric:tabular-nums;line-height:1.05;
}
.bayar-total .catatan{font-family:var(--judul);font-size:.9rem;color:var(--tinta-lembut);margin-top:8px}
.bayar-total .catatan b{color:var(--jingga)}

.bayar-cara{padding-top:20px;margin-top:20px;border-top:1px dashed var(--garis)}
.bayar-cara:first-of-type{padding-top:0;margin-top:0;border-top:0}
.bayar-cara h3{font-size:1.08rem;margin-bottom:6px}
.bayar-catatan{font-size:.94rem;color:var(--tinta-lembut);margin:0}

.rek{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--garis);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.rek-nama{font-family:var(--judul);font-weight:600;font-size:.9rem;color:var(--tinta-lembut)}
.rek-nomor{font-family:var(--judul);font-weight:800;font-size:1.35rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rek-atas{font-size:.94rem;color:var(--tinta-lembut)}

.salin{
  font-family:var(--judul);font-weight:600;font-size:.86rem;cursor:pointer;
  background:transparent;border:2px solid var(--garis);border-radius:999px;padding:8px 14px;color:var(--tinta);
}
.salin:hover{border-color:var(--hijau);color:var(--hijau)}

.qris{text-align:center;padding:18px 0 4px;border-top:1px dashed var(--garis);margin-top:18px}
.qris img{width:min(260px,80%);border-radius:10px;border:1px solid var(--garis);background:#fff;padding:10px}

.hitung-mundur{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--judul);font-weight:600;font-size:.95rem;color:var(--tinta-lembut);
  margin-top:18px;font-variant-numeric:tabular-nums;
}
.rincian{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.rincian-samar{margin-top:14px;font-size:.9rem;color:var(--tinta-lembut);line-height:1.6}
.rincian-baris{display:flex;gap:14px;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--garis);font-size:.98rem}
.rincian-baris:last-child{border-bottom:0}
.rincian-baris span:first-child{color:var(--tinta-lembut);font-family:var(--judul);font-weight:500;font-size:.92rem;flex:none}
.rincian-baris span:last-child{text-align:right;font-weight:600}

.langkah-bayar{counter-reset:lb;margin:22px 0 0}
.langkah-bayar li{counter-increment:lb;position:relative;padding:9px 0 9px 34px;font-size:.98rem;color:var(--tinta-lembut)}
.langkah-bayar li::before{
  content:counter(lb);position:absolute;left:0;top:10px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;background:var(--hijau);color:#fff;
  font-family:var(--judul);font-weight:700;font-size:.78rem;
}

/* ============================================================
   Panel admin
   ============================================================ */

.admin-bar{background:var(--tinta);color:var(--kertas);padding:16px 0}
.admin-bar .bar-isi{align-items:center}

.masuk-kotak{max-width:420px;margin:clamp(50px,10vw,110px) auto;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:32px}
.masuk-kotak h1{font-size:1.7rem;margin-bottom:8px}
.masuk-kotak p{color:var(--tinta-lembut);font-size:.96rem;margin-bottom:22px}

/* Kolom sandi dengan tombol mata di ujung kanannya. */
.sandi-baris{position:relative}
.sandi-baris input{padding-right:52px}
.lihat-sandi{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;cursor:pointer;color:var(--tinta-lembut);
}
.lihat-sandi:hover{color:var(--tinta);background:var(--kertas)}
.lihat-sandi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Captcha di layar masuk: gambarnya, tombol ganti, lalu kolom isian. */
.captcha-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.captcha-gambar{display:block;width:180px;height:60px;border:1px solid var(--garis);border-radius:8px;background:#F3F5EE}

/* Kotak angka ringkasan (Pesanan, Klien, Mitra, panel mitra).
   minmax(0,1fr), bukan 1fr: dengan 1fr kolom ikut melebar mengikuti angka
   terpanjang, jadi "Rp 747.944" mendorong kotaknya keluar layar HP. */
.ringkas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
@media (max-width:820px){.ringkas{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ukuran angka mengikuti lebar kotaknya sendiri (cqi), bukan lebar layar:
   kotak yang sama bisa sempit di layar lebar (empat kolom, atau halaman
   panel mitra yang lebih sempit), dan "Rp 98.765.432" harus tetap muat.
   Peramban lama yang belum mengenal cqi memakai 1.6rem. */
.ringkas-item{
  background:#fff;border:1px solid var(--garis);border-radius:12px;padding:18px 20px;
  min-width:0;container-type:inline-size;
}
.ringkas-item b{
  display:block;font-family:var(--judul);font-weight:800;
  font-size:1.6rem;font-size:clamp(1.1rem,13cqi,1.9rem);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.ringkas-item span{font-family:var(--judul);font-size:.86rem;color:var(--tinta-lembut)}
/* Di HP satu baris per angka: judul di kiri, angka di kanan. Dua kolom
   terlalu sempit untuk jumlah rupiah, dan angka yang terpotong di tengah
   lebih sulit dibaca daripada daftar yang sedikit lebih panjang. */
@media (max-width:520px){
  .ringkas{grid-template-columns:minmax(0,1fr);gap:8px}
  .ringkas-item{
    display:flex;flex-direction:row-reverse;align-items:baseline;justify-content:space-between;
    gap:12px;padding:12px 16px;
  }
  .ringkas-item b{font-size:1.35rem;white-space:nowrap}
  .ringkas-item span{font-size:.9rem;line-height:1.35}
}

.saring{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.saring input[type=text]{width:auto;flex:1;min-width:200px;padding:10px 13px}
.saring select{width:auto;min-width:160px;padding:10px 40px 10px 13px}

/* Memilih pesanan untuk dihapus (hanya pemilik). Bilahnya menempel di
   atas saat daftar digulir, supaya tombol Hapus tetap terjangkau sesudah
   memilih pesanan jauh di bawah. */
.pilih-bar{
  position:sticky;top:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-bottom:16px;padding:10px 14px;
  background:#fff;border:1px solid var(--garis);border-radius:12px;
}
.pilih-bar[hidden]{display:none}
.pilih-semua{display:inline-flex;align-items:center;gap:9px;font-family:var(--judul);font-weight:600;font-size:.92rem;cursor:pointer}
.pilih-semua input,.pesanan-pilih{width:20px;height:20px;margin:0;accent-color:var(--merah);flex:none;cursor:pointer}
.pilih-jumlah{font-family:var(--judul);font-size:.88rem;color:var(--tinta-lembut);margin-right:auto}
.pesanan-pilih{vertical-align:-3px;margin-right:10px}
.daftar-hapus{font-size:.92rem;line-height:1.55}

.pesanan-kartu{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.pesanan-atas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.pesanan-nomor{font-family:var(--judul);font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.pesanan-lencana{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pesanan-isi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;padding:16px 0;border-top:1px dashed var(--garis)}
@media (max-width:900px){.pesanan-isi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pesanan-isi{grid-template-columns:1fr}}
.pesanan-isi div span{display:block;font-family:var(--judul);font-size:.8rem;color:var(--tinta-lembut);margin-bottom:2px}
.pesanan-isi div b{font-weight:600;font-size:.98rem;word-break:break-word}
.pesanan-tautan{padding:14px 0;border-top:1px dashed var(--garis)}
.pesanan-tautan span{display:block;font-family:var(--judul);font-size:.8rem;color:var(--tinta-lembut);margin-bottom:2px}
.pesanan-tautan a{font-size:.92rem;word-break:break-all}
.pesanan-tautan em{display:block;margin-top:6px;font-size:.85rem;color:var(--tinta-lembut);font-style:normal}
.pesanan-tombol{display:flex;flex-wrap:wrap;gap:9px;padding-top:14px;border-top:1px dashed var(--garis)}

.kosong{text-align:center;padding:60px 20px;color:var(--tinta-lembut)}
.kosong h3{margin-bottom:8px;color:var(--tinta)}

/* ============================================================
   Panel admin — klien
   ============================================================ */

.admin-menu{display:flex;gap:6px;font-family:var(--judul);font-weight:600;font-size:.92rem;margin-inline:auto}
.admin-menu a{
  text-decoration:none;color:var(--kertas);opacity:.62;
  padding:7px 14px;border-radius:9px;transition:opacity .14s ease,background .14s ease;
}
.admin-menu a:hover{opacity:1}
.admin-menu a.aktif{opacity:1;background:rgba(237,239,231,.14)}
@media (max-width:760px){
  .admin-bar .bar-isi{flex-wrap:wrap}
  .admin-menu{order:3;width:100%;margin:6px 0 0;flex-wrap:wrap}
  /* Menu di layar ponsel: dipersempit dan boleh turun baris, supaya
     yang paling kanan tidak terdorong keluar layar. */
  .admin-menu a{padding:7px 10px}
}

.klien-kepala{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start;
  margin-bottom:clamp(20px,3vw,30px);
}
.klien-kepala h1{font-size:clamp(1.6rem,3.4vw,2.1rem);margin:6px 0 4px}
.klien-kepala p{font-family:var(--judul);font-size:.92rem;color:var(--tinta-lembut)}
.klien-kepala-kanan{text-align:right}
.kembali{
  font-family:var(--judul);font-weight:600;font-size:.88rem;
  color:var(--tinta-lembut);text-decoration:none;
}
.kembali:hover{color:var(--hijau)}

.tab-baris{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;
  border-bottom:1px solid var(--garis);
}
.tab-baris button{
  font-family:var(--judul);font-weight:600;font-size:.95rem;color:var(--tinta-lembut);
  background:none;border:0;border-bottom:3px solid transparent;
  padding:11px 16px;margin-bottom:-1px;cursor:pointer;
}
.tab-baris button:hover{color:var(--tinta)}
.tab-baris button.aktif{color:var(--hijau);border-bottom-color:var(--hijau)}

/* Tab halaman Pengaturan. Tautan, bukan tombol: tiap tab halamannya
   sendiri, jadi alamatnya bisa disimpan dan tombol Kembali bekerja. */
.tab-pengaturan a{
  font-family:var(--judul);font-weight:600;font-size:.95rem;color:var(--tinta-lembut);
  text-decoration:none;border-bottom:3px solid transparent;
  padding:11px 16px;margin-bottom:-1px;white-space:nowrap;
}
.tab-pengaturan a:hover{color:var(--tinta)}
.tab-pengaturan a.aktif{color:var(--hijau);border-bottom-color:var(--hijau)}
.tab-pengaturan a[hidden]{display:none}
/* Enam tab di layar ponsel tetap satu baris. Kalau tetap tidak muat,
   barisnya yang digeser — bukan halamannya. */
@media (max-width:560px){
  .tab-pengaturan{flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none}
  .tab-pengaturan a{padding:10px 9px;font-size:.9rem}
}
/* Ponsel 360 piksel: enam tab baru muat kalau dirapatkan sedikit lagi.
   Tanpa ini tab WhatsApp terdorong keluar layar, dan pemilik yang tidak
   tahu barisnya bisa digeser tidak pernah menemukannya. */
@media (max-width:420px){
  .tab-pengaturan a{padding:10px 4px;font-size:.82rem}
}
.pengaturan-sempit{max-width:920px}

/* .tbl memasang display sendiri, dan itu mengalahkan atribut hidden
   bawaan peramban: tombol yang disembunyikan tetap tergambar. */
.tbl[hidden]{display:none}

/* Kotak "yang dikirim ke toko klien" di bagian Bangun Aplikasi Android. */
.ke-toko{margin-top:14px;padding:14px 16px;background:var(--kertas-terang);border:1px solid var(--garis);border-radius:calc(var(--r) - 4px)}
.ke-toko-judul{font-family:var(--judul);font-weight:600;font-size:.86rem;margin-bottom:10px}
.ke-toko-baris{display:flex;gap:14px;justify-content:space-between;padding:6px 0;font-size:.94rem}
.ke-toko-baris span{color:var(--tinta-lembut);flex:none}
.ke-toko-baris b{font-weight:600;text-align:right;word-break:break-all}
/* Daftar toko yang gagal diperbarui, di Pengaturan → Server. */
.samakan-gagal{margin-top:12px;padding:12px 14px;background:#FBECE8;border:1px solid #E7BFB2;border-radius:10px;font-size:.93rem;line-height:1.7}

.spek-bagian{margin-bottom:18px}
.spek-bagian h3{margin-bottom:4px}
.spek-untuk{color:var(--tinta-lembut);font-size:.94rem}
.spek-kisi{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px;margin-top:20px}
@media (max-width:760px){.spek-kisi{grid-template-columns:1fr}}
.spek-kisi .bidang{margin-bottom:20px}
/* Bidang yang terlalu lebar untuk satu kolom kisi — kotak centang kurir. */
.spek-kisi .bidang-lebar{grid-column:1/-1}
.label-kelompok{display:block;font-family:var(--judul);font-weight:600;font-size:.97rem;margin-bottom:2px}
.kotak-pilihan-dua{grid-template-columns:repeat(2,1fr);margin-top:12px}
@media (max-width:600px){.kotak-pilihan-dua{grid-template-columns:1fr}}
/* Kurir instan dan ekspedisi: dua kelompok berjudul di dalam satu kotak
   centang. Garis di antaranya supaya keduanya tidak terbaca sebagai satu
   daftar panjang — cara ongkirnya dihitung memang berbeda. */
.sub-kelompok{margin-top:16px}
.sub-kelompok + .sub-kelompok{margin-top:22px;padding-top:18px;border-top:1px solid var(--garis)}
.sub-judul{display:block;font-family:var(--judul);font-weight:600;font-size:.92rem;color:var(--tinta)}
.sub-kelompok .kotak-pilihan-dua{margin-top:10px}
.tanda-saran{
  font-style:normal;font-family:var(--badan);font-size:.74rem;font-weight:700;
  background:var(--hijau);color:#fff;border-radius:999px;padding:2px 8px;margin-left:4px;
  vertical-align:2px;letter-spacing:.02em;
}
.tanda-saran[hidden],.centang-pilih .tanda-hindari[hidden]{display:none}
.centang-pilih .tanda-hindari{color:#8A2C15;font-weight:600}
.centang-hindari,.centang-hindari:has(input:checked){border-color:#D9A497;background:#FBECE8}
.baris-saran{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px}
.baris-saran .bantu{margin-top:0}
.peringatan-kecil{margin:10px 0 0;font-size:.9rem;color:#8A2C15}
.bidang-saklar{display:flex;flex-direction:column;justify-content:center}
.bidang-saklar .bantu{margin-top:8px}
/* Kotak centang di sini berupa <label> tepat di dalam .bidang, sehingga
   aturan .bidang > label yang menjadikannya block ikut kena. Dikembalikan
   ke flex supaya jarak kotak ke tulisannya tidak hilang. */
.bidang-saklar > label.centang{
  display:flex;align-items:center;margin-bottom:0;
  font-family:var(--badan);font-weight:400;font-size:.98rem;
}

.kotak-env{
  width:100%;min-height:340px;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.65;white-space:pre;overflow-wrap:normal;overflow-x:auto;
  background:var(--tinta);color:#D5E0D8;border:0;border-radius:10px;padding:18px;
}
/* Latar gelapnya HARUS ditulis ulang di sini.
   Aturan umum "textarea:focus" di atas memutihkan latar semua kotak
   teks saat disorot, dan kekhususannya mengalahkan .kotak-env — jadi
   kotak ini berubah jadi putih sementara tulisannya tetap abu muda,
   dan seluruh isinya nyaris tak terbaca tepat ketika sedang dipakai. */
.kotak-env:focus{
  outline:2px solid var(--hijau);outline-offset:2px;
  background:var(--tinta);color:#D5E0D8;
}

/* Kunci publik DOKU di tab Spesifikasi: sembilan baris PEM, bukan seisi Environment. */
.kotak-env.kotak-kunci{min-height:200px}

.kemajuan{display:flex;align-items:center;gap:12px;padding:14px 0 0}
.kemajuan span{
  font-family:var(--judul);font-weight:600;font-size:.84rem;color:var(--tinta-lembut);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.kemajuan-bar{flex:1;height:8px;border-radius:99px;background:var(--garis);overflow:hidden}
.kemajuan-bar i{display:block;height:100%;background:var(--hijau);border-radius:99px;transition:width .25s ease}
.kemajuan.besar{padding:0}
.kemajuan.besar .kemajuan-bar{height:12px}
.kemajuan.besar span{font-size:.95rem;color:var(--tinta)}

.langkah-kelompok{margin-bottom:16px}
.langkah-atas{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.langkah-atas span{
  font-family:var(--judul);font-weight:700;font-size:.9rem;color:var(--tinta-lembut);
  font-variant-numeric:tabular-nums;
}
.langkah-daftar{margin-top:16px}
.langkah-daftar li{border-top:1px dashed var(--garis)}
.langkah-daftar li:first-child{border-top:0}
.langkah-daftar label{display:flex;gap:13px;align-items:flex-start;padding:13px 0;cursor:pointer}
.langkah-daftar input{width:20px;height:20px;accent-color:var(--hijau);flex:none;margin:2px 0 0}
.langkah-daftar b{font-family:var(--judul);font-weight:600;font-size:.99rem;display:block}
.langkah-daftar i{
  font-style:normal;display:block;margin-top:4px;
  font-size:.92rem;color:var(--tinta-lembut);line-height:1.55;
}
.langkah-daftar li.sudah b{color:var(--tinta-lembut);text-decoration:line-through}
.langkah-daftar li.sudah i{opacity:.7}

/* Pemeriksaan otomatis daftar langkah. */
.langkah-periksa{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.langkah-periksa .spek-untuk{margin:0;flex:1;min-width:220px}
.tanda-otomatis{
  display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  font-family:var(--judul);font-style:normal;font-weight:600;font-size:.72rem;letter-spacing:.02em;
  background:#E2E5DA;color:#4B5B51;vertical-align:2px;text-decoration:none;
}
.tanda-otomatis.terbukti{background:var(--hijau-muda);color:var(--hijau-tua)}
.langkah-daftar li.sudah b .tanda-otomatis{text-decoration:none}
.langkah-daftar input:disabled{cursor:default}
.catatan-otomatis{
  display:block;margin-top:6px;padding:7px 10px;border-radius:8px;
  background:#FBECE8;color:#8A2C15;font-size:.88rem;line-height:1.45;
}

.riwayat li{
  display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
  padding:13px 0;border-top:1px dashed var(--garis);
}
.riwayat li:first-child{border-top:0}
.riwayat b{font-family:var(--judul);font-weight:700;font-size:.99rem}
.riwayat span{font-family:var(--judul);font-weight:600;font-size:.92rem;color:var(--hijau)}
.riwayat i{grid-column:1/-1;font-style:normal;font-size:.9rem;color:var(--tinta-lembut)}

.calon-baris{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 0;border-top:1px dashed var(--garis);
}
.calon-baris:first-child{border-top:0}
.calon-baris b{font-family:var(--judul);font-weight:700;font-size:1.02rem;display:block}
.calon-baris i{font-style:normal;font-size:.9rem;color:var(--tinta-lembut);display:block;margin-top:2px}

/* ============================================================
   Panel admin — penyunting paket
   ============================================================ */

.sunting-kartu{margin-bottom:18px}
.sunting-atas{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px dashed var(--garis);
}
.sunting-atas h3{margin:0}
.sunting-judul{
  font-family:var(--judul);font-weight:700;font-size:1.05rem;
  margin:12px 0 4px;padding-top:18px;border-top:1px dashed var(--garis);
}

/* Kotak centang yang menumpang di baris tombol, jadi tingginya disamakan
   dengan tombol kecil di sebelahnya. */
.centang-rapat{padding:8px 13px;font-size:.9rem;margin:0}
.centang-rapat input{width:17px;height:17px}

.baris-durasi{
  display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;
  padding:14px 0;border-top:1px dashed var(--garis);
}
.baris-durasi:first-child{border-top:0;padding-top:0}
.baris-durasi .bidang{margin-bottom:0}
@media (max-width:600px){.baris-durasi{grid-template-columns:1fr 1fr;gap:10px}}

/* Bilah simpan menempel di bawah layar: halaman ini panjang, dan tombol
   simpan yang cuma ada di ujung membuat orang menggulir jauh untuk
   menyimpan satu angka. */
.bilah-simpan{
  position:sticky;bottom:0;z-index:20;
  background:rgba(21,36,28,.97);backdrop-filter:blur(6px);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
}
.bilah-simpan small{font-family:var(--judul);font-size:.88rem;color:#A9C4B4}
.bilah-simpan .tbl-garis{color:var(--kertas)}

/* Baris tambah addon.

   Satu kisi untuk seluruh baris, tiga baris tetap: label, kolom isian,
   lalu keterangan. Tiap .bidang dijadikan "display:contents" supaya
   isinya jatuh langsung ke kisi induknya — dengan begitu keempat kolom
   memakai baris yang sama.

   Sebelumnya tiap .bidang berdiri sendiri dan disejajarkan lewat
   "align-items:end". Kolom Harga punya baris keterangan di bawahnya
   sedangkan dua kolom lain tidak, jadi yang disejajarkan adalah dasar
   yang berbeda-beda: kolom isiannya naik-turun tidak karuan. */
.tambah-addon{
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr auto;
  grid-template-rows:auto auto auto;
  column-gap:14px;row-gap:6px;align-items:start;
  margin-top:20px;padding-top:18px;border-top:1px dashed var(--garis);
}
.tambah-addon > .bidang{display:contents}
.tambah-addon > .bidang:nth-child(1) > *{grid-column:1}
.tambah-addon > .bidang:nth-child(2) > *{grid-column:2}
.tambah-addon > .bidang:nth-child(3) > *{grid-column:3}
.tambah-addon > .bidang > label{grid-row:1;margin-bottom:0}
.tambah-addon > .bidang > input,
.tambah-addon > .bidang > select{grid-row:2}
.tambah-addon > .bidang > .bantu{grid-row:3;margin-top:0}
/* Tombolnya ikut tinggi kolom isian, bukan tinggi tulisannya sendiri. */
.tambah-addon > button{grid-column:4;grid-row:2;align-self:stretch}

/* Card Modul Tambahan di halaman klien: satu baris per modul, tombolnya
   di kanan. Di layar sempit tombolnya turun ke bawah keterangannya. */
.modul-baris{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  padding:14px 0;border-top:1px dashed var(--garis);
}
.modul-isi{flex:1 1 260px;min-width:0}

/* Di layar sempit semuanya kembali bertumpuk satu kolom, jadi
   penempatan baris dan kolom di atas justru harus dilepas. */
@media (max-width:820px){
  .tambah-addon{grid-template-columns:1fr;grid-template-rows:none;row-gap:0}
  .tambah-addon > .bidang{display:block;margin-bottom:18px}
  .tambah-addon > .bidang > label{margin-bottom:8px}
  .tambah-addon > .bidang > *,
  .tambah-addon > button{grid-column:auto;grid-row:auto}
  .tambah-addon > button{align-self:auto}
}

/* Hapus ditulis sebagai tautan, bukan tombol: dia menumpang di baris
   keterangan yang sudah kecil, dan tombol di sana akan lebih menonjol
   daripada isinya sendiri. */
.tautan-hapus{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--judul);font-size:.86rem;color:var(--merah);text-decoration:underline;
}
.tautan-hapus:hover{opacity:.75}

/* Addon di formulir pemesanan: nama dan harganya ditumpuk supaya barisnya
   tetap terbaca di lebar ponsel. */
.centang-addon{align-items:flex-start}
.centang-addon span{display:block;line-height:1.4}
.centang-addon b{font-family:var(--judul);font-weight:600;font-size:.97rem;display:block}
.centang-addon i{
  font-style:normal;font-family:var(--judul);font-weight:700;
  font-size:.9rem;color:var(--hijau);display:block;margin-top:2px;
}
.centang-addon small{display:block;font-size:.86rem;color:var(--tinta-lembut);line-height:1.45;margin-top:5px}
.centang-addon input{margin-top:2px}

/* Kartu addon di form: kotak centangnya, dan untuk addon yang dihitung
   per satuan, kotak jumlah yang menempel di bawahnya setelah dicentang. */
/* Tiap kartu setinggi isinya sendiri: kotak jumlah yang terbuka di satu
   kartu tidak ikut memanjangkan kartu di sebelahnya. */
.daftar-addon{align-items:start}
.addon-kartu{display:flex;flex-direction:column;min-width:0}
/* Modul yang sudah dibawa paket pilihan disembunyikan lewat [hidden];
   tanpa ini display:flex di atas menimpanya. */
.addon-kartu[hidden]{display:none}
.addon-kartu > .centang{flex:1}
.addon-kartu.ada-jumlah > .centang{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0}
.addon-jumlah{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  background:#fff;border:2px solid var(--hijau);border-top:1px dashed #9CC3AA;
  border-radius:0 0 10px 10px;padding:10px 14px;
}
.addon-jumlah[hidden]{display:none}
.addon-jumlah > label{flex-basis:100%;font-family:var(--judul);font-weight:600;font-size:.86rem;color:var(--tinta-lembut)}
.penghitung{display:flex;align-items:stretch}
.penghitung button{
  width:36px;border:2px solid var(--garis);background:var(--kertas-terang);cursor:pointer;
  font-family:var(--judul);font-weight:700;font-size:1.1rem;color:var(--tinta);
}
.penghitung button:first-child{border-radius:9px 0 0 9px;border-right:0}
.penghitung button:last-child{border-radius:0 9px 9px 0;border-left:0}
.penghitung button:hover{background:var(--hijau-muda)}
.penghitung input[type=number]{
  width:56px;padding:7px 4px;text-align:center;border-radius:0;font-family:var(--judul);font-weight:700;
  -moz-appearance:textfield;appearance:textfield;
}
.penghitung input[type=number]::-webkit-inner-spin-button,
.penghitung input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.addon-satuan{font-family:var(--judul);font-weight:600;font-size:.9rem}
.addon-subtotal{margin-left:auto;font-family:var(--judul);font-weight:700;font-size:.92rem;color:var(--hijau)}

/* Kabar berhasil. Sepasang dengan .pesan-salah, tapi warnanya hijau dan
   isinya hilang sendiri setelah beberapa detik. */
.pesan-baik{
  background:var(--hijau-muda);border:1px solid #B9D2C1;color:var(--hijau-tua);
  border-radius:10px;padding:13px 15px;font-size:.97rem;margin-bottom:20px;
}
.pesan-baik:empty{display:none}

/* ---------- akun dan tim ---------- */

/* Nama yang sedang masuk, di bilah atas. Ditulis kecil: ia jawaban atas
   pertanyaan "ini akun siapa", bukan judul halaman. */
.saya-siapa{
  font-family:var(--judul);font-weight:600;font-size:.86rem;
  color:#A9C4B4;white-space:nowrap;
}
@media (max-width:760px){.saya-siapa{display:none}}

/* Pengingat sandi sementara. Dipasang di ATAS seluruh halaman, bukan di
   sudut, karena yang memakainya biasanya tidak pernah kembali ke halaman
   yang menyebutkannya. */
.pita-ingat{
  background:var(--jingga);color:#fff;
  font-family:var(--judul);font-weight:600;font-size:.94rem;
  padding:11px 18px;text-align:center;
}
.pita-ingat a{color:#fff;text-decoration:underline}

.tim-subjudul{
  font-family:var(--judul);font-weight:700;font-size:1.02rem;
  margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--garis);
}

.tim-baris{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--kertas-terang);border:1px solid var(--garis);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;
}
.tim-baris b{font-family:var(--judul);font-weight:700;font-size:1rem;display:block}
.tim-email{display:block;font-size:.93rem;color:var(--tinta-lembut)}
.tim-tanda{
  display:block;font-family:var(--judul);font-size:.84rem;color:var(--tinta-lembut);margin-top:2px;
}
/* Yang nonaktif dipudarkan, tapi tombolnya TIDAK — tombol Aktifkan justru
   yang paling dicari di baris ini. */
.tim-mati > div:first-child{opacity:.55}
.tim-tombol{display:flex;flex-wrap:wrap;gap:8px}

/* Sandi sementara. Sengaja mencolok dan sengaja tidak hilang sendiri:
   ia cuma muncul sekali, dan yang melihatnya harus menyalinnya. */
.sandi-sekali{
  margin-top:16px;padding:18px 20px;
  background:var(--hijau-muda);border:2px solid var(--hijau);border-radius:10px;
}
.sandi-sekali b{font-family:var(--judul);font-weight:700;display:block;margin-bottom:10px}
.sandi-sekali code{
  display:block;background:#fff;border:1px solid var(--garis);border-radius:8px;
  padding:12px 14px;font-size:1.15rem;letter-spacing:.06em;
  word-break:break-all;user-select:all;
}
.sandi-sekali p{font-size:.92rem;color:var(--tinta-lembut);margin:12px 0}

/* ============================================================
   Halaman dokumen: Kebijakan Privasi (/privasi) dan Syarat
   Layanan (/syarat). Isinya teks panjang, jadi yang diatur di sini
   cuma keterbacaan — lebar baris, jarak antarbagian, dan tabel yang
   tetap muat di layar ponsel.
   ============================================================ */

.dokumen{padding:clamp(34px,5vw,64px) 0 clamp(60px,8vw,100px)}
.dokumen h1{margin-bottom:8px}
.dokumen-tanggal{font-family:var(--judul);font-size:.9rem;color:var(--tinta-lembut);margin-bottom:22px}
.dokumen .lead{margin-bottom:28px}
.dokumen h2{
  font-size:clamp(1.3rem,2.6vw,1.6rem);margin:2.4em 0 .7em;
  padding-top:18px;border-top:1px solid var(--garis);scroll-margin-top:20px;
}
.dokumen h3{font-size:1.06rem;margin:1.6em 0 .5em}
.dokumen p,.dokumen li{line-height:1.7}
.dokumen ul,.dokumen ol{margin:0 0 1em;padding-left:1.4em}
.dokumen ul{list-style:disc}
.dokumen ol{list-style:decimal}
.dokumen li{margin:.3em 0}
.dokumen li > ul,.dokumen li > ol{margin:.3em 0 0}
.dokumen a{color:var(--hijau);font-weight:600;overflow-wrap:anywhere}
.dokumen strong{font-weight:600}

/* Ringkasan bahasa sehari-hari di atas. Bentuknya kotak nota, sama
   seperti kotak syarat di halaman mitra, supaya jelas ia bukan isi
   dokumennya sendiri. */
.dokumen-ringkas{
  background:var(--nota);border:1px solid var(--garis);border-radius:var(--r);
  padding:clamp(18px,3vw,26px);margin:0 0 26px;
}
.dokumen-ringkas h2{font-size:1.15rem;margin:0 0 10px;padding:0;border:0}
.dokumen-ringkas ul{margin-bottom:12px}
.dokumen-ringkas p{font-size:.94rem;color:var(--tinta-lembut)}

.dokumen-daftar-isi{
  background:var(--kertas-terang);border:1px solid var(--garis);border-radius:var(--r);
  padding:clamp(16px,3vw,22px) clamp(18px,3vw,26px);margin-bottom:10px;
}
.dokumen-daftar-isi h2{font-size:1rem;margin:0 0 8px;padding:0;border:0}
.dokumen-daftar-isi ol,.dokumen-daftar-isi ul{columns:2;column-gap:30px;margin:0;padding-left:1.3em}
@media (max-width:640px){.dokumen-daftar-isi ol,.dokumen-daftar-isi ul{columns:1}}
.dokumen-daftar-isi li{break-inside:avoid;font-family:var(--judul);font-size:.92rem;line-height:1.45}
.dokumen-daftar-isi a{font-weight:500;color:var(--tinta)}

/* Tabel data dan kue. Di layar lebar tabel biasa; di ponsel tiap baris
   ditumpuk jadi kartu (lihat di bawah), supaya halamannya tidak pernah
   bergeser ke samping dan kata tidak terpotong di tengah. */
.dokumen-tabel{overflow-x:auto;margin:0 0 1.2em}
.dokumen table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--garis)}
.dokumen th,.dokumen td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--garis);overflow-wrap:break-word;line-height:1.5}
.dokumen th{font-family:var(--judul);font-weight:600;font-size:.86rem;background:var(--kertas-terang)}
.dokumen td ul{padding-left:1.1em;margin:0}
/* Di ponsel tiga kolom terlalu sempit untuk kalimat panjang: tiap baris
   jadi kartu, dan judul kolomnya (data-label) ditulis di atas isinya. */
@media (max-width:640px){
  .dokumen table,.dokumen tbody,.dokumen tr,.dokumen td{display:block;width:100%}
  .dokumen table{border:0;background:transparent}
  .dokumen thead{display:none}
  .dokumen tr{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:4px 0;margin-bottom:10px}
  .dokumen td{border:0;padding:6px 14px}
  .dokumen td::before{
    content:attr(data-label);display:block;font-family:var(--judul);font-weight:600;
    font-size:.78rem;color:var(--tinta-lembut);margin-bottom:2px;
  }
  .dokumen td:first-child{font-weight:600}
}

/* Baris alamat pengelola hilang kalau ALAMAT_USAHA kosong. */
.alamat-pengelola[data-ada=""]{display:none}
/* "Google Analytics belum kami nyalakan" hilang begitu GOOGLE_ANALYTICS_ID diisi. */
.analitik-mati[data-ada=""]{display:none}

/* Kaki halaman dokumen: cuma baris bawahnya, tanpa kolom-kolom halaman
   depan. */
.kaki-dokumen{padding-top:0}
.kaki-dokumen .kaki-bawah{margin-top:0;border-top:0}

/* ============================================================
   Pertanyaan izin Google Analytics (public/analitik.js)

   Tidak menghalangi halaman: pengunjung boleh membaca dan memesan
   tanpa menjawab, dan yang tidak menjawab tidak pernah dikirim ke
   Google. Di atas bilah tombol ponsel, di bawah jendela tanya.
   Tolak dan Izinkan sama besar, supaya menolak sama mudahnya.
   ============================================================ */
.pilihan-analitik{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  max-width:540px;padding:18px 20px;
  background:#fff;border:1px solid var(--garis);border-radius:var(--r);
  box-shadow:0 14px 40px rgba(21,36,28,.2);
}
.pilihan-analitik h2{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;outline:0}
.pilihan-analitik p{font-size:.92rem;line-height:1.55;color:var(--tinta-lembut);margin:0 0 12px}
.pilihan-analitik a{color:var(--hijau-tua);font-weight:600}
.pilihan-analitik-kini{font-family:var(--judul);font-weight:600;color:var(--tinta)}
.pilihan-analitik .tombol-baris{gap:10px}
.pilihan-analitik .tbl{flex:1 1 0;min-width:120px}
@media print{.pilihan-analitik{display:none}}

/* Tautan Pilihan Analitik baru tampil kalau analitiknya menyala. */
[data-pilihan-analitik][hidden]{display:none}

/* ============================================================
   Panel admin — Pengaturan → Cadangan
   ============================================================ */

/* Satu baris per toko: nama, keadaan cadangan, tombol. Riwayatnya
   terbuka di bawah baris yang sama, selebar baris. */
/* Kolom tombol selebar tetap: tiap baris grid-nya sendiri, dan kolom
   "auto" membuat kolom tengah mulai di tempat yang berbeda-beda. */
.cadangan-baris{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 18rem;gap:10px 18px;align-items:center;
  padding:14px 0;border-top:1px dashed var(--garis);
}
.cadangan-baris:first-child{border-top:0}
.cadangan-baris > .tombol-baris{justify-content:flex-end}
/* Riwayat yang sedang terbuka: tombolnya tetap berlabel sama, cuma
   warnanya yang berubah — label yang memanjang membuat tombol sebelahnya
   turun baris. */
.cadangan-baris [data-riwayat][aria-expanded="true"]{background:var(--tinta);color:var(--kertas);border-color:var(--tinta)}
@media (max-width:760px){
  .cadangan-baris{grid-template-columns:minmax(0,1fr)}
  .cadangan-baris > .tombol-baris{justify-content:flex-start}
}
.cadangan-nama b{font-family:var(--judul);font-weight:700;font-size:1rem;display:block;overflow-wrap:anywhere}
.cadangan-nama i{font-style:normal;font-size:.86rem;color:var(--tinta-lembut);display:block;margin-top:2px;overflow-wrap:anywhere}
.cadangan-keadaan{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:.88rem;color:var(--tinta-lembut);min-width:0}
.cadangan-riwayat{
  grid-column:1/-1;background:var(--kertas-terang);border:1px solid var(--garis);
  border-radius:10px;padding:2px 16px;
}
.cadangan-snapshot{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;
  padding:11px 0;border-top:1px dashed var(--garis);
}
.cadangan-snapshot:first-child{border-top:0}
.cadangan-snapshot b{font-family:var(--judul);font-weight:700;font-size:.95rem}

/* Lencana keadaan dalam daftar: lebih kecil dari lencana di kepala halaman. */
.lencana-kecil{padding:3px 11px;font-size:.78rem;gap:5px}

/* Titik warna keadaan server. */
.titik{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}