:root {
  --teal:#1f8aa6; --teal-d:#166e86; --teal-l:#e6f4f8; --orange:#ef7d22; --orange-d:#d76a12;
  --fg:#1f2a33; --muted:#66727d; --line:#e1e7eb; --bg:#fff; --bg2:#f6f9fa; --err:#b3261e; --ok:#1f7a3f;
  --radius:12px; --head:'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
img { max-width:100%; height:auto; }
a { color:var(--teal); }
h1, h2, h3 { font-family:var(--head); line-height:1.2; color:#17323d; }
h1 { font-size:clamp(1.6rem, 4vw, 2.2rem); margin:.2rem 0 1rem; }
h2 { font-size:1.35rem; }
.wrap { max-width:1160px; margin:0 auto; padding:0 16px; }
.section { padding:1.5rem 16px; }
.wrap.section { padding-left:16px; padding-right:16px; }
.narrow-text { max-width:780px; }
.center { text-align:center; }
.small { font-size:14px; }
.muted { color:var(--muted); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:8px; top:8px; background:#fff; padding:6px 10px; z-index:100; }

/* header */
.site-header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:6px; padding-bottom:6px; }
.logo img { display:block; width:96px; height:auto; }
.mainnav { display:flex; align-items:center; gap:.2rem; }
.mainnav a { font-family:var(--head); font-weight:700; color:#17323d; text-decoration:none; padding:.45rem .6rem; border-radius:8px; }
.mainnav a:hover, .mainnav a.active { color:var(--teal); background:var(--teal-l); }
.cartlink { position:relative; display:inline-flex; align-items:center; }
.cartcount { position:absolute; top:0; right:-2px; background:var(--orange); color:#fff; font-size:11px; line-height:18px; min-width:18px; text-align:center; border-radius:9px; padding:0 4px; }
.catnav { background:var(--teal); }
.catnav .wrap { display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.catnav .wrap::-webkit-scrollbar { display:none; }
.catnav a { flex:0 0 auto; color:#fff; text-decoration:none; font-family:var(--head); font-weight:700; font-size:15px; padding:.55rem .7rem; white-space:nowrap; opacity:.92; }
.catnav a:hover, .catnav a.active { opacity:1; box-shadow:inset 0 -3px 0 var(--orange); }
@media (max-width:520px) { .hide-sm { display:none; } .logo img { width:78px; } }
@media (min-width:900px) { .logo img { width:118px; } }

/* buttons */
.btn { display:inline-block; font:700 16px/1.2 var(--head); color:#fff; background:var(--orange); border:2px solid var(--orange); border-radius:999px; padding:.7rem 1.3rem; text-decoration:none; cursor:pointer; text-align:center; }
.btn:hover { background:var(--orange-d); border-color:var(--orange-d); }
.btn-lg { font-size:17px; padding:.85rem 1.5rem; }
.btn-light { background:#fff; color:var(--teal-d); border-color:#bfdde6; }
.btn-light:hover { background:var(--teal-l); border-color:var(--teal); }
.btn-ghost { background:transparent; border-color:#fff; color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.btn-wa { background:#25d366; border-color:#25d366; }
.btn-wa:hover { background:#1eb257; border-color:#1eb257; }
.btn-block { display:block; width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.linkbtn { background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; font:inherit; font-size:14px; padding:4px; }

/* alerts */
.flashes { padding-top:1rem; }
.alert { padding:.75rem 1rem; border-radius:10px; margin:0 0 1rem; border:1px solid; }
.alert-success { background:#e9f6ee; border-color:#b7dfc4; color:var(--ok); }
.alert-error { background:#fdecea; border-color:#f2bcb7; color:var(--err); }
.alert-info { background:var(--teal-l); border-color:#bcd9e1; color:var(--teal-d); }
.error-text { display:block; color:var(--err); font-size:14px; font-weight:400; margin-top:.2rem; }

/* hero */
.hero { background:linear-gradient(135deg, #1f8aa6 0%, #2aa3bf 60%, #4bb9d1 100%); color:#fff; }
.hero-inner { padding-top:2.5rem; padding-bottom:2.5rem; }
.hero h1 { color:#fff; font-size:clamp(1.9rem, 6vw, 3rem); margin:0 0 .75rem; }
.hero p { font-size:1.1rem; max-width:620px; margin:0 0 1.5rem; opacity:.95; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.6rem; }

.section-title { text-align:center; margin:.5rem 0 1.25rem; }

/* category grid */
.catgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:720px) { .catgrid { grid-template-columns:repeat(3, 1fr); gap:18px; } }
.catcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; }
.catcard:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,60,80,.1); }
.catcard-img { aspect-ratio:4/3; background:#fff; display:flex; align-items:center; justify-content:center; padding:10px; }
.catcard-img img { width:100%; height:100%; object-fit:contain; }
.catcard-body { padding:.7rem .9rem .9rem; border-top:3px solid var(--orange); }
.catcard-body strong { display:block; font-family:var(--head); font-size:1.08rem; color:var(--teal-d); }
.catcard-body small { color:var(--muted); font-size:13.5px; line-height:1.35; display:block; }

/* usp */
.usp-band { background:var(--bg2); margin:1rem 0; }
.usp { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:720px) { .usp { grid-template-columns:repeat(3, 1fr); } }
.usp div { background:#fff; border-radius:var(--radius); padding:1rem 1.1rem; border:1px solid var(--line); }
.usp strong { display:block; font-family:var(--head); color:var(--teal-d); font-size:1.05rem; margin-bottom:.2rem; }
.usp span { color:var(--muted); font-size:15px; }

.steps { list-style:none; counter-reset:s; padding:0; display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:720px) { .steps { grid-template-columns:repeat(4, 1fr); } }
.steps li { counter-increment:s; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem; }
.steps li::before { content:counter(s); display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; font-weight:800; font-family:var(--head); margin-bottom:.4rem; }
.steps strong { display:block; font-family:var(--head); }
.steps span { color:var(--muted); font-size:15px; }

/* product grid */
.crumbs { font-size:14px; color:var(--muted); margin-bottom:.4rem; }
.crumbs a { color:var(--muted); }
.intro { color:var(--muted); max-width:780px; margin-bottom:1.25rem; }
.pgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:1.5rem; }
@media (min-width:720px) { .pgrid { grid-template-columns:repeat(3, 1fr); gap:18px; } }
@media (min-width:1000px) { .pgrid { grid-template-columns:repeat(4, 1fr); } }
.pcard { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; background:#fff; transition:transform .15s, box-shadow .15s; }
.pcard:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,60,80,.1); }
.pcard-img { aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:10px; background:#fff; }
.pcard-img img { width:100%; height:100%; object-fit:contain; }
.noimg { color:var(--muted); font-size:13px; background:var(--bg2); width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.pcard-body { padding:.6rem .8rem .8rem; display:flex; flex-direction:column; gap:.15rem; flex:1; border-top:1px solid var(--line); }
.brand { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pname { font-family:var(--head); font-weight:700; line-height:1.25; color:#17323d; }
.price { margin-top:auto; padding-top:.3rem; font-size:14px; color:var(--muted); }
.price strong { color:var(--orange-d); font-size:15px; }

/* product page */
.product { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px) { .product { grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:start; } .gallery { position:sticky; top:150px; } }
.gallery-main { display:flex; align-items:center; justify-content:center; aspect-ratio:1; border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:14px; overflow:hidden; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.thumb { flex:0 0 auto; width:68px; height:68px; padding:4px; border:2px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }
.thumb.active { border-color:var(--teal); }
.thumb img { width:100%; height:100%; object-fit:contain; }
.pinfo h1 { margin-top:.1rem; }
.tiertable { width:100%; border-collapse:collapse; margin:.25rem 0 .4rem; background:var(--bg2); border-radius:10px; overflow:hidden; }
.tiertable caption { text-align:left; font-family:var(--head); font-weight:700; padding-bottom:.3rem; }
.tiertable th, .tiertable td { padding:.55rem .8rem; border-bottom:1px solid #fff; text-align:left; }
.tiertable th { font-weight:500; }
.tiertable td { text-align:right; font-weight:700; color:var(--orange-d); }
.tiertable td small { color:var(--muted); font-weight:400; }
.tiertable tr.on { background:#fff3e6; }
.bookbox { border:2px solid var(--teal-l); border-radius:var(--radius); padding:1rem; margin:1rem 0 1.5rem; background:#fff; }
.bookbox label { display:block; font-weight:600; font-size:15px; margin-bottom:.6rem; }
.dates { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.quote { background:var(--bg2); border-radius:8px; padding:.7rem .9rem; margin:.3rem 0 .9rem; font-size:15px; }
.quote.ok { background:#eef8f1; }
.quote.err { background:#fdecea; color:var(--err); }
.quote .qtotal { font-size:1.25rem; font-weight:800; font-family:var(--head); color:#17323d; }
.bookbtns { display:flex; gap:.5rem; flex-wrap:wrap; }
.bookbtns .btn { flex:1 1 160px; }
.rich { line-height:1.7; }
.rich ul { padding-left:1.2rem; }
.rich li { margin:.2rem 0; }
.rich h2, .rich h3 { margin:1.4rem 0 .5rem; }
.desc { margin-top:.5rem; }

/* forms */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea {
  display:block; width:100%; margin-top:.3rem; padding:.7rem .75rem; font:inherit; font-size:16px; color:inherit;
  border:1px solid #c9d3d9; border-radius:10px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:3px solid #bfe3ec; border-color:var(--teal); }
.form label { display:block; font-weight:600; margin-bottom:.9rem; }
.form label small { font-weight:400; }
.form fieldset { border:0; padding:0; margin:0 0 1rem; }
.form legend { font-family:var(--head); font-weight:800; font-size:1.15rem; color:#17323d; margin-bottom:.5rem; }
.two { display:grid; grid-template-columns:1fr; gap:0 .8rem; }
@media (min-width:600px) { .two { grid-template-columns:1fr 1fr; } }
label.radio { display:flex; align-items:center; gap:.5rem; font-weight:500; margin-bottom:.5rem; }
label.radio input { width:20px; height:20px; margin:0; flex:0 0 auto; }
.qty input { max-width:120px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* cart */
.cartlist { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cartrow { display:grid; grid-template-columns:64px 1fr auto; gap:.3rem .8rem; padding:.8rem; border-bottom:1px solid var(--line); align-items:start; }
.cartrow:last-child { border-bottom:0; }
.cartrow.has-error { background:#fff7f6; }
.cartimg img { width:64px; height:64px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.cartinfo a { color:inherit; text-decoration:none; }
.cartprice { font-weight:700; white-space:nowrap; }
.cartremove { grid-column:3; text-align:right; }
.carttotal { text-align:right; margin:1rem 0; font-size:1.1rem; }
.carttotal strong { font-size:1.35rem; font-family:var(--head); margin-left:.5rem; }
.cartactions { display:flex; gap:.6rem; justify-content:space-between; flex-wrap:wrap; align-items:center; }

/* checkout */
.checkout { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:900px) { .checkout { grid-template-columns:1.4fr 1fr; align-items:start; } .summary { position:sticky; top:150px; } }
.summary { background:var(--bg2); border-radius:var(--radius); padding:1rem 1.1rem; }
.summary h2 { margin-top:0; font-size:1.15rem; }
.sumrow { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--line); }
.sumrow > div:last-child { white-space:nowrap; text-align:right; font-weight:600; }
.sumrow.total { border-bottom:0; font-size:1.15rem; font-weight:800; font-family:var(--head); }
@media (max-width:899px) { .summary { order:-1; } }

.thanks { background:#eef8f1; border:1px solid #c9e8d3; border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem; }
.thanks h1 { margin-top:0; }

.contact { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px) { .contact { grid-template-columns:1fr 1.3fr; } }
.contact-list { list-style:none; padding:0; }
.contact-list li { padding:.6rem 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* footer */
.site-footer { background:#17323d; color:#cfe0e6; margin-top:2rem; padding:2rem 0 1rem; font-size:15px; }
.site-footer a { color:#fff; }
.site-footer strong { color:#fff; font-family:var(--head); display:block; margin-bottom:.4rem; }
.footer-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:720px) { .footer-grid { grid-template-columns:2fr 1fr 1fr; } }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:.25rem 0; }
.copyright { border-top:1px solid rgba(255,255,255,.12); margin-top:1.5rem; padding-top:1rem; font-size:13px; color:#9db6bf; }

.wa-float { position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:40; }
.wa-float:hover { background:#1eb257; }
.price .cheaper { display:block; font-size:12.5px; color:var(--muted); }

/* order page */
.details { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; }
.details dt { color:var(--muted); }
.details dd { margin:0; }
.thread { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.msg { max-width:85%; padding:.6rem .85rem; border-radius:12px; }
.msg-me { align-self:flex-end; background:var(--teal-l); }
.msg-them { align-self:flex-start; background:var(--bg2); border:1px solid var(--line); }
.msg-meta { font-size:12.5px; color:var(--muted); margin-bottom:.15rem; }

/* keranjang: ubah tanggal/qty */
.btn-sm { padding:.45rem .9rem; font-size:14px; }
.cartedit { margin-top:.4rem; }
.cartedit summary { cursor:pointer; color:var(--teal); font-size:14px; text-decoration:underline; }
.cartedit-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin:.5rem 0 .3rem; }
.cartedit-form label { display:flex; flex-direction:column; font-size:13px; gap:.15rem; }
.cartedit-form input { padding:.4rem .5rem; border:1px solid var(--line); border-radius:8px; font:inherit; max-width:160px; }
.cartedit-form input[type=number] { width:70px; }

/* checkout: lokasi */
.mapfield { margin-bottom:1rem; }
.mapbtns { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0; }