/*
Theme Name: Warung Meubel
Theme URI: https://example.com
Author: Warung Digital
Description: Tema company profile meubel bergaya aplikasi modern: katalog interaktif, daftar pesanan via WhatsApp, kalkulator estimasi, dan animasi.
Version: 2.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: warung-meubel
*/

:root{
  --cream:#F6EFE3; --cream-2:#EDE2CF; --sand:#E2D3B9; --card:#FBF7EF;
  --espresso:#2B1D14; --espresso-2:#3E2B1E; --amber:#9C6012; --amber-2:#D99A4A;
  --muted:#6F6155; --line:rgba(43,29,20,.14);
  --head:'Bricolage Grotesque','Segoe UI',Arial,sans-serif;
  --body:'Figtree','Segoe UI',Arial,sans-serif;
  --wrap:1180px; --r:20px; --shadow:0 14px 34px -10px rgba(43,29,20,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html.lock{overflow:hidden}
body{margin:0;color:var(--espresso);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 520px at 88% -8%,rgba(217,154,74,.20),transparent 62%),var(--cream)}
img,svg{max-width:100%;display:block}
a{color:var(--amber)}
a:hover{color:var(--espresso)}
:focus-visible{outline:3px solid var(--amber-2);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);color:var(--espresso);line-height:1.1;letter-spacing:-.025em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.5rem,5.6vw,4.7rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.sr,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--espresso);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}
.ic{width:1.25em;height:1.25em;flex:none}
.is-hidden{display:none!important}

/* Progres scroll */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:var(--amber-2);z-index:150}

/* Tombol */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.45rem;border-radius:999px;font:600 1rem var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn .ic{transition:transform .25s}
.btn:hover .ic{transform:translateX(4px)}
.btn-dark,.btn-primary{background:var(--espresso);color:var(--cream)}
.btn-dark:hover,.btn-primary:hover{background:var(--espresso-2);color:#fff}
.btn-amber,.btn-wa{background:var(--amber);color:#fff}
.btn-amber:hover,.btn-wa:hover{background:#7f4d0d;color:#fff}
.btn-ghost,.btn-line{border-color:var(--espresso);color:var(--espresso);background:transparent}
.btn-ghost:hover,.btn-line:hover{background:var(--espresso);color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn-row.sm{margin-top:.75rem}
.btn-row.sm .btn{padding:.6rem 1.1rem;font-size:.95rem}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:.4rem 0}
.iconbtn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(251,247,239,.94);color:var(--espresso);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform .2s var(--ease),background .2s,color .2s}
.iconbtn:hover{transform:scale(1.12)}
.iconbtn.on,.iconbtn[aria-pressed="true"]{background:var(--espresso);color:var(--cream)}
.iconbtn.on .ic,.iconbtn[aria-pressed="true"] .ic,.btn[aria-pressed="true"] .ic{fill:currentColor}
.btn[aria-pressed="true"]{background:var(--espresso);color:var(--cream)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;padding:.7rem 0}
body.admin-bar .site-header{top:32px}
.header-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .55rem .5rem 1rem;border-radius:999px;background:rgba(251,247,239,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);transition:box-shadow .3s}
.site-header.scrolled .header-in{box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:.6rem;font:700 1.3rem var(--head);color:var(--espresso);text-decoration:none;letter-spacing:-.02em}
.brand .mark{width:36px;height:36px;transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand img{max-height:40px;width:auto}
.nav{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav a{display:block;color:var(--espresso);text-decoration:none;font-weight:500;padding:.5rem .95rem;border-radius:999px;transition:background .2s}
.nav a:hover,.nav .current-menu-item>a{background:var(--cream-2)}
.header-cta{display:flex;align-items:center;gap:.5rem}
.cart-btn{position:relative;display:flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border:0;border-radius:999px;background:var(--espresso);color:var(--cream);font:600 .95rem var(--body);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.cart-btn:hover{background:var(--espresso-2);transform:translateY(-2px)}
.badge{min-width:20px;height:20px;border-radius:10px;background:var(--amber-2);color:var(--espresso);font:700 .75rem/20px var(--body);text-align:center;padding:0 5px}
.cart-btn .badge{margin-left:.1rem}
.badge.bump{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
.nav-toggle{display:none;background:none;border:1.5px solid var(--espresso);border-radius:999px;padding:.55rem 1rem;font:600 .95rem var(--body);color:var(--espresso);cursor:pointer}

/* Hero */
.hero{padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.status{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.92rem;font-weight:500;margin-bottom:1.25rem}
.status i{width:9px;height:9px;border-radius:50%;background:var(--amber-2);box-shadow:0 0 0 0 rgba(217,154,74,.7);animation:pulse 2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(217,154,74,0)}}
.hero-rot{font:600 clamp(1.3rem,2.6vw,1.9rem) var(--head);margin:.2rem 0 1rem;color:var(--muted)}
.hero-rot b{display:inline-block;color:var(--amber);transition:opacity .26s,transform .26s var(--ease)}
.hero-rot b.out{opacity:0;transform:translateY(10px)}
.lead{font-size:1.15rem;color:var(--muted)}
.stage-wrap{max-width:540px;width:100%;justify-self:end}
.stage{position:relative;aspect-ratio:1/1;border-radius:38px;overflow:hidden;background:var(--sand);box-shadow:0 34px 60px -24px rgba(43,29,20,.42);isolation:isolate}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.07);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.slide.on{opacity:1;transform:none}
.slide svg{width:100%;height:100%;transform:translate(calc(var(--px,0)*18px),calc(var(--py,0)*12px));transition:transform .3s ease-out}
.fchip{position:absolute;z-index:3;background:rgba(251,247,239,.92);backdrop-filter:blur(8px);border-radius:16px;padding:.55rem .95rem;box-shadow:var(--shadow);font-size:.82rem;color:var(--muted);line-height:1.3;animation:float 5s ease-in-out infinite alternate;transform:translate(calc(var(--px,0)*-10px),calc(var(--py,0)*-8px))}
.fchip b{display:block;font:700 1rem var(--head);color:var(--espresso)}
.fchip.a{left:1rem;top:1rem}
.fchip.b{right:1rem;bottom:1rem;animation-delay:-2.2s}
@keyframes float{to{margin-top:-8px}}
.stage-tabs{display:flex;gap:.45rem;margin-top:1rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:none}
.stage-tabs::-webkit-scrollbar{display:none}
.stage-tabs button{flex:none;padding:.45rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:500 .92rem var(--body);color:var(--espresso);cursor:pointer;transition:all .25s var(--ease)}
.stage-tabs button:hover{border-color:var(--espresso)}
.stage-tabs button.on{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}

/* Marquee */
.marquee{overflow:hidden;background:var(--espresso);color:var(--cream);padding:1.05rem 0}
.marquee-track{display:flex;width:max-content;animation:scroll 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-group{display:flex}
.mq-group span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font:600 1.15rem var(--head);white-space:nowrap}
.mq-group span::after{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--amber-2)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Section */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:var(--cream-2)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.sec-head h2{margin:0}
.sec-head p{margin:.5rem 0 0;color:var(--muted)}
.empty-note{padding:1.5rem;border:2px dashed var(--line);border-radius:var(--r);color:var(--muted)}

/* Reveal (aktif hanya jika JS jalan) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* Kategori */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.tile{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;text-decoration:none;background:var(--sand);isolation:isolate}
.tile .media,.tile .media img,.tile .media svg{width:100%;height:100%}
.tile .media img{object-fit:cover}
.tile .media{transition:transform .8s var(--ease)}
.tile:hover .media{transform:scale(1.1) rotate(1deg)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(43,29,20,.78));z-index:1}
.tile-label{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;color:#fff;display:grid}
.tile-label strong{font:700 1.35rem var(--head)}
.tile-label span{font-size:.9rem;opacity:.85}
.tile-label i{position:absolute;right:0;bottom:0;width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--espresso);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.tile:hover .tile-label i{transform:rotate(-45deg);background:var(--amber-2)}

/* Katalog interaktif */
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.searchbox{flex:1 1 260px;display:flex;align-items:center;gap:.6rem;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:0 1.1rem;transition:border-color .2s,box-shadow .2s}
.searchbox:focus-within{border-color:var(--espresso);box-shadow:0 0 0 4px rgba(217,154,74,.25)}
.searchbox input{flex:1;border:0;background:none;padding:.8rem 0;font:inherit;color:inherit;outline:none;min-width:0}
.sortbox select{height:100%;padding:.75rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:inherit;color:inherit;cursor:pointer}
.chips-row{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .5rem;scrollbar-width:none}
.chips-row::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border:1.5px solid var(--line);background:var(--card);border-radius:999px;font:500 .95rem var(--body);color:var(--espresso);cursor:pointer;transition:all .25s var(--ease)}
.chip small{font-size:.8rem;opacity:.65}
.chip:hover{border-color:var(--espresso);transform:translateY(-2px)}
.chip.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--cream)}
.result-note{margin:.5rem 0 1rem;color:var(--muted);font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.empty-state{padding:2.5rem 1.5rem;text-align:center;border:2px dashed var(--line);border-radius:var(--r)}
.empty-state p{margin-inline:auto;color:var(--muted)}
.empty-state[hidden]{display:none}

/* Kartu produk */
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card.pop{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(12px)}}
.card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream-2)}
.media{width:100%;height:100%;transition:transform .7s var(--ease)}
.media img,.media svg{width:100%;height:100%}
.media img{object-fit:cover}
.card:hover .media{transform:scale(1.08)}
.card-acts{position:absolute;top:.65rem;right:.65rem;display:flex;flex-direction:column;gap:.45rem;z-index:3}
.card .quick{opacity:0;transform:translateX(10px)}
.card:hover .quick,.card:focus-within .quick{opacity:1;transform:none}
@media (hover:none){.card .quick{opacity:1;transform:none}}
.card-body{display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem;padding:1rem 1.1rem 1.15rem;flex:1}
.card-cat{display:block;font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.card h3{margin:.1rem 0 .2rem;font-size:1.12rem}
.card h3 a{color:var(--espresso);text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-size{display:block;font-size:.85rem;color:var(--muted)}
.price{display:block;font:700 1.1rem var(--head);color:var(--amber);margin-top:.3rem}
.add{position:relative;z-index:3;flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--espresso);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease),background .2s}
.add:hover{background:var(--amber);transform:rotate(90deg) scale(1.08)}

/* Angka */
.stats{background:var(--espresso);color:var(--cream);border-radius:34px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat b{display:block;font:700 clamp(2.3rem,5vw,3.8rem) var(--head);color:var(--amber-2);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:.5rem;color:#d8c9b3}

/* Tentang */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feat{padding:1.4rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:background .35s var(--ease),color .35s,transform .35s var(--ease)}
.feat p{margin:0;color:var(--muted);font-size:.97rem;transition:color .35s}
.feat-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--cream-2);color:var(--amber);margin-bottom:1rem;transition:background .35s,color .35s}
.feat-ic .ic{width:24px;height:24px}
.feat:hover{background:var(--espresso);transform:translateY(-5px)}
.feat:hover h3{color:#fff}
.feat:hover p{color:#d8c9b3}
.feat:hover .feat-ic{background:var(--amber-2);color:var(--espresso)}

/* Proses */
.proc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.proc-head{position:sticky;top:110px}
.proc-head p{color:var(--muted)}
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 3.4rem;counter-reset:t}
.timeline::before,.timeline::after{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:1.8rem;width:3px;border-radius:3px}
.timeline::before{background:var(--sand)}
.timeline::after{background:var(--amber);transform-origin:top;transform:scaleY(var(--p,0))}
.timeline li{position:relative;counter-increment:t;padding-bottom:2.2rem}
.timeline li::before{content:counter(t);position:absolute;left:-3.4rem;top:0;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--cream-2);border:3px solid var(--sand);font:700 .95rem var(--head);z-index:1;transition:all .4s var(--ease)}
.timeline li.done::before{background:var(--amber);border-color:var(--amber);color:#fff;transform:scale(1.12)}
.timeline h3{margin-bottom:.25rem}
.timeline p{margin:0;color:var(--muted)}

/* Kalkulator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;border-radius:34px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.calc-form{padding:clamp(1.5rem,4vw,2.5rem)}
.calc-out{background:var(--espresso);color:var(--cream);padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.out-lbl{color:#d8c9b3;font-size:.95rem}
.out-price{font:700 clamp(1.8rem,3.6vw,2.6rem) var(--head);color:var(--amber-2);line-height:1.1;letter-spacing:-.02em}
.out-price.bump{animation:bump2 .35s var(--ease)}
@keyframes bump2{40%{transform:scale(1.04)}}
.out-note{color:#d8c9b3;margin:0 0 .5rem}
.calc-out small{color:#bfae97}
.calc-out .btn{justify-content:center}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label,.field .lbl{font-weight:600;font-size:.95rem}
.field output{color:var(--amber);font-weight:700}
.field input[type=text],.field input[type=search],.field select,.field textarea{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--espresso);box-shadow:0 0 0 4px rgba(217,154,74,.25)}
input[type=range]{width:100%;accent-color:var(--amber);height:28px}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer;font-weight:500}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:.5rem 1.1rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;transition:all .25s var(--ease)}
.seg input:checked+span{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.seg input:focus-visible+span{outline:3px solid var(--amber-2);outline-offset:2px}

/* Testimoni */
.tslider{display:grid;max-width:860px}
.tslide{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.tslide.on{opacity:1;transform:none;pointer-events:auto}
.tslide blockquote{margin:0}
.tslide blockquote p{font:500 clamp(1.4rem,3vw,2.2rem)/1.3 var(--head);letter-spacing:-.02em;max-width:none;margin:0}
.who{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;font:700 1.15rem var(--head)}
.dots{display:flex;gap:.5rem;margin-top:1.6rem}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:var(--sand);cursor:pointer;transition:width .35s var(--ease),background .3s}
.dots button.on{width:34px;background:var(--amber)}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq details{border-bottom:1px solid var(--line);padding:1.15rem 0}
.faq summary{display:flex;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;font:600 1.15rem var(--head);transition:color .2s}
.faq summary:hover{color:var(--amber)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.7rem;line-height:1;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.75rem 0 0;color:var(--muted);animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}

/* Kontak */
.contact{background:var(--espresso);color:var(--cream);border-radius:44px 44px 0 0}
.contact h2,.contact h3{color:#fff}
.contact a{color:var(--amber-2)}
.contact-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact dl{margin:1.5rem 0;display:grid;grid-template-columns:6.5rem 1fr;gap:.9rem 1rem}
.contact dt{color:var(--amber-2);font-weight:600}
.contact dd{margin:0}
.map{border-radius:22px;overflow:hidden;background:var(--espresso-2);min-height:260px}
.map iframe{width:100%;height:100%;min-height:260px;border:0;display:block}
.map-empty{display:grid;place-items:center;min-height:260px;padding:1.5rem;text-align:center;color:#d8c9b3}
.cform{background:var(--cream);color:var(--espresso);border-radius:28px;padding:clamp(1.5rem,4vw,2.25rem)}
.cform h3{color:var(--espresso);margin-bottom:1.25rem;font-size:1.5rem}
.cform .btn{width:100%;justify-content:center}

/* Footer */
.site-footer{background:var(--espresso);color:#cdbfae;padding:2rem 0 1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.footer-in{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;align-items:center}
.foot-brand{display:grid}
.foot-brand strong{color:#fff;font:700 1.2rem var(--head)}
.foot-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-footer a{color:#e7d3ab;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;display:flex;align-items:center;gap:.5rem;background:var(--amber);color:#fff;text-decoration:none;font-weight:600;padding:.8rem 1.25rem;border-radius:999px;box-shadow:0 10px 26px rgba(43,29,20,.3);transition:transform .25s var(--ease),background .2s}
.wa-float:hover{background:#7f4d0d;color:#fff;transform:translateY(-4px)}

/* Tab bawah (HP) */
.tabbar{display:none;position:fixed;left:.7rem;right:.7rem;bottom:.7rem;z-index:110;background:rgba(43,29,20,.95);backdrop-filter:blur(12px);border-radius:26px;padding:.35rem;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.tabbar a,.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem .25rem;color:#e9dcc6;background:none;border:0;font:500 .72rem var(--body);text-decoration:none;cursor:pointer;border-radius:20px;transition:background .25s,color .25s}
.tabbar .ic{width:22px;height:22px}
.tabbar .on{background:rgba(255,255,255,.12);color:#fff}
.tabbar .badge{position:absolute;top:1px;left:calc(50% + 6px)}

/* Panel: drawer & modal */
.overlay{position:fixed;inset:0;background:rgba(43,29,20,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:300}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--cream);z-index:310;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:1.4rem}
.drawer-body{flex:1;overflow:auto;padding:1rem 1.25rem}
.cart-empty{color:var(--muted);padding:2rem 0;text-align:center}
.cart-item{display:flex;align-items:center;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line);animation:fade .35s var(--ease)}
.ci-info{flex:1;display:grid;min-width:0}
.ci-info a{font-weight:600;color:var(--espresso);text-decoration:none}
.ci-info small{color:var(--muted)}
.ci-info b{color:var(--amber);font-family:var(--head)}
.qty{display:flex;align-items:center;gap:.4rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.15rem}
.qty button{width:30px;height:30px;border:0;border-radius:50%;background:var(--cream-2);font:700 1.1rem var(--body);cursor:pointer;color:var(--espresso)}
.qty button:hover{background:var(--espresso);color:var(--cream)}
.qty span{min-width:1.4rem;text-align:center;font-weight:600}
.ci-del{border:0;background:none;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.ci-del:hover{color:var(--espresso)}
.drawer-foot{padding:1.1rem 1.25rem 1.4rem;border-top:1px solid var(--line);display:grid;gap:.7rem;background:var(--card)}
.drawer-foot input{padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:14px;font:inherit;background:#fff}
.drawer-foot .btn{justify-content:center}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total b{font:700 1.4rem var(--head)}
.modal{position:fixed;left:50%;top:50%;z-index:310;width:min(860px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);overflow:auto;background:var(--cream);border-radius:30px;display:grid;grid-template-columns:1fr 1fr;transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .3s,visibility 0s .4s}
.modal.open{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .4s var(--ease),opacity .3s,visibility 0s}
.modal-x{position:absolute;top:.8rem;right:.8rem;z-index:3}
.q-media{background:var(--cream-2);min-height:280px}
.q-media .media,.q-media img,.q-media svg{width:100%;height:100%;object-fit:cover}
.q-body{padding:clamp(1.25rem,3vw,2rem)}
.q-body h3{font-size:1.7rem;margin:.2rem 0}
.q-body .price{font-size:1.4rem;margin-bottom:.75rem}
.q-body p{color:var(--muted)}
.q-spec{display:grid;grid-template-columns:6rem 1fr;gap:.35rem 1rem;margin:0}
.q-spec dt{color:var(--muted)}
.q-spec dd{margin:0;font-weight:500}
.toast{position:fixed;left:50%;bottom:6.5rem;z-index:400;transform:translate(-50%,20px);background:var(--espresso);color:var(--cream);padding:.75rem 1.3rem;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .35s var(--ease);font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Halaman dalam */
.page-head{padding:clamp(2rem,5vw,3.5rem) 0 1rem}
.page-head p{color:var(--muted);margin:0}
.content{padding:1.5rem 0 4rem}
.entry{max-width:760px}
.entry img{border-radius:14px}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.pagination .page-numbers{padding:.45rem .95rem;border:1.5px solid var(--espresso);border-radius:999px;text-decoration:none;color:var(--espresso)}
.pagination .current{background:var(--espresso);color:var(--cream)}

/* Detail produk */
.crumbs{padding:1rem 0 0;font-size:.92rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);padding:1.5rem 0 3.5rem;align-items:start}
.detail-img{aspect-ratio:1/1;border-radius:32px;overflow:hidden;background:var(--cream-2);position:sticky;top:96px}
.detail-img .media{height:100%}
.detail-img:hover .media{transform:scale(1.05)}
.detail-info h1{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0 .3rem}
.price.big{font-size:1.8rem;margin:.2rem 0 1rem}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:0 0 1.25rem;padding:0}
.tags li{padding:.3rem .8rem;border-radius:999px;background:var(--cream-2);font-size:.9rem;font-weight:500}
.spec{width:100%;border-collapse:collapse;margin:0 0 1.25rem}
.spec th,.spec td{text-align:left;padding:.75rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:8rem;color:var(--muted);font-weight:500}
.related{padding:0 0 5rem}
.related h2{margin-bottom:1.5rem}

/* Responsif */
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .calc{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hero-in,.about,.proc,.faq-wrap,.contact-in,.detail{grid-template-columns:1fr}
  .stage-wrap{justify-self:center}
  .proc-head,.detail-img{position:static}
  .nav-toggle{display:block}
  .cart-label{display:none}
  .site-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + .5rem);background:var(--card);border:1px solid var(--line);border-radius:24px;padding:.6rem;box-shadow:var(--shadow)}
  .site-nav.is-open{display:block;animation:fade .3s var(--ease)}
  .nav{flex-direction:column}
  .tabbar{display:flex}
  .wa-float{display:none}
  .cart-btn{display:none}
  body{padding-bottom:5.5rem}
  .toast{bottom:6.8rem}
  .modal{grid-template-columns:1fr}
  .q-media{min-height:0;aspect-ratio:16/10}
  .contact{border-radius:30px 30px 0 0}
}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .card-body{padding:.75rem;flex-direction:column;align-items:flex-start}
  .card h3{font-size:1rem}
  .add{width:38px;height:38px;align-self:flex-end;margin-top:-2.4rem}
  .feat-grid{grid-template-columns:1fr}
  .cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .tile{flex:0 0 62%;scroll-snap-align:start}
  .contact dl{grid-template-columns:1fr;gap:.15rem}
  .contact dd{margin-bottom:.8rem}
  .stats{border-radius:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}