/* ============================================================
   PLANET JASA — sistem desain v8 (ditulis ulang dari nol)
   Bahasa desain: profesional, tenang, satu warna brand hijau tua
   dengan aksen emas tipis. Ikon SVG garis satu gaya (lihat app.js).
   Semua nama kelas dipertahankan agar app.js tidak berubah.
   ============================================================ */
:root{
  --brand:#0c6b37; --brand-dark:#0a4d27; --brand-deep:#07331b;
  --accent:#d99a26; --wa:#1faa55; --wa-dark:#178a44;
  --ink:#101613; --muted:#5d6a61; --redup:#5d6a61;
  --bg:#f6f7f6; --surface:#ffffff; --line:#e3eae4; --line-kuat:#cfd9d0;
  --tint:#e9f4ed; --tint-2:#f1f6f2;
  --danger:#c62f3b; --amber:#b45309; --amber-bg:#fef6e0;
  --sh:0 1px 2px rgba(13,26,18,.05),0 10px 30px -14px rgba(13,26,18,.16);
  --sh-lg:0 2px 4px rgba(13,26,18,.06),0 24px 44px -18px rgba(13,26,18,.28);
  --r-lg:16px; --r-md:12px; --r-sm:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);padding-bottom:96px;line-height:1.45}
button{font:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}
button:active{transform:scale(.985)}
input,select,textarea{font:inherit;width:100%;padding:12px 14px;border:1px solid var(--line-kuat);border-radius:var(--r-md);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(12,107,55,.15)}
h1{font-size:1.9rem;margin:.15em 0;letter-spacing:-.02em;font-weight:800}
h2{font-size:1.3rem;letter-spacing:-.015em;font-weight:800}
h3{font-size:1.05rem;font-weight:700}
::placeholder{color:#93a198}

.demo-banner{background:var(--amber-bg);color:#7c4a03;font-weight:700;text-align:center;padding:9px 12px;font-size:.85rem;position:sticky;top:0;z-index:60;border-bottom:1px solid #f0dfa8}

/* ---------- Ikon SVG ---------- */
.ic{width:22px;height:22px;flex:none}
.ic-sm{width:15px;height:15px;vertical-align:-2px}
.btn .ic-sm{vertical-align:-2px}

/* ---------- Gerbang ---------- */
.hero{background:linear-gradient(168deg,#0d7040 0%,var(--brand-dark) 58%,var(--brand-deep) 100%);color:#fff;text-align:center;padding:40px 20px 34px;border-radius:0 0 24px 24px;box-shadow:var(--sh-lg)}
.hero-logo{width:88px;height:88px;background:#fff;border-radius:24px;padding:8px;box-shadow:0 14px 28px rgba(0,0,0,.25)}
.hero-tag{font-size:1.02rem;max-width:520px;margin:10px auto 22px;opacity:.92;line-height:1.5}
.hero .btn-wa{background:#fff;color:var(--brand-dark);box-shadow:0 12px 24px rgba(0,0,0,.22)}
.gate-section{padding:22px 16px 2px;max-width:640px;margin:0 auto}
.gate-section h2{margin:6px 0 12px}
.contoh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contoh-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 12px;text-align:center;box-shadow:var(--sh)}
.contoh-ikon{width:52px;height:52px;border-radius:14px;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--brand);border:1px solid #d7e9dc}
.contoh-ikon .ic{width:25px;height:25px}
.contoh-nama{font-weight:700;font-size:.95rem}
.label-contoh{display:inline-block;margin-top:6px;background:var(--amber-bg);color:#92600a;font-size:.7rem;font-weight:700;padding:2px 10px;border-radius:999px;letter-spacing:.02em}
.contoh-note{color:var(--muted);text-align:center;font-size:.9rem}
.benefits{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.98rem}
.benefits li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px 12px 42px;box-shadow:var(--sh);position:relative}
.benefits li::before{content:"✓";position:absolute;left:13px;top:11px;width:19px;height:19px;border-radius:50%;background:var(--tint);color:var(--brand);font-size:.72rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.foot-note{text-align:center;color:var(--muted);padding:14px 10px;font-size:.88rem}

/* ---------- Tombol ---------- */
.btn{border:1px solid transparent;border-radius:var(--r-md);padding:12px 18px;font-weight:700;display:inline-block;text-align:center;text-decoration:none;font-size:.98rem;line-height:1.25}
.btn-xl{font-size:1.05rem;padding:15px 20px;width:100%}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 18px -8px rgba(31,170,85,.55)}
.btn-wa:active{background:var(--wa-dark)}
.btn-primary{background:var(--brand);color:#fff;width:100%;box-shadow:0 8px 18px -8px rgba(12,107,55,.5)}
.btn-primary:active{background:var(--brand-dark)}
.btn-ghost{background:#fff;border-color:var(--line-kuat);color:var(--brand-dark)}
.btn-studio{background:var(--brand-dark);color:#fff;width:100%;margin:12px 0;font-size:.98rem;box-shadow:0 8px 18px -8px rgba(10,77,39,.5)}
.btn-bahaya{background:var(--danger);color:#fff}
.icon-btn{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;display:flex;align-items:center;justify-content:center;color:var(--brand-dark)}
.icon-btn .ic{width:20px;height:20px}

/* ---------- Header aplikasi (putih, bersih) ---------- */
.app-header{background:var(--surface);color:var(--ink);padding:12px 14px 12px;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(13,26,18,.18)}
.header-main{display:flex;justify-content:space-between;align-items:center;gap:10px}
.header-brand{display:flex;align-items:center;gap:10px}
.header-logo{width:38px;height:38px;border-radius:10px;box-shadow:0 3px 8px rgba(13,26,18,.18)}
.header-title{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.header-halo{font-size:.84rem;color:var(--muted)}
.header-btns{display:flex;gap:8px;align-items:center}
.header-btns .btn-ghost{padding:8px 14px;font-size:.9rem}
.search-row{margin-top:11px}
.search-row input{border:1px solid var(--line);background:var(--tint-2);font-size:.98rem;border-radius:var(--r-md);padding:11px 14px;box-shadow:none}
.search-row input:focus{background:#fff}
.radius-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.radius-label{font-weight:700}
.radius-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.chip{border:1px solid var(--line);background:var(--tint-2);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip-filter{font-size:.92rem;padding:8px 14px}

/* ---------- Views & kartu ---------- */
.view{padding:16px;max-width:680px;margin:0 auto}
.view-title{margin:8px 0 12px;font-size:1.28rem}
.view-subtitle{margin-top:24px;font-size:1.05rem}
.view-sub{color:var(--muted)}
.kategori-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kat-btn{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:.72rem;line-height:1.25;color:var(--ink);box-shadow:var(--sh);text-align:center}
.kat-ikon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--brand);border:1px solid #d7e9dc}
.kat-ikon .ic{width:21px;height:21px}
.home-banner{margin:14px 0 2px;background:linear-gradient(160deg,#0d7040,var(--brand-dark) 60%,var(--brand-deep));color:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-lg);border-left:4px solid var(--accent)}
.home-banner-judul{font-size:1.12rem;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.home-banner p{margin:7px 0 13px;opacity:.93;font-size:.93rem;line-height:1.5}
.home-banner-btn{background:#fff;color:var(--brand-dark);width:100%}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.cards{display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.card-atas{display:flex;gap:12px;padding:15px 15px 0;align-items:center}
.card-ikon{width:56px;height:56px;flex:0 0 56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--brand);border:1px solid #d7e9dc}
.card-ikon .ic{width:27px;height:27px}
.card-nama{font-size:1.14rem;font-weight:800;line-height:1.2;letter-spacing:-.015em}
.card-kat{color:var(--muted);font-weight:600;font-size:.87rem}
.card-badges{display:flex;gap:6px;flex-wrap:wrap;padding:10px 15px 0}
.badge{display:inline-flex;align-items:center;gap:4px;background:var(--tint-2);color:#3c5546;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.badge .ic-sm{width:13px;height:13px}
.badge-verif{background:var(--tint);color:var(--brand-dark);border-color:#cfe6d6}
.rating{padding:6px 15px 0;font-weight:700;color:var(--amber);font-size:.9rem}
.rating .baru{color:var(--muted);font-weight:600}
.card-info{padding:7px 15px 0;font-size:.92rem;color:#33473a;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.card-info .titik{color:var(--muted)}
.card-info .ic-sm,.card-paket .ic-sm{color:var(--brand)}
.card-harga{padding:3px 15px 0;font-size:1.04rem;font-weight:800;color:var(--brand-dark)}
.card-paket{padding:3px 15px 0;font-size:.9rem;color:#33473a;display:flex;align-items:center;gap:5px}
.card-aksi{display:flex;gap:8px;padding:13px 15px 15px;align-items:stretch}
.card-aksi .btn-wa{flex:1}
.fav-btn{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:0 13px;box-shadow:none;display:flex;align-items:center;justify-content:center;color:#9db1a3}
.fav-btn .ic{width:21px;height:21px}
.fav-btn.on{color:#e11d48;border-color:#f3c2cd;background:#fdf2f5}
.fav-btn.on .ic{fill:#e11d48}
.kosong{background:#fbfcfb;border:1.5px dashed var(--line-kuat);border-radius:var(--r-lg);padding:22px;text-align:center;color:var(--muted)}

/* ---------- Nav bawah ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:50;box-shadow:0 -8px 24px -14px rgba(13,26,18,.25);padding:5px 4px 7px}
.nav-btn{background:none;border:none;border-radius:12px;padding:5px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#8a988e}
.nav-btn .ic{width:22px;height:22px}
.nav-btn span{font-size:.66rem;font-weight:600}
.nav-btn.active{color:var(--brand-dark)}
.nav-btn.active span{font-weight:800}

/* ---------- Lembar (sheet) ---------- */
.sheet{position:fixed;inset:0;background:rgba(10,20,14,.55);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sheet-card{background:#fff;width:100%;max-width:680px;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:22px 18px 28px;position:relative;box-shadow:var(--sh-lg)}
.sheet-tall{height:88vh}
.sheet-close{position:absolute;top:12px;right:12px;background:var(--tint-2);border:1px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:1.1rem;touch-action:manipulation;z-index:6;cursor:pointer;color:var(--ink)}
.sheet-sub{color:var(--muted)}
.sheet h2,.sheet h3{letter-spacing:-.015em}
.sheet-tutup-bawah{display:block;width:100%;margin-top:16px;padding:14px;border:none;border-radius:var(--r-md);background:var(--ink);color:#fff;font-size:1rem;font-weight:700;touch-action:manipulation;cursor:pointer}
@media(min-width:700px){.sheet{align-items:center}.sheet-card{border-radius:20px}}

/* ---------- Formulir ---------- */
.form{display:grid;gap:12px;margin-top:10px}
.form label{font-weight:600;display:grid;gap:5px;font-size:.95rem}
.form-msg{font-weight:700;min-height:1.2em}
.form-msg.ok{color:var(--brand)} .form-msg.err{color:var(--danger)}

/* ---------- Detail & ulasan ---------- */
.detail-harga{font-size:1.22rem;font-weight:800;color:var(--brand-dark)}
.ulasan-item{border-top:1px solid var(--line);padding:10px 0}
.ulasan-item .bintang{color:#e8a33d;font-size:1.05rem}
.bintang-pilih{display:flex;gap:4px}
.bintang-pilih button{background:none;border:none;font-size:2.1rem;color:#d4dcd5;padding:0}
.bintang-pilih button.on{color:#e8a33d}
.tabel-info{width:100%;border-collapse:collapse}
.tabel-info td{padding:6px 4px;vertical-align:top}
.tabel-info td:first-child{font-weight:600;width:38%;color:var(--muted)}
.paket-box{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;white-space:pre-wrap;font-size:.97rem}
.note-box{background:var(--amber-bg);border:1px solid #f0dfa8;border-radius:var(--r-md);padding:12px 14px;margin:13px 0;font-size:.93rem;line-height:1.5}

/* ---------- Pesan / stepper ---------- */
.stepper{display:flex;align-items:center;gap:16px;justify-content:center;margin:12px 0}
.stepper button{width:52px;height:52px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:1.6rem;font-weight:800;box-shadow:0 8px 16px -8px rgba(12,107,55,.5)}
.stepper .angka{font-size:1.6rem;font-weight:800;min-width:56px;text-align:center}
.total-besar{text-align:center;font-size:1.3rem;font-weight:800;color:var(--brand-dark)}

/* ---------- Admin ---------- */
.admin-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:10px;box-shadow:var(--sh)}
.admin-item .aksi{display:flex;gap:8px;margin-top:10px}
.admin-item .aksi .btn{flex:1}
.status-menunggu{color:var(--amber);font-weight:700}
.status-disetujui{color:var(--brand);font-weight:700}
.status-ditolak{color:var(--danger);font-weight:700}

/* ---------- Studio ---------- */
.studio-tabs{display:flex;gap:8px;margin:12px 0}
.studio-tab{flex:1;border:1px solid var(--line-kuat);background:#fff;color:var(--brand-dark);border-radius:var(--r-md);padding:10px 6px;font-weight:700}
.studio-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.style-row{display:flex;gap:8px;flex-wrap:wrap}
.style-dot{width:42px;height:42px;border-radius:50%;border:3px solid transparent}
.style-dot.active{border-color:var(--ink)}
.canvas-preview{width:100%;max-width:340px;height:auto;border:1px solid var(--line);border-radius:var(--r-lg);display:block;margin:10px auto;box-shadow:var(--sh)}
.kata-item{background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px;margin-bottom:10px;white-space:pre-wrap}
.kata-item .btn{margin-top:8px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-weight:600;z-index:99;max-width:92vw;text-align:center;box-shadow:var(--sh-lg);font-size:.93rem}

/* ---------- Akun Saya ---------- */
.header-brand{display:flex;align-items:center;gap:10px}
.akun-profil{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh);margin-bottom:12px}
.akun-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(150deg,#0d7040,var(--brand-deep));color:#fff;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex:none}
.akun-nama{font-weight:800;font-size:1.02rem}
.akun-hp{color:var(--muted);font-size:.88rem}
.akun-ubah{margin-bottom:12px}
.akun-menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
.akun-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:13px 14px;font-size:.96rem;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.akun-item:last-child{border-bottom:none}
.akun-item .ic{width:20px;height:20px;color:var(--brand)}
.akun-panah{margin-left:auto;color:var(--muted);font-size:1.15rem}
.akun-set{cursor:default}
.akun-bahaya{color:var(--danger)}
.akun-bahaya .ic{color:var(--danger)}
.seg{display:flex;background:var(--tint-2);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto}
.seg-btn{border:none;background:none;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.84rem;color:var(--muted);cursor:pointer}
.seg-btn.active{background:var(--brand);color:#fff}

/* ---------- Mode Ringkas (bawaan; bisa diganti Normal di Akun) ---------- */
body.ringkas{font-size:15px}
body.ringkas .view{padding:12px 12px 84px}
body.ringkas .view-title{font-size:1.18rem;margin:6px 0 10px}
body.ringkas .view-subtitle{font-size:1rem}
body.ringkas .btn{padding:10px 14px;font-size:.93rem}
body.ringkas .btn-xl{padding:12px;font-size:.99rem}
body.ringkas .card-atas{padding:12px 12px 0}
body.ringkas .card-ikon{width:48px;height:48px;flex-basis:48px}
body.ringkas .card-badges,body.ringkas .rating,body.ringkas .card-info,body.ringkas .card-harga,body.ringkas .card-paket{padding-left:12px;padding-right:12px}
body.ringkas .card-aksi{padding:11px 12px 12px}
body.ringkas .home-banner{padding:14px;border-radius:14px}
body.ringkas .home-banner-judul{font-size:1.02rem}
body.ringkas .home-banner p{font-size:.88rem;margin:5px 0 10px}
body.ringkas .btn-studio{padding:10px;font-size:.93rem}
body.ringkas .kat-btn{padding:8px 2px 7px;border-radius:12px}
body.ringkas .kat-ikon{width:36px;height:36px;border-radius:10px}
body.ringkas .kat-ikon .ic{width:19px;height:19px}
body.ringkas .chip{padding:6px 11px;font-size:.85rem}
body.ringkas .app-header{padding:9px 12px}
body.ringkas .header-logo{width:33px;height:33px}
body.ringkas .hero{padding:24px 16px 20px}
body.ringkas .hero h1{font-size:1.5rem}
body.ringkas .hero-logo{width:72px;height:72px}
body.ringkas .hero-tag{font-size:.93rem}
body.ringkas .form input,body.ringkas .form select,body.ringkas .form textarea{padding:9px 11px}
body.ringkas .sheet-card{padding:16px}
body.ringkas .akun-item{padding:11px 12px;font-size:.92rem}
body.ringkas .contoh-ikon{width:46px;height:46px}

/* Atribut hidden harus selalu menang atas display bawaan panel/view */
[hidden]{display:none!important}