/* Fitur v3.0: favorit, bandingkan, varian paket, voucher, saran pencarian, filter tersimpan, sengketa, dll. Memakai token :root dari style.css. */
.subh{font:600 17px 'Poppins',sans-serif;margin:18px 0 10px}.subh small{color:var(--mut);font-weight:400}
.chk{display:flex;align-items:center;gap:8px;font-size:14px}

/* Favorit */
.favf{margin:0;display:contents}
.favb{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.18);transition:.15s;padding:0}
.favb svg{width:19px;height:19px;fill:none}.favb:hover{color:#ef4444;transform:scale(1.08)}.favb.on{color:#ef4444}.favb.on svg{fill:currentColor}.favb:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.gpcard .favb{top:8px;right:8px;width:32px;height:32px;background:#fff;border:1px solid var(--line);box-shadow:none}.gpcard .gp-h{padding-right:34px}
.sp-act{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-bottom:6px}.sp-act .favb{position:static;border:1px solid var(--line);box-shadow:none}

/* Bandingkan */
.cmpb{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;padding:4px 8px;border:1px solid var(--line);border-radius:99px;background:#fff;white-space:nowrap}
.cmpb input{accent-color:var(--brand);margin:0}.gp-f{flex-wrap:wrap}.sp-act .cmpb{padding:7px 12px;font-size:13px}
#cmp-tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bn,60px) + env(safe-area-inset-bottom) + 10px);z-index:58;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100% - 20px);padding:10px 14px;background:#0f172a;color:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.35);font-size:13px}
#cmp-tray[hidden]{display:none}#cmp-tray .ci{background:rgba(255,255,255,.14);border-radius:99px;padding:3px 10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cmp-tray a.go{background:#fff;color:var(--brand);font-weight:700;padding:7px 14px;border-radius:9px}#cmp-tray a.go[aria-disabled=true]{opacity:.45;pointer-events:none}#cmp-tray button{background:none;border:0;color:#cbd5e1;cursor:pointer;font-size:13px;text-decoration:underline}
@media(min-width:960px){#cmp-tray{bottom:20px}}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.cmp th,.cmp td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.cmp thead th{font:600 15px 'Poppins',sans-serif;background:#f8fafc}
.cmp tbody th{position:sticky;left:0;background:#fff;font-weight:600;color:var(--mut);font-size:13px;min-width:120px}.cmp td.best{background:#ecfdf5;color:#047857;font-weight:700}.cmp-x{font:500 12px 'Inter';color:#b91c1c}

/* Varian paket */
.tier-pick{display:grid;gap:8px;margin:14px 0 4px}.tier-opt{display:block;cursor:pointer}.tier-opt input{position:absolute;opacity:0;pointer-events:none}
.tier-card{display:block;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;transition:.15s}
.tier-opt input:checked+.tier-card{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(29,78,216,.12)}.tier-opt input:focus-visible+.tier-card{outline:2px solid var(--brand);outline-offset:2px}
.tier-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.tier-h b{font:600 15px 'Poppins',sans-serif}.tier-h em{font:700 15px 'Poppins',sans-serif;font-style:normal;color:var(--price)}
.tier-m{display:block;font-size:12px;color:var(--mut);margin-top:2px}.tier-f{margin:8px 0 0;padding:0;list-style:none;font-size:13px;color:#334155}.tier-f li{padding-left:18px;position:relative;margin-top:3px}.tier-f li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.tier-tbl{overflow-x:auto}.tier-tbl table{width:100%;border-collapse:collapse;min-width:480px;font-size:14px}.tier-tbl th,.tier-tbl td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.tier-tbl thead th{font:600 15px 'Poppins',sans-serif}.tier-tbl tbody th{color:var(--mut);font-size:13px;width:130px}
.tiers-ed{display:grid;gap:12px}@media(min-width:760px){.tiers-ed{grid-template-columns:repeat(3,1fr)}}.tier-ed{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafcff}

/* Voucher & promo */
.vrow{display:flex;gap:8px}.vrow input{flex:1;min-width:0;margin:0;text-transform:uppercase}.vrow .btn{flex:none;margin:0!important;width:auto!important}
.vmsg{font-size:13px;margin-top:6px}.vmsg.ok{color:#047857}.vmsg.err{color:#b91c1c}
.promo-banner{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:13px}
.vbox2{margin-bottom:8px}

/* Saran pencarian */
.sg-host{position:relative}.sg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:90;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.18);overflow:hidden;max-height:60vh;overflow-y:auto;text-align:left}
.sg[hidden]{display:none}.sg a{display:flex;gap:10px;align-items:center;padding:10px 14px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid #f1f5f9}.sg a:last-child{border:0}
.sg a:hover,.sg a.on{background:var(--brand-l)}.sg a i{font:600 11px 'Inter';font-style:normal;color:var(--brand);background:#fff;border:1px solid #c7d7fb;border-radius:99px;padding:1px 8px;flex:none}.sg a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsearch.sg-host,.hsearch .sg-host{position:relative}

/* Filter tersimpan */
.sf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}.sf-chip{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:99px;font-size:13px;overflow:hidden}
.sf-chip a{padding:6px 6px 6px 12px;color:var(--brand);font-weight:600}.sf-x{margin:0;display:inline}.sf-x button{border:0;background:none;color:var(--mut);cursor:pointer;padding:6px 10px 6px 4px;font-size:16px;line-height:1}.sf-x button:hover{color:#b91c1c}
.sf-save summary{cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:var(--brand);padding:6px 12px;border:1px dashed #93c5fd;border-radius:99px;list-style:none}.sf-save summary::-webkit-details-marker{display:none}.sf-save .ico-s{width:16px;height:16px}
.sf-save form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.sf-save input[type=text]{flex:1;min-width:180px;margin:0}

/* Ulasan & laporan */
.reply{margin:8px 0 0 14px;padding:8px 12px;background:#f1f5f9;border-left:3px solid var(--brand);border-radius:0 10px 10px 0;font-size:13px}.reply p{margin:2px 0 0;color:#334155;white-space:pre-line}.reply small{color:var(--mut)}

/* Sengketa */
.dopen summary{cursor:pointer}.dtl{display:grid;gap:12px;margin-top:10px}.dti{border-left:3px solid var(--line);padding:2px 0 2px 14px}.dti.open{border-color:#dc2626}.dti.decision{border-color:#059669}.dti.evidence{border-color:#2563eb}
.dth{font-size:13px}.dth small{color:var(--mut);margin-left:6px}.dti p{margin:4px 0 0;font-size:14px;white-space:pre-line;word-break:break-word}
.evd-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.evd-img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}.evd-url{font-size:13px;color:var(--brand);word-break:break-all}
.blw-dtl-adm .dti{border-left:3px solid #c3c4c7;padding-left:10px;margin-bottom:8px}.blw-dtl-adm .evd-img{width:120px;height:90px;object-fit:cover}

/* Pesan ulang & daftar pesanan */
.orow2{display:flex;gap:10px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.orow2:hover{border-color:var(--brand)}
.orow2 .ock{display:flex;align-items:center;padding:0 0 0 14px;margin:0}.orow2 .ock input{width:18px;height:18px;accent-color:var(--brand)}
.orow2>a{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px 14px 4px}.orow2 span{display:block;font-size:13px;color:var(--mut)}.orow2 .r{text-align:right;display:grid;gap:4px;justify-items:end}
.dmain .gigs{grid-template-columns:repeat(2,1fr)}.dmain .gpc{grid-template-columns:1fr}@media(min-width:1100px){.dmain .gpc{grid-template-columns:repeat(2,1fr)}}
.nb{font-style:normal}
.fl input[readonly]{background:#f1f5f9;cursor:not-allowed}

/* Catatan DR otomatis di bawah field: <small> bersifat inline sehingga margin-top diabaikan */
.fl small.note,[data-dr-note]{display:block;margin-top:10px;line-height:1.5}

/* Baris Bandingkan di bawah grid metrik single guest post */
.sp-head .sp-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:12px 0 0;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}
.sp-head .sp-tools-t{font-size:12.5px;color:var(--mut);line-height:1.4}
.sp-head .sp-tools .cmpb{padding:6px 14px;font-size:13px;background:#fff}
.sp-head .sp-tools .cmpb:hover{border-color:var(--brand)}

/* ---- Header desktop (login): ikon keranjang, pesan, lonceng + dropdown profil ---- */
.hic{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);transition:background .15s}
.hic:hover{background:rgba(255,255,255,.22)}
.hic svg{width:20px;height:20px}
.hic i{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font:600 11px/18px 'Inter',sans-serif;text-align:center;font-style:normal;box-shadow:0 0 0 2px #1e40af}
.pmwrap{display:none;position:relative;flex:none}
.pm{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 4px;border:0;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font:600 13.5px 'Inter',sans-serif;cursor:pointer;transition:background .15s}
.pm:hover,.pm[aria-expanded=true]{background:rgba(255,255,255,.22)}
.pm .av{width:32px;height:32px;font-size:12px;flex:none;border:2px solid rgba(255,255,255,.65);background:rgba(255,255,255,.2)}
.pm-n{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm>svg{width:16px;height:16px;flex:none;transition:transform .15s}
.pm[aria-expanded=true]>svg{transform:rotate(180deg)}
.pmd{display:none;position:absolute;right:0;top:calc(100% + 10px);width:250px;padding:6px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.16);z-index:80;text-align:left}
.pmd.open{display:block}
.pmd-h{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.pmd-h .av{width:40px;height:40px;font-size:14px;flex:none}
.pmd-h b{display:block;font-size:14px;line-height:1.3;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmd-h span:not(.av){display:block;font-size:12px;color:var(--mut)}
.pmd .pm-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
.pmd .pm-i:hover{background:var(--bg)}
.pmd .pm-i svg{width:18px;height:18px;flex:none;color:var(--mut)}
.pmd .pm-i .nb{margin-left:auto}
.pmd .pm-out,.pmd .pm-out svg{color:#dc2626}
.pmd .pm-out:hover{background:#fef2f2}
.pmd-sep{height:1px;background:var(--line);margin:6px -6px}
@media(min-width:960px){
 .pmwrap{display:block;margin-left:6px}
 .hd .nav-cta{gap:8px}
 .hd .bellwrap{margin-left:8px}
 .hd .bell{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);transition:background .15s}
 .hd .bell:hover{background:rgba(255,255,255,.22)}
}

/* ---- Dropdown notifikasi di mobile: tampil penuh di bawah header, tidak terpotong di sisi kiri layar ---- */
@media(max-width:959px){
 .hd .nd{position:fixed;left:12px;right:12px;width:auto;top:calc(env(safe-area-inset-top,0px) + var(--hbh) + 6px);max-height:calc(100vh - env(safe-area-inset-top,0px) - var(--hbh) - var(--bn) - 24px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--hbh) - var(--bn) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:16px;box-shadow:0 16px 40px rgba(15,23,42,.22)}
 .hd .nd .nd-h{position:sticky;top:0;z-index:1;background:#fff;padding:14px 16px}
 .hd .nd .nd-i{padding:12px 16px}
 .hd .nd .nd-i b{font-size:13.5px;overflow-wrap:anywhere}
 .hd .nd .nd-i span{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .hd .nd .nd-f{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:13px}
}

/* ---- Thumbnail produk: pratinjau + tombol × ---- */
.thumb-up .thumb-box{position:relative;width:180px;height:180px;margin:6px 0;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.thumb-up .thumb-box:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.thumb-up .thumb-box.has{border-style:solid}
.thumb-up .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.thumb-up .thumb-box.has .thumb-img{display:block}
.thumb-up .thumb-pick{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;cursor:pointer;color:var(--mut);font-size:13px;text-align:center}
.thumb-up .thumb-pick b{display:block;font-size:28px;line-height:1.1;font-weight:500;color:var(--brand)}
.thumb-up .thumb-box.has .thumb-pick span{display:none}
.thumb-up .thumb-box.has .thumb-pick::after{content:'Ganti gambar';position:absolute;left:0;right:0;bottom:0;padding:20px 8px 7px;background:linear-gradient(transparent,rgba(15,23,42,.7));color:#fff;font-size:12px;opacity:0;transition:opacity .15s}
.thumb-up .thumb-box.has:hover .thumb-pick::after,.thumb-up .thumb-box.has:focus-within .thumb-pick::after{opacity:1}
@media(hover:none){.thumb-up .thumb-box.has .thumb-pick::after{opacity:1}}
.thumb-up .thumb-x{display:none;position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;font-size:19px;line-height:1;cursor:pointer;place-items:center}
.thumb-up .thumb-box.has .thumb-x{display:grid}
.thumb-up .thumb-x:hover,.thumb-up .thumb-x:focus-visible{background:#dc2626}
.thumb-up .thumb-file{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.thumb-up .thumb-msg:not(:empty){margin:2px 0 6px;color:var(--ink);font-size:12.5px}
.thumb-undo{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--brand);cursor:pointer}

/* ---- Logo gambar (header, drawer, footer): tanda "b" biru di atas tile putih agar terbaca di latar biru/gelap ---- */
.logo i.lg{flex:none;width:38px;height:38px;padding:4px;border-radius:11px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.14);display:grid;place-items:center}
.logo i.lg img{display:block;width:100%;height:100%;object-fit:contain}
.hd .logo i.lg,.oc-h .logo i.lg{background:#fff;width:38px;height:38px}
footer .logo{display:flex;align-items:center;gap:10px}
footer .logo i.lg{width:38px;height:38px}

/* ---- Card backlink (/produk/ dan daftar lain): gambar persegi 1:1 ---- */
.gig .thumb{aspect-ratio:1/1}
.gig .thumb .timg{object-position:center}

/* ---- Halaman produk backlink (single): gambar persegi 1:1 ---- */
.sp-head .banner{aspect-ratio:1/1}
.sp-head--bn .banner{box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.08)}
.sp-info{min-width:0}
@media(min-width:640px) and (max-width:959px){
 .sp-head .banner{max-width:440px;margin:0 0 12px;border-radius:18px}
}
@media(min-width:960px){
 /* Gambar di kiri, info di kanan. Info dibungkus .sp-info sehingga tidak ada lagi celah/baris kosong
    di antara judul, rating, dan "Isi paket". */
 .sp-head--bn{display:grid;grid-template-columns:minmax(0,clamp(300px,50%,460px)) minmax(0,1fr);column-gap:28px;align-items:start}
 .sp-head--bn>.banner{width:100%;max-width:none;margin:0}
 .sp-head--bn .sp-info{padding-top:2px}
 .sp-head--bn .ttl{margin:0 0 12px}
 .sp-head--bn .ttl h1{font-size:24px;line-height:1.3}
 .sp-head--bn .sp-info .meta{margin:0}
}
@media(min-width:1200px){.sp-head--bn .ttl h1{font-size:26px}}
/* Rapatkan "Isi paket" supaya tinggi kolom info tidak melebihi gambar (tidak ada space kosong di bawah gambar) */
@media(min-width:960px){
 .sp-head--bn .ttl{margin-bottom:10px}
 .sp-head--bn .isi .panel{margin-top:12px;padding:12px 18px 2px}
 .sp-head--bn .isi .panel h2{margin-bottom:0}
 .sp-head--bn .isi .sr{padding:6px 0}
}
@media(min-width:960px) and (max-width:1199px){.sp-head--bn .ttl h1{font-size:22px}}

/* ---- "Isi paket" di header produk backlink (di samping gambar): 1 kolom, maks. 4 baris ---- */
.sp-head .isi .panel{margin:16px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.sp-head .isi .panel h2{font-size:15px;margin:0 0 4px}
.sp-head .isi .sr{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.sp-head .isi .sr:last-child{border-bottom:0}
.sp-head .isi .sr span{flex:none;font-size:13px;color:var(--mut)}
.sp-head .isi .sr b{font-size:13.5px;line-height:1.4;text-align:right;min-width:0;overflow-wrap:anywhere}
@media(min-width:960px){
 .sp-head .isi .panel{margin-top:18px;padding:14px 18px 6px;background:#fff;border:1px solid var(--line);border-radius:16px}
}

/* ---- Panel "Tentang seller": status online sejajar di kanan nama seller ---- */
.sel-n{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;min-width:0}
.sel-n b{min-width:0;max-width:100%}
.sel-n .seen{flex:none}
.sel-s{margin-top:2px;font-size:13px;color:var(--mut)}

/* ---- Tab Ulasan seller: kartu ulasan + form balasan ---- */
.rrv-pend{color:#b45309}
.rrv{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 14px}
.rrv-new{border-left:4px solid #f59e0b}
.rrv-h{display:flex;align-items:center;gap:12px}
.rrv-h .av{width:40px;height:40px;font-size:14px;flex:none}
.rrv-w{display:grid;gap:1px;min-width:0;flex:1}
.rrv-w b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrv-w .stars{font-size:13px;letter-spacing:1px}
.rrv-st{flex:none;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px}
.rrv-st.wait{background:#fef3c7;color:#92400e}
.rrv-st.done{background:#dcfce7;color:#166534}
.rrv-m{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:8px 0 0;font-size:12.5px;color:var(--mut)}
.rrv-m a{color:var(--brand);font-weight:500;overflow-wrap:anywhere}
.rrv-m a:hover{text-decoration:underline}
.rrv-q{margin:10px 0 0;padding:10px 14px;background:var(--bg);border-left:3px solid var(--line);border-radius:0 10px 10px 0;font-size:14px;line-height:1.6;white-space:pre-line;color:var(--ink)}
.rrv-rep{margin:12px 0 0;padding:10px 14px;background:var(--brand-l);border-radius:12px}
.rrv-rh{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.rrv-rh b{color:var(--brand)}
.rrv-rh time{color:var(--mut)}
.rrv-rep p{margin:4px 0 0;font-size:14px;line-height:1.6;white-space:pre-line}
.rrv-lbl{margin:14px 0 6px;font-size:13px;font-weight:600}
.rrv-f textarea{display:block;width:100%;min-height:84px;max-height:260px;resize:vertical;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:14px;line-height:1.55;color:var(--ink)}
.rrv-f textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.rrv-act{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.rrv-cnt{font-size:12px;color:var(--mut)}
.rrv-cnt.lim{color:#b45309;font-weight:600}
.rrv-btns{display:flex;align-items:center;gap:6px;margin-left:auto}
.rrv-del{border:0;background:none;padding:8px 10px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:#dc2626;cursor:pointer}
.rrv-del:hover{background:#fef2f2}
.rrv-edit{margin-top:10px}
.rrv-edit>summary{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer;list-style:none;user-select:none}
.rrv-edit>summary::-webkit-details-marker{display:none}
.rrv-edit>summary:hover{border-color:var(--brand);background:var(--brand-l)}
.rrv-edit[open]>summary{margin-bottom:10px}
@media(max-width:520px){.rrv{padding:14px}.rrv-btns{width:100%;justify-content:flex-end}}

/* ---- Halaman statis / hukum (Syarat & Ketentuan, Kebijakan Privasi) ---- */
.entry-c{line-height:1.75;color:var(--ink)}
.entry-c .upd{color:var(--mut);font-size:14px;margin-bottom:18px}
.entry-c h2{font:600 20px/1.35 'Poppins',sans-serif;margin:30px 0 10px;color:var(--ink)}
.entry-c h3{font:600 17px/1.4 'Poppins',sans-serif;margin:22px 0 8px}
.entry-c ul,.entry-c ol{margin:0 0 16px;padding-left:22px}
.entry-c ul{list-style:disc}.entry-c ol{list-style:decimal}
.entry-c li{margin-bottom:7px;padding-left:2px}
.entry-c a{text-decoration:underline;text-underline-offset:2px}
.entry-c strong{font-weight:600}
.entry-c .sum{margin:6px 0 22px;padding:16px 18px 6px;background:var(--brand-l);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px}
.entry-c .sum>strong{display:block;margin-bottom:8px;color:var(--brand-d)}
@media(max-width:640px){.entry-c h2{font-size:18px;margin-top:26px}}

/* ---- Halaman Kontak ---- */
.kontak-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 10px}
.kcard{position:relative;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px}
.kcard .kic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:12px;background:var(--brand-l);color:var(--brand)}
.kcard .kic svg{width:20px;height:20px}
.entry-c .kcard h3{margin:0 0 4px;font-size:17px}
.entry-c .kcard p{margin:0 0 8px;color:var(--mut);font-size:14px;line-height:1.6}
.entry-c .kcard p.kv{color:var(--ink);font:600 17px/1.5 'Poppins',sans-serif;margin:2px 0 12px}
.entry-c .kcard a.btn{display:inline-flex;text-decoration:none}
@media(min-width:640px){.kontak-grid{grid-template-columns:1fr 1fr}.kcard.kwide{grid-column:1/-1}}

/* ---- Pusat Bantuan ---- */
.hc-nav{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.entry-c a.hcn{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--brand);font-size:14px;font-weight:600;text-decoration:none}
.entry-c a.hcn:hover{border-color:var(--brand);background:var(--brand-l)}
.entry-c h2[id]{scroll-margin-top:84px}
.entry-c .faq.hc{max-width:none;margin:0 0 6px}
.entry-c .faq.hc details p,.entry-c .faq.hc details li{font-size:14.5px;color:var(--mut);line-height:1.7}
.entry-c .faq.hc details p{margin:10px 0 0}
.entry-c .faq.hc details ul,.entry-c .faq.hc details ol{margin:10px 0 0;color:var(--mut)}
.entry-c .faq.hc details li strong,.entry-c .faq.hc details p strong{color:var(--ink)}
.entry-c .faq.hc details a{color:var(--brand)}
.entry-c .hc-cta{margin:34px 0 0;padding:22px;text-align:center;background:var(--brand-l);border:1px solid var(--line);border-radius:16px}
.entry-c .hc-cta h3{margin:0 0 6px}
.entry-c .hc-cta p{margin:0 0 14px;color:var(--mut);font-size:14.5px}
.entry-c .hc-cta a.btn{display:inline-flex;text-decoration:none}

/* ---- Perbaikan warna tombol di dalam konten halaman (.entry-c a menimpa warna teks .btn) ---- */
.entry-c a.btn{text-decoration:none}
.entry-c a.btn-p,.entry-c a.btn-p:hover,.entry-c a.btn-p:focus{color:#fff}
.entry-c a.btn-o{color:var(--ink)}
.entry-c a.btn-o:hover,.entry-c a.btn-o:focus{color:var(--brand)}

/* ---- Halaman Tentang Kami ---- */
.ab-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 10px}
.ab-card{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px}
.entry-c .ab-card h3{margin:0 0 6px;font-size:17px}
.entry-c .ab-card p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.7}
.entry-c .ab-by{padding:18px 20px;background:var(--brand-l);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px}
.entry-c .ab-by p{margin:0}
.entry-c ol li{padding-left:4px}
@media(min-width:640px){.ab-grid{grid-template-columns:1fr 1fr}}

/* ---- Blog / arsip artikel ---- */
.bl-wrap{padding-block:14px 40px}
.bl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:var(--mut)}
.bl-crumb a{color:var(--brand);font-weight:500}.bl-crumb .bl-cur{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
/* Blog: header, filter kategori, artikel unggulan (gambar utuh + panel teks), grid artikel */
.bl-hd{position:static;z-index:auto;background:none;border:0;backdrop-filter:none;display:flex;flex-direction:column;gap:16px;margin:4px 0 18px;padding:0}
.bl-hd h1{font:700 clamp(28px,7.5vw,40px)/1.15 'Poppins',sans-serif;letter-spacing:-.02em;margin:0 0 8px;overflow-wrap:anywhere}
.bl-intro,.bl-intro p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.65;max-width:600px}
.bl-search{display:flex;align-items:center;gap:8px;height:48px;padding:0 5px 0 14px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--mut);width:100%}
.bl-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.bl-search svg{flex:none;width:18px;height:18px}
.bl-search input[type=search]{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.bl-search .btn{flex:none;min-height:38px}
.bl-chips{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--gut) * -1) 20px;padding:2px var(--gut) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
.bl-chips::-webkit-scrollbar{display:none}
.bl-chips a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.bl-chips a:hover{border-color:var(--brand);color:var(--brand)}
.bl-chips a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-chips a:focus-visible,.bl-card:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.bl-grid{display:grid;grid-template-columns:1fr;gap:14px}
.bl-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:var(--ink);transition:border-color .2s,box-shadow .2s}
/* Kotak gambar 16:9: gambar tampil utuh (contain); sisa ruang diisi versi blur gambar yang sama */
.bl-img{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#0ea5e9)}
.bl-img::before{content:"";position:absolute;inset:-16px;background:var(--bi,none) center/cover no-repeat;filter:blur(18px) saturate(1.15);transform:scale(1.05)}
.bl-img img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.bl-ph{position:relative;display:grid;place-items:center;width:100%;height:100%;color:#fff}.bl-ph svg{width:40px;height:40px;opacity:.7}
.bl-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 18px 18px;flex:1}
.bl-cat{align-self:flex-start;max-width:100%;color:var(--brand);font-size:12.5px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-t{font:600 17px/1.4 'Poppins',sans-serif;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bl-ex{display:none;color:var(--mut);font-size:14.5px;line-height:1.65;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:auto;color:var(--mut);font-size:12.5px}
.bl-meta>span{display:inline-flex;align-items:center;gap:4px}.bl-meta svg{width:14px;height:14px}
.bl-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;font-size:0;overflow:hidden}
.bl-go{display:none}
@media(hover:hover){.bl-card:hover{border-color:#c7d2fe;box-shadow:var(--sh)}.bl-card:hover .bl-img img{transform:scale(1.02)}.bl-card:hover .bl-t{color:var(--brand)}.bl-img img{transition:transform .4s}}
/* Artikel unggulan: gambar utuh di satu sisi, teks di panel biru (tidak bertumpuk dengan teks di dalam gambar) */
.bl-feat{background:linear-gradient(135deg,#1e3a8a,#1d4ed8);border:0;border-radius:22px;color:#fff;margin:0 0 18px}
.bl-feat .bl-body{gap:10px;padding:20px 20px 22px;justify-content:center}
.bl-feat .bl-cat{padding:3px 11px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff}
.bl-feat .bl-t{color:#fff;font-size:22px;line-height:1.3;-webkit-line-clamp:4}
.bl-feat .bl-ex{display:-webkit-box;color:rgba(255,255,255,.85);-webkit-line-clamp:3}
.bl-feat .bl-meta{color:rgba(255,255,255,.75);margin-top:2px}
.bl-feat .bl-go{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin-top:8px;padding:0 20px;border-radius:12px;background:#fff;color:var(--brand);font-weight:600;font-size:14.5px}
@media(hover:hover){.bl-feat:hover{border:0;box-shadow:0 12px 32px rgba(30,58,138,.28)}.bl-feat:hover .bl-t{color:#fff}.bl-feat:hover .bl-go{background:var(--brand-l)}}
.bl-pager{margin-top:26px}.bl-pager .page-numbers{min-width:44px;height:44px}.bl-pager .current{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-arch .bl-cta{margin-top:32px}
.bl-empty{padding:44px 20px;text-align:center;color:var(--mut);background:#fff;border:1px solid var(--line);border-radius:18px}.bl-empty p{margin:0 0 10px}.bl-empty b{color:var(--ink);font-size:17px}
@media(min-width:640px){
 .bl-hd{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 22px}
 .bl-search{width:340px;flex:none}
 .bl-chips{margin:0 0 24px;padding:2px 0 6px;flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
 .bl-grid{grid-template-columns:1fr 1fr;gap:18px}
 .bl-body{padding:18px 20px 20px}
 .bl-t{font-size:18px;-webkit-line-clamp:2}
 .bl-ex{display:-webkit-box}
 .bl-meta{font-size:13px;margin-top:8px}
 .bl-feat{margin-bottom:22px}
 .bl-feat .bl-body{padding:26px 30px 30px}
 .bl-feat .bl-t{font-size:28px}
 .bl-arch .bl-cta{margin-top:44px}
}
@media(min-width:960px){
 .bl-grid{grid-template-columns:repeat(3,1fr)}
 .bl-rel .bl-grid{gap:16px}
 .bl-feat{flex-direction:row;align-items:stretch;min-height:340px;border-radius:26px}
 .bl-feat .bl-img{flex:0 0 58%;width:58%;aspect-ratio:auto;min-height:100%}
 .bl-feat .bl-body{flex:1;padding:36px 40px}
 .bl-feat .bl-t{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.bl-card,.bl-img img{transition:none}}

/* artikel tunggal */
.bl-single .bl-art{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:820px;margin:0 auto}
.bl-single .bl-crumb,.bl-single .bl-pn,.bl-single .bl-cta{max-width:820px;margin-inline:auto}
.bl-cover{aspect-ratio:16/9;background:var(--brand-l);overflow:hidden}.bl-cover img{display:block;width:100%;height:100%;object-fit:cover}
.bl-in{padding:20px 18px 24px}
.bl-ah{margin:0 0 16px}
.bl-ah .bl-cat{margin-bottom:10px;font-size:12px}
.bl-ah h1{font:700 clamp(24px,6.4vw,36px)/1.3 'Poppins',sans-serif;letter-spacing:-.01em;margin:0 0 10px;overflow-wrap:anywhere}
.bl-ah .bl-meta{margin:0;font-size:13px}
.bl-prose{font-size:16.5px;line-height:1.8;overflow-wrap:anywhere}
.bl-prose>*:first-child{margin-top:0}
.bl-prose p{margin:0 0 1.15em}
.bl-prose h2{font:600 22px/1.35 'Poppins',sans-serif;margin:1.7em 0 .5em}
.bl-prose h3{font:600 18px/1.4 'Poppins',sans-serif;margin:1.5em 0 .4em}
.bl-prose h4{font:600 16px/1.4 'Poppins',sans-serif;margin:1.3em 0 .3em}
.bl-prose ul,.bl-prose ol{margin:0 0 1.15em;padding-left:1.3em}.bl-prose li{margin-bottom:.45em}
.bl-prose img,.bl-prose video,.bl-prose figure,.bl-prose .wp-caption{max-width:100%;height:auto}
.bl-prose img{border-radius:12px}
.bl-prose figure{margin:0 0 1.3em}.bl-prose figcaption,.bl-prose .wp-caption-text{margin-top:6px;color:var(--mut);font-size:13px;text-align:center;line-height:1.5}
.bl-prose .alignleft,.bl-prose .alignright,.bl-prose .aligncenter{display:block;float:none;margin:0 auto 1.15em}
.bl-prose iframe{max-width:100%}.bl-prose iframe[src*="youtube"],.bl-prose iframe[src*="youtu.be"],.bl-prose iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px}
.bl-prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.2em;font-size:14.5px;line-height:1.6;-webkit-overflow-scrolling:touch}
.bl-prose th,.bl-prose td{padding:9px 12px;border:1px solid var(--line);text-align:left;min-width:96px}.bl-prose th{background:var(--bg);font-weight:600}
.bl-prose pre{margin:0 0 1.2em;padding:14px 16px;overflow-x:auto;background:#0f172a;color:#e2e8f0;border-radius:12px;font-size:13.5px;line-height:1.65}
.bl-prose code{font-size:.9em;background:var(--bg);padding:1px 6px;border-radius:6px}.bl-prose pre code{background:none;padding:0}
.bl-prose blockquote{margin:0 0 1.2em;padding:12px 16px;border-left:3px solid var(--brand);background:var(--brand-l);border-radius:0 12px 12px 0;color:var(--ink)}.bl-prose blockquote p:last-child{margin-bottom:0}
.bl-prose hr{border:0;border-top:1px solid var(--line);margin:1.8em 0}
.bl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.bl-tags a{padding:5px 12px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--mut);font-size:13px}
.bl-tags a:hover{color:var(--brand);border-color:var(--brand)}
.bl-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.bl-share b{width:100%;font:600 14px 'Poppins',sans-serif}
.bl-share a,.bl-share button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:600 13.5px 'Inter',sans-serif;cursor:pointer}
.bl-share a:hover,.bl-share button:hover{border-color:var(--brand);color:var(--brand)}
.bl-pn{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.bl-pn a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:0}
.bl-pn a:hover{border-color:var(--brand)}.bl-pn small{color:var(--brand);font-weight:600;font-size:12.5px}
.bl-pn span{font:600 14.5px/1.4 'Poppins',sans-serif;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-nx{text-align:right}
.bl-cta{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding:20px 18px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);color:#fff;border-radius:16px}
.bl-cta h2{font:600 18px/1.35 'Poppins',sans-serif;margin:0 0 4px}.bl-cta p{margin:0;font-size:14px;opacity:.88;line-height:1.6}
.bl-cta-b{display:flex;flex-wrap:wrap;gap:10px}.bl-cta-b .btn{flex:1 1 140px}
.bl-cta .btn-p{background:#fff;color:var(--brand);box-shadow:none}.bl-cta .btn-o{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.bl-rel{margin:30px auto 0}.bl-rel h2{font:600 19px/1.35 'Poppins',sans-serif;margin:0 0 12px}

.entry-c img,.entry-c video{max-width:100%;height:auto}
.entry-c blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--brand);background:var(--bg);border-radius:0 10px 10px 0}

@media(min-width:640px){
 .bl-wrap{padding-block:22px 56px}
 .bl-in{padding:30px 36px 34px}
 .bl-ah h1{margin-bottom:12px}
 .bl-prose{font-size:17px}.bl-prose h2{font-size:24px}.bl-prose h3{font-size:19px}
 .bl-prose .alignleft{float:left;margin:.3em 1.4em 1em 0}.bl-prose .alignright{float:right;margin:.3em 0 1em 1.4em}
 .bl-share b{width:auto;margin-right:4px}
 .bl-pn{grid-template-columns:1fr 1fr}
 .bl-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 28px}
 .bl-cta-b{flex:none;flex-wrap:nowrap}.bl-cta-b .btn{flex:none}
}
@media(min-width:960px){
 .bl-wrap{padding-block:30px 72px}
 .bl-in{padding:40px 56px 44px}
 .bl-rel .bl-grid{gap:16px}
}

/* ---- Seller terakhir online ---- */
.seen{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--mut);white-space:nowrap;line-height:1.4}
.seen i{flex:none;width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.seen.on{color:#047857;font-weight:600}
.seen.on i{background:var(--ok);box-shadow:0 0 0 3px rgba(16,185,129,.22)}
.sprof .ver+.seen{margin-left:10px}
.meta .seen{font-size:13px}

/* ---- Username seller ---- */
.unm{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.unm:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.unm span{flex:none;display:flex;align-items:center;padding:0 4px 0 12px;font-size:14px;color:var(--mut);background:#f8fafc;border-right:1px solid var(--line);padding-right:10px}
.unm input{flex:1;min-width:0;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;font-size:16px}
.unm input[readonly]{background:#f8fafc;color:var(--mut)}
.unm-h{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--mut)}
.sprof .uname{display:inline-block;margin:0 10px 0 0;font-size:13px;font-weight:500;color:var(--mut);vertical-align:middle}
.unm-s{min-height:0;margin-top:6px;font-size:13px;font-weight:500;line-height:1.45;color:var(--mut)}
.unm-s:empty{display:none}
.unm-s.ok{color:#047857}.unm-s.ok:before{content:"✓ "}
.unm-s.taken{color:#b91c1c}.unm-s.taken:before{content:"✕ "}
.unm-s.bad{color:#b45309}.unm-s.bad:before{content:"⚠ "}
.unm-s.wait{color:var(--mut);font-weight:400}
.unm:has(+.unm-s.ok){border-color:#6ee7b7}.unm:has(+.unm-s.taken){border-color:#fca5a5}.unm:has(+.unm-s.bad){border-color:#fcd34d}

/* ---- Kartu guest post (homepage & katalog): tinggi seragam, footer selalu di dasar kartu ---- */
.pgrid-g,.gpc{align-items:stretch}
.gpcard{height:100%}
.gpcard .gp-f{margin-top:auto;flex-wrap:nowrap;align-items:center;gap:8px}
.gpcard .gp-f .gprice{flex:none}
.gpcard .gp-f .cmpb{flex:none}
.gpcard .gp-f .geta,.gpcard .gp-f .vtag{flex:0 1 auto;min-width:0;margin-left:auto;font-size:11.5px;white-space:nowrap;text-align:right}
@media(max-width:379px){.gpcard .gp-f{flex-wrap:wrap}.gpcard .gp-f .geta,.gpcard .gp-f .vtag{margin-left:0}}

/* ===== Halaman masuk / daftar / lupa password ===== */
.au{padding:6px 0 18px}
.au-card{display:grid;max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -28px rgba(15,23,42,.28)}
.au-side{display:none;position:relative;padding:44px 38px;color:#fff;background:linear-gradient(150deg,#1e3a8a 0%,#1d4ed8 58%,#0ea5e9 140%);overflow:hidden}
.au-side:before,.au-side:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.au-side:before{width:280px;height:280px;right:-100px;top:-100px}
.au-side:after{width:220px;height:220px;left:-80px;bottom:-80px}
.au-side>*{position:relative}
.au-side h2{font-size:27px;line-height:1.25;color:#fff;margin:0 0 12px}
.au-side p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.65;margin:0}
.au-ben{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.au-ben li{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.88)}
.au-ben b{color:#fff;font-size:14.5px;font-weight:600}
.au-ben .ib{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.au-ben .ico-s{width:19px;height:19px}
.au-main{padding:22px 18px 26px}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;margin-bottom:22px}
.au-tabs button{font:inherit;font-weight:600;font-size:14.5px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;transition:.2s}
.au-tabs button.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(15,23,42,.14)}
.au-h{font-size:22px;line-height:1.3;margin:0 0 4px}
.au-sub{color:var(--mut);font-size:14px;line-height:1.55;margin:0 0 8px}
.au-c{text-align:center}
.au .gwrap{max-width:none;margin:0 0 20px}
.au .gbtn{height:46px;border-radius:12px}
.au .fl{margin-top:14px}
.au .fl label{font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
.au .fl input{height:46px;padding:0 14px;font-size:16px;border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.au .fl input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.au .btn-p,.au .btn-o{width:100%;height:48px;margin-top:20px;font-size:15.5px}
.au-fp{display:flex;justify-content:flex-end;margin-top:10px;font-size:13px}
.au-fp a,.au-alt a{color:var(--brand);font-weight:600}
.au-fp a:hover,.au-alt a:hover{text-decoration:underline}
.au-alt{text-align:center;font-size:14px;color:var(--mut);margin:18px 0 0}
.au [hidden]{display:none!important}
.pwf{position:relative}
.pwf input{display:block;padding-right:48px!important}
.pw-t{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;transition:.15s}
.pw-t:hover,.pw-t:focus-visible{color:var(--brand);background:var(--brand-l);outline:0}
.pw-t .ico-s{width:20px;height:20px}
.pw-t .eo{display:none}.pw-t.on .eo{display:block}.pw-t.on .ev{display:none}
.au-card.one{display:block;max-width:460px}
.au-card.one .au-main{padding:32px 22px 28px}
.au-ic{width:58px;height:58px;border-radius:17px;background:var(--brand-l);color:var(--brand);display:grid;place-items:center;margin:0 auto 16px}
.au-ic .ico-s{width:27px;height:27px}
.au-card.one .au-h{font-size:23px}
.au-card.one .au-sub{margin-bottom:10px}
.au-sec{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line)}
.au-sec h3{font-size:15px;margin:0 0 4px}
.au-sec p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0}
.au-sec .btn-o{margin-top:16px}
@media(min-width:560px){.au-main{padding:30px 34px 32px}.au-card.one .au-main{padding:38px 40px 34px}}
@media(min-width:860px){.au-card:not(.one){grid-template-columns:5fr 6fr;min-height:560px}.au-side{display:block}.au-main{padding:44px 46px}}

.au-hint{display:block;font-size:12px;color:var(--mut);margin-top:6px;line-height:1.5}

/* =====================================================================
   Keranjang v2 + Favorit mobile-first (v3.1.1)
   ===================================================================== */
.cp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:16px}
.cp-head h1{font:700 22px/1.2 'Poppins',sans-serif}
.cp-head h1 small{font:500 13px 'Inter',sans-serif;color:var(--mut);margin-left:8px}
.cp-steps{display:flex;align-items:center;gap:8px;list-style:none;font-size:12px;color:var(--mut)}
.cp-steps li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cp-steps li+li::before{content:"";width:16px;height:1px;background:#cbd5e1;margin-right:2px}
.cp-steps i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2e8f0;color:#64748b;font:600 11px/1 'Inter',sans-serif;font-style:normal}
.cp-steps li.on{color:var(--brand);font-weight:600}.cp-steps li.on i{background:var(--brand);color:#fff}

.cp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.cp-items,.cs{min-width:0}
.cg{padding:0;background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden}
.cp-items>.cg:last-child{margin-bottom:0}
.cg-h{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:13.5px;min-width:0}
.cg-h .ico-s{width:17px;height:17px;color:var(--brand);flex:none}
.cg-h a{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cg-h a:hover{color:var(--brand)}
.cg-h small{margin-left:auto;flex:none;color:var(--mut);font-size:12px}

.ci{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci.bad{background:#fffbeb}
.ci-th{grid-row:1/3;position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:12px;overflow:hidden;color:#fff;text-align:center;font:700 17px/1 'Poppins',sans-serif}
.ci-th>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.ci-th small{font:600 9.5px/1 'Poppins',sans-serif;opacity:.9}
.ci-th .ico-s{width:26px;height:26px}
.ci-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ci-b{min-width:0}
.ci-type{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--brand);background:var(--brand-l);padding:2px 8px;border-radius:99px}
.ci-b h3{font:600 14.5px/1.35 'Inter',sans-serif;margin:5px 0 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ci-b h3 a:hover{color:var(--brand)}
.ci-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ci-chips span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;line-height:1.5;padding:2px 9px;border-radius:99px;background:#f1f5f9;color:#475569}
.ci-chips span.hl{background:#ecfdf5;color:#047857}
.ci-bad{font-size:12.5px;color:#b45309;margin-top:7px}
.ci-r{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci-p{font:700 16px/1.2 'Poppins',sans-serif;color:var(--price)}
.ci-rmf{margin:0}
.ci-x{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#64748b;font:500 13px 'Inter',sans-serif;cursor:pointer;transition:.15s}
.ci-x .ico-s{width:16px;height:16px}
.ci-x:hover,.ci-x:focus-visible{border-color:#fecaca;background:#fef2f2;color:#dc2626;outline:0}

.cs-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.cs-box h2{font:600 16px 'Poppins',sans-serif;margin-bottom:14px}
.cs-l{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#334155;margin-bottom:8px}
.cs-l .ico-s{width:16px;height:16px;color:var(--brand)}
.cs-v{padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.cs-v .vrow input{height:44px;padding:0 12px;font-size:16px;border:1px solid var(--line);border-radius:10px}
.cs-v .vrow input:focus,.cs-pay select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.cs-v .vrow .btn{height:44px;padding:0 16px;white-space:nowrap}
.cs-vok{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;color:#047857;font-size:13px}
.cs-vok .ico-s{width:16px;height:16px;flex:none}
.cs-vok span{min-width:0;overflow-wrap:anywhere}
.cs-vok form{margin:0 0 0 auto;flex:none}
.cs-vok button{background:none;border:0;padding:4px 2px;color:#047857;font:600 12.5px 'Inter',sans-serif;text-decoration:underline;cursor:pointer}
.cs-r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;font-size:14px;color:#475569}
.cs-r>span{min-width:0}
.cs-r b{font-weight:600;color:var(--ink);text-align:right;white-space:nowrap}
.cs-r b.okc{color:var(--ok)}
.cs-r.tot{margin-top:8px;padding-top:14px;border-top:1px dashed var(--line);color:var(--ink);font-weight:600}
.cs-r.tot b{font:700 21px/1.2 'Poppins',sans-serif;color:var(--price)}
.cs-pay{margin-top:12px}
.cs-pay select{width:100%;height:44px;padding:0 12px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.cs-pm{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;font-size:14px;color:#334155}
.cs-pm .ico-s{width:18px;height:18px;color:var(--brand)}
.cs-go{width:100%;height:50px;margin-top:14px;font-size:15.5px}
.cs-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:12px;line-height:1.55;color:var(--mut)}
.cs-note .ico-s{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ok)}

.cbar{position:fixed;left:0;right:0;bottom:calc(var(--bn,60px) + env(safe-area-inset-bottom));z-index:54;display:flex;align-items:center;gap:12px;padding:10px var(--gut);background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,23,42,.08)}
.cbar>div{flex:1;min-width:0;line-height:1.2}
.cbar small{display:block;font-size:11.5px;color:var(--mut)}
.cbar b{display:block;font:700 18px 'Poppins',sans-serif;color:var(--price);white-space:nowrap}
.cbar .btn{flex:none;height:46px;padding:0 26px}
.cartp{padding-bottom:calc(var(--bn,60px) + 92px + env(safe-area-inset-bottom))!important}

/* Keadaan kosong (keranjang & favorit) */
.cp-empty{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:36px 20px}
.cp-eico{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:var(--brand-l);color:var(--brand)}
.cp-eico .ico-s{width:28px;height:28px}
.cp-empty h2{font:600 18px 'Poppins',sans-serif;margin-bottom:6px}
.cp-empty p{color:var(--mut);font-size:14px;max-width:360px;margin:0 auto 16px}
.cp-empty .acts2{justify-content:center}

@media(min-width:640px){
 .cp-head h1{font-size:26px}
 .ci{grid-template-columns:84px minmax(0,1fr) auto;gap:14px;padding:16px 20px;align-items:start}
 .ci-th{grid-row:auto;width:84px;height:84px}
 .ci-r{grid-column:auto;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:10px}
 .ci-p{font-size:17px}
}
@media(min-width:960px){
 .cp-grid{grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
 .cs{position:sticky;top:calc(var(--hh) + 16px)}
 .cbar{display:none}
 .cartp{padding-bottom:64px!important}
}
@media(max-width:959.98px){.cs-go{display:none}}
@media(max-width:380px){
 .ci{grid-template-columns:60px minmax(0,1fr);padding:12px}
 .ci-th{width:60px;height:60px}
 .ci-x span{display:none}.ci-x{width:36px;padding:0;justify-content:center}
}

/* ---- Favorit: daftar baris, ramah layar sentuh ---- */
.fv-cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:99px;background:var(--brand-l);color:var(--brand);font:600 12.5px/1 'Inter',sans-serif}
.fv-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1) 14px;padding:2px var(--gut)}
.fv-chips::-webkit-scrollbar{display:none}
.fv-chips a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:500;color:#475569}
.fv-chips a small{font-size:11.5px;opacity:.75}
.fv-chips a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fv-tip{margin:0 0 10px}
.dmain .subh{margin:16px 0 10px}
.fv-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:6px}
.fvr{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:box-shadow .2s,opacity .2s}
.fvr-th{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:12px;overflow:hidden;color:#fff;text-align:center;font:700 18px/1 'Poppins',sans-serif}
.fvr-th>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.fvr-th small{font:600 9.5px/1 'Poppins',sans-serif;opacity:.9}
.fvr-th .ico-s{width:28px;height:28px}
.fvr-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.fvr-t{align-self:flex-start;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-l);padding:2px 8px;border-radius:99px}
.fvr-b h3{font:600 14px/1.35 'Inter',sans-serif;margin:2px 0 0;padding-right:38px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fvr-s{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;font-size:12px;color:var(--mut);margin:0;min-width:0}
.fvr-s .ico-s{width:13px;height:13px;margin-right:-4px;flex:none}
.fvr-s span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fvr-s em{font-style:normal}
.fvr-mt{display:flex;flex-wrap:wrap;gap:4px}
.fvr-mt span{display:inline-flex;align-items:baseline;gap:4px;padding:2px 8px;border-radius:8px;background:#f1f5f9;font:600 12px/1.5 'Poppins',sans-serif;color:var(--ink)}
.fvr-mt em{font:600 9.5px 'Inter',sans-serif;font-style:normal;color:var(--mut)}
.fvr-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin-top:auto;padding-top:4px}
.fvr .favb{top:8px;right:8px;width:38px;height:38px;border:1px solid var(--line);background:#fff;box-shadow:none}
.fvr .favb.on{background:#fef2f2;border-color:#fecaca}
.fvr:has(.favb:not(.on)){opacity:.55}
.fvr .cmpb{padding:5px 10px}
@media(hover:hover){.fvr:hover{box-shadow:0 6px 18px rgba(15,23,42,.1)}}
@media(min-width:720px){.fv-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:380px){
 .fvr{grid-template-columns:68px minmax(0,1fr);gap:10px;padding:10px}
 .fvr-th{width:68px;height:68px;font-size:16px}
}

/* ---- Perbaikan v3.1.2: tombol keadaan kosong & voucher lipat di halaman produk ---- */
.cp-empty .acts2,.dmain .cp-empty .acts2{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:320px;margin:0 auto}
.cp-empty .acts2 .btn,.dmain .cp-empty .acts2 .btn{width:100%;white-space:normal;text-align:center}
@media(min-width:640px){.cp-empty .acts2,.dmain .cp-empty .acts2{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none}.cp-empty .acts2 .btn,.dmain .cp-empty .acts2 .btn{width:auto;white-space:nowrap}}

.vtog{margin-top:14px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;transition:border-color .15s,background .15s}
.vtog[open]{border-style:solid;border-color:var(--line);background:#fff}
.vtog summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--brand);-webkit-tap-highlight-color:transparent}
.vtog summary::-webkit-details-marker{display:none}
.vtog summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:12px}
.vtog summary svg{width:18px;height:18px;flex:none}
.vtog summary span{flex:1;min-width:0}
.vtog .vtog-c{width:16px;height:16px;color:#64748b;transition:transform .2s}
.vtog[open] .vtog-c{transform:rotate(180deg)}
.vtog .fl{margin:0;padding:0 14px 14px}

/* ---- v3.1.3: voucher dibuat ringkas (tautan teks kecil) agar tombol Pesan tetap terlihat ---- */
.box .vtog,.vtog{margin:8px 0 0;border:0;border-radius:0;background:none}
.box .vtog[open],.vtog[open]{border:0;background:none}
.vtog summary{display:inline-flex;justify-content:flex-start;gap:6px;min-height:28px;padding:0;font:600 13px/1.2 'Inter',sans-serif;color:var(--brand)}
.vtog summary::after,.vtog[open] summary::after{content:none;display:none}
.vtog summary:hover span{text-decoration:underline}
.vtog summary svg{width:15px;height:15px}
.vtog summary span{flex:none}
.vtog .vtog-c{width:14px;height:14px}
.box .vtog .fl,.vtog .fl{margin:6px 0 0;padding:0}
.vtog .fl label{display:none}

/* ---- v3.1.4: kotak pembayaran pesanan / grup ---- */
.paypanel>h2{display:flex;align-items:center;gap:8px;font:600 17px 'Poppins',sans-serif;margin-bottom:16px}
.paypanel>h2 .ico-s{width:20px;height:20px;color:var(--brand);flex:none}
.paypanel>h2 small{font:500 13px 'Inter',sans-serif;color:var(--mut)}
.pay{display:grid;gap:18px}
.pay-amt{padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;box-shadow:0 8px 20px rgba(29,78,216,.22)}
.pay-amt small{display:block;font-size:12.5px;opacity:.85;margin-bottom:2px}
.pay-amt b{display:block;font:700 28px/1.15 'Poppins',sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.pay-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:18px 0 8px}
.pay-acc{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pay-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-l);color:var(--brand)}
.pay-ico .ico-s{width:22px;height:22px}
.pay-at{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pay-at small{font:600 12px 'Poppins',sans-serif;color:var(--brand)}
.pay-at b{font:700 17px/1.3 'Poppins',sans-serif;letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.pay-at b.plain{font:600 14.5px/1.4 'Inter',sans-serif;letter-spacing:0}
.pay-at span{font-size:12.5px;color:var(--mut);overflow-wrap:anywhere}
.pay-copy{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--brand);font:600 12.5px 'Inter',sans-serif;cursor:pointer;transition:.15s}
.pay-copy[hidden]{display:none}
.pay-copy .ico-s{width:15px;height:15px}
.pay-copy:hover,.pay-copy:focus-visible{border-color:var(--brand);background:var(--brand-l);outline:0}
.pay-copy.ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.pay-rows{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pay-rows>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 14px;background:#f8fafc}
.pay-rows>div+div{border-top:1px solid var(--line)}
.pay-rows dt{flex:none;font-size:13px;color:var(--mut)}
.pay-rows dd{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;min-width:0}
.pay-rows dd b{font-size:14px;text-align:right;overflow-wrap:anywhere}
.pay-form .pay-lbl{margin-top:0}
.pay-form .fl{margin:0}
.pay-form .fl label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
.pay-form .fl input{height:46px;padding:0 14px;font-size:16px;border-radius:12px;transition:border-color .15s,box-shadow .15s}
.pay-form .fl input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.pay .btn-p{width:100%;height:50px;margin-top:12px;font-size:15.5px}
.pay .btn-p .ico-s{width:18px;height:18px}
.pay-hint{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--mut);text-align:center}
.pay-hint-l{margin:0;text-align:left}
.pay-one .pay-chk{width:100%;height:44px;margin:0}
.pay .dk-msg:empty{display:none}
.pay-cf{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);text-align:center}
.pay-cancel{min-height:40px;padding:8px 14px;border:0;border-radius:10px;background:none;color:#dc2626;font:600 13.5px 'Inter',sans-serif;cursor:pointer}
.pay-cancel:hover,.pay-cancel:focus-visible{background:#fef2f2;outline:0}
@media(max-width:380px){.pay-amt b{font-size:24px}.pay-acc{padding:10px;gap:10px}.pay-ico{width:38px;height:38px}.pay-copy span{display:none}.pay-copy{width:34px;padding:0;justify-content:center}.pay-rows .pay-copy{}}
@media(min-width:760px){
 .pay:not(.pay-one){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
 .pay-form{padding-left:28px;border-left:1px solid var(--line)}
}

/* =====================================================================
   Ringkasan dashboard (pembeli & seller) v3.1.5
   ===================================================================== */
.ov{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.ov>*{min-width:0}
.tn-b{--tc:#1d4ed8;--tb:#eff6ff}.tn-a{--tc:#b45309;--tb:#fffbeb}.tn-g{--tc:#047857;--tb:#ecfdf5}
.tn-r{--tc:#dc2626;--tb:#fef2f2}.tn-p{--tc:#7c3aed;--tb:#f5f3ff}.tn-s{--tc:#475569;--tb:#f1f5f9}
.ov-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:20px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#0ea5e9 100%);box-shadow:0 12px 28px rgba(29,78,216,.25)}
.ov-hero::before{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.ov-hero::after{content:"";position:absolute;left:-40px;bottom:-90px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.ov-hero>*{position:relative;z-index:1}
.ov-hk{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.18)}
.ov-hl h2{font:700 22px/1.25 'Poppins',sans-serif;margin:10px 0 4px;overflow-wrap:anywhere}
.ov-hl p{font-size:14px;line-height:1.5;opacity:.92;max-width:460px}
.ov-ha{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn-w{background:#fff;color:var(--brand);border-color:#fff}.btn-w:hover{background:#eff6ff;color:var(--brand-d)}
.btn-g{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}.btn-g:hover{background:rgba(255,255,255,.26);color:#fff}
.ov-bal{align-self:end;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.ov-bal small{display:block;font-size:12px;opacity:.85}
.ov-bal b{display:block;font:700 26px/1.2 'Poppins',sans-serif;overflow-wrap:anywhere}
.ov-bal span{font-size:12.5px;opacity:.85}

.ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ovs{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:box-shadow .2s,border-color .2s,transform .2s;min-width:0}
a.ovs:hover{border-color:var(--tc);box-shadow:0 8px 20px rgba(15,23,42,.08);transform:translateY(-2px)}
.ovs-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tb);color:var(--tc)}
.ovs-i .ico-s{width:21px;height:21px}
.ovs-t{display:flex;flex-direction:column;min-width:0;width:100%}
.ovs-t b{font:700 22px/1.15 'Poppins',sans-serif;color:var(--ink);overflow-wrap:anywhere}
.ovs-t>span{font-size:12.5px;color:var(--mut);margin-top:2px}
.ovs-t small{font-size:11.5px;font-weight:600;color:var(--tc);margin-top:3px}
.ov-money{display:grid;grid-template-columns:1fr;gap:10px}
.ov-money .ovs{flex-direction:row;align-items:center}
.ov-money .ovs-t b{font-size:18px}
.ov-money2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ov-money2 .ovs{flex-direction:column;align-items:flex-start}

.ov-h{font:600 16px 'Poppins',sans-serif;margin:0 0 10px}
.ov-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ov-ph h3{font:600 16px 'Poppins',sans-serif;margin:0}
.ov-ph a{font-size:13px;font-weight:600;color:var(--brand)}.ov-ph a:hover{text-decoration:underline}
.ov-ph .ov-h{margin:0}
.ov-p{margin:0;padding:16px}
.ov-tl{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ov-t{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:12px}
.ov-t .ovs-i{width:36px;height:36px}
.ov-tt{flex:1;min-width:0}
.ov-tt b{display:block;font-size:14px;overflow-wrap:anywhere}
.ov-tt span{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ov-t .btn{flex:none}

.ov-ol{display:grid;grid-template-columns:minmax(0,1fr)}
.ov-o{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.ov-o:last-child{border-bottom:0;padding-bottom:2px}.ov-o:first-child{padding-top:2px}
.ov-ot{flex:1 1 0;min-width:0}
.ov-ot b{display:block;font-size:14px;overflow-wrap:anywhere}
.ov-ot span{display:block;font-size:12.5px;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-ot small{font-size:11.5px;color:var(--mut)}
.ov-or{flex:none;display:grid;justify-items:end;gap:5px}
.ov-or>b{font:600 13.5px 'Poppins',sans-serif}
a.ov-o:hover .ov-ot b{color:var(--brand)}
.ov-empty{font-size:14px;color:var(--mut);text-align:center;padding:14px 4px}
.ov-empty .acts2{justify-content:center;margin-top:12px}

.ov-chart{display:flex;align-items:stretch;gap:8px;height:170px;padding-top:6px}
.ov-bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.ov-bar em{font:600 10.5px 'Inter',sans-serif;font-style:normal;color:var(--mut);white-space:nowrap;min-height:13px}
.ov-bar i{display:block;width:100%;max-width:44px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#60a5fa,#1d4ed8);min-height:4px}
.ov-bar span{font-size:11.5px;color:var(--mut)}
.ov-cn{margin-top:12px}

.ov-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ov-q a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:#fff;border:1px solid var(--line);border-radius:16px;font-size:13px;font-weight:600;color:#334155;text-align:center;transition:.2s}
.ov-q a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.ov-qi{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-l);color:var(--brand)}
.ov-qi .ico-s{width:22px;height:22px}
.ov-qi .nb{position:absolute;top:-6px;right:-8px;margin:0;min-width:18px;height:18px;line-height:18px;font-size:10.5px;padding:0 5px}

@media(min-width:640px){
 .ov{gap:20px}
 .ov-hero{grid-template-columns:minmax(0,1fr) 240px;align-items:center;padding:26px}
 .ov-hl h2{font-size:26px}
 .ov-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .ov-money{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .ov-money2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ov-money2 .ovs{flex-direction:row;align-items:center}
 .ov-q{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .ov-p{padding:20px}
}
@media(max-width:380px){.ovs-t b{font-size:19px}.ov-bal b{font-size:22px}.ov-hl h2{font-size:20px}.ov-t .btn{width:100%}}

/* v41 fix mobile: cegah halaman melebar (kolom grid auto mengikuti teks nowrap) */
.ov-sec{min-width:0}
.ov-ph h3,.ov-h{min-width:0;overflow-wrap:anywhere}
.ov-or>b{white-space:nowrap}
@media(max-width:380px){.ov-hero{padding:16px}.ov-ha .btn{flex:1 1 auto;justify-content:center}.ovs{padding:12px}.ov-o{gap:8px}.ov-chart{gap:5px}.ov-bar em{font-size:9.5px}.ov-q a{padding:14px 6px}}

/* =====================================================================
   Pesanan (pembeli & seller) v3.2: chip berhitung, pencarian, kartu modern, header detail + stepper
   ===================================================================== */
.chipbar.od-chips{align-items:center;padding-bottom:10px;margin-bottom:6px}
.chipbar.od-chips a{display:inline-flex;align-items:center;gap:7px;padding:8px 8px 8px 14px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:#475569;transition:.15s}
.chipbar.od-chips a em{font-style:normal;min-width:22px;height:22px;line-height:22px;padding:0 7px;border-radius:99px;background:#f1f5f9;color:#475569;font-size:11.5px;text-align:center}
.chipbar.od-chips a:hover{background:#fff;border-color:#93c5fd;color:var(--brand)}
.chipbar.od-chips a.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 14px rgba(29,78,216,.25)}
.chipbar.od-chips a.on em{background:rgba(255,255,255,.22);color:#fff}

.od-search{position:relative;margin:4px 0 12px}
.od-search .ico-s{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#94a3b8;pointer-events:none}
.od-search input{width:100%;height:46px;padding:0 14px 0 42px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.od-search input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.12)}

.od-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.od-count{font-size:13px;color:var(--mut)}
.od-link{border:0;background:none;padding:6px 4px;font:600 13px 'Inter',sans-serif;color:var(--brand);cursor:pointer}
.od-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.od-none{text-align:center;color:var(--mut);font-size:14px;padding:22px 8px}

.od-card{position:relative;display:flex;min-width:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:16px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.od-card[hidden]{display:none}
.od-card:hover{box-shadow:0 8px 22px rgba(15,23,42,.08)}
.od-card.sel{border-color:var(--brand);border-left-color:var(--brand);box-shadow:0 0 0 2px rgba(29,78,216,.14)}
.od-ck{flex:none;display:flex;align-items:flex-start;padding:15px 0 0 12px;margin:0;cursor:pointer}
.od-ck input{width:20px;height:20px;margin:0;accent-color:var(--brand)}
.od-a{flex:1;min-width:0;display:grid;gap:9px;padding:14px 16px;color:inherit}
.od-card.has-ck .od-a{padding-left:12px}
.od-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.od-no{font:600 12px 'Inter',sans-serif;letter-spacing:.05em;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-card .stb,.od-hero .stb{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;display:inline-flex;align-items:center;gap:6px;flex:none;max-width:60%;padding:4px 10px;font-size:11.5px;line-height:1.3;background:var(--tb);color:var(--tc);white-space:normal;text-align:left}
.od-card .stb::before,.od-hero .stb::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.od-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.9em;font:600 15px/1.45 'Poppins',sans-serif;color:var(--ink);overflow-wrap:anywhere}
a.od-a:hover .od-t{color:var(--brand)}
.od-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--mut)}
.od-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.od-meta .ico-s{flex:none;width:14px;height:14px;color:#94a3b8}
.od-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;padding-top:11px;border-top:1px dashed var(--line)}
.od-p{font:700 16px 'Poppins',sans-serif;color:var(--ink)}
.od-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap}
.od-cta .od-ar{transition:transform .2s}
a.od-a:hover .od-ar{transform:translateX(3px)}
.od-cta.hot{padding:8px 14px;border-radius:99px;background:var(--tc);color:#fff}

.od-bar{position:sticky;bottom:calc(var(--bn) + env(safe-area-inset-bottom,0px) + 10px);z-index:20;display:flex;align-items:center;gap:8px;margin:14px 0 4px;padding:10px 12px;background:#0f172a;color:#fff;border-radius:16px;box-shadow:0 14px 32px rgba(15,23,42,.35)}
.od-bar[hidden]{display:none}
.od-bn{flex:1;min-width:0;font-size:13.5px}
.od-bar .btn{white-space:nowrap}
.od-bar .btn-o{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}

.od-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 20px;background:#fff;border:1px dashed #cbd5e1;border-radius:18px}
.od-ei{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--brand-l);color:var(--brand)}
.od-ei .ico-s{width:26px;height:26px}
.od-empty h3{font:600 17px 'Poppins',sans-serif;margin:6px 0 0;overflow-wrap:anywhere}
.od-empty p{font-size:14px;color:var(--mut);max-width:360px}
.od-empty .acts2{justify-content:center;margin-top:8px}

/* Header detail pesanan */
.od-hero{display:grid;gap:12px;margin-bottom:14px;padding:16px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:18px;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.od-ht{font:600 17px/1.4 'Poppins',sans-serif;margin:0;overflow-wrap:anywhere}
.od-hm{display:flex;flex-wrap:wrap;gap:8px 28px}
.od-hm small{display:block;font-size:12px;color:var(--mut)}
.od-hm b{font:700 16px 'Poppins',sans-serif}
.od-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);counter-reset:odst}
.od-steps li{position:relative;padding-top:32px;text-align:center;font-size:11.5px;font-weight:600;color:#94a3b8;overflow-wrap:normal;word-break:normal}
.od-steps li::before{counter-increment:odst;content:counter(odst);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:12px}
.od-steps li::after{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:#e2e8f0}
.od-steps li:first-child::after{display:none}
.od-steps li.done,.od-steps li.cur{color:var(--ink)}
.od-steps li.done::before{content:"\2713";background:#10b981;color:#fff}
.od-steps li.cur::before{background:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.16)}
.od-steps li.done::after,.od-steps li.cur::after{background:#10b981}

@media(min-width:640px){.od-a{padding:16px 20px}.od-t{font-size:15.5px}.od-hero{padding:20px}.od-ht{font-size:19px}}
@media(min-width:960px){.od-bar{bottom:16px}}
@media(min-width:1100px){.od-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.od-a{padding:12px 12px}.od-card.has-ck .od-a{padding-left:8px}.od-ck{padding-left:10px}.od-cta.hot{padding:7px 11px}.od-bar{gap:6px;padding:9px 10px}.od-bar .btn{padding-inline:10px}}

/* =====================================================================
   Produk Saya (seller) v3.3: kartu produk + form tambah/edit per bagian
   ===================================================================== */
.pd-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:6px}
.pd-head .dh{margin:0}
.pd-new{display:flex;flex-wrap:wrap;gap:8px}
.pd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pd-card{display:grid;gap:12px;min-width:0;padding:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--tc);border-radius:16px;transition:box-shadow .2s}
.pd-card[hidden]{display:none}
.pd-card:hover{box-shadow:0 8px 22px rgba(15,23,42,.08)}
.pd-main{display:flex;gap:12px;align-items:flex-start;min-width:0}
.pd-th{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--brand-l);color:var(--brand)}
.pd-th img{width:100%;height:100%;object-fit:cover;display:block}
.pd-fv{color:#fff;font:700 18px 'Poppins',sans-serif;letter-spacing:.02em}
.pd-ph .ico-s{width:26px;height:26px}
.pd-info{flex:1;min-width:0;display:grid;gap:6px}
.pd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-width:0}
.pd-kind{font:600 11.5px 'Inter',system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-card .pd-st{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 10px;font:600 11.5px/1.3 'Inter',system-ui,sans-serif;background:var(--tb);color:var(--tc)}
.pd-card .pd-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pd-t{margin:0;font:600 15px/1.45 'Poppins',sans-serif;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.9em}
.pd-stats{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--mut)}
.pd-stats b{color:var(--ink);font-weight:600}
.pd-stats>span:first-child b{font:700 15px 'Poppins',sans-serif}
.pd-stats .pd-star{color:#b45309}
.pd-hint{margin:-2px 0 0;font-size:12.5px;color:var(--mut)}
.pd-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pd-acts>*{min-width:0}
.pd-acts .btn,.pd-tg .btn{width:100%;justify-content:center;white-space:nowrap}
.pd-acts>a:only-of-type{grid-column:auto}
.pd-tg{margin:0}
.pd-acts .btn-d{color:#b91c1c;border-color:#fecaca}
.pd-acts .btn-d:hover{background:#fef2f2}

/* Form tambah / edit produk */
.pf .pf-sec{padding:16px;margin-bottom:14px;border-radius:18px}
.pf-sh{margin-bottom:4px}
.pf-sh h3{font:600 16px 'Poppins',sans-serif;margin:0}
.pf-sh p{margin:3px 0 0;font-size:13px;color:var(--mut)}
.pf .fl label{font-size:13px;font-weight:600;color:#334155}
.pf .fl input,.pf .fl select,.pf .fl textarea{font-size:16px;padding:11px 13px;border-radius:12px}
.pf .fl input:focus,.pf .fl select:focus,.pf .fl textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.pf .pf-tn{margin:8px 0 0}
.pf .tiers-ed{margin-top:12px}
.pf .tier-ed{padding:14px;border-radius:14px}
.pf .tier-ed .chk{padding-bottom:4px;font-size:15px}
.pf .tier-ed .chk input{width:20px;height:20px;accent-color:var(--brand)}
.pf .thumb-up .thumb-box{width:min(100%,220px);height:auto;aspect-ratio:1/1}
.pf-bar{position:sticky;bottom:calc(var(--bn) + env(safe-area-inset-bottom,0px) + 8px);z-index:20;display:grid;gap:8px;margin:4px 0 8px;padding:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.14)}
.pf-note{margin:0;font-size:12.5px;color:var(--mut);line-height:1.45}
.pf-ba{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.pf-ba .btn{width:100%;justify-content:center;margin:0}

@media(min-width:640px){.pd-card{padding:16px 18px}.pd-th{width:72px;height:72px}.pd-t{font-size:16px}.pd-acts{display:flex;justify-content:flex-end}.pd-acts .btn,.pd-tg .btn{width:auto;min-width:96px}.pf .pf-sec{padding:22px}.pf-bar{display:flex;align-items:center;justify-content:space-between}.pf-ba{display:flex}.pf-ba .btn{width:auto;min-width:120px}}
@media(min-width:960px){.pf-bar{bottom:16px}}
@media(min-width:1100px){.pd-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pd-new{width:100%;display:grid;grid-template-columns:1fr 1fr}.pd-new .btn{justify-content:center;width:100%;white-space:nowrap}}
@media(max-width:380px){.pd-card{padding:12px}.pd-th{width:54px;height:54px}.pd-acts{gap:6px}.pd-acts .btn,.pd-tg .btn{padding-inline:6px;font-size:12.5px}}

/* Varian paket: field baru tampil setelah varian diaktifkan (fallback: semua tampil bila browser belum mendukung :has) */
.pf .tier-ed{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}
.pf .tier-ed:has(.chk input:not(:checked)) .fl{display:none}
.pf .tier-ed:has(.chk input:not(:checked)){background:#fff}
.pf .tier-ed:has(.chk input:checked){border-color:#93c5fd;background:#f8fbff}
@media(min-width:400px){.pf .tier-ed{grid-template-columns:repeat(2,minmax(0,1fr))}.pf .tier-ed>.chk,.pf .tier-ed>.fl:nth-child(2),.pf .tier-ed>.fl:last-child{grid-column:1/-1}}
.pf .pf-tn{font-size:13px;padding:10px 12px}

/* Tab jenis produk (Paket Backlink / Guest Post / jenis lain nanti) */
.pd-tabs{display:flex;gap:2px;margin:8px 0 14px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tabs a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 14px;margin-bottom:-1px;font:600 14px 'Inter',system-ui,sans-serif;color:var(--mut);white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.pd-tabs a .ico-s{width:18px;height:18px;flex:none}
.pd-tabs a em{font-style:normal;min-width:22px;height:22px;line-height:22px;padding:0 7px;border-radius:99px;background:#f1f5f9;color:#475569;font-size:11.5px;text-align:center}
.pd-tabs a:hover{color:var(--brand)}
.pd-tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.pd-tabs a.on em{background:var(--brand-l);color:var(--brand)}
@media(max-width:480px){.pd-tabs a{padding:12px 8px;gap:6px;font-size:13.5px}.pd-tabs a em{min-width:20px;height:20px;line-height:20px;padding:0 6px}.pd-tabs a .ico-s{width:17px;height:17px}}
.pd-new .btn{white-space:nowrap}

/* =====================================================================
   Bandingkan guest post v3.4: kartu situs + bagian per kelompok (tanpa scroll samping)
   ===================================================================== */
.cm-wrap{padding-bottom:28px}
.cm-title{font-size:26px;margin:6px 0 4px}
.cm-sub{margin:0 0 14px;font-size:14px;color:var(--mut)}
.cm{--n:2}
.cm-top{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;margin-bottom:14px}
.cm-site{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:16px 8px 10px;text-align:center;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:16px}
.cm-site.lead{border-color:var(--c);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.cm-av{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:#fff;font:700 15px 'Poppins',sans-serif}
.cm-n{font:600 13px/1.35 'Poppins',sans-serif;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.7em}
.cm-p{font-size:12.5px;font-weight:700;color:var(--ink)}
.cm-w{padding:2px 8px;border-radius:99px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:600}
.cm-site .btn{width:100%;margin-top:auto;justify-content:center;padding-inline:6px}
.cm-site .cm-l2{display:none}
.cm-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#94a3b8;font-size:19px;line-height:1}
.cm-x:hover{background:#fef2f2;color:#b91c1c}
.cm-tb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.cm-diff{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:13.5px;font-weight:600;cursor:pointer}
.cm-diff[hidden]{display:none}
.cm-diff input{width:18px;height:18px;margin:0;accent-color:var(--brand)}
.cm-sec{margin-bottom:14px;padding:16px 14px 4px;background:#fff;border:1px solid var(--line);border-radius:18px}
.cm-sec[hidden],.cm-nodiff[hidden]{display:none}
.cm-sh{margin:0 0 10px;font:600 16px 'Poppins',sans-serif}
.cm-cs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.cm-hr{margin-bottom:2px}
.cm-hr a{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:600;color:var(--ink)}
.cm-hr i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.cm-hr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-row{display:grid;gap:6px;padding:12px 0;border-top:1px dashed var(--line)}
.cm-sec .cm-hr+.cm-row{border-top:0}
.cm-l{font-size:12.5px;font-weight:600;color:#475569}
.cm-l small{display:block;margin-top:1px;font-size:11.5px;font-weight:400;color:var(--mut)}
.cm-c{position:relative;min-width:0;padding:9px 10px;background:#f8fafc;border-radius:12px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.cm-c a{color:var(--brand);font-weight:600}
.cm-c small{display:block;font-size:11px;color:var(--mut)}
.cm-v{display:block;font:700 15px 'Poppins',sans-serif;color:var(--ink)}
.cm-nil{color:#94a3b8;font-weight:500}
.cm-c.best{background:#ecfdf5;box-shadow:inset 0 0 0 1px #a7f3d0}
.cm-c.best .cm-v{color:#047857}
.cm-c.best::after{content:"\2713";position:absolute;top:7px;right:9px;font-size:11px;font-weight:700;color:#059669}
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cm-c .cm-bar{display:block;height:5px;margin:7px 0 0;border-radius:99px;background:#e2e8f0;overflow:hidden}
.cm-c .cm-bar u{display:block;height:100%;border-radius:inherit;background:var(--c)}
.cm-c .cm-bar.inv u{background:#f59e0b}
.cm-ok{font-weight:700;color:#047857}.cm-no{color:#94a3b8}
.cm-tl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cm-tl li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}.cm-tl b{white-space:nowrap}
.k-short .cm-c{font-weight:600;font-size:12.5px}
/* baris teks panjang: tersusun ke bawah di mobile, dengan penanda nama website */
.k-text .cm-cs,.k-list .cm-cs{grid-template-columns:minmax(0,1fr)}
.k-text .cm-c::before,.k-list .cm-c::before{content:attr(data-s);display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nodiff{padding:24px 8px;text-align:center;color:var(--mut);font-size:14px}
.cm-cta{margin:4px 0 6px}
.cm-cta .btn{justify-content:center;min-width:0;padding-inline:6px;background:var(--c);border-color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:center}
.cm-note{margin-top:14px}
.cm-steps{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;text-align:left;counter-reset:cms}
.cm-steps li{position:relative;padding:2px 0 2px 34px;font-size:14px;color:#334155;counter-increment:cms}
.cm-steps li::before{content:counter(cms);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand-l);color:var(--brand);font-size:12px;font-weight:700}
@media(min-width:700px){
	.cm-title{font-size:30px}.cm-site{padding:18px 12px 12px}.cm-site .cm-s{display:none}.cm-site .cm-l2{display:inline}.cm-n{font-size:14.5px}.cm-p{font-size:13.5px}
	.k-text .cm-cs,.k-list .cm-cs{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
	.k-text .cm-c::before,.k-list .cm-c::before{display:none}
}
@media(min-width:900px){
	.cm-sec{padding:18px 20px 6px}
	.cm-row,.cm-hr-row{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:14px}
	.cm-hr{margin-left:214px}
	.cm-c{font-size:14px}.cm-v{font-size:16px}
}
@media(max-width:380px){.cm-sec{padding:14px 10px 4px}.cm-c{padding:8px}.cm-v{font-size:14px}.cm-n{font-size:12px}.cm-p{font-size:11.5px}.cm-w{font-size:10.5px}}

.k-num .cm-c.best{padding-right:22px}

/* =====================================================================
   /jadi-seller/ (status seller) + halaman 404  v3.5
   ===================================================================== */
.btn[hidden]{display:none}
.sa-wrap{max-width:860px;padding-bottom:32px}
.sa-head{margin-bottom:22px}
/* kartu status (menunggu / ditangguhkan) */
.sa-card{display:grid;justify-items:center;gap:10px;text-align:center;padding:30px 20px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:20px;box-shadow:0 8px 26px rgba(15,23,42,.06)}
.sa-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--tb);color:var(--tc)}
.sa-ic .ico-s{width:30px;height:30px}
.sa-t{margin:6px 0 0;font:700 22px/1.3 'Poppins',sans-serif}
.sa-p{max-width:480px;margin:0;color:var(--mut);font-size:14.5px;line-height:1.6}
.sa-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;width:100%}
.sa-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:460px;counter-reset:sas}
.sa-steps li{position:relative;padding-top:32px;font-size:12px;font-weight:600;color:#94a3b8;counter-increment:sas}
.sa-steps li::before{content:counter(sas);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:12px}
.sa-steps li::after{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:#e2e8f0}
.sa-steps li:first-child::after{display:none}
.sa-steps li.done,.sa-steps li.cur{color:var(--ink)}
.sa-steps li.done::before{content:"\2713";background:#10b981;color:#fff}
.sa-steps li.cur::before{background:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.16)}
.sa-steps li.done::after,.sa-steps li.cur::after{background:#10b981}
.sa-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:460px;margin:10px 0 0;text-align:left}
.sa-sum div{padding:10px 12px;background:#f8fafc;border-radius:12px;min-width:0}
.sa-sum dt{font-size:11.5px;color:var(--mut)}.sa-sum dd{margin:2px 0 0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
/* seller aktif */
.sa-hero{display:grid;gap:16px;padding:20px;border-radius:22px;color:#fff;background:radial-gradient(420px 220px at 90% -20%,rgba(255,255,255,.22),transparent),linear-gradient(135deg,#1e3a8a,#1d4ed8 55%,#0ea5e9);box-shadow:0 14px 34px rgba(29,78,216,.28)}
.sa-hl{display:flex;align-items:center;gap:14px;min-width:0}
.sa-av{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);font:700 19px 'Poppins',sans-serif}
.sa-hn{min-width:0}
.sa-hn h2{margin:4px 0 0;font:700 21px/1.25 'Poppins',sans-serif;color:#fff;overflow-wrap:anywhere}
.sa-hn p{margin:2px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.sa-ok{display:inline-block;padding:3px 10px;border-radius:99px;background:rgba(16,185,129,.9);font-size:11.5px;font-weight:700}
.sa-ha{display:grid;gap:8px}
.sa-ha .btn{justify-content:center;text-align:center}
.sa-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.sa-stats div{padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;min-width:0}
.sa-stats b{display:block;font:700 22px 'Poppins',sans-serif;color:var(--ink)}
.sa-stats span{font-size:12.5px;color:var(--mut)}
.sa-sec{margin-bottom:14px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:18px}
.sa-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sa-sh h3{margin:0;font:600 16px 'Poppins',sans-serif}
.sa-pc{font-size:12.5px;font-weight:600;color:var(--brand)}
.sa-bar{height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin-bottom:6px}
.sa-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#06b6d4)}
.sa-ck{list-style:none;margin:0;padding:0}
.sa-ck li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.sa-ck li:first-child{border-top:0}
.sa-ck li>div{flex:1;min-width:0}
.sa-ck b{display:block;font-size:14px}.sa-ck small{display:block;margin-top:1px;font-size:12.5px;color:var(--mut);line-height:1.45}
.sa-mk{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #cbd5e1;color:#fff;font-size:13px;font-weight:700}
.sa-ck li.ok .sa-mk{background:#10b981;border-color:#10b981}
.sa-ck li.ok b{color:#475569}
.sa-ck .btn{flex:none;white-space:nowrap}
.sa-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sa-q a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;text-align:center;background:#f8fafc;border:1px solid var(--line);border-radius:14px;color:var(--ink);transition:.15s}
.sa-q a:hover{border-color:#93c5fd;background:#fff;box-shadow:0 6px 16px rgba(15,23,42,.07)}
.sa-q span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-l);color:var(--brand)}
.sa-q b{font-size:13px;line-height:1.3}
/* formulir calon seller */
.sa-alert{display:flex;gap:12px;align-items:flex-start;max-width:640px;margin:0 auto 14px;padding:14px 16px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;color:#9a3412}
.sa-alert span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ffedd5}
.sa-alert p{margin:0;font-size:14px;line-height:1.5}
.sa-form{max-width:640px;margin:0 auto}
.sa-form .fl input,.sa-form .fl textarea{font-size:16px}
.sa-fh{margin:20px 0 0;font:600 15px 'Poppins',sans-serif}
.sa-agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px}
.sa-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}
.sa-agree a{color:var(--brand);font-weight:600}
.sa-form .btn[type=submit]{width:100%;margin-top:16px;justify-content:center}
@media(min-width:640px){.sa-hero{grid-template-columns:1fr auto;align-items:center;padding:26px}.sa-ha{grid-auto-flow:column}.sa-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.sa-q{grid-template-columns:repeat(3,minmax(0,1fr))}.sa-sec{padding:20px}.sa-card{padding:40px 32px}}
@media(max-width:520px){.sa-ck li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:4px 12px}.sa-ck li .btn{grid-column:2;justify-self:start;margin-top:6px}}
@media(max-width:420px){.sa-acts .btn{flex:1 1 100%;justify-content:center}.sa-sum{grid-template-columns:1fr}}

/* 404 */
.nf{max-width:760px;padding:34px 16px 44px;text-align:center}
.nf-code{display:flex;align-items:center;justify-content:center;gap:6px;font:800 clamp(76px,22vw,132px)/1 'Poppins',sans-serif;letter-spacing:-.04em;background:linear-gradient(135deg,var(--brand),#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-code span{display:block}
.nf-o{display:grid!important;place-items:center;width:.62em;height:.62em;border-radius:50%;background:linear-gradient(135deg,var(--brand),#06b6d4);color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 12px 30px rgba(29,78,216,.3);animation:nfp 3.2s ease-in-out infinite}
.nf-o .ico-s{width:46%;height:46%}
@keyframes nfp{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.nf-o{animation:none}}
.nf-t{margin:10px 0 8px;font:700 clamp(22px,5.5vw,30px)/1.25 'Poppins',sans-serif}
.nf-p{max-width:520px;margin:0 auto 22px;color:var(--mut);font-size:15px;line-height:1.6}
.nf-s{position:relative;display:grid;gap:10px;max-width:520px;margin:0 auto 18px}
.nf-s>.ico-s{position:absolute;left:15px;top:15px;width:20px;height:20px;color:#94a3b8;pointer-events:none}
.nf-s input{width:100%;height:50px;padding:0 16px 0 46px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.nf-s input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.nf-sb{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nf-sb .btn{justify-content:center}
.nf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
.nf-h{margin:0 0 14px;font:600 16px 'Poppins',sans-serif;color:#334155}
.nf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;text-align:left}
.nf-l{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--ink);transition:.15s;min-width:0}
.nf-l:hover{border-color:#93c5fd;box-shadow:0 8px 20px rgba(15,23,42,.08);transform:translateY(-1px)}
.nf-li{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-l);color:var(--brand)}
.nf-lt{min-width:0}.nf-lt b{display:block;font-size:14.5px}.nf-lt small{display:block;margin-top:1px;font-size:12.5px;color:var(--mut);line-height:1.4}
@media(min-width:560px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nf-s{grid-template-columns:1fr;}.nf-acts .btn{min-width:170px;justify-content:center}}
@media(min-width:860px){.nf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.nf{padding-top:56px}}
.nf-sb .btn{padding-inline:10px;white-space:nowrap}
/* QRIS statis: kotak pembayaran di halaman pesanan (v3.2.x) */
.pay-q{grid-template-columns:minmax(0,1fr);gap:16px}
.pq-amt{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pq-amt>div{min-width:0}
.pq-amt .pay-copy{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.pq-amt .pay-copy:hover,.pq-amt .pay-copy:focus-visible{background:rgba(255,255,255,.26);border-color:#fff}
.pq-amt .pay-copy.ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.pq-qr{display:grid;gap:12px;justify-items:center;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:center;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pq-qh{display:grid;gap:2px}
.pq-qh span{font:700 15px 'Poppins',sans-serif;color:var(--ink)}
.pq-qh small{font-size:12px;line-height:1.4;color:var(--mut)}
.pq-img{display:block;width:100%;max-width:280px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.15s}
.pq-img:hover,.pq-img:focus-visible{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.12);outline:0}
.pq-img img{display:block;width:100%;height:auto;border-radius:6px}
.pq-mc{display:grid;gap:1px;width:100%;max-width:280px;padding:9px 12px;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0}
.pq-mc small{font-size:11.5px;color:#047857}
.pq-mc b{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;color:#065f46;overflow-wrap:anywhere}
.pq-mc .ico-s{width:16px;height:16px}
.pq-act{display:flex;gap:8px;width:100%;max-width:280px}
.pq-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--brand);font:600 13px 'Inter',sans-serif;transition:.15s}
.pq-btn:hover,.pq-btn:focus-visible{border-color:var(--brand);background:var(--brand-l);outline:0}
.pq-btn .ico-s{width:16px;height:16px}
.pq-det{display:grid;gap:14px;min-width:0}
.pq-warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.pq-warn .ico-s{width:18px;height:18px;margin-top:1px;color:#d97706}
.pq-warn p{margin:0;font-size:13.5px;line-height:1.55}
.pq-warn b{color:#78350f}
.pq-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:pq}
.pq-steps li{position:relative;padding-left:34px;min-height:24px;font-size:13.5px;line-height:1.55;color:#334155;counter-increment:pq}
.pq-steps li::before{content:counter(pq);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand-l);color:var(--brand);font:700 12px 'Poppins',sans-serif}
.pq-steps b{color:var(--ink)}
.pq-note{margin:0;padding:10px 12px;border-left:3px solid var(--line);background:#f8fafc;border-radius:0 10px 10px 0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.pay-q .pq-form{padding:16px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.pay-q .pq-form .pay-lbl{margin:0 0 10px}
.pay-q .pq-form .fl input{background:#fff}
@media(min-width:760px){
 .pay-q{grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-areas:"qr amt" "qr det" "qr frm";gap:18px 28px;align-items:start}
 .pq-amt{grid-area:amt}.pq-qr{grid-area:qr;position:sticky;top:calc(var(--hh,64px) + 12px)}.pq-det{grid-area:det}.pq-form{grid-area:frm}
 .pay-q .pq-form{padding:18px}
}
@media(max-width:380px){.pq-amt .pay-copy span{display:none}.pq-btn span{font-size:12.5px}}

/* Pemilih metode pembayaran: segmented control ringkas */
.pm-sw{display:grid;gap:6px;margin:0 0 14px}
.pm-l{font:600 11.5px 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.pm-sw form{display:grid;gap:6px;margin:0}
.pm-list{display:flex;gap:4px;width:100%;padding:4px;border-radius:12px;background:#f1f5f9}
.pm-o{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#475569;font:600 13px/1.2 'Inter',sans-serif;white-space:nowrap;cursor:pointer;transition:.15s}
.pm-o .ico-s{width:16px;height:16px;flex:none}
.pm-o span{min-width:0;overflow:hidden;text-overflow:ellipsis}
button.pm-o:hover,button.pm-o:focus-visible{background:rgba(255,255,255,.7);color:var(--ink);outline:0}
button.pm-o:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.pm-o.on{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(15,23,42,.12),0 0 0 1px rgba(15,23,42,.04);cursor:default}
.pm-h{font-size:12px;color:var(--mut)}
.pm-warn{margin:0;padding:8px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12.5px;line-height:1.5}
@media(min-width:760px){.pm-list{display:inline-flex;width:auto;max-width:100%}.pm-o{flex:0 0 auto;padding:0 16px}}
@media(max-width:400px){.pm-o{padding:0 6px;gap:0}.pm-o .ico-s{display:none}}

/* Status "pembayaran sedang diverifikasi" (menggantikan form konfirmasi) */
.pay-q-w{grid-template-columns:minmax(0,1fr);grid-template-areas:none;max-width:640px}
.pw{display:grid;gap:14px;padding:16px;border:1px solid #bfdbfe;border-radius:16px;background:linear-gradient(180deg,#eff6ff,#fff)}
.pw-h{display:flex;align-items:center;gap:12px}
.pw-h>div{min-width:0;display:grid;gap:1px}
.pw-h b{font:600 15px 'Poppins',sans-serif;color:var(--ink)}
.pw-h small{font-size:13px;color:var(--mut)}
.pw-i{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff}
.pw-i .ico-s{width:20px;height:20px}
.pw-i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand);animation:pwp 1.8s ease-out infinite}
@keyframes pwp{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.pw-st{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.pw-st li{position:relative;flex:1;min-width:0;display:grid;justify-items:center;gap:6px;text-align:center;font:500 12px/1.3 'Inter',sans-serif;color:var(--mut)}
.pw-st li+li::before{content:"";position:absolute;top:9px;right:50%;width:100%;height:2px;background:var(--line)}
.pw-st li.done+li::before,.pw-st li.now::before{background:var(--brand)}
.pw-st i{position:relative;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.pw-st .done i{background:var(--brand);border-color:var(--brand);color:#fff}
.pw-st .done i .ico-s{width:12px;height:12px}
.pw-st .now i{border-color:var(--brand);box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.pw-st .done,.pw-st .now{color:var(--ink);font-weight:600}
.pw-d{margin:0;display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.pw-d>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.pw-d dt{color:var(--mut);flex:none}
.pw-d dd{margin:0;font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.pw-n{margin:0;font-size:12.5px;line-height:1.6;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.pw-i::after{animation:none;opacity:0}}
.pay-q-w>*{grid-area:auto}
.pw form{margin:0}
.pw-undo{justify-self:start;min-height:36px;padding:6px 10px;margin-left:-10px;border:0;border-radius:8px;background:none;color:var(--mut);font:600 12.5px 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:.15s}
.pw-undo:hover,.pw-undo:focus-visible{background:#f1f5f9;color:var(--ink);outline:0}

/* Keranjang di mobile: stepper ringkas (hanya langkah aktif yang berlabel) */
@media(max-width:420px){
 .cp-steps{gap:6px}
 .cp-steps li:not(.on) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .cp-steps li+li::before{width:12px;margin-right:0}
}

/* Pilihan metode pembayaran (produk & keranjang): segmented ringkas */
.pmp{position:relative;margin:14px 0 0;padding:0;border:0;min-width:0}
.cs-pay .pmp{margin-top:0}
.pmp-l{padding:0;margin:0 0 6px;font-family:inherit;font-size:13px;font-weight:600;color:#334155}
.pmp-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pmp-list{display:flex;gap:4px;padding:4px;border-radius:12px;background:#f1f5f9}
.pmp-o{flex:1 1 auto;min-width:0;display:block;height:38px;padding:0 6px;margin:0;border-radius:9px;color:#475569;font-family:inherit;font-size:13px;font-weight:600;line-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.pmp-o:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.pmp-hints{margin-top:6px;min-height:18px}
.pmp-h{display:none;font-size:12px;line-height:1.5;color:var(--mut)}
.pmp-in:nth-of-type(1):checked~.pmp-list .pmp-o:nth-child(1),.pmp-in:nth-of-type(2):checked~.pmp-list .pmp-o:nth-child(2),.pmp-in:nth-of-type(3):checked~.pmp-list .pmp-o:nth-child(3),.pmp-in:nth-of-type(4):checked~.pmp-list .pmp-o:nth-child(4),.pmp-in:nth-of-type(5):checked~.pmp-list .pmp-o:nth-child(5){background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(15,23,42,.12),0 0 0 1px rgba(15,23,42,.04)}
.pmp-in:nth-of-type(1):checked~.pmp-hints .pmp-h:nth-child(1),.pmp-in:nth-of-type(2):checked~.pmp-hints .pmp-h:nth-child(2),.pmp-in:nth-of-type(3):checked~.pmp-hints .pmp-h:nth-child(3),.pmp-in:nth-of-type(4):checked~.pmp-hints .pmp-h:nth-child(4),.pmp-in:nth-of-type(5):checked~.pmp-hints .pmp-h:nth-child(5){display:block}
.pmp-in:nth-of-type(1):focus-visible~.pmp-list .pmp-o:nth-child(1),.pmp-in:nth-of-type(2):focus-visible~.pmp-list .pmp-o:nth-child(2),.pmp-in:nth-of-type(3):focus-visible~.pmp-list .pmp-o:nth-child(3),.pmp-in:nth-of-type(4):focus-visible~.pmp-list .pmp-o:nth-child(4),.pmp-in:nth-of-type(5):focus-visible~.pmp-list .pmp-o:nth-child(5){box-shadow:0 0 0 2px var(--brand)}
@media(max-width:340px){.pmp-o{font-size:12.5px;padding:0 4px}}
.bl-ah .bl-cat{padding:2px 10px;border-radius:99px;background:var(--brand-l)}

/* ---- Kode verifikasi email (6 digit) ---- */
.au .fl input.otp{height:60px;text-align:center;font-size:30px;font-weight:700;letter-spacing:.45em;padding:0 0 0 .45em;font-variant-numeric:tabular-nums;font-family:Consolas,Menlo,"Courier New",monospace}
.au .fl input.otp::placeholder{color:#cbd5e1;font-weight:400}
.au .btn[data-wait]:disabled{opacity:.6;cursor:not-allowed}

/* ---- 2FA (Google Authenticator) ---- */
.fl input.otp{height:60px;text-align:center;font-size:30px;font-weight:700;letter-spacing:.45em;padding:0 0 0 .45em;font-variant-numeric:tabular-nums;font-family:Consolas,Menlo,"Courier New",monospace}
.fl input.otp::placeholder{color:#cbd5e1;font-weight:400}
.tf .tf-st{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.tf-steps{margin:0 0 4px;padding-left:20px;font-size:14px;line-height:1.7;color:#334155}
.tf-qr{width:fit-content;max-width:100%;margin:14px 0;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px}
.tf-qr:empty{display:none}
.tf-qr svg{display:block;width:200px;height:200px;max-width:100%}
.tf-kl{margin:6px 0 8px;font-size:13px!important;color:var(--mut)!important}
.tf-kr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tf-key{padding:9px 12px;border:1px dashed var(--line);border-radius:10px;background:#f8fafc;font-family:Consolas,Menlo,"Courier New",monospace;font-size:15px;letter-spacing:.08em;word-break:break-all}
.tf-warn{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:14px;line-height:1.55}
.tf-rc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.tf-rc code{font-family:Consolas,Menlo,"Courier New",monospace;font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.tf-act{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tf-d{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:0 14px}
.tf-d summary{cursor:pointer;padding:12px 0;font-size:14px;font-weight:600;color:var(--ink)}
.tf-d[open] summary{border-bottom:1px solid var(--line);margin-bottom:6px}
.tf-d form{padding-bottom:6px}
@media(max-width:420px){.tf-rc{grid-template-columns:1fr}}

/* ===== v3.1: Jasa, daftar isi, editor seller, hasil pengerjaan ===== */
.bnav{grid-template-columns:repeat(6,1fr)}.bnav a{font-size:10.5px}
.jl{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.jl li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:var(--ink)}
.jl li::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--brand-l,#dbeafe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.exopt{margin-top:10px}
.pf .fl textarea{width:100%;min-height:96px}
.dv-row{align-items:flex-start;gap:12px}
.dv-row a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand);word-break:break-word}
.dv-row a .ico-s{width:16px;height:16px}
.dv-row small{color:var(--mut);word-break:break-word}
.dv-t{display:block;white-space:pre-wrap;font-size:14px;margin-top:2px}
.dv-del{flex:none;margin:0}
.gig-j .thumb .tt{position:relative;z-index:1;font:600 14px/1.3 'Poppins',sans-serif;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Form produk (tambah / edit): tampilan rapi & mobile friendly ===== */
.pf-lead{margin:-6px 0 14px;font-size:13.5px;color:var(--mut)}
.pf-nav{display:flex;gap:8px;overflow-x:auto;margin:0 -2px 10px;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pf-nav::-webkit-scrollbar{display:none}
.pf-nav a{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap}
.pf-nav a:hover,.pf-nav a:focus-visible{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}
.pf .pf-sec{scroll-margin-top:84px;border-color:#e8edf4;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pf .pf-sh{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pf-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-l);color:var(--brand);font:700 13px/28px 'Poppins',sans-serif;text-align:center}
.pf-st{min-width:0}
.pf-sh h3{line-height:1.3}
.pf-sb>.fl:first-child,.pf-sb>.pair2:first-child>.fl{margin-top:14px}
.pf .pf-help{margin:14px 0 4px;font-size:13px;line-height:1.55;color:var(--mut)}
.pf .pf-hint{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--mut)}
.pf .fl label{display:block;margin-bottom:6px}
.pf .fl input::placeholder,.pf .fl textarea::placeholder,.pf .bq-row input::placeholder,.pf .ex-row input::placeholder{color:#94a3b8}
.pf .fl input,.pf .fl select,.pf .fl textarea{border-color:#d9e1ec;background:#fff}
.pf .fl textarea{min-height:120px;line-height:1.5}
.pf .fl select,.pf .bq-row select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/16px no-repeat;padding-right:38px}
.pf .fl .wp-editor-container{border-color:#d9e1ec;border-radius:12px}
.pf .fl .wp-editor-container:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.pf .fl .note{margin-top:8px;font-size:12px;background:none;padding:0}
.pf-cnt{display:block;margin-top:5px;text-align:right;font-size:11.5px;color:var(--mut)}

/* input dengan satuan (Rp / hari / kali) */
.pf-unit{display:flex;align-items:stretch;border:1px solid #d9e1ec;border-radius:12px;background:#fff;overflow:hidden;transition:.15s}
.pf-unit:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.pf-unit>span{display:grid;place-items:center;flex:none;padding:0 13px;background:var(--bg);border-right:1px solid var(--line);color:var(--mut);font-size:14px;font-weight:600}
.pf-unit>span.s{border-right:0;border-left:1px solid var(--line)}
.pf .fl .pf-unit input,.pf .pf-unit input{flex:1;min-width:0;width:100%;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;padding:11px 13px;-moz-appearance:textfield}
.pf .fl .pf-unit input:focus,.pf .pf-unit input:focus{border:0;box-shadow:none;outline:0}
.pf .pf-unit input::-webkit-outer-spin-button,.pf .pf-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* thumbnail */
.pf .thumb-up .thumb-box{width:min(100%,180px);border-radius:16px;background:var(--brand-l);border-color:#bfdbfe}
.pf .thumb-up .thumb-box.has{background:#fff;border-color:var(--line)}
.pf .thumb-up small{margin-top:4px;line-height:1.45}
@media(min-width:560px){
	.pf .thumb-up{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:18px;align-items:start}
	.pf .thumb-up>label:first-child{grid-column:1/-1}
	.pf .thumb-up .thumb-box{grid-column:1;grid-row:2/4;width:100%}
	.pf .thumb-up .thumb-msg{grid-column:2;grid-row:2;align-self:end}
	.pf .thumb-up>small:last-child{grid-column:2;grid-row:3;align-self:start;margin-top:0}
}

/* pertanyaan form pesanan & layanan tambahan */
.bq-ed,.ex-ed{display:grid;gap:10px;margin-top:12px}
.pf .bq-row,.pf .ex-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px 12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.bq-n{display:grid;place-items:center;width:28px;height:28px;margin-top:6px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--mut);font:700 12px 'Poppins',sans-serif}
.bq-f,.bq-o,.ex-f,.ex-p,.ex-d{grid-column:2;min-width:0}
.pf .bq-row input[type=text],.pf .bq-row select,.pf .ex-row input[type=text]{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1px solid #d9e1ec;border-radius:12px;background-color:#fff;color:var(--ink)}
.pf .bq-row input[type=text]:focus,.pf .bq-row select:focus,.pf .ex-row input[type=text]:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.bq-o{display:flex;gap:8px;align-items:center}
.pf .bq-o select{flex:1;min-width:0;width:auto}
.ex-p,.ex-d{grid-column:2}
.pf-pill{position:relative;flex:none;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pf-pill span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid #d9e1ec;border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:var(--mut);transition:.15s}
.pf-pill span::before{content:'';flex:none;width:16px;height:16px;border-radius:5px;border:1.5px solid #cbd5e1;background:#fff}
.pf-pill input:checked+span{background:var(--brand-l);border-color:#93c5fd;color:var(--brand)}
.pf-pill input:checked+span::before{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pf-pill input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.js .pf-off{display:none!important}
.pf-add{display:none;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;min-height:46px;padding:0 16px;border:1.5px dashed #bfdbfe;border-radius:14px;background:#fff;color:var(--brand);font:600 14px 'Inter',sans-serif;cursor:pointer;transition:.15s}
.js .pf-add{display:flex}
.pf-add:hover,.pf-add:focus-visible{background:var(--brand-l);border-color:var(--brand)}
.pf-add[hidden]{display:none!important}

/* varian: saklar aktif / nonaktif */
.pf .tier-ed{border:1px solid var(--line);background:#fff}
.pf .tier-ed .chk{gap:12px}
.pf .tier-ed .chk b{font:600 15px 'Poppins',sans-serif}
.pf .tier-ed .chk input{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:background .2s}
.pf .tier-ed .chk input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);transition:transform .2s}
.pf .tier-ed .chk input:checked{background:var(--brand)}
.pf .tier-ed .chk input:checked::after{transform:translateX(18px)}
.pf .tier-ed .chk input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pf .tier-ed:has(.chk input:not(:checked)){border-style:dashed;background:var(--bg)}
.pf .tiers-ed{display:grid;gap:10px}
.pf .pf-tn{margin:12px 0 0;background:var(--bg)}

/* bar simpan */
.pf-bar{border-color:#dbe3ee;border-radius:18px}
.pf-ba .btn{min-height:46px}
.pf-ba .btn[disabled]{opacity:.65;pointer-events:none}

@media(min-width:400px) and (max-width:639.98px){
	.pf .ex-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr)}
	.ex-f{grid-column:2/-1}.ex-p{grid-column:2}.ex-d{grid-column:3}
}
@media(min-width:640px){
	.pf .bq-row{grid-template-columns:28px minmax(0,1fr) auto;align-items:center}
	.pf .bq-row .bq-n{margin-top:0}
	.bq-f{grid-column:2}.bq-o{grid-column:3}
	.pf .bq-o select{flex:none;width:170px}
	.pf .ex-row{grid-template-columns:28px minmax(0,2fr) minmax(0,1fr) 150px;align-items:center}
	.pf .ex-row .bq-n{margin-top:0}
	.ex-f{grid-column:2}.ex-p{grid-column:3}.ex-d{grid-column:4}
}
@media(max-width:380px){
	.pf .pf-sec{padding:14px 12px}
	.pf .bq-row,.pf .ex-row{padding:10px;gap:10px}
	.bq-o{flex-wrap:wrap}.pf .bq-o select{flex:1 1 100%}
	.pf-pill{flex:1 1 100%}.pf-pill span{width:100%;justify-content:center}
}

/* ===== Varian paket: kartu rapi satu kolom ===== */
.pf .tiers-ed{grid-template-columns:minmax(0,1fr);gap:12px}
.pf .tier-ed{display:block;padding:16px;border-radius:16px}
.pf .tier-ed>.chk{padding-bottom:0;margin:0}
.pf .tier-ed .fl label{margin-bottom:6px}
.pf .tier-ed>.chk+.fl{margin-top:14px}
.tier-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
@media(max-width:339.98px){.tier-pair{grid-template-columns:minmax(0,1fr)}}
.pf .tier-ed:has(.chk input:not(:checked)) .tier-pair{display:none}
.pf .tier-ed:has(.chk input:checked){border-color:#93c5fd;background:#f8fbff;box-shadow:0 1px 2px rgba(29,78,216,.06)}
.pf .tier-ed:has(.chk input:checked) .pf-unit{background:#fff}

/* ===== Galeri gambar jasa ===== */
.gal-up .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:6px 0}
.gal-it,.gal-add{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.gal-it img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.gal-it .gal-x,.gal-it .gal-xb{position:absolute;top:5px;right:5px;z-index:2;display:grid;place-items:center;width:28px;height:28px;margin:0!important;border:0;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;font-size:19px;line-height:1;cursor:pointer;padding:0}
.gal-it .gal-x input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.gal-it .gal-x:hover,.gal-it .gal-xb:hover{background:#dc2626}
.gal-it:has(.gal-x input:focus-visible) .gal-x{outline:2px solid var(--brand);outline-offset:2px}
.gal-it:has(.gal-x input:checked) img{opacity:.3}
.gal-it:has(.gal-x input:checked) .gal-x{background:#dc2626}
.gal-it:has(.gal-x input:checked)::after{content:'Dihapus';position:absolute;left:0;right:0;bottom:0;padding:14px 4px 6px;background:linear-gradient(transparent,rgba(15,23,42,.75));color:#fff;font-size:11.5px;font-weight:600;text-align:center}
.gal-it.new{border-color:#93c5fd}
.gal-it .sr,.gal-up .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gal-add{display:grid;place-items:center;margin:0!important;border:1.5px dashed #bfdbfe;background:var(--brand-l);cursor:pointer;text-align:center;color:var(--mut);font-size:12.5px;font-weight:600;transition:.15s}
.gal-add:hover,.gal-add:focus-within{border-color:var(--brand);background:#dbeafe}
.gal-add b{display:block;font-size:26px;line-height:1.1;font-weight:500;color:var(--brand)}
.gal-add[hidden]{display:none}
.pf .fl .gal-file{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.gal-up small{display:block;margin-top:4px;line-height:1.45;color:var(--mut);font-size:12px}
.gal-up .thumb-msg:not(:empty){color:var(--ink);font-size:12.5px}

/* galeri di halaman jasa */
.bn-gal{display:flex;gap:8px;overflow-x:auto;margin:10px 0 14px;padding:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bn-t{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;opacity:.75;transition:.15s}
.bn-t img{width:100%;height:100%;object-fit:cover;display:block}
.bn-t:hover,.bn-t.on{opacity:1}
.bn-t.on{border-color:var(--brand)}
.bn-t:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(min-width:640px){.bn-t{width:76px;height:76px}}
.pf .fl .gal-x{display:grid;place-items:center;margin:0;color:#fff;font-size:19px;font-weight:400;line-height:1}
.pf .fl .gal-add{display:grid;place-items:center;margin:0;font-size:12.5px}

/* ---- Kepala halaman katalog (v66): arsip Jasa, Backlink, Guest Post ---- */
.pg-head{position:relative;overflow:hidden;padding:16px 0 12px;background:#fff;border-bottom:1px solid var(--line)}
.pg-head .wrap{position:relative;z-index:1}
.pg-head .pgh-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pg-head h1{margin:0;font:700 20px/1.25 'Poppins',sans-serif;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.pg-head .pg-count{display:inline-flex;align-items:center;margin:0;padding:3px 10px;border-radius:99px;background:var(--brand-l);color:var(--brand);font:600 12px/1.5 'Inter',sans-serif;white-space:nowrap}
.pg-head .pg-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:640px;margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--mut)}

/* Chip kategori: geser horizontal di HP, ada penanda kategori aktif */
.pg-head .chiprow{display:flex;gap:8px;margin:12px calc(var(--gut) * -1) 0;padding:2px var(--gut) 4px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pg-head .chiprow::-webkit-scrollbar{display:none}
.pg-head .chiprow a{flex:none;scroll-snap-align:start;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:#334155;font:500 13px/1.2 'Inter',sans-serif;transition:background .15s,border-color .15s,color .15s}
.pg-head .chiprow a:hover{border-color:var(--brand);color:var(--brand)}
.pg-head .chiprow a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

@media(min-width:640px){
	.pg-head{padding:28px 0 24px;background:linear-gradient(135deg,var(--brand-l) 0%,#fff 62%)}
	.pg-head::before{content:"";position:absolute;right:-90px;top:-130px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.16),rgba(14,165,233,0) 70%);pointer-events:none}
	.pg-head .crumb{display:block;margin:0 0 10px}
	.pg-head h1{font-size:30px}
	.pg-head .pg-count{font-size:12.5px;padding:4px 12px}
	.pg-head .pg-desc{display:block;margin:10px 0 0;font-size:15px;-webkit-line-clamp:unset}
	.pg-head .chiprow{flex-wrap:wrap;overflow:visible;margin:18px 0 0;padding:0}
	.pg-head .chiprow a{padding:8px 16px;font-size:13.5px}
}
@media(min-width:960px){
	.pg-head .pg-count{display:none}
}

/* Pilihan nama di ulasan: kartu radio */
.rvn-w{margin-top:16px}
.rvn-l{font-size:13px;font-weight:600;color:#334155;margin-bottom:8px}
.rvn{display:grid;gap:10px}
.rvn-o{position:relative;display:block;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rvn-o input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none}
.rvn-c{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s}
.rvn-o:hover .rvn-c{border-color:#bfd0f5}
.rvn-av{flex:none;display:flex}
.rvn-av .av{width:40px;height:40px;font-size:14px}
.rvn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rvn-t b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.rvn-t small{font-size:12.5px;color:var(--mut);line-height:1.4;overflow-wrap:anywhere}
.rvn-t small strong{color:#334155;font-weight:600}
.rvn-k{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;display:grid;place-items:center;transition:border-color .15s,background .15s}
.rvn-k::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s}
.rvn-o input:checked+.rvn-c{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.rvn-o input:checked+.rvn-c .rvn-k{border-color:var(--brand);background:var(--brand)}
.rvn-o input:checked+.rvn-c .rvn-k::after{transform:scale(1)}
.rvn-o input:focus-visible+.rvn-c{outline:2px solid var(--brand);outline-offset:2px}
.rvn-h{margin:8px 0 0;font-size:12px;color:var(--mut)}
@media(min-width:560px){.rvn{grid-template-columns:1fr 1fr}}

/* Ulasan: sorotan dari notifikasi + tampilan di dalam panel pesanan */
.rrv{scroll-margin-top:90px}
.rrv-hl{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14);animation:rrvhl 2.4s ease-out 1}
@keyframes rrvhl{0%,40%{background:var(--brand-l)}100%{background:#fff}}
#ulasan{scroll-margin-top:90px}
.panel .rrv{border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
.panel .rrv-new{border-left:0}
@media(prefers-reduced-motion:reduce){.rrv-hl{animation:none}}

/* COD */
.cod-warn{display:flex;gap:10px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:10px 12px;font-size:13px;margin:0 0 12px}
.cod-warn p{margin:0}.cod-warn svg{flex:none;width:18px;height:18px;margin-top:1px}
.cod-ph{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;margin:0 0 12px}
.cod-ph>div:first-child{flex:1 1 180px;min-width:0}
.cod-ph small{display:block;color:var(--mut);font-size:12px;margin-bottom:2px}
.cod-ph b{font-size:19px;letter-spacing:.3px;color:var(--ink);overflow-wrap:anywhere}
.cod-ac{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.cod-b{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.cod-b:hover{border-color:var(--brand);color:var(--brand)}