/* ====== Brand ====== */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #fff7f7;
  --text: #111827;
  --muted: #4b5563;
  --primary: #dc2626;
  --primary-2: #ef4444;
  --ring: rgba(220,38,38,.28);
  --radius: 16px;
  --green: #25D366;
  --blue: #0000FF;
  --orange: #FFA500;
--hamburger-color: var(--primary); 
  color-scheme: light;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { background: var(--bg); color: var(--text); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 92%); margin-inline: auto; }
.section { padding: 72px 0; position: relative; }
.section.white { background: #fff; color: var(--text); }
.section.red { background: var(--primary); color: #fff; }
.section .section-title { font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); margin: 0 0 24px; letter-spacing: -.02em; }
.section.red .section-title { color: #fff; }
.section.red a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
.lead { color: var(--muted); max-width: 62ch; }
.section.red .lead { color: #ffe2e2; }
.cluster { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: 1.1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; } }
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 12px 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 700; border: 0; cursor: pointer; box-shadow: 0 10px 25px -10px var(--ring); transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; border: 1px solid rgba(0,0,0,.12); color: var(--text); }
.section.red .btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--block { width: 100%; }
.btn--wa { background: var(--green); color: #fff; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--orange { background: var(--orange); color: #fff; }

.icon-btn { background: transparent; border: 1px solid rgba(0,0,0,.12); color: var(--text); padding: 8px; border-radius: 12px; cursor: pointer; }
.only-mobile { display: none; }
@media (max-width: 880px) { .only-mobile { display: inline-flex; } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(0,0,0,.06); transition: background .2s ease, color .2s ease; }
.site-header .nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; }
.brand-name { font-weight: 800; font-size: 1rem; color: var(--text); }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 600; }
.nav-links a:hover { color: var(--text); }
.site-header.scrolled { background: var(--primary); border-bottom-color: rgba(255,255,255,.25); }
.site-header.scrolled .brand-name, .site-header.scrolled .nav-links a { color: #fff; }
.site-header.scrolled .icon-btn { color: #fff; border-color: rgba(255,255,255,.5); }
.site-header.scrolled .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }

/* Mobile drawer */
.mobile-drawer { display: none; padding: 12px 4%; background: var(--surface); border-bottom: 1px solid rgba(0,0,0,.08); }
.mobile-drawer[hidden] { display: none !important; }
@media (max-width: 880px) { .mobile-drawer:not([hidden]) { display: grid; gap: 12px; } }
@media (max-width: 880px) { .nav-links { display: none; } }

/* Hero */
.hero { padding-top: 72px; }
.eyebrow { color: var(--primary); text-transform: uppercase; font-weight: 800; letter-spacing: .12em; font-size: .8rem; }
.hero h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); line-height: 1.15; margin: 10px 0 12px; }
.hero-visual { min-height: 320px; border-radius: 24px; background:#fff; border: 1px solid rgba(0,0,0,.08); display:grid; place-items:center; overflow:hidden; }
.hero-visual img{ width: 100%; height: auto; object-fit: cover; object-position: center; }

/* Hero Slider */
.hero-visual.slider { position: relative; border-radius: 24px; overflow: hidden; }
.slider .slides { position: relative; width: 100%; height: 100%; }
.slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.slider .slide.is-active { opacity: 1; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.9); color: #111; font-size: 22px; font-weight: 800; box-shadow: 0 10px 25px -10px rgba(0,0,0,.3); }
.slider-btn:hover { background: #fff; }
.slider-btn.prev { left: 12px; }
.slider-btn.next { right: 12px; }
.dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; z-index:2; }
.dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; }
.dots button[aria-selected="true"] { background: #dc2626; }

/* Cards */
.card { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding: 18px; }
.section.red .card { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.testimonial blockquote { margin: 0 0 8px; font-weight: 700; }
.testimonial figcaption { color: var(--muted); font-size: .95rem; }
.section.red .testimonial figcaption { color: #ffe2e2; }

/* Services */
.services { justify-content: center; justify-items: center; }
.services .svc-card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; display:grid; grid-template-rows: 180px auto; max-width: 360px; width: 100%; }
.services .svc-media{ background:#f3f4f6; display:grid; place-items:center; }
.services .svc-logo{ width:108px; height:auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.services .svc-body{ padding:16px; color:#111; } /* force black text */
.services .svc-body h3{ color:#111; }
.services .svc-body p{ color:#111; }
.services .note { color: #4b5563; font-size: .92rem; }

/* Feature banner full-bleed with overlay content */
.feature-banner {
  min-height: 260px;
  background-image: url('images/feature-bg-index_2list.jpg');
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  padding: 32px 0;
}
.feature-overlay { width: 100%; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: center; }
.feature-item { text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.feature-item h3 { margin: 8px 0 4px; font-size: 1.05rem; }
.feature-item p { margin: 0; font-size: .95rem; opacity: .95; }
.feat-ico { width: 80px; height: auto; margin-inline: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
@media (max-width: 720px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }

/* Packaging Guidance */
.pack-wrap{ display:grid; grid-template-columns: 1.4fr 1fr; gap:24px; align-items:start; }
.pack-canvas{ position:relative; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; }
.pack-img{ width:100%; height:auto; display:block; }
.hotspot{ position:absolute; display:grid; place-items:center; width:34px; height:34px; border-radius:999px; background:#ef4444; color:#fff; font-weight:800; border:0; cursor:pointer; box-shadow:0 10px 25px -10px rgba(0,0,0,.3); }
.hotspot:focus{ outline:3px solid var(--ring); }
/* approximate positions */
.hs1{ left:18%; top:28%; }
.hs2{ left:48%; top:28%; }
.hs3{ left:74%; top:16%; }
.hs4{ left:67%; top:66%; }
.hs5{ left:30%; top:70%; }
.hs6{ left:7%;  top:49%; }
.pack-panel{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:16px; }
.pack-video{ aspect-ratio:16/9; width:100%; background:#f3f4f6; border-radius:12px; overflow:hidden; display:grid; place-items:center; }
.pack-video iframe{ width:100%; height:100%; border:0; }
.pack-video--empty{ color:var(--muted); font-size:.95rem; }

/* Pricing */
.pricing { align-items: start; }
.price-card { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 20px; padding: 22px; position: relative; }
.price-card .price { font-size: 2rem; font-weight: 800; margin: 6px 0 10px; }
.price-card ul { margin: 0 0 16px; padding-left: 18px; color: var(--muted); }
.price-card li { margin: 6px 0; }
.price-card .badge { position: absolute; top: -12px; right: 16px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 800; font-size: .75rem; padding: 6px 10px; border-radius: 999px; }
.price-card.highlight { outline: 2px solid var(--ring); box-shadow: 0 15px 35px -15px var(--ring); transform: translateY(-2px); }

/* FAQ */
.accordion details { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.accordion summary { cursor: pointer; font-weight: 700; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }

/* Testimonials slider */
.testi-slider { position: relative; overflow: hidden; }
.testi-track { display: flex; transition: transform .45s ease; will-change: transform; }
.slide-item { min-width: 100%; padding: 18px; }
.testi-slider .slider-btn { background: rgba(255,255,255,.95); color: #111; }
.section.red .testi-slider .slider-btn { background: rgba(255,255,255,.92); }
#testiDots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 8px; }
#testiDots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.7); }
#testiDots button[aria-selected="true"] { background: #dc2626; }

/* Map */
.map-card { padding: 0; overflow: hidden; }
.map-embed { position: relative; padding-top: 56%; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Footer */
.site-footer { border-top: 1px solid rgba(0,0,0,.06); padding: 24px 0 40px; background:#fff; color:var(--text); }
.foot-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; }
.foot-links { display: flex; gap: 16px; }
.foot-brand { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; justify-items: start; } }

/* Animations & helpers */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; background: #111; color: #fff; padding: 8px 12px; border-radius: 8px; }
[data-animate] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].visible { opacity: 1; transform: none; }
[data-elevate].scrolled { box-shadow: 0 10px 30px -20px rgba(0,0,0,.35); }

/* Floating */
.float-btn { position: fixed; right: 18px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: #fff; box-shadow: 0 10px 25px -10px rgba(0,0,0,.4); z-index: 60; }
.float-btn.wa { bottom: 86px; background: #25D366; }
.float-btn.maps { bottom: 22px; background: #ea4335; }

/* Curves */
.curve { height: 64px; background-repeat: no-repeat; background-size: 100% 100%; }
.curve.w2r { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 0v46.29c-48.3 22.19-104.6 32.29-158 28.4-70-5.16-136-33.86-206-38.91-73-5.29-146 16.4-219 35.7S439 107.7 366 109.5c-86 2.06-172-18.5-258-46.29V0h1092z" fill="%23dc2626"/></svg>'); }
.curve.r2w { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0 0v46.29c48.3 22.19 104.6 32.29 158 28.4 70-5.16 136-33.86 206-38.91 73-5.29 146 16.4 219 35.7s178 36.12 251 37.92c86 2.06 172-18.5 258-46.29V0H0z" fill="%23ffffff"/></svg>'); }


/* === Custom: Make hero (#beranda) full-width === */
#beranda > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-left: clamp(12px, 4vw, 32px);
  padding-right: clamp(12px, 4vw, 32px);
}

/* === Partner full-width swipe rail === */
#partner > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-left: clamp(12px, 4vw, 32px);
  padding-right: clamp(12px, 4vw, 32px);
}
.partner-rail {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.partner-track {
  display: flex;
  gap: 28px;
  padding: 8px clamp(12px, 4vw, 32px) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: clamp(12px, 4vw, 32px);
}
.partner-track::-webkit-scrollbar { display: none; }
.partner-track { scrollbar-width: none; }
.partner-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  width: clamp(140px, 18vw, 240px);
  height: clamp(70px, 9vw, 110px);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px -18px rgba(0,0,0,.25);
}
.partner-item img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}
.partner-rail .slider-btn.prev { left: 8px; }
.partner-rail .slider-btn.next { right: 8px; }
@media (max-width: 760px){
  .partner-rail .slider-btn { display: none; } /* swipe only on small screens */
}


.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .faq-grid {
    grid-template-columns: 1fr; /* jadi 1 kolom di HP */
  }
}

    /* === PATCH: Floating Up FAB (mobile only) === */
    .float-btn.up{bottom:150px;background:#fff;color:var(--primary);border:2px solid var(--primary)}
    @media (min-width: 881px){ .float-btn.up{ display:none!important } }
    
    /* === PATCH: Backdrop for mobile menu === */
    .mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:saturate(120%) blur(2px);z-index:48}
    .mobile-backdrop[hidden]{display:none!important}
    
    /* === PATCH: Compact mobile drawer === */
    @media (max-width: 880px){ .mobile-drawer{position:fixed;left:12px;right:12px;top:88px;max-height:60vh;overflow:auto;padding:12px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.24);z-index:49} .mobile-drawer[hidden]{display:none!important} .mobile-drawer a{display:block;padding:10px 12px;border-radius:12px;font-weight:800;color:var(--primary);background:#fff;border:1px solid rgba(220,38,38,.18)} .mobile-drawer a:hover{background:#fff1f2} }
    


/* === FIX: hamburger tetap terlihat saat scroll === */
#menuToggle{ color: var(--primary); }

/* paksa ikon berupa garis (bukan fill), selalu ikut color di atas */
#menuToggle svg,
#menuToggle svg path,
#menuToggle svg line {
  display:block;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  fill: none !important;
}

/* saat header sticky/scrolled apapun namanya, tetap merah */
.site-header.scrolled #menuToggle,
.site-header.is-sticky #menuToggle,
.header.scrolled #menuToggle,
.header.is-sticky #menuToggle {
  color: var(--primary) !important;
}

/* netralkan efek filter/opacity yang kadang dipasang saat scroll */
.site-header.scrolled #menuToggle svg,
.site-header.is-sticky #menuToggle svg,
.header.scrolled #menuToggle svg,
.header.is-sticky #menuToggle svg {
  filter: none !important;
  opacity: 1 !important;
}



/* Paksa warna & background tombol (apapun state header-nya) */
button#menuToggle,
.site-header button#menuToggle,
.header button#menuToggle,
[class*="head"] button#menuToggle {
  color: var(--hamburger-color) !important;
  background: #fff !important;            /* biar kontras */
  border-color: rgba(0,0,0,.08) !important;
}

/* Pastikan ikon berupa GARIS (stroke), bukan fill */
button#menuToggle svg,
button#menuToggle svg path,
button#menuToggle svg line,
button#menuToggle svg rect,
.site-header button#menuToggle svg,
.header button#menuToggle svg {
  display: block !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  fill: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Jika tema menyembunyikan ikon saat scrolled/sticky, netralkan */
.site-header.scrolled button#menuToggle,
.site-header.is-sticky button#menuToggle,
.header.scrolled button#menuToggle,
.header.is-sticky button#menuToggle,
[class*="scrol"] button#menuToggle,
[class*="stick"] button#menuToggle {
  color: var(--hamburger-color) !important;
}