/* ==========================================================
   Anadrom -- Toko Online
   Design system: bersih, modern, terinspirasi e-commerce Indonesia
   ========================================================== */

:root{
  --biru: #0857E0;
  --biru-tua: #043FAD;
  --biru-muda: #EAF1FE;
  --biru-pucat: #F5F8FF;
  --oranye: #FF7A1A;
  --teks: #1A1D22;
  --teks-abu: #6B7280;
  --border: #E5E8EC;
  --abu-bg: #F6F7F9;
  --hijau: #17A34A;
  --merah: #E0293E;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font); color:var(--teks); background:var(--abu-bg);
  font-size:14.5px; line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit; font-size:14px;}
.container{max-width:1180px; margin:0 auto; padding:0 18px;}

/* ---------- Topbar promo ---------- */
.topbar{
  background:var(--biru-tua); color:#fff; font-size:12.5px;
  padding:7px 0;
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.topbar-right{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.topbar-menu{display:flex; gap:16px; align-items:center;}
.topbar-menu a{color:#fff; opacity:.85; font-size:12px;}
.topbar-menu a:hover{opacity:1; text-decoration:underline;}
.topbar-menu-sep{color:#fff; opacity:.4; font-size:12px;}
.topbar-social{display:flex; align-items:center; gap:9px;}
.topbar-social-label{opacity:.75; font-size:11.5px;}
.topbar-social a{color:#fff; opacity:.85; display:inline-flex;}
.topbar-social a:hover{opacity:1;}
.cabang-pill{
  display:flex; align-items:center; gap:7px; border:1.5px solid var(--border); border-radius:999px;
  padding:6px 16px 6px 14px; color:var(--biru); flex-shrink:0;
}
.cabang-select{
  border:none; background:none; outline:none; font-size:12.5px; font-weight:600; color:var(--teks);
  padding:0; -webkit-appearance:none; appearance:none;
}

/* ---------- Header ---------- */
.site-header{
  background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow);
}
.header-row{
  display:flex; align-items:center; gap:22px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.brand img.icon{width:34px; height:34px;}
.brand img.wordmark{height:20px;}
.header-search{
  flex:1; position:relative; max-width:560px;
}
.header-search input{
  width:100%; padding:10px 44px 10px 16px; border:1.5px solid transparent; background:var(--abu-bg); border-radius:999px;
  outline:none; transition:border-color .15s, background .15s; color:var(--teks);
}
.header-search input::placeholder{color:var(--teks-abu);}
.header-search input:focus{border-color:var(--biru); background:#fff;}
.header-search button{
  position:absolute; right:4px; top:4px; bottom:4px; width:38px; border:none; background:var(--biru);
  color:#fff; border-radius:999px; display:flex; align-items:center; justify-content:center;
}
.header-actions{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0;}
.header-actions a{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--teks);}
.header-actions a:hover{color:var(--biru);}
/* Poin 23: tombol Masuk/Daftar terpisah di header -- override warna teks generik
   supaya btn-primary (Daftar) tetap putih & btn-outline (Masuk) tetap biru. */
.header-actions a.btn{gap:0;}
.header-actions a.btn-primary, .header-actions a.btn-primary:hover{color:#fff;}
.header-actions a.btn-outline, .header-actions a.btn-outline:hover{color:var(--biru);}
.cart-badge{
  position:relative; display:inline-flex;
}
.cart-badge .count{
  position:absolute; top:-8px; right:-10px; background:var(--merah); color:#fff; font-size:10.5px;
  font-weight:700; border-radius:999px; min-width:17px; height:17px; display:flex; align-items:center;
  justify-content:center; padding:0 4px;
}
.material-symbols-outlined{font-variation-settings:'FILL' 1;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg, var(--biru) 0%, var(--biru-tua) 100%);
  border-radius:var(--radius); margin:20px auto 0; max-width:1180px;
  display:flex; align-items:center; overflow:hidden; color:#fff; position:relative;
}
.hero-text{padding:36px 40px; max-width:56%;}
.hero-text .eyebrow{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.85; font-weight:700;
}
.hero-text h1{font-size:30px; margin:8px 0 10px; line-height:1.25;}
.hero-text p{margin:0 0 20px; font-size:14.5px; opacity:.9;}
.hero-text .btn{background:#fff; color:var(--biru); font-weight:700;}
.hero-maskot{margin-left:auto; padding-right:24px; flex-shrink:0;}
.hero-maskot img{width:150px;}

/* ---------- Poin 24: Banner utama beranda (hero carousel, dikelola /acc) ---------- */
/* Update Fitur Lanjutan 6 (Poin 7): radius diperbesar & ditegaskan di tiap lapisan
   (track + slide + img) supaya sudut benar-benar terlihat rounded, tidak tajam,
   di semua browser -- tidak hanya mengandalkan clip dari container terluar. */
.hero-banner-carousel{
  position:relative; border-radius:20px; margin:20px auto 0; max-width:1180px;
  overflow:hidden; background:var(--abu-bg);
}
.hbc-track{position:relative; width:100%; aspect-ratio:1180/380; border-radius:20px; overflow:hidden;}
.hbc-slide{position:absolute; inset:0; display:none; overflow:hidden; border-radius:20px;}
.hbc-slide.active{display:block; animation:fadeSlide .5s ease;}
.hbc-slide a{display:block; width:100%; height:100%;}
.hbc-slide img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; border-radius:20px;
}
.hero-banner-carousel:hover .hbc-slide.active img{transform:scale(1.04);}
.hbc-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:2;}
.hbc-dots span{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer;
  transition:background .2s, transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.hbc-dots span:hover{transform:scale(1.2);}
.hbc-dots span.active{background:#fff;}
@media (max-width: 780px){
  .hbc-track{aspect-ratio:4/3;}
}

/* ---------- Update Fitur Lanjutan 10: banner beranda diperkecil, ditaruh
   di samping mega-menu PrintCustom (gaya "Pilih Kategori" GajahPrint) ---------- */
.hero-top-row{
  display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:stretch; margin:20px auto 0; max-width:1180px;
}
.hero-top-row .hero-banner-carousel{margin:0; max-width:none; min-width:0;}
.hero-top-row .hero-banner-carousel .hbc-track{aspect-ratio:auto; height:100%; min-height:300px;}
/* Update Fitur Lanjutan 12: tinggi kotak banner di sini mengikuti tinggi menu
   Kategori di sampingnya (bukan rasio asli gambar 1180x380px) -- supaya gambar
   tidak kepotong (object-fit:cover sebelumnya memotong sisi kiri/kanan), gambar
   ditampilkan penuh (object-fit:contain) dengan latar mengisi sisa ruang. */
.hero-top-row .hbc-slide img{object-fit:contain; background:var(--abu-bg);}
.hero-top-row .hero{margin:0; max-width:none; height:100%;}
/* Update Fitur Lanjutan 11: panel Kategori di KIRI, banner di KANAN (desktop
   saja -- lewat "order", bukan ubah urutan HTML, supaya di HP tetap banner
   duluan seperti sebelumnya tanpa perlu markup terpisah). */
@media (min-width: 901px){
  .hero-top-row .ptc-menu{order:1;}
  .hero-top-row .hero-banner-carousel, .hero-top-row .hero{order:2;}
}
@media (max-width: 900px){
  .hero-top-row{grid-template-columns:1fr; max-width:100%;}
  .hero-top-row .hero-banner-carousel .hbc-track{aspect-ratio:4/3; height:auto;}
}

/* ---------- Update Fitur Lanjutan 11: Produk Unggulan disejajarkan dengan
   Printmart (2 kolom), terpisah dari blok PrintCustom+banner di atas. ---------- */
.unggulan-printmart-row{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
.unggulan-printmart-row.single-col{grid-template-columns:1fr;}
.unggulan-printmart-row .printmart-section{border-top:none; padding-top:0;}
/* Update Fitur Lanjutan 12: Printmart digeser ke KIRI, Produk Unggulan ke KANAN --
   lewat "order" (bukan ubah urutan HTML) supaya di HP urutannya tetap Produk
   Unggulan dulu baru Printmart di bawahnya seperti sebelumnya. */
@media (min-width: 901px){
  .unggulan-printmart-row .printmart-col{order:1;}
  .unggulan-printmart-row .unggulan-col{order:2;}
}
@media (max-width: 900px){
  .unggulan-printmart-row{grid-template-columns:1fr; gap:28px;}
}

/* ---------- Update Fitur Lanjutan 10: mega-menu PrintCustom (beranda) --
   panel vertikal kategori utama, hover/klik salah satu item membuka panel
   isi di sebelah kanan (flyout CSS murni, tanpa JS animasi buka-tutup). ---------- */
.ptc-menu{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:8px;
  display:flex; flex-direction:column; gap:1px; overflow:visible;
}
.ptc-menu-title{
  display:flex; align-items:center; gap:8px; padding:8px 12px 10px; font-size:13px; font-weight:700;
  color:var(--teks); border-bottom:1px solid var(--border); margin-bottom:4px;
}
.ptc-menu .ptc-all{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--teks);
}
.ptc-menu .ptc-all:hover, .ptc-menu .ptc-all.active{background:var(--biru-muda); color:var(--biru);}

.ptc-item{position:relative;}
.ptc-item > a, .ptc-item > .ptc-label{
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 12px;
  border-radius:8px; font-size:13px; color:var(--teks); cursor:pointer;
}
.ptc-item > a:hover, .ptc-item:hover > .ptc-label{background:var(--abu-bg);}
.ptc-caret{display:inline-flex; color:var(--teks-abu); flex-shrink:0;}

.ptc-panel{
  /* Update Fitur Lanjutan 12: panel dibuka ke KANAN (bukan kiri lagi) --
     sejak menu "Kategori" dipindah ke sisi KIRI halaman (sebelah banner) di
     Batch 11, membuka ke kiri malah terpotong tepi layar. Lebar mengikuti
     konten (width:max-content) supaya tidak ada white space kosong berlebih
     di item yang teksnya pendek, dibatasi max-width supaya tetap rapi kalau
     ada teks panjang. */
  display:none; position:absolute; left:100%; right:auto; top:-9px; width:max-content; min-width:180px; max-width:280px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:8px; z-index:30; flex-direction:column; gap:1px; margin-left:6px;
}
.ptc-panel .ptc-panel{margin-left:6px;}
.ptc-item:hover > .ptc-panel,
.ptc-item:focus-within > .ptc-panel,
.ptc-item.ptc-touch-open > .ptc-panel{
  display:flex;
}
.ptc-panel .ptc-item > a, .ptc-panel .ptc-item > .ptc-label{padding:8px 10px; font-size:12.5px;}

@media (max-width: 900px){
  .ptc-menu{max-height:none;}
  .ptc-panel{position:static; box-shadow:none; border:none; padding:2px 0 2px 16px; display:none !important;}
  .ptc-item.ptc-touch-open > .ptc-panel{display:flex !important;}
}

/* ---------- Update Fitur Lanjutan 10: section Printmart beranda -- terpisah
   dari PrintCustom, langsung terbuka ke isi 1 kategori (tab pill di atas grid). ---------- */
.printmart-section{border-top:1px solid var(--border); padding-top:32px;}
.printmart-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; overflow-x:auto;}
.printmart-tab{
  padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--teks);
  background:var(--abu-bg); white-space:nowrap; flex-shrink:0;
}
.printmart-tab:hover{background:var(--biru-muda); color:var(--biru);}
.printmart-tab.active{background:var(--biru); color:#fff;}

/* ---------- Update Fitur Lanjutan 10: accordion PrintCustom di halaman
   Kategori (sidebar) -- native <details>, tanpa JS toggle/animasi. ---------- */
.kat-accordion summary{
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 12px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:var(--teks); cursor:pointer; list-style:none;
}
.kat-accordion summary::marker, .kat-accordion summary::-webkit-details-marker{display:none;}
.kat-accordion summary:hover{background:var(--abu-bg);}
.kat-accordion-caret{display:inline-flex; color:var(--teks-abu); transition:transform .15s; flex-shrink:0;}
.kat-accordion[open] > summary .kat-accordion-caret{transform:rotate(180deg);}
.kat-accordion-body{padding-left:14px; display:flex; flex-direction:column; gap:1px; margin-top:1px;}
.kat-leaf{display:block; padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--teks);}
.kat-leaf:hover{background:var(--abu-bg);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 22px; border-radius:9px; border:none; font-size:14px; font-weight:600;
  transition:all .15s; text-align:center;
}
.btn-primary{background:var(--biru); color:#fff;}
.btn-primary:hover{background:var(--biru-tua);}
.btn-outline{background:#fff; color:var(--biru); border:1.5px solid var(--biru);}
.btn-outline:hover{background:var(--biru-muda);}
.btn-block{width:100%;}
.btn-lg{padding:14px 26px; font-size:15px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Section heading ---------- */
.section{padding:34px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.section-head h2{font-size:19px; margin:0;}
.section-head a{font-size:13px; color:var(--biru); font-weight:600;}

/* ---------- Kategori sidebar vertikal ala Shopee (Beranda & halaman Kategori) ---------- */
.shop-layout{display:grid; grid-template-columns:224px 1fr; gap:22px; align-items:start;}
.kat-sidebar{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:8px;
  position:sticky; top:78px; display:flex; flex-direction:column; gap:2px;
}
.kat-sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:var(--teks);
}
.kat-sidebar a:hover{background:var(--abu-bg);}
.kat-sidebar a.active{background:var(--biru-muda); color:var(--biru); font-weight:700;}
.kat-sidebar-group-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--teks-abu); padding:12px 12px 4px; margin-top:4px;
}
.kat-sidebar-group-label:first-of-type{margin-top:2px;}

/* ---------- Update Fitur Lanjutan 6 (Poin 8): PrintCustom / Printmart flyout ---------- */
.kat-flyout-group{margin-top:6px;}
.kat-flyout-head{
  display:flex; align-items:center; justify-content:space-between; padding:9px 12px;
  border-radius:9px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--teks-abu); cursor:pointer; user-select:none;
}
.kat-flyout-head:hover{background:var(--abu-bg); color:var(--teks);}
.kat-flyout-caret{transition:transform .18s ease; display:inline-flex;}
.kat-flyout-open .kat-flyout-caret{transform:rotate(180deg);}
.kat-flyout-list, .kat-flyout-more{display:none; flex-direction:column; gap:2px;}
.kat-flyout-open .kat-flyout-list, .kat-flyout-open .kat-flyout-more{display:flex;}
.kat-pinned{font-weight:700; color:var(--biru); background:var(--biru-muda);}
.kat-pinned:hover{background:var(--biru-muda);}
@media (max-width: 780px){
  .kat-flyout-group{display:flex; flex-direction:row; align-items:center; gap:6px; flex-shrink:0;}
  .kat-flyout-head{white-space:nowrap; flex-shrink:0;}
  .kat-flyout-caret{display:none;}
  .kat-flyout-list, .kat-flyout-more{display:flex; flex-direction:row; flex-wrap:nowrap;}
  .kat-pinned{white-space:nowrap; flex-shrink:0;}
}
.badge-siap-jual{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px;
  background:#e6fbf7; color:#0a8f74; font-size:10.5px; font-weight:700; vertical-align:middle;
}
.shop-content{min-width:0;}
.shop-content .section-head:first-child{margin-top:0;}
@media (max-width: 780px){
  .shop-layout{grid-template-columns:1fr;}
  .kat-sidebar{
    position:static; flex-direction:row; overflow-x:auto; gap:6px; scrollbar-width:none;
  }
  .kat-sidebar::-webkit-scrollbar{display:none;}
  .kat-sidebar a{white-space:nowrap; flex-shrink:0;}
}

/* ---------- Product grid ---------- */
.produk-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px;
}
.produk-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column;
}
.produk-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.produk-card .thumb{
  aspect-ratio:1/1; background:var(--biru-pucat); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.produk-card .thumb img{width:100%; height:100%; object-fit:cover;}
.produk-card .thumb .ph{font-size:40px; color:var(--biru); opacity:.35;}
.badge-unggulan{
  position:absolute; top:8px; left:8px; background:var(--oranye); color:#fff; font-size:10.5px;
  font-weight:700; padding:3px 8px; border-radius:999px;
}
.produk-card .info{padding:12px 13px 14px; flex:1; display:flex; flex-direction:column;}
.produk-card .kategori-label{font-size:11px; color:var(--teks-abu); margin-bottom:3px;}
.produk-card h3{font-size:13.5px; margin:0 0 8px; font-weight:600; line-height:1.35; flex:1;}
.produk-card .harga{font-size:15px; font-weight:700; color:var(--biru);}
.produk-card .harga small{font-size:11px; font-weight:400; color:var(--teks-abu);}
.harga-coret-card{font-size:11.5px; color:var(--teks-abu); text-decoration:line-through; margin-bottom:1px;}

/* ---------- Carousel Produk Unggulan ---------- */
.carousel-wrap{position:relative;}
.carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding:2px 2px 8px; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .produk-card{flex:0 0 200px; scroll-snap-align:start;}
.carousel-btn{
  position:absolute; top:calc(50% - 10px); transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-md); color:var(--biru);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.carousel-btn:hover{background:var(--biru-muda);}
.carousel-btn.prev{left:-6px;}
.carousel-btn.next{right:-6px;}
@media (max-width: 620px){
  .carousel-btn{display:none;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:12.5px; color:var(--teks-abu); margin:16px 0;}
.breadcrumb a{color:var(--teks-abu);}
.breadcrumb a:hover{color:var(--biru);}

/* ---------- Product detail ---------- */
.produk-detail{display:grid; grid-template-columns:400px 1fr; gap:36px;}
.produk-detail .foto-wrap{display:flex; flex-direction:column; gap:10px;}
.produk-detail .foto{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.produk-detail .foto img{width:100%; height:100%; object-fit:cover;}
.produk-detail .foto .ph{font-size:90px; color:var(--biru); opacity:.3;}
/* Poin 27: thumbnail galeri foto produk (klik utk ganti gambar besar) */
.foto-galeri-thumb{display:flex; gap:8px; flex-wrap:wrap;}
.foto-galeri-thumb img{
  width:64px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid var(--border); transition:border-color .15s;
}
.foto-galeri-thumb img:hover{border-color:var(--biru-muda);}
.foto-galeri-thumb img.active{border-color:var(--biru);}
.produk-detail h1{font-size:22px; margin:0 0 8px;}
.produk-detail .harga-detail{font-size:26px; font-weight:700; color:var(--biru); margin:12px 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.produk-detail .harga-detail small{font-size:13px; font-weight:400; color:var(--teks-abu);}
.produk-detail .harga-coret{font-size:15px; font-weight:400; color:var(--teks-abu); text-decoration:line-through;}
.grosir-box{background:var(--biru-pucat); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin:0 0 16px;}
.grosir-tabel{width:100%; border-collapse:collapse; margin-top:6px;}
.grosir-tabel td{font-size:12.5px; padding:3px 0; color:var(--teks);}
.grosir-tabel td:last-child{text-align:right; font-weight:600; color:var(--biru);}
.grosir-tier-row{display:flex; gap:10px; align-items:center; margin-bottom:8px;}
.grosir-tier-row input{width:auto; flex:1;}

/* ---------- Kalkulator Cetak Custom ---------- */
.kalkulator-box{background:var(--abu-bg); border:1px solid var(--border); border-radius:10px; padding:14px; margin:0 0 18px;}
.kalkulator-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.kalkulator-row label{font-size:11.5px; color:var(--teks-abu); display:block; margin-bottom:4px;}
.kalkulator-row input{font-size:13px;}
.produk-detail .deskripsi{color:var(--teks-abu); line-height:1.7; margin:14px 0 22px; white-space:pre-line;}
.qty-box{display:flex; align-items:center; border:1.5px solid var(--border); border-radius:9px; width:fit-content;}
.qty-box button{width:38px; height:40px; background:none; border:none; font-size:18px; color:var(--biru);}
.qty-box input{width:50px; text-align:center; border:none; outline:none; font-size:14px;}
.varian-opsi{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px;}
.varian-opsi label{
  border:1.5px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer;
}
.varian-opsi input{display:none;}
.varian-opsi input:checked + span{color:var(--biru); font-weight:700;}
.varian-opsi label:has(input:checked){border-color:var(--biru); background:var(--biru-muda);}
.detail-actions{display:flex; gap:12px; margin-top:20px;}

/* ---------- Cards / panels generic ---------- */
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px;}

/* ---------- Cart page ---------- */
.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start;}
.cart-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.cart-item .thumb{width:70px; height:70px; border-radius:8px; background:var(--biru-pucat); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.cart-item .thumb img{width:100%; height:100%; object-fit:cover;}
.cart-item .body{flex:1; min-width:0;}
.cart-item .body h4{margin:0 0 4px; font-size:13.5px;}
.cart-item .varian{font-size:12px; color:var(--teks-abu); margin-bottom:6px;}
.cart-item .row-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.cart-item .hapus{color:var(--merah); font-size:12.5px;}
.summary-row{display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; color:var(--teks-abu);}
.summary-row.total{font-size:16px; font-weight:700; color:var(--teks); border-top:1px solid var(--border); padding-top:14px; margin-top:6px;}
.empty-state{text-align:center; padding:60px 20px; color:var(--teks-abu);}
.empty-state .material-symbols-outlined{font-size:56px; opacity:.3;}

/* Update Fitur Lanjutan 13 (Poin 10): kotak pencarian generik untuk halaman daftar
   (Pesanan, Penjualan, Pembelian, Biaya, Job Order & QC, Data Desain, Kantin, dst) --
   dipasangkan dengan filter JS di main.js (.js-table-search). */
.tbl-search-wrap{position:relative; max-width:320px; margin-bottom:14px;}

.tbl-search-wrap .material-symbols-outlined, .tbl-search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--teks-abu); pointer-events:none;}
.js-table-search{width:100%; padding:9px 13px 9px 36px !important; border:1.5px solid var(--border); border-radius:8px; outline:none; font-size:13.5px;}
.js-table-search:focus{border-color:var(--biru);}

/* Update Fitur Lanjutan 14: bar pagination ala Mekari Jurnal (Baris per halaman +
   Menampilkan X-Y dari Z + navigasi halaman), dipakai di paginasiHtml() (app/helpers.php). */
.paginasi-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:12.5px; color:var(--teks-abu);}
.paginasi-perhalaman{display:flex; align-items:center; gap:8px;}
.paginasi-perhalaman select{padding:5px 8px; border:1.5px solid var(--border); border-radius:6px; font-size:12.5px;}
.paginasi-nav{display:flex; align-items:center; gap:8px;}
.paginasi-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1.5px solid var(--border); border-radius:6px; color:var(--teks);}
.paginasi-btn:hover{background:var(--abu-bg);}
.paginasi-btn.disabled{opacity:.35; pointer-events:none;}

/* Update Fitur Lanjutan 14: kartu "Perlu Perhatian" di Dashboard -- netral secara
   default, jadi kuning/oranye (dash-alert-on) kalau ada yang butuh tindakan. */
.dash-alert-card{display:block; padding:12px 14px; border-radius:10px; background:var(--abu-bg); border:1.5px solid var(--border); text-decoration:none; color:inherit; transition:background .15s;}
.dash-alert-card:hover{background:#eef1f5;}
.dash-alert-card.dash-alert-on{background:#FEF3E2; border-color:#F6E2BE;}
.dash-alert-card.dash-alert-on:hover{background:#FCEAC9;}
.dash-alert-num{font-size:19px; font-weight:700;}
.dash-alert-label{font-size:11.5px; color:var(--teks-abu); margin-top:3px; line-height:1.3;}

/* Update Fitur Lanjutan 14: Laporan lengkap/efektif/efisien/terpadu -- tombol "Cetak /
   Export Laporan" (window.print()), sembunyikan sidebar/topbar & filter pas print,
   biar hasil cetak cuma isi laporannya saja. */
.print-only{display:none;}
@media print{
  .admin-sidebar, .admin-topbar, .no-print, .internal-chat-btn, .internal-chat-panel, .chat-contact-overlay{display:none !important;}
  .admin-main{padding:0 !important; width:100% !important;}
  .admin-shell{display:block !important;}
  .print-only{display:block !important;}
  .card{box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid;}
}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:8px; outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--biru);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
/* Update Fitur Lanjutan 6 (Poin 6): grid 3 kolom -- dipakai buat memadatkan
   form Penjualan (Jurnal-style) jadi 3 baris saja sebelum tabel item. */
.form-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.radio-card{display:flex; align-items:center; gap:10px; border:1.5px solid var(--border); border-radius:9px; padding:12px 14px; margin-bottom:10px; cursor:pointer;}
.radio-card:has(input:checked){border-color:var(--biru); background:var(--biru-muda);}

/* ---------- Password show/hide ---------- */
.password-wrap{position:relative;}
.password-wrap input{padding-right:42px !important;}
.toggle-password{position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; padding:8px; color:var(--teks-abu); display:flex; cursor:pointer;}
.toggle-password:hover{color:var(--biru);}

/* ---------- Cek Ongkir (checkout) ---------- */
.ongkir-box{display:flex; gap:10px; margin-bottom:6px;}
.ongkir-box input{flex:1;}
.btn-sm{padding:9px 16px; font-size:13px; white-space:nowrap;}
.kurir-list{margin-top:12px;}
.kurir-option{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1.5px solid var(--border); border-radius:9px; padding:10px 13px; margin-bottom:8px; cursor:pointer; font-size:13.5px;}
.kurir-option:has(input:checked){border-color:var(--biru); background:var(--biru-muda);}
.kurir-option .kurir-nama{font-weight:600;}
.kurir-option .kurir-etd{color:var(--teks-abu); font-size:12px;}
.kurir-option .kurir-harga{font-weight:700; color:var(--biru);}
.ongkir-status{font-size:12.5px; color:var(--teks-abu); margin:4px 0 0;}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px; border-radius:9px; font-size:13.5px; margin-bottom:16px;}
.alert-success{background:#E7F6EC; color:var(--hijau); border:1px solid #C6E7D0;}
.alert-error{background:#FCE9EC; color:var(--merah); border:1px solid #F4CDD3;}
.alert-info{background:var(--biru-muda); color:var(--biru-tua); border:1px solid #C9DDFB;}

/* ---------- Order status badges ---------- */
.status-pill{display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700;}
.status-Baru{background:#FDF3E7; color:#B4740E;}
.status-Diverifikasi{background:var(--biru-muda); color:var(--biru-tua);}
.status-Diproses{background:#FDF3E7; color:#B4740E;}
.status-Dikirim{background:#E9F0FF; color:var(--biru);}
.status-Selesai{background:#E7F6EC; color:var(--hijau);}
.status-Batal{background:#FCE9EC; color:var(--merah);}
.pay-Menunggu{background:#FEF3E2; color:#B45309;}
.pay-Sebagian{background:#FEF3E2; color:#B45309;}
.pay-Lunas{background:#E7F6EC; color:var(--hijau);}
.pay-Batal{background:#FCE9EC; color:var(--merah);}
.row-overdue{background:#FCE9EC;}

/* ---------- Footer ---------- */
.site-footer{background:#101828; color:#B7BFCB; margin-top:60px; padding:44px 0 24px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px;}
.footer-grid h4{color:#fff; font-size:14px; margin:0 0 14px;}
.footer-grid p, .footer-grid a{font-size:13px; line-height:2; color:#9AA4B2;}
.footer-grid a:hover{color:#fff;}
.footer-brand{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.footer-brand img{height:22px;}
.footer-badges{
  display:flex; flex-wrap:wrap; gap:26px; padding-top:26px; margin-top:26px; border-top:1px solid #263041;
}
.footer-badge-group{display:flex; align-items:center; flex-wrap:wrap; gap:9px;}
.footer-badge-label{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#fff; margin-right:2px;}
.footer-badge-item{
  font-size:11.5px; color:#B7BFCB; background:#1B2434; border:1px solid #2A3548; border-radius:999px;
  padding:4px 11px;
}
.footer-bottom{border-top:1px solid #263041; margin-top:30px; padding-top:18px; font-size:12px; text-align:center; color:#7C8698;}

/* ---------- Modal Daftar (animasi + panel promo + blur backdrop) ---------- */
.daftar-page-bg{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative;
  overflow:hidden; background:linear-gradient(135deg, var(--biru-tua) 0%, var(--biru) 55%, #06215c 100%);
}
.daftar-page-bg::before, .daftar-page-bg::after{
  content:''; position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; z-index:0;
}
.daftar-page-bg::before{width:420px; height:420px; background:var(--oranye); top:-120px; left:-100px;}
.daftar-page-bg::after{width:380px; height:380px; background:#00C2FF; bottom:-140px; right:-90px;}
@keyframes modalIn{
  from{opacity:0; transform:translateY(18px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.daftar-modal{
  position:relative; z-index:1; background:#fff; border-radius:20px; max-width:820px; width:100%;
  display:flex; overflow:hidden; box-shadow:0 20px 60px rgba(3,15,45,.45); animation:modalIn .4s cubic-bezier(.2,.8,.3,1);
}
.daftar-promo{
  flex:0 0 42%; background:linear-gradient(155deg, var(--biru-tua), var(--biru)); color:#fff; padding:34px 28px;
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.daftar-promo .tag{font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.75; font-weight:700; margin-bottom:10px;}
.promo-slide{display:none; animation:fadeSlide .5s ease;}
.promo-slide.active{display:block;}
.promo-slide h3{font-size:20px; margin:0 0 10px; line-height:1.35;}
.promo-slide p{font-size:13px; opacity:.85; line-height:1.6; margin:0;}
@keyframes fadeSlide{from{opacity:0; transform:translateX(10px);} to{opacity:1; transform:translateX(0);}}
.promo-dots{display:flex; gap:6px; margin-top:22px;}
.promo-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .2s;}
.promo-dots span.active{background:#fff;}
.daftar-form-panel{flex:1; padding:34px 32px; position:relative; min-width:0;}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none;
  background:var(--abu-bg); color:var(--teks-abu); display:flex; align-items:center; justify-content:center; z-index:2;
}
.modal-close:hover{background:var(--border); color:var(--teks);}
@media (max-width: 720px){
  .daftar-modal{flex-direction:column; max-width:420px;}
  .daftar-promo{padding:22px 24px;}
}

/* ---------- Poin 22: panel brand modal Login (maskot + logo + tagline) ---------- */
.login-brand-panel{align-items:center; text-align:center; gap:6px;}
.login-maskot{width:120px; height:auto; margin-bottom:14px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));}
.login-brand-nama{display:flex; align-items:center; gap:9px; font-size:24px; font-weight:800; letter-spacing:.01em;}
.login-brand-icon{width:32px; height:32px;}
.login-brand-tagline{font-size:13px; opacity:.85; margin:8px 0 0; letter-spacing:.02em;}
@media (max-width: 720px){
  .login-maskot{width:90px;}
}

/* ---------- Halaman statis (Tentang Kami, Cara Order, Karir, FAQ) ---------- */
.static-page h1{font-size:24px; margin:0 0 6px;}
.static-page .lead{color:var(--teks-abu); margin:0 0 28px; font-size:14.5px;}
.static-page .card{margin-bottom:16px;}
.langkah-list{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.langkah-list li{display:flex; gap:16px; align-items:flex-start;}
.langkah-list .no{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--biru-muda); color:var(--biru);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.langkah-list h4{margin:0 0 4px; font-size:14.5px;}
.langkah-list p{margin:0; color:var(--teks-abu); font-size:13.5px;}
.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{transition:transform .15s; color:var(--teks-abu); flex-shrink:0;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item p{color:var(--teks-abu); margin:10px 0 0; font-size:13.5px; line-height:1.7;}
.karir-posisi{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin:18px 0;}
.karir-posisi .item{border:1px solid var(--border); border-radius:10px; padding:14px; font-size:13px;}
.karir-posisi .item strong{display:block; margin-bottom:4px; font-size:13.5px;}

/* ---------- Login/Daftar dengan Google ---------- */
.divider-atau{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--teks-abu); font-size:12px;}
.divider-atau::before, .divider-atau::after{content:''; flex:1; height:1px; background:var(--border);}
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px;
  border:1.5px solid var(--border); border-radius:9px; font-size:13.5px; font-weight:600; color:var(--teks);
  background:#fff;
}
.btn-google:hover{background:var(--abu-bg);}

/* ---------- Notifikasi status pesanan ---------- */
.notif-list{list-style:none; margin:0; padding:0;}
.notif-item{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-ic{
  width:36px; height:36px; border-radius:50%; background:var(--biru-muda); color:var(--biru); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.notif-body{flex:1; min-width:0;}
.notif-body p{margin:0 0 4px; font-size:13.5px;}
.notif-time{font-size:11.5px; color:var(--teks-abu);}
.notif-link{font-size:12.5px; color:var(--biru); font-weight:600; flex-shrink:0;}

/* ---------- Table (admin/akun) ---------- */
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
table.tbl th{text-align:left; padding:10px 12px; background:var(--abu-bg); font-weight:600; color:var(--teks-abu); border-bottom:1px solid var(--border);}
table.tbl td{padding:12px; border-bottom:1px solid var(--border);}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero-text{max-width:100%; padding:26px 22px;}
  .hero-maskot{display:none;}
  .produk-detail{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .form-row-3{grid-template-columns:1fr;}
  .header-search{order:3; max-width:100%; flex-basis:100%;}
  .header-row{flex-wrap:wrap;}
  .topbar-menu{display:none;}
  /* Update Fitur Lanjutan 12: header-actions (lokasi/keranjang/chat/Masuk/Daftar)
     dulu dipaksa 1 baris (flex-shrink:0) -- di layar sempit ini bikin tombol
     Daftar kepotong di tepi layar sampai harus di-zoom out. Sekarang boleh
     bungkus ke baris berikutnya kalau memang tidak muat, supaya semua tombol
     tetap kelihatan penuh tanpa perlu zoom. */
  .header-actions{flex-shrink:1; flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
}
@media (max-width: 480px){
  .produk-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .topbar-social-label{display:none;}
  .header-actions{gap:8px;}
  .cabang-pill{padding:5px 10px;}
  .header-actions a.btn-sm{padding:8px 14px; font-size:12.5px;}
  /* Bubble Live Chat CS diperkecil sedikit di layar sempit supaya proporsional
     (tidak kebesaran relatif terhadap layar HP). */
  .cs-widget-btn{width:50px; height:50px;}
}

/* ---------- Poin 17: Chat (per-pesanan, live CS, internal staf) ---------- */
.chat-box{
  border:1px solid var(--border); border-radius:10px; background:var(--abu-bg); padding:12px;
  height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
}
.chat-msg{max-width:78%; padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.5; word-wrap:break-word;}
.chat-msg .who{font-size:10.5px; font-weight:700; opacity:.65; margin-bottom:2px; display:block;}
.chat-msg .waktu{font-size:9.5px; opacity:.55; margin-top:3px; display:block;}
.chat-msg.lawan{align-self:flex-start; background:#fff; border:1px solid var(--border); border-bottom-left-radius:3px;}
.chat-msg.me{align-self:flex-end; background:var(--biru); color:#fff; border-bottom-right-radius:3px;}
.chat-empty{color:var(--teks-abu); font-size:12.5px; text-align:center; margin:auto;}
.chat-input-row{display:flex; gap:8px; margin-top:10px;}
.chat-input-row input[type=text]{flex:1;}
.chat-input-row button{flex-shrink:0;}

/* Live CS widget mengambang */
.cs-widget-btn{
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  background:var(--biru); box-shadow:0 6px 20px rgba(8,87,224,.4); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:200; padding:0; overflow:hidden;
}
.cs-widget-btn img{width:100%; height:100%; object-fit:cover;}
.cs-widget-btn .count{
  position:absolute; top:-2px; right:-2px; background:var(--merah); color:#fff; font-size:10.5px;
  font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; border:2px solid #fff;
}
.cs-widget-panel{
  position:fixed; right:22px; bottom:92px; width:330px; max-width:calc(100vw - 32px); background:#fff;
  border-radius:16px; box-shadow:0 14px 40px rgba(3,15,45,.25); z-index:200; display:none;
  flex-direction:column; overflow:hidden; border:1px solid var(--border);
}
.cs-widget-panel.open{display:flex;}
.cs-widget-head{
  background:linear-gradient(135deg, var(--biru), var(--biru-tua)); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:10px;
}
.cs-widget-head img{width:34px; height:34px; border-radius:50%; object-fit:cover;}
.cs-widget-head strong{display:block; font-size:13.5px;}
.cs-widget-head span{display:block; font-size:11px; opacity:.85;}
.cs-widget-close{margin-left:auto; background:none; border:none; color:#fff; cursor:pointer; opacity:.85; display:flex;}
.cs-widget-close:hover{opacity:1;}
.cs-widget-body{padding:12px; height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; background:var(--abu-bg);}
.cs-widget-nama{padding:12px; border-top:1px solid var(--border);}
.cs-widget-foot{padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px;}
.cs-widget-foot input{flex:1;}
@media (max-width: 420px){
  .cs-widget-panel{right:12px; bottom:82px; width:calc(100vw - 24px);}
  .cs-widget-btn{right:14px; bottom:14px;}
}

/* Update Fitur Lanjutan 6 (Poin 1): Chat Internal jadi widget popup mengambang di /acc
   (dulu halaman sidebar sendiri). Update Fitur Lanjutan 7 (Poin 2): dipindah dari
   pojok kiri-bawah ke KANAN-bawah -- aman karena widget ini cuma tampil di /acc,
   tidak pernah bareng dengan Live Chat CS yang cuma tampil di halaman toko. */
.internal-chat-btn{
  position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%;
  background:#101828; color:#fff; box-shadow:0 6px 20px rgba(16,24,40,.35); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:200; padding:0;
}
.internal-chat-btn .count{
  position:absolute; top:-2px; right:-2px; background:var(--merah); color:#fff; font-size:10.5px;
  font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; border:2px solid #fff;
}
.internal-chat-panel{
  position:fixed; right:22px; bottom:86px; width:340px; max-width:calc(100vw - 32px); background:#fff;
  border-radius:16px; box-shadow:0 14px 40px rgba(3,15,45,.25); z-index:200; display:none;
  flex-direction:column; overflow:hidden; border:1px solid var(--border);
}
.internal-chat-panel.open{display:flex;}
.internal-chat-head{
  background:linear-gradient(135deg, #101828, #1D2939); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:10px;
}
.internal-chat-head strong{display:block; font-size:13.5px;}
.internal-chat-head span{display:block; font-size:11px; opacity:.85;}
.internal-chat-back{background:none; border:none; color:#fff; cursor:pointer; opacity:.85; display:flex; margin-right:2px;}
.internal-chat-close{margin-left:auto; background:none; border:none; color:#fff; cursor:pointer; opacity:.85; display:flex;}
.internal-chat-close:hover{opacity:1;}
.internal-chat-body{padding:12px; height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; background:var(--abu-bg);}
.internal-chat-foot{padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px;}
.internal-chat-foot input{flex:1;}
.chat-room-item{padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--border); cursor:pointer; font-size:13px; display:flex; justify-content:space-between; align-items:center;}
.chat-room-item:hover{background:var(--abu-bg);}
.chat-room-item .tag{font-size:10.5px; color:var(--teks-abu); text-transform:uppercase;}
@media (max-width: 420px){
  .internal-chat-panel{right:12px; bottom:82px; width:calc(100vw - 24px);}
  .internal-chat-btn{right:14px; bottom:14px;}
}

/* Update Fitur Lanjutan 16 (Poin 8, 9, 10): avatar/foto profil, indikator online,
   tombol lampiran & emoji, dan kartu kontak di Chat Internal Staf. */
.chat-room-info{display:flex; align-items:center; gap:8px;}
.chat-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#cbd5e1; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#475569; overflow:hidden;}
.chat-avatar.sm{width:24px; height:24px; font-size:10px;}
.chat-avatar.lg{width:72px; height:72px; font-size:26px; margin:0 auto;}
.chat-avatar-wrap{position:relative; flex-shrink:0; display:inline-flex;}
.chat-avatar-clickable{cursor:pointer;}
.chat-online-dot{position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:#94a3b8; border:2px solid #fff;}
.chat-online-dot.online{background:#22c55e;}
.chat-msg-row{display:flex; gap:6px; align-items:flex-end; max-width:100%;}
.chat-msg-row.me{flex-direction:row-reverse;}
.chat-msg img.chat-lampiran{max-width:180px; border-radius:8px; display:block; margin-top:4px; cursor:pointer;}
.chat-icon-btn{border:none; background:var(--abu-bg); border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--teks-abu); flex-shrink:0; font-size:16px;}
.chat-icon-btn:hover{background:var(--border);}
.chat-emoji-popup{position:absolute; bottom:42px; left:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(3,15,45,.18); padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; width:216px; z-index:210;}
.chat-emoji-popup span{cursor:pointer; font-size:18px; text-align:center; padding:4px; border-radius:6px; line-height:1.4;}
.chat-emoji-popup span:hover{background:var(--abu-bg);}
.chat-member-item{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; padding:4px 0; cursor:pointer;}
.chat-member-info{display:flex; align-items:center; gap:8px; flex:1; cursor:pointer;}
.chat-member-nama{flex:1;}
.chat-contact-overlay{position:fixed; inset:0; background:rgba(3,15,45,.4); z-index:300; display:none; align-items:center; justify-content:center;}
.chat-contact-overlay.open{display:flex;}
.chat-contact-card{background:#fff; border-radius:16px; padding:22px; width:280px; max-width:calc(100vw - 32px); text-align:center; box-shadow:0 14px 40px rgba(3,15,45,.3);}


/* === Update: samakan gaya dropdown/select polos dengan search bar (rounded, tinggi seragam) === */
select:not(.cabang-select){
  height:38px;
  padding:0 34px 0 13px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13.5px;
  font-weight:500;
  color:var(--teks);
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  transition:border-color .15s ease;
}
select:not(.cabang-select):hover{ border-color:#c9ced6; }
select:not(.cabang-select):focus{ outline:none; border-color:var(--biru); box-shadow:0 0 0 3px var(--biru-pucat); }


/* === Update: samakan tinggi tombol "Hapus Terpilih" (id pola btnHapusMassal*) dengan search bar === */
[id^="btnHapusMassal"]{
  height:38px;
  padding:0 16px;
  font-size:13.5px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:normal;
}


/* === Update: modal konfirmasi custom (gaya Anadrom) pengganti confirm() bawaan browser === */
.anadrom-confirm-overlay{
  position:fixed; inset:0; background:rgba(17,20,24,.5); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s ease;
}
.anadrom-confirm-overlay.show{ opacity:1; }
.anadrom-confirm-box{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md);
  width:100%; max-width:360px; padding:24px; text-align:center;
  transform:scale(.92) translateY(8px); transition:transform .18s ease;
}
.anadrom-confirm-overlay.show .anadrom-confirm-box{ transform:scale(1) translateY(0); }
.anadrom-confirm-icon{
  width:48px; height:48px; border-radius:50%; background:#FDEBEC; color:var(--merah);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.anadrom-confirm-msg{ font-size:14px; color:var(--teks); line-height:1.55; margin:0 0 20px; }
.anadrom-confirm-actions{ display:flex; gap:10px; }
.anadrom-confirm-actions .btn{ flex:1; justify-content:center; }

/* [23 Agu 2026] Popup standar Anadrom dilengkapi, bukan diganti.
   Sebabnya: gaya .anadrom-confirm-* ini sudah ada dan sudah rapi, tapi tidak punya
   baris judul dan hanya punya satu warna ikon - jadi setiap kali sebuah halaman butuh
   popup yang sedikit berbeda, penulisnya membuat kotak sendiri dari nol. Hasilnya lima
   ragam popup di lima berkas: warna latar berbeda, radius berbeda, ada yang memakai
   confirm() bawaan peramban. Dengan judul + tiga ragam warna di sini, semua kebutuhan
   itu tertampung dalam satu gaya. */
.anadrom-confirm-judul{ font-size:16px; font-weight:700; color:var(--teks); margin:0 0 6px; line-height:1.35; }
.anadrom-confirm-icon.is-bahaya{ background:#FDEBEC; color:var(--merah); }
.anadrom-confirm-icon.is-info{ background:#E6F1FB; color:#185FA5; }
.anadrom-confirm-icon.is-aman{ background:#E1F5EE; color:#0F6E56; }
.btn-bahaya{ background:var(--merah); color:#fff; border:1px solid var(--merah); }
.btn-bahaya:hover{ filter:brightness(.94); color:#fff; }



/* === Update: samakan gaya semua input teks/angka & textarea polos dengan search bar === */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="image"]){
  height:38px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13.5px;
  color:var(--teks);
  background-color:#fff;
  transition:border-color .15s ease;
}
textarea{
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:13.5px;
  color:var(--teks);
  background-color:#fff;
  transition:border-color .15s ease;
  resize:vertical;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="image"]):hover,
textarea:hover{ border-color:#c9ced6; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="image"]):focus,
textarea:focus{ outline:none; border-color:var(--biru); box-shadow:0 0 0 3px var(--biru-pucat); }
input[type="file"]{
  font-size:12.5px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 8px;
  height:38px;
  box-sizing:border-box;
}


/* === Update: kotak saran (combobox) pencarian produk ala Jurnal Mekari === */
.produk-combo-wrap{ position:relative; display:inline-block; vertical-align:top; }
.produk-suggest-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:200;
  background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md);
  max-height:220px; overflow-y:auto; display:none;
}
.produk-suggest-list.show{ display:block; }
.produk-suggest-item{
  padding:8px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--abu-bg);
}
.produk-suggest-item:last-child{ border-bottom:none; }
.produk-suggest-item:hover, .produk-suggest-item.active{ background:var(--biru-pucat); }
.produk-suggest-item .harga{ font-size:11.5px; color:var(--teks-abu); white-space:nowrap; }
.produk-suggest-empty{ padding:10px 12px; font-size:12.5px; color:var(--teks-abu); }

.produk-suggest-list{ scrollbar-width:thin; scrollbar-color:#c9ced6 transparent; }
.produk-suggest-list::-webkit-scrollbar{ width:6px; }
.produk-suggest-list::-webkit-scrollbar-track{ background:transparent; }
.produk-suggest-list::-webkit-scrollbar-thumb{ background:#c9ced6; border-radius:999px; }
.produk-suggest-list::-webkit-scrollbar-thumb:hover{ background:#a8afb8; }


/* === Update: tombol chevron buka-ulang daftar saran produk (tanpa perlu hapus teks) === */
.produkComboToggle{
  position:absolute; right:2px; bottom:2px; top:auto; height:34px; width:28px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--teks-abu);
}
.produkComboToggle:hover{ color:var(--biru); }


/* === Update: kalkulator per-kategori produk (Ukuran/Warna/Rangkap dst) jadi sejajar horizontal, bukan bertumpuk === */
.kalkuBox{ flex-wrap:wrap; gap:8px; align-items:flex-start; }
.kalkuBox > div{ flex:0 0 auto; min-width:70px; margin-bottom:0 !important; }
.kalkuBox label{ display:block; font-size:10.5px; color:var(--teks-abu); margin-bottom:3px; }
.kalkuBox input{ width:auto; font-size:11.5px; }
.kalkuBox select{ width:auto; max-width:190px; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* === Update: rata atas semua kolom tabel Item Pesanan (sinkron dengan tinggi kalkulator produk) === */
#itemTbody td{ vertical-align:top; }
#itemTbody td:nth-child(1) .qtyInput,
#itemTbody td:nth-child(1) .hargaInput{ margin-top:0; }
#itemTbody .qtyInput,
#itemTbody .hargaInput{ margin-top:27px; }
#itemTbody td:nth-child(5),
#itemTbody td:nth-child(6){ padding-top:35px; vertical-align:top; }

#itemTbody td.subtotalCell{ padding-top:38px; }


/* === Update: pratinjau thumbnail file lampiran yang baru dipilih === */
.lampiranPreview{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.lampiran-thumb{
  height:96px; width:auto; min-width:60px; max-width:180px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border); background:var(--abu-bg); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--teks-abu); flex-shrink:0;
  cursor:zoom-in; transition:transform .12s ease;
}
.lampiran-thumb:hover{ transform:scale(1.04); border-color:var(--biru); }
.lampiran-thumb img{ height:100%; width:auto; max-width:180px; object-fit:contain; display:block; }


/* === Update: popup pratinjau gambar (lightbox) pengganti buka tab baru === */
.lampiran-lightbox-overlay{
  position:fixed; inset:0; background:rgba(11,11,12,.88); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; transition:opacity .15s ease;
}
.lampiran-lightbox-overlay.show{ opacity:1; }
.lampiran-lightbox-overlay img{
  max-width:90vw; max-height:85vh; border-radius:0; box-shadow:0 8px 40px rgba(0,0,0,.5);
  transform:scale(.97); transition:transform .15s ease;
}
.lampiran-lightbox-overlay.show img{ transform:scale(1); }
.lampiran-lightbox-close{
  position:fixed; top:20px; right:24px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.lampiran-lightbox-close:hover{ background:rgba(255,255,255,.25); }


/* ===== ANADROM brand tokens v1 (2026-08) — skala warna + semantik + navy. Aditif. ===== */
:root{
  --biru-50:#F5F8FF;--biru-100:#EAF1FE;--biru-200:#C9DCFB;--biru-300:#9DBEF7;--biru-400:#4E8AF0;--biru-500:#0857E0;--biru-600:#0749BC;--biru-700:#043FAD;--biru-800:#08327E;--biru-900:#0B2A63;
  --oranye-50:#FFF3EA;--oranye-100:#FFE3CC;--oranye-200:#FFC599;--oranye-300:#FFA766;--oranye-400:#FF8E3D;--oranye-500:#FF7A1A;--oranye-600:#E86608;--oranye-700:#C25207;--oranye-800:#9B420A;--oranye-900:#7A360C;
  --navy:#101828;--putih:#FFFFFF;--info:#0857E0;--kuning:#F59E0B;
  --hijau-bg:#E7F6EC;--kuning-bg:#FEF3E2;--merah-bg:#FCE9EC;--info-bg:#EAF1FE;--oranye-bg:#FFF3EA;
}


/* =====================================================================
   RASA BELANJA MARKETPLACE (2026-08-07)
   Grid rapat, harga menonjol, nama 2 baris, kartu terasa bisa ditap.
   Ditaruh paling bawah supaya menimpa aturan di atas tanpa mengubahnya.
   ===================================================================== */
.produk-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.produk-card{border-radius:10px;border-color:#EDF0F4}
.produk-card:hover{box-shadow:0 6px 18px rgba(16,24,40,.10);transform:translateY(-2px);border-color:#E0E5EC}
.produk-card .thumb{aspect-ratio:1/1;background:#F7F8FA;display:flex;align-items:center;justify-content:center}
.produk-card .thumb img{width:100%;height:100%;object-fit:cover}
.produk-card .info{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px}
.produk-card .kategori-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#B0B8C4;margin:0}
.produk-card h3{font-size:13px;font-weight:500;line-height:1.35;margin:0;color:#1F2937;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.produk-card .harga{font-size:16px;font-weight:800;color:#EE4D2D;letter-spacing:-.02em;margin-top:2px}
.produk-card .harga small{font-size:10.5px;font-weight:500;color:#B0B8C4}
.harga-coret-card{font-size:11px;margin-bottom:0}
.badge-unggulan{font-size:10px;font-weight:700;letter-spacing:.03em}

@media(max-width:820px){
  .produk-grid{grid-template-columns:1fr 1fr;gap:9px}
  .produk-card{border-radius:8px}
  .produk-card .info{padding:8px 9px 10px}
  .produk-card h3{font-size:12.5px;min-height:34px}
  .produk-card .harga{font-size:15px}
}
@media(max-width:360px){ .produk-grid{gap:7px} }


/* =====================================================================
   PINTASAN + UBIN KATEGORI (pola marketplace, 2026-08-07)
   Menggantikan daftar sidebar vertikal yang tak terpakai di ponsel.
   ===================================================================== */
.pintas-wrap{background:#fff;border:1px solid #EDF0F4;border-radius:12px;padding:14px 10px;margin:16px 0}
.pintas-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pintas{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;padding:4px 2px;border-radius:10px;transition:.14s}
.pintas:hover{background:#F7F9FC}
.pintas .pi{width:50px;height:50px;border-radius:14px;background:#EAF1FF;display:flex;align-items:center;justify-content:center;flex:none}
.pintas .pi svg{width:25px;height:25px;fill:none;stroke:#0857E0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pintas .pi-alt{background:#FFF1EC}
.pintas .pi-alt svg{stroke:#EE4D2D}
.pintas .pl{font-size:11.5px;font-weight:600;color:#475467;text-align:center;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.kat-card{background:#fff;border:1px solid #EDF0F4;border-radius:12px;padding:0 0 14px;margin:16px 0}
.kat-head{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#98A2B3;padding:14px 16px 10px;border-bottom:1px solid #F2F4F6}
.kat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px 8px 0}
.kat-ubin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;text-decoration:none;border-radius:10px;transition:.14s}
.kat-ubin:hover{background:#F7F9FC}
.kat-ubin .ku-img{width:56px;height:56px;border-radius:50%;overflow:hidden;background:#F2F5F9;display:flex;align-items:center;justify-content:center;flex:none}
.kat-ubin .ku-img img{width:100%;height:100%;object-fit:cover}
.kat-ubin .ku-img svg{width:24px;height:24px;fill:none;stroke:#B0BCCB;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kat-ubin .ku-nm{font-size:11.5px;font-weight:600;color:#344054;text-align:center;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.kat-ubin .ku-n{font-size:10px;color:#B0B8C4}

@media(max-width:820px){
  .pintas-row{grid-template-columns:repeat(4,1fr);gap:4px}
  .pintas .pi{width:46px;height:46px;border-radius:13px}
  .pintas .pl{font-size:10.5px}
  .kat-grid{grid-template-columns:repeat(4,1fr)}
  .kat-ubin{padding:11px 4px}
  .kat-ubin .ku-img{width:52px;height:52px}
  .kat-ubin .ku-nm{font-size:11px}
  .ptc-menu{display:none}
}
@media(max-width:380px){ .pintas-row{grid-template-columns:repeat(3,1fr)} }


/* Blok pintasan & kategori berada di dalam .hero-top-row (grid 2 kolom untuk
   menu+banner). Karena menu vertikal sudah diganti, baris ini jadi 1 kolom dan
   kedua blok merentang penuh. */
.hero-top-row{grid-template-columns:1fr !important;max-width:100% !important}
.hero-top-row .pintas-wrap,
.hero-top-row .kat-card{grid-column:1 / -1;width:100%}
.hero-top-row .hero-banner-carousel,
.hero-top-row .hero{grid-column:1 / -1;order:0}
.hero-top-row .pintas-wrap{order:1}
.hero-top-row .kat-card{order:2}


/* =====================================================================
   BANNER 3 PANEL (pola marketplace): 1 besar kiri + 2 bertumpuk kanan.
   ===================================================================== */
.hero3{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin:14px 0 0;grid-column:1/-1;width:100%}
.hero3 .h3-utama,.hero3 .h3-kecil{display:block;overflow:hidden;border-radius:10px;background:#EEF2F7;line-height:0}
.hero3 .h3-utama{aspect-ratio:1000/420}
.hero3 .h3-utama img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hero3 .h3-utama:hover img{transform:scale(1.02)}
.hero3 .h3-sisi{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.hero3 .h3-kecil{height:100%}
.hero3 .h3-kecil img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hero3 .h3-kecil:hover img{transform:scale(1.03)}
@media(max-width:820px){
  .hero3{grid-template-columns:1fr;gap:7px;margin-top:10px}
  .hero3 .h3-utama{aspect-ratio:16/7;border-radius:8px}
  .hero3 .h3-sisi{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:7px}
  .hero3 .h3-kecil{aspect-ratio:16/9;height:auto;border-radius:8px}
}


/* Banner lama dirancang selebar layar dengan teks di sisi KIRI. Saat dipotong
   ke panel yang lebih sempit, titik potong digeser ke kiri supaya judul tidak
   ikut tergunting. (Ideal: buat artwork terpisah per slot - lihat catatan.) */
.hero3 .h3-utama img,
.hero3 .h3-kecil img{object-position:left center}
.hero3 .h3-utama{aspect-ratio:1000/395}
@media(max-width:820px){
  .hero3 .h3-utama{aspect-ratio:16/6.5}
  .hero3 .h3-kecil{aspect-ratio:16/8}
}


/* =====================================================================
   KOREKSI PROPORSI (2026-08-07) - disamakan dengan patokan marketplace.
   Masalah sebelumnya: max-width ditimpa 100% -> blok melebar 1905px
   (container asli 1180px), dan banner terlalu tinggi (490px).
   Patokan: banner utama rasio ~3,3:1, jarak antar panel rapat.
   ===================================================================== */
.hero-top-row{max-width:1180px !important;margin-left:auto !important;margin-right:auto !important}

.hero3{gap:4px;margin-top:12px}
.hero3 .h3-utama{aspect-ratio:1000/300;border-radius:4px}
.hero3 .h3-sisi{gap:4px}
.hero3 .h3-kecil{border-radius:4px}

.pintas-wrap{padding:12px 6px;margin:12px 0;border-radius:8px}
.pintas-row{gap:2px}
.pintas{gap:6px;padding:6px 2px}
.pintas .pi{width:44px;height:44px;border-radius:50%}
.pintas .pi svg{width:22px;height:22px}
.pintas .pl{font-size:11px;font-weight:500;color:#5B6472}

.kat-card{margin:12px 0;border-radius:8px;padding-bottom:8px}
.kat-head{font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#555;padding:15px 18px 12px}
.kat-grid{gap:0;padding:0}
.kat-ubin{padding:14px 6px;border-radius:0;border-right:1px solid #F4F6F8;border-bottom:1px solid #F4F6F8;gap:8px}
.kat-ubin .ku-img{width:58px;height:58px}
.kat-ubin .ku-nm{font-size:11.5px;font-weight:400;color:#333;min-height:28px}
.kat-ubin .ku-n{font-size:10px;color:#C0C6CE}

@media(max-width:1220px){ .hero-top-row{max-width:100% !important} }
@media(max-width:820px){
  .hero3{gap:4px}
  .hero3 .h3-utama{aspect-ratio:16/6;border-radius:4px}
  .hero3 .h3-kecil{aspect-ratio:16/7.5;border-radius:4px}
  .pintas .pi{width:42px;height:42px}
  .kat-ubin{padding:12px 4px}
  .kat-ubin .ku-img{width:52px;height:52px}
}


/* Perataan tinggi: kolom kanan sempat 20px lebih tinggi karena GAMBAR yang
   menentukan tinggi baris grid. Gambar dikunci absolut supaya tinggi baris
   murni ditentukan rasio banner utama. */
.hero3{align-items:stretch}
.hero3 .h3-sisi{height:100%;min-height:0}
.hero3 .h3-utama,.hero3 .h3-kecil{position:relative;min-height:0}
.hero3 .h3-kecil{height:auto;aspect-ratio:auto}
.hero3 .h3-utama img,.hero3 .h3-kecil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .hero3 .h3-kecil{aspect-ratio:16/7.5}
}


/* =====================================================================
   PESANAN SAYA - ringkasan status (pola aplikasi marketplace)
   ===================================================================== */
.pesanan-ring{padding:0 0 6px !important;margin-bottom:14px}
.pr-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 12px;border-bottom:1px solid #F2F4F6}
.pr-head strong{font-size:15px;font-weight:600;color:#1F2937}
.pr-head a{font-size:12.5px;color:#98A2B3;text-decoration:none}
.pr-head a:hover{color:#0857E0}
.pr-row{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 6px 8px}
.pr-item{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;padding:4px 2px;border-radius:10px;transition:.14s}
.pr-item:hover{background:#F7F9FC}
.pr-ic{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.pr-ic svg{width:27px;height:27px;fill:none;stroke:#475467;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-item.on .pr-ic svg{stroke:#EE4D2D}
.pr-item.on .pr-lb{color:#EE4D2D;font-weight:600}
.pr-n{position:absolute;top:-4px;right:-8px;background:#EE4D2D;color:#fff;font-size:10px;font-weight:700;font-style:normal;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.pr-lb{font-size:12px;color:#5B6472;text-align:center;line-height:1.3}
@media(max-width:820px){
  .pr-row{padding:12px 2px 6px}
  .pr-lb{font-size:11px}
  .pr-ic svg{width:25px;height:25px}
}


/* =====================================================================
   HEADER PONSEL DIRAMPINGKAN (2026-08-07)
   Sebelumnya 225px (brand + aksi 2 baris + pencarian 3 baris) sehingga
   konten baru mulai di 289px - hampir sepertiga layar terbuang.
   Sekarang SATU baris: logo + pencarian + keranjang + chat.
   Pemilih cabang & tombol Masuk/Daftar disembunyikan karena akun sudah
   tersedia di nav bawah.
   ===================================================================== */
@media(max-width:820px){
  .site-header .header-row{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px}
  .site-header .brand{order:1;flex:0 0 auto;margin:0}
  .site-header .brand img{height:30px !important;width:auto !important}
  .site-header .header-search{order:2;flex:1 1 auto;width:auto !important;margin:0 !important}
  .site-header .header-search input{height:36px;font-size:13px}
  .site-header .header-actions{order:3;flex:0 0 auto;width:auto !important;display:flex;gap:12px;align-items:center;margin:0 !important;justify-content:flex-end}
  .site-header .header-actions .cabang-pill,
  .site-header .header-actions .btn{display:none !important}
  .site-header .header-actions .cart-badge{width:23px;height:23px}
  .topbar,.header-top{display:none !important}
}

/* Tombol chat sempat menutupi menu "Akun" di nav bawah (chat bawah 830px vs
   nav mulai 786px). Digeser naik supaya tidak menghalangi navigasi. */
@media(max-width:820px){
  .cs-widget-btn{bottom:calc(74px + env(safe-area-inset-bottom)) !important;right:14px !important;width:50px !important;height:50px !important}
  .cs-widget{bottom:calc(132px + env(safe-area-inset-bottom)) !important}
}


/* Di ponsel, tulisan "anadrom" pada logo memakan ~110px sehingga kotak
   pencarian tersisa sempit. Sisakan lambang bulatnya saja - pola yang sama
   dipakai aplikasi marketplace (hanya ikon di kiri, pencarian melebar). */
@media(max-width:820px){
  .site-header .brand{gap:0 !important}
  .site-header .brand .wordmark,
  .site-header .brand svg,
  .site-header .brand span,
  .site-header .brand img:not(:first-child){display:none !important}
  .site-header .brand img:first-child{height:32px !important;width:32px !important}
  .site-header .header-search input{width:100% !important}
}
/* Pintasan tetap 4 kolom sampai layar sangat sempit */
@media(max-width:340px){ .pintas-row{grid-template-columns:repeat(3,1fr)} }
@media(min-width:341px) and (max-width:820px){ .pintas-row{grid-template-columns:repeat(4,1fr)} }


/* =====================================================================
   HEADER SATU BLOK BIRU (2026-08-07) - pola Shopee: warna merek penuh
   dari baris atas sampai kotak pencarian, tanpa garis pemisah putih.
   Logo diputihkan otomatis lewat filter (tidak perlu aset baru).
   ===================================================================== */
.topbar,.header-top{background:#043FAD !important;border-bottom:0 !important}
.site-header{background:#043FAD !important;border-bottom:0 !important;box-shadow:0 2px 10px rgba(4,63,173,.18)}

/* Logo & wordmark jadi putih murni */
.site-header .brand img{filter:brightness(0) invert(1)}

/* Pencarian tetap putih supaya kontras & jadi titik fokus */
.site-header .header-search input{background:#fff;border:0;border-radius:4px;box-shadow:none}
.site-header .header-search input:focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.site-header .header-search button,
.site-header .header-search .btn{background:#0857E0;border:0;color:#fff}

/* Ikon & teks di header jadi putih */
.site-header .cart-badge,
.site-header .header-actions a:not(.btn){color:#fff}
.site-header .cart-badge svg{stroke:#fff}
.site-header .cart-badge .count{background:#F97316;color:#fff;border:2px solid #043FAD}
.site-header .cabang-pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.site-header .cabang-pill svg{stroke:#fff}
.site-header .cabang-pill select{background:transparent;color:#fff;border:0}
.site-header .cabang-pill select option{color:#1A1D22}

/* Tombol Masuk / Daftar dibalik warnanya */
.site-header .header-actions .btn-outline{border-color:rgba(255,255,255,.65);color:#fff;background:transparent}
.site-header .header-actions .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.site-header .header-actions .btn-primary{background:#fff;color:#043FAD;border-color:#fff}
.site-header .header-actions .btn-primary:hover{background:#EAF1FF;color:#043FAD}

/* Baris atas: tautan & pemilih bahasa ikut putih */
.topbar a,.header-top a{color:rgba(255,255,255,.92)}
.topbar a:hover,.header-top a:hover{color:#fff}


/* =====================================================================
   BANNER PONSEL: satu baris GESER (scroll-snap) ala aplikasi.
   Sebelumnya 3 panel bertumpuk memakan ~210px di awal layar.
   Sekarang satu baris setinggi ~120px, digeser jempol - ketiga banner
   tetap terpakai, tanpa JavaScript.
   ===================================================================== */
@media(max-width:820px){
  .hero3{display:flex !important;grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;gap:8px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin-top:10px}
  .hero3::-webkit-scrollbar{display:none}
  .hero3 .h3-utama,.hero3 .h3-kecil{flex:0 0 88%;scroll-snap-align:center;
    aspect-ratio:16/6 !important;height:auto;border-radius:6px}
  .hero3 .h3-sisi{display:contents}
}

/* Jarak tepi: logo & konten tidak lagi mentok ke pinggir layar */
@media(max-width:820px){
  .site-header .header-row{padding-left:14px !important;padding-right:14px !important}
  .container{padding-left:14px !important;padding-right:14px !important}
  .topbar .container,.header-top .container{padding-left:14px !important;padding-right:14px !important}
}
@media(max-width:400px){
  .site-header .header-row{padding-left:12px !important;padding-right:12px !important}
  .container{padding-left:12px !important;padding-right:12px !important}
}

/* ==== HEADER PATTERN + SEARCH (2026-08-07) ==== */
/* 1. Pola halus di biru agar tidak monoton */
.topbar,.header-top,.site-header{
  background-color:#043FAD !important;
  background-image:
    radial-gradient(1100px 240px at 10% -70%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'72'%20height%3D'72'%20viewBox%3D'0%200%2072%2072'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'0.075'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2027%20L18%2015%20L30%2027'%2F%3E%3Cpath%20d%3D'M42%2063%20L54%2051%20L66%2063'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.06'%3E%3Ccircle%20cx%3D'54'%20cy%3D'19'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'55'%20r%3D'2.2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
  background-repeat:no-repeat, repeat !important;
  background-position:0 0, 0 0 !important;
  background-size:auto, 72px 72px !important;
}
.site-header{box-shadow:0 2px 10px rgba(4,63,173,.18)}

/* 2. Pil cabang dipangkas: cukup sampai kata "Binjai" */
.site-header .cabang-pill{padding:6px 10px 6px 11px !important;gap:5px}
.site-header .cabang-select{width:auto !important;max-width:72px;min-width:0;
  text-overflow:ellipsis;white-space:nowrap;padding-right:2px !important;font-size:12.5px}

/* 3. Search bar mengambil ruang yang dibebaskan */
.site-header .header-search{flex:1 1 auto;min-width:0;max-width:760px}
.site-header .header-search input{width:100%;text-overflow:ellipsis;white-space:nowrap;
  overflow:hidden;padding-left:14px;padding-right:44px}
@media(max-width:820px){
  .site-header .header-search{max-width:none}
  .site-header .header-search input{font-size:13px;padding-left:12px;padding-right:38px}
}
/* ==== /HEADER PATTERN + SEARCH ==== */

/* ==== TOGGLE BAHASA (2026-08-07) ==== */
.lang-toggle{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  text-decoration:none;line-height:1;transition:background .15s,border-color .15s}
.lang-toggle:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55);color:#fff}
.lang-toggle svg{opacity:.9;flex:0 0 auto}
@media(max-width:820px){.lang-toggle{margin-left:6px;padding:3px 7px}}
/* ==== /TOGGLE BAHASA ==== */

/* ==== FOOTER TERANG MINIMALIS (2026-08-07) ==== */
.site-footer.ft-terang{background:#FFFFFF !important;color:#4A5568 !important;
  border-top:1px solid #E8EBEF;margin-top:48px;padding:0}
.ft-terang .ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.5fr;gap:32px;padding:40px 0 36px}
.ft-terang h4{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:#1A202C}
.ft-terang .ft-h4-jarak{margin-top:22px}
.ft-terang ul{list-style:none;margin:0;padding:0}
.ft-terang li{margin:0 0 9px}
.ft-terang a{color:#5A6473;text-decoration:none;font-size:13px;line-height:1.5;transition:color .15s}
.ft-terang a:hover{color:#0857E0}
.ft-logo-merek{height:26px;width:auto;display:block;margin-bottom:12px}
.ft-tagline{margin:0 0 16px;font-size:12.5px;line-height:1.7;color:#6B7280;max-width:300px}
.ft-sosial{display:flex;align-items:center;gap:9px}
.ft-sosial-label{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#1A202C;margin-right:2px}
.ft-sosial a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid #E8EBEF;border-radius:50%;color:#5A6473;background:#fff;transition:all .15s}
.ft-sosial a:hover{border-color:#0857E0;color:#0857E0;background:#F5F8FF}
.ft-logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ft-logo-grid--2{grid-template-columns:repeat(2,calc((100% - 16px)/3))}
.ft-logo{display:flex;align-items:center;justify-content:center;height:34px;background:#fff;
  border:1px solid #E8EBEF;border-radius:5px;padding:5px 7px;transition:border-color .15s,box-shadow .15s}
.ft-logo:hover{border-color:#CFD6E0;box-shadow:0 1px 4px rgba(16,24,40,.06)}
.ft-logo img{height:20px;width:auto;max-width:100%;object-fit:contain;display:block}
.ft-terang .ft-bawah{border-top:1px solid #EEF1F5;background:#FBFBFC;padding:16px 0}
.ft-bawah-isi{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  font-size:12px;color:#8B94A3}
.ft-bawah-kanan{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ft-sep{color:#D5DBE3}
@media(max-width:1000px){.ft-terang .ft-grid{grid-template-columns:1fr 1fr 1fr;gap:26px 24px}
  .ft-terang .ft-col-brand{grid-column:1/-1}.ft-terang .ft-col-logo{grid-column:1/-1}
  .ft-logo-grid{grid-template-columns:repeat(6,1fr);max-width:520px}}
@media(max-width:640px){.ft-terang .ft-grid{grid-template-columns:1fr 1fr;gap:24px 20px;padding:30px 0 26px}
  .ft-logo-grid{grid-template-columns:repeat(4,1fr);max-width:none}
  .ft-tagline{max-width:none}.ft-bawah-isi{justify-content:flex-start;font-size:11.5px}}
@media(max-width:820px){.site-footer.ft-terang{margin-bottom:60px}}
/* ==== /FOOTER TERANG ==== */

/* ==== FEED VIDEO PRODUK (2026-08-07) ==== */
/* Layar penuh gelap, satu video per layar, geser vertikal (pola Shopee Video). */
body.video-feed{margin:0;background:#000;color:#fff;overflow:hidden;padding-bottom:0 !important}
body.video-feed .site-footer,body.video-feed .cs-widget-btn,body.video-feed .cs-widget{display:none !important}

.vf-track{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.vf-track::-webkit-scrollbar{display:none}
.vf-item{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.vf-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vf-tirai{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}
.vf-main{position:absolute;inset:0;background:none;border:0;cursor:pointer;padding:0}
.vf-item.vf-jeda .vf-main::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.42) no-repeat center/22px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 4l12 8-12 8z'/%3E%3C/svg%3E")}

/* Bilah atas melayang */
.vf-atas{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.vf-kembali,.vf-suara{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;flex:0 0 auto}
.vf-kembali svg,.vf-suara svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.vf-suara svg .vf-silang{opacity:0}
.vf-suara.vf-bisu svg .vf-gel{opacity:0}
.vf-suara.vf-bisu svg .vf-silang{opacity:1}
.vf-tajuk{flex:1;font-size:14px;font-weight:700;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* Gelembung keranjang BIRU di sisi kanan */
.vf-kanan{position:absolute;right:12px;bottom:150px;z-index:20;display:flex;flex-direction:column;
  align-items:center;gap:5px}
.vf-bel{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border:0;border-radius:50%;background:#0857E0;color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(8,87,224,.5);animation:vfDenyut 2.6s ease-in-out infinite}
.vf-bel:active{transform:scale(.94)}
.vf-bel svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vf-bel-titik{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:#F97316;
  border:2px solid #0857E0}
.vf-bel-label{font-size:10.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@keyframes vfDenyut{0%,100%{box-shadow:0 6px 18px rgba(8,87,224,.5)}50%{box-shadow:0 6px 26px rgba(8,87,224,.85)}}

/* Keterangan kiri bawah + pil produk */
.vf-info{position:absolute;left:14px;right:76px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:20}
.vf-judul{font-size:15px;font-weight:700;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vf-caption{margin-top:4px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.86);
  text-shadow:0 1px 4px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vf-pil{margin-top:10px;display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:7px 12px 7px 9px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.94);color:#0B2A63;font-size:12.5px;font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.vf-pil svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#0857E0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vf-pil-nama{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.vf-pil-harga{color:#EE4D2D;font-weight:800;flex:0 0 auto}

/* Kartu produk naik dari bawah */
.vf-latar{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:opacity .2s}
.vf-latar.on{opacity:1;visibility:visible}
.vf-sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:#fff;color:#1A202C;
  border-radius:16px 16px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .26s cubic-bezier(.22,.8,.3,1);
  max-width:520px;margin:0 auto;box-shadow:0 -6px 30px rgba(0,0,0,.28)}
.vf-sheet.on{transform:translateY(0)}
.vf-sheet-pegangan{width:38px;height:4px;border-radius:2px;background:#DDE2EA;margin:0 auto 12px}
.vf-sheet-tajuk{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#8B94A3;margin-bottom:10px}
.vf-sheet-kartu{display:flex;gap:12px;align-items:center}
.vf-sheet-gbr{width:72px;height:72px;flex:0 0 auto;border-radius:9px;overflow:hidden;background:#F2F5F9;
  display:flex;align-items:center;justify-content:center}
.vf-sheet-gbr img{width:100%;height:100%;object-fit:cover;display:block}
.vf-sheet-nogambar svg{fill:none;stroke:#B6BFCC;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vf-sheet-teks{min-width:0;flex:1}
.vf-sheet-kat{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#98A2B3}
.vf-sheet-nama{font-size:14px;font-weight:700;line-height:1.35;margin:2px 0 5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vf-sheet-harga{font-size:17px;font-weight:800;color:#EE4D2D;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vf-sheet-satuan{font-size:11.5px;font-weight:600;color:#98A2B3}
.vf-sheet-coret{font-size:12px;font-weight:600;color:#B6BFCC;text-decoration:line-through}
.vf-sheet-beli{display:block;margin-top:14px;padding:12px;border-radius:9px;background:#0857E0;color:#fff;
  text-align:center;font-size:14px;font-weight:700;text-decoration:none}
.vf-sheet-beli:active{background:#043FAD}
.vf-sheet-tutup{display:block;width:100%;margin-top:8px;padding:10px;border:0;background:none;
  color:#8B94A3;font-size:13px;font-weight:600;cursor:pointer}

/* Keadaan kosong */
.vf-kosong{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;gap:10px}
.vf-kosong svg{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4;stroke-linejoin:round}
.vf-kosong h2{margin:6px 0 0;font-size:18px;font-weight:700}
.vf-kosong p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.66);max-width:320px}

/* Desktop: kolom 9:16 di tengah, sisanya gelap */
@media(min-width:821px){
  .vf-track{max-width:min(430px, calc(100dvh * 9 / 16));margin:0 auto}
  .vf-atas{max-width:min(430px, calc(100dvh * 9 / 16));left:50%;transform:translateX(-50%);right:auto;width:100%}
  body.video-feed{background:#0A0D12}
}
/* ==== /FEED VIDEO ==== */

/* ==== TOMBOL VIDEO DI NAV (2026-08-07) ==== */
@media(max-width:820px){
  /* Tombol tengah menonjol, pola Shopee/TikTok */
  .app-nav .nav-video{position:relative}
  .app-nav .nav-video .nav-video-bulat{display:flex;align-items:center;justify-content:center;
    width:42px;height:30px;margin-top:-14px;border-radius:11px;
    background:linear-gradient(135deg,#0857E0,#043FAD);color:#fff;
    box-shadow:0 5px 14px rgba(8,87,224,.42)}
  .app-nav .nav-video svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.7}
  .app-nav .nav-video span:last-child{margin-top:1px}
  .app-nav a.nav-video.on{color:#0857E0}
  .app-nav a.nav-video.on .nav-video-bulat{box-shadow:0 5px 18px rgba(8,87,224,.62)}
}
/* ==== /TOMBOL VIDEO NAV ==== */

/* ==== MASUK & DAFTAR: RAPI + NYAMAN DISENTUH (2026-08-07) ==== */
/* Latar & kartu */
.daftar-page-bg{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:20px 14px;background:linear-gradient(140deg,#043FAD 0%,#0857E0 45%,#0B2A63 100%)}
.daftar-modal{width:100%;max-width:940px;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(4,20,60,.35)}

/* Kolom isian: nyaman disentuh & tidak memicu zoom otomatis di iPhone */
.daftar-form-panel input[type=text],
.daftar-form-panel input[type=email],
.daftar-form-panel input[type=tel],
.daftar-form-panel input[type=password]{
  /* anadrom-ui.css memakai rantai :not() berlapis (kekuatan 0-8-1) untuk SEMUA input,
     jadi aturan biasa di sini kalah. Penegasan dipakai sengaja & hanya di 2 halaman ini.
     font-size 16px WAJIB: di bawah itu iPhone otomatis memperbesar layar saat kolom disentuh. */
  width:100% !important;height:48px !important;padding:0 14px !important;
  font-size:16px !important;line-height:normal !important;
  border:1px solid #DCE1E9 !important;border-radius:10px !important;
  background:#fff !important;color:#1A202C !important;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.daftar-form-panel input:focus{outline:0;border-color:#0857E0;box-shadow:0 0 0 3px rgba(8,87,224,.16)}
.daftar-form-panel input::placeholder{color:#A9B2C0}
.daftar-form-panel label{display:block;font-size:12.5px;font-weight:700;color:#344054;margin:0 0 6px}
.daftar-form-panel .field{margin-bottom:14px;position:relative}

/* Tombol utama */
.daftar-form-panel .btn-primary,
.daftar-form-panel button[type=submit]{width:100%;height:50px;border-radius:10px;font-size:15px;font-weight:700;
  background:#0857E0;border:0;color:#fff;cursor:pointer;transition:background .15s}
.daftar-form-panel button[type=submit]:hover{background:#043FAD}
.daftar-form-panel button[type=submit]:active{transform:translateY(1px)}

/* Tombol Google */
.daftar-form-panel .btn-google{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;border:1px solid #DCE1E9;border-radius:10px;background:#fff;
  color:#344054;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s}
.daftar-form-panel .btn-google:hover{background:#F7F9FC;border-color:#C7D0DC}

/* Pesan galat */
.daftar-form-panel .alert,.daftar-form-panel .error-box{display:flex;gap:8px;align-items:flex-start;
  background:#FEF3F2;border:1px solid #FDA29B;color:#B42318;border-radius:9px;
  padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:14px}

/* Tombol tutup */
.modal-close{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);
  color:#475467;box-shadow:0 2px 8px rgba(16,24,40,.14)}
.modal-close:hover{background:#fff;color:#0857E0}

/* ---------- PONSEL: formulir harus langsung terlihat ---------- */
@media(max-width:820px){
  .daftar-page-bg{align-items:flex-start;padding:12px 12px 28px}
  .daftar-modal{max-width:none;border-radius:14px}
  /* panel merek diringkas jadi satu baris tipis, bukan blok setinggi 250px */
  .daftar-promo,.login-brand-panel{display:flex !important;flex-direction:row !important;
    align-items:center;justify-content:center;gap:9px;min-height:0 !important;height:auto !important;
    padding:14px 16px !important;text-align:left}
  .login-maskot{width:38px !important;height:38px !important;object-fit:contain;margin:0 !important}
  .login-brand-nama{margin:0 !important;font-size:17px !important}
  .login-brand-nama .login-brand-icon{width:20px;height:20px}
  .login-brand-tagline{display:none !important}
  .daftar-promo .promo-slide,.daftar-promo .promo-dots,.daftar-promo p{display:none !important}
  .daftar-form-panel{padding:18px 16px 22px !important}
  .daftar-form-panel h2{font-size:20px !important}
}
@media(max-width:380px){
  .daftar-form-panel{padding:16px 13px 20px !important}
  .daftar-form-panel input{height:46px !important}
}
/* ==== /MASUK & DAFTAR ==== */

/* ==== IKON CARI POLOS + NAV NOTIFIKASI (2026-08-07) ==== */
/* Tombol cari: polos, tanpa lingkaran biru (permintaan: lebih minimalis) */
.site-header .header-search button{background:transparent !important;border:0 !important;
  box-shadow:none !important;color:#8B94A3 !important;padding:0 12px !important;
  width:auto !important;height:100% !important;border-radius:0 !important;cursor:pointer;
  transition:color .15s}
.site-header .header-search button:hover{background:transparent !important;color:#0857E0 !important}
.site-header .header-search button svg{stroke:currentColor;fill:none;stroke-width:2.1}
.site-header .header-search{position:relative}
.site-header .header-search input{padding-right:44px}

/* Lonceng notifikasi di nav bawah ikut memakai badge angka yang sama */
@media(max-width:820px){
  .app-nav a[href="notifikasi.php"]{position:relative}
}
/* ==== /IKON CARI POLOS ==== */

/* ==== VIDEO: LOVE, KOMENTAR, BAGIKAN (2026-08-07) ==== */
/* Deret tombol sisi kanan, di BAWAH gelembung keranjang biru */
.vf-rail{position:absolute;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.vf-kanan{bottom:calc(150px + 100px)}
.vf-aksi{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.vf-aksi svg{width:29px;height:29px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.vf-aksi:active svg{transform:scale(.88)}
.vf-n{font-size:11.5px;font-weight:700;line-height:1;min-height:12px;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Hati: kosong -> terisi merah saat disukai */
.vf-love.on svg{fill:#FF2D55;stroke:#FF2D55}
.vf-love.vf-denyut svg{animation:vfLove .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes vfLove{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}

/* Lembar komentar */
.vf-sheet-komen{max-height:72dvh;display:flex;flex-direction:column;padding-bottom:0}
.vf-sheet-komen .vf-sheet-tajuk{text-align:center;margin-bottom:8px;
  border-bottom:1px solid #EEF1F5;padding-bottom:10px}
.vf-komen-daftar{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 0 10px;min-height:110px}
.vf-k{padding:9px 0;border-bottom:1px solid #F4F6F9}
.vf-k:last-child{border-bottom:0}
.vf-k-nama{font-size:12.5px;font-weight:700;color:#1A202C;display:flex;gap:7px;align-items:baseline}
.vf-k-waktu{font-size:11px;font-weight:500;color:#98A2B3}
.vf-k-isi{font-size:13.5px;line-height:1.55;color:#344054;margin-top:2px;word-break:break-word}
.vf-k-kosong{text-align:center;color:#98A2B3;font-size:13px;padding:26px 10px}

.vf-komen-tulis{border-top:1px solid #EEF1F5;padding:10px 0 calc(12px + env(safe-area-inset-bottom))}
#vfKomenForm{display:flex;gap:8px}
#vfKomenInput{flex:1;height:44px;padding:0 14px;font-size:16px;border:1px solid #DCE1E9;
  border-radius:999px;background:#F7F9FC;color:#1A202C;-webkit-appearance:none}
#vfKomenInput:focus{outline:0;border-color:#0857E0;background:#fff;box-shadow:0 0 0 3px rgba(8,87,224,.14)}
#vfKomenForm button{height:44px;padding:0 18px;border:0;border-radius:999px;background:#0857E0;
  color:#fff;font-size:14px;font-weight:700;cursor:pointer;flex:0 0 auto}
#vfKomenForm button:active{background:#043FAD}
.vf-komen-login{display:block;text-align:center;padding:13px;border-radius:10px;background:#F5F8FF;
  color:#0857E0;font-size:13.5px;font-weight:700;text-decoration:none}

@media(max-width:380px){
  .vf-rail{gap:11px}
  .vf-aksi svg{width:26px;height:26px}
}
/* ==== /VIDEO SOSIAL ==== */

/* ==== VIDEO: KARTU PRODUK KIRI + LEMBAR BAGIKAN (2026-08-07) ==== */
/* Kolom kiri bawah: kartu produk -> pil keranjang -> judul -> caption */
.vf-bawah{position:absolute;left:12px;right:80px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:20}
.vf-info{display:none}

/* Kartu pratinjau produk (pola kartu Shopee Video) */
.vf-kartu{position:relative;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.97);border-radius:10px;padding:8px 8px 8px 8px;margin-bottom:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);max-width:330px;
  transition:opacity .18s,transform .18s}
.vf-kartu.vf-kartu-sembunyi{display:none}
.vf-kartu-tutup{position:absolute;top:5px;right:5px;width:20px;height:20px;border:0;padding:0;
  background:rgba(0,0,0,.06);border-radius:50%;color:#5A6473;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.vf-kartu-tutup svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.vf-kartu-gbr{width:54px;height:54px;flex:0 0 auto;border-radius:7px;overflow:hidden;background:#F2F5F9;
  display:flex;align-items:center;justify-content:center}
.vf-kartu-gbr img{width:100%;height:100%;object-fit:cover;display:block}
.vf-kartu-gbr svg{width:22px;height:22px;fill:none;stroke:#B6BFCC;stroke-width:1.6;stroke-linejoin:round}
.vf-kartu-teks{min-width:0;flex:1}
.vf-kartu-nama{font-size:12px;font-weight:600;color:#1A202C;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:16px}
.vf-kartu-harga{font-size:15px;font-weight:800;color:#EE4D2D;margin-top:3px;display:flex;align-items:baseline;gap:3px}
.vf-kartu-satuan{font-size:10.5px;font-weight:600;color:#98A2B3}
.vf-kartu-beli{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;align-self:stretch;
  padding:0 12px;border-radius:8px;background:#0857E0;color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:700}
.vf-kartu-beli:active{background:#043FAD}
.vf-kartu-beli svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Pil keranjang BIRU di kiri */
.vf-pil{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-bottom:9px;
  padding:6px 11px 6px 7px;border:0;border-radius:999px;cursor:pointer;
  background:#0857E0;color:#fff;font-size:12.5px;font-weight:700;
  box-shadow:0 4px 14px rgba(8,87,224,.45)}
.vf-pil:active{background:#043FAD}
.vf-pil-ikon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:rgba(255,255,255,.2);flex:0 0 auto}
.vf-pil-ikon svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.vf-pil-chev svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.vf-pil-teks{white-space:nowrap}

/* Deret kanan tanpa keranjang lagi */
.vf-rail{bottom:calc(92px + env(safe-area-inset-bottom))}
.vf-bagikan svg{fill:#fff;stroke:none}

/* Lembar bagikan milik sendiri */
.vf-sheet-bagikan .vf-sheet-tajuk{text-align:center;margin-bottom:14px}
.vf-bagi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:2px 0 8px}
.vf-bagi{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  color:#475467;font-size:11px;font-weight:600;text-align:center}
.vf-bagi-ikon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%}
.vf-bagi-ikon svg{width:26px;height:26px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vf-sheet-bagikan .vf-sheet-tutup{margin-top:4px}

@media(min-width:821px){
  .vf-bawah{left:calc(50% - min(215px, 50dvh * 9 / 16) + 12px);right:auto;width:min(300px, 42dvh)}
}
/* Layar sempit: kartu diringkas supaya harga tidak terpotong */
@media(max-width:430px){
  .vf-kartu{padding:7px;gap:7px}
  .vf-kartu-gbr{width:46px;height:46px}
  .vf-kartu-satuan{display:none}
  .vf-kartu-harga{font-size:14px}
  .vf-kartu-nama{font-size:11.5px;-webkit-line-clamp:1}
  .vf-kartu-beli{padding:0 9px;font-size:11.5px}
  .vf-kartu-beli svg{display:none}
}
/* ==== /VIDEO KARTU KIRI ==== */

/* ==== VIDEO: RATA IKON, TANPA SOROTAN, EFEK HATI (2026-08-07) ==== */
/* --- 1. Buang sorotan kotak saat disentuh (bawaan Android/iOS) --- */
body.video-feed{-webkit-tap-highlight-color:transparent}
body.video-feed button,
body.video-feed a{-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
body.video-feed button:focus,
body.video-feed a:focus{outline:none}
/* pengguna keyboard tetap dapat penanda fokus */
body.video-feed button:focus-visible,
body.video-feed a:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px;border-radius:8px}
.vf-main{-webkit-tap-highlight-color:transparent}

/* --- 2. Deret kanan benar-benar rata --- */
.vf-rail{width:58px;right:8px;align-items:stretch;gap:16px}
.vf-aksi{width:58px;padding:0;align-items:center;justify-content:flex-start}
.vf-aksi svg{width:30px;height:30px;display:block;margin:0 auto}
/* hati sedikit lebih besar dari yang lain */
.vf-love svg{width:35px;height:35px}
.vf-n{display:block;width:100%;text-align:center;height:14px;line-height:14px;
  font-size:11px;overflow:hidden;white-space:nowrap}

/* --- 3. Efek hati saat ketuk dua kali (pola TikTok / Shopee Live) --- */
.vf-hati-besar{position:absolute;z-index:25;pointer-events:none;
  width:96px;height:96px;margin:-48px 0 0 -48px;
  animation:vfHatiBesar .85s cubic-bezier(.2,1.4,.35,1) forwards}
.vf-hati-besar svg{width:100%;height:100%;fill:#FF2D55;stroke:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
@keyframes vfHatiBesar{
  0%{opacity:0;transform:scale(.3) rotate(-12deg)}
  22%{opacity:1;transform:scale(1.15) rotate(-8deg)}
  45%{transform:scale(.95) rotate(-8deg)}
  70%{opacity:1;transform:scale(1) rotate(-8deg)}
  100%{opacity:0;transform:scale(1.25) translateY(-40px) rotate(-8deg)}
}
.vf-hati-kecil{position:absolute;z-index:24;pointer-events:none;width:26px;height:26px;
  animation:vfHatiNaik 1.5s ease-out forwards}
.vf-hati-kecil svg{width:100%;height:100%;fill:#FF2D55;stroke:none;opacity:.92}
@keyframes vfHatiNaik{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  15%{opacity:1;transform:translate(var(--dx1,0),-30px) scale(1)}
  100%{opacity:0;transform:translate(var(--dx2,0),-170px) scale(.75)}
}

@media(max-width:380px){
  .vf-rail{width:52px;gap:13px}
  .vf-aksi{width:52px}
  .vf-aksi svg{width:27px;height:27px}
  .vf-love svg{width:32px;height:32px}
}
/* ==== /VIDEO RATA & HATI ==== */

/* ==== SENTUHAN BERSIH: TANPA KOTAK BIRU (2026-08-07) ==== */
/* Android & iOS menggambar kotak biru/abu saat elemen disentuh. Dimatikan
   di SELURUH toko, lalu diganti umpan balik tekan yang halus supaya tombol
   tetap terasa hidup - bukan sekadar dimatikan begitu saja. */
html{-webkit-tap-highlight-color:transparent}
a, button, input, select, textarea, label, summary,
[role="button"], [onclick]{-webkit-tap-highlight-color:transparent}

/* Cincin fokus bawaan hanya muncul untuk pengguna KEYBOARD, bukan saat disentuh. */
a:focus, button:focus, summary:focus{outline:none}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid #0857E0;outline-offset:2px;border-radius:6px}
/* Di header biru, cincin biru tak terlihat - pakai putih. */
.site-header a:focus-visible, .site-header button:focus-visible,
.topbar a:focus-visible, .app-nav a:focus-visible{outline-color:#fff}

/* Elemen navigasi/tombol tidak perlu bisa diblok teksnya saat ditekan lama.
   Teks isi halaman TIDAK diikutkan supaya harga & nomor pesanan tetap bisa disalin. */
.site-header a, .site-header button, .topbar a, .app-nav a,
.brand, .pintas, .kat-card, .chip, .btn, .cart-badge, .lang-toggle,
.ft-logo, .vf-aksi, .vf-pil, .vf-bagi{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Umpan balik tekan: sedikit meredup / turun, bukan kotak biru. */
.app-nav a:active, .pintas:active, .kat-card:active,
.cart-badge:active, .lang-toggle:active, .brand:active,
.topbar a:active, .ft-logo:active{opacity:.55}
.btn:active, .chip:active{transform:translateY(1px)}
.produk-card:active{opacity:.82}
/* ==== /SENTUHAN BERSIH ==== */

/* ==== TOMBOL X LEMBAR + LATAR AMAN (2026-08-07) ==== */
.vf-sheet-komen .vf-sheet-tajuk{position:relative;padding-right:34px}
.vf-sheet-x{position:absolute;top:-4px;right:0;width:28px;height:28px;border:0;padding:0;
  background:rgba(0,0,0,.06);border-radius:50%;color:#5A6473;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.vf-sheet-x:active{background:rgba(0,0,0,.12)}
.vf-sheet-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* Latar hanya menangkap sentuhan saat benar-benar aktif - pengaman kalau
   suatu saat kelas 'on' gagal dilepas, layar tidak ikut terkunci. */
.vf-latar{pointer-events:none}
.vf-latar.on{pointer-events:auto}
/* ==== /TOMBOL X LEMBAR ==== */

/* ==== KOMENTAR v2: AVATAR, BALASAN, SUKA (2026-08-07) ==== */
.vf-sheet-komen{max-height:80dvh;padding-left:0;padding-right:0}
.vf-kom-kepala{position:relative;text-align:center;font-size:14.5px;font-weight:700;color:#1A202C;
  padding:2px 44px 12px;border-bottom:1px solid #EEF1F5;margin:0 16px}
.vf-kom-kepala .vf-sheet-x{top:-3px;right:0}

/* Daftar */
.vf-komen-daftar{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 16px 8px;min-height:150px}
.vf-k{display:flex;gap:10px;padding:9px 0;align-items:flex-start;border:0}
.vf-k-balasan{padding:7px 0}

/* Avatar */
.vf-k-ava{flex:0 0 auto;width:36px;height:36px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;user-select:none}
.vf-k-ava img{width:100%;height:100%;object-fit:cover;display:block}
.vf-k-ava-kecil{width:28px;height:28px;font-size:11px}

.vf-k-isi-kolom{flex:1;min-width:0}
.vf-k-nama{font-size:12.5px;font-weight:600;color:#8B94A3;line-height:1.3}
.vf-k-teks{font-size:14px;line-height:1.5;color:#1A202C;margin-top:2px;
  word-break:break-word;white-space:pre-wrap}
.vf-k-kaki{display:flex;align-items:center;gap:14px;margin-top:5px}
.vf-k-waktu{font-size:11.5px;color:#98A2B3}
.vf-k-balas{background:none;border:0;padding:0;font-size:11.5px;font-weight:700;
  color:#8B94A3;cursor:pointer}
.vf-k-balas:active{color:#0857E0}

/* Hati per komentar */
.vf-k-love{flex:0 0 auto;background:none;border:0;padding:2px 0 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;width:26px;color:#C4CBD6}
.vf-k-love svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.vf-k-love.on{color:#FF2D55}
.vf-k-love.on svg{fill:#FF2D55;stroke:#FF2D55;animation:vfLove .4s cubic-bezier(.2,1.6,.4,1)}
.vf-k-love span{font-size:10.5px;font-weight:600;line-height:1;min-height:11px}
.vf-k-love:active svg{transform:scale(.85)}

/* Balasan menjorok + garis penghubung tipis */
.vf-k-anak{margin-left:46px;position:relative}
.vf-k-anak::before{content:"";position:absolute;left:-24px;top:2px;bottom:14px;width:1px;background:#EEF1F5}
.vf-k-lihat{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:4px 0 8px;
  font-size:11.5px;font-weight:700;color:#8B94A3;cursor:pointer}
.vf-k-lihat svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Keadaan kosong & memuat */
.vf-k-kosong{text-align:center;color:#98A2B3;font-size:13.5px;padding:34px 10px}
.vf-k-kosong svg{fill:none;stroke:#D5DBE3;stroke-width:1.4;stroke-linejoin:round;margin-bottom:8px}
.vf-k-kosong p{margin:0}

/* Bilah "Membalas ..." */
.vf-kom-balasinfo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 16px;padding:7px 12px;background:#F2F6FF;border-radius:8px;
  font-size:12px;font-weight:600;color:#0857E0}
.vf-kom-balasinfo[hidden]{display:none}
.vf-kom-balasinfo button{background:none;border:0;padding:0;color:#0857E0;cursor:pointer;
  display:flex;align-items:center}
.vf-kom-balasinfo svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* Baris emoji cepat */
.vf-kom-emoji{display:flex;justify-content:space-between;gap:2px;padding:9px 16px 4px}
.vf-kom-emoji[hidden]{display:none}
.vf-emo{background:none;border:0;padding:2px;font-size:23px;line-height:1;cursor:pointer}
.vf-emo:active{transform:scale(1.25)}

/* Kolom tulis */
.vf-komen-tulis{display:flex;align-items:center;gap:9px;border-top:1px solid #EEF1F5;
  margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
#vfKomenForm{display:flex;flex:1;gap:8px;align-items:center}
#vfKomenInput{flex:1;height:42px;padding:0 15px;font-size:16px;border:0;border-radius:999px;
  background:#F2F4F7;color:#1A202C;-webkit-appearance:none}
#vfKomenInput:focus{outline:0;background:#EDF1F7}
#vfKomenKirim{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;background:#0857E0;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
#vfKomenKirim svg{width:19px;height:19px;fill:currentColor;stroke:none;margin-left:-2px}
#vfKomenKirim:active{background:#043FAD}
.vf-komen-login{display:block;flex:1;text-align:center;padding:12px;border-radius:999px;
  background:#F2F6FF;color:#0857E0;font-size:13.5px;font-weight:700;text-decoration:none}

@media(max-width:380px){
  .vf-k-ava{width:32px;height:32px;font-size:12px}
  .vf-k-anak{margin-left:42px}
  .vf-emo{font-size:20px}
}
/* ==== /KOMENTAR v2 ==== */

/* ==== HEADER: IKON CARI TENGAH, AKUN TAK GANDA, MASKOT DIBUANG (2026-08-07) ==== */
/* 1. Kaca pembesar benar-benar di tengah.
   Sebelumnya tombol ikut alur normal setelah input sehingga turun 4px
   (jarak ikon 14px atas / 6px bawah). Ditempel mutlak + translateY(-50%)
   supaya tetap di tengah berapa pun tinggi kotak carinya. */
.site-header .header-search{position:relative;display:flex;align-items:center}
.site-header .header-search button{
  position:absolute !important;top:50% !important;right:2px !important;
  transform:translateY(-50%);
  height:34px !important;width:38px !important;padding:0 !important;
  display:flex !important;align-items:center;justify-content:center;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:#8B94A3 !important;border-radius:50% !important;cursor:pointer}
.site-header .header-search button:hover{color:#0857E0 !important;background:transparent !important}
.site-header .header-search button svg{display:block;stroke:currentColor;fill:none;stroke-width:2.1}

/* 2. Akun tidak ganda: di PONSEL sudah ada di nav bawah, jadi disembunyikan
   dari header. Di DESKTOP tidak ada nav bawah, jadi tetap ditampilkan
   supaya pengguna desktop tidak kehilangan jalan ke akunnya. */
@media(max-width:820px){
  .site-header .header-actions a[href="akun.php"]{display:none !important}
}

/* 3. Tombol maskot mengambang dibuang - menutupi konten dan mengulang
   ikon Pesan yang sudah ada di header. Elemennya TETAP di DOM karena
   skrip chat mengikat ke sana; hanya disembunyikan. */
.cs-widget-btn{display:none !important}
/* ==== /HEADER RAPI ==== */

/* ==== CHAT CS: TAMPILAN BARU (2026-08-07) ==== */
.cs-widget-panel{position:fixed;right:18px;bottom:18px;z-index:210;width:370px;max-width:calc(100vw - 24px);
  background:#fff;border-radius:16px;overflow:hidden;display:none;flex-direction:column;
  box-shadow:0 18px 48px rgba(16,24,40,.24);border:1px solid #E8EBEF}
.cs-widget-panel.on,.cs-widget-panel[style*="flex"]{display:flex}

/* Kepala */
.cs-widget-head{display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:linear-gradient(135deg,#0857E0,#043FAD);color:#fff}
.cs-ava{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:50%;background:rgba(255,255,255,.18)}
.cs-ava svg{stroke:#fff;fill:none;stroke-width:2}
.cs-head-teks{flex:1;min-width:0}
.cs-head-teks strong{display:block;font-size:14px;font-weight:700;line-height:1.3}
.cs-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.85);margin-top:2px}
.cs-status i{width:7px;height:7px;border-radius:50%;background:#32D583;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(50,213,131,.6);animation:csNyala 2.2s infinite}
@keyframes csNyala{0%{box-shadow:0 0 0 0 rgba(50,213,131,.55)}70%{box-shadow:0 0 0 7px rgba(50,213,131,0)}100%{box-shadow:0 0 0 0 rgba(50,213,131,0)}}
.cs-widget-close{background:rgba(255,255,255,.16);border:0;width:30px;height:30px;border-radius:50%;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cs-widget-close:hover{background:rgba(255,255,255,.3)}
.cs-widget-close svg{stroke:#fff;fill:none;stroke-width:2.2}

/* Badan percakapan */
.cs-widget-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px;background:#F7F9FC;min-height:230px;max-height:46vh;
  display:flex;flex-direction:column;gap:8px}
.chat-empty{margin:auto;text-align:center;color:#98A2B3;font-size:13px;line-height:1.6;padding:10px}

/* Gelembung pesan */
.chat-msg{position:relative;max-width:78%;padding:9px 12px;border-radius:14px;
  font-size:13.5px;line-height:1.55;word-break:break-word;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.chat-msg.lawan{align-self:flex-start;background:#fff;color:#1A202C;border-bottom-left-radius:5px}
.chat-msg.me{align-self:flex-end;background:#0857E0;color:#fff;border-bottom-right-radius:5px}
.chat-msg .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:3px;opacity:.75}
.chat-msg.lawan .who{color:#0857E0;opacity:1}
.chat-msg .waktu{display:block;font-size:10.5px;margin-top:4px;text-align:right;opacity:.65}

/* Pertanyaan cepat */
.cs-cepat{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 4px;background:#F7F9FC}
.cs-cepat.cs-cepat-sembunyi{display:none}
.cs-cepat button{background:#fff;border:1px solid #DCE4EF;border-radius:999px;
  padding:7px 12px;font-size:12px;font-weight:600;color:#0857E0;cursor:pointer;
  transition:background .15s,border-color .15s}
.cs-cepat button:hover{background:#EEF4FF;border-color:#B9CFFB}

/* Nama & komposer */
.cs-widget-nama{padding:10px 14px 0;background:#F7F9FC}
.cs-widget-nama input{width:100%;height:40px;padding:0 14px;font-size:14px;
  border:1px solid #DCE1E9;border-radius:999px;background:#fff}
.cs-widget-nama input:focus{outline:0;border-color:#0857E0;box-shadow:0 0 0 3px rgba(8,87,224,.14)}
.cs-widget-foot{display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:#fff;border-top:1px solid #EEF1F5}
#csWidgetInput{flex:1;height:42px;padding:0 15px;font-size:15px;border:0;border-radius:999px;
  background:#F2F4F7;color:#1A202C;-webkit-appearance:none}
#csWidgetInput:focus{outline:0;background:#EDF1F7}
#csWidgetSend{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;background:#0857E0;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#csWidgetSend svg{width:19px;height:19px;fill:currentColor;stroke:none;margin-left:-2px}
#csWidgetSend:hover{background:#043FAD}

/* Ponsel: penuh dari bawah, tidak menabrak nav */
@media(max-width:820px){
  .cs-widget-panel{right:0;left:0;bottom:0;width:auto;max-width:none;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0}
  .cs-widget-body{max-height:52dvh}
  .cs-widget-foot{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
}
/* ==== /CHAT CS ==== */

/* ==== CARA TERIMA: AMBIL DI TOKO / KURIR (2026-08-07) ==== */
.cara-terima{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-opsi{position:relative;cursor:pointer}
.ct-opsi input{position:absolute;opacity:0;pointer-events:none}
.ct-kotak{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid #DCE1E9;
  border-radius:10px;background:#fff;transition:border-color .15s,background .15s}
.ct-kotak svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:#8B94A3;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ct-teks{min-width:0}
.ct-teks strong{display:block;font-size:13.5px;color:#1A202C}
.ct-teks em{display:block;font-style:normal;font-size:11.5px;color:#8B94A3;margin-top:1px}
.ct-opsi input:checked + .ct-kotak{border-color:#0857E0;background:#F5F8FF}
.ct-opsi input:checked + .ct-kotak svg{stroke:#0857E0}
.ct-opsi input:checked + .ct-kotak strong{color:#0857E0}
@media(max-width:480px){.cara-terima{grid-template-columns:1fr}}
/* ==== /CARA TERIMA ==== */

/* ==== AKUN MEWAH: LOGIN & DAFTAR SEIRAMA (2026-08-07) ==== */
/* Latar: navy dalam + cahaya lembut. Bukan gradien terang-ramai;
   warna gelap yang tenang membuat kartu putih terasa mahal. */
.daftar-page-bg{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px 16px;
  background:#071A3D;
  background-image:
    radial-gradient(900px 520px at 12% 8%, rgba(8,87,224,.42), transparent 62%),
    radial-gradient(680px 420px at 94% 94%, rgba(238,77,45,.10), transparent 62%),
    linear-gradient(160deg,#071A3D 0%,#04122C 100%);
}

/* Kartu: satu bidang, sudut besar, bayangan berlapis (dekat + jauh) -
   inilah yang membedakan kartu "mahal" dari kotak biasa. */
.daftar-modal{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  width:100%;max-width:940px;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(4,18,44,.16),0 24px 70px -12px rgba(4,18,44,.55);
}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:5;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,24,40,.06);color:#5A6577;transition:background .15s,color .15s}
.modal-close:hover{background:rgba(16,24,40,.12);color:#101828}
.modal-close svg{stroke:currentColor;fill:none;stroke-width:2.2}

/* ---- Panel merek kiri: dipakai IDENTIK oleh Login & Daftar ---- */
.akun-brand{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;padding:38px 34px;color:#fff;overflow:hidden;
  background:linear-gradient(158deg,#0B49C9 0%,#073186 55%,#041C4F 100%)}
/* Tekstur halus - memberi kedalaman tanpa ramai */
.akun-brand::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 72%)}
/* Lingkaran cahaya besar di sudut - kesan lapisan */
.akun-brand::after{
  content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.akun-brand > *{position:relative;z-index:1}

.ab-lockup{display:flex;align-items:center;gap:10px}
.ab-lockup img{width:34px;height:34px;object-fit:contain}
.ab-lockup span{font-size:23px;font-weight:800;letter-spacing:.4px;color:#fff}
.ab-tagline{margin:9px 0 0;font-size:12px;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

.ab-nilai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.ab-nilai li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.94)}
.ab-cek{flex:0 0 auto;width:21px;height:21px;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.17)}
.ab-cek svg{stroke:#fff;fill:none;stroke-width:2.6}
.ab-kaki{margin:0;font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.2px}

/* Slide promo di Daftar mengisi ruang yang sama dengan daftar nilai di Login */
.akun-brand .daftar-promo{position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:center;background:none;padding:0;min-height:186px}
.akun-brand .promo-slide{display:none}
.akun-brand .promo-slide.active{display:block;animation:abMasuk .45s ease both}
@keyframes abMasuk{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.akun-brand .promo-slide .tag{display:inline-block;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:10.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:13px}
.akun-brand .promo-slide h3{margin:0 0 9px;font-size:25px;line-height:1.24;font-weight:800;color:#fff}
.akun-brand .promo-slide p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)}
.akun-brand .promo-dots{display:flex;gap:7px;margin-top:22px}
.akun-brand .promo-dots span{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.32);
  transition:width .3s,background .3s}
.akun-brand .promo-dots span.active{width:22px;background:#fff}

/* ---- Panel formulir kanan ---- */
.daftar-form-panel{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.daftar-form-panel h2{font-size:26px;font-weight:800;letter-spacing:-.4px;color:#0B1B33}
.daftar-form-panel > p{font-size:13.5px;color:#68738A}

.daftar-form-panel .form-group{margin-bottom:15px}
.daftar-form-panel label{display:block;font-size:12.5px;font-weight:600;color:#43506B;margin-bottom:6px}
.daftar-form-panel input:not([type="checkbox"]):not([type="radio"]){
  width:100%;height:50px !important;padding:0 15px !important;font-size:15px !important;
  border:1.5px solid #E3E8F0 !important;border-radius:11px !important;background:#FBFCFE !important;
  color:#0B1B33 !important;transition:border-color .16s,box-shadow .16s,background .16s;
  -webkit-appearance:none;box-shadow:none !important}
.daftar-form-panel input:not([type="checkbox"]):not([type="radio"])::placeholder{color:#A6B0C2}
.daftar-form-panel input:not([type="checkbox"]):not([type="radio"]):hover{border-color:#CFD9E8 !important}
.daftar-form-panel input:not([type="checkbox"]):not([type="radio"]):focus{
  outline:0;background:#fff !important;border-color:#0857E0 !important;
  box-shadow:0 0 0 4px rgba(8,87,224,.13) !important}

.password-wrap{position:relative}
.password-wrap input{padding-right:48px !important}
.toggle-password{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:transparent;color:#98A2B3;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.toggle-password:hover{color:#0857E0}
.toggle-password svg{stroke:currentColor;fill:none;stroke-width:1.9}

/* Tombol utama: gradien tipis + bayangan berwarna = terasa berbobot */
.daftar-form-panel .btn-primary,
.daftar-form-panel button[type="submit"]{
  width:100%;height:51px;border:0;border-radius:11px;cursor:pointer;
  font-size:15.5px;font-weight:700;letter-spacing:.2px;color:#fff;
  background:linear-gradient(180deg,#0A63F0,#0847BC);
  box-shadow:0 5px 13px -5px rgba(8,87,224,.45);
  transition:transform .12s,box-shadow .2s,filter .2s}
.daftar-form-panel .btn-primary:hover,
.daftar-form-panel button[type="submit"]:hover{filter:brightness(1.06);
  box-shadow:0 9px 22px -5px rgba(8,87,224,.58)}
.daftar-form-panel .btn-primary:active,
.daftar-form-panel button[type="submit"]:active{transform:translateY(1px)}

/* Pemisah "atau" */
.divider-atau{display:flex;align-items:center;gap:14px;margin:26px 0 20px;
  font-size:12px;color:#98A2B3;letter-spacing:.3px}
.divider-atau::before,.divider-atau::after{content:"";flex:1;height:1px;background:#E9EDF4}

/* Tombol Google: netral, rapi, tinggi sama dengan tombol utama */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:50px;border:1.5px solid #E3E8F0;border-radius:11px;background:#fff;
  font-size:14.5px;font-weight:600;color:#28324A;cursor:pointer;
  transition:border-color .16s,background .16s}
.btn-google:hover{border-color:#CFD9E8;background:#FAFBFD}
.btn-google img,.btn-google svg{width:19px;height:19px}

.daftar-form-panel .alert{border-radius:10px;font-size:13.5px;padding:11px 14px;margin-bottom:14px}

/* ---- Ponsel: panel merek jadi kop ringkas, formulir dapat ruang ---- */
@media(max-width:820px){
  .daftar-page-bg{padding:0;align-items:stretch}
  .daftar-modal{grid-template-columns:1fr;max-width:none;border-radius:0;min-height:100dvh;
    box-shadow:none;align-content:start}
  .akun-brand{padding:26px 22px 24px;gap:16px}
  .akun-brand .ab-nilai,.akun-brand .ab-kaki{display:none}   /* ringkas: nilai jual tak boleh mendorong formulir turun */
  /* Promo memang disembunyikan di HP oleh aturan lama; wadahnya ikut dilipat
     supaya tidak menyisakan ruang kosong. Hasilnya kop Login & Daftar identik. */
  .akun-brand .daftar-promo{display:none !important}
  .akun-brand .promo-slide h3{font-size:19px}
  .akun-brand .promo-slide p{font-size:13px}
  .akun-brand .promo-dots{margin-top:14px}
  .daftar-form-panel{padding:28px 22px calc(34px + env(safe-area-inset-bottom))}
  .daftar-form-panel h2{font-size:23px}
  .modal-close{background:rgba(255,255,255,.18);color:#fff}
  .modal-close:hover{background:rgba(255,255,255,.3);color:#fff}
}
/* ==== /AKUN MEWAH ==== */

/* ==== LOGO HP: MARK BULAT WAJIB TAMPIL (2026-08-07) ==== */
/* Aturan lama di <=820px menyembunyikan SEMUA span di dalam .brand
   (dulu hanya berisi wordmark). Lockup anaLogo() dibungkus <span class="ana-logo">,
   sehingga seluruh logo ikut hilang di ponsel.
   Perbaikan: lockup dikembalikan, HANYA wordmark yang disembunyikan —
   mark bulat WAJIB tetap tampil karena itu identitas merek. */
@media(max-width:820px){
  .site-header .brand .ana-logo{display:inline-flex !important}
  .site-header .brand .ana-logo > span{display:none !important}   /* wadah wordmark (+ .id) */
  .site-header .brand .ana-logo > img{display:block !important}   /* mark bulat: TETAP */
}
/* ==== /LOGO HP ==== */

/* ==== KOTAK CARI: SARAN BERGULIR (2026-08-07) ==== */
/* Lapisan saran diletakkan DI ATAS input. Input tetap yang menerima ketikan;
   lapisan ini murni hiasan (pointer-events:none) supaya tidak mengganggu klik. */
.site-header .header-search{position:relative}
.site-header .header-search input[data-saran]::placeholder{color:transparent}
.cari-gulir{
  position:absolute;left:15px;right:46px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:5px;overflow:hidden;
  pointer-events:none;font-size:14px;color:#9AA4B4;white-space:nowrap}
/* .cg-tetap dihapus: pertanyaan kini jadi item pertama antrean */
.cari-gulir{--cg-h:20px}
.cg-jendela{position:relative;flex:1;min-width:0;height:var(--cg-h);overflow:hidden}
.cg-rel{position:absolute;left:0;top:0;width:100%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.cg-item{display:block;height:var(--cg-h);line-height:var(--cg-h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* hanya SEDIKIT lebih pekat dari teks tetap (#9AA4B4) supaya terbaca sebagai saran, bukan seperti teks yang sudah diketik */color:#7B8699;font-weight:inherit}
.cg-item.cg-tanya{color:#9AA4B4}   /* pertanyaan: sepucat placeholder biasa */
/* Saat pengguna fokus/mengetik, saran menyingkir sepenuhnya. */
.header-search input:focus ~ .cari-gulir,
.cari-gulir.cg-diam{opacity:0;visibility:hidden;transition:opacity .15s}
@media(prefers-reduced-motion:reduce){ .cg-rel{transition:none} }
@media(max-width:820px){ .cari-gulir{left:14px;right:42px;font-size:13.5px;--cg-h:19px} }
/* ==== /SARAN BERGULIR ==== */

/* ==== HALAMAN PRODUK: TOKO, SPEK, DESKRIPSI (2026-08-08) ==== */
.pd-blok{background:#fff;border:1px solid #EDF0F4;border-radius:12px;padding:6px 22px 24px;margin-top:14px}

/* Kartu toko: identitas penjual, pola Shopee tapi tanpa angka yang dikarang */
.pd-toko{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:20px 0;border-bottom:1px solid #EDF0F4}




.pd-btn-garis{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1.4px solid #D6DEEA;border-radius:9px;background:#fff;color:#0857E0;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:.14s}



.pd-judul{font-size:16px;font-weight:700;color:#0B1B33;margin:24px 0 12px}

/* Tabel spesifikasi: label kiri abu, nilai kanan -- terbaca cepat */
.pd-spek{width:100%;border-collapse:collapse;font-size:14px}
.pd-spek th{width:190px;text-align:left;vertical-align:top;font-weight:500;
  color:#8B94A3;padding:9px 16px 9px 0}
.pd-spek td{color:#1A202C;padding:9px 0}
.pd-spek tr + tr th,.pd-spek tr + tr td{border-top:1px solid #F2F5F9}

.pd-desk{font-size:14.5px;line-height:1.75;color:#344054;white-space:normal}

@media(max-width:820px){
  .pd-blok{padding:4px 16px 20px;border-radius:10px}



  .pd-spek th{width:132px;font-size:13px}
  .pd-spek td{font-size:13.5px}
}
/* ==== /HALAMAN PRODUK ==== */

/* ==== KERANJANG: BILAH CHECKOUT MELEKAT (2026-08-08) ==== */
/* Di DESKTOP kartu Ringkasan Belanja sudah cukup, jadi bilah disembunyikan. */
.krj-bar{display:none}

@media(max-width:820px){
  /* Kartu ringkasan tetap ada (rincian subtotal/ongkir), tapi tombolnya
     dipindah ke bilah supaya selalu terjangkau ibu jari. */
  .cart-layout .card:last-of-type .btn-block{display:none}

  .krj-bar{
    display:block;position:fixed;left:0;right:0;z-index:75;
    bottom:calc(56px + env(safe-area-inset-bottom));   /* di atas nav aplikasi */
    background:#fff;border-top:1px solid #E7EBF1;
    box-shadow:0 -6px 18px rgba(16,24,40,.10)}
  .krj-bar-in{display:flex;align-items:center;gap:12px;padding:10px 14px}
  .krj-bar-tot{flex:1;min-width:0;line-height:1.25}
  .krj-bar-tot span{display:block;font-size:11.5px;color:#8B94A3}
  .krj-bar-tot strong{display:block;font-size:19px;font-weight:800;color:#EE4D2D}
  .krj-bar-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    min-width:158px;height:46px;padding:0 22px;border-radius:10px;
    background:linear-gradient(180deg,#0A63F0,#0847BC);color:#fff;
    font-size:15px;font-weight:700;text-decoration:none;
    box-shadow:0 5px 13px -5px rgba(8,87,224,.45)}
  .krj-bar-btn:active{transform:translateY(1px)}

  /* Ruang bawah supaya isi terakhir tidak tertutup bilah */
  .cart-layout{padding-bottom:78px}
}
/* ==== /KERANJANG BILAH ==== */

/* ==== ULASAN PRODUK + BINTANG (2026-08-08) ==== */
.ul-ringkas{display:flex;align-items:center;gap:7px;margin:6px 0 2px;font-size:13.5px;color:#475467}
.ul-ringkas strong{color:#0B1B33;font-size:14.5px}
.ul-jml{font-weight:500;color:#8B94A3;font-size:14px}

.ul-form{background:#F7F9FC;border:1px solid #EDF0F4;border-radius:10px;padding:14px;margin-bottom:16px}
.ul-form-atas{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ul-form-label{font-size:13px;font-weight:600;color:#344054}
.ul-form-label em{font-style:normal;font-weight:500;color:#12B76A}
.ul-pilih button{background:none;border:0;font-size:26px;line-height:1;color:#E4E7EC;cursor:pointer;padding:0 2px;transition:transform .1s}
.ul-pilih button.on{color:#FFB400}
.ul-pilih button:active{transform:scale(1.15)}
.ul-form textarea{width:100%;border:1px solid #DCE1E9;border-radius:8px;padding:10px 12px;font-size:14px;background:#fff}
.ul-form textarea:focus{outline:0;border-color:#0857E0;box-shadow:0 0 0 3px rgba(8,87,224,.12)}

.ul-daftar{display:flex;flex-direction:column}
.ul-item{padding:14px 0;border-top:1px solid #F2F5F9}
.ul-item:first-child{border-top:0}
.ul-kepala{display:flex;align-items:center;gap:10px}
.ul-ava{width:34px;height:34px;border-radius:50%;background:#0857E0;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto}
.ul-nama{font-size:13.5px;font-weight:600;color:#0B1B33}
.ul-verif{font-style:normal;font-weight:600;font-size:10.5px;color:#12B76A;
  background:#EBFAF1;border-radius:5px;padding:2px 6px;margin-left:4px}
.ul-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#98A2B3;margin-top:2px}
.ul-isi{margin:9px 0 0;font-size:14px;line-height:1.65;color:#344054}
.ul-kosong{color:#8B94A3;font-size:13.5px;margin:4px 0 0}
/* ==== /ULASAN ==== */

/* ==== DROPDOWN SARAN PENCARIAN (2026-08-08) ==== */
.cs-box{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;
  background:#fff;border:1px solid #E7EBF1;border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.14);overflow:hidden;max-height:70vh;overflow-y:auto}
.cs-sec{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 6px;font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:#98A2B3}
.cs-hapus{background:none;border:0;color:#0857E0;font-size:11px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0}
.cs-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;
  border:0;background:#fff;text-align:left;font-size:13.5px;color:#1A202C;
  cursor:pointer;text-decoration:none;transition:background .1s}
.cs-item:hover{background:#F5F8FF}
.cs-prod img,.cs-noimg{width:34px;height:34px;border-radius:7px;object-fit:cover;
  background:#EEF2F7;flex:0 0 auto}
.cs-prod-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-prod-harga{flex:0 0 auto;font-weight:700;color:#EE4D2D;font-size:12.5px}
@media(max-width:820px){ .cs-box{max-height:60vh} }
/* ==== /DROPDOWN SARAN ==== */

/* ==========================================================================
   Perbaikan tata letak dropdown saran pencarian (rapikan saran pencarian)
   Masalahnya: .cs-item adalah <button>, dan tombol tidak melebar sendiri di
   wadah block. Akibatnya tiap saran menyusut jadi kotak ~38px dengan isi
   di tengah, sehingga "Sering Dicari" dan kata sarannya tampak berjajar di
   satu baris dan terlempar ke kanan. Diperbaiki dengan memaksa tiap saran
   jadi BARIS penuh, rata kiri, seperti daftar saran di marketplace.
   ========================================================================== */
.cs-box{overflow:hidden}

.cs-box .cs-sec{
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#98a2b3;
  padding:12px 14px 6px;
}
.cs-box .cs-sec + .cs-sec,
.cs-box .cs-item + .cs-sec{border-top:1px solid #f0f3f8;margin-top:6px}

.cs-box .cs-hapus{
  border:0;background:none;padding:0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#0857E0;
}
.cs-box .cs-hapus:hover{text-decoration:underline}

/* inti perbaikan: saran = satu baris penuh, rata kiri */
.cs-box .cs-item{
  display:flex;
  width:100%;
  box-sizing:border-box;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  color:#0b1a32;
  line-height:1.35;
  cursor:pointer;
}
.cs-box .cs-item:hover,
.cs-box .cs-item:focus-visible{background:#f4f7fc}
.cs-box .cs-item:active{background:#eaf0fa}

/* saran kata: diberi ikon kaca pembesar supaya jelas ini "cari", bukan produk */
.cs-box .cs-kata::before{
  content:"";
  width:16px;height:16px;flex:0 0 auto;opacity:.45;
  background:no-repeat center/16px 16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a32' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
}
.cs-box .cs-kata{color:#334155}

/* saran produk: gambar kecil, nama memanjang, harga menempel di kanan */
.cs-box .cs-prod img,
.cs-box .cs-noimg{
  width:38px;height:38px;flex:0 0 auto;
  border-radius:8px;object-fit:cover;background:#eef1f6;
}
.cs-box .cs-noimg{display:block}
.cs-box .cs-prod-nama{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;
}
.cs-box .cs-prod-harga{
  margin-left:auto;flex:0 0 auto;
  font-size:13px;font-weight:700;color:#0857E0;white-space:nowrap;
}

@media (max-width:560px){
  .cs-box .cs-item{padding:11px 12px}
  .cs-box .cs-prod-harga{font-size:12px}
}
/* --- cs-item-paksa -------------------------------------------------------
   Ada aturan lain yang membuat saran MELAYANG KE KANAN dan menyusut selebar
   isinya (float), sehingga "Sering Dicari" dan kata sarannya tampak berada
   di satu baris. Float wajib dimatikan; selama masih float, tinggi kotak
   juga tidak ikut memuat barisnya. Karena aturan itu menang di kaskade,
   di sini dipaksa dengan !important. --------------------------------- */
.cs-box .cs-item{
  float:none !important;
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  padding:9px 14px !important;
  margin:0 !important;
}
.cs-box{overflow:visible !important}
.cs-box .cs-sec{clear:both}
/* --- cs-item-statis ------------------------------------------------------
   INI biang keladinya: setiap saran ternyata position:absolute, jadi keluar
   dari alur normal -- tinggi kotak hanya memuat judulnya (37px), tiap saran
   menyusut selebar isinya dan menumpuk di kanan. Dikembalikan ke alur normal
   supaya jadi daftar baris seperti seharusnya. ---------------------------- */
.cs-box .cs-item{
  position:static !important;
  inset:auto !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  transform:none !important;
}
/* === mode-aplikasi ========================================================
   Perbaikan khusus saat dipasang di layar utama HP (standalone).
   1) Bilah status HP memakai warna theme_color. Dulu #0857E0 sedangkan
      header #043FAD, jadi terlihat dua warna biru bertumpuk. Sekarang
      keduanya #043FAD dan header dilebarkan ke belakang bilah status
      supaya corak khas Anadrom ikut naik ke atas -- menyatu, bukan
      dua balok terpisah.
   2) Di halaman Video, kartu produk & tombol Lihat Produk tertutup nav
      bawah. Dinaikkan setinggi nav + area aman HP.
   ======================================================================== */
@media (display-mode: standalone){
  .site-header{
    padding-top:calc(env(safe-area-inset-top, 0px)) !important;
    background-position:center calc(-1 * env(safe-area-inset-top, 0px)) !important;
  }
  /* HANYA header yang menyatu dengan bilah status; isi halaman di
     bawahnya sengaja TIDAK diwarnai biru. */
}

/* Video: hanya tombol "Lihat Produk" dan deret suka/komentar/bagikan yang
   perlu dinaikkan dari nav bawah. Kartu produk SENGAJA dibiarkan di posisi
   aslinya. Putaran ke-3: tombol Lihat Produk dinaikkan lagi, deret ikon
   dibiarkan karena sudah pas. */
.vf-pil{
  bottom:calc(168px + env(safe-area-inset-bottom, 0px)) !important;
}
.vf-rail{
  bottom:calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width:820px){
  .vf-pil{bottom:calc(176px + env(safe-area-inset-bottom, 0px)) !important}
  .vf-rail{bottom:calc(158px + env(safe-area-inset-bottom, 0px)) !important}
}
/* Video imersif ala Shopee/TikTok: gambar naik sampai belakang bilah status.
   Bilah atasnya sendiri sudah melayang (position:fixed) dan sudah memberi
   ruang aman, jadi yang kurang cuma viewport-fit=cover + theme-color hitam
   di video.php. Di sini tinggal merapikan tajuknya. */
.vf-tajuk{display:flex;align-items:center;line-height:1}


body.video-feed{background:#000}
/* ==== ana-satukan-bilah-status (8 Agu 2026) ====
   Keluhan user: di aplikasi terpasang, biru area notifikasi dan biru header
   (logo-pencarian-keranjang) tidak sama.
   Biang keladinya BUKAN theme_color (sudah #043FAD sejak awal), melainkan
   sorotan radial putih .14 pada .site-header: baris paling ATAS header
   ter-render sekitar #1B51B5, sedangkan bilah status dicat rata #043FAD.
   Perbaikan: lapisan #043FAD pekat di beberapa piksel teratas header lalu
   memudar, jadi garis singgung kedua area persis sewarna. Kilau + corak
   Anadrom tetap hidup di bawahnya (tidak dibuang).
   Pakai ::before z-index:-1 supaya TIDAK perlu menyentuh background-image
   (data-URI corak) maupun posisi anak header - dropdown saran pencarian
   yang absolut tidak boleh terganggu. */
@media (display-mode: standalone){
  .site-header::before{
    content:'';
    position:absolute; left:0; right:0; top:0;
    height:calc(46px + env(safe-area-inset-top, 0px));
    background:linear-gradient(180deg,
        #043FAD 0,
        #043FAD calc(6px + env(safe-area-inset-top, 0px)),
        rgba(4,63,173,.55) calc(22px + env(safe-area-inset-top, 0px)),
        rgba(4,63,173,0) calc(44px + env(safe-area-inset-top, 0px)));
    pointer-events:none;
    z-index:-1;
  }
}
/* ==== ana-banner-penuh (8 Agu 2026) ====
   User: di aplikasi terpasang banner harus UJUNG KE UJUNG, tanpa sudut
   membulat, dan langsung menempel di bawah bilah pencarian tanpa jeda putih.
   Sela 30px itu asalnya dari margin-top .hero-top-row (20px) + .hero3 (10px).
   Lebar penuh memakai trik margin negatif 50% - 50vw supaya TIDAK bergantung
   pada angka padding .container (kalau padding berubah, ini tetap benar).
   aspect-ratio disamakan dengan rasio asli berkas banner (1520x456) supaya
   tidak ada strip abu di bawah gambar DAN gambarnya tidak terpotong; anchor
   tetap punya tinggi walau berkas gambarnya gagal muat.
   WAJIB !important: gaya .hero3.geser disuntik oleh main.js saat runtime,
   jadi urutan cascade-nya SETELAH style.css. */
@media (display-mode: standalone){
  .hero-top-row{ margin-top:0 !important; }
  .hero-bungkus{
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    width:auto !important;
    border-radius:0 !important;
  }
  .hero3, .hero3.geser{ margin-top:0 !important; gap:0 !important; }
  .hero3 > a, .hero3.geser > a{
    border-radius:0 !important;
    aspect-ratio:1520 / 456 !important;
  }
  .hero3 > a > img, .hero3 img{
    border-radius:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important; display:block !important;
  }
}
/* ==== Popup Promo Agustus / HUT RI ke-81 (8 Agu 2026) ====
   Merah-putih dipakai HANYA sebagai aksen musiman di kepala kartu; tombol
   utama tetap biru merek supaya identitas Anadrom tidak hilang. */
.promo81{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.promo81[hidden]{display:none}
.promo81-latar{position:absolute;inset:0;background:rgba(6,20,50,.62);backdrop-filter:blur(2px);opacity:0;transition:opacity .22s ease}
.promo81.on .promo81-latar{opacity:1}
.promo81-kartu{position:relative;width:min(340px,100%);background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(4,20,60,.34);transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .26s ease}
.promo81.on .promo81-kartu{transform:none;opacity:1}
.promo81-x{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#20365f;font-size:20px;line-height:28px;cursor:pointer;padding:0}
.promo81-x:active{background:#e9eef7}
/* kepala: merah di atas, putih di bawah - bendera, bukan blok merah penuh */
.promo81-atas{position:relative;height:138px;background:linear-gradient(180deg,#D7261F 0 54%,#fff 54% 100%);
  padding:14px 16px 0;overflow:hidden}
.promo81-atas::after{content:'';position:absolute;left:-30px;top:-40px;width:190px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.13)}
.promo81-kiri{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.promo81-pita{display:inline-block;background:rgba(255,255,255,.94);color:#B01812;font-weight:800;
  font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.promo81-angka{font-size:52px;line-height:.92;font-weight:900;color:#fff;letter-spacing:-2px;
  text-shadow:0 2px 0 rgba(0,0,0,.12)}
.promo81-hut{font-size:11px;font-weight:700;color:#8c1410;letter-spacing:.2px}
.promo81-maskot{position:absolute;right:-6px;bottom:0;height:132px;width:auto;z-index:1;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.promo81-isi{padding:14px 18px 18px}
.promo81-isi h3{margin:0 0 6px;font-size:18px;color:#0f2a5c}
.promo81-isi p{margin:0 0 14px;font-size:13px;line-height:1.5;color:#4b5a75}
.promo81-aksi{display:flex;gap:8px}
.promo81-btn,.promo81-btn2{flex:1;text-align:center;padding:11px 10px;border-radius:11px;font-weight:700;
  font-size:13.5px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.promo81-btn{background:#043FAD;color:#fff}
.promo81-btn:active{background:#03318a}
.promo81-btn2{background:#eef2f9;color:#20365f}
.promo81-btn2:active{background:#e2e8f4}
.promo81-btn:focus-visible,.promo81-btn2:focus-visible,.promo81-x:focus-visible{outline:2px solid #0857E0;outline-offset:2px}
@media (max-width:360px){
  .promo81-atas{height:126px}
  .promo81-maskot{height:118px}
  .promo81-angka{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .promo81-latar,.promo81-kartu{transition:none}
}
/* Selama popup promo terbuka, spanduk "Pasang aplikasi" (z-index 9998,
   lebih tinggi dari popup) disembunyikan supaya layar tidak sesak. */
body.p81-buka #anaPasang{display:none !important}
/* =======================================================================
   ana-akun-v2 - Login & Daftar dirombak (9 Agu 2026)
   Keluhan user: terasa POPUP, kurang menyatu, kurang berkelas.
   Arah: satu bidang utuh, bukan kartu mengambang. Di HP panel merek
   menyatu dengan lembar putih lewat sudut membulat besar; di layar lebar
   jadi dua kolom (merek | formulir) dalam satu wadah.
   Blok ini SENGAJA di ekor style.css supaya menang atas aturan lama tanpa
   perlu membongkar 74 aturan .daftar-*/.akun-brand yang sudah ada.
   ======================================================================= */

/* ---------- Latar halaman: satu gradasi merek, tanpa kesan backdrop modal ---------- */
.daftar-page-bg{
  min-height:100dvh;
  background:radial-gradient(1200px 620px at 8% -12%, #1552D6 0%, rgba(21,82,214,0) 62%),
             linear-gradient(160deg, #062E86 0%, #043FAD 46%, #052C74 100%) !important;
  display:flex; align-items:stretch; justify-content:center;
  padding:0 !important;
}
.daftar-page-bg::before,.daftar-page-bg::after{display:none !important}

/* ---------- Wadah: bukan modal. Di HP memenuhi layar. ---------- */
.daftar-modal{
  width:100% !important; max-width:none !important; margin:0 !important;
  border-radius:0 !important; box-shadow:none !important; background:transparent !important;
  display:flex !important; flex-direction:column !important; overflow:visible !important;
  animation:none !important;
}

/* ---------- Tautan kembali (pengganti tombol silang ala popup) ---------- */
.akun-kembali{
  position:absolute; top:16px; left:16px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.86); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  padding:7px 12px 7px 9px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  -webkit-tap-highlight-color:transparent;
}
.akun-kembali:hover{background:rgba(255,255,255,.16); color:#fff}
.akun-kembali:active{transform:translateY(1px)}
.akun-kembali:focus-visible{outline:2px solid #fff; outline-offset:2px}
.modal-close{display:none !important}

/* ---------- Panel merek ---------- */
.akun-brand{
  position:relative; background:transparent !important; box-shadow:none !important;
  padding:64px 26px 30px !important; text-align:left;
}
.akun-brand::before,.akun-brand::after{display:none !important}
.ab-lockup{display:flex; align-items:center; gap:12px; margin:0 0 10px}
.ab-lockup img{height:38px; width:auto; display:block}
.ab-tagline{
  margin:0; color:rgba(255,255,255,.72); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---------- Lembar formulir: menyatu, sudut atas besar ---------- */
.daftar-form-panel{
  background:#fff !important;
  border-radius:26px 26px 0 0 !important;
  padding:30px 22px 40px !important;
  flex:1 1 auto; box-shadow:0 -10px 40px rgba(2,16,48,.18) !important;
}
.daftar-form-panel h2{
  margin:0 0 6px !important; font-size:25px !important; line-height:1.22;
  letter-spacing:-.022em; color:#0B1F4B !important; font-weight:800;
}
.daftar-form-panel h2 + p{margin:0 0 22px; color:#65758F; font-size:14px}

/* Label kecil berkarakter - detail yang membuat terasa mahal */
.daftar-form-panel label{
  display:block; margin:0 0 7px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#5A6B87 !important;
}
.daftar-form-panel input{
  width:100%; height:52px !important; box-sizing:border-box;
  padding:0 16px !important; font-size:16px !important; color:#0B1F4B;
  background:#fff !important;
  border:1.5px solid #E1E8F5 !important; border-radius:13px !important;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.daftar-form-panel input::placeholder{color:#9FADC4}
.daftar-form-panel input:hover{border-color:#CBD8EE !important}
.daftar-form-panel input:focus{
  border-color:#043FAD !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(4,63,173,.13) !important; outline:none;
}
.daftar-form-panel .field{margin-bottom:16px}

/* Tombol utama: gradasi halus + bayangan berwarna = kesan premium */
.daftar-form-panel button[type=submit],.daftar-form-panel .btn-primary{
  width:100%; height:52px !important; border:0; border-radius:13px !important;
  font-size:15.5px !important; font-weight:800; letter-spacing:.01em; color:#fff;
  background:linear-gradient(180deg,#0A55D8,#043FAD) !important;
  box-shadow:0 8px 20px rgba(4,63,173,.28) !important;
  cursor:pointer; transition:filter .15s, transform .08s, box-shadow .15s;
}
.daftar-form-panel button[type=submit]:hover{filter:brightness(1.06)}
.daftar-form-panel button[type=submit]:active{
  transform:translateY(1px); box-shadow:0 4px 12px rgba(4,63,173,.24) !important;
}

/* Pemisah 'atau' dengan garis rambut */
.daftar-form-panel .atau,.daftar-form-panel .divider{
  display:flex; align-items:center; gap:12px; margin:20px 0;
  color:#93A2BB; font-size:12.5px; letter-spacing:.04em;
}
.daftar-form-panel .atau::before,.daftar-form-panel .atau::after,
.daftar-form-panel .divider::before,.daftar-form-panel .divider::after{
  content:''; flex:1; height:1px; background:#E6ECF7;
}

.daftar-form-panel .btn-google{
  width:100%; height:52px !important; border-radius:13px !important;
  border:1.5px solid #E1E8F5 !important; background:#fff !important;
  font-size:14.5px !important; font-weight:700; color:#22314F !important;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:border-color .15s, background .15s;
}
.daftar-form-panel .btn-google:hover{background:#F7F9FD !important; border-color:#CBD8EE !important}

/* ---------- Layar lebar: dua kolom dalam satu wadah ---------- */
@media (min-width:900px){
  .daftar-page-bg{align-items:center; padding:40px 24px !important}
  .daftar-modal{
    flex-direction:row !important; max-width:940px !important;
    border-radius:24px !important; overflow:hidden !important;
    box-shadow:0 40px 90px rgba(2,14,44,.42), 0 2px 0 rgba(255,255,255,.06) inset !important;
    min-height:560px; background:#fff !important;
  }
  .akun-brand{
    flex:0 0 42%; padding:44px 38px !important;
    display:flex; flex-direction:column; justify-content:space-between;
    background:radial-gradient(700px 400px at 15% 0%, #1552D6 0%, rgba(21,82,214,0) 60%),
               linear-gradient(160deg,#062E86,#043FAD 52%,#052C74) !important;
  }
  .akun-kembali{top:22px; left:22px}
  .ab-nilai{display:block; margin:26px 0 0; padding:0; list-style:none}
  .ab-nilai li{
    display:flex; align-items:flex-start; gap:11px; margin-bottom:13px;
    color:rgba(255,255,255,.9); font-size:14px; line-height:1.45;
  }
  .ab-cek{flex:0 0 auto; width:22px; height:22px; border-radius:50%;
    background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#fff}
  .ab-kaki{margin:24px 0 0; color:rgba(255,255,255,.55); font-size:12px}
  .daftar-form-panel{
    flex:1 1 auto; border-radius:0 !important; box-shadow:none !important;
    padding:52px 46px !important; display:flex; flex-direction:column; justify-content:center;
  }
  .daftar-form-panel h2{font-size:28px !important}
}

/* Di HP daftar nilai disembunyikan: efisien, layar tidak penuh sebelum formulir */
@media (max-width:899px){
  .ab-nilai,.ab-kaki{display:none !important}
}
/* ana-akun-v2b - kelas pemisah yang SEBENARNYA adalah .divider-atau
   (ketahuan dari DOM; tebakan awal .atau/.divider meleset). */
.daftar-form-panel .divider-atau{
  display:flex !important; align-items:center; gap:12px; margin:22px 0 18px !important;
  color:#93A2BB; font-size:12.5px; letter-spacing:.05em; text-align:center;
  border:0 !important; background:none !important;
}
.daftar-form-panel .divider-atau::before,
.daftar-form-panel .divider-atau::after{
  content:''; flex:1 1 auto; height:1px; background:#E6ECF7; display:block;
}
.daftar-form-panel .divider-atau span{flex:0 0 auto; padding:0 2px; background:none}

/* Napas sedikit lebih longgar - kesan lapang itu bagian dari kesan mahal */
.daftar-form-panel h2 + p{margin-bottom:24px !important}
.daftar-form-panel > p:last-child{margin-top:20px; text-align:center; color:#65758F; font-size:13.5px}
/* ana-akun-v2c - garis 'atau' masih tembus di belakang kata karena aturan lama
   menggambar garis penuh. Daripada berperang kekhususan, katanya diberi latar
   putih + padding sehingga menutup garis apa pun yang lewat di belakangnya. */
.daftar-form-panel .divider-atau span{
  background:#fff !important; padding:0 12px !important; position:relative; z-index:1;
}
/* =======================================================================
   ana-thumb-sementara (9 Agu 2026) - pelat produk yang belum berfoto.
   Digambar SEPENUHNYA oleh CSS: corak & mark ditulis sekali di sini, kartu
   hanya menyumbang nama produk. NOL permintaan tambahan ke server.
   (Versi pertama memakai endpoint PHP per kartu dan membuat hosting
   tersendat - jangan diulang.)
   Hilang sendiri begitu produk punya foto: produkCard hanya memakai pelat
   ini kalau kolom gambar kosong.
   ======================================================================= */
.produk-card .thumb{position:relative}
.thumb-sementara{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; padding:14px 12px;
  text-align:center; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(4,63,173,.045) 0 2px, rgba(0,0,0,0) 2px 26px),
    linear-gradient(180deg,#F8FBFF,#E9F0FC);
}
/* mark Anadrom sebagai cap air - didefinisikan sekali, dipakai semua kartu */
.thumb-sementara::before{
  content:''; width:38%; max-width:86px; aspect-ratio:1; opacity:.75;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2702 2702'%3E%3Cg fill='%23BFD3EF'%3E%3Cpath d='M120 1905c-373,-825 162,-1797 1076,-1901l-1076 1901z'/%3E%3Cpath d='M2582 1901c372,-825 -162,-1797 -1076,-1901l1076 1901z'/%3E%3Cpath d='M2257 2352c-239,217 -557,350 -906,350 -345,0 -660,-130 -899,-344l1 -2c554,-300 1150,-339 1804,-4z'/%3E%3Cpath d='M1351 265l1056 1851c-700,-359 -1412,-359 -2112,0l1056 -1851z'/%3E%3C/g%3E%3C/svg%3E");
}
.thumb-sementara span{
  font-size:12px; font-weight:700; line-height:1.32; color:#42618F;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-width:100%;
}
@media (max-width:420px){
  .thumb-sementara{gap:7px; padding:10px 8px}
  .thumb-sementara span{font-size:11px}
  .thumb-sementara::before{max-width:64px}
}
/* [23 Agu 2026] Popup pratinjau invoice. Halaman PDF digambar ke kanvas dan dijajar
   mendatar; satu lembar tampil penuh, lebih dari satu bisa digeser. */
.anaPvOverlay{ position:fixed; inset:0; background:rgba(15,23,42,.72); z-index:100000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s ease; }
.anaPvOverlay.show{ opacity:1; }
/* [23 Agu 2026] Lebar kotak dikunci. Dengan width:auto, lebar kanvas ASLI halaman
   (1190 px pada skala 2) ikut dihitung sebagai lebar maksimum, sehingga kotak melebar
   jauh melebihi kertas dan menyisakan ruang gelap menganga di kanan tombol. */
.anaPvKotak{ background:#0f172a; border-radius:14px; width:min(760px,96vw); height:min(88vh,900px);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4);
  transform:scale(.97); transition:transform .18s ease; }
.anaPvOverlay.show .anaPvKotak{ transform:scale(1); }
.anaPvBar{ display:flex; align-items:center; gap:12px; padding:10px 14px; color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,.08); }
.anaPvJudul{ font-size:13.5px; font-weight:600; }
/* [23 Agu 2026] Tombol tutup di ujung kanan bilah - kebiasaan baku jendela, dan
   mengklik di dekat judul tidak lagi berisiko menutup pratinjau. */
.anaPvBar .anaPvTutup{ margin-left:auto; }
.anaPvHal{ font-size:11.5px; color:#94a3b8; }
.anaPvUnduh{ margin-left:auto; font-size:12px; color:#93c5fd; text-decoration:none; }
.anaPvUnduh:hover{ text-decoration:underline; }
.anaPvTutup{ border:0; background:transparent; color:#cbd5e1; font-size:22px; line-height:1; cursor:pointer; padding:0 2px; }
.anaPvTutup:hover{ color:#fff; }
/* Halaman dirapatkan ke kanan supaya tidak ada jurang kosong sebelum tombol; saat
   satu lembar saja, halaman dan panel aksi jadi satu kesatuan yang terbaca. */
/* flex:0 1 auto supaya lebar kolom halaman mengikuti lebar kertas, bukan memenuhi
   sisa jendela - kalau memenuhi, muncul jurang gelap di kiri halaman. */
/* [15 Sep 2026, permintaan Owner: 'perbaiki previewnya' - nota 2 halaman]
   justify-content:center pada wadah yang ISINYA MELEBAR (dua halaman) membuat
   luapan jatuh ke KIRI dan ke KANAN sekaligus - dan luapan kiri tidak bisa
   digulir, scrollLeft tidak boleh negatif. Akibatnya halaman 1 terpotong di sisi
   kirinya (kolom ITEM hilang) dan tidak ada cara melihatnya. Sejak nota bisa
   lebih dari satu halaman, ini langsung kelihatan.
   Sekarang flex-start, dan penengahan diserahkan ke margin:auto pada halamannya:
   satu halaman tetap di tengah, dua halaman tetap bisa digulir dari ujung ke ujung. */
.anaPvIsi{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  overflow-x:hidden; overflow-y:auto; padding:14px;
  scroll-snap-type:y proximity; cursor:default; }
.anaPvIsi::-webkit-scrollbar{ width:8px; height:8px; }
.anaPvIsi::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
/* max-width + max-height sekaligus: kanvas mengecil sendiri mengikuti sisi yang lebih
   sempit, jadi SATU halaman selalu utuh di kotak - tidak pernah terpotong kiri-kanan. */
.anaPvHalaman{ max-width:100%; max-height:100%; width:auto; height:auto; background:#fff;
  border-radius:6px; scroll-snap-align:center; box-shadow:0 6px 24px rgba(0,0,0,.35);
  flex:none; margin:0 auto; }
.anaPvMuat{ margin:auto; color:#94a3b8; font-size:12.5px; }
.anaPvTitik{ display:flex; gap:6px; justify-content:center; padding:0 0 12px; }
.anaPvTitik span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; }
.anaPvTitik span.aktif{ background:#fff; }
/* [23 Agu 2026] Ruang kanan popup pratinjau: aksi berkas dan pengiriman. */
.anaPvBadan{ flex:1; display:flex; min-height:0; }
.anaPvBadan .anaPvIsi{ flex:1; }
.anaPvAksi{ width:212px; flex:none; padding:14px; border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.anaPvGrup{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#64748b; margin:6px 0 2px; }
.anaPvTbl{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:9px;
  background:rgba(255,255,255,.04); color:#e2e8f0; font-size:13px; font-weight:500;
  cursor:pointer; text-decoration:none; font-family:inherit; }
.anaPvTbl:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; }
/* Aturan lain di berkas ini menggarisbawahi setiap tautan saat disentuh - tombol di
   panel ini bukan tautan bacaan, jadi dikecualikan. */
.anaPvTbl, .anaPvTbl:hover, .anaPvTbl:focus{ text-decoration:none !important; }
.anaPvTbl:disabled{ opacity:.5; cursor:default; }
.anaPvTbl svg{ width:17px; height:17px; flex:none; }
.anaPvWa{ border-color:rgba(37,211,102,.35); color:#7ee2a8; }
.anaPvWa:hover{ background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.55); color:#bbf7d0; }
.anaPvKabar{ font-size:11.5px; line-height:1.5; color:#94a3b8; margin-top:6px; }
.anaPvKabar.baik{ color:#86efac; }
.anaPvKabar.buruk{ color:#fca5a5; }
@media (max-width:820px){
  .anaPvBadan{ flex-direction:column; }
  .anaPvAksi{ width:auto; border-left:0; border-top:1px solid rgba(255,255,255,.08); flex-direction:row; flex-wrap:wrap; }
  .anaPvTbl{ width:auto; flex:1 1 45%; }
  .anaPvGrup{ display:none; }
}

/* [30 Agu 2026] Ruang untuk ikon kaca pembesar di kotak cari.
   Aturan input umum di berkas ini memakai kekhususan yang sama dan
   letaknya lebih bawah, jadi kalau ditaruh di dekat .tbl-search-wrap ia
   kalah urutan dan padding-nya kembali ke 13px - teks tetap tertutup
   ikon. Karena itu ditaruh paling akhir. */
.tbl-search-wrap input{padding-left:34px !important;}
/* !important dipakai sadar, bukan malas: aturan input umum di sistem ini
   memakai delapan :not() berderet sehingga kekhususannya 0-8-1, sementara
   selektor ini 0-1-1. Menyamakannya berarti menyalin kedelapan :not() itu
   ke sini - lebih rapuh dan lebih sulit dibaca daripada satu !important
   yang hanya menyentuh padding kiri pada satu pola kotak cari. */