:root{
  --bg:#ffffff; --text:#0c0c0c; --text-2:#4d4d4d; --border:#e5e5e5; --grey:#f6f6f6;
  --radius:18px; --card-radius:12px; --button-radius:8px;
  --fab-size:48px; --in-card-offset:6px;
  --dot-hit:28px; --dot-size:6px;
  --ff-sans: InterVariable, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-base:14px; --lh-base:1.4;
  --blog-item-min-h:92px; --blog-rows:3; --blog-gap:10px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--grey); }
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:var(--ff-sans); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  color-scheme: light; accent-color: var(--text);
}
img{ display:block; max-width:100%; height:auto; }
a:focus-visible, button:focus-visible, .nav-item:focus-visible, .order-btn:focus-visible, .btn-wide:focus-visible{
  outline:2px solid var(--text); outline-offset:2px; border-radius:12px;
}
.ico{ width:20px; height:20px; display:inline-block; vertical-align:middle; }
.ico.lg{ width:24px; height:24px; }
.ico.arrow{ margin-left:.25rem; }
.ico-dark{ filter:brightness(0) saturate(100%); }

.main-wrapper{ max-width:420px; margin:0 auto; padding:18px 18px 8px; }
.bio-card{ background:var(--bg); border-radius:var(--radius); border:1px solid var(--border); padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); contain:layout paint style; }
.card-content{ padding:0; }

/* Slider */
.ig-slider{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--border); position:relative; margin-bottom:10px; overscroll-behavior-x:contain; }
.ig-track{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-snap-stop:always; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; scrollbar-gutter:stable both-edges; contain:content; backface-visibility:hidden; }
.ig-track::-webkit-scrollbar{ display:none; }
.ig-slide{ flex:0 0 100%; height:100%; position:relative; color:#fff; text-decoration:none; padding:14px 14px 30px; scroll-snap-align:start; overflow:hidden; }
.ig-slide .ig-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ig-slide .ig-overlay{ position:absolute; inset:0; background:var(--overlay, linear-gradient(24deg, rgba(0,0,0,.40), rgba(0,0,0,.18))); pointer-events:none; }
.ig-copy{ display:flex; flex-direction:column; gap:4px; justify-content:center; height:100%; max-width:92%; position:relative; z-index:1; }
.ig-eyebrow{ margin:0 0 2px; font-size:12px; letter-spacing:.02em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.78); }
.ig-title{ margin:0 0 6px; font-weight:800; line-height:1.06; font-size:clamp(18px,3.6vw,22px); color:#fff; }
.ig-pill{ margin-top:2px; display:inline-flex; align-items:center; gap:6px; width:max-content; border-radius:8px; padding:4px 8px; background:rgba(255,255,255,.94); color:#0b0b0b; font-weight:400; font-size:12px; border:1px solid rgba(0,0,0,.06); }

/* dots */
.ig-dots{ position:absolute; bottom:0; left:0; right:0; display:flex; gap:8px; justify-content:center; pointer-events:none; }
.ig-dots button{ pointer-events:auto; width:var(--dot-hit); height:var(--dot-hit); border:0; background:transparent; cursor:pointer; border-radius:999px; position:relative; }
.ig-dots button[aria-selected="true"]::before,
.ig-dots button::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--dot-size); height:var(--dot-size); border-radius:999px; background:#d7dbe0; transition:width .18s,height .18s,background .18s,border-radius .18s; }
.ig-dots button[aria-selected="true"]::before{ background:var(--text); width:14px; height:6px; border-radius:6px; }

/* Sosial */
.social-inline{ display:flex; gap:12px; margin:6px 0 18px; }
.social-inline a{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0c0c0c; color:#fff; text-decoration:none; }

/* Produk (border clean, no shadow) + skeleton */
.produk-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; contain:layout paint style; }
.product-card{ background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:100%; }
.product-img{ width:100%; aspect-ratio:1/1; background:#fafafa; }
.product-img img{ width:100%; height:100%; object-fit:cover; }
.product-content{ padding:8px; display:flex; flex-direction:column; gap:8px; }
.product-title{ margin:0; font-size:14px; font-weight:600; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.product-price{ color:var(--text); font-weight:500; font-size:13px; letter-spacing:.2px; }
.order-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 8px; border-radius:8px; background:#fff; color:#111; font-size:13px; font-weight:400; border:1px solid var(--border); text-decoration:none; }

/* CTA full width */
.cta-row{ display:flex; flex-direction:column; gap:10px; margin:8px 0 18px; }
.btn-wide{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:10px 12px; border-radius:10px; background:#fff; color:#111; font-weight:600; text-decoration:none; border:1px solid var(--border); }

/* skeleton anim (produk) */
.sk-box{ background:#f3f3f3; }
.sk-line,.sk-chip,.sk-btn{ border-radius:8px; background:linear-gradient(90deg,#ececec,#f6f6f6,#ececec); background-size:200% 100%; animation:sh 1.2s infinite; }
.sk-line{ height:18px; width:70%; margin-top:6px; }
.sk-chip{ height:16px; width:72px; }
.sk-btn{ height:28px; width:68px; border:1px solid var(--border); }
@keyframes sh{ 0%{background-position:-200px 0} 100%{background-position:200px 0} }

/* Blog mini */
.blog-mini{ min-height: calc(var(--blog-item-min-h) * var(--blog-rows) + var(--blog-gap) * (var(--blog-rows) - 1)); }
.blog-list{ display:flex; flex-direction:column; gap:var(--blog-gap); }
.blog-card{ background:#fff; border:1px solid var(--border); border-radius:14px; height:var(--blog-item-min-h); overflow:hidden; contain:layout paint style; }
.blog-link{ display:flex; align-items:center; gap:12px; padding:12px 14px; text-decoration:none; color:inherit; height:100%; }
.blog-ico{ flex:0 0 36px; width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--tone,#f5f5f5); }
.blog-ico .ico{ width:20px; height:20px; }
.blog-text{ display:flex; flex-direction:column; gap:4px; min-width:0; overflow:hidden; }
.blog-title{ font-size:14px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blog-excerpt{ font-size:12px; color:var(--text-2); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-height:calc(1.3em * 2); overflow-wrap:anywhere; }
.blog-card.tone-orange .blog-ico{ --tone:#fff6ef; } .blog-card.tone-green .blog-ico{ --tone:#f2fbf6; } .blog-card.tone-blue .blog-ico{ --tone:#f2f7ff; }

/* Bottom nav — diberi jarak biar gak mepet blok */
.in-card-nav{ position:sticky; bottom:var(--in-card-offset); z-index:1001; contain:layout paint; margin-top:14px; }
.in-card-nav .nav-content{ background:var(--bg); border:1px solid var(--border); border-radius:18px; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-flow:column; justify-items:center; align-items:center; gap:10px; padding:10px 12px; }
.nav-item{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); color:#555; text-decoration:none; }
.nav-item img{ width:24px; height:24px; display:block; }
.nav-item[aria-current="page"]{ background:#f9f9f9; }

@media (max-width:460px){
  .main-wrapper{ padding:0 0 12px; }
  .bio-card{ border-radius:0; padding:16px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .ig-slide{ padding:12px 12px 28px; }
}
@supports (padding: max(0px)){ .in-card-nav{ bottom:max(var(--in-card-offset),4px); } }
@media (prefers-reduced-motion: reduce){ .product-card, .order-btn, .ig-dots button::before{ transition:none; } }

/* Dark */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0b0b; --text:#f2f2f2; --text-2:#b3b3b3; --border:#262626; --grey:#111; }
  body{ color-scheme: dark; }
  .bio-card, .ig-slider, .product-card, .order-btn, .btn-wide, .in-card-nav .nav-content, .nav-item, .blog-card{ background:#141414; border-color:var(--border); }
  .ig-dots button::before{ background:#555; }
}