/* ============================================================
   Kemasan Aluminium Foil Steven Chandra
   Permukaan terang, data jelas, dan aksen biru untuk tindakan.
   ============================================================ */

:root{
  --ink-900:#18313F;
  --ink-700:#405560;
  --ink-500:#586D78;
  --navy-800:#18313F;
  --navy-600:#294D62;
  --bg:#FFFFFF;
  --surface:#FFFFFF;

  /* Nama token dipertahankan karena juga dipakai komponen dinamis. */
  --copper-600:#245AA5;
  --copper-700:#174783;
  --copper-50:#EDF3FA;
  --foil-100:#EDF1F2;
  --foil-200:#CED9DE;
  --foil-300:#A9BAC3;
  --foil-400:#819AA7;
  --footer-muted:#586D78;
  --font-head:"Barlow Condensed","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:8px;
  --radius-sm:6px;
  --shadow-card:0 12px 32px rgba(24,49,63,.14);
  --shadow-soft:0 3px 12px rgba(24,49,63,.08);
  --header-h:68px;

  --success:#0F7B4D;
  --success-50:#E3F5EB;
  --success-ink:#0B6B42;
  --danger:#B42318;
  --danger-50:#FDECEA;
  --warning:#92400E;
  --warning-50:#FEF3C7;
  --info:#245AA5;
  --info-50:#EDF3FA;
  --teal:#0E6E7E;
  --teal-50:#E0F4F7;
  --ring:rgba(36,90,165,.22);
  --shadow-pop:0 18px 40px rgba(24,49,63,.18);
  --bar-h:64px;
  --cart-bar-h:0px;
  --sc-bar-h:0px;
}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--ink-700);background:var(--bg)}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0 0 1rem}
ul,ol{padding-left:1.25rem}
a{color:var(--copper-600);text-underline-offset:.2em}
a:hover{color:var(--copper-700)}
button{font:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--copper-600);outline-offset:3px;border-radius:2px}
/* Komponen flex tidak boleh membuat elemen hidden kembali terlihat. */
[hidden]{display:none!important}
:target,section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- Tipografi ---------- */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink-900);line-height:1.08;letter-spacing:0;font-weight:600}
h1{font-size:clamp(2.75rem,5.5vw,3.75rem);line-height:1.03}
h2{font-size:clamp(2rem,4vw,2.75rem)}
h3{font-size:1.5rem;line-height:1.15}
h4{font-size:1.2rem;line-height:1.2}
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-500);margin-bottom:.85rem}
.lede{font-size:1.125rem;line-height:1.6;color:var(--ink-700);max-width:62ch}
small,.small{font-size:.875rem}
.muted{color:var(--ink-500)}

/* ---------- Layout ---------- */
.container{max-width:1200px;margin-inline:auto;padding-inline:32px}
.section{padding-block:clamp(3rem,6vw,5rem)}
.section-tight{padding-block:clamp(2rem,4vw,3rem)}
.section-alt{background:var(--foil-100)}
.section-head{max-width:680px;margin-bottom:2rem}
.section-head p{max-width:65ch}
.center{text-align:center}
.center .section-head,.section-head.center{margin-inline:auto}
.hero-cta.center{justify-content:center}
@media(max-width:639px){.container{padding-inline:20px}}

/* ---------- Navigasi aksesibel ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.25rem;border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:1rem;text-decoration:none;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.btn svg{flex:none}
.btn-outline{background:transparent;color:var(--ink-900);border-color:var(--foil-300)}
.btn-outline:hover{background:var(--foil-100);border-color:var(--ink-700);color:var(--ink-900)}
.btn-primary{background:var(--copper-600);color:#fff}
.btn-primary:hover{background:var(--copper-700);color:#fff}
.btn-sm{min-height:40px;padding:.4rem .9rem;font-size:.9rem}
.btn-lg{min-height:52px;padding:.85rem 1.5rem;font-size:1.05rem}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--foil-100);color:var(--ink-500);border-color:var(--foil-200);cursor:not-allowed;transform:none;box-shadow:none}
.btn.is-loading{pointer-events:none}
.text-link{font-weight:600;text-decoration:underline;color:var(--copper-600)}
.text-link:hover{color:var(--copper-700)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--foil-200)}
.site-header.scrolled{box-shadow:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{width:40px;height:40px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--font-body);font-weight:600;font-size:1.125rem;color:var(--ink-900)}
.brand-text small{font-size:.75rem;letter-spacing:0;text-transform:none;color:var(--ink-500);margin-top:2px}
.site-nav{display:flex;align-items:center;gap:1.5rem}
.site-nav > a:not(.btn){font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--ink-700);text-decoration:none;padding:.55rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.site-nav > a:not(.btn):hover{color:var(--copper-600);border-bottom-color:var(--foil-300)}
.site-nav > a:not(.btn)[aria-current="page"]{color:var(--copper-600);border-bottom-color:var(--copper-600)}
.site-nav > a.btn-primary[aria-current="page"]{color:#fff}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:4px;background:#fff;color:var(--copper-700);font-size:.75rem;font-weight:700;line-height:1}
.nav-toggle{display:none;background:none;border:1px solid transparent;padding:.5rem;border-radius:var(--radius-sm);min-width:44px;min-height:44px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink-900);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .15s}
@media(max-width:1080px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--foil-200);padding:.5rem 20px 1.25rem}
  .site-header.nav-open .site-nav{display:flex}
  .site-nav > a:not(.btn){padding:.8rem 0;border-bottom:1px solid var(--foil-200);font-size:1rem}
  .site-nav .btn{margin-top:.75rem}
  .site-nav .btn + .btn{margin-top:.5rem}
  .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Pengantar halaman ---------- */
.hero{position:relative;overflow:hidden;background:var(--surface)}
.hero-grid{display:grid;gap:2.5rem;align-items:center;padding-block:clamp(3rem,7vw,5rem)}
.hero-grid > *{min-width:0}
.hero-copy .lede{margin-block:1.2rem 1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.hero-trust{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--ink-500)}
.hero-art{position:relative}
.pouch-cluster{display:flex;align-items:flex-end;justify-content:center;gap:1rem}
.pouch-cluster .pouch{width:28%;height:auto}
.pouch-cluster .pouch:nth-child(2){width:34%}
@media(min-width:900px){.hero-grid{grid-template-columns:55fr 45fr}}
.page-hero{background:var(--foil-100);border-bottom:1px solid var(--foil-200);padding-block:clamp(2.5rem,5vw,3.5rem)}
.page-hero h1{max-width:24ch}
.page-hero .lede{margin-top:1rem}
.crumbs{font-size:.875rem;color:var(--ink-500);margin-bottom:1.1rem}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--foil-400)}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs a:hover{color:var(--copper-600);text-decoration:underline}

/* ---------- Informasi dan katalog ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.usp-item{padding:1.25rem 0;border-top:1px solid var(--foil-200);display:flex;flex-direction:column;gap:.6rem}
.usp-item h3{font-size:1.375rem;margin:0}
.usp-item p{margin:0;font-size:.95rem;color:var(--ink-500);max-width:55ch}
.icon-disc{width:40px;height:40px;border-radius:6px;background:var(--copper-50);color:var(--copper-600);display:flex;align-items:center;justify-content:center}
.icon-disc svg{width:22px;height:22px}
@media(min-width:900px){.usp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .8rem;padding:0;list-style:none}
.chip{display:inline-block;background:var(--foil-100);color:var(--ink-700);border-radius:4px;padding:.2rem .6rem;font-size:.85rem;font-weight:500}
.tag{display:inline-block;background:var(--copper-50);color:var(--copper-700);border-radius:4px;padding:.2rem .6rem;font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none}
.grid-produk{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:480px){.grid-produk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid-produk{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid-produk.grid-3{grid-template-columns:1fr}
@media(min-width:640px){.grid-produk.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid-produk.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card-produk{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius);overflow:hidden}
.card-media{aspect-ratio:4/3;background:var(--foil-100);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.card-media svg,.card-media img{width:68%;height:auto}
.card-body{display:flex;flex-direction:column;flex:1;padding:1.25rem;gap:.5rem}
.card-body h3{margin:0;font-size:1.5rem}
.card-body h3 a{color:inherit;text-decoration:none}
.card-body h3 a:hover{color:var(--copper-600);text-decoration:underline}
.card-body p{margin:0;font-size:.95rem;color:var(--ink-500);max-width:65ch}
.card-body .btn{margin-top:auto;align-self:flex-start}
.card-body .chip-row{margin:.1rem 0 .4rem}
.steps{display:grid;gap:1.5rem}
.step{position:relative;padding-left:56px}
.step-num{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:6px;background:var(--copper-50);color:var(--copper-600);font-family:var(--font-body);font-weight:600;font-size:1rem;display:flex;align-items:center;justify-content:center}
.step h3{margin-bottom:.4rem}
.step p{margin:0;font-size:1rem;color:var(--ink-500);max-width:60ch}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.step{padding-left:0;padding-top:54px}}
.chip-area{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border-bottom:1px solid var(--foil-300);color:var(--ink-900);padding:.6rem .2rem;font-family:var(--font-body);font-weight:500;font-size:1rem;text-decoration:none;transition:color .15s,border-color .15s}
.chip-area:hover{border-color:var(--copper-600);color:var(--copper-700)}
.chip-area[aria-pressed="true"]{border-color:var(--copper-600);color:var(--copper-700);background:var(--copper-50)}
.area-cloud{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:center;padding:0;margin:0;list-style:none}
.why-grid{display:grid;gap:2rem}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.why-card{padding:1.25rem 0;border-top:1px solid var(--foil-200);display:flex;flex-direction:column;gap:.65rem}
.why-card h3{margin:0;font-size:1.5rem}
.why-card p{margin:0;font-size:1rem;color:var(--ink-500);max-width:60ch}
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;text-align:left}
@media(min-width:768px){.stat-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{border-top:1px solid var(--foil-200);padding:1.2rem 0}
.stat strong{display:block;font-family:var(--font-head);font-weight:600;font-size:2.25rem;color:var(--ink-900)}
.stat span{font-size:1rem;color:var(--ink-500)}

/* ---------- Ajakan pemesanan ---------- */
.cta-banner{background:var(--copper-50);border-top:1px solid var(--foil-200);border-bottom:1px solid var(--foil-200);color:var(--ink-700);padding:2rem clamp(1.25rem,5vw,3rem);text-align:left}
.cta-banner h2{color:var(--ink-900);margin-bottom:.75rem}
.cta-banner p{color:var(--ink-700);max-width:65ch;margin:0 0 1.5rem}
.cta-banner .hero-cta{justify-content:flex-start;margin:0}
.cta-banner a.tel-link{color:var(--ink-900);font-family:var(--font-body);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.cta-banner a.tel-link:hover{text-decoration:underline;color:var(--copper-700)}
@media(min-width:768px){.cta-wrap{padding-inline:32px}.cta-banner{border:1px solid var(--foil-200);border-radius:var(--radius);max-width:1136px;margin-inline:auto}}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin-inline:auto;border-top:1px solid var(--foil-200)}
.faq-item{background:var(--surface);border-bottom:1px solid var(--foil-200);overflow:hidden}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:1.15rem 0;font-family:var(--font-body);font-weight:600;color:var(--ink-900);cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:none;transition:transform .2s;color:var(--copper-600)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item .faq-body{padding:0 2rem 1.35rem 0;font-size:1rem;color:var(--ink-700);max-width:72ch}
.faq-item .faq-body p{margin-bottom:.75rem}
.faq-item .faq-body p:last-child{margin-bottom:0}

/* ---------- Tabel ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--foil-200);border-radius:var(--radius-sm);background:var(--surface)}
.table-scroll table{min-width:520px}
th,td{padding:.85rem 1rem;text-align:left;font-size:1rem;border-bottom:1px solid var(--foil-200)}
thead th{font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-900);background:var(--foil-100);border-bottom:1px solid var(--foil-200)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F5F8FA}

/* ---------- Kontak ---------- */
.contact-grid{display:grid;gap:2rem}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-card{display:flex;flex-direction:column;gap:.65rem;background:var(--surface);border-top:1px solid var(--foil-200);padding:1.5rem 0;color:inherit;text-decoration:none}
a.contact-card:hover{color:inherit;border-color:var(--copper-600)}
.contact-card h3{margin:0;font-size:1.5rem}
.contact-card p{margin:0;font-size:1rem;color:var(--ink-500);max-width:60ch}
.contact-card strong{color:var(--ink-900)}
address{font-style:normal}
.map-box{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--foil-200);position:relative;background:var(--foil-100)}
@media(min-width:900px){.map-box{aspect-ratio:21/9}}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-facade{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:transparent;border:0;color:var(--ink-700);font-family:var(--font-body);font-weight:600}
.map-facade:hover{background:rgba(255,255,255,.4)}
.map-facade .icon-disc{width:48px;height:48px;background:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--foil-100);border-top:1px solid var(--foil-200);color:var(--ink-700);font-size:1rem}
.site-footer a{color:var(--ink-700);text-decoration:none}
.site-footer a:hover{color:var(--copper-600);text-decoration:underline}
.footer-grid{display:grid;gap:2rem;padding-block:3rem 2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}}
.footer-grid h3{color:var(--ink-900);font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;margin-bottom:.9rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer-brand .brand-text strong{color:var(--ink-900)}
.footer-brand .brand-text small{color:var(--footer-muted)}
.footer-brand p{margin-top:1rem;color:var(--footer-muted);max-width:45ch}
.footer-area{border-top:1px solid var(--foil-200);padding-block:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.footer-area span{color:var(--footer-muted);font-size:.9rem}
.footer-area a{font-size:.9rem}
.footer-bottom{border-top:1px solid var(--foil-200);padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.875rem;color:var(--footer-muted)}

/* Konten tetap terbaca bila observer animasi belum berjalan atau JavaScript mati. */
[data-reveal],[data-reveal].in-view{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Halaman 404 ---------- */
.page-404{min-height:80vh;display:flex;align-items:center}
.page-404 .container{max-width:640px}
.page-404 .pouch-404{width:130px;margin:0 auto 1.5rem}
.page-404 h1{font-size:clamp(1.6rem,4vw,2.4rem)}

/* ---------- Pusat kendali (/dashboard/) ---------- */
.panel-url,.panel-form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;margin-bottom:.6rem}
.panel-url input,.panel-form input{flex:1 1 260px;min-height:48px;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.6rem 1rem;font:inherit;color:var(--ink-900);background:var(--surface)}
.panel-form input[type="number"]{flex:1 1 160px}
.panel-form input[type="datetime-local"]{flex:1 1 210px}

/* ---------- Form ---------- */
.field{display:flex;flex-direction:column;margin-bottom:1rem}
fieldset.field{border:0;padding:0;margin-inline:0;min-width:0}
.field label,.field legend{font-family:var(--font-head);font-weight:600;font-size:.875rem;color:var(--ink-900);margin-bottom:.35rem}
.field legend{padding:0}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.65rem .9rem;font:inherit;color:var(--ink-900);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
/* Aturan state mengulang :not() agar spesifisitasnya menang atas aturan dasar di atas */
.field input:not([type=checkbox]):not([type=radio]):focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--copper-600);box-shadow:0 0 0 3px var(--ring)}
.field input:not([type=checkbox]):not([type=radio]):disabled,.field select:disabled,.field textarea:disabled{background:var(--foil-100);color:var(--ink-500);cursor:not-allowed}
.field input:not([type=checkbox]):not([type=radio])[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.field .check{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:var(--ink-700);margin-bottom:.5rem}
.field-error{color:var(--danger);font-size:.82rem;margin:.3rem 0 0}
.hint{font-size:.8rem;color:var(--ink-500)}
.field .hint{margin:.3rem 0 0}
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{flex:none;accent-color:var(--copper-600);width:20px;height:20px;margin-top:.15rem}
.check input:disabled{cursor:not-allowed}
.hp{position:absolute;left:-9999px}

/* ---------- Badge status pesanan (titik + teks, bukan warna saja) ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.5;white-space:nowrap}
.badge::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.badge-pending{background:var(--warning-50);color:var(--warning)}
.badge-paid,.badge-done{background:var(--success-50);color:var(--success-ink)}
.badge-expired{background:#EEF1F5;color:var(--ink-700)}
.badge-cancelled,.badge-refund_review{background:var(--danger-50);color:var(--danger)}
.badge-new{background:var(--info-50);color:var(--info)}
.badge-processing{background:var(--copper-50);color:var(--copper-700)}
.badge-shipped{background:var(--teal-50);color:var(--teal)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--foil-200);overflow-x:auto}
.tab{background:none;border:0;padding:.8rem 1rem;font-family:var(--font-head);font-weight:600;color:var(--ink-700);white-space:nowrap}
.tab:hover{color:var(--ink-900)}
.tab[aria-selected="true"]{color:var(--copper-600);box-shadow:inset 0 -3px 0 var(--copper-600)}

/* ---------- Drawer, modal, toast, spinner ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80}
.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(19,28,38,.45)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);box-shadow:var(--shadow-pop);overflow:auto;overscroll-behavior:contain}
.drawer-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--foil-200)}
.drawer-head h2{margin:0;font-size:1.15rem}
.drawer-body{padding:1.25rem}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:85;display:flex;align-items:center;justify-content:center;background:rgba(19,28,38,.45)}
.modal > div{width:min(440px,92vw);background:var(--surface);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-pop)}
.modal h2{font-size:1.2rem}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}
.toast-host{position:fixed;z-index:90;top:calc(var(--header-h) + 10px);left:50%;transform:translateX(-50%);width:min(92vw,420px);display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--ink-900);color:#fff;border-left:4px solid var(--success);border-radius:var(--radius-sm);padding:.7rem 1rem;box-shadow:var(--shadow-pop);pointer-events:auto}
.toast-danger{border-left-color:var(--danger)}
.spinner{display:inline-block;width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Toko online (/pesan/, /pesan/status/) ---------- */
body.has-cart-bar{--cart-bar-h:var(--bar-h)}
@media (min-width:960px){body.has-cart-bar{--cart-bar-h:0px}}
.pesan-grid{display:grid;gap:1.5rem}
.pesan-katalog,.pesan-form{min-width:0}
.pesan-form{background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius);padding:clamp(1.25rem,4vw,2rem)}
@media (min-width:960px){
  .pesan-grid{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"katalog cart" "form cart"}
  .pesan-katalog{grid-area:katalog}
  .cart-summary{grid-area:cart;position:sticky;top:calc(var(--header-h) + 16px);align-self:start}
  .pesan-form{grid-area:form}
}
.cart-summary{background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius);padding:1.25rem}
.cart-bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar-h);z-index:56;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 16px;background:var(--surface);border-top:1px solid var(--foil-200);box-shadow:0 -6px 18px rgba(19,28,38,.08)}
@media (min-width:960px){.cart-bar{display:none}}
.is-typing .cart-bar{display:none}
.produk-blok{margin-bottom:2rem}
.table-num{text-align:right;font-variant-numeric:tabular-nums}
.card-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.card-body .card-actions{margin-top:auto}
.card-body .card-actions .btn{margin-top:0}
.notice{border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.9rem 1rem;background:var(--foil-100)}
.notice > :last-child{margin-bottom:0}
.notice-danger{border-color:#F4C7C1;background:var(--danger-50);color:var(--danger)}
.notice-success{border-color:#B7E2C9;background:var(--success-50);color:var(--success-ink)}
.notice-warning{border-color:#FCD9A0;background:var(--warning-50);color:var(--warning)}
.status-wrap{max-width:760px;margin-inline:auto;display:grid;gap:1rem}
.status-card{background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius);padding:1.5rem}
.trust-row{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;margin:1rem 0 0;font-size:.875rem;color:var(--ink-500)}
.trust-row li{display:flex;align-items:baseline;gap:.4rem}
.trust-row li::before{content:"✓";color:var(--success);font-weight:700}
/* Tabel bertumpuk (<640px): tiap baris jadi kartu, label kolom dari td[data-label] */
@media (max-width:639px){
  .table-scroll .tbl-stack{min-width:0}
  .tbl-stack thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tbl-stack,.tbl-stack tbody{display:block}
  .tbl-stack tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem;padding:1rem;border-bottom:1px solid var(--foil-200)}
  .tbl-stack tbody tr:last-child{border-bottom:0}
  .tbl-stack tbody tr:hover{background:transparent}
  .tbl-stack td{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:0;border:0}
  .tbl-stack td::before{content:attr(data-label);font-family:var(--font-head);font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-500)}
  .tbl-stack td:not([data-label])::before,.tbl-stack td[data-label=""]::before{content:none}
  .tbl-stack .table-num{text-align:left}
  .tbl-stack .td-full{grid-column:1 / -1}
}

/* ---------- Banner persetujuan iklan (diisi js/pixel.js) ---------- */
/* Mobile: di atas launcher chat (16 + 56 + 12 = 84px) */
.consent-bar{position:fixed;z-index:55;left:12px;right:12px;bottom:calc(84px + var(--cart-bar-h));display:flex;flex-direction:column;gap:.7rem;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--foil-300);border-radius:var(--radius);box-shadow:var(--shadow-card);font-size:.85rem;line-height:1.5}
.consent-bar p{margin:0;flex:1 1 auto}
.consent-now{display:block;margin-top:.3rem;font-weight:600;color:var(--ink-900)}
.consent-actions{display:flex;gap:.5rem;flex:none}
.consent-actions .btn{flex:1 1 0;min-width:96px}
@media (min-width:960px){
  .consent-bar{left:50%;right:auto;transform:translateX(-50%);bottom:16px;width:min(640px,calc(100vw - 220px));flex-direction:row;align-items:center}
  .consent-actions .btn{flex:none}
}

/* ---------- Live chat (widget js/chat.js) ---------- */
.chat-launcher{position:fixed;left:16px;bottom:calc(16px + var(--sc-bar-h,0px) + var(--cart-bar-h,0px) + env(safe-area-inset-bottom,0px));z-index:60;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--navy-800);color:#fff;box-shadow:0 8px 24px rgba(19,28,38,.3);display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .15s}
.chat-launcher:hover{background:var(--navy-600)}
.chat-launcher:active{transform:scale(.96)}
.chat-launcher svg{width:26px;height:26px;fill:currentColor}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;border:2px solid #fff;background:var(--copper-600);color:#fff;font-family:var(--font-head);font-size:.72rem;font-weight:700;line-height:18px;text-align:center}
/* Offset cart-bar pada launcher menjaga livechat tetap dapat dibuka dari keranjang mobile. */
.chat-panel{--chat-online:#3DD68C;position:fixed;left:16px;bottom:calc(84px + var(--sc-bar-h,0px) + var(--cart-bar-h,0px) + env(safe-area-inset-bottom,0px));z-index:70;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius);box-shadow:var(--shadow-card);color:var(--ink-700);font-size:.92rem;line-height:1.5;animation:chatIn .18s ease-out}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:.75rem;padding:.7rem .6rem .7rem 1rem;background:var(--navy-800);color:#fff}
.chat-head-text{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-title{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:700;line-height:1.3;color:#fff}
.chat-status{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:#C9D6E4}
.chat-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--foil-400)}
.chat-dot.is-online{background:var(--chat-online)}
.chat-min{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center}
.chat-min:hover{background:rgba(255,255,255,.12)}
.chat-min svg,.chat-send svg{width:20px;height:20px;fill:currentColor}
.chat-conv-switch{margin:.6rem .75rem 0;min-height:40px;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.35rem .6rem;font:inherit;font-size:16px;color:var(--ink-900);background:var(--surface)}
.chat-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:.5rem;padding:1rem .75rem;background:var(--surface)}
/* daftar pesan bisa difokus (keyboard scroll); cincin fokus di dalam agar tidak terpotong overflow panel */
.chat-list:focus-visible{outline-offset:-2px}
.chat-day{align-self:center;margin:.25rem 0;padding:.1rem .7rem;border-radius:999px;background:var(--foil-100);font-size:.72rem;font-weight:600;color:var(--ink-500)}
.chat-msg{max-width:85%;padding:.5rem .8rem;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.chat-msg--visitor{align-self:flex-end;background:var(--navy-800);color:#fff;border-bottom-right-radius:4px}
.chat-msg--agent{align-self:flex-start;background:var(--foil-100);color:var(--ink-900);border-bottom-left-radius:4px}
.chat-msg--system{align-self:center;max-width:92%;background:transparent;border:1px dashed var(--foil-300);color:var(--ink-700);font-size:.85rem;text-align:center}
.chat-msg a{color:inherit;text-decoration:underline}
.chat-msg--agent a{color:var(--copper-700)}
.chat-meta{display:block;margin-top:.15rem;font-size:.7rem;opacity:.8;text-align:right}
.chat-msg.is-failed{box-shadow:0 0 0 2px var(--danger)}
.chat-retry{display:block;margin-top:.25rem;padding:0;border:0;background:none;color:inherit;font-size:.75rem;text-decoration:underline}
.chat-notice{margin:0;padding:.5rem .75rem;border-top:1px solid #FCD9A0;background:var(--warning-50);color:var(--warning);font-size:.8rem}
.chat-prechat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding:1rem}
.chat-prechat p{margin:0;font-size:.85rem;color:var(--ink-500)}
.chat-prechat label{display:flex;flex-direction:column;gap:.3rem;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--ink-900)}
.chat-prechat .field-error{margin-top:-.4rem;font-size:.8rem;color:var(--danger)}
/* font-size 16px: iOS Safari memperbesar halaman bila input < 16px */
.chat-prechat input,.chat-form textarea{width:100%;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.6rem .8rem;font:inherit;font-family:var(--font-body);font-size:16px;font-weight:400;color:var(--ink-900);background:var(--surface)}
.chat-prechat input{min-height:44px}
.chat-panel input:focus-visible,.chat-panel textarea:focus-visible,.chat-panel select:focus-visible{outline:none;border-color:var(--copper-600);box-shadow:0 0 0 3px var(--ring)}
.chat-form{display:flex;align-items:flex-end;gap:.5rem;padding:.6rem .75rem;border-top:1px solid var(--foil-200);background:var(--surface)}
.chat-form textarea{flex:1;min-height:44px;max-height:120px;resize:none;line-height:1.4;border-radius:var(--radius-sm);padding:.6rem .8rem}
.chat-send{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:var(--copper-600);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.chat-send:hover{background:var(--copper-700)}
.chat-send:disabled{background:var(--foil-300);cursor:not-allowed}
.chat-foot{padding:.35rem .75rem .6rem;text-align:center;font-size:.78rem;color:var(--ink-500);background:var(--surface)}
.chat-foot a{font-weight:600;color:var(--copper-600);text-decoration:none}
.chat-foot a:hover{text-decoration:underline}
.chat-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
html.chat-lock,html.chat-lock body{overflow:hidden}
/* Mobile: layar penuh; tinggi diatur JS dari visualViewport agar tidak tertutup keyboard iOS */
@media (max-width:640px){
  .chat-panel{top:0;right:0;bottom:0;left:0;z-index:80;width:auto;max-width:none;height:auto;max-height:none;border:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){.chat-panel{animation:none}}

/* ---------- Tab Chat dashboard (js/dashboard.js) ---------- */
.dchat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem}
.dchat-seg{display:inline-flex;overflow:hidden;border:1px solid var(--foil-300);border-radius:999px;background:var(--surface)}
.dchat-seg button{min-height:40px;padding:.35rem 1rem;border:0;background:transparent;font-family:var(--font-head);font-size:.85rem;font-weight:600;color:var(--ink-700)}
.dchat-seg button + button{border-left:1px solid var(--foil-300)}
.dchat-seg button[aria-pressed="true"]{background:var(--copper-600);color:#fff}
.dchat-relay{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-500)}
.dchat-relay::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--foil-400)}
.dchat-relay.is-ok::before{background:var(--success)}
.dchat-relay.is-bad{color:var(--danger)}
.dchat-relay.is-bad::before{background:var(--danger)}
.dchat{display:grid;gap:1rem}
.dchat-side,.dchat-thread{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius)}
.dchat-filter{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem;border-bottom:1px solid var(--foil-200)}
.dchat-filter input,.dchat-filter select{flex:1 1 140px;min-height:40px;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.35rem .7rem;font:inherit;font-size:.9rem;color:var(--ink-900);background:var(--surface)}
.dchat-list{list-style:none;margin:0;padding:0;max-height:70vh;overflow-y:auto}
.dchat-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;width:100%;padding:.75rem 1rem;border:0;border-bottom:1px solid var(--foil-100);background:transparent;color:var(--ink-700);text-align:left}
.dchat-item:hover{background:#FBFCFE}
.dchat-item[aria-current="true"]{background:var(--copper-50)}
.dchat-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-head);font-weight:600;color:var(--ink-900)}
.dchat-item-time{font-size:.75rem;color:var(--ink-500);white-space:nowrap}
.dchat-item-snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:var(--ink-500)}
.dchat-item.is-unread .dchat-item-snippet{font-weight:600;color:var(--ink-900)}
.dchat-unread{justify-self:end;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--copper-600);color:#fff;font-size:.72rem;font-weight:700;line-height:22px;text-align:center}
.dchat-empty{padding:2rem 1rem;text-align:center;font-size:.9rem;color:var(--ink-500)}
.dchat-thread{display:flex;flex-direction:column;min-height:60vh}
.dchat-thread-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;border-bottom:1px solid var(--foil-200)}
.dchat-thread-head h3{flex:1;min-width:0;margin:0;font-size:1rem}
.dchat-back{display:none}
.dchat-msgs{flex:1;min-height:240px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.dchat-msg{max-width:80%;padding:.5rem .8rem;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;line-height:1.45}
.dchat-msg--visitor{align-self:flex-start;background:var(--foil-100);color:var(--ink-900);border-bottom-left-radius:4px}
.dchat-msg--agent{align-self:flex-end;background:var(--navy-800);color:#fff;border-bottom-right-radius:4px}
.dchat-msg--system{align-self:center;max-width:92%;border:1px dashed var(--foil-300);color:var(--ink-700);font-size:.85rem;text-align:center}
.dchat-via{display:block;margin-top:.15rem;font-size:.7rem;opacity:.8}
.dchat-canned{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1rem 0}
.dchat-chip{padding:.25rem .75rem;border:1px solid var(--foil-300);border-radius:999px;background:var(--surface);font-size:.78rem;font-weight:600;color:var(--ink-700)}
.dchat-chip:hover{border-color:var(--copper-600);color:var(--copper-700)}
.dchat-compose{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--foil-200)}
.dchat-compose textarea{flex:1;min-height:44px;max-height:160px;resize:vertical;border:1px solid var(--foil-300);border-radius:var(--radius-sm);padding:.55rem .8rem;font:inherit;color:var(--ink-900);background:var(--surface)}
.dchat-info{padding:.75rem 1rem;border-top:1px solid var(--foil-200);font-size:.88rem}
.dchat-info summary{cursor:pointer;font-family:var(--font-head);font-weight:600;color:var(--ink-900)}
.dchat-info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .9rem;margin:.75rem 0 0}
.dchat-info dt{color:var(--ink-500)}
.dchat-info dd{margin:0;overflow-wrap:anywhere;color:var(--ink-900)}
.dchat-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--foil-200)}
@media (min-width:900px){.dchat{grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:start}}
/* <900px satu kolom: daftar -> thread (JS memasang .is-thread) -> tombol Kembali */
@media (max-width:899px){
  .dchat.is-thread .dchat-side{display:none}
  .dchat:not(.is-thread) .dchat-thread{display:none}
  .dchat-back{display:inline-flex}
}

/* ---------- Utilitas ---------- */
.lede-center{margin-inline:auto}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}
.prose{max-width:70ch}
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.75rem}

/* ---------- Cetak (bukti pembayaran /pesan/status/) ---------- */
@media print{
  .site-header,.site-footer,.consent-bar,.cart-bar,.toast-host,.skip-link,.cta-wrap,.no-print,.chat-launcher,.chat-panel{display:none!important}
  body{background:#fff;color:#000}
  .status-card{border:0;box-shadow:none;padding:0}
}

/* ---------- Tambahan halaman pesan ---------- */
/* Katalog /pesan/ (dirender js/toko.js) */
.pesan-banner{margin-bottom:1rem}
/* Fokus/lompat (Lanjut, galat, isian tidak valid) tidak tertutup header sticky */
#keranjang,#form-pesan,#form-error,.pesan-form input,.pesan-form textarea,.produk-blok h3{scroll-margin-top:calc(var(--header-h) + 24px)}
.katalog-status p{margin:0 0 1rem}
#katalog.is-loading{min-height:60vh;border-radius:var(--radius);background:repeating-linear-gradient(180deg,var(--foil-100) 0 56px,transparent 56px 72px)}
a.chip{text-decoration:none}
a.chip:hover{background:var(--copper-50);color:var(--copper-700)}
.produk-blok h3{margin-bottom:.4rem}
@media (min-width:640px){.produk-blok th,.produk-blok td{padding:.6rem}}
.produk-blok td:first-child,td.table-num{white-space:nowrap}
.tier{display:block;font-size:.75rem;color:var(--ink-500);white-space:nowrap}
.qty-input{width:5.5rem;min-height:40px;padding:.4rem .6rem;border:1px solid var(--foil-300);border-radius:var(--radius-sm);font:inherit;text-align:right;color:var(--ink-900);background:var(--surface)}
.qty-input:focus-visible{outline:none;border-color:var(--copper-600);box-shadow:0 0 0 3px var(--ring)}
.qty-input[aria-invalid="true"]{border-color:var(--danger)}
.td-qty .field-error{max-width:12rem}
.td-add .btn{min-width:6.5rem;white-space:nowrap}
.link-produk{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.4rem 0 0;padding:0;list-style:none;font-size:.875rem}
/* Tabel varian sempit (640-767 px & dua kolom 960-1199 px): sel & kontrol diringkas agar kolom Tambah tidak terpotong */
@media (min-width:640px) and (max-width:767px),(min-width:960px) and (max-width:1199px){.produk-blok th,.produk-blok td{padding:.5rem .45rem}.produk-blok td:first-child{white-space:normal}.qty-input{width:4.5rem}.td-add .btn{min-width:0;padding-inline:.8rem}}
@media (min-width:960px) and (max-width:1199px){.pesan-grid{grid-template-columns:minmax(0,1fr) 300px}}
/* Ringkasan pesanan & form */
.cart-summary h2{display:flex;align-items:center;gap:.5rem;font-size:1.2rem}
.cart-lines{list-style:none;margin:0 0 1rem;padding:0}
.cart-line{padding:.75rem 0;border-bottom:1px solid var(--foil-200)}
.cart-line-name{margin:0 0 .4rem;font-weight:600;font-size:.9rem;color:var(--ink-900)}
.cart-line-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.cart-line-row .qty-input{width:5.5rem}
.cart-line-unit{font-size:.8rem;color:var(--ink-500)}
.cart-line-sub{margin-left:auto;font-variant-numeric:tabular-nums}
.cart-line-row .field-error{flex-basis:100%}
.cart-del{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-500)}
.cart-del:hover{background:var(--danger-50);color:var(--danger)}
.cart-sum{margin:0 0 1rem}
.cart-sum div{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0}
.cart-sum dt{color:var(--ink-500)}
.cart-sum dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.cart-sum .cart-sum-total{margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--foil-200);font-weight:700;font-size:1.05rem}
.cart-sum-total dt{color:var(--ink-900)}
.cart-summary .btn{width:100%}
.cart-clear{display:block;margin:.75rem auto 0;padding:.4rem;border:0;background:none;color:var(--ink-500);font-size:.85rem;text-decoration:underline}
.ringkas{list-style:none;margin:0 0 1rem;padding:.9rem 1rem;background:var(--foil-100);border-radius:var(--radius-sm);font-size:.875rem}
.ringkas li{padding:.15rem 0}
.ringkas .ringkas-total{margin-top:.4rem;padding-top:.5rem;border-top:1px solid var(--foil-300);font-weight:700;color:var(--ink-900)}
#form-error p{margin:0}
.btn.is-loading svg{display:none}
.btn.is-loading::before{content:"";width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.cart-bar-info{display:flex;flex-direction:column;margin:0;font-size:.85rem;line-height:1.3}
.cart-bar-info strong{font-size:1rem;color:var(--ink-900)}
/* Status pesanan /pesan/status/ (js/status.js) */
.status-card h2{margin:.6rem 0 .75rem;font-size:clamp(1.3rem,3.5vw,1.7rem)}
.status-card h3{margin-top:1.5rem;font-size:1.05rem}
.status-ico{display:block;margin-bottom:.5rem;color:var(--success)}
.status-cd{font-weight:600;color:var(--warning)}
.status-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0}
.status-meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0 0 1rem}
.status-meta dt{color:var(--ink-500)}
.status-meta dd{margin:0;font-weight:600;color:var(--ink-900);overflow-wrap:anywhere}
.status-total{display:flex;justify-content:space-between;gap:1rem;margin:.75rem 0 1rem;font-weight:700;color:var(--ink-900)}
.status-steps{padding-left:1.25rem}
.status-steps li{margin-bottom:.4rem}
@media print{.page-hero .crumbs{display:none}}

/* ---------- Tambahan dashboard ---------- */
/* Pusat Kendali (dashboard/index.html + js/dashboard.js). Semua gaya di sini: CSP dashboard/.htaccess melarang style inline. */
html.dash-lock{overflow:hidden}
.dash-head-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}
.dash-user{max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ponsel: header tetap satu baris; "Ke Beranda" masih ada di footer & logo */
@media (max-width:479px){.dash-user,.dash-home{display:none}}
.dash-login{max-width:460px}
.dash-pass{display:flex;gap:.5rem;align-items:center}
.dash-pass input{flex:1;min-width:0}
.dash-pass .btn{flex:none}
.dash-env{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;margin:0;border-width:0 0 1px;border-radius:0;text-align:center;font-weight:600}
.dash-tabs{margin-top:.75rem}
.dash-panel h2{font-size:clamp(1.35rem,3vw,1.75rem)}
.dash-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 1rem}
.dash-filter .field{flex:1 1 150px;min-width:0}
.dash-filter-actions{display:flex;flex:none;gap:.5rem;margin-bottom:1rem}
.dash-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:0 0 1rem}
.dash-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.dash-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem}
.dash-sub{display:block;font-size:.78rem;color:var(--ink-500);overflow-wrap:anywhere}
.dash-label{display:block;margin-top:.5rem;font-family:var(--font-head);font-weight:600;font-size:.875rem;color:var(--ink-900)}
.dash-copy{margin-top:.4rem}
.dash-copy input{font-size:.85rem}
.dash-card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;font-size:1.05rem}
.dash-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.35rem 1rem}
.dash-checks .check{margin-bottom:.25rem;font-weight:400}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#912018;color:#fff}
.dash-icon{min-width:40px;padding-inline:.7rem}
/* Toast di kiri-bawah & tembus klik: tidak menutupi tab, saringan, atau drawer (kanan) saat bekerja */
.dash-toasts{top:auto;bottom:16px;left:16px;transform:none;width:min(420px,calc(100vw - 32px))}
.dash-toasts .toast{pointer-events:none}
.dash-toast-x{float:right;margin:-.15rem -.35rem 0 .75rem;padding:0 .25rem;border:0;background:none;color:inherit;font-size:1.25rem;line-height:1;pointer-events:auto}
.modal > div{max-height:calc(100vh - 2rem);overflow-y:auto}
/* Teks .sr-only (absolute) di dalam tabel lebar harus ikut terpotong scroller-nya, bukan melebarkan halaman */
.dash-panel .table-scroll{position:relative}
/* Katalog (tab Produk & Harga) */
.dash-prod{margin-bottom:1.25rem;padding:1.1rem;background:var(--surface);border:1px solid var(--foil-200);border-radius:var(--radius)}
.dash-prod.is-off{background:var(--foil-100)}
.dash-prod-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.75rem}
.dash-prod-head h3{margin:0 0 .2rem;font-size:1.1rem}
@media (min-width:640px){.dash-var th,.dash-var td{padding:.5rem .6rem;vertical-align:middle}.dash-var td:first-child{white-space:nowrap}}
.dash-var .table-num{white-space:nowrap}
.dash-var code{overflow-wrap:anywhere}
.dash-var .dash-tools{flex-wrap:nowrap}
.dash-num{width:6.5rem;min-height:40px;padding:.4rem .6rem;border:1px solid var(--foil-300);border-radius:var(--radius-sm);font:inherit;text-align:right;color:var(--ink-900);background:var(--surface)}
.dash-num:focus-visible{outline:none;border-color:var(--copper-600);box-shadow:0 0 0 3px var(--ring)}
.dash-num[aria-invalid="true"]{border-color:var(--danger)}
.dash-var input[aria-busy="true"]{opacity:.55}
.dash-ok{margin-left:.35rem;font-weight:700;color:var(--success-ink)}
.dash-unpriced{display:block;width:max-content;margin:.3rem 0 0 auto;background:var(--warning-50);color:var(--warning)}
@media (max-width:639px){.dash-num{width:100%}.dash-unpriced{margin-left:0}}
/* Drawer detail pesanan */
.dash-dsec{margin-bottom:1.5rem}
.dash-dsec h3{margin-bottom:.6rem;font-size:1rem}
.dash-items th,.dash-items td{padding:.5rem .4rem;font-size:.88rem}
.dash-items td:first-child{overflow-wrap:anywhere}
.dash-items tfoot td{white-space:normal}
.dash-items tfoot th{text-align:right;font-weight:600;color:var(--ink-700)}
.dash-timeline{list-style:none;margin:0;padding:0 0 0 1rem;border-left:2px solid var(--foil-200)}
.dash-timeline li{position:relative;padding:.3rem 0 .7rem;font-size:.9rem}
.dash-timeline li::before{content:"";position:absolute;left:calc(-1rem - 5px);top:.65rem;width:8px;height:8px;border-radius:50%;background:var(--foil-400)}
.dash-timeline li.is-bad::before{background:var(--danger)}
.dash-timeline time{display:block;font-size:.78rem;color:var(--ink-500)}
.dash-panel .status-card > h3:first-child{margin-top:0}
@media (max-width:479px){.dash-dsec .status-meta,.dash-panel .status-meta{grid-template-columns:minmax(0,1fr);gap:0}.dash-dsec .status-meta dd,.dash-panel .status-meta dd{margin-bottom:.5rem}}

/* Custom memakai spesifikasi yang sama; harga tetap menunggu konfirmasi penjual. */
.custom-foil{margin:2rem 0;padding:1.25rem;border:1px solid var(--foil-300);border-radius:var(--radius);background:var(--surface);scroll-margin-top:calc(var(--header-h) + 24px)}
.custom-foil h3{margin-bottom:.5rem}
.custom-foil-fields{display:grid;gap:0 1rem}
@media(min-width:640px){.custom-foil-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

.chat-load-error{position:fixed;left:16px;bottom:calc(84px + var(--cart-bar-h,0px));z-index:61;max-width:280px;padding:.75rem;background:var(--surface);border:1px solid var(--foil-300);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}

/* ---------- Beranda: material, ukuran, dan pemesanan ---------- */
.public-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.public-page > .site-header,.public-page > .site-footer{flex-shrink:0}
.public-page > main{flex:1 0 auto;min-width:0}
.catalog-hero{padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--foil-200)}
.catalog-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.catalog-hero-grid > *{min-width:0}
.catalog-intro h1{font-size:clamp(3.5rem,6vw,4.5rem);line-height:.98;max-width:13ch;margin-bottom:1.4rem}
.catalog-intro .lede{max-width:42ch;margin-bottom:1.75rem}
.catalog-intro .hero-cta{margin-bottom:1.75rem}
.catalog-spec{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:0;padding-top:1.25rem;border-top:1px solid var(--foil-200)}
.catalog-spec div{min-width:0}
.catalog-spec dt{font-size:.875rem;color:var(--ink-500);margin-bottom:.25rem}
.catalog-spec dd{margin:0;color:var(--ink-900);font-size:1.1rem;font-weight:600}
.material-sheet{margin:0;min-width:0}
.material-sheet-art{background:var(--foil-100);border-radius:var(--radius);overflow:hidden}
.material-sheet-art img,.material-sheet-art > svg{display:block;width:100%;height:auto}
.material-sheet-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;padding:.9rem 0;font-size:.9rem;color:var(--ink-500)}
.material-sheet-meta p{margin:0}
.material-sheet-meta strong{font-weight:600;color:var(--ink-900)}
.material-sheet-meta dl{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:0}
.material-sheet-meta dt{color:var(--ink-500)}
.material-sheet-meta dd{margin:0;font-weight:600;color:var(--ink-900)}
.catalog-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 4rem;margin-bottom:1.75rem}
.catalog-heading h2{margin:0;max-width:20ch}
.catalog-heading p{margin:0;max-width:48ch}
.catalog-prices .table-scroll table{min-width:0}
.catalog-prices table th:first-child,.catalog-prices table td:first-child{text-align:left}
.catalog-prices .price-number,.catalog-prices table th:nth-child(2),.catalog-prices table td:nth-child(2),.catalog-prices table th:last-child,.catalog-prices table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.catalog-prices td{padding-block:1rem;font-size:1.125rem}
.catalog-prices td:nth-child(2){font-weight:600;color:var(--ink-900)}
.catalog-prices td:last-child:not(:nth-child(2)){font-weight:400;font-size:1rem;color:var(--ink-500)}
.catalog-prices .hint{font-size:.95rem;margin-top:.9rem;max-width:70ch}
.catalog-service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem 5rem}
.catalog-service p{max-width:60ch}
.catalog-service dl{margin:1.5rem 0 0}
.catalog-service dl > div{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);gap:1rem;padding:.9rem 0;border-top:1px solid var(--foil-200)}
.catalog-service dt{color:var(--ink-500)}
.catalog-service dd{margin:0;font-weight:500;color:var(--ink-900)}
.order-steps{list-style:none;counter-reset:order-step;padding:0;margin:0}
.order-steps > li{counter-increment:order-step;display:grid;grid-template-columns:32px minmax(0,1fr);gap:.5rem 1rem;padding:1.2rem 0;border-top:1px solid var(--foil-200)}
.order-steps > li::before{content:counter(order-step);grid-row:1 / span 3;font-family:var(--font-head);font-weight:600;font-size:1.75rem;line-height:1.1;color:var(--copper-600)}
.order-steps h3{font-size:1.5rem;margin:0}
.order-steps p{margin:0;color:var(--ink-500)}
.order-steps > li > div{min-width:0}
.order-steps > li > div h3{margin-bottom:.5rem}
.catalog-location{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem 5rem;align-items:start}
.catalog-location p,.catalog-location address{max-width:55ch}
.catalog-location .area-cloud{justify-content:flex-start;margin-top:1rem}
.catalog-location .map-box{aspect-ratio:4/3}
.home-reading .why-grid,.article-index .why-grid{display:block;border-top:1px solid var(--foil-200)}
.home-reading .why-card,.article-index .why-card{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr) auto;align-items:start;gap:.75rem 2rem;padding:1.5rem 0;border-top:0;border-bottom:1px solid var(--foil-200)}
.home-reading .why-card h3,.article-index .why-card h3{font-size:1.5rem}
.home-reading .why-card p,.article-index .why-card p{font-size:1rem;max-width:55ch}
.home-reading .why-card .text-link,.article-index .why-card .text-link{align-self:start;white-space:nowrap}
.catalog-contact{border-top:1px solid var(--foil-200);padding-block:2.5rem;background:var(--copper-50)}
.catalog-contact > .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.catalog-contact h2{margin:0 0 .65rem}
.catalog-contact p{margin:0;max-width:60ch}
.catalog-contact .hero-cta{margin:0;flex-shrink:0}
.article-page .prose,.legal-page .prose{font-size:1.0625rem;line-height:1.75}
.article-page .prose h2,.legal-page .prose h2{font-size:2rem}
.article-page .prose h3,.legal-page .prose h3{font-size:1.5rem}
.article-page .prose > p,.legal-page .prose > p{max-width:70ch}
.about-page .hero-art .material-sheet{max-width:500px;margin-inline:auto}
.catalog-page .hero-grid h1{max-width:16ch}
.order-page .page-hero,.status-page .page-hero{padding-block:2rem}
.order-page .page-hero h1,.status-page .page-hero h1{font-size:clamp(2.25rem,4vw,3rem)}
.order-page .page-hero .lede,.status-page .page-hero .lede{margin-top:.7rem;font-size:1rem}
.order-page .pesan-form,.order-page .cart-summary,.order-page .custom-foil{border-radius:6px}
.order-page .pesan-form h2,.order-page .produk-blok h3,.order-page .custom-foil h3{font-size:1.75rem}
@media(max-width:899px){
  .catalog-hero-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .catalog-intro h1{max-width:16ch;font-size:clamp(2.75rem,7.5vw,4rem)}
  .catalog-intro .lede{max-width:55ch}
  .catalog-hero .material-sheet{max-width:580px}
  .catalog-heading{align-items:flex-start;flex-direction:column;gap:1rem}
  .catalog-service,.catalog-location{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .catalog-location .map-box{aspect-ratio:16/9}
  .home-reading .why-card,.article-index .why-card{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .catalog-contact > .container{align-items:flex-start;flex-direction:column}
}
@media(max-width:639px){
  .catalog-hero{padding-block:2.25rem}
  .catalog-intro h1{font-size:2.75rem;max-width:14ch}
  .catalog-intro .hero-cta .btn{flex:1 1 auto}
  .catalog-spec{gap:.75rem 1.5rem}
  .material-sheet-meta{font-size:.85rem}
  .catalog-prices th,.catalog-prices td{padding:.8rem .85rem;font-size:1rem}
  .catalog-contact .hero-cta{width:100%}
  .catalog-contact .hero-cta .btn{flex:1 1 auto}
  .usp-grid{grid-template-columns:minmax(0,1fr)}
}

/* Spesifikasi bersama diletakkan di caption agar baris ukuran tetap ringkas. */
.catalog-meta{caption-side:top;text-align:left;padding:1rem;font-family:var(--font-body);font-size:.95rem;color:var(--ink-500);background:var(--foil-100);border-bottom:1px solid var(--foil-200)}
.tbl-compact .td-qty{min-width:7rem}
.tbl-compact td.table-num{font-weight:600;color:var(--ink-900)}
@media(min-width:640px){.tbl-compact th,.tbl-compact td{padding:.85rem .8rem}.tbl-compact .td-add .btn{min-width:5.5rem}}

/* Kode nomor HP menjadi bagian dari formulir pesanan, tanpa mengubah panel livechat. */
.capacity-guide{padding:1rem;margin:1.25rem 0;border:1px solid var(--foil-200);background:var(--foil-100);border-radius:6px}
.capacity-guide summary{cursor:pointer;font-weight:600;color:var(--ink-900)}
.guide-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.guide-fields .field{margin-bottom:0}
.guide-results{list-style:none;padding:0;margin:0}
.guide-results li{padding:1rem 0;border-top:1px solid var(--foil-200)}
.guide-results p{margin:.35rem 0 .7rem}
.cart-tier{margin:.5rem 0 .75rem;padding:.65rem;background:var(--foil-100);color:var(--ink-900)}
.cart-tier .btn{margin-top:.4rem}
@media(max-width:639px){.guide-fields{grid-template-columns:minmax(0,1fr)}}
#form-pesan .phone-verification{margin:0 0 1.5rem;padding:1rem;border-left:3px solid var(--copper-600);background:var(--foil-100)}
#form-pesan .phone-verification .hint{margin-top:0;margin-bottom:.75rem}
#form-pesan .phone-code-entry{display:flex;align-items:flex-end;gap:.75rem;margin-top:1rem}
#form-pesan .phone-code-entry .field{flex:1;min-width:0;margin-bottom:0}
#form-pesan .phone-code-entry input{max-width:14rem;font-variant-numeric:tabular-nums;letter-spacing:.12em}
#form-pesan .phone-code-entry .btn{flex:none}
#form-pesan .phone-status{margin:.75rem 0 0}
#form-pesan .phone-status.is-verified{color:var(--copper-700);font-weight:600}
@media(max-width:639px){#form-pesan .phone-code-entry{align-items:stretch;flex-direction:column}#form-pesan .phone-code-entry input{max-width:none}#form-pesan .phone-verification>.btn{width:100%}}