/* ============================================================
   BAKOELGITAR — Tone: Tobacco Sunburst
   #14100C edge burst | #4A2E1B mahogany | #E09A3C amber lacquer
   #F5EDDC cream binding | #B08D57 brass hardware
   ============================================================ */
:root{
  --burst-dark:#14100C;
  --burst-mid:#2A1B10;
  --mahogany:#4A2E1B;
  --amber:#E09A3C;
  --amber-deep:#C77F26;
  --binding:#F5EDDC;
  --brass:#B08D57;
  --muted:#C9B79A;
  --danger:#D84C3E;
  --success:#7FB069;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',sans-serif;background:var(--burst-dark);color:var(--binding);line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Fraunces',serif}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.container-narrow{width:100%;max-width:840px;margin:0 auto;padding:0 20px}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--amber);color:var(--burst-dark);font-size:.78rem;font-weight:600;text-align:center;padding:7px 12px;letter-spacing:.03em}

/* ---------- NAVBAR ---------- */
header.site-header{position:sticky;top:0;z-index:100;background:rgba(20,16,12,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,237,220,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 35%, var(--amber) 0%, var(--mahogany) 62%, var(--burst-dark) 100%);border:2px solid var(--binding);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;color:var(--binding);font-size:1.05rem}
.logo-text{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700}
.logo-text span{color:var(--amber)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--muted);transition:color .2s;position:relative;padding:4px 0}
.nav-links a:hover,.nav-links a.active{color:var(--binding)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--amber);border-radius:2px}
.nav-icons{display:flex;gap:8px;align-items:center}
.icon-btn{position:relative;width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid rgba(245,237,220,.18);color:var(--binding);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.icon-btn:hover{background:var(--mahogany);border-color:var(--brass)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:-5px;right:-5px;background:var(--amber);color:var(--burst-dark);font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hamburger{display:none}
.drawer{display:none;flex-direction:column;gap:4px;padding:12px 20px 20px;background:var(--burst-mid);border-top:1px solid rgba(245,237,220,.1)}
.drawer a{padding:11px 12px;border-radius:10px;font-weight:500;color:var(--muted)}
.drawer a:hover,.drawer a.active{background:var(--mahogany);color:var(--binding)}
.drawer .socmed-row{display:flex;gap:10px;padding:12px;flex-wrap:wrap}
.drawer.open{display:flex}

/* ---------- BANNER SLIDER (homepage) ---------- */
.banner{padding:26px 0 8px}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);border:2px solid rgba(245,237,220,.25)}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;min-height:340px;display:flex;flex-direction:column;justify-content:center;padding:48px 56px;position:relative;overflow:hidden}
.slide::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 160% at 78% 45%, var(--amber) 0%, var(--amber-deep) 24%, var(--mahogany) 55%, var(--burst-dark) 100%);z-index:0}
.slide.s2::before{background:radial-gradient(ellipse 120% 160% at 22% 45%, #D8B25A 0%, #8A5A2B 34%, var(--burst-mid) 72%, var(--burst-dark) 100%)}
.slide.s3::before{background:radial-gradient(ellipse 130% 160% at 50% 110%, var(--amber-deep) 0%, var(--mahogany) 45%, var(--burst-dark) 100%)}
.slide::after{content:"";position:absolute;inset:0;z-index:0;opacity:.16;background:repeating-linear-gradient(180deg, transparent 0 44px, var(--binding) 44px 45px)}
.slide > *{position:relative;z-index:1}
.slide .eyebrow,.eyebrow{display:inline-block;width:fit-content;background:rgba(20,16,12,.55);border:1px solid rgba(245,237,220,.35);color:var(--binding);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.slide h2{font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:700;line-height:1.12;max-width:560px;color:#FFF8EC;text-shadow:0 2px 18px rgba(20,16,12,.45)}
.slide p{margin:12px 0 22px;max-width:460px;color:rgba(255,248,236,.88);font-size:.98rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;background:var(--burst-dark);color:var(--binding);font-weight:600;font-size:.92rem;padding:12px 24px;border-radius:999px;border:1px solid rgba(245,237,220,.3);cursor:pointer;transition:.2s}
.btn:hover{background:var(--binding);color:var(--burst-dark)}
.btn.amber{background:var(--amber);color:var(--burst-dark);border-color:transparent}
.btn.amber:hover{background:#F0B25C}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.sm{padding:8px 16px;font-size:.82rem}
.btn.danger{background:var(--danger);color:#FFF3EC;border-color:transparent}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(245,237,220,.4);border:0;cursor:pointer;transition:.25s}
.dot.active{background:var(--binding);width:26px;border-radius:6px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(20,16,12,.55);border:1px solid rgba(245,237,220,.3);color:var(--binding);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:.2s}
.slider-arrow:hover{background:var(--amber);color:var(--burst-dark)}
.arrow-prev{left:14px}.arrow-next{right:14px}

/* ---------- SECTION ---------- */
.section{padding:52px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600}
.section-head .sub{color:var(--muted);font-size:.9rem;margin-top:4px}
.link-more{color:var(--amber);font-weight:600;font-size:.9rem;white-space:nowrap}
.link-more:hover{text-decoration:underline}

/* ---------- CHIPS ---------- */
.chips{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:9px 20px;border-radius:999px;font-size:.88rem;font-weight:500;background:var(--burst-mid);border:1px solid rgba(245,237,220,.15);color:var(--muted);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--brass);color:var(--binding)}
.chip.active{background:var(--amber);color:var(--burst-dark);border-color:transparent;font-weight:600}

/* ---------- PRODUK GRID ---------- */
.grid-produk{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.card{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);overflow:hidden;transition:.25s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--brass);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.card-img{aspect-ratio:1/1.05;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-img svg{width:60%;height:80%}
.g1 .card-img{background:radial-gradient(circle at 50% 42%, #E09A3C 0%, #7A4A22 58%, #241710 100%)}
.g2 .card-img{background:radial-gradient(circle at 50% 42%, #D8B25A 0%, #6B4423 58%, #1D130C 100%)}
.g3 .card-img{background:radial-gradient(circle at 50% 42%, #C0623A 0%, #5A2E1A 58%, #1A100A 100%)}
.g4 .card-img{background:radial-gradient(circle at 50% 42%, #B8B8B8 0%, #4E4E52 58%, #17140F 100%)}
.g5 .card-img{background:radial-gradient(circle at 50% 42%, #7FB069 0%, #3C5233 58%, #141B10 100%)}
.g6 .card-img{background:radial-gradient(circle at 50% 42%, #6A9FC0 0%, #2E4A5E 58%, #0E141A 100%)}
.g7 .card-img{background:radial-gradient(circle at 50% 42%, #E0DAD0 0%, #6E675C 58%, #171410 100%)}
.g8 .card-img{background:radial-gradient(circle at 50% 42%, #C05050 0%, #5E2424 58%, #1A0E0E 100%)}
.tag{position:absolute;top:12px;left:12px;z-index:2;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--amber);color:var(--burst-dark)}
.tag.sale{background:var(--danger);color:#FFF3EC}
.wish-btn{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(20,16,12,.55);border:1px solid rgba(245,237,220,.25);color:var(--binding);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.wish-btn:hover,.wish-btn.on{background:var(--danger);border-color:transparent}
.wish-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.wish-btn.on svg{fill:#fff;stroke:#fff}
.card-body{padding:14px 16px 16px}
.card-cat{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.card-title{font-size:.98rem;font-weight:600;margin:4px 0 6px;color:var(--binding)}
.rating{font-size:.78rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.rating .stars{color:var(--amber);letter-spacing:1px}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.price{font-weight:700;font-size:1.02rem;color:var(--amber)}
.price s{display:block;font-size:.72rem;color:var(--muted);font-weight:400}
.cart-add{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:var(--mahogany);border:1px solid rgba(245,237,220,.18);color:var(--binding);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.cart-add:hover{background:var(--amber);color:var(--burst-dark);border-color:transparent}
.cart-add svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px}
.gal-item{border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;border:1px solid rgba(245,237,220,.12);display:flex;align-items:flex-end;transition:.25s}
.gal-item:hover{border-color:var(--brass);transform:scale(1.015)}
.gal-item span{position:relative;z-index:1;padding:12px 16px;font-size:.82rem;font-weight:600;color:var(--binding);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gal-item::before{content:"";position:absolute;inset:0}
.gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(20,16,12,.75) 100%)}
.ga{grid-row:span 2}
.gA::before{background:radial-gradient(circle at 60% 30%, #E09A3C, #4A2E1B 70%)}
.gB::before{background:radial-gradient(circle at 30% 60%, #D8B25A, #2A1B10 75%)}
.gC::before{background:radial-gradient(circle at 55% 50%, #C0623A, #1A100A 72%)}
.gD::before{background:radial-gradient(circle at 45% 35%, #B08D57, #17120C 74%)}
.gE::before{background:radial-gradient(circle at 65% 55%, #8A5A2B, #14100C 76%)}
.gF::before{background:radial-gradient(circle at 40% 45%, #E0B160, #3B2413 72%)}

/* ---------- STRIP ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.strip-item{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start}
.strip-item .ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:radial-gradient(circle at 35% 30%, var(--amber), var(--mahogany));display:flex;align-items:center;justify-content:center}
.strip-item .ic svg{width:20px;height:20px;stroke:var(--burst-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.strip-item h3{font-family:'Instrument Sans',sans-serif;font-size:.92rem;font-weight:700}
.strip-item p{font-size:.8rem;color:var(--muted);margin-top:2px}

/* ---------- FOOTER ---------- */
footer.site-footer{margin-top:40px;background:linear-gradient(180deg, var(--burst-mid) 0%, #0D0A07 100%);border-top:2px solid var(--brass)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:52px 0 36px}
.footer-brand p{color:var(--muted);font-size:.88rem;margin:14px 0 18px;max-width:300px}
.socmed{display:flex;gap:10px}
.soc{width:38px;height:38px;border-radius:10px;background:var(--mahogany);border:1px solid rgba(245,237,220,.15);display:flex;align-items:center;justify-content:center;color:var(--binding);transition:.2s}
.soc:hover{background:var(--amber);color:var(--burst-dark)}
.soc svg{width:17px;height:17px;fill:currentColor}
.footer-col h3{font-family:'Instrument Sans',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--muted);font-size:.9rem;transition:.2s}
.footer-col a:hover{color:var(--amber)}
.footer-bottom{border-top:1px solid rgba(245,237,220,.1);padding:20px;text-align:center;font-size:.8rem;color:var(--muted)}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */

/* Page hero */
.page-hero{position:relative;overflow:hidden;padding:54px 0 46px;border-bottom:1px solid rgba(245,237,220,.12);background:radial-gradient(ellipse 130% 180% at 50% -40%, var(--mahogany) 0%, var(--burst-mid) 45%, var(--burst-dark) 100%)}
.page-hero::after{content:"";position:absolute;inset:0;opacity:.1;background:repeating-linear-gradient(180deg, transparent 0 44px, var(--binding) 44px 45px)}
.page-hero .container-narrow,.page-hero .container{position:relative;z-index:1}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:12px}
.breadcrumb a{color:var(--brass)}
.breadcrumb a:hover{color:var(--amber)}
.page-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;line-height:1.15}
.page-hero .lead{color:var(--muted);margin-top:10px;max-width:620px;font-size:.98rem}

/* Article / content pages */
.article{padding:48px 0}
.article h2{font-size:1.3rem;font-weight:600;margin:34px 0 12px;color:var(--binding)}
.article h2:first-child{margin-top:0}
.article p{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.article ul,.article ol{color:var(--muted);font-size:.95rem;padding-left:22px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.article strong{color:var(--binding)}
.step-list{list-style:none;padding:0;counter-reset:step}
.step-list li{counter-increment:step;position:relative;padding:16px 18px 16px 62px;background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);margin-bottom:12px}
.step-list li::before{content:counter(step);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--amber), var(--mahogany));color:var(--burst-dark);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.callout{background:var(--burst-mid);border:1px solid var(--brass);border-left:4px solid var(--amber);border-radius:10px;padding:16px 18px;margin:18px 0;font-size:.9rem;color:var(--muted)}
.callout strong{color:var(--amber)}

/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px;color:var(--binding)}
.form-input,.form-select,.form-textarea{width:100%;background:var(--burst-dark);border:1px solid rgba(245,237,220,.2);border-radius:10px;padding:12px 14px;color:var(--binding);font-family:inherit;font-size:.92rem;transition:.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,154,60,.15)}
.form-textarea{min-height:110px;resize:vertical}
.form-hint{font-size:.76rem;color:var(--muted);margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Auth card */
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:56px 20px}
.auth-card{width:100%;max-width:430px;background:var(--burst-mid);border:1px solid rgba(245,237,220,.15);border-radius:18px;padding:34px 30px;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--mahogany),var(--amber),var(--mahogany))}
.auth-card h1{font-size:1.5rem;font-weight:600;margin-bottom:6px}
.auth-card .auth-sub{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.auth-alt{text-align:center;font-size:.85rem;color:var(--muted);margin-top:18px}
.auth-alt a{color:var(--amber);font-weight:600}
.otp-row{display:flex;gap:10px;justify-content:center;margin:8px 0 4px}
.otp-input{width:52px;height:58px;text-align:center;font-size:1.4rem;font-weight:700;background:var(--burst-dark);border:1px solid rgba(245,237,220,.2);border-radius:12px;color:var(--binding)}
.otp-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,154,60,.15)}
.pw-meter{height:5px;border-radius:3px;background:rgba(245,237,220,.12);margin:8px 0 4px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;background:var(--danger);transition:.3s}

/* Account layout */
.account-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:44px 0}
.account-menu{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:14px;height:fit-content;position:sticky;top:90px}
.account-menu a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;font-size:.9rem;color:var(--muted);transition:.2s}
.account-menu a:hover{color:var(--binding);background:var(--mahogany)}
.account-menu a.active{background:var(--amber);color:var(--burst-dark);font-weight:600}
.panel{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:26px}
.panel + .panel{margin-top:18px}
.panel h2{font-size:1.15rem;font-weight:600;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(245,237,220,.1)}
.avatar{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 40% 35%, var(--amber), var(--mahogany));border:2px solid var(--binding);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--burst-dark)}

/* Address */
.addr-card{border:1px solid rgba(245,237,220,.15);border-radius:12px;padding:18px;margin-bottom:14px;position:relative}
.addr-card.main{border-color:var(--amber)}
.addr-card .addr-tag{position:absolute;top:14px;right:14px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px;background:var(--amber);color:var(--burst-dark)}
.addr-card h3{font-family:'Instrument Sans',sans-serif;font-size:.95rem;font-weight:700}
.addr-card p{font-size:.86rem;color:var(--muted);margin-top:4px}
.addr-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Cart */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;padding:44px 0}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:16px;background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);margin-bottom:12px;align-items:center}
.cart-thumb{width:88px;height:88px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-thumb svg{width:55%;height:80%}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(245,237,220,.2);border-radius:999px;overflow:hidden}
.qty button{width:32px;height:32px;background:transparent;border:0;color:var(--binding);cursor:pointer;font-size:1rem}
.qty button:hover{background:var(--mahogany)}
.qty span{min-width:36px;text-align:center;font-weight:600;font-size:.9rem}
.summary{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:22px;position:sticky;top:90px}
.summary h2{font-size:1.05rem;font-weight:600;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin-bottom:10px}
.sum-row.total{border-top:1px solid rgba(245,237,220,.12);padding-top:12px;margin-top:12px;color:var(--binding);font-weight:700;font-size:1.02rem}
.sum-row.total b{color:var(--amber)}

/* Order */
.tab-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:22px;scrollbar-width:none}
.tab-nav::-webkit-scrollbar{display:none}
.tab-nav a{flex-shrink:0;padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:500;background:var(--burst-mid);border:1px solid rgba(245,237,220,.15);color:var(--muted);transition:.2s}
.tab-nav a:hover{color:var(--binding);border-color:var(--brass)}
.tab-nav a.active{background:var(--amber);color:var(--burst-dark);border-color:transparent;font-weight:600}
.order-card{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.order-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(245,237,220,.1);font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.status{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:999px}
.status.unpaid{background:rgba(216,76,62,.18);color:#F09A90;border:1px solid rgba(216,76,62,.4)}
.status.packed{background:rgba(224,154,60,.16);color:var(--amber);border:1px solid rgba(224,154,60,.4)}
.status.shipped{background:rgba(106,159,192,.16);color:#9CC4DE;border:1px solid rgba(106,159,192,.4)}
.status.done{background:rgba(127,176,105,.16);color:#A7CE95;border:1px solid rgba(127,176,105,.4)}
.order-body{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:16px 18px;align-items:center}
.order-thumb{width:72px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.order-thumb svg{width:55%;height:80%}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid rgba(245,237,220,.1);flex-wrap:wrap}
.order-total{font-size:.86rem;color:var(--muted)}
.order-total b{color:var(--amber);font-size:1rem}
.countdown-pay{font-size:.8rem;color:#F09A90;font-weight:600}

/* Tracking timeline */
.timeline{list-style:none;padding-left:0;margin-top:8px}
.timeline li{position:relative;padding:0 0 26px 34px}
.timeline li::before{content:"";position:absolute;left:9px;top:6px;bottom:-6px;width:2px;background:rgba(245,237,220,.15)}
.timeline li:last-child::before{display:none}
.timeline li::after{content:"";position:absolute;left:3px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--burst-mid);border:2px solid var(--brass)}
.timeline li.done::after{background:var(--amber);border-color:var(--amber)}
.timeline .tl-title{font-weight:600;font-size:.92rem}
.timeline .tl-time{font-size:.76rem;color:var(--muted)}
.track-box{display:flex;gap:10px;max-width:560px}
.track-box .form-input{flex:1}

/* Review stars input */
.star-input{display:flex;gap:6px;font-size:1.7rem;color:rgba(245,237,220,.25);cursor:pointer}
.star-input span.on{color:var(--amber)}

/* Grid utilities */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* Blog */
.blog-card{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);overflow:hidden;transition:.25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--brass)}
.blog-thumb{height:170px;display:flex;align-items:flex-end;position:relative}
.blog-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,16,12,.7))}
.bt1{background:radial-gradient(circle at 60% 30%, #E09A3C, #4A2E1B 75%)}
.bt2{background:radial-gradient(circle at 30% 60%, #C0623A, #1A100A 78%)}
.bt3{background:radial-gradient(circle at 50% 40%, #D8B25A, #2A1B10 76%)}
.blog-body{padding:16px 18px 20px}
.blog-meta{font-size:.74rem;color:var(--brass);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.blog-body h3{font-size:1.02rem;font-weight:600;margin:6px 0 8px;line-height:1.35}
.blog-body p{font-size:.86rem;color:var(--muted)}

/* Video */
.video-card{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);overflow:hidden;transition:.25s}
.video-card:hover{border-color:var(--brass)}
.video-thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center}
.play-btn{width:54px;height:54px;border-radius:50%;background:rgba(20,16,12,.6);border:2px solid var(--binding);display:flex;align-items:center;justify-content:center;transition:.2s}
.video-card:hover .play-btn{background:var(--amber);border-color:var(--amber)}
.play-btn svg{width:20px;height:20px;fill:var(--binding);margin-left:3px}
.video-card:hover .play-btn svg{fill:var(--burst-dark)}
.video-body{padding:14px 16px}
.video-body h3{font-family:'Instrument Sans',sans-serif;font-size:.92rem;font-weight:600}
.video-body p{font-size:.78rem;color:var(--muted);margin-top:3px}

/* Testimoni */
.testi-card{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:22px}
.testi-card .stars{color:var(--amber);letter-spacing:2px;font-size:.9rem}
.testi-card p{font-size:.9rem;color:var(--muted);margin:12px 0 16px;font-style:italic}
.testi-who{display:flex;align-items:center;gap:12px}
.testi-ava{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 40% 35%, var(--brass), var(--mahogany));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--burst-dark)}
.testi-who h3{font-family:'Instrument Sans',sans-serif;font-size:.9rem;font-weight:700}
.testi-who span{font-size:.76rem;color:var(--muted)}

/* Certificate */
.cert-card{background:var(--burst-mid);border:1px solid var(--brass);border-radius:var(--radius);padding:26px;text-align:center;position:relative;overflow:hidden}
.cert-card::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(176,141,87,.5);border-radius:10px;pointer-events:none}
.cert-badge{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--amber), var(--mahogany));display:flex;align-items:center;justify-content:center}
.cert-badge svg{width:30px;height:30px;stroke:var(--burst-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cert-card h3{font-size:1.05rem;margin-bottom:6px}
.cert-card p{font-size:.84rem;color:var(--muted)}

/* FAQ accordion */
.faq-item{border:1px solid rgba(245,237,220,.12);border-radius:12px;margin-bottom:12px;overflow:hidden;background:var(--burst-mid)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;background:transparent;border:0;color:var(--binding);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;text-align:left}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--amber);transition:.25s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 20px 18px;font-size:.88rem;color:var(--muted)}

/* Voucher */
.voucher-card{display:grid;grid-template-columns:110px 1fr auto;background:var(--burst-mid);border:1px solid rgba(245,237,220,.15);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;align-items:center}
.voucher-left{align-self:stretch;background:radial-gradient(circle at 30% 30%, var(--amber), var(--amber-deep));color:var(--burst-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 10px;text-align:center;border-right:2px dashed var(--burst-dark)}
.voucher-left b{font-family:'Fraunces',serif;font-size:1.3rem;line-height:1.1}
.voucher-left span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.voucher-mid{padding:16px 18px}
.voucher-mid h3{font-family:'Instrument Sans',sans-serif;font-size:.95rem;font-weight:700}
.voucher-mid p{font-size:.8rem;color:var(--muted);margin-top:3px}
.voucher-mid code{font-size:.76rem;background:var(--burst-dark);border:1px dashed var(--brass);color:var(--amber);padding:3px 9px;border-radius:6px;margin-top:8px;display:inline-block}
.voucher-right{padding:16px 18px}

/* Flash sale */
.fs-header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.countdown{display:flex;gap:8px}
.cd-box{background:var(--burst-mid);border:1px solid var(--brass);border-radius:10px;min-width:56px;padding:8px 6px;text-align:center}
.cd-box b{display:block;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--amber)}
.cd-box span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fs-bar{height:6px;border-radius:3px;background:rgba(245,237,220,.12);overflow:hidden;margin-top:10px}
.fs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--amber))}
.fs-sold{font-size:.72rem;color:var(--muted);margin-top:5px}

/* Partner pages */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.benefit{background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:22px}
.benefit .ic{width:42px;height:42px;border-radius:11px;background:radial-gradient(circle at 35% 30%, var(--amber), var(--mahogany));display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.benefit .ic svg{width:20px;height:20px;stroke:var(--burst-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{font-family:'Instrument Sans',sans-serif;font-size:.98rem;font-weight:700;margin-bottom:6px}
.benefit p{font-size:.84rem;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:14px}
.ci-item{display:flex;gap:14px;background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:12px;padding:16px}
.ci-item .ic{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:radial-gradient(circle at 35% 30%, var(--amber), var(--mahogany));display:flex;align-items:center;justify-content:center}
.ci-item .ic svg{width:18px;height:18px;stroke:var(--burst-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ci-item h3{font-family:'Instrument Sans',sans-serif;font-size:.88rem;font-weight:700}
.ci-item p{font-size:.82rem;color:var(--muted)}

/* Social media page */
.socpage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.socpage-card{display:flex;align-items:center;gap:16px;background:var(--burst-mid);border:1px solid rgba(245,237,220,.12);border-radius:var(--radius);padding:20px;transition:.2s}
.socpage-card:hover{border-color:var(--amber);transform:translateY(-3px)}
.socpage-card .soc{width:48px;height:48px;flex-shrink:0}
.socpage-card h3{font-family:'Instrument Sans',sans-serif;font-size:.98rem;font-weight:700}
.socpage-card p{font-size:.8rem;color:var(--muted)}

/* Empty state */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty .btn{margin:16px auto 0}

/* Landing page */
.lp-hero{position:relative;overflow:hidden;padding:72px 0;text-align:center;background:radial-gradient(ellipse 120% 160% at 50% 0%, var(--amber) 0%, var(--amber-deep) 20%, var(--mahogany) 52%, var(--burst-dark) 100%)}
.lp-hero::after{content:"";position:absolute;inset:0;opacity:.14;background:repeating-linear-gradient(180deg, transparent 0 44px, var(--binding) 44px 45px)}
.lp-hero > .container{position:relative;z-index:1}
.lp-hero h1{font-size:clamp(1.9rem,5vw,3.1rem);max-width:700px;margin:0 auto;color:#FFF8EC;text-shadow:0 2px 18px rgba(20,16,12,.45)}
.lp-hero p{max-width:520px;margin:14px auto 26px;color:rgba(255,248,236,.9)}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width:1024px){
  .nav-links{display:none}
  .hamburger{display:flex;width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid rgba(245,237,220,.18);color:var(--binding);cursor:pointer;align-items:center;justify-content:center}
  .hamburger svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
  .grid-produk{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .slide{padding:40px 42px;min-height:300px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .account-layout{grid-template-columns:210px 1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE — HP (≤640px)
   ============================================================ */
@media (max-width:640px){
  .grid-produk{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-body{padding:11px 12px 13px}
  .card-title{font-size:.88rem}
  .price{font-size:.92rem}
  .cart-add{width:34px;height:34px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:10px}
  .strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px;padding:40px 0 28px}
  .slide{padding:30px 22px;min-height:280px}
  .slide p{font-size:.88rem}
  .slider-arrow{display:none}
  .section{padding:38px 0}
  .nav{padding:12px 16px}
  .nav-icons .hide-hp{display:none}
  .topbar{font-size:.7rem}
  .grid-3,.grid-2,.benefit-grid,.socpage-grid{grid-template-columns:1fr}
  .account-layout{grid-template-columns:1fr;padding:30px 0}
  .account-menu{position:static;display:flex;overflow-x:auto;gap:6px;padding:10px;scrollbar-width:none}
  .account-menu a{flex-shrink:0;white-space:nowrap}
  .form-row{grid-template-columns:1fr}
  .cart-item{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
  .cart-item > :last-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .cart-thumb{width:70px;height:70px}
  .voucher-card{grid-template-columns:92px 1fr}
  .voucher-right{grid-column:1/-1;padding-top:0}
  .otp-input{width:44px;height:52px;font-size:1.2rem}
  .page-hero{padding:38px 0 32px}
  .article{padding:34px 0}
  .order-body{grid-template-columns:58px 1fr}
  .order-thumb{width:58px;height:58px}
  .track-box{flex-direction:column}
}