/* ==========================================================================
   PAWON LISTRIK — sistem desain toko
   Terang, kontras lembut, tanpa emoji, ikon SVG. Dipakai semua halaman toko.
   ========================================================================== */
:root{
  --bg:#f3f8f4; --card:#ffffff; --line:#dbe8de; --line2:#c2d6c8;
  --txt:#16241b; --txt2:#41544a; --sub:#6b8074;
  --navy:#14532d; --navy2:#1c7a44; --acc:#15803d; --acc2:#22a355;
  --ok:#15803d; --okbg:#e7f6ec; --warn:#8a5a12; --warnbg:#fdf3e2; --bad:#9c3230; --badbg:#fceceb;
  --r:14px; --r2:20px; --sh:0 1px 2px rgba(18,48,30,.06),0 8px 24px rgba(18,48,30,.07);
  --sh2:0 2px 6px rgba(18,48,30,.09),0 18px 44px rgba(18,48,30,.12);
  --f:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:15.5px/1.65 var(--f)}
a{color:var(--navy2);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.28;font-weight:800;letter-spacing:-.01em}
.wadah{max-width:1140px;margin:0 auto;padding:0 16px}

/* ── kepala toko ─────────────────────────────────────────────────────── */
.topbar{background:var(--navy);color:#dce8f4;font-size:12.5px;padding:7px 0}
.topbar .wadah{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.topbar b{color:#fff}
.topbar .kanan{margin-left:auto;display:flex;gap:16px;align-items:center}
header.toko{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
header.toko .wadah{display:flex;align-items:center;gap:16px;padding:12px 16px;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:12px;min-width:0}
.merek .lambang{width:54px;height:54px;flex:0 0 auto}
.merek .logo-toko{object-fit:cover;border-radius:50%;border:2px solid #d9eadf;box-shadow:0 4px 14px rgba(17,74,45,.14);background:#fff}
.merek .nama{font-weight:900;font-size:19px;letter-spacing:.04em;color:var(--navy);line-height:1.15}
.merek .slogan{font-size:11.5px;color:var(--sub);letter-spacing:.02em}
.pencari{flex:1;min-width:220px;position:relative}
.pencari input{width:100%;padding:12px 14px 12px 42px;border:1px solid var(--line2);border-radius:999px;font:15px var(--f);background:#fbfbf9}
.pencari svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--sub)}
.kepala-aksi{display:flex;gap:10px;align-items:center}

/* ── tombol ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;
     padding:11px 16px;font:700 14.5px var(--f);cursor:pointer;background:var(--navy);color:#fff;transition:.15s}
.btn:hover{background:var(--navy2)}
.btn.acc{background:var(--acc)} .btn.acc:hover{background:var(--acc2)}
.btn.wa{background:#1f9d55} .btn.wa:hover{background:#25b463}
.btn.garis{background:#fff;color:var(--navy);border:1.5px solid var(--line2)}
.btn.garis:hover{background:#f4f7fa;border-color:var(--navy2)}
.btn.polos{background:transparent;color:var(--navy2);border:0;padding:6px 8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.kcl{padding:8px 12px;font-size:13.5px;border-radius:9px}
.btn.lbr{width:100%}
.btn svg{width:17px;height:17px}

/* ── lencana & tanda ─────────────────────────────────────────────────── */
.lc{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font:700 11.5px var(--f)}
.lc.ok{background:var(--okbg);color:var(--ok)} .lc.warn{background:var(--warnbg);color:var(--warn)}
.lc.bad{background:var(--badbg);color:var(--bad)} .lc.netral{background:#eef1f5;color:var(--txt2)}
.lc.navy{background:#e8eff6;color:var(--navy)}
.kepercayaan{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:18px 0}
.kepercayaan .butir{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;display:flex;gap:11px;align-items:flex-start}
.kepercayaan svg{width:22px;height:22px;flex:0 0 auto;color:var(--ok)}
.kepercayaan b{display:block;font-size:13.5px}
.kepercayaan span{font-size:12px;color:var(--sub);line-height:1.45}

/* ── sorotan / hero ──────────────────────────────────────────────────── */
.hero{border-radius:var(--r2);margin:18px 0;position:relative;overflow:hidden;background:#eaf4ed;border:1px solid #d5e8dc;box-shadow:0 14px 34px rgba(17,74,45,.10)}
.hero-sampul img{display:block;width:100%;height:auto;aspect-ratio:1800/670;object-fit:cover}
.hero-aksi{position:absolute;left:22px;bottom:20px;display:flex;gap:10px;flex-wrap:wrap;padding:9px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 8px 25px rgba(12,57,34,.18);backdrop-filter:blur(8px)}
.hero-tanya{background:#fff!important;color:#124d2d!important;border:1px solid #b9d7c4!important}.hero-tanya:hover{background:#14532d!important;color:#fff!important;border-color:#14532d!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:640px){
  .hero{margin:12px 0;border-radius:14px}
  .hero-sampul img{aspect-ratio:2056/765;object-fit:contain;background:#d8efdc}
  .hero-aksi{position:static;display:grid;grid-template-columns:1fr;padding:10px;background:#fff;border-radius:0;box-shadow:none;backdrop-filter:none}
  .hero-aksi .btn{width:100%;padding:11px 8px;font-size:13px}
}

/* ── kisi produk ──────────────────────────────────────────────────────── */
.pita{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch}
.pita button{border:1.5px solid var(--line2);background:#fff;color:var(--txt2);border-radius:999px;
             padding:9px 15px;font:700 13.5px var(--f);cursor:pointer;white-space:nowrap}
.pita button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
.kartu{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
       display:flex;flex-direction:column;transition:.18s;position:relative}
.kartu:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--line2)}
.kartu .foto{aspect-ratio:1/1;background:#f1f2f0;position:relative;overflow:hidden}
.kartu .foto img{width:100%;height:100%;object-fit:cover}
.kartu .kosong{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#a8adb6}
.kartu .kosong svg{width:38px;height:38px}
.kartu .kosong span{font-size:11.5px}
.kartu .tanda{position:absolute;top:10px;left:10px;z-index:2}
.kartu .isi{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.kartu h3{font-size:14.5px;font-weight:700;margin:0;line-height:1.4;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.harga{font-weight:900;font-size:19px;color:var(--navy);letter-spacing:-.02em}
.harga .coret{font-size:12.5px;color:var(--sub);text-decoration:line-through;font-weight:600;margin-left:6px}
.harga .satuan{font-size:12px;color:var(--sub);font-weight:600;margin-left:3px}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--sub)}
.kartu .aksi{margin-top:auto;display:flex;gap:8px}

/* ── halaman barang ──────────────────────────────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;margin:20px 0}
@media(max-width:860px){.detail{grid-template-columns:1fr}}
.galeri{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:12px}
.galeri .utama{aspect-ratio:1/1;border-radius:var(--r);background:#f1f2f0;overflow:hidden;position:relative}
.galeri .utama img{width:100%;height:100%;object-fit:cover}
.galeri .mini{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.galeri .mini img{width:68px;height:68px;object-fit:cover;border-radius:9px;border:2px solid transparent;cursor:pointer;flex:0 0 auto}
.galeri .mini img.on{border-color:var(--navy)}
.rincian{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:20px}
.blok-harga{background:#f8f9fb;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:14px 0}
.daftar-ciri{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}
.daftar-ciri li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--txt2)}
.daftar-ciri svg{width:17px;height:17px;color:var(--ok);flex:0 0 auto;margin-top:3px}

/* ── lembar pesanan (sheet) ──────────────────────────────────────────── */
.tirai{position:fixed;inset:0;background:rgba(14,20,28,.5);display:none;z-index:60;align-items:flex-end;justify-content:center}
.tirai.on{display:flex}
.lembar{background:#fff;width:100%;max-width:600px;border-radius:var(--r2) var(--r2) 0 0;max-height:94vh;overflow:auto;box-shadow:var(--sh2)}
@media(min-width:700px){.tirai{align-items:center}.lembar{border-radius:var(--r2);max-height:90vh}}
.lembar .kepala{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:#fff;z-index:2}
.lembar .kepala h3{margin:0;font-size:17px}
.lembar .kepala .tutup{margin-left:auto;background:#f2f3f5;border:0;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--txt2)}
.lembar .badan{padding:16px 18px 20px}
.lembar .kaki{padding:14px 18px;border-top:1px solid var(--line);background:#fafaf8;position:sticky;bottom:0}
.langkah{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--sub);margin:0 0 12px}
.langkah .n{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}

/* ── isian ───────────────────────────────────────────────────────────── */
.fld{margin:11px 0}
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--txt2);margin-bottom:5px}
.fld small{display:block;color:var(--sub);font-size:11.5px;margin-top:4px;line-height:1.45}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line2);
     border-radius:10px;font:15px var(--f);background:#fff;color:var(--txt)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--navy2);box-shadow:0 0 0 3px rgba(29,82,128,.12)}
.baris2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.baris3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:560px){.baris3{grid-template-columns:1fr}}
.pilihan{display:grid;gap:9px}
.pilih{border:1.5px solid var(--line2);border-radius:11px;padding:12px 13px;cursor:pointer;display:flex;gap:11px;align-items:flex-start;background:#fff}
.pilih.on{border-color:var(--navy);background:#f4f8fb;box-shadow:0 0 0 3px rgba(29,82,128,.08)}
.pilih b{font-size:14px} .pilih span{font-size:12px;color:var(--sub);display:block}
.radius{width:19px;height:19px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto;margin-top:2px;position:relative}
.pilih.on .radius{border-color:var(--navy)} .pilih.on .radius:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--navy)}
.ruang{position:relative}
.saran{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line2);
       border-radius:11px;box-shadow:var(--sh2);max-height:260px;overflow:auto;z-index:5;display:none}
.saran.on{display:block}
.saran div{padding:10px 13px;cursor:pointer;font-size:14px;border-bottom:1px solid #f2f2f0}
.saran div:last-child{border-bottom:0} .saran div:hover,.saran div.hl{background:#f2f7fb}
.alamat-tersimpan{display:grid;gap:9px;margin-bottom:6px}
.alamat-tersimpan .kartu-a{border:1.5px solid var(--line2);border-radius:11px;padding:11px 13px;cursor:pointer;background:#fff}
.alamat-tersimpan .kartu-a:hover{border-color:var(--navy)}
.alamat-tersimpan .kartu-a b{font-size:13.5px} .alamat-tersimpan .kartu-a p{margin:3px 0 0;font-size:12px;color:var(--sub);line-height:1.45}
label.cek{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer;padding:9px 0}
label.cek input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.pesan-kotak{border-radius:11px;padding:11px 13px;font-size:13px;margin-top:10px}
.pesan-kotak.err{background:var(--badbg);color:var(--bad)}
.pesan-kotak.ok{background:var(--okbg);color:var(--ok)}
.pesan-kotak.info{background:#eef4f9;color:var(--navy2)}

/* ── ringkasan & tabel ───────────────────────────────────────────────── */
.ringkas{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ringkas .r{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid #f2f1ee;font-size:14px}
.ringkas .r:last-child{border-bottom:0}
.ringkas .r.total{background:#f8f9fb;font-weight:900;font-size:16px}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel th{text-align:left;padding:9px 8px;border-bottom:2px solid var(--line);font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em}
.tabel td{padding:11px 8px;border-bottom:1px solid #f2f1ee;vertical-align:top}
.tabel tr:hover td{background:#fbfbfa}
.kotak{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:18px;margin-bottom:16px}
.kotak h3{font-size:16.5px}
.kepala-kotak{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.kepala-kotak .kanan{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── kaki ────────────────────────────────────────────────────────────── */
footer.toko{background:#122a41;color:#b9cbdc;margin-top:34px;padding:30px 0 20px;font-size:13.5px}
footer.toko .kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
footer.toko h4{color:#fff;font-size:14px;margin-bottom:9px}
footer.toko a{color:#cfe0f0} footer.toko ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer.toko .bawah{border-top:1px solid #24405c;margin-top:22px;padding-top:14px;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8fa5b9}
footer.toko .bawah .kanan{margin-left:auto}

/* ── tombol WhatsApp mengambang ──────────────────────────────────────── */
.wa-ambang{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:9px;
   background:#1f9d55;color:#fff;border:0;border-radius:999px;padding:13px 18px;font:800 14px var(--f);
   cursor:pointer;box-shadow:0 8px 26px rgba(31,157,85,.4)}
.wa-ambang svg{width:20px;height:20px}
@media(max-width:600px){.wa-ambang span{display:none}.wa-ambang{padding:15px}}

/* ── lain-lain ───────────────────────────────────────────────────────── */
.kosong-besar{text-align:center;padding:52px 18px;color:var(--sub)}
.kosong-besar svg{width:52px;height:52px;color:#b9bfc8;margin-bottom:12px}
.kosong-besar h3{color:var(--txt)}
.muat{display:inline-block;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.kelip{animation:kelip 1.2s ease-in-out infinite}
@keyframes kelip{0%,100%{opacity:1}50%{opacity:.45}}
.kerangka{background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;animation:kilau 1.3s ease infinite;border-radius:8px}
@keyframes kilau{0%{background-position:100% 50%}100%{background-position:0 50%}}
.layar-saja{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.judul-bagian{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px}
.judul-bagian h2{font-size:20px;margin:0}
.judul-bagian .kanan{margin-left:auto;font-size:13px;color:var(--sub)}
.judul-bagian .kanan button{background:0;border:0;color:var(--navy2);font:700 13px var(--f);cursor:pointer}


/* ══════════════════════════════════════════════════════════════════════
   PENYEMPURNAAN (ADR-027) — kerapian & kesan profesional
   ══════════════════════════════════════════════════════════════════════ */

/* kepala toko tidak boleh meluber keluar layar */
header.toko .wadah{flex-wrap:nowrap}
@media(max-width:1080px){header.toko .wadah{flex-wrap:wrap}}
.kepala-aksi{flex:0 0 auto}
.kepala-aksi .btn{white-space:nowrap}
.pencari{flex:1 1 260px;min-width:0}

/* jangan sampai tombol WhatsApp mengambang menutupi isi halaman */
body{padding-bottom:86px}
@media(max-width:600px){body{padding-bottom:96px}}

/* sorotan: dua kolom — tulisan kiri, gambar kanan */
.hero .dalam{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:22px;align-items:center;position:relative;z-index:2}
@media(max-width:820px){.hero .dalam{grid-template-columns:1fr}.hero .gambar{display:none}}
.hero h1{font-size:29px}
.hero .gambar svg{width:100%;max-width:280px;display:block;margin:0 auto}
.hero .angka{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}
.hero .angka div{font-size:12.5px;color:#bcd3e8}
.hero .angka b{display:block;font-size:20px;color:#fff;font-weight:900;letter-spacing:-.02em}

/* pita kategori */
.kategori-kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-bottom:6px}
.kategori-kartu{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:11px;align-items:center;cursor:pointer;transition:.16s}
.kategori-kartu:hover{border-color:var(--navy2);box-shadow:var(--sh)}
.kategori-kartu svg{width:26px;height:26px;color:var(--navy);flex:0 0 auto}
.kategori-kartu b{font-size:13.5px;display:block;line-height:1.3}
.kategori-kartu span{font-size:11.5px;color:var(--sub)}

/* keadaan kosong yang memandu, bukan ruang hampa */
.pandu{border:1.5px dashed var(--line2);border-radius:var(--r2);padding:30px 22px;text-align:center;background:#fffdf9}
.pandu svg{width:46px;height:46px;color:#c2c8d0;margin-bottom:10px}
.pandu h3{font-size:18px;margin-bottom:6px}
.pandu p{color:var(--sub);max-width:520px;margin:0 auto 14px;font-size:14px}
.pandu .aksi{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.langkah-pandu{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px;text-align:left}
.langkah-pandu .l{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;gap:10px}
.langkah-pandu .n{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto}
.langkah-pandu b{font-size:13px;display:block}
.langkah-pandu span{font-size:11.5px;color:var(--sub)}

/* kartu keunggulan lebih rapi (teks tidak menggantung) */
.kepercayaan .butir{align-items:center}
.kepercayaan span{display:block}
.kepercayaan b{margin-bottom:1px}

/* judul bagian lebih tegas */
.judul-bagian{margin:30px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.judul-bagian h2{font-size:21px}

/* kartu barang: kesan lebih premium */
.kartu{border-radius:16px}
.kartu:hover .foto img{transform:scale(1.04)}
.kartu .foto img{transition:transform .35s ease}
.kartu .foto .tanda{box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kartu .kode{font-size:11px;color:var(--sub);letter-spacing:.02em}

/* tombol lebih ramah jari di HP */
@media(max-width:600px){
  .btn{padding:13px 16px;font-size:15px}
  .btn.kcl{padding:10px 13px;font-size:14px}
  .kartu .aksi .btn{padding:11px 12px}
  .kartu h3{font-size:15px}
  .harga{font-size:20px}
}

/* lembar pesanan: kepala & tombol lebih nyaman di HP */
@media(max-width:600px){
  .lembar .kepala h3{font-size:16px}
  .lembar .badan{padding:14px 15px 18px}
  .lembar .kaki{padding:12px 15px}
}
.lembar .langkah{margin-top:20px}
.lembar .langkah:first-child{margin-top:0}


/* ══════════════════════════════════════════════════════════════════════
   ADR-027 — LATAR KELISTRIKAN INDUSTRI + IKON REALISTIS
   ══════════════════════════════════════════════════════════════════════ */

/* latar halaman: jaring teknik (blueprint) — sangat samar, tidak mengganggu bacaan */
body{
  background-image:
    linear-gradient(rgba(18,57,92,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,57,92,.038) 1px, transparent 1px),
    radial-gradient(1200px 400px at 50% -140px, rgba(29,82,128,.07), transparent 70%);
  background-size: 30px 30px, 30px 30px, 100% 100%;
  background-attachment: fixed, fixed, fixed;
}

/* pita atas: jalur kabel tipis */
.topbar{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cg fill='none' stroke-width='1.6'%3E%3Cpath d='M0 9h60' stroke='%23ffffff' stroke-opacity='.07'/%3E%3Cpath d='M0 17h60' stroke='%23e09a4f' stroke-opacity='.12'/%3E%3Cpath d='M0 25h60' stroke='%238fb4d4' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
}

/* sorotan: panel kelistrikan industri */
.hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M0 35h35v35h35V35h35M0 105h70V70M140 70v35h-35M35 0v20'/%3E%3C/g%3E%3Cg fill='%23e09a4f' fill-opacity='.18'%3E%3Ccircle cx='35' cy='35' r='3'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3Ccircle cx='105' cy='35' r='3'/%3E%3Ccircle cx='70' cy='105' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(520px 240px at 88% 8%, rgba(224,154,79,.22), transparent 70%),
    linear-gradient(122deg,#0f3253 0%,#1b4f78 52%,#24618f 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 42px rgba(15,50,83,.22), inset 0 0 90px rgba(0,0,0,.16);
}
.hero:before{                     /* garis "kabel besar" melengkung di belakang */
  content:"";position:absolute;inset:0;border-radius:var(--r2);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 250C120 250 140 120 300 120s190 90 340 40' stroke='%23ffffff' stroke-opacity='.05' stroke-width='16'/%3E%3Cpath d='M-20 250C120 250 140 120 300 120s190 90 340 40' stroke='%23e09a4f' stroke-opacity='.10' stroke-width='3'/%3E%3Cpath d='M-20 285C140 285 170 190 320 180s210 40 320 10' stroke='%238fb4d4' stroke-opacity='.07' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:bottom right;background-size:cover;
}

/* pita pemisah "berkas kabel" sebelum kaki halaman */
.pita-kabel{
  height:52px;margin:34px 0 -34px;border-radius:var(--r2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='52' viewBox='0 0 120 52'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M-10 14h140' stroke='%232b3f56'/%3E%3Cpath d='M-10 26h140' stroke='%23c9772a'/%3E%3Cpath d='M-10 38h140' stroke='%234d84b3'/%3E%3C/g%3E%3Cg fill='none' stroke-width='1.4' stroke-opacity='.45'%3E%3Cpath d='M-10 11h140' stroke='%23ffffff'/%3E%3Cpath d='M-10 23h140' stroke='%23ffffff'/%3E%3Cpath d='M-10 35h140' stroke='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#eceae4,#f6f5f2);
  background-repeat:repeat-x;background-size:120px 52px, 100% 100%;
  border:1px solid var(--line);
  opacity:.96;
}

/* ikon realistis: ukuran & kesan timbul */
.ikon{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(20,30,45,.16))}
.ikon.besar{width:44px;height:44px}
.ikon.sedang{width:24px;height:24px}
.ikon.kcl{width:19px;height:19px}
.kepercayaan .butir .ikon{width:34px;height:34px}
.kategori-kartu .ikon{width:32px;height:32px}
.kartu .foto .ikon{width:52px;height:52px;opacity:.55}
.pandu .ikon.besar{width:52px;height:52px;opacity:.7}
.daftar-ciri .ikon{width:22px;height:22px;margin-top:1px}
.langkah-pandu .l .ikon{width:26px;height:26px}
.kepala-aksi .ikon{width:19px;height:19px}
.btn .ikon{width:18px;height:18px}
.wa-ambang .ikon{width:22px;height:22px}
footer.toko .ikon{width:26px;height:26px;opacity:.9}

/* lencana kecil bertema listrik pada judul bagian */
.judul-bagian h2{display:flex;align-items:center;gap:10px}


/* ══════════════════════════════════════════════════════════════════════
   ADR-028 — TEMA HIJAU BERGRADASI (permintaan pemilik)
   ══════════════════════════════════════════════════════════════════════ */

/* latar halaman: perpaduan gradasi hijau + jaring teknik hijau */
body{
  background-color:#f3f8f4;
  background-image:
    linear-gradient(rgba(20,83,45,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,83,45,.045) 1px, transparent 1px),
    linear-gradient(160deg,#f7fcf8 0%,#eaf5ed 38%,#e2f1e7 68%,#f4faf6 100%);
  background-size:30px 30px, 30px 30px, 100% 100%;
  background-attachment:fixed, fixed, fixed;
}

/* pita atas: hijau tua bergradasi + jalur kabel */
.topbar{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34' viewBox='0 0 60 34'%3E%3Cg fill='none' stroke-width='1.6'%3E%3Cpath d='M0 9h60' stroke='%23ffffff' stroke-opacity='.08'/%3E%3Cpath d='M0 17h60' stroke='%23ffe08a' stroke-opacity='.14'/%3E%3Cpath d='M0 25h60' stroke='%23a7e0bb' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg,#0f4425 0%,#17643a 50%,#1d7a48 100%);
  color:#dff3e6;
}
.topbar b{color:#fff}
.topbar a{color:#eaffef}

/* kepala toko: putih dengan garis bawah hijau lembut */
header.toko{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%,#fbfefc 100%)}
.merek .nama{color:#14532d}

/* sorotan: panel hijau industri bergradasi */
.hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.4'%3E%3Cpath d='M0 35h35v35h35V35h35M0 105h70V70M140 70v35h-35M35 0v20'/%3E%3C/g%3E%3Cg fill='%23ffe08a' fill-opacity='.20'%3E%3Ccircle cx='35' cy='35' r='3'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3Ccircle cx='105' cy='35' r='3'/%3E%3Ccircle cx='70' cy='105' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(520px 240px at 86% 6%, rgba(255,224,138,.26), transparent 70%),
    linear-gradient(125deg,#0d3b21 0%,#15663a 45%,#1f8a4f 78%,#2aa763 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(13,59,33,.26), inset 0 0 90px rgba(0,0,0,.14);
}
.hero:after{background:rgba(255,255,255,.08)}
.hero .angka div{color:#c9e9d4}
.hero .gambar .panel-ikon{background:rgba(6,38,20,.42);border-color:rgba(255,255,255,.18)}
.hero .gambar .panel-ikon .baris-ikon{background:rgba(255,255,255,.09)}

/* tombol: hijau bergradasi */
.btn{background:linear-gradient(180deg,#1c7a44,#14532d)}
.btn:hover{background:linear-gradient(180deg,#219452,#176037)}
.btn.acc{background:linear-gradient(180deg,#22a355,#15803d)}
.btn.acc:hover{background:linear-gradient(180deg,#2bbd64,#199246)}
.btn.wa{background:linear-gradient(180deg,#25b463,#1f9d55)}
.btn.wa:hover{background:linear-gradient(180deg,#2ecb72,#23b060)}
.btn.garis{background:#fff;color:#14532d;border:1.5px solid var(--line2)}
.btn.garis:hover{background:#f1f9f3;border-color:#1c7a44}
.wa-ambang{background:linear-gradient(180deg,#25b463,#1f9d55)}

/* kartu & kotak: gradasi hijau sangat lembut */
.kartu{background:linear-gradient(180deg,#ffffff 0%,#fbfefc 100%)}
.kartu:hover{box-shadow:var(--sh2);border-color:#bcdcc6}
.kotak{background:linear-gradient(180deg,#ffffff 0%,#fbfefc 100%)}
.kategori-kartu{background:linear-gradient(180deg,#ffffff,#f6fbf7)}
.kategori-kartu:hover{border-color:#1c7a44;background:linear-gradient(180deg,#f4fbf6,#eaf6ee)}
.kepercayaan .butir{background:linear-gradient(180deg,#ffffff,#f8fdf9)}
.pandu{background:linear-gradient(160deg,#f9fdfa,#eef8f1);border-color:#c2d6c8}
.ringkas .r.total{background:linear-gradient(180deg,#f1f9f3,#e8f4ec)}
.pilih.on{border-color:#15803d;background:linear-gradient(180deg,#f2fbf5,#e9f6ee)}
.pilih.on .radius{border-color:#15803d}.pilih.on .radius:after{background:#15803d}
.judul-bagian{border-bottom:1px solid var(--line)}
.judul-bagian h2{color:#14532d}
.harga{color:#14532d}
.lc.navy{background:#e6f4ea;color:#14532d}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#1c7a44;box-shadow:0 0 0 3px rgba(28,122,68,.14)}
.pencari input{background:#f8fdf9}
.pencari input:focus{outline:0;border-color:#1c7a44;box-shadow:0 0 0 3px rgba(28,122,68,.12)}

/* kaki: hijau tua bergradasi */
footer.toko{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.3'%3E%3Cpath d='M0 35h35v35h35V35h35M0 105h70V70'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg,#0b2f1b 0%,#124a2a 55%,#155c34 100%);
  color:#bcdcc6;
}
footer.toko h4{color:#ffffff}
footer.toko a{color:#d6f0dd}
footer.toko .bawah{border-top:1px solid #1d5c37;color:#8db69b}

/* pita kabel: hijau */
.pita-kabel{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='52' viewBox='0 0 120 52'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M-10 14h140' stroke='%23145a30'/%3E%3Cpath d='M-10 26h140' stroke='%2322a355'/%3E%3Cpath d='M-10 38h140' stroke='%237fce9c'/%3E%3C/g%3E%3Cg fill='none' stroke-width='1.4' stroke-opacity='.4'%3E%3Cpath d='M-10 11h140' stroke='%23ffffff'/%3E%3Cpath d='M-10 23h140' stroke='%23ffffff'/%3E%3Cpath d='M-10 35h140' stroke='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#eaf5ed,#f3f8f4);
}

/* ── kotak lebar di bawah foto (keterangan & berat mengisi ruang kosong) ── */
.kotak-lebar{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;width:100%}
.kotak-lebar .kotak{margin:0}
.kotak-lebar .kotak p{line-height:1.75}
@media(max-width:860px){.kotak-lebar{grid-column:1}}

/* ══════════════════════════════════════════════════════════════════════
   KERANJANG SATU LAYAR (ergonomis, tanpa scroll halaman)
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  .lembar{max-width:1180px;width:96vw;height:min(92vh,780px);display:flex;flex-direction:column;overflow:hidden}
  .lembar .badan{padding:0}
  .badan2{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0;flex:1 1 auto;min-height:0}
  .badan2 .kolom{padding:14px 18px;min-height:0;display:flex;flex-direction:column;gap:10px}
  .badan2 .kolom.kiri{border-right:1px solid var(--line);background:#fcfcfb;overflow:hidden}
  .badan2 .kolom.kanan{overflow:auto}
  #isiBarang{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px}
  .lembar .kaki{position:static;border-top:1px solid var(--line);background:#fafaf8;padding:12px 18px;flex:0 0 auto}
  .ringkas .r{padding:7px 12px;font-size:13.5px}
  .lembar .kepala{padding:12px 18px;flex:0 0 auto}
  .lembar .langkah{margin:2px 0 6px}
  .lembar .fld{margin:6px 0}
  .lembar .ringkas .r.total{font-size:15.5px;padding:9px 12px}
  .lembar .ringkas{flex:0 0 auto}
  .badan2 .kolom .pilihan{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:0!important}
  .badan2 .kolom .pilihan .pilih{padding:8px 10px}
  .badan2 .kolom .pilihan .pilih .ket{display:none}
  .lembar .btn.wa.lbr{margin-top:8px;padding:13px}
  .ringkas-isi{font-size:12.5px;color:var(--sub);text-align:center;margin-top:2px}
}
@media(max-width:959px){
  .badan2{display:block}
  .badan2 .kolom{padding:14px 18px}
}

/* bilah bawah tetap: total mendatar + tombol (selalu terlihat) */
@media(min-width:960px){
  .lembar .kaki{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:center;
                border-top:2px solid var(--line);background:#fff;padding:11px 18px!important}
  .lembar .kaki .ringkas{display:flex;gap:16px;border:0;overflow:hidden;flex-wrap:wrap}
  .lembar .kaki .ringkas .r{border:0;padding:0;flex-direction:column;align-items:flex-start;gap:1px;font-size:12px;color:var(--sub)}
  .lembar .kaki .ringkas .r span:last-child{font-size:14.5px;font-weight:800;color:var(--txt)}
  .lembar .kaki .ringkas .r.total{background:none}
  .lembar .kaki .ringkas .r.total span:last-child{font-size:17px;color:#14532d}
  .aksi-pesan .btn.wa{margin:0!important;padding:13px!important}
  .aksi-pesan .ringkas-isi{font-size:11.5px;margin-top:4px;text-align:center}
  #isiBarang{overflow:auto}
}

/* ══ PADAT SATU LAYAR — bilah bawah mendatar + kolom kanan ringkas ══ */
@media(min-width:960px){
  #ringkasPesanan{display:flex!important;gap:18px!important;border:0!important;flex-wrap:wrap}
  #ringkasPesanan .r{border:0!important;padding:0!important;display:flex;flex-direction:column;
                     align-items:flex-start!important;gap:1px;font-size:11.5px!important;color:var(--sub)}
  #ringkasPesanan .r>span:last-child{font-size:14.5px;font-weight:800;color:var(--txt)}
  #ringkasPesanan .r.total{background:none!important}
  #ringkasPesanan .r.total>span:last-child{font-size:17px;color:#14532d}
  .lembar .kaki{padding:10px 18px!important}
  .aksi-pesan .ringkas-isi{font-size:11px;line-height:1.35;margin-top:3px}
  /* kolom kanan: rapatkan agar semua bagian terlihat tanpa menggulir */
  #kolomKanan{gap:6px!important;padding:12px 16px!important}
  #kolomKanan .langkah{margin:2px 0 2px!important}
  #kolomKanan .fld{margin:4px 0!important}
  #kolomKanan input, #kolomKanan select{padding:9px 11px!important;font-size:14px!important}
  #wadahAlamat textarea{height:58px!important;min-height:58px!important;padding:9px 11px!important}
  #wadahAlamat .sub, #wadahAlamat p, #wadahAlamat small{font-size:11.5px!important;margin:2px 0!important;line-height:1.35}
  #wadahAlamat select{margin-bottom:4px!important}
  .pilihan .pilih{padding:7px 9px!important;font-size:12.5px}
  .lembar .kepala h3{font-size:16px}
  .lembar .kepala{padding:10px 18px!important}
  .badan2 .kolom{padding:10px 16px!important}
}

/* ══ PADAT ALAMAT — semua bagian keranjang muat satu layar ══ */
@media(min-width:960px){
  #wadahAlamat{margin-top:2px!important}
  #wadahAlamat label{font-size:11.5px!important;margin-bottom:1px!important;display:block}
  #wadahAlamat input,#wadahAlamat select,#wadahAlamat textarea{
    padding:7px 9px!important;font-size:13.5px!important;margin-bottom:4px!important}
  #wadahAlamat textarea{height:46px!important;min-height:46px!important}
  #wadahAlamat button{padding:6px 10px!important;font-size:12.5px!important;margin-bottom:4px!important}
  #wadahAlamat .sub,#wadahAlamat p,#wadahAlamat small{font-size:11px!important;line-height:1.3!important;margin:1px 0!important}
  #kolomKanan .fld label{font-size:11.5px!important}
  #kolomKanan .langkah{font-size:12px!important}
}

/* ══ FOKUS BARANG PESANAN + opsi bayar rapat ══ */
@media(min-width:960px){
  .badan2{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)!important}
  #isiBarang{min-height:240px!important}
  .pilihan{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:4px!important}
  .pilihan .pilih{padding:7px 9px!important;font-size:12.5px!important;line-height:1.25}
  #alamatLipat[open] summary{margin-bottom:4px}
  #alamatLipat summary::marker{color:#2f7d4f}
}