/* assets/css/style.css */
:root {
  --blue:       #1A56DB;
  --blue-dark:  #1344B8;
  --blue-light: #EBF1FF;
  --blue-mid:   #DBEAFE;
  --green:      #059669;
  --bg:         #F8F9FC;
  --bg-white:   #FFFFFF;
  --border:     #E5E9F2;
  --border-mid: #D0D7E8;
  --text:       #0F172A;
  --text-2:     #334155;
  --text-3:     #64748B;
  --text-4:     #94A3B8;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 16px 48px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --radius: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ── TOPBAR ── */
.topbar { background: var(--blue); color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 500; padding: 8px 0; }
.topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-divider { opacity: .4; margin: 0 8px; }

/* ── NAVBAR ── */
.main-navbar { background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 999; box-shadow: var(--shadow-sm); }
.navbar-inner { display: flex; align-items: stretch; height: 64px; }
.navbar-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; padding-right: 28px; border-right: 1px solid var(--border); margin-right: 8px; }
.brand-mark { width: 36px; height: 36px; background: var(--blue); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.brand-sub  { font-size: .67rem; color: var(--text-3); display: block; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.nav-links  { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link-item { display: flex; align-items: center; height: 100%; padding: 0 15px; font-size: .875rem; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.nav-link-item:hover, .nav-link-item.active { color: var(--blue); border-bottom-color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 8px; background: var(--blue); color: #fff !important; font-size: .875rem; font-weight: 600; padding: 9px 20px; border-radius: 8px; text-decoration: none; transition: background .15s; margin-left: auto; flex-shrink: 0; align-self: center; }
.nav-cta:hover { background: var(--blue-dark); }
.mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; margin-left: auto; align-self: center; padding: 4px 8px; }
@media(max-width:991px) {
  .mobile-menu-btn { display: flex; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 12px 20px; gap: 4px; z-index: 998; box-shadow: var(--shadow-md); }
  .nav-links.open .nav-link-item { height: auto; padding: 10px 0; border-bottom: none; }
  .nav-links.open .nav-cta { width: 100%; justify-content: center; margin-top: 8px; margin-left: 0; }
}

/* ── BUTTONS ── */
.btn-solid { background: var(--blue); color: #fff; border: none; padding: 12px 26px; border-radius: 8px; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, box-shadow .15s; box-shadow: 0 2px 8px rgba(26,86,219,.25); cursor: pointer; }
.btn-solid:hover { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 16px rgba(26,86,219,.35); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-mid); padding: 12px 26px; border-radius: 8px; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; cursor: pointer; }
.btn-ghost:hover { background: var(--bg); color: var(--blue); border-color: var(--blue); }

/* ── SECTION SHARED ── */
.section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); margin-bottom: 10px; }
.section-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--text); letter-spacing: -1px; line-height: 1.2; }
.section-desc  { font-size: .95rem; color: var(--text-3); line-height: 1.7; max-width: 520px; }

/* ── HERO ── */
.hero { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 80px 0 0; overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; opacity: .5; pointer-events: none; }
.hero::after  { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, var(--bg-white) 100%); pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-light); color: var(--blue); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 14px; border-radius: 4px; border: 1px solid rgba(26,86,219,.15); margin-bottom: 24px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; color: var(--text); line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--blue); }
.hero-desc    { font-size: 1.05rem; color: var(--text-3); line-height: 1.75; max-width: 480px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-trust   { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.trust-item   { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-3); font-weight: 500; }
.trust-item i { color: var(--green); }

/* hero visual */
.hero-visual { position: relative; padding-bottom: 60px; }
.hcard { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.hcard-back  { position: absolute; width: 90%; bottom: -22px; left: 50%; transform: translateX(-50%); z-index: 1; opacity: .5; }
.hcard-back2 { position: absolute; width: 82%; bottom: -40px; left: 50%; transform: translateX(-50%); z-index: 0; opacity: .25; }
.hcard-main  { position: relative; z-index: 3; }
.hcard-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dr { background: #FF5F57; } .dy { background: #FFBD2E; } .dg { background: #27C840; }
.hcard-url { flex: 1; background: var(--bg-white); border: 1px solid var(--border); border-radius: 5px; font-size: .7rem; color: var(--text-3); padding: 3px 10px; margin: 0 8px; }
.hcard img  { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.stat-chip  { position: absolute; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; z-index: 10; }
.sc-icon    { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.sc-blue  { background: var(--blue-light); color: var(--blue); }
.sc-green { background: #ECFDF5; color: var(--green); }
.sc-val   { font-weight: 700; font-size: .95rem; color: var(--text); line-height: 1.1; }
.sc-lbl   { font-size: .7rem; color: var(--text-3); }
.chip-1 { bottom: 80px; left: -30px; }
.chip-2 { top: 30px; right: -24px; }
@media(max-width:767px) { .chip-1, .chip-2 { display: none; } .hero { padding: 60px 0 0; } }

/* ── STATS BAR ── */
.stats-bar { background: var(--bg-white); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); padding: 32px 0; }
.stat-col  { text-align: center; padding: 0 16px; border-right: 1px solid var(--border); }
.stat-col:last-child { border-right: none; }
.stat-number { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--text); letter-spacing: -1px; }
.stat-unit   { font-size: 1.2rem; color: var(--blue); }
.stat-lbl    { font-size: .8rem; color: var(--text-3); margin-top: 2px; font-weight: 500; }

/* ── FEATURE CARDS ── */
.why-section { padding: 80px 0; background: var(--bg-white); border-bottom: 1px solid var(--border); }
.feat-card  { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; background: var(--bg-white); height: 100%; transition: border-color .2s, box-shadow .2s, transform .2s; }
.feat-card:hover { border-color: rgba(26,86,219,.3); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feat-icon  { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 18px; }
.fi-blue  { background: var(--blue-light); color: var(--blue); }
.fi-green { background: #ECFDF5; color: var(--green); }
.fi-sky   { background: #E0F2FE; color: #0284C7; }
.fi-amber { background: #FFFBEB; color: #D97706; }
.feat-title { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 7px; }
.feat-desc  { font-size: .845rem; color: var(--text-3); line-height: 1.65; }

/* ── PRODUCT CARDS ── */
.products-section { padding: 80px 0; }
.filter-tabs { display: flex; gap: 4px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 4px; width: fit-content; flex-wrap: wrap; }
.ftab { padding: 7px 16px; border-radius: 7px; font-size: .83rem; font-weight: 600; color: var(--text-3); cursor: pointer; border: none; background: transparent; transition: all .15s; font-family: var(--font-body); }
.ftab.active, .ftab:hover { background: var(--blue); color: #fff; }
.pcard { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .25s; }
.pcard:hover { border-color: rgba(26,86,219,.3); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.pcard-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-badge { position: absolute; top: 10px; left: 10px; background: var(--blue); color: #fff; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 4px; }
.pcard-highlight { position: absolute; top: 10px; left: 10px; background: #D97706; color: #fff; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 4px; }
.pcard-type { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: var(--text-2); font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--border); }
.pcard-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.pcard-title { font-family: var(--font-display); font-size: .975rem; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 12px; }
.pcard-features { list-style: none; padding: 0; margin: 0 0 18px; }
.pcard-features li { font-size: .78rem; color: var(--text-3); padding: 3px 0; display: flex; gap: 7px; align-items: flex-start; }
.pcard-features li::before { content: ''; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.pcard-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-price-lbl { font-size: .68rem; color: var(--text-4); font-weight: 500; }
.pcard-price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: -.5px; }
.btn-detail-sm { background: var(--blue-light); color: var(--blue); border: 1px solid rgba(26,86,219,.2); padding: 7px 14px; border-radius: 7px; font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
.btn-detail-sm:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-demo-sm { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--text-3); text-decoration: none; border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px; transition: all .15s; }
.btn-demo-sm:hover { color: var(--blue); border-color: var(--blue); }

/* ── HIGHLIGHT CARD (di homepage) ── */
.pcard.is-highlight { border-color: #D97706; border-width: 2px; }
.pcard.is-highlight:hover { border-color: #B45309; }

/* ── CUSTOM CTA ── */
.custom-section { padding: 80px 0; background: var(--bg-white); border-top: 1px solid var(--border); }
.cta-panel { background: var(--blue); border-radius: 20px; padding: 60px 56px; position: relative; overflow: hidden; }
.cta-panel::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.cta-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.cta-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.2; margin-bottom: 14px; }
.cta-desc  { font-size: .95rem; color: rgba(255,255,255,.75); line-height: 1.7; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tech-tag  { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 5px; }
.cta-checklist .cta-check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .875rem; color: rgba(255,255,255,.85); }
.cta-check i { color: #34D399; font-size: 1rem; flex-shrink: 0; }
.btn-wa { background: #25D366; color: #fff; border: none; padding: 14px 30px; border-radius: 10px; font-weight: 700; font-size: .95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: background .2s, transform .2s; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.btn-wa:hover { background: #1EBF5A; color: #fff; transform: translateY(-2px); }
@media(max-width:767px) { .cta-panel { padding: 36px 24px; } }

/* ── HOW TO BUY ── */
.how-section { padding: 80px 0; background: var(--bg); border-top: 1px solid var(--border); }
.step-row { display: flex; gap: 0; position: relative; }
.step-row::before { content: ''; position: absolute; top: 28px; left: calc(12.5% + 8px); right: calc(12.5% + 8px); height: 1px; background: var(--border-mid); z-index: 0; }
.step-item { flex: 1; text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.step-bubble { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-white); border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.1rem; color: var(--blue); box-shadow: 0 0 0 6px var(--bg); }
.step-title { font-weight: 700; font-size: .9rem; color: var(--text); margin-bottom: 6px; }
.step-desc  { font-size: .8rem; color: var(--text-3); line-height: 1.6; }
@media(max-width:767px) {
  .step-row { flex-direction: column; gap: 24px; }
  .step-row::before { display: none; }
  .step-item { text-align: left; display: flex; align-items: flex-start; gap: 16px; padding: 0; }
  .step-bubble { margin: 0; flex-shrink: 0; }
}

/* ── FOOTER ── */
footer { background: var(--bg-white); border-top: 1px solid var(--border); padding: 56px 0 24px; }
.footer-brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.footer-tagline { font-size: .82rem; color: var(--text-3); margin-top: 6px; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .95rem; text-decoration: none; transition: all .15s; }
.footer-social a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.footer-heading { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 14px; }
.footer-link { display: block; font-size: .845rem; color: var(--text-3); text-decoration: none; padding: 4px 0; transition: color .15s; }
.footer-link:hover { color: var(--blue); }
.footer-contact { font-size: .845rem; color: var(--text-3); display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.footer-contact i { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.footer-contact a { color: var(--text-3); text-decoration: none; }
.footer-contact a:hover { color: var(--blue); }
.footer-hr { border-color: var(--border); margin: 32px 0 20px; }
.footer-copy { font-size: .78rem; color: var(--text-4); }

/* ── DETAIL PAGE ── */
.detail-hero { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 48px 0; }
.breadcrumb-custom { font-size: .8rem; color: var(--text-3); margin-bottom: 20px; }
.breadcrumb-custom a { color: var(--text-3); text-decoration: none; }
.breadcrumb-custom a:hover { color: var(--blue); }
.breadcrumb-sep { margin: 0 8px; opacity: .5; }
.detail-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--text); letter-spacing: -1px; line-height: 1.2; }
.detail-price-lbl { font-size: .75rem; color: var(--text-4); margin-bottom: 4px; }
.detail-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -1px; }
.detail-cat-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-light); color: var(--blue); border: 1px solid rgba(26,86,219,.2); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.detail-feats { list-style: none; padding: 0; }
.detail-feats li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: .9rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.detail-feats li:last-child { border-bottom: none; }
.detail-feats li i { color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* Gallery / Lightbox */
.gallery-main { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; background: var(--bg); cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-main:hover img { transform: scale(1.02); }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gthumb { width: 72px; height: 52px; border-radius: 7px; overflow: hidden; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; transition: border-color .15s; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gthumb.active, .gthumb:hover { border-color: var(--blue); }

/* Lightbox */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.lightbox-overlay.open { display: flex; }
.lightbox-inner { position: relative; max-width: 1000px; width: 100%; }
.lightbox-img { width: 100%; border-radius: 10px; display: block; max-height: 80vh; object-fit: contain; }
.lightbox-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; background: #fff; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text); transition: background .15s; z-index: 1; }
.lightbox-close:hover { background: var(--border); }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 8px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: background .15s; }
.lightbox-prev { left: -54px; }
.lightbox-next { right: -54px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
@media(max-width:767px) { .lightbox-prev { left: 4px; } .lightbox-next { right: 4px; } }
.lightbox-counter { text-align: center; color: rgba(255,255,255,.6); font-size: .8rem; margin-top: 12px; }

/* Sticky sidebar */
.sticky-sidebar { position: sticky; top: 80px; }
.sidebar-box { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.sidebar-box + .sidebar-box { margin-top: 16px; }

/* ── FADE UP ── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

/* ── PAGE HEADER (katalog dll) ── */
.page-header { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 40px 0; }
.page-header h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text); letter-spacing: -1px; }