:root{
  --navy-900:#0A2340;
  --navy-800:#0D2B54;
  --navy-700:#15376B;
  --blue-500:#1B4B8F;
  --brand-700:#003570;
  --brand-600:#004899;
  --brand-500:#0A63C4;
  --brand-400:#3B84DC;
  --brand-50:#EAF2FC;
  --cyan-500:#17A8C4;
  --magenta-500:#D6237A;
  --yellow-500:#F2C11A;
  --bg:#F6F7FA;
  --paper:#FFFFFF;
  --ink-900:#101826;
  --ink-600:#4B5768;
  --ink-400:#8792A2;
  --radius:14px;
  --green-wa:#25D366;
  --topbar-h:38px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Sora', sans-serif; letter-spacing:-0.02em;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
ul{list-style:none;}
button{font-family:inherit;}
@media(prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* Topbar */
.topbar{background:var(--navy-900); color:#B9C4D6; font-size:12.5px;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:8px 24px; gap:16px; flex-wrap:wrap;}
.topbar-left, .topbar-right{display:flex; align-items:center; gap:10px;}
.topbar a{color:#B9C4D6; transition:color .2s;}
.topbar a:hover{color:#fff;}
.topbar-sep{color:#3C4A62;}
.topbar-social{display:flex; align-items:center; gap:8px;}
.topbar-social a{font-size:13px; opacity:.9;}

/* CMYK divider */
.cmyk-divider{display:flex; height:6px; width:100%;}
.cmyk-divider span{flex:1;}
.cmyk-divider .c{background:var(--cyan-500);}
.cmyk-divider .m{background:var(--magenta-500);}
.cmyk-divider .y{background:var(--yellow-500);}
.cmyk-divider .k{background:var(--navy-900);}

/* Header */
header{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 0 #E7EAF0;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:800; font-size:20px; color:var(--navy-900); flex-shrink:0;}
.logo-badge{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; padding:5px; flex-shrink:0; box-shadow:0 0 0 1.5px #E7EAF0;}
.logo-badge img{width:100%; height:100%; object-fit:contain; display:block;}

.header-main{display:flex; align-items:center; gap:20px; padding:16px 24px;}
.search-bar{flex:1; max-width:560px; display:flex; align-items:center; background:var(--bg); border:1.5px solid #E1E5EC; border-radius:999px; overflow:hidden; transition:border-color .2s;}
.search-bar:focus-within{border-color:var(--brand-500);}
.search-bar input{flex:1; border:none; background:transparent; padding:11px 18px; font-size:14px; font-family:inherit; color:var(--ink-900); outline:none;}
.search-bar button{border:none; background:var(--brand-600); color:#fff; width:42px; height:42px; margin:2px; border-radius:50%; flex-shrink:0; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:background .2s;}
.search-bar button:hover{background:var(--brand-500);}
.header-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.icon-btn{position:relative; width:44px; height:44px; border-radius:50%; border:1.5px solid #E1E5EC; background:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; transition:border-color .2s, background .2s;}
.icon-btn:hover{border-color:var(--brand-500); background:var(--brand-50);}
.cart-badge{position:absolute; top:-5px; right:-5px; background:var(--brand-600); color:#fff; font-size:10.5px; font-weight:700; min-width:19px; height:19px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;}
.btn-wa{background:var(--green-wa); color:#fff; padding:11px 22px; border-radius:999px; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; transition:background .2s, transform .2s; white-space:nowrap;}
.btn-wa:hover{background:#1fb959; transform:translateY(-1px);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; flex-shrink:0;}
.burger span{width:22px; height:2px; background:var(--navy-900); transition:transform .25s, opacity .25s;}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Category bar (biru, mega menu + nav) */
.category-bar{background:var(--brand-600);}
.category-bar-inner{display:flex; align-items:center; gap:28px; padding:0;}
.mega-wrap{position:relative; flex-shrink:0;}
.mega-toggle{background:var(--brand-700); color:#fff; border:none; padding:14px 18px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; transition:background .2s;}
.mega-toggle:hover, .mega-toggle.active{background:var(--navy-900);}
.mega-menu{display:none; position:absolute; top:100%; left:0; width:480px; max-width:88vw; background:#fff; border-radius:0 0 14px 14px; box-shadow:0 20px 40px rgba(10,35,64,0.18); overflow:hidden; z-index:60;}
.mega-menu.open{display:block;}
.mega-menu-head{padding:14px 18px 8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-400);}
.mega-menu-grid{display:grid; grid-template-columns:1fr 1fr; padding:0 6px;}
.mega-menu a{display:flex; align-items:center; gap:10px; padding:11px 12px; font-size:13.5px; font-weight:600; color:var(--ink-900); border-radius:9px; transition:background .15s;}
.mega-menu a:hover{background:var(--brand-50); color:var(--brand-600);}
.mega-menu-all{display:block; text-align:center; padding:13px 18px !important; font-size:13.5px; font-weight:700; color:var(--brand-600) !important; border-top:1px solid #F0F2F6; margin-top:4px;}
.mega-menu-all:hover{background:var(--brand-50) !important;}
@media(max-width:480px){ .mega-menu-grid{grid-template-columns:1fr;} }
.mega-icon{width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-400);}
.mega-icon .kic-svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
.mega-menu a:hover .mega-icon{color:var(--brand-600);}
.mega-nama{flex:1;}
.mega-arrow{color:var(--ink-400); font-size:15px;}
.navlinks{display:flex; gap:24px; align-items:center; flex:1;}
.navlinks a{color:rgba(255,255,255,0.85); font-size:14px; font-weight:600; transition:color .2s; padding:14px 0;}
.navlinks a:hover, .navlinks a.active{color:#fff;}
.bantuan{color:rgba(255,255,255,0.85); font-size:12.5px; padding:14px 24px 14px 0; white-space:nowrap;}
.bantuan strong{color:#fff;}

.mobile-menu{display:none; flex-direction:column; background:var(--navy-800); border-top:1px solid rgba(255,255,255,0.08); max-height:0; overflow:hidden; transition:max-height .3s ease;}
.mobile-menu.open{max-height:520px; overflow-y:auto;}
.mobile-menu a{color:#C9D3E3; font-size:15px; font-weight:500; padding:16px 24px; border-bottom:1px solid rgba(255,255,255,0.06); display:block;}
.mobile-menu a:active{background:rgba(255,255,255,0.05);}
.mobile-menu-kategori{padding:6px 0 10px;}
.mobile-menu-kategori .mm-label{display:block; padding:14px 24px 6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#7C8AA3;}
.mobile-menu-kategori a{padding:12px 24px; font-size:14px; display:flex; align-items:center; gap:10px;}
.mm-icon{display:inline-flex; width:18px; height:18px; flex-shrink:0; color:#8B96AD;}
.mm-icon .kic-svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}

/* Hero — promo banner carousel, gaya xpressprint */
.hero-promo{padding:18px 0; background:var(--bg);}
.hero-promo-grid{display:grid; grid-template-columns:2.3fr 1fr; gap:16px;}
.btn-primary{background:var(--brand-600); color:#fff; padding:14px 26px; border-radius:10px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .2s; box-shadow:0 10px 24px rgba(0,72,153,0.28); border:none; cursor:pointer;}
.btn-primary:hover{background:var(--brand-500); transform:translateY(-2px);}
.btn-ghost{border:1.5px solid rgba(255,255,255,0.3); color:#fff; padding:14px 24px; border-radius:10px; font-weight:600; font-size:15px; transition:border-color .2s, background .2s;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06);}

.promo-main{position:relative; border-radius:18px; overflow:hidden; min-height:400px;}
.promo-slide{display:none; position:relative; align-items:center; justify-content:space-between; min-height:400px; padding:0 48px; overflow:hidden; animation:heroFade .5s ease;}
.promo-slide.active{display:flex;}
@keyframes heroFade{from{opacity:0;} to{opacity:1;}}
.promo-slide::before{content:""; position:absolute; inset:0; z-index:0;}
.promo-slide.slide-1::before{background:linear-gradient(135deg, var(--navy-900) 0%, var(--brand-700) 100%);}
.promo-slide.slide-2::before{background:linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);}
.promo-slide.slide-3::before{background:linear-gradient(135deg, var(--navy-800) 0%, var(--cyan-500) 130%);}
.promo-slide.slide-4::before{background:linear-gradient(135deg, var(--brand-600) 0%, var(--magenta-500) 140%);}
.promo-slide::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.08); z-index:0;}
.promo-slide-text{position:relative; z-index:2; color:#fff; max-width:340px;}
.promo-slide-tag{display:inline-block; background:#fff; color:var(--brand-700); font-family:'Sora'; font-weight:800; font-size:14px; line-height:1.25; padding:8px 16px; border-radius:10px; margin-bottom:16px;}
.promo-slide-text h2{font-size:clamp(24px, 3vw, 32px); font-weight:800; line-height:1.15; margin-bottom:10px;}
.promo-slide-text p{font-size:14px; color:rgba(255,255,255,0.85); line-height:1.5;}
.promo-slide-visual{position:relative; z-index:2;}
.promo-pedestal{width:180px; height:180px; border-radius:24px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:80px; box-shadow:0 20px 44px rgba(0,0,0,0.25);}
.hero-dots{position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5;}
.hero-dots .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; cursor:pointer; padding:0; transition:background .2s, width .2s;}
.hero-dots .dot.active{background:#fff; width:22px; border-radius:5px;}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.18); color:#fff; border:none; font-size:20px; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; transition:background .2s;}
.hero-arrow:hover{background:rgba(255,255,255,0.32);}
.hero-arrow.prev{left:14px;}
.hero-arrow.next{right:14px;}

.promo-side{display:flex; flex-direction:column; gap:16px;}
.promo-side-card{border-radius:18px; overflow:hidden; position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:192px;}
.promo-side-card.psc-1{background:linear-gradient(150deg, var(--navy-800), var(--brand-600)); justify-content:center; align-items:center; gap:10px; padding:20px; text-align:center;}
.promo-side-card.psc-1 .psc-visual{font-size:44px;}
.promo-side-card.psc-1 .psc-text h4{color:#fff; font-family:'Sora'; font-weight:800; font-size:15px; margin-bottom:4px;}
.promo-side-card.psc-1 .psc-price{color:rgba(255,255,255,0.85); font-size:12.5px; font-weight:600;}
.promo-side-card.psc-2{background:#fff; border:1px solid #E7EAF0; padding:20px; justify-content:center;}
.promo-side-card.psc-2 .psc-text-only h4{font-family:'Sora'; font-weight:800; font-size:15px; color:var(--navy-900); margin-bottom:6px;}
.promo-side-card.psc-2 .psc-text-only p{font-size:12.5px; color:var(--ink-600); line-height:1.5;}
@media(max-width:860px){ .hero-promo-grid{grid-template-columns:1fr;} .promo-side{flex-direction:row;} .promo-side-card{min-height:150px;} }
@media(max-width:560px){ .promo-slide{padding:0 22px; min-height:320px;} .promo-main{min-height:320px;} .promo-pedestal{width:120px; height:120px; font-size:52px;} .promo-side{flex-direction:column;} }

/* Feature row (icon strip, gaya xpressprint) */
.feature-row{background:#fff; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1180px; margin:0 auto; padding:28px 24px; margin-top:20px;}
.feature-item{display:flex; align-items:flex-start; gap:14px; padding:20px; background:var(--bg); border-radius:14px;}
.feature-item .fi-icon{width:42px; height:42px; border-radius:10px; background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;}
.feature-item h4{font-size:14.5px; font-weight:700; color:var(--navy-900); margin-bottom:4px;}
.feature-item p{font-size:12.5px; color:var(--ink-600); line-height:1.5;}

/* Produk carousel (Produk Pilihan) */
.produk-carousel-section{padding:56px 0 64px;}
.pc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.pc-head h2{font-size:clamp(20px,2.6vw,26px); font-weight:800; color:var(--navy-900);}
.pc-head a{color:var(--brand-600); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:4px;}
.produk-carousel-wrap{position:relative;}
.produk-carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 16px; scrollbar-width:thin;}
.produk-carousel-track::-webkit-scrollbar{height:6px;}
.produk-carousel-track::-webkit-scrollbar-thumb{background:#D6DCE6; border-radius:99px;}
.pc-card{scroll-snap-align:start; flex:0 0 200px; background:#fff; border:1px solid #E7EAF0; border-radius:14px; overflow:hidden; transition:transform .2s, box-shadow .2s;}
.pc-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(13,43,84,0.1);}
.pc-card .pc-thumb{aspect-ratio:1/1; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:38px;}
.pc-card .pc-thumb img{width:100%; height:100%; object-fit:cover;}
.pc-card .pc-body{padding:12px 14px 16px;}
.pc-card h3{font-size:13.5px; font-weight:700; color:var(--navy-900); line-height:1.35; margin-bottom:6px; min-height:36px;}
.pc-card .pc-harga{font-size:13px; font-weight:800; color:var(--brand-600);}
.pc-card .pc-harga span{font-size:10.5px; font-weight:600; color:var(--ink-400); display:block;}
.carousel-arrow{position:absolute; top:38%; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid #E1E5EC; box-shadow:0 6px 16px rgba(13,43,84,0.12); font-size:18px; color:var(--navy-900); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5;}
.carousel-arrow.prev{left:-18px;}
.carousel-arrow.next{right:-18px;}

/* Kategori Produk - icon grid (homepage) */
.kategori-grid-section{padding:12px 0 8px;}
.kategori-icon-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.kategori-icon-card{background:#fff; border:1px solid #E7EAF0; border-radius:16px; padding:22px 14px; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s;}
.kategori-icon-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(13,43,84,0.1); border-color:var(--brand-400);}
.kategori-icon-card .kic-icon{width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; font-size:24px;}
.kategori-icon-card span.kic-nama{font-size:13px; font-weight:700; color:var(--navy-900); line-height:1.3; display:block;}
@media(max-width:860px){ .kategori-icon-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:480px){ .kategori-icon-grid{grid-template-columns:repeat(2,1fr); gap:10px;} .kategori-icon-card{padding:16px 10px;} }

/* Kategori Rows - per-category product carousels (homepage) */
.kategori-row-section{padding:8px 0;}
.kategori-row{margin-bottom:40px;}
.kategori-row:last-child{margin-bottom:0;}
.kr-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.kr-head .kr-icon{width:34px; height:34px; border-radius:9px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.kr-head h3{font-size:17px; font-weight:800; color:var(--navy-900); flex:1;}
.kr-head a{color:var(--brand-600); font-weight:700; font-size:13px; white-space:nowrap;}

/* Cara Order */
.cara-order-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.cara-order-step{background:#fff; border-radius:var(--radius); padding:26px 18px; border:1px solid #E7EAF0; position:relative; text-align:center;}
.cara-order-step .co-num{width:48px; height:48px; border-radius:50%; background:var(--brand-50); color:var(--brand-600); font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.cara-order-step .co-step{position:absolute; top:10px; right:12px; font-size:11px; font-weight:800; color:var(--ink-400);}
.cara-order-step h3{font-size:14.5px; margin-bottom:6px; color:var(--navy-900);}
.cara-order-step p{font-size:12.5px; color:var(--ink-600); line-height:1.5;}
@media(max-width:900px){ .cara-order-grid{grid-template-columns:repeat(3,1fr);} }

/* Hero banner image slide (dari admin) */
.promo-slide.has-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.promo-slide.has-image::before{background:linear-gradient(0deg, rgba(10,35,64,0.55) 0%, rgba(10,35,64,0.05) 55%);}
.promo-slide.has-image .promo-slide-text{max-width:420px;}

/* Keranjang WA - panel */
.cart-overlay{position:fixed; inset:0; background:rgba(10,20,35,0.5); z-index:90; opacity:0; visibility:hidden; transition:opacity .25s;}
.cart-overlay.open{opacity:1; visibility:visible;}
.cart-panel{position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:#fff; z-index:95; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; box-shadow:-10px 0 30px rgba(0,0,0,0.15);}
.cart-panel.open{transform:translateX(0);}
.cart-panel-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid #E7EAF0;}
.cart-panel-head h3{font-size:16.5px; color:var(--navy-900);}
.cart-close{width:34px; height:34px; border-radius:50%; border:none; background:var(--bg); font-size:15px; cursor:pointer;}
.cart-panel-body{flex:1; overflow-y:auto; padding:16px 22px;}
.cart-empty{text-align:center; padding:60px 10px; color:var(--ink-400);}
.cart-empty p{margin-top:12px; font-size:13.5px; line-height:1.6;}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #F0F2F6;}
.cart-item .ci-main{flex:1;}
.ci-name{font-size:14px; font-weight:700; color:var(--navy-900); margin-bottom:3px;}
.ci-varian{font-size:12px; color:var(--brand-600); font-weight:600; margin-bottom:3px;}
.ci-qty{font-size:12px; color:var(--ink-600); margin-bottom:2px;}
.ci-spec{font-size:11.5px; color:var(--ink-400); line-height:1.5;}
.ci-price{font-size:13px; font-weight:800; color:var(--navy-900); margin-top:6px;}
.ci-remove{width:26px; height:26px; border-radius:50%; border:none; background:var(--bg); color:var(--ink-600); cursor:pointer; flex-shrink:0; font-size:12px; height:fit-content;}
.cart-panel-footer{border-top:1px solid #E7EAF0; padding:18px 22px 22px; display:flex; flex-direction:column; gap:10px;}
.cart-total-row{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--ink-600);}
.cart-total-row strong{font-size:19px; color:var(--navy-900); font-family:'Sora';}
.cart-clear{background:none; border:none; color:var(--ink-400); font-size:12.5px; text-decoration:underline; cursor:pointer; padding:4px;}

.cart-toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); background:var(--navy-900); color:#fff; padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:600; opacity:0; visibility:hidden; transition:opacity .25s, transform .25s; z-index:120; box-shadow:0 14px 30px rgba(0,0,0,0.25); white-space:nowrap;}
.cart-toast.show{opacity:1; visibility:visible; transform:translate(-50%, 0);}

/* Chat pill (pengganti wa-float) */
.chat-pill{position:fixed; bottom:24px; right:24px; z-index:60; background:#fff; border:1px solid #E7EAF0; border-radius:999px; padding:9px 18px 9px 9px; display:flex; align-items:center; gap:9px; box-shadow:0 12px 28px rgba(10,35,64,0.18); font-size:13.5px; font-weight:700; color:var(--navy-900); transition:transform .2s, box-shadow .2s;}
.chat-pill:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(10,35,64,0.24);}
.chat-pill-badge{width:32px; height:32px; box-shadow:0 0 0 1.5px #E7EAF0;}

/* Section shared */
section{padding:88px 0;}
.section-head{max-width:620px; margin:0 auto 52px; text-align:center;}
.section-head .kicker{color:var(--brand-600); font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; color:var(--navy-900); line-height:1.2;}
.section-head p{color:var(--ink-600); margin-top:14px; font-size:15.5px;}

/* Page header (untuk katalog & produk detail) */
.page-header{background:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%); color:#fff; padding:52px 0 40px;}
.page-header .breadcrumb{font-size:13px; color:#9DAEC7; margin-bottom:12px;}
.page-header .breadcrumb a{color:#C9D3E3;}
.page-header .breadcrumb a:hover{color:#fff;}
.page-header h1{font-size:clamp(24px,3.2vw,34px); font-weight:800;}
.page-header p{color:#C9D3E3; margin-top:8px; font-size:14.5px;}

/* Why choose us */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{background:var(--paper); border-radius:var(--radius); padding:28px 22px; border:1px solid #E7EAF0; transition:transform .25s, box-shadow .25s;}
.why-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(13,43,84,0.08);}
.why-icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; color:#fff;}
.why-card h3{font-size:16.5px; margin-bottom:8px; color:var(--navy-900);}
.why-card p{font-size:13.8px; color:var(--ink-600); line-height:1.55;}

/* Filter kategori (katalog) */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; justify-content:center;}
.filter-chip{padding:9px 18px; border-radius:999px; border:1.5px solid #E1E5EC; font-size:13.5px; font-weight:600; color:var(--ink-600); background:#fff; transition:all .2s;}
.filter-chip:hover{border-color:var(--brand-600); color:var(--brand-600);}
.filter-chip.active{background:var(--navy-900); border-color:var(--navy-900); color:#fff;}

/* Layout katalog: sidebar kategori kiri + konten kanan (gaya xpressprint) */
.katalog-layout{display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start;}
.katalog-sidebar{position:sticky; top:96px; background:#fff; border:1px solid #E7EAF0; border-radius:var(--radius); overflow:hidden;}
.katalog-sidebar-head{padding:16px 18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#fff; background:var(--navy-900);}
.katalog-sidebar-list{display:flex; flex-direction:column; padding:8px;}
.ks-item{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; font-size:13.8px; font-weight:600; color:var(--ink-900); transition:background .15s, color .15s;}
.ks-item .ks-icon{font-size:16px; width:22px; text-align:center; flex-shrink:0;}
.ks-item:hover{background:var(--brand-50); color:var(--brand-600);}
.ks-item.active{background:var(--brand-600); color:#fff;}
.katalog-main{min-width:0;}

/* Tab sub kategori di atas grid produk (mis: Kalender Meja / Kalender Dinding) */
.subkategori-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:16px; border-bottom:1.5px solid #E7EAF0;}
.sub-tab{padding:9px 16px; border-radius:999px; border:1.5px solid #E1E5EC; font-size:13px; font-weight:600; color:var(--ink-600); background:#fff; transition:all .2s;}
.sub-tab:hover{border-color:var(--brand-600); color:var(--brand-600);}
.sub-tab.active{background:var(--navy-900); border-color:var(--navy-900); color:#fff;}

.katalog-search-info{font-size:13.5px; color:var(--ink-600); margin-bottom:20px;}

@media(max-width:860px){
  .katalog-layout{grid-template-columns:1fr;}
  .katalog-sidebar{position:static; border-radius:var(--radius);}
  .katalog-sidebar-list{flex-direction:row; overflow-x:auto; gap:6px; padding:10px;}
  .ks-item{flex-shrink:0; white-space:nowrap;}
}

/* Produk grid & card (katalog) */
.produk{background:var(--paper);}
.produk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.produk-grid-3col{grid-template-columns:repeat(3,1fr);}
@media(max-width:1024px){ .produk-grid-3col{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .produk-grid-3col{grid-template-columns:1fr;} }
.produk-card{position:relative; border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid #E7EAF0; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column;}
.produk-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(13,43,84,0.1);}
.produk-card .thumb{position:relative; aspect-ratio:4/3; background:linear-gradient(150deg, var(--navy-800), var(--blue-500)); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.produk-card .thumb img{width:100%; height:100%; object-fit:cover;}
.produk-card .thumb .placeholder-icon{font-size:44px; opacity:.85;}
.produk-card .tag{position:absolute; top:14px; left:14px; font-size:11px; font-weight:700; z-index:2; background:var(--brand-600); color:#fff; padding:4px 10px; border-radius:999px; letter-spacing:0.03em;}
.produk-card .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.produk-card .kategori-label{font-size:11.5px; color:var(--brand-600); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
.produk-card h3{font-size:17px; font-weight:700; color:var(--navy-900);}
.produk-card .desc{font-size:13px; color:var(--ink-600); line-height:1.5; flex:1;}
.produk-card .harga{font-size:15px; font-weight:800; color:var(--navy-900); margin-top:4px;}
.produk-card .harga span{font-size:11.5px; font-weight:600; color:var(--ink-400); display:block;}
.produk-card .btn-lihat{margin-top:10px; text-align:center; background:var(--navy-900); color:#fff; padding:11px; border-radius:9px; font-weight:600; font-size:13.5px; transition:background .2s;}
.produk-card .btn-lihat:hover{background:var(--brand-600);}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-600);}

/* Halaman Promo */
.promo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.promo-grid-card{position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid #E7EAF0; transition:transform .25s, box-shadow .25s;}
.promo-grid-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(13,43,84,0.12);}
.promo-grid-card img{width:100%; display:block; aspect-ratio:16/7; object-fit:cover;}
.promo-grid-card-title{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background:linear-gradient(0deg, rgba(10,35,64,0.85), transparent); color:#fff; font-weight:700; font-size:14.5px;}
@media(max-width:700px){ .promo-grid{grid-template-columns:1fr;} }

/* Produk detail */
.produk-detail{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start;}
.pd-gallery{position:sticky; top:100px;}
.pd-gallery .main-photo{aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(150deg, var(--navy-800), var(--blue-500)); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:12px;}
.pd-gallery .main-photo img{width:100%; height:100%; object-fit:cover;}
.pd-gallery .main-photo .placeholder-icon{font-size:72px; color:rgba(255,255,255,0.9);}
.pd-gallery .thumbs{display:flex; gap:10px; flex-wrap:wrap;}
.pd-gallery .thumbs img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer;}
.pd-gallery .thumbs img.active{border-color:var(--brand-600);}
.pd-info .kategori-label{font-size:12px; color:var(--brand-600); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; display:block;}
.pd-info h1{font-size:clamp(22px,2.8vw,30px); font-weight:800; color:var(--navy-900); margin-bottom:10px;}
.pd-info .harga-range{font-size:20px; font-weight:800; color:var(--brand-600); margin-bottom:18px;}
.pd-info .harga-range span{font-size:13px; color:var(--ink-400); font-weight:600; display:block; margin-bottom:2px;}
.pd-info .deskripsi{color:var(--ink-600); font-size:14.5px; line-height:1.7; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid #E7EAF0;}

.spec-form label{display:block; font-size:13.5px; font-weight:700; color:var(--navy-900); margin-bottom:8px;}
.spec-form .field{margin-bottom:20px;}
.spec-form .hint{font-size:12px; color:var(--ink-400); margin-top:5px;}
.spec-form input[type=text], .spec-form input[type=number], .spec-form select, .spec-form textarea{
  width:100%; padding:12px 14px; border-radius:9px; border:1.5px solid #E1E5EC; font-size:14px; font-family:inherit; color:var(--ink-900); background:#fff; transition:border-color .2s;
}
.spec-form input:focus, .spec-form select:focus, .spec-form textarea:focus{outline:none; border-color:var(--brand-600);}
.spec-form textarea{resize:vertical; min-height:90px;}
.varian-options{display:flex; flex-direction:column; gap:10px;}
.varian-option{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border:1.5px solid #E1E5EC; border-radius:10px; cursor:pointer; transition:all .2s;}
.varian-option:hover{border-color:var(--brand-500);}
.varian-option.selected{border-color:var(--brand-600); background:rgba(0,72,153,0.05);}
.varian-option .vname{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--navy-900);}
.varian-option .vprice{font-size:14px; font-weight:800; color:var(--brand-600); white-space:nowrap;}
.varian-option input[type=radio]{accent-color:var(--brand-600); width:17px; height:17px;}

.estimasi-box{background:var(--navy-900); color:#fff; border-radius:var(--radius); padding:20px 22px; margin:24px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.estimasi-box .label{font-size:12.5px; color:#9DAEC7;}
.estimasi-box .value{font-size:22px; font-weight:800; font-family:'Sora';}
.estimasi-box .note{font-size:11.5px; color:#9DAEC7; width:100%;}

.pd-actions{display:flex; flex-direction:column; gap:10px;}
.btn-add-cart{width:100%; background:#fff; color:var(--brand-600); padding:15px; border-radius:12px; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px solid var(--brand-600); cursor:pointer; transition:background .2s, transform .2s;}
.btn-add-cart:hover{background:var(--brand-50); transform:translateY(-2px);}
.btn-wa-order{width:100%; background:var(--green-wa); color:#fff; padding:16px; border-radius:12px; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; gap:10px; border:none; cursor:pointer; transition:background .2s, transform .2s;}
.btn-wa-order:hover{background:#1fb959; transform:translateY(-2px);}
.btn-wa-order:disabled{background:#B9C4D6; cursor:not-allowed; transform:none;}
.pd-hint{font-size:12px; color:var(--ink-400); margin-top:10px; line-height:1.5;}
.form-error{color:#D6237A; font-size:12.5px; margin-top:6px; display:none;}

/* Tentang */
.tentang{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.tentang-visual{border-radius:20px; aspect-ratio:4/5; background:linear-gradient(160deg,var(--navy-800),var(--navy-900)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.tentang-visual .ring{width:70%; aspect-ratio:1/1; border-radius:50%; border:2px dashed rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center;}
.tentang-visual .ring-core{width:66%; aspect-ratio:1/1; border-radius:50%; background:var(--brand-600); display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; font-family:'Sora'; font-weight:800; font-size:15px; padding:10px; box-shadow:0 20px 40px rgba(0,72,153,0.3);}
.tentang-copy .kicker{color:var(--brand-600); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;}
.tentang-copy h2{font-size:clamp(26px,3.2vw,34px); font-weight:800; color:var(--navy-900); margin:12px 0 18px;}
.tentang-copy p{color:var(--ink-600); font-size:15.5px; line-height:1.7; margin-bottom:16px;}
.tentang-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.tentang-list li{list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-900); font-weight:500;}
.tentang-list li .check{width:20px; height:20px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; margin-top:1px;}

/* Testimoni */
.testi{background:var(--navy-900); color:#fff;}
.testi .section-head h2{color:#fff;}
.testi .section-head p{color:#9DAEC7;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testi-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:26px;}
.testi-card .stars{color:var(--yellow-500); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.testi-card p{font-size:14.5px; color:#D6DEEA; line-height:1.65; margin-bottom:18px;}
.testi-who{display:flex; align-items:center; gap:10px;}
.testi-avatar{width:36px; height:36px; border-radius:50%; background:var(--brand-600); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.testi-who strong{font-size:13.5px; display:block;}
.testi-who span{font-size:12px; color:#9DAEC7;}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid #E1E5EC; padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15.5px; color:var(--navy-900);}
.faq-q .plus{width:26px; height:26px; border-radius:50%; border:1.5px solid #C9D3E3; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--navy-800); transition:transform .25s, background .25s;}
.faq-item.open .plus{background:var(--brand-600); color:#fff; border-color:var(--brand-600); transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{padding-top:12px; font-size:14.3px; color:var(--ink-600); line-height:1.6; max-width:640px;}

/* CTA banner */
.cta-banner{background:linear-gradient(120deg, var(--brand-600), var(--navy-900)); border-radius:24px; margin:0 24px; padding:56px 40px; text-align:center; color:#fff; max-width:1132px; margin-left:auto; margin-right:auto;}
.cta-banner h2{font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:14px;}
.cta-banner p{font-size:15px; color:rgba(255,255,255,0.9); margin-bottom:26px;}
.cta-banner .btn-primary{background:#fff; color:var(--navy-900); box-shadow:none;}
.cta-banner .btn-primary:hover{background:#F1F3F7;}

/* Footer */
footer{background:var(--navy-900); color:#B9C4D6; padding-top:64px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px;}
.foot-logo{color:#fff; font-family:'Sora'; font-weight:800; font-size:19px; margin-bottom:14px; display:flex; gap:8px; align-items:center;}
.foot-grid p{font-size:13.8px; line-height:1.7;}
.foot-grid h4{color:#fff; font-size:14px; margin-bottom:16px; font-weight:700;}
.foot-grid ul li{margin-bottom:10px; font-size:13.8px;}
.foot-grid ul a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08); padding:20px 0; text-align:center; font-size:12.8px; color:#7C8AA3;}
.foot-social{display:flex; gap:10px; margin-top:16px;}
.foot-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .2s, transform .2s;}
.foot-social a:hover{background:var(--brand-600); transform:translateY(-2px);}

/* Mobile sticky tabbar, gaya xpressprint */
.mobile-tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:80; background:#fff; border-top:1px solid #E7EAF0; box-shadow:0 -6px 20px rgba(10,35,64,0.08); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.mobile-tabbar a, .mobile-tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; font-weight:600; color:var(--ink-400); background:none; border:none; padding:6px 2px; cursor:pointer; font-family:inherit;}
.mobile-tabbar a.active{color:var(--brand-600);}
.mobile-tabbar .mtb-icon{font-size:19px; position:relative;}
.mobile-tabbar .mtb-badge{position:absolute; top:-6px; right:-10px; background:var(--brand-600); color:#fff; font-size:9px; font-weight:700; min-width:15px; height:15px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:1.5px solid #fff;}

/* Rating badge on product cards */
.rating-row{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-600); font-weight:600; margin:2px 0;}
.rating-row .rc{color:var(--ink-400); font-weight:500;}

/* WA float */
.wa-float{position:fixed; bottom:24px; right:24px; z-index:60; width:56px; height:56px; border-radius:50%; background:var(--green-wa); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 10px 26px rgba(37,211,102,0.45); transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}

/* Responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding-top:56px;}
  .hero-visual{max-width:340px; margin:0 auto;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .produk-grid{grid-template-columns:repeat(2,1fr);}
  .tentang{grid-template-columns:1fr;}
  .tentang-visual{max-width:320px; margin:0 auto;}
  .testi-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .produk-detail{grid-template-columns:1fr;}
  .pd-gallery{position:static;}
  .hero-layout{grid-template-columns:1fr;}
  .hero-side{display:none;}
  .feature-row{grid-template-columns:repeat(2,1fr);}
  .topbar-left .topbar-social{display:none;}
  .cart-panel{width:100%; max-width:400px;}
}
@media(max-width:640px){
  .navlinks{display:none;}
  .bantuan{display:none;}
  .burger{display:flex;}
  .why-grid{grid-template-columns:1fr;}
  .produk-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap; gap:20px;}
  .header-main{padding:12px 16px; gap:10px;}
  .logo-badge{width:36px; height:36px; padding:4px;}
  .search-bar{order:3; max-width:none; width:100%; flex-basis:100%;}
  .header-actions{margin-left:auto;}
  .btn-wa{padding:9px 12px; font-size:0;}
  .btn-wa::before{content:"💬"; font-size:18px;}
  .icon-btn{width:38px; height:38px; font-size:16px;}
  .topbar-inner{padding:7px 16px; font-size:11px;}
  .topbar-right{display:none;}
  .category-bar{display:none;}
  .mobile-menu{display:flex;}
  .hero-inner{padding:40px 16px 40px; gap:32px;}
  .filter-bar{justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px;}
  .feature-row{grid-template-columns:1fr; padding:28px 16px;}
  .produk-carousel-track{padding:4px 16px 16px;}
  .cart-panel{max-width:none;}
  .mobile-tabbar{display:flex;}
  body{padding-bottom:64px;}
  .chat-pill{bottom:76px; padding:9px; border-radius:50%;}
  .chat-pill span:last-child{display:none;}
  .cara-order-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{gap:28px;}
}
@media(max-width:400px){
  .logo-badge{width:32px; height:32px;}
}

/* Icon fix: category icons are one-color, high-contrast brand blue on interaction. */
.kategori-icon-card .kic-icon { color: #777d91; }
.kategori-icon-card .kic-svg { display:block; width:28px; height:28px; margin:auto; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
.kategori-icon-card:hover .kic-icon, .kategori-icon-card:focus-visible .kic-icon, .kategori-icon-card:active .kic-icon { color:#2638c7; background:#e7eaff; }

.promo-side-card.has-image{padding:0;overflow:hidden;position:relative}.promo-side-card.has-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.promo-side-card.has-image:after{content:"";position:absolute;inset:0;background:rgba(20,18,77,.32)}.promo-side-card.has-image .psc-text,.promo-side-card.has-image .psc-text-only{position:relative;z-index:1;padding:20px}.promo-side-card.has-image h4,.promo-side-card.has-image p,.promo-side-card.has-image .psc-price{color:#fff}