.grid{display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.card-visual{height:200px;position:relative;overflow:hidden;background:#e9e2d4}
.card-visual img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:var(--r-pill);padding:6px 11px;font-size:11.5px;font-weight:800;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.badge.gold{background:var(--gold);border-color:var(--gold);color:#1f1a08}
.badge.truck{left:auto;right:12px}
.badge.verif{left:auto;right:12px;background:var(--green);color:#fff;border-color:var(--green)}
.card-body{padding:20px}
.card-body h3{font-size:18px;line-height:1.35}
.meta{color:var(--soft);font-size:13.5px;margin:6px 0;line-height:1.55;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.meta .icon-inline{margin-top:2px}
.price{font-size:20px;font-weight:800;color:var(--green);letter-spacing:-.3px}
.price small{font-size:12.5px;color:var(--soft);font-weight:600}
.price-big{font-size:24px;font-weight:800;color:var(--green);line-height:1.2;letter-spacing:-.4px}
.price-big small{font-size:12.5px;color:var(--soft);font-weight:600}
.per-unit{font-size:14px;color:var(--green);font-weight:700;margin:6px 0 14px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.row .btn{flex:1}
.tag{display:inline-flex;align-items:center;background:var(--green-tint);color:var(--green);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;margin:2px 4px 2px 0}

.detail-visual{height:220px;overflow:hidden;border-radius:var(--r-card);margin:14px 0;background:#e9e2d4}
.detail-visual img{width:100%;height:100%;object-fit:cover;display:block}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px}
.kv b{display:block;font-size:15px;line-height:1.4}
.kv span{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{border-bottom:1px solid var(--line);padding:10px 6px;text-align:left}
td:last-child,th:last-child{text-align:right}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 15px;min-height:48px;background:var(--surface);font:inherit;margin:6px 0}
textarea{min-height:110px;resize:vertical}
label{font-size:13px;font-weight:700}
.form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin:14px 0}
.view{display:none}
.view.active{display:block}

/* Bottom nav: ikon SVG + label + indikator aktif */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.nav button{border:0;background:none;font-size:11px;font-weight:600;color:var(--soft);padding:6px 8px;min-height:56px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color 160ms ease}
.nav button .nav-ic{width:44px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);transition:background-color 160ms ease}
.nav button.on{color:var(--green);font-weight:800}
.nav button.on .nav-ic{background:var(--green-tint)}
.nav button.on::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:1px}

/* Video & moderasi */
.video-box{background:var(--green);color:#fff;border-radius:18px;padding:18px;margin:14px 0}
.video-box .play{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#1f1a08;margin-bottom:10px}
.video-box .play .icon{width:26px;height:26px}
.check{font-size:14px;line-height:1.7}
.check li{margin:5px 0}
footer{color:var(--soft);font-size:12.5px;text-align:center;padding:20px;line-height:1.6}
.stepper{display:flex;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:700;margin:14px 0}
.stepper .step{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:8px 13px;color:var(--soft);display:inline-flex;align-items:center;gap:6px}
.stepper .step.on{background:var(--green);color:#fff;border-color:var(--green)}
.stepper .step.done{background:var(--green-tint);color:var(--green);border-color:var(--green-tint)}
.empty{background:var(--surface);border:1px dashed #d3c294;border-radius:18px;padding:20px;margin:14px 0;line-height:1.6}
.empty p{color:var(--soft);font-size:14px;margin:6px 0 0}
.timeline{margin:16px 0;border-left:2px solid var(--line);padding-left:16px}
.tl{padding:8px 0;color:var(--soft);font-weight:600;display:flex;align-items:center;gap:9px}
.tl.on{color:var(--green);font-weight:800}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto}
.tl.on .tl-dot{background:var(--green)}
.lamp{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot-g{background:#1d6a4a}.dot-y{background:#b98a1e}.dot-r{background:#9a2a20}
.lamp-g{background:#e2f3e6;color:#0e3b2a}.lamp-y{background:#fdf3cf;color:#5c4a1e}.lamp-r{background:#fde3e0;color:#7a1f16}
.modpanel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:16px;padding:16px;margin:14px 0}
.video-vert{background:var(--green);color:#fff;border-radius:20px;padding:20px;margin:14px 0;overflow:hidden;position:relative}
.video-vert img{width:100%;height:170px;object-fit:cover;border-radius:14px;display:block;margin-bottom:14px}
.vv-play{width:54px;height:54px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#1f1a08;margin-bottom:12px}
.vv-play .icon{width:26px;height:26px}
.vv-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill);padding:6px 11px;font-size:11.5px;font-weight:700}
.vscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory}
.vcard{flex:0 0 248px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;scroll-snap-align:start}
.vcard-visual{height:150px;overflow:hidden;position:relative;border-radius:16px;margin-bottom:12px;background:#e9e2d4}
.vcard-visual img{width:100%;height:100%;object-fit:cover;display:block}
.vcard-visual .vv-chip{position:absolute;top:10px;left:10px;background:rgba(14,59,42,.85);border-color:transparent;color:#fff}
.minrow{display:flex;gap:8px;margin-top:12px}
.minbtn{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 8px;min-height:46px;font-size:12.5px;font-weight:700;color:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* Skeleton statis (tanpa animasi berdenyut) */
.skeleton{background:#ece7db;border-radius:12px;min-height:16px}

@media(min-width:700px){
  .grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
  .hero-media{aspect-ratio:21/9}
}
@media(max-width:480px){
  .app{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}
  .topbar{padding:10px 12px}
  .brand small{font-size:11px}
  .hero-body{padding:20px 18px 22px}
  .hero h1{font-size:27px}
  .card-visual{height:180px}
  .detail-visual{height:190px}
  .statrow{gap:8px}
  .stat{padding:13px}
  .stat b{font-size:17px}
  .search input,.search select{flex:1 1 100%}
  .nav button{padding:6px 4px}
}
@media(max-width:380px){
  .kv{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .stat:last-child{grid-column:1/-1}
}

/* v2 minimal: judul kartu bisa diketuk, visual kartu bisa diketuk, pencarian Beranda */
.card-visual{cursor:pointer}
.card-title{border:0;background:none;padding:0;font-size:18px;font-weight:800;letter-spacing:-.2px;line-height:1.35;text-align:left;cursor:pointer;color:var(--ink)}
.home-search .btn{flex:0 0 auto}
.home-search{margin-top:16px}

/* Banner + popup pemeriksa update (version.json vs CURRENT_VERSION) */
.upd-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--gold-tint);border:1px solid #e2d3a8;border-radius:16px;padding:12px 16px;font-size:13.5px;font-weight:700;margin:0 0 14px}
.upd-banner[hidden]{display:none}
.upd-modal{position:fixed;inset:0;z-index:60;background:rgba(14,59,42,.45);display:grid;place-items:center;padding:20px}
.upd-modal[hidden]{display:none}
.upd-card{background:#fff;border-radius:24px;padding:22px;max-width:380px;width:100%;box-shadow:var(--shadow-md)}
.upd-card p{color:var(--soft);font-size:14px;line-height:1.6}
/* Tabel total di layar sempit: geser horizontal, bukan meluber */
#flowTotal{overflow-x:auto}
#flowTotal table{min-width:300px}

/* === v3: bahasa desain Yobana, palet TernakAntar === */
/* Judul serif display besar */
h2{font-family:Fraunces,Georgia,serif;font-size:25px}
h3{font-family:Fraunces,Georgia,serif}
/* Hero foto besar + teks overlay elegan (gradasi hanya penopang keterbacaan) */
.hero{position:relative}
.hero-media{aspect-ratio:16/10;background:var(--green)}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-body{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 22px;color:#fff;background:linear-gradient(to top,rgba(14,59,42,.82),rgba(14,59,42,0))}
.hero-body h1{color:#fff}
.hero-body p{color:rgba(255,255,255,.93)}
/* Kartu foto-kiri: foto + teks + tombol brand penuh di kanan bawah */
.card-h{display:flex;align-items:stretch}
.card-h .card-visual-h{flex:0 0 132px;position:relative;overflow:hidden;background:#e9e2d4;cursor:pointer}
.card-h .card-visual-h img{width:100%;height:100%;object-fit:cover;display:block}
.card-h .card-body{flex:1;min-width:0;padding:16px 16px 18px}
.card-h .card-body .btn-block{margin-top:12px}
@media(max-width:380px){.card-h .card-visual-h{flex-basis:112px}}
/* Menu grid ikon kartu putih bulat */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.menu-item{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 6px;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--green);box-shadow:var(--shadow-sm)}
.menu-item .mic{width:48px;height:48px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center}
.menu-item .icon{width:26px;height:26px}
/* Bottom-nav: pill aktif bordir emas + titik emas, ikon sama besar & jelas */
.nav button{color:#55605a}
.nav .icon{width:26px;height:26px}
.nav button.on .nav-ic{background:var(--green-tint);border:1.5px solid var(--gold)}
.nav button.on::after{width:5px;height:5px;background:var(--gold)}
/* Tombol utama penuh warna brand, besar & empuk */
.btn{min-height:52px;border-radius:16px;font-size:15px}
.btn-sm{min-height:40px}

/* ============ v4 additions ============ */
/* Wajah pemilik — standar utama, clean & elegan */
.owner-row{display:flex;align-items:center;gap:12px}
.owner-text{line-height:1.3}
.owner-text b{font-size:14.5px;color:var(--ink)}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center;border:2px solid var(--gold);background:var(--cream);box-shadow:0 2px 10px rgba(14,59,42,.14);flex:0 0 auto;display:block}
.avatar-sm{width:36px;height:36px}
.avatar-lg{width:76px;height:76px;border-width:2.5px;box-shadow:0 4px 16px rgba(14,59,42,.16)}
.avatar-empty{width:44px;height:44px;border-radius:50%;border:2px dashed #c9c2b2;background:#f3efe6;color:#8a857a;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.avatar-empty svg{width:22px;height:22px}
.owner-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.owner-header h2{font-size:22px}
.owner-role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700}
.face-preview{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center;border:2.5px solid var(--gold);background:var(--cream);box-shadow:0 4px 16px rgba(14,59,42,.16);display:block;margin:12px 0}
/* Kartu: satu sistem foto-kiri */
.card-h{display:flex;gap:14px;padding:14px}
.card-visual-h{width:132px;flex:0 0 auto;border-radius:18px;overflow:hidden;cursor:pointer;background:#efe9dc}
.card-visual-h img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.card-body{flex:1;min-width:0}
.card-title{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:700;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.card-title:hover{text-decoration:underline}
.price-big{font-size:18px;font-weight:800;color:var(--green);margin-top:6px}
.price-big small{font-size:12px;font-weight:600;color:#6b6f66}
.per-unit{font-size:12.5px;color:#6b6f66;margin:2px 0 10px}
.dotline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#6b6f66}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-g{background:#2e8b57}.dot-y{background:#d4a017}.dot-r{background:#c0392b}
.demo-banner{background:#fff7dd;border:1px solid #e6c87a;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 16px}
.empty-state{background:#f7f4ec;border:1px solid #e4ddc8;border-radius:18px;padding:22px 18px;text-align:center;margin:0 0 14px}
.empty-state p{color:#6b6f66;font-size:13.5px;line-height:1.55;margin:6px 0 0}
.warn{background:#fff3f3;border:1px solid #e6b0aa;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 14px}
.oknote{background:#eef7f0;border:1px solid #bcd8c2;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin:0 0 14px}
.field-error{color:#a93226;font-size:13px;margin:6px 0}
.role-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.role-btn{background:#fff;border:1.5px solid #ddd6c2;border-radius:16px;padding:14px;text-align:left;cursor:pointer}
.role-btn b{display:block;font-size:15px;color:var(--ink)}
.role-btn span{font-size:13px;color:#6b6f66}
.detail-visual{border-radius:20px;overflow:hidden;background:#efe9dc}
.detail-visual img{width:100%;height:230px;object-fit:cover;display:block}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.kv>div{background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px;padding:10px 12px}
.kv span{display:block;font-size:12px;color:#6b6f66}
.kv b{font-size:14px;color:var(--ink)}
.video-box{background:#0f3b2c;color:#fdfbf4;border-radius:18px;padding:16px;margin:14px 0;position:relative}
.video-box .play{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.video-box .play svg{width:22px;height:22px}
.vv-chip{display:inline-block;margin-top:10px;font-size:11.5px;border:1px solid var(--gold);color:#e8d9a8;border-radius:999px;padding:3px 9px}
.vcard{background:#fff;border:1px solid #e8e2d0;border-radius:20px;padding:12px;box-shadow:0 4px 18px rgba(14,59,42,.08)}
.vcard-visual{border-radius:14px;overflow:hidden;position:relative;background:#efe9dc}
.vcard-visual img{width:100%;height:150px;object-fit:cover;display:block}
.vcard-visual .vv-chip{position:absolute;left:10px;bottom:10px;background:rgba(15,59,42,.85);color:#fdfbf4;border-color:transparent;margin:0}
.timeline{margin:14px 0 6px;border-left:2px solid #e4ddc8;padding-left:16px}
.tl{position:relative;padding:4px 0;font-size:13.5px;color:#9a9587}
.tl.on{color:var(--ink);font-weight:700}
.tl-dot{position:absolute;left:-22.5px;top:8px;width:11px;height:11px;border-radius:50%;background:#d8d2c0;border:2px solid #fff;box-shadow:0 0 0 1px #d8d2c0}
.tl.on .tl-dot{background:var(--green);box-shadow:0 0 0 1px var(--green)}
.step{display:inline-block;font-size:12.5px;padding:4px 8px;border-radius:999px;background:#f1ede0;color:#6b6f66}
.step.on{background:var(--green);color:#fff}
.step.done{background:#e6efe8;color:var(--green)}
.linkbtn{background:none;border:0;color:var(--green);font-weight:700;cursor:pointer;padding:8px 0;text-align:left;display:block}
.minrow{display:flex;gap:8px;margin-top:10px}
.minbtn{flex:1;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:10px;padding:8px;cursor:pointer;font-size:13px}
.btn-sm{padding:8px 12px;font-size:13px}
@media(min-width:640px){.card-visual-h{width:170px}.detail-visual img{height:300px}}

/* ============ v4 profil gaya IG ============ */
.profil-cover{height:150px;border-radius:20px;overflow:hidden;background:#efe9dc}
.profil-cover img{width:100%;height:100%;object-fit:cover;display:block}
.profil-head{display:flex;align-items:flex-start;gap:16px;margin:-38px 8px 12px;position:relative}
.profil-head h2{font-size:22px;margin:2px 0 4px}
.profil-head .avatar-lg{border:3px solid #fdfbf4}
.profil-stats{display:flex;gap:10px;margin:14px 0}
.stat{flex:1;text-align:center;background:#f7f4ec;border:1px solid #e4ddc8;border-radius:14px;padding:10px 6px}
.stat b{display:block;font-size:17px;color:var(--ink)}
.stat span{font-size:11.5px;color:#6b6f66}
.tabs{display:flex;gap:8px;margin:16px 0 12px;flex-wrap:wrap}
.tab{background:#f1ede0;border:1px solid #e4ddc8;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:13.5px}
.tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feed-item{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#efe9dc}
.feed-item img{width:100%;height:100%;object-fit:cover;display:block}
.feed-tag{position:absolute;left:6px;bottom:6px;font-size:10.5px;background:rgba(15,59,42,.88);color:#fff;border-radius:999px;padding:2px 7px}
.feed-tag.warn{background:rgba(160,115,5,.95)}
.viewer{border-radius:18px;overflow:hidden;background:#0f3b2c;color:#fdfbf4;margin:14px 0}
.viewer img{width:100%;height:220px;object-fit:cover;display:block}
.viewer .feed-tag{position:static}
@media(min-width:640px){.profil-cover{height:190px}.viewer img{height:280px}}

/* ============ v4.1 — perbaikan layout dari screenshot HP user (CSS SAJA) ============
   Akar masalah yang ditemukan di markup/CSS lama (bukan tebakan):
   - Header memakai <img class="logo-img"> dan footer <img class="foot-logo">,
     padahal TIDAK ADA aturan CSS untuk kedua kelas itu (hanya .logo div yang
     diatur) -> logo SVG tampil sebesar bawaan WebView dan mendorong/menumpuk
     teks header. Perbaikan: ukuran eksplisit di bawah.
   - Nav 5 tab meluber di 320px: pill ikon 44px + padding tombol membuat total
     > 320px sehingga tab ke-5 (Akun) jatuh ke luar layar. Perbaikan: tiap tab
     flex:1 1 0 + min-width:0 sehingga tepat 1/5 lebar layar, ikon diperkecil.
   - Badge tanpa white-space: teks panjang membungkus dan menutupi foto.
   - Padding bawah konten (96px) terlalu mepet dengan tinggi nav nyata
     (~78px + safe-area) sehingga kartu terakhir tersembunyi di balik nav.
   Blok ini diletakkan paling akhir supaya menang atas aturan lama. */

/* Pengaman global: tidak ada gambar/SVG yang boleh meluber horizontal */
html,body{overflow-x:clip}
img{max-width:100%}

/* (1) Logo: ukuran eksplisit di semua tempat, tidak pernah raksasa */
.topbar .logo-img{width:44px;height:44px;flex:0 0 auto;display:block;border-radius:12px;object-fit:cover}
.topbar .brand{min-width:0}
.topbar .brand b{overflow-wrap:anywhere}
footer .foot-logo{width:40px;height:40px;flex:0 0 auto;display:inline-block;vertical-align:middle;border-radius:10px;object-fit:cover}
/* (1b) Foto yang gagal muat diganti logo oleh fallback JS: di dalam wadah foto,
   logo itu WAJIB tampil kecil-terpusat di atas hijau, bukan potongan raksasa */
.profil-cover img[src$="logo.svg"],.card-visual-h img[src$="logo.svg"],.card-visual img[src$="logo.svg"],.detail-visual img[src$="logo.svg"],.viewer img[src$="logo.svg"],.feed-item img[src$="logo.svg"]{object-fit:contain;background:var(--green);padding:14px}

/* (2) Bottom-nav: 5 tab SELALU tampil, termasuk di 320px */
.nav{justify-content:space-between;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.nav button{flex:1 1 0;min-width:0;padding:6px 2px;min-height:52px;font-size:11px;white-space:nowrap}
.nav button .nav-ic{width:40px;height:26px}
.nav .icon{width:24px;height:24px}
@media(max-width:360px){
  .nav button{font-size:10px;padding:6px 1px}
  .nav button .nav-ic{width:36px;height:24px}
  .nav .icon{width:22px;height:22px}
}

/* (3) Badge: satu baris pendek, tidak menutupi foto/wajah/nama/harga */
.badge{white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:5px 9px}
.feed-tag{white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;font-size:9.5px;padding:2px 6px}
.lamp{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dotline{white-space:nowrap}
.vcard-visual .vv-chip{white-space:nowrap}

/* (4) Konten tidak boleh tertutup bottom-nav: padding bawah jauh di atas tinggi nav */
.app{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* (5) Nama pemilik di profil: teks TIDAK BOLEH menumpuk di atas foto.
   Avatar tetap menumpang sampul (gaya IG), tapi blok nama dipindah ke area
   terang di bawah sampul, plus scrim tipis di bawah sampul untuk kontras avatar */
.profil-head{margin:0 8px 12px;position:relative;z-index:1}
.profil-head .avatar-lg,.profil-head .avatar-empty{margin-top:-38px}
.profil-head>div{min-width:0;overflow-wrap:break-word}
.profil-head h2{color:var(--ink)}
.profil-cover{position:relative}
.profil-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to top,rgba(14,59,42,.35),rgba(14,59,42,0));pointer-events:none}

/* (6) Sampul profil: rasio foto 16:9 + object-fit cover, bukan kotak raksasa */
.profil-cover{aspect-ratio:16/9;height:auto;max-height:200px;background:var(--green)}
.profil-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:640px){.profil-cover{max-height:240px}}

/* Pengaman teks panjang di kartu/baris pemilik (nama/usaha tidak meluber) */
.owner-row>div,.owner-header>div,.card-body{min-width:0;overflow-wrap:break-word}
.card-h{min-width:0}
.menu-item{text-align:center}
@media(max-width:360px){.menu-item{font-size:11.5px;padding:12px 4px}}

/* ============ v6 — footer profesional (aturan permanen) ============
   UI pengguna TIDAK menampilkan bahasa developer. Di v6 markup tombol
   cache, tautan APK, dan label versi SUDAH DIHAPUS dari aplikasi (bukan
   disembunyikan lewat CSS), jadi tidak ada lagi aturan sembunyi di sini.
   Yang tampil di footer: brand + tagline + Kepercayaan & Keamanan + Bantuan.
   Pembaruan berjalan otomatis dan diam-diam. */

/* ============ v5 — merge: pengaman topbar eksplisit ============
   html,body sudah overflow-x:clip (blok v4.1); topbar berada DI LUAR .app,
   jadi pengaman ini menegaskan topbar sendiri tidak pernah meluber.
   Atribut inline width/height pada logo header mengikuti blok v6
   (38px), supaya header ringkas bahkan bila CSS eksternal telat dimuat. */
.topbar{max-width:100%}

/* ============ v6 — compact + nav selalu di atas + carousel penuh ============
   Standar ringkas (dari screenshot layar Pesan 17:57 WIB): kartu tidak boleh
   memakan setengah layar. Foto kartu ~104px (96px di <=380px), judul kartu
   16px, harga 18px tebal, meta 12.5px, avatar kartu 34px (kecil 32px),
   padding kartu 12px, gap 10-12px, header ringkas (logo 38px, judul 18px,
   tagline 12px satu baris). Tombol utama tetap >=48px agar mudah diketuk.
   Target: minimal 2 kartu produk penuh per tinggi layar HP. Blok ini paling
   akhir supaya menang atas aturan v2-v5. */
.topbar{padding:10px 12px;gap:10px}
.topbar .logo-img{width:38px;height:38px}
.topbar .brand b{font-size:18px}
.topbar .brand small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-body{padding:24px 18px 18px}
.hero h1{font-size:26px}
h2{font-size:22px;margin:20px 0 6px}
.grid{gap:12px}
.menu-grid{gap:10px;margin:12px 0}
.menu-item{min-height:84px;padding:12px 6px}
.card-h{padding:12px;gap:10px}
.card-h .card-visual-h{flex-basis:104px}
.card-visual-h{width:104px}
.card-visual-h img{min-height:120px}
.card-h .card-body{padding:12px 12px 14px}
.card-title{font-size:16px}
.price-big{font-size:18px}
.meta{font-size:12.5px}
.per-unit{margin:2px 0 8px}
.owner-row{gap:10px}
.owner-text b{font-size:13.5px}
.avatar{width:34px;height:34px}
.avatar-sm{width:32px;height:32px}
.avatar-lg{width:64px;height:64px}
.avatar-empty{width:34px;height:34px}
.avatar-empty svg{width:18px;height:18px}
.face-preview{width:80px;height:80px}
.form{padding:14px;margin:12px 0}
.detail-visual{height:190px}
.detail-visual img{height:190px}
.profil-cover{max-height:160px}
.profil-head{margin:0 8px 10px}
.stat{padding:8px 6px}
.stat b{font-size:16px}
.btn{min-height:48px}
/* Carousel Video Profil: kartu terakhir wajib tampil penuh */
.vscroll{padding:4px 20px 16px 2px;scroll-padding-right:20px;gap:12px}
.vcard{flex-basis:220px;padding:12px}
.vcard-visual img{height:130px}
/* Nav: selalu di atas konten apa pun, tidak boleh tertutup overlay/scroll */
.nav{z-index:100;pointer-events:auto}
.nav button{pointer-events:auto}
@media(max-width:380px){
  .card-h .card-visual-h{flex-basis:96px}
  .card-visual-h{width:96px}
}
@media(min-width:640px){
  .card-visual-h{width:120px}
  .detail-visual img{height:240px}
  .hero h1{font-size:30px}
}