/* =====================================================================
   nm-desktop.css — tampilan KOMPUTER (layar >=1024px) website customer
   Dimuat di <head> tiap halaman customer dengan media="(min-width:1024px)",
   jadi HP & tablet (<1024px) TIDAK terpengaruh sama sekali.
   Isi per bagian: UMUM (lebar isi, footer) · BELANJA (beranda, katalog,
   produk, promo) · TRANSAKSI (keranjang, checkout, pembayaran, lacak) ·
   AKUN & INFO (akun, blog, artikel, panduan, kebijakan, loker, 404, notifikasi).
   Aturan per halaman dikunci dengan penanda halaman (body:has(...), class
   halaman) supaya tidak bocor ke halaman lain. Browser lama tanpa :has()
   tetap menampilkan tampilan lama (aman).
   Membatalkan: hapus file ini atau baris <link ... nm-desktop.css> di halaman.
   ===================================================================== */

/* ===== UMUM: lebar isi & footer (semua halaman customer) ===== */

/* Lebar isi maksimal di komputer: 1200px, layar >=1400px: 1280px (dulu 1080px; di >=1700px sampai 1460px
   sehingga baris terlalu panjang dibaca). html:root supaya menang dari :root bawaan halaman. */
html:root{--maxw:1200px}
@media (min-width:1400px){html:root{--maxw:1280px}}

/* Footer (includes/footer.php): kolom lurus dengan header (lebar isi sama), urutan
   Info toko | Bantuan (menu) | Hubungi Kami (alamat, WA, email, jam). Isi tidak berubah. */
html .nm-foot{padding:44px 24px 24px;font-size:14px;margin-top:40px}
html .nm-foot-in{max-width:calc(var(--maxw) - 28px);grid-template-columns:1.35fr .8fr 1.25fr;gap:56px}
html .nm-foot-in>.nm-foot-bantu{order:2}
html .nm-foot-in>div:nth-child(2){order:3}
html .nm-foot .nm-foot-nama{font-size:18px}
html .nm-foot h4{font-size:13px;margin-bottom:14px}
html .nm-foot li{margin-bottom:10px}
html .nm-foot-bawah{max-width:calc(var(--maxw) - 28px);margin-top:36px;padding-top:18px}

/* ===== BELANJA: beranda, katalog, produk, promo (khusus komputer >=1024px) =====
   File ini hanya termuat di layar >=1024px (lihat nm-desktop.css). Lebar isi = var(--maxw)
   dengan padding samping 16px, sama dengan bilah header, supaya tepi kiri-kanan lurus.
   Grid produk: 4 kolom (1024–1279px), 5 kolom (>=1280px). */

/* ===== Beranda (index.php + includes/sections/) ===== */

/* Banner biru: teks & kolom cari lurus dengan logo header */
html body section.hero>.hero-in{max-width:var(--maxw);padding:0 16px}
html body section.hero{padding-top:56px;padding-bottom:52px}

/* Isi beranda: satu lebar dengan header (dulu padding ganda 24px + 24px → menjorok ke dalam) */
html body .content.wrap{max-width:var(--maxw);padding:28px 16px 8px}
html body .content .section{padding:0;margin-top:40px}
html body .content .section:first-child{margin-top:0}
html body .content .sec-head{margin-bottom:16px}
html body .content .sec-head .tt h2{font-size:18px}
html body .content .sec-head .tt p{font-size:13px}

/* Kartu langkah (Cara Order / Keunggulan): sedikit lebih lega */
html body .content .minirow{gap:16px}

/* ===== Grid produk (beranda & katalog): 4 kolom, >=1280px 5 kolom ===== */
html body .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (min-width:1280px){html body .pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ===== Katalog (katalog.php — juga /search.php & /kategori/<slug>) ===== */
html body .kt-wrap{max-width:var(--maxw);padding:28px 16px 48px}
html body .kt-judul{font-size:22px;margin-bottom:16px}
html body .kt-cats{margin-bottom:20px;gap:10px}
html body .kt-cat{font-size:13px;padding:9px 16px}
html body .kt-bar{margin-bottom:16px}
html body .kt-bar .n{font-size:14px}
html body .kt-sort select{font-size:13px}
html body .kt-wrap .pcard-body{padding:12px 14px 14px}
html body .kt-wrap .nm-page{margin-top:28px}

/* ===== Halaman produk (produk.php) ===== */
/* Lebar sama dengan header; 2 kolom: foto kiri (menempel saat digulir), info & pemesanan kanan */
html body main.container{max-width:var(--maxw);padding:24px 16px 48px}
html body .prod-top{grid-template-columns:420px minmax(0,1fr);gap:32px;margin-bottom:24px}
@media (min-width:1280px){html body .prod-top{grid-template-columns:500px minmax(0,1fr);gap:48px}}
html body .prod-top>.sec:first-child{position:sticky;top:116px;border-radius:16px;overflow:hidden}
html body .prod-top .pg-main{max-height:none;aspect-ratio:1/1}
/* Kolom kanan: kotak jumlah, ringkasan & tombol memenuhi kolom (dulu dibatasi 520px → sisa kosong di kanan) */
html body .prod-top>.sec-right{padding:0}
html body .prod-top .jml-card,
html body .prod-top .mg-sum,
html body .prod-top .mg-cta,
html body .prod-top .mg-note,
html body .prod-top .mg-add,
html body .prod-top .mk,
html body .prod-top .qty-inline,
html body .prod-top .var-belum{max-width:none}
html body .prod-top .jml-card{padding:18px 20px;border-radius:16px}
html body .prod-top .mg-cta{margin-top:16px;gap:12px}
html body .prod-top .mg-cta button{height:52px;font-size:15px}
/* 20 Okt 2026 (#135): "html body .tt-name{font-size:24px;line-height:1.25}" dibuang — tidak pernah berlaku
   (hal-produk.css memaksa 23px!important; line-height 1.25 sudah sama). Judul produk di komputer tetap 23px. */
/* Lembar pilih varian: di komputer tidak selebar layar, tapi panel 560px di tengah bawah.
   Saat tertutup disembunyikan (dulu tetap ada di luar layar dan bisa kena Tab keyboard). */
html body .vs-sheet{left:50%;right:auto;width:560px;margin-left:-280px;visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s}
html body .vs-sheet.on{visibility:visible;transition:transform .3s ease,visibility 0s}

/* Bagian bawah (deskripsi, voucher, ulasan, rekomendasi): kartu putih selebar container */
html body main.container>.sec{background:#fff;border:1px solid var(--line,#EDF1F6);border-radius:16px;margin-bottom:16px}
html body main.container>.sec>.card-body,
html body main.container>.sec>.review-sec,
html body main.container>.sec>.voucher-sec{padding:20px 24px;margin:0;box-shadow:none;border:0}
html body main.container>#sec-rekomendasi{padding:20px 24px!important}  /* menimpa style inline */
html body #sec-rekomendasi .sec-hd{padding:0!important;margin-bottom:14px!important}
/* Rekomendasi: grid (bukan geser ke samping) */
html body #relatedScroll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;overflow:visible}
@media (min-width:1280px){html body #relatedScroll{grid-template-columns:repeat(5,minmax(0,1fr))}}
html body #relatedScroll .rpc{width:auto;flex:none;transform:none!important}  /* transform dari efek geser HP */
html body #relatedScroll .rpc:nth-child(n+11){display:none}

/* ===== Promo (promo.php) ===== */
html body .pwrap{max-width:var(--maxw);padding:28px 16px 48px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start}
/* Judul halaman: di HP ada di header, di komputer tidak → ditampilkan di sini */
html body .pwrap>h1.nm-sr{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  white-space:normal;grid-column:1/-1;font-size:22px;font-weight:800;letter-spacing:-.028em}
html body .pwrap>.plead,
html body .pwrap>.pempty,
html body .pwrap>.pcard{grid-column:1/-1}
html body .pwrap>.plead{margin:-6px 0 0}
html body .pwrap>.pv{margin:0;height:100%}
html body .pwrap>.pv .left{width:120px}  /* nilai "Rp 20.000" tidak patah 2 baris */
html body .pwrap>.pempty{padding:48px 20px}
/* Cara pakai kode: 4 langkah berjajar (bukan daftar sempit memanjang) */
html body .pwrap>.pcard{margin-top:8px;padding:20px 24px}
html body .pwrap>.pcard h2{font-size:16px;margin-bottom:12px}
html body .pwrap>.pcard ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  padding-left:0;list-style-position:inside}
html body .pwrap>.pcard li{font-size:14px;line-height:1.55;background:#F6F8FA;border-radius:12px;padding:12px 14px}
html body .pwrap>.pbtn{grid-column:1/-1;justify-self:start;margin-top:0;padding:14px 32px;font-size:14px}

/* transaksi — keranjang, checkout, pembayaran, lacak pesanan.
   File ini hanya dimuat di layar >=1024px (lewat nm-desktop.css), jadi HP & tablet tidak berubah.
   Tiap aturan dikunci ke halamannya lewat body:has(<penanda unik halaman>), karena nm-desktop.css dimuat
   di semua halaman customer dan nama kelas seperti .wrap/.section/.total-row dipakai halaman lain juga.
   Browser tanpa :has() cukup memakai tampilan lama. */

/* ===== Keranjang (keranjang.php) ===== */
/* Penanda: #dsnPita (pita desain, selalu dicetak di keranjang).
   2 kolom: kiri = pita desain, toko & barang, promo, rekomendasi; kanan = ringkasan harga (menempel saat digulir
   sampai bawah halaman — sticky di grid dibatasi <body>, jadi rekomendasi sengaja di kolom kiri supaya tidak tertimpa).
   <body> dijadikan grid; elemen position:fixed (header, lembar desain, toast) tidak ikut grid.
   Baris terakhir 1fr supaya kartu ringkasan tidak meregangkan jarak antar kartu kiri. */
html body:has(> #checkout-bar){
  display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;
  grid-template-rows:repeat(8,auto) 1fr;align-items:start;
  max-width:var(--maxw);margin:0 auto;padding-left:14px;padding-right:14px;padding-bottom:48px}
html body:has(> #checkout-bar)>div:not(.hdr):not(.nm-util):not(.checkout-bar):not(.tst):not(.vs-overlay):not(.dsn-sheet):not(.dsn-ov){
  max-width:none;margin-left:0;margin-right:0}
html body:has(> #checkout-bar)>.dsn-pita{grid-column:1;margin-top:16px;border:1px solid #FDBA74;border-radius:var(--nm-r,12px)}
html body:has(> #checkout-bar)>.seller-sec,
html body:has(> #checkout-bar)>#promo-wrap,
html body:has(> #checkout-bar)>.rec-sec{grid-column:1;margin-top:16px;margin-bottom:0;border:1px solid var(--line);border-radius:var(--nm-r-lg,16px);overflow:hidden}
html body:has(> #checkout-bar)>.rec-sec{margin-top:24px;padding:20px 20px 24px}
html body:has(#dsnPita) .seller-hd{padding:16px 20px;border-bottom:1px solid var(--line)}
html body:has(#dsnPita) .seller-name{font-size:15px}
html body:has(#dsnPita) .cart-item{padding:16px 20px;gap:14px}
html body:has(#dsnPita) .ci-name{font-size:15px}
/* tombol geser Hapus/Serupa (khusus HP) jangan mengintip 1px di tepi kanan */
html body:has(#dsnPita) .ci-wrap:not(.swiped) .ci-actions{visibility:hidden}
html body:has(#dsnPita) .voucher-row{padding:14px 20px;border-bottom:0}
html body:has(#dsnPita) .rec-title{font-size:18px;margin-bottom:16px}
html body:has(#dsnPita) .rec-grid{grid-template-columns:repeat(3,1fr);gap:16px}
@media (min-width:1280px){html body:has(#dsnPita) .rec-grid{grid-template-columns:repeat(4,1fr)}}
html body:has(#dsnPita) .rec-card:hover{box-shadow:0 8px 20px -10px rgba(16,24,40,.25)}

/* Bilah checkout bawah -> kartu "Ringkasan Belanja" di kolom kanan */
html body:has(#dsnPita) .checkout-bar{
  grid-column:2;grid-row:1/-1;position:sticky;top:116px;left:auto;right:auto;bottom:auto;
  margin-top:16px;flex-wrap:wrap;align-items:center;gap:0 10px;
  padding:0 20px 20px;border:1px solid var(--line);border-radius:var(--nm-r-lg,16px);
  box-shadow:0 1px 3px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.03);z-index:5}
html body:has(#dsnPita) .checkout-bar::before{
  content:"Ringkasan Belanja";flex:0 0 100%;order:-1;font-size:16px;font-weight:800;color:var(--ink);
  padding:16px 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line);letter-spacing:-.02em}
html body:has(#dsnPita) .cb-all-label{font-size:14px}
html body:has(#dsnPita) .cb-total{font-size:22px}
html body:has(#dsnPita) .cb-total-label{margin-top:2px}
html body:has(#dsnPita) .cb-btn{flex:0 0 100%;margin-top:16px;padding:14px 22px;font-size:15px;border-radius:var(--nm-r,12px)}
html body:has(#dsnPita) .cb-btn:hover:not(:disabled){background:var(--brand-600)}
html body:has(#dsnPita) .cb-edit-actions{flex:0 0 100%;margin-top:16px}
html body:has(#dsnPita) .cb-edit-actions button{flex:1;border-radius:var(--nm-r,12px)}

/* Keranjang kosong: satu kartu di tengah selebar isi */
html body:has(#dsnPita)>.empty{max-width:calc(var(--maxw) - 28px);margin:24px auto 0;padding:72px 20px;min-height:0;border:1px solid var(--line);border-radius:var(--nm-r-lg,16px)}


/* ===== Checkout (checkout.php) ===== */
/* Penanda: #formCO. Hanya CSS (markup/JS/form tidak diubah).
   Tiap langkah (panel) jadi 2 kolom: isian kiri, ringkasan kanan (menempel saat digulir).
   Baris terakhir grid 1fr supaya kartu ringkasan yang panjang tidak meregangkan jarak antar kartu kiri. */
html body:has(#formCO) .page-wrap{max-width:var(--maxw);padding:20px 14px 24px}
html body:has(#formCO) .step-bar-inner{max-width:560px}
html body:has(#formCO) .step-panel.active{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;
  grid-template-rows:repeat(7,auto) 1fr;align-items:start}
html body:has(#formCO) .step-panel.active>*{grid-column:1}
html body:has(#formCO) #panel-1>.section:last-child,
html body:has(#formCO) #panel-2>.summary-card,
html body:has(#formCO) #panel-3>.summary-card{grid-column:2;grid-row:1/-1;position:sticky;top:calc(var(--hh,54px) + 16px)}
html body:has(#formCO) .step-panel .section,
html body:has(#formCO) .step-panel .summary-card,
html body:has(#formCO) .step-panel .recap-addr,
html body:has(#formCO) .step-panel .recap-items{margin:0 0 16px}
html body:has(#formCO) .section-header{padding:16px 20px}
html body:has(#formCO) .section-title{font-size:15px}
html body:has(#formCO) .section-body{padding:16px 20px}
html body:has(#formCO) .summary-header{padding:14px 20px;font-size:15px}
html body:has(#formCO) .sum-item,
html body:has(#formCO) .total-section{padding-left:20px;padding-right:20px}
/* 19 Okt 2026 (#284): nama produk & rincian harga 14px (dulu 13px) — sama dengan HP (hal-checkout.css) */
html body:has(#formCO) .sum-name{font-size:14px}
html body:has(#formCO) .total-row{font-size:14px}
html body:has(#formCO) .total-row.grand{font-size:16px}
/* Alamat tersimpan 2 kolom; tombol "Tambah Alamat Baru" selebar penuh */
html body:has(#formCO) #panel-1 .section-body:has(> .addr-card){display:grid;grid-template-columns:1fr 1fr;gap:12px}
html body:has(#formCO) #panel-1 .section-body:has(> .addr-card)>.addr-card{margin:0}
html body:has(#formCO) #panel-1 .section-body:has(> .addr-card)>:not(.addr-card){grid-column:1/-1;margin-top:0}
/* Bilah tombol bawah: lurus dengan isi; tombol utama selebar kolom ringkasan (tidak full-width) */
html body:has(#formCO) .nav-bar{padding:12px 0}
html body:has(#formCO) .nav-bar-inner{max-width:var(--maxw);padding:0 14px;justify-content:flex-end}
html body:has(#formCO) .nav-bar-inner .btn-next{flex:0 0 380px}
html body:has(#formCO) .nav-bar-inner .btn-prev{padding:13px 20px}
html body:has(#formCO) .nav-bar-inner .btn-prev:hover{background:#E9EDF2}


/* ===== Pembayaran (pembayaran.php) ===== */
/* Penanda: .wrap > .nm-det ("Detail pesanan", selalu ada). Hanya CSS.
   Isi .wrap dibagi 2 kolom dengan multi-kolom (urutan isi tetap sama dengan HP):
   langkah / panduan / pita peringatan selebar penuh di atas; kiri = cara bayar (+ upload bukti);
   kanan mulai dari kartu sesudah "Upload Bukti" (Langkah Selanjutnya), atau dari "Detail pesanan"
   bila tidak ada upload. */
html body:has(.wrap > .nm-det) .wrap{max-width:var(--maxw);padding:20px 14px 32px;columns:2;column-gap:24px}
html body:has(.wrap > .nm-det) .wrap>*{break-inside:avoid}
html body:has(.wrap > .nm-det) .wrap>.step-bar,
html body:has(.wrap > .nm-det) .wrap>.pay-guide,
html body:has(.wrap > .nm-det) .wrap>div[style*="FEF3F2"]{column-span:all}
html body:has(.wrap > .nm-det) .wrap>.card:has(form)+.card{break-before:column}
html body:has(.wrap > .nm-det) .wrap:not(:has(> .card form))>.nm-det{break-before:column}
html body:has(.wrap > .nm-det) .step-bar{justify-content:center;padding:14px 24px}
html body:has(.wrap > .nm-det) .sb-item{max-width:200px}
html body:has(.wrap > .nm-det) .pay-guide{justify-content:center;padding:14px 24px;gap:16px}
html body:has(.wrap > .nm-det) .pg-item{flex:0 1 auto}
html body:has(.wrap > .nm-det) .pg-txt{font-size:14px}/* 19 Okt 2026 (#284): 13px -> 14px (isi) */
html body:has(.wrap > .nm-det) .pg-line{width:40px}
html body:has(.wrap > .nm-det) .card-hd{font-size:15px;padding:16px 20px}
html body:has(.wrap > .nm-det) .card-body{padding:16px 20px}


/* ===== Lacak Pesanan (tracking.php) ===== */
/* Penanda: .search-card / .result-card / .err-box (hanya ada di halaman ini).
   Form cek pesanan tetap sempit di tengah; daftar "Pesanan Saya" lebih lebar, pesanan 2 kolom. */
html body:has(.wrap > .search-card) .wrap{max-width:560px;padding-top:24px}
html body:has(.wrap > .trk-daftar) .wrap{max-width:880px}
html body:has(.wrap > .trk-daftar) .trk-daftar{padding:24px!important}
html body:has(.wrap > .trk-daftar) .search-title{font-size:18px}
html body:has(.wrap > .trk-daftar) .ord-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html body:has(.wrap > .trk-daftar) .ord-row:hover{border-color:var(--blue)}
/* Hasil lacak: kartu pesanan kiri, pelacakan paket + tombol di kanan.
   Baris terakhir 1fr supaya kartu kiri yang panjang tidak meregangkan jarak kartu kanan. */
html body:has(.wrap > .result-card) .wrap{
  max-width:var(--maxw);padding:20px 14px 32px;display:grid;grid-template-columns:minmax(0,1fr) 400px;
  grid-template-rows:repeat(5,auto) 1fr;column-gap:24px;align-items:start}
html body:has(.wrap > .result-card) .wrap>*{grid-column:2}
html body:has(.wrap > .result-card) .wrap>.result-card{grid-column:1;grid-row:1/-1;margin-bottom:0}
html body:has(.wrap > .result-card) .wrap>.err-box{grid-column:1/-1}
html body:has(.wrap > .result-card) :is(.result-header,.status-row,.progress-wrap,.detail-body,.total-section){padding-left:20px;padding-right:20px}
html body:has(.wrap > .result-card) .order-code{font-size:16px}
html body:has(.wrap > .result-card) .detail-body{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
html body:has(.wrap > .result-card) .detail-body>*{grid-column:1/-1}
html body:has(.wrap > .result-card) .detail-body>.det-section:nth-of-type(1){grid-column:1}
html body:has(.wrap > .result-card) .detail-body>.det-section:nth-of-type(2){grid-column:2}

/* akun-info — halaman akun & info. Seluruh file hanya dimuat di layar >=1024px (lewat nm-desktop.css).
   Lebar isi mengikuti header: max-width var(--maxw) + padding samping 14px (sama dengan .nm-bar). */

/* ===== Akun (akun.php) ===== */
/* Beranda akun: 2 kolom — kartu profil biru di kiri (ikut menempel saat digulir), menu di kanan.
   Hanya untuk beranda akun (punya .ak-grp); sub-halaman Profil/Alamat tetap satu kolom di tengah.
   row-gap 0 + margin bawah per kartu: kartu profil membentang banyak baris kosong tanpa menambah jarak. */
html body.ak-page main.ak:has(> .ak-grp){max-width:var(--maxw);padding:28px 14px 40px;display:grid;
  grid-template-columns:320px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
html body.ak-page main.ak:has(> .ak-grp) > *{grid-column:2;margin:0 0 18px}
html body.ak-page main.ak:has(> .ak-grp) > .ak-top{grid-column:1;grid-row:1 / span 40;margin:0;
  position:sticky;top:118px;padding:6px 22px 24px;border-radius:20px}
/* Kartu profil di kolom kiri: foto di atas, nama & kontak di bawahnya */
html body.ak-page main.ak:has(> .ak-grp) .ak-prof{flex-direction:column;align-items:flex-start;gap:14px;margin-top:6px;position:relative}
html body.ak-page main.ak:has(> .ak-grp) .ak-ava{width:76px;height:76px;font-size:26px}
html body.ak-page main.ak:has(> .ak-grp) .ak-prof-tx{width:100%;gap:3px}
html body.ak-page main.ak:has(> .ak-grp) .ak-prof-tx b{font-size:18px}
html body.ak-page main.ak:has(> .ak-grp) .ak-prof-tx span{font-size:13px}
html body.ak-page main.ak:has(> .ak-grp) .ak-prof-go{position:absolute;top:22px;right:0}
html body.ak-page main.ak:has(> .ak-grp) .ak-prof:hover .ak-prof-go{background:rgba(255,255,255,.28)}
/* Grup menu di kanan: baris jadi petak 2 kolom supaya tidak memanjang selebar layar */
html body.ak-page main.ak:has(> .ak-grp) .ak-grp{gap:10px}
html body.ak-page main.ak:has(> .ak-grp) .ak-grp-t{font-size:13px;padding:0 4px}
html body.ak-page main.ak:has(> .ak-grp) .ak-list{display:grid;grid-template-columns:1fr 1fr}
html body.ak-page main.ak:has(> .ak-grp) .ak-row{padding:16px 18px;min-height:72px}
html body.ak-page main.ak:has(> .ak-grp) .ak-row:only-child{grid-column:1 / -1;min-height:0}
html body.ak-page main.ak:has(> .ak-grp) .ak-row+.ak-row::before{display:none}
html body.ak-page main.ak:has(> .ak-grp) .ak-row:nth-child(n+3){border-top:1px solid #EEF2F6}
html body.ak-page main.ak:has(> .ak-grp) .ak-row:nth-child(odd):not(:only-child){border-right:1px solid #EEF2F6}
html body.ak-page main.ak:has(> .ak-grp) a.ak-row:hover{background:#F7FAFD}
html body.ak-page main.ak:has(> .ak-grp) .ak-lengkap{padding:16px 18px 16px 20px}
html body.ak-page main.ak:has(> .ak-grp) .ak-lengkap:hover{box-shadow:0 2px 10px rgba(12,46,77,.08)}
html body.ak-page main.ak:has(> .ak-grp) .ak-hapus{margin:0 auto 4px}
html body.ak-page main.ak:has(> .ak-grp) .ak-ver{margin:0;padding:0}

/* Sub-halaman (Profil, Alamat, ubah alamat pesanan): satu kolom di tengah, sedikit lebih lega */
html body.ak-page main.ak{max-width:880px;padding-top:28px}
html body.ak-page main.ak .ak-top-sub{margin-top:0}
html body.ak-page main.ak .card-bd .btn{min-width:180px;justify-content:center}

/* ===== Notifikasi (notifikasi.php) ===== */
html body:has(.nf) .nf{max-width:760px}
html body:has(.nf) .nf h1{font-size:22px}
html body:has(.nf) .nf-sub{font-size:13px}
html body:has(.nf) .nf-it{padding:16px 20px;gap:14px}
html body:has(.nf) .nf-jd{font-size:14px}
html body:has(.nf) .nf-isi{font-size:13px}
html body:has(.nf) .nf-w{font-size:12px}
html body:has(.nf) .nf-baru{font-size:12px}

/* ===== Hapus Akun (hapus-akun.php) ===== */
/* Sudah kartu di tengah (560px); cukup dirapikan: tombol tidak memanjang penuh */
html body:has(.ha) .ha{max-width:600px}
html body:has(.ha) .ha .kt{padding:18px 20px}

/* ===== Blog (blog.php) ===== */
html body:has(.article-grid) .wrap:has(> .article-grid){max-width:var(--maxw);padding:28px 14px 8px}
html body:has(.article-grid) .blog-hero{padding:44px 44px;border-radius:24px;margin-bottom:26px}
html body:has(.article-grid) .blog-hero h1{font-size:32px}
html body:has(.article-grid) .blog-hero p{font-size:15px;max-width:560px}
html body:has(.article-grid) .article-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
html body:has(.article-grid) .article-card .card-body{padding:18px 20px 16px}
html body:has(.article-grid) .article-card .card-title{font-size:16px}
html body:has(.article-grid) .article-card .card-desc{font-size:13.5px}
/* Sampul tanpa gambar: 16:9 (16:10 terlalu tinggi di kartu lebar) */
html body:has(.article-grid) .card-img:not(.ada-gambar){aspect-ratio:16/9}
/* Menu bawah HP tersembunyi di komputer → sisa ruang kosong di bawah footer dibuang */
html body:has(.article-grid),html body:has(.article-wrap){padding-bottom:0}

/* ===== Artikel (artikel.php, /blog/<slug>) ===== */
/* 2 kolom: artikel di kiri (lebar teks ±700–760px), produk & artikel terkait di kanan */
html body:has(.article-wrap) .wrap:has(> .article-wrap){max-width:var(--maxw);padding:0 14px 8px;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;column-gap:28px;row-gap:0;align-items:start}
html body:has(.article-wrap) .wrap:has(> .article-wrap) > nav{grid-column:1 / -1;padding-top:18px!important}
html body:has(.article-wrap) .wrap:has(> .article-wrap) > .article-wrap{grid-column:1;grid-row:2 / span 10;margin:16px 0 0}
html body:has(.article-wrap) .wrap:has(> .article-wrap) > div:not(.article-wrap){grid-column:2}
html body:has(.article-wrap) .article-cover:not(.ada-gambar){height:300px}
html body:has(.article-wrap) .article-meta{padding:32px 32px 0}
html body:has(.article-wrap) .article-title{font-size:30px;line-height:1.25}
html body:has(.article-wrap) .share-row{margin:16px 32px 0}
html body:has(.article-wrap) .article-body{padding:28px 32px 32px}
html body:has(.article-wrap) .prose,html body:has(.article-wrap) .prose p,html body:has(.article-wrap) .prose li{font-size:16px}
html body:has(.article-wrap) .prose h2{font-size:21px}
html body:has(.article-wrap) .prose h3{font-size:18px}
html body:has(.article-wrap) .cta-box{margin:0 32px 32px;padding:20px 22px}
/* Kolom kanan: daftar produk 1 kolom (aslinya grid 2 kolom lewat style inline, jadi perlu !important) */
html body:has(.article-wrap) .wrap:has(> .article-wrap) > div[style] > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
html body:has(.article-wrap) .related-grid{grid-template-columns:1fr}
@media (min-width:1280px){
  html body:has(.article-wrap) .wrap:has(> .article-wrap){grid-template-columns:minmax(0,1fr) 340px;column-gap:32px}
  html body:has(.article-wrap) .article-meta{padding:36px 48px 0}
  html body:has(.article-wrap) .share-row{margin:16px 48px 0}
  html body:has(.article-wrap) .article-body{padding:30px 48px 36px}
  html body:has(.article-wrap) .cta-box{margin:0 48px 36px}
}

/* ===== Panduan Desain (panduan-desain.php) ===== */
/* Isi melebar sejajar header; bagian dipasangkan 2 kolom, spesifikasi 3 kolom */
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid){max-width:var(--maxw);padding:28px 14px 8px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;align-items:stretch}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) > *{margin:0}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) > .hero,
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) > .sec:nth-child(2),
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) > .sec:nth-child(7),
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) > .cta-box{grid-column:1 / -1}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .hero{padding:36px 36px;border-radius:20px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .hero h1{font-size:26px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .hero p{max-width:760px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .sec{padding:22px 24px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .req-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .step-title{font-size:14px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .format-name{font-size:14px}
html body:has(.bleed-visual) .wrap:has(> .sec .req-grid) .cta-box{padding:28px}

/* ===== Kebijakan Privasi (kebijakan-privasi.php) ===== */
/* Daftar isi jadi kolom kiri yang menempel saat digulir; teks di kanan dibatasi ±760px */
html body:has(.kp-isi) .kp{max-width:var(--maxw);padding:54px 14px 40px;display:grid;
  grid-template-columns:280px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
html body:has(.kp-isi) .kp > *{grid-column:2}
html body:has(.kp-isi) .kp > .kp-top{grid-column:1 / -1;padding:28px 32px;margin-bottom:20px}
html body:has(.kp-isi) .kp-top h1{font-size:28px}
html body:has(.kp-isi) .kp-top p{max-width:820px}
html body:has(.kp-isi) .kp > .kp-isi{grid-column:1;grid-row:2 / span 40;position:sticky;top:118px;margin:0;padding:18px 18px}
html body:has(.kp-isi) .kp-isi ol{columns:1}
html body:has(.kp-isi) .kp-isi li{font-size:13px;line-height:2}
html body:has(.kp-isi) .kp > .kp-card{padding:22px 28px 20px;margin-bottom:14px}
html body:has(.kp-isi) .kp-card h2{font-size:17px;margin-bottom:10px}
html body:has(.kp-isi) .kp-card > p,html body:has(.kp-isi) .kp-card > ul,html body:has(.kp-isi) .kp-card > h3{max-width:760px}
html body:has(.kp-isi) .kp-tbl{font-size:13px}

/* ===== Karir / Lowongan (loker.php, /karir) ===== */
/* Halaman mandiri (tanpa header situs). Cukup huruf kecil dinaikkan ke min 12px & hero lebih lega */
html body:has(.jobs) .hero:has(> .hero-in){padding:48px 16px 44px}
html body:has(.jobs) .hero-h1{font-size:32px}
html body:has(.jobs) .hero-sub{font-size:14.5px}
html body:has(.jobs) .tag{font-size:12px}
html body:has(.jobs) .jb-h{font-size:12px}
html body:has(.jobs) .jb-meta-it{font-size:12px}
html body:has(.jobs) .apply-note,html body:has(.jobs) .amodal-note{font-size:12px}
html body:has(.jobs) .job-head{padding:18px 20px}
html body:has(.jobs) .job-body{padding:0 20px 20px}
html body:has(.jobs) .btn-apply{max-width:360px;margin-left:auto;margin-right:auto}

/* ===== 404 (404.php) ===== */
html body .wrap:has(> .code){max-width:960px;padding:56px 14px 48px}
html body .wrap:has(> .code) .code{font-size:96px}
html body .wrap:has(> .code) .title{font-size:26px}
html body .wrap:has(> .code) .sub{font-size:15px}
html body .wrap:has(> .code) .prod-section{margin-top:48px}
html body .wrap:has(> .code) .prod-title{font-size:16px}
html body .wrap:has(> .code) .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
html body .wrap:has(> .code) .prod-img{height:auto;aspect-ratio:1/1}
html body .wrap:has(> .code) .prod-body{padding:12px 14px}
html body .wrap:has(> .code) .prod-name{font-size:13px}
html body .wrap:has(> .code) .prod-price{font-size:13px}