:root {
  --pink:#ed1767;
  --pink2:#ff4f9a;
  --blue:#087bc1;
  --blue2:#19b8ec;
  --yellow:#ffd52f;
  --cream:#fffaf4;
  --dark:#102a43;
  --muted:#557086;
  --white:#fff;
  --shadow:0 14px 35px rgba(16,42,67,.12);
}
* { box-sizing:border-box; }
html, body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body {
  overscroll-behavior-x:none;
}
img, video, iframe, svg {
  max-width:100%;
}

html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color:var(--dark);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,213,47,.16) 0 45px, transparent 46px),
    radial-gradient(circle at 90% 30%, rgba(25,184,236,.13) 0 55px, transparent 56px),
    var(--cream);
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* Header */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:50; width:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(8,123,193,.12);
}
.header-inner {
  max-width:1180px; margin:auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo {
  font-size:clamp(25px,4vw,36px); font-weight:1000; letter-spacing:-2px;
  color:var(--pink);
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(8,123,193,.12);
}
.logo span { color:var(--blue); }
.nav { display:flex; gap:8px; align-items:center; }
.nav a {
  padding:10px 14px; border-radius:999px; font-weight:800; color:#204b68;
}
.nav a:hover { background:#fff1f7; color:var(--pink); }
.menu-btn {
  display:none; border:0; background:var(--pink); color:#fff;
  width:44px; height:44px; border-radius:13px; cursor:pointer;
}
.menu-btn span { display:block; width:21px; height:2px; background:#fff; margin:5px auto; border-radius:2px; }

/* White scalloped wave — seperti referensi, solid dan lembut */
.site-header::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-17px;
  height:20px;
  background:
    radial-gradient(30px 18px at 30px 0, #fff 98%, transparent 100%) repeat-x;
  background-size:60px 20px;
  pointer-events:none;
}

/* Slider kembali normal — tanpa wave di bawah slider */
.hero { position:relative; }
body { padding-top:78px; }
@media (max-width:680px){
  body{padding-top:68px;}
  .site-header::after{bottom:-14px;height:17px;background-size:52px 17px;}
}

/* Hero */
.hero { position:relative; overflow:hidden; background:#9fe8ff; }
.slider { position:relative; width:100%; aspect-ratio:2/1; min-height:300px; max-height:760px; overflow:hidden; }
.slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .65s ease, transform .65s ease;
  transform:scale(1.025);
}
.slide.active { opacity:1; visibility:visible; transform:scale(1); }
.slide > img { width:100%; height:100%; object-fit:cover; }
.slide-overlay {
  position:absolute; left:5%; bottom:9%; max-width:440px;
  padding:20px 22px; border-radius:24px;
  background:rgba(255,255,255,.86); box-shadow:var(--shadow);
}
.slide-overlay h2 { margin:7px 0 5px; font-size:clamp(24px,4vw,44px); color:var(--pink); line-height:1.03; }
.slide-overlay p { margin:0 0 14px; font-weight:800; color:var(--blue); }
.overlay-badge {
  display:inline-block; padding:6px 11px; border-radius:999px;
  background:var(--yellow); font-weight:900;
}
.cta {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff; padding:12px 18px; border-radius:999px; font-weight:900;
  box-shadow:0 7px 18px rgba(237,23,103,.25);
}
.cta:hover { transform:translateY(-2px); }
.arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--blue); font-size:30px;
  cursor:pointer; box-shadow:var(--shadow);
}
.prev { left:18px; } .next { right:18px; }
.dots {
  position:absolute; z-index:6; bottom:17px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.dot { width:11px; height:11px; padding:0; border:0; border-radius:50%; background:#fff; opacity:.65; cursor:pointer; }
.dot.active { width:30px; border-radius:999px; background:var(--pink); opacity:1; }

/* Main */
.section { max-width:1180px; margin:auto; padding:72px 18px; }
.section-head { text-align:center; max-width:760px; margin:0 auto 34px; }
.kicker {
  color:var(--pink); font-weight:1000; text-transform:uppercase;
  letter-spacing:1px; font-size:13px;
}
h1,h2,h3 { letter-spacing:-.6px; }
.section-head h2 { margin:8px 0; font-size:clamp(30px,5vw,46px); color:var(--blue); }
.section-head p { color:var(--muted); line-height:1.7; font-weight:600; }
.cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.card {
  padding:25px 20px; background:#fff; border-radius:24px; text-align:center;
  box-shadow:var(--shadow); border:1px solid rgba(8,123,193,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform:translateY(-7px); box-shadow:0 18px 45px rgba(16,42,67,.16); }
.icon {
  width:62px; height:62px; display:grid; place-items:center; margin:auto;
  border-radius:20px; background:linear-gradient(135deg,#ffe45c,#ffb52e);
  font-size:30px;
}
.card h3 { margin:14px 0 7px; color:var(--pink); }
.card p { margin:0; color:var(--muted); line-height:1.55; font-size:14px; }

.price-wrap {
  background:linear-gradient(135deg,#fff1f7,#eafaff);
  border-radius:34px; padding:45px 25px; text-align:center;
  border:2px dashed rgba(237,23,103,.25);
}
.price { font-size:clamp(40px,7vw,68px); font-weight:1000; color:var(--pink); margin:5px 0; }
.price small { font-size:18px; color:var(--blue); }
.price-note { font-weight:800; color:var(--muted); margin-bottom:22px; }

.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature {
  display:flex; gap:14px; align-items:flex-start; background:#fff;
  padding:20px; border-radius:20px; box-shadow:var(--shadow);
}
.feature b { color:var(--blue); } .feature p { margin:5px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.check {
  flex:0 0 40px; width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center; background:#e9fbff; font-size:20px;
}
.area {
  background:linear-gradient(135deg,var(--blue),#07578d); color:#fff;
  border-radius:34px; padding:44px 25px; text-align:center; box-shadow:var(--shadow);
}
.area h2 { font-size:clamp(30px,5vw,44px); margin:0 0 12px; }
.area p { max-width:720px; margin:0 auto 22px; line-height:1.7; opacity:.92; }
.area-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.area-list span {
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  padding:10px 15px; border-radius:999px; font-weight:900;
}
.final-cta {
  text-align:center; padding:76px 18px;
  background:linear-gradient(135deg,#fff4b8,#ffdbe9);
}
.final-cta h2 { font-size:clamp(30px,6vw,52px); color:var(--pink); margin:0 0 10px; }
.final-cta p { color:#405a70; font-weight:700; margin:0 0 22px; }


/* Elegant SEO article / contact section */
.seo-info {
  padding:58px 18px 62px;
  background:linear-gradient(135deg,#fff8df 0%,#fff0f7 52%,#eefaff 100%);
}
.seo-info-inner {
  max-width:1080px; margin:0 auto; text-align:center;
  background:rgba(255,255,255,.82); border:1px solid rgba(237,23,103,.12);
  border-radius:32px; padding:34px 28px 38px;
  box-shadow:0 18px 50px rgba(16,42,67,.10);
  position:relative; overflow:hidden;
}
.seo-info-inner::before,.seo-info-inner::after {
  content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(25,184,236,.10); pointer-events:none;
}
.seo-info-inner::before { left:-75px; top:-80px; }
.seo-info-inner::after { right:-75px; bottom:-90px; background:rgba(237,23,103,.08); }
.seo-kicker {
  display:inline-block; padding:7px 15px; border-radius:999px;
  background:linear-gradient(135deg,#087bc1,#19b8ec); color:#fff;
  font:800 12px/1 Poppins,sans-serif; letter-spacing:.5px;
  box-shadow:0 7px 16px rgba(8,123,193,.18);
}
.seo-info h2 {
  margin:14px auto 10px; max-width:760px;
  color:var(--pink); font-family:Poppins,sans-serif; font-style:normal; font-weight:800;
  font-size:clamp(21px,3.2vw,30px); line-height:1.15; letter-spacing:-.5px;
}
.seo-lead { max-width:790px; margin:0 auto 22px; color:#405a70; font:600 14px/1.65 Poppins,sans-serif; }
.seo-shapes {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  text-align:left; margin:20px auto;
}
.seo-shape {
  display:flex; gap:14px; align-items:flex-start; padding:18px;
  border-radius:24px; background:#fff; border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(16,42,67,.08);
}
.seo-shape:first-child { background:linear-gradient(135deg,#fff9dd,#fff); }
.seo-shape:last-child { background:linear-gradient(135deg,#fff0f8,#fff); }
.seo-shape-icon {
  flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:16px; background:linear-gradient(135deg,#ff3b8d,#ff74ae);
  font-size:25px; box-shadow:0 7px 16px rgba(237,23,103,.18);
}
.seo-shape h3 { margin:1px 0 5px; color:#0870b6; font:800 17px/1.2 Poppins,sans-serif; }
.seo-shape p { margin:0; color:#557086; font:500 12.5px/1.55 Poppins,sans-serif; }
.seo-bottom { max-width:820px; margin:16px auto 20px; color:#405a70; font:500 13px/1.65 Poppins,sans-serif; }
.seo-cta { display:inline-flex; }
@media (max-width:680px) {
  .seo-info { padding:42px 12px 46px; }
  .seo-info-inner { padding:26px 14px 28px; border-radius:24px; }
  .seo-info h2 { font-size:20px; }
  .seo-lead { font-size:12.5px; }
  .seo-shapes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .seo-shape { display:block; padding:12px 10px; border-radius:18px; }
  .seo-shape-icon { width:38px; height:38px; font-size:20px; border-radius:12px; margin-bottom:8px; }
  .seo-shape h3 { font-size:13px; }
  .seo-shape p { font-size:10.5px; line-height:1.45; }
  .seo-bottom { font-size:11.5px; }
  .seo-cta { font-size:12px; padding:11px 15px; }
}

/* Footer */
footer { background:#092b45; color:#fff; }
.footer-grid {
  max-width:1180px; margin:auto; padding:52px 18px 30px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;
}
footer h3 { color:#ffd83d; margin-top:0; }
footer p, footer li { color:rgba(255,255,255,.76); line-height:1.7; }
footer ul { list-style:none; padding:0; margin:0; }
footer li { margin:7px 0; }
.footer-logo { font-size:34px; font-weight:1000; color:#ff4b96; }
.footer-logo span { color:#2bc1f1; }
.copy { text-align:center; border-top:1px solid rgba(255,255,255,.1); padding:18px; color:rgba(255,255,255,.65); font-size:13px; }

/* Floating WA */
.wa {
  position:fixed; right:18px; bottom:18px; z-index:60;
  background:#20c863; color:#fff; border-radius:999px; padding:13px 18px;
  font-weight:1000; box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.wa:hover { transform:translateY(-3px); }

@media (max-width:900px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .features { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .header-inner { padding:10px 14px; }
  .menu-btn { display:block; }
  .nav {
    display:none; position:absolute; top:66px; left:12px; right:12px;
    background:#fff; padding:10px; border-radius:18px; box-shadow:var(--shadow);
    flex-direction:column; align-items:stretch;
  }
  .nav.open { display:flex; }
  .nav a { text-align:center; }
  .slider { aspect-ratio:1/1.1; min-height:440px; }
  .slide > img { object-position:center; }
  .slide-overlay {
    left:14px; right:14px; bottom:42px; max-width:none; padding:15px;
    background:rgba(255,255,255,.9);
  }
  .slide-overlay h2 { font-size:26px; }
  .slide-overlay p { font-size:13px; }
  .arrow { width:40px; height:40px; font-size:24px; }
  .prev { left:10px; } .next { right:10px; }
  .section { padding:52px 15px; }
  .cards, .features, .footer-grid { grid-template-columns:1fr; }
  .price-wrap, .area { padding:34px 18px; }
  .wa { right:12px; bottom:12px; padding:12px 15px; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ===== PREMIUM VISUAL UPDATE ===== */
.site-header {
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(8,123,193,.10);
}
.header-inner { min-height:78px; }
.logo {
  display:flex; align-items:center; width:min(205px,48vw); height:58px;
  font-size:0; text-shadow:none;
}
.logo img { width:100%; height:100%; object-fit:contain; object-position:left center; }

.menu-btn {
  display:flex; align-items:center; gap:10px; justify-content:center;
  width:auto; min-width:102px; height:48px; padding:7px 13px 7px 8px;
  border-radius:18px; background:#fff; color:var(--dark);
  border:1px solid rgba(8,123,193,.12); box-shadow:0 8px 24px rgba(16,42,67,.10);
  cursor:pointer; transition:.25s ease;
}
.menu-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(16,42,67,.15); }
.menu-btn b { font-size:11px; letter-spacing:1.4px; }
.menu-orb {
  width:34px; height:34px; display:grid; place-content:center; gap:4px;
  border-radius:12px; background:linear-gradient(135deg,var(--pink),#ff79ae);
}
.menu-orb i { display:block; width:16px; height:2px; background:#fff; border-radius:4px; transition:.3s; }
.menu-btn.open .menu-orb i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-btn.open .menu-orb i:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-btn.open .menu-orb i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.nav {
  position:fixed; z-index:80; top:0; right:0; bottom:0;
  width:min(390px,92vw); height:100vh; padding:24px;
  background:linear-gradient(160deg,#fff 0%,#fff8fb 55%,#eefaff 100%);
  box-shadow:-20px 0 60px rgba(8,44,69,.20);
  display:flex; flex-direction:column; gap:10px;
  transform:translateX(105%); visibility:hidden; opacity:0;
  transition:transform .38s cubic-bezier(.22,.8,.24,1), opacity .25s ease, visibility .38s;
}
.nav.open { transform:translateX(0); visibility:visible; opacity:1; }
.menu-backdrop {
  position:fixed; z-index:70; inset:0; background:rgba(8,31,48,.38);
  backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.3s ease;
}
.menu-backdrop.open { opacity:1; visibility:visible; }
.nav-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 3px 18px; border-bottom:1px solid rgba(8,123,193,.10);
  margin-bottom:6px; color:var(--muted); font-weight:900;
}
.menu-close {
  border:0; background:#fff; width:40px; height:40px; border-radius:50%;
  box-shadow:0 6px 18px rgba(16,42,67,.10); font-size:27px; line-height:1;
  color:var(--blue); cursor:pointer;
}
.nav > a {
  display:grid; grid-template-columns:42px 1fr 25px; align-items:center; gap:12px;
  padding:17px 14px; border-radius:18px; color:var(--dark);
  background:rgba(255,255,255,.70); border:1px solid transparent;
  transition:.25s ease;
}
.nav > a:hover { transform:translateX(-4px); border-color:rgba(237,23,103,.13); background:#fff; }
.nav > a span { color:var(--pink); font-size:12px; font-weight:1000; }
.nav > a b { font-size:16px; }
.nav > a em { font-style:normal; color:var(--blue); font-size:19px; }
.nav .nav-wa {
  margin-top:auto; color:#fff; background:linear-gradient(135deg,#18b85a,#0a9d49);
  box-shadow:0 12px 28px rgba(24,184,90,.22);
}
.nav .nav-wa span { color:#fff; font-size:19px; }
.nav .nav-wa em { color:#fff; }

/* More elegant service grid */
.cards {
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}
.card {
  position:relative; overflow:hidden; min-height:235px;
  padding:30px 25px; text-align:left; border-radius:28px;
  border:1px solid rgba(8,123,193,.09);
  background:linear-gradient(145deg,#fff 0%,#fff 72%,#f4fbff 100%);
}
.card::after {
  content:""; position:absolute; width:105px; height:105px; right:-35px; bottom:-40px;
  border-radius:50%; background:rgba(255,213,47,.16);
}
.card:nth-child(2n)::after { background:rgba(237,23,103,.10); }
.card:nth-child(3n)::after { background:rgba(25,184,236,.12); }
.card:hover { transform:translateY(-8px); }
.icon {
  width:58px; height:58px; margin:0; border-radius:18px;
  box-shadow:0 8px 20px rgba(16,42,67,.08);
}
.card h3 { font-size:20px; margin:18px 0 8px; }
.card p { max-width:270px; }
.section-head { margin-bottom:42px; }
.section-head h2 { letter-spacing:-1.2px; }
.features { gap:20px; }
.feature {
  border:1px solid rgba(8,123,193,.08);
  border-radius:24px; padding:22px;
}
.price-wrap { position:relative; overflow:hidden; }
.price-wrap::before, .price-wrap::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.price-wrap::before { width:180px; height:180px; left:-90px; top:-90px; background:rgba(255,213,47,.18); }
.price-wrap::after { width:230px; height:230px; right:-115px; bottom:-120px; background:rgba(25,184,236,.12); }
@media (max-width:900px) {
  .cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .header-inner { min-height:70px; }
  .logo { width:174px; height:52px; }
  .menu-btn { min-width:92px; height:45px; }
  .cards { grid-template-columns:1fr; gap:16px; }
  .card { min-height:205px; }
}

/* ===== FINAL REQUESTED REFINEMENTS ===== */
body { font-family:"Poppins","Segoe UI",Arial,sans-serif; }
.menu-btn { min-width:50px !important; width:50px !important; height:50px !important; padding:8px !important; border-radius:16px !important; }
.menu-btn b { display:none !important; }
.menu-orb { width:34px; height:34px; }
.slider { background:#fff; }
.slide > img { width:100%; height:100%; object-fit:cover; }
.slide-overlay, .arrow { display:none !important; }

/* Premium footer */
footer { position:relative; overflow:hidden; background:
  radial-gradient(circle at 8% 20%, rgba(255,213,47,.12) 0 70px, transparent 71px),
  radial-gradient(circle at 92% 10%, rgba(25,184,236,.12) 0 90px, transparent 91px),
  linear-gradient(145deg,#08263d 0%,#0b3855 52%,#07263b 100%);
}
footer::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);
}
.footer-grid { position:relative; padding:65px 18px 42px; grid-template-columns:1.6fr 1fr 1fr 1.15fr; gap:38px; }
.footer-brand { max-width:330px; }
.footer-logo-img { width:min(205px,100%); height:58px; object-fit:contain; object-position:left center; margin-bottom:18px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
footer h3 { font-size:15px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:16px; }
footer p, footer li { font-size:13px; }
footer ul { margin:0; }
footer li { margin:9px 0; }
footer a { transition:.2s ease; }
footer a:hover { color:#fff; transform:translateX(2px); }
.footer-contact-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:18px; }
.footer-contact-card .wa-footer { display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:10px 14px; border-radius:999px; background:#20c863; color:#fff; font-weight:800; }
.copy { position:relative; padding:20px 18px; background:rgba(0,0,0,.12); }
@media (max-width:680px) {
  .footer-grid { padding:48px 18px 30px; gap:25px; }
  .footer-logo-img { width:180px; }
}


/* ===== OKE-THEME INSPIRED TYPOGRAPHY ===== */
/* Small text, navigation, buttons and body remain Poppins. */
body, button, input, textarea, select {
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
}

/* Main section subtitles/headlines use Lora Italic for a more elegant editorial feel. */
.section-head h2,
.area h2,
.final-cta h2 {
  font-family:"Lora", Georgia, serif;
  font-style:italic;
  font-weight:700;
  letter-spacing:-1px;
}

/* Keep supporting copy clean and modern. */
.section-head p,
.card p,
.feature p,
.area p,
.final-cta p,
.price-note,
footer p,
footer li {
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
}

/* Keep labels and small headings in Poppins. */
.kicker,
.card h3,
.feature b,
footer h3,
.area-list span,
.price,
.price small,
.cta,
.wa,
.nav a,
.menu-btn {
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
}


/* ===== HEADER + LOGO BACKGROUND MATCH ===== */
.site-header { background:#fff !important; }
.menu-btn { background:#fff !important; color:#204b68 !important; border:1px solid rgba(8,123,193,.16) !important; }
.menu-orb { width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; margin:0 !important; padding:0 !important; display:grid !important; place-content:center !important; gap:4px !important; border-radius:10px !important; background:linear-gradient(135deg,var(--pink),#ff79ae) !important; }
.menu-orb i { display:block !important; width:18px !important; height:2px !important; margin:0 !important; background:#fff !important; border-radius:4px !important; }

/* ===== FOOTER MATCHES WHITE LOGO BACKGROUND ===== */
footer { background:#fff !important; color:#204b68 !important; border-top:1px solid rgba(8,123,193,.10); }
footer::before { background:linear-gradient(90deg,transparent,rgba(8,123,193,.025),transparent) !important; }
footer h3 { color:#123b57 !important; }
footer p, footer li, footer a { color:#526675 !important; }
footer a:hover { color:var(--pink) !important; }
.footer-contact-card { background:#f7fbfd !important; border:1px solid rgba(8,123,193,.12) !important; box-shadow:0 10px 28px rgba(16,42,67,.06); }
.footer-contact-card .wa-footer { color:#fff !important; }
.copy { background:#f7fbfd !important; color:#667784 !important; border-top:1px solid rgba(8,123,193,.08); }


/* ===== COTTON CANDY PROMO SECTION - HTML OVERLAY ===== */
.cotton-promo{
  margin-top:28px; /* jeda antara slider dan section promo */
  position:relative;
  width:100%;
  max-width:1121px;
  margin:0 auto;
  aspect-ratio:1121/1403;
  overflow:hidden;
  background:#f6a5cb center/cover no-repeat;
  background-image:url("images/penawaran-cotton-candy.webp");
  isolation:isolate;
}
.cotton-promo *{box-sizing:border-box}
.cc-title{
  position:absolute;
  z-index:3;
  top:11.7%;
  left:8%;
  right:8%;
  text-align:center;
  font-family:"Poppins","Segoe UI",sans-serif;
  font-weight:900;
  line-height:.94;
  letter-spacing:-2.5px;
  font-size:clamp(34px,5.25vw,72px);
  color:#12b7c5;
  -webkit-text-stroke:7px #fff;
  paint-order:stroke fill;
  text-shadow:0 5px 0 rgba(0,0,0,.06);
}
.cc-title span{
  display:block;
  color:#f05a98;
  font-size:.88em;
  margin-top:3px;
  -webkit-text-stroke:6px #fff;
}
.cc-ribbon{
  position:absolute;
  z-index:4;
  top:25.2%;
  left:17.5%;
  width:65%;
  height:5.7%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5%;
  background:#f03d82;
  color:#fff;
  font-family:"Poppins","Segoe UI",sans-serif;
  font-size:clamp(16px,2.15vw,30px);
  font-weight:800;
  text-align:center;
  filter:drop-shadow(0 5px 0 rgba(130,31,82,.14));
}
.cc-ribbon:before,.cc-ribbon:after{
  content:"";
  position:absolute;
  top:0;
  width:0;height:0;
  border-top:50% solid transparent;
  border-bottom:50% solid transparent;
}
.cc-ribbon:before{
  left:-4.5%;
  border-right:38px solid #f03d82;
}
.cc-ribbon:after{
  right:-4.5%;
  border-left:38px solid #f03d82;
}
.cc-ribbon i,.cc-ribbon b{
  position:absolute;bottom:-1px;width:45px;height:17px;
  background:#c92969;z-index:-1;
}
.cc-ribbon i{left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.cc-ribbon b{right:0;clip-path:polygon(0 0,100% 0,100% 100%)}

.cc-benefits{
  position:absolute;
  z-index:5;
  left:4.2%;
  top:35.8%;
  width:39%;
  display:grid;
  gap:1.55%;
}
.cc-benefit{
  display:grid;
  grid-template-columns:25% 75%;
  align-items:center;
  min-height:82px;
  border-radius:0 17px 17px 0;
  background:#22b8c7;
  border:4px solid #fff;
  box-shadow:0 6px 10px rgba(0,0,0,.12);
  color:#fff;
  overflow:visible;
}
.cc-icon{
  width:74px;height:74px;
  margin-left:-5px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#ef4d91;
  border:4px solid #fff;
  font-size:29px;
  font-weight:900;
  color:#fff;
}
.cc-benefit-text{
  padding:0 10px 0 7px;
  font-family:"Poppins","Segoe UI",sans-serif;
  font-size:clamp(13px,1.65vw,23px);
  line-height:1.08;
  font-weight:800;
}
.cc-bottom-copy{
  position:absolute;
  z-index:5;
  left:2.7%;
  bottom:3.2%;
  width:43%;
  padding:7% 5% 3.5% 3%;
  color:#fff;
  font-family:"Poppins","Segoe UI",sans-serif;
  font-size:clamp(12px,1.45vw,20px);
  line-height:1.45;
  font-weight:700;
  text-shadow:0 1px 2px rgba(80,35,65,.1);
}
.cc-bottom-copy p{margin:0}
.cc-bottom-cta{
  position:absolute;
  z-index:6;
  right:2.7%;
  bottom:3.3%;
  width:38%;
  text-align:center;
  font-family:"Poppins","Segoe UI",sans-serif;
}
.cc-limited{
  display:block;
  color:#ef4d91;
  font-size:clamp(18px,2.5vw,34px);
  line-height:1;
  font-weight:900;
  -webkit-text-stroke:3px #fff;
  paint-order:stroke fill;
  margin-bottom:4%;
}
.cc-contact{
  display:block;
  margin:0 auto;
  width:90%;
  padding:4% 4%;
  background:#f03d82;
  color:#fff;
  border-radius:4px;
  font-size:clamp(13px,1.75vw,24px);
  font-weight:900;
  box-shadow:0 5px 0 rgba(177,34,91,.25);
}
@media(max-width:680px){
  .cotton-promo{width:100%;aspect-ratio:1121/1403}
  .cc-title{
    top:11.8%;left:5%;right:5%;
    font-size:clamp(25px,7.3vw,48px);
    letter-spacing:-1.5px;
    -webkit-text-stroke:4px #fff;
  }
  .cc-title span{-webkit-text-stroke:3.5px #fff}
  .cc-ribbon{
    top:25.4%;left:14%;width:72%;
    min-height:35px;
    font-size:clamp(11px,3.6vw,19px);
  }
  .cc-benefits{left:4%;top:35.7%;width:43%;gap:2%}
  .cc-benefit{min-height:55px;border-width:2px;border-radius:0 11px 11px 0}
  .cc-icon{width:51px;height:51px;border-width:2px;font-size:19px;margin-left:-4px}
  .cc-benefit-text{font-size:clamp(8px,2.45vw,13px);padding-left:4px}
  .cc-bottom-copy{
    left:2%;bottom:3%;width:43%;
    padding:6% 4% 2% 3%;
    font-size:clamp(7px,2.05vw,11px);
    line-height:1.4;
  }
  .cc-bottom-cta{right:2%;bottom:3%;width:40%}
  .cc-limited{
    font-size:clamp(12px,3.7vw,21px);
    -webkit-text-stroke:2px #fff;
    margin-bottom:4%;
  }
  .cc-contact{font-size:clamp(8px,2.5vw,13px);width:94%}
}


/* ===== SAMBUNGAN SLIDER KE SECTION PROMO ===== */
.cotton-promo { margin-top:0 !important; }

/* ===== FOOTER ARTWORK BACKGROUND + HTML CONTENT ===== */
.visual-footer { position:relative; overflow:hidden; min-height:1280px; color:#174b86; background:#24aeea; }

.footer-content { position:relative; z-index:2; min-height:1280px; display:flex; flex-direction:column; }
.why-footer { padding:48px 6.5% 0; text-align:center; }
.why-footer h2,.area-footer h2,.footer-cta h2 { margin:0; font-weight:900; letter-spacing:-1.8px; text-shadow:0 3px 0 rgba(255,255,255,.75); }
.why-footer h2 { font-size:clamp(34px,4vw,58px); color:#1264bd; }
.why-footer h2 span,.footer-cta h2 span { color:#ed1767; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; }
.benefit-card { background:rgba(255,255,255,.94); border-radius:24px; min-height:230px; padding:17px 15px 18px; box-shadow:0 10px 24px rgba(21,100,160,.10); }
.benefit-icon { width:72px;height:72px;margin:0 auto 6px;display:grid;place-items:center;font-size:45px; }
.benefit-card h3 { margin:0 0 7px; color:#145aa8; font-size:22px; line-height:1.05; }
.benefit-card p { margin:0; color:#24466e; font-size:15px; line-height:1.35; font-weight:600; }
.area-footer { position:relative; text-align:center; padding:62px 7% 30px; min-height:280px; }
.area-footer h2 { color:#fff; font-size:clamp(38px,4.5vw,62px); text-shadow:0 4px 0 rgba(18,100,189,.55); }
.area-footer p { margin:12px auto 20px; color:#fff; font-weight:600; font-size:15px; line-height:1.45; text-shadow:0 2px 4px rgba(0,80,140,.25); }
.area-pills { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; max-width:760px; margin:auto; }
.area-pills span { background:#fff; border-radius:999px; padding:10px 18px; font-weight:900; color:#1559a7; box-shadow:0 5px 12px rgba(10,91,157,.12); }
.speech { position:absolute; right:6%; top:34px; width:205px; padding:23px 16px; border-radius:50%; background:#fff; color:#ed1767; font-size:19px; line-height:1.18; font-weight:900; transform:rotate(-2deg); box-shadow:0 8px 20px rgba(0,80,140,.12); }
.speech::after { content:""; position:absolute; left:25px; bottom:-27px; border-width:28px 14px 0 0; border-style:solid; border-color:#fff transparent transparent transparent; transform:rotate(12deg); }
.footer-cta { text-align:center; padding:32px 18px 48px; }
.footer-cta h2 { color:#1264bd; font-size:clamp(32px,4.2vw,55px); }
.footer-cta p { margin:8px 0 20px; color:#21456d; font-weight:700; font-size:17px; }
.footer-wa-btn { display:inline-flex; align-items:center; gap:14px; min-width:420px; justify-content:center; padding:17px 24px; border-radius:999px; background:linear-gradient(135deg,#ff1680,#e60070); color:#fff; font-size:20px; font-weight:900; box-shadow:0 10px 24px rgba(226,0,100,.28); border:3px solid rgba(255,255,255,.8); }
.footer-wa-btn b { font-size:27px; }
.footer-wa-btn i { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#e60070;font-size:30px;font-style:normal;line-height:1; }
.footer-links { margin-top:auto; padding:42px 7% 26px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px; color:#fff; }
.footer-links h3 { margin:0 0 12px; font-size:20px; color:#fff; }
.footer-links ul { list-style:none; padding:0;margin:0; }
.footer-links li { margin:5px 0; font-size:15px; font-weight:600; }
.brand-word { font-size:clamp(34px,4vw,52px); font-weight:1000; line-height:.9; color:#fff; text-shadow:0 3px 0 #ed1767; }
.brand-word span { color:#fff; }
.footer-brand-new p { margin:9px 0 0; color:#fff; font-weight:700; }
.socials { display:flex; gap:18px; font-size:35px; color:#fff; align-items:center; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:14px 7%; background:rgba(0,78,157,.72); color:#fff; font-size:13px; font-weight:700; }
.desktop-only { display:block; }
@media(max-width:900px) { .benefit-grid { grid-template-columns:repeat(2,1fr); } .speech { position:static; margin:24px auto 0; } .area-footer { padding-top:45px; } .footer-links { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .visual-footer,.footer-content { min-height:1200px; } .why-footer { padding:34px 14px 0; } .benefit-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; } .benefit-card { min-height:180px; padding:12px 8px; border-radius:17px; } .benefit-icon { width:50px;height:50px;font-size:30px; } .benefit-card h3 { font-size:15px; } .benefit-card p { font-size:11px; } .area-footer { padding:38px 14px 18px; min-height:290px; } .area-footer h2 { font-size:32px; } .area-footer p { font-size:12px; } .area-pills { gap:7px; } .area-pills span { padding:8px 12px; font-size:11px; } .speech { width:170px; font-size:16px; padding:17px 12px; } .footer-cta { padding:25px 12px 35px; } .footer-cta h2 { font-size:29px; } .footer-cta p { font-size:13px; } .footer-wa-btn { min-width:0; width:100%; font-size:15px; padding:13px 12px; gap:9px; } .footer-wa-btn i { width:30px;height:30px;font-size:24px; } .footer-links { grid-template-columns:1fr 1fr; padding:28px 18px 20px; gap:22px 15px; } .brand-word { font-size:29px; } .footer-links h3 { font-size:15px; } .footer-links li { font-size:11px; } .socials { font-size:27px; gap:12px; } .footer-bottom { flex-direction:column; text-align:center; font-size:10px; gap:4px; padding:12px 8px; } .desktop-only { display:none; } }

/* ===== FOOTER REPLICA: IMAGE 1 AS ARTWORK + IMAGE 2 AS HTML LAYOUT ===== */
.visual-footer{
  position:relative!important;
  width:100%;
  min-height:0!important;
  height:1302px;
  overflow:hidden;
  background:#159fe5!important;
  color:#164c88!important;
}
.visual-footer .footer-bg{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  z-index:0!important;
}
.visual-footer .footer-content{
  position:relative!important; z-index:2!important;
  width:100%!important; height:100%!important; min-height:0!important;
  display:block!important;
}
.why-footer{
  position:absolute!important; top:42px!important; left:6.7%!important; right:6.7%!important;
  padding:0!important; text-align:center!important;
}
.why-footer h2{
  margin:0!important;
  font-family:"Fredoka","Poppins",sans-serif!important;
  font-size:clamp(34px,4.7vw,58px)!important;
  line-height:1!important; font-weight:800!important;
  color:#1264bd!important;
  letter-spacing:-2px!important;
  text-shadow:0 3px 0 #fff, 0 5px 8px rgba(30,90,160,.12)!important;
}
.why-footer h2 span{color:#ed1767!important}
.benefit-grid{
  margin:38px auto 0!important;
  display:grid!important; grid-template-columns:repeat(4,1fr)!important;
  gap:18px!important; max-width:1040px!important;
}
.benefit-card{
  min-height:225px!important; padding:17px 14px 13px!important;
  border-radius:25px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 22px rgba(25,111,180,.10)!important;
  display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important;
  border:1px solid rgba(255,255,255,.9)!important;
}
.benefit-icon{
  width:72px!important; height:72px!important; margin:0 0 7px!important;
  display:grid!important; place-items:center!important;
  font-size:45px!important; line-height:1!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff5a9,#ffb71b)!important;
  filter:drop-shadow(0 4px 4px rgba(0,80,160,.12));
}
.benefit-card:nth-child(2) .benefit-icon{background:linear-gradient(145deg,#8df1df,#08b9a6)!important}
.benefit-card:nth-child(3) .benefit-icon{background:linear-gradient(145deg,#69c9ff,#1264bd)!important}
.benefit-card:nth-child(4) .benefit-icon{background:linear-gradient(145deg,#ff72ba,#ed1767)!important}
.benefit-card h3{
  margin:0 0 6px!important; color:#1559a5!important;
  font-family:"Fredoka","Poppins",sans-serif!important;
  font-size:21px!important; line-height:1.04!important; font-weight:800!important;
}
.benefit-card p{
  margin:0!important; max-width:215px!important;
  color:#244d78!important; font-family:"Poppins",sans-serif!important;
  font-size:14px!important; line-height:1.35!important; font-weight:500!important;
}
.area-footer{
  position:absolute!important; top:420px!important; left:7%!important; right:7%!important;
  min-height:0!important; padding:0!important; text-align:center!important;
}
.area-footer h2{
  margin:0!important; color:#fff!important;
  font-family:"Fredoka","Poppins",sans-serif!important;
  font-size:clamp(38px,4.8vw,62px)!important; line-height:1!important; font-weight:800!important;
  letter-spacing:-2px!important; text-shadow:0 4px 0 #1264bd,0 7px 10px rgba(0,72,150,.16)!important;
}
.area-footer p{
  margin:15px auto 20px!important; color:#fff!important;
  font-size:15px!important; line-height:1.35!important; font-weight:600!important;
  text-shadow:0 2px 4px rgba(0,75,140,.28)!important;
}
.area-pills{display:flex!important; justify-content:center!important; flex-wrap:wrap!important; gap:10px!important}
.area-pills span{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  min-width:120px!important; padding:11px 18px!important; border-radius:999px!important;
  background:rgba(255,255,255,.96)!important; color:#1559a5!important;
  font-family:"Poppins",sans-serif!important; font-size:15px!important; font-weight:800!important;
  box-shadow:0 5px 12px rgba(0,70,140,.12)!important;
}
.speech{
  position:absolute!important; top:0!important; right:-1%!important;
  width:205px!important; min-height:155px!important; padding:31px 20px 20px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  border-radius:50%!important; background:#fff!important; color:#ed1767!important;
  font-family:"Fredoka","Poppins",sans-serif!important; font-size:19px!important; line-height:1.12!important; font-weight:800!important;
  box-shadow:0 5px 15px rgba(0,75,140,.10)!important;
  border:4px solid rgba(255,255,255,.75)!important;
}
.speech:after{
  content:""; position:absolute; left:30px; bottom:-30px;
  width:0; height:0; border-left:18px solid transparent; border-right:6px solid transparent;
  border-top:38px solid #fff; transform:rotate(15deg);
}
.footer-cta{
  position:absolute!important; top:688px!important; left:7%!important; right:7%!important;
  padding:0!important; text-align:center!important;
}
.footer-cta h2{
  margin:0!important; color:#1264bd!important;
  font-family:"Fredoka","Poppins",sans-serif!important;
  font-size:clamp(32px,4.4vw,55px)!important; line-height:1.05!important; font-weight:800!important;
  letter-spacing:-2px!important; text-shadow:0 3px 0 #fff!important;
}
.footer-cta h2 span{color:#ed1767!important}
.footer-cta p{
  margin:12px 0 24px!important; color:#21456d!important;
  font-family:"Poppins",sans-serif!important; font-size:17px!important; font-weight:700!important;
}
.footer-wa-btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:14px!important;
  width:455px!important; max-width:90%!important; min-width:0!important;
  padding:16px 23px!important; border-radius:999px!important;
  background:linear-gradient(180deg,#ff2991,#ec0071)!important; color:#fff!important;
  font-family:"Poppins",sans-serif!important; font-size:20px!important; font-weight:900!important;
  border:4px solid rgba(255,255,255,.86)!important;
  box-shadow:0 10px 22px rgba(217,0,107,.28)!important;
}
.footer-wa-btn b{
  width:42px!important; height:42px!important; display:grid!important; place-items:center!important;
  border:3px solid #fff!important; border-radius:50%!important; font-size:22px!important;
}
.footer-wa-btn i{
  width:38px!important; height:38px!important; display:grid!important; place-items:center!important;
  border-radius:50%!important; background:#fff!important; color:#ed1767!important;
  font-size:31px!important; font-style:normal!important; line-height:1!important;
}
.footer-links{
  position:absolute!important; left:7%!important; right:7%!important; bottom:76px!important;
  margin:0!important; padding:0!important;
  display:grid!important; grid-template-columns:1.65fr 1fr 1fr 1fr!important; gap:30px!important;
  color:#fff!important;
}
.footer-links h3{
  margin:0 0 12px!important; color:#fff!important;
  font-family:"Fredoka","Poppins",sans-serif!important; font-size:20px!important; font-weight:800!important;
}
.footer-links li{margin:5px 0!important; font-size:15px!important; font-weight:600!important; color:#fff!important}
.footer-brand-new .brand-word{
  font-family:"Fredoka","Poppins",sans-serif!important; font-size:39px!important; line-height:1!important; font-weight:900!important;
  color:#ff2991!important; text-shadow:0 3px 0 #fff!important; letter-spacing:-2px!important;
}
.footer-brand-new .brand-word span{color:#ff2991!important}
.footer-brand-new p{margin:10px 0 0!important; color:#fff!important; font-size:15px!important; font-weight:700!important}
.socials{display:flex!important; align-items:center!important; gap:18px!important; color:#fff!important; font-size:35px!important}
.footer-bottom{
  position:absolute!important; left:0!important; right:0!important; bottom:0!important;
  height:58px!important; padding:0 7%!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
  background:rgba(0,78,157,.72)!important; color:#fff!important;
  font-family:"Poppins",sans-serif!important; font-size:13px!important; font-weight:700!important;
}
@media(max-width:900px){
  .visual-footer{height:1200px!important}
  .why-footer{top:30px!important;left:4%!important;right:4%!important}
  .benefit-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin-top:25px!important}
  .benefit-card{min-height:175px!important;padding:12px 8px!important;border-radius:18px!important}
  .benefit-icon{width:52px!important;height:52px!important;font-size:31px!important;border-radius:16px!important}
  .benefit-card h3{font-size:16px!important}
  .benefit-card p{font-size:11px!important}
  .area-footer{top:365px!important;left:4%!important;right:4%!important}
  .speech{position:relative!important;top:auto!important;right:auto!important;margin:18px auto 0!important;width:170px!important;min-height:125px!important;font-size:16px!important}
  .footer-cta{top:650px!important;left:4%!important;right:4%!important}
  .footer-cta p{font-size:13px!important}
  .footer-wa-btn{width:430px!important;font-size:15px!important;padding:12px!important}
  .footer-links{left:5%!important;right:5%!important;bottom:70px!important;grid-template-columns:1fr 1fr!important;gap:20px 14px!important}
  .footer-brand-new .brand-word{font-size:29px!important}
  .footer-links h3{font-size:15px!important}
  .footer-links li{font-size:11px!important}
  .socials{font-size:27px!important;gap:12px!important}
  .footer-bottom{height:55px!important;flex-direction:column!important;justify-content:center!important;text-align:center!important;gap:3px!important;font-size:10px!important;padding:6px 8px!important}
}
@media(max-width:600px){
  .visual-footer{height:1160px!important}
  .why-footer h2{font-size:31px!important}
  .area-footer{top:365px!important}
  .area-footer h2{font-size:32px!important}
  .area-footer p{font-size:11px!important}
  .area-pills{gap:6px!important}
  .area-pills span{min-width:0!important;padding:8px 11px!important;font-size:10px!important}
  .footer-cta{top:650px!important}
  .footer-cta h2{font-size:28px!important}
  .footer-wa-btn{width:100%!important;max-width:100%!important;font-size:14px!important}
  .footer-links{bottom:72px!important}
}

/* FINAL FOOTER — artwork is ONLY the background; all text/buttons are HTML */
.visual-footer {
  position:relative !important; width:100% !important; height:auto !important;
  min-height:0 !important; aspect-ratio:1184 / 1350 !important;
  overflow:hidden !important; background:#159fe5 !important;
}
.visual-footer .footer-bg {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  background-image:url("images/slider-background.webp") !important;
  background-repeat:no-repeat !important; background-position:center center !important;
  background-size:100% 100% !important; z-index:0 !important;
}
.visual-footer .footer-content { position:absolute !important; inset:0 !important; z-index:2 !important; min-height:0 !important; height:100% !important; }
.why-footer { position:absolute !important; top:3.3% !important; left:6.5% !important; right:6.5% !important; padding:0 !important; text-align:center !important; }
.why-footer h2 { margin:0 !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(32px,4.65vw,58px) !important; line-height:1 !important; font-weight:800 !important; color:#1264bd !important; letter-spacing:-2px !important; text-shadow:0 3px 0 #fff,0 5px 8px rgba(30,90,160,.12) !important; }
.why-footer h2 span { color:#ed1767 !important; }
.benefit-grid { margin:2.6% auto 0 !important; display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:1.55% !important; max-width:1040px !important; }
.benefit-card { min-height:0 !important; height:16.7vw !important; max-height:225px !important; padding:14px 12px 12px !important; border-radius:24px !important; background:rgba(255,255,255,.95) !important; box-shadow:0 8px 22px rgba(25,111,180,.10) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; border:1px solid rgba(255,255,255,.95) !important; }
.benefit-icon { width:68px !important; height:68px !important; margin:0 auto 7px !important; display:grid !important; place-items:center !important; font-size:42px !important; line-height:1 !important; background:none !important; filter:none !important; }
.benefit-card:nth-child(1) .benefit-icon { color:#ffad00; }
.benefit-card:nth-child(2) .benefit-icon { color:#12b7a4; }
.benefit-card:nth-child(3) .benefit-icon { color:#147bd1; }
.benefit-card:nth-child(4) .benefit-icon { color:#ef2680; }
.benefit-card h3 { margin:0 0 6px !important; color:#1559a5 !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(16px,1.75vw,22px) !important; line-height:1.05 !important; font-weight:800 !important; }
.benefit-card p { margin:0 !important; max-width:215px !important; color:#244d78 !important; font-family:"Poppins",sans-serif !important; font-size:clamp(11px,1.15vw,15px) !important; line-height:1.32 !important; font-weight:500 !important; }
.area-footer { position:absolute !important; top:32.2% !important; left:7% !important; right:7% !important; min-height:0 !important; padding:0 !important; text-align:center !important; }
.area-footer h2 { margin:0 !important; color:#fff !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(35px,4.75vw,62px) !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-2px !important; text-shadow:0 4px 0 #1264bd,0 7px 10px rgba(0,72,150,.16) !important; }
.area-footer p { margin:1.05% auto 1.45% !important; color:#fff !important; font-size:clamp(11px,1.2vw,15px) !important; line-height:1.35 !important; font-weight:600 !important; text-shadow:0 2px 4px rgba(0,75,140,.28) !important; }
.area-pills { display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:.8% !important; }
.area-pills span { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:120px !important; padding:9px 17px !important; border-radius:999px !important; background:rgba(255,255,255,.97) !important; color:#1559a5 !important; font-family:"Poppins",sans-serif !important; font-size:clamp(11px,1.25vw,15px) !important; font-weight:800 !important; box-shadow:0 5px 12px rgba(0,70,140,.12) !important; }
.speech { position:absolute !important; top:-.3% !important; right:-1% !important; width:17.3% !important; min-height:0 !important; aspect-ratio:1/0.82 !important; padding:2.6% 1.6% !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#fff !important; color:#ed1767 !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(13px,1.55vw,19px) !important; line-height:1.12 !important; font-weight:800 !important; box-shadow:0 5px 15px rgba(0,75,140,.10) !important; border:4px solid rgba(255,255,255,.75) !important; }
.speech:after { content:"" !important; position:absolute !important; left:15% !important; bottom:-18% !important; width:0 !important; height:0 !important; border-left:18px solid transparent !important; border-right:6px solid transparent !important; border-top:38px solid #fff !important; transform:rotate(15deg) !important; }
.footer-cta { position:absolute !important; top:51.8% !important; left:7% !important; right:7% !important; padding:0 !important; text-align:center !important; }
.footer-cta h2 { margin:0 !important; color:#1264bd !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(30px,4.35vw,55px) !important; line-height:1.05 !important; font-weight:800 !important; letter-spacing:-2px !important; text-shadow:0 3px 0 #fff !important; }
.footer-cta h2 span { color:#ed1767 !important; }
.footer-cta p { margin:1% 0 1.8% !important; color:#21456d !important; font-family:"Poppins",sans-serif !important; font-size:clamp(12px,1.35vw,17px) !important; font-weight:700 !important; }
.footer-wa-btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; width:min(455px,42%) !important; padding:1.25% 2% !important; border-radius:999px !important; background:linear-gradient(180deg,#ff2991,#ec0071) !important; color:#fff !important; font-family:"Poppins",sans-serif !important; font-size:clamp(14px,1.65vw,20px) !important; font-weight:900 !important; border:4px solid rgba(255,255,255,.86) !important; box-shadow:0 10px 22px rgba(217,0,107,.28) !important; }
.footer-wa-btn b { width:42px !important; height:42px !important; display:grid !important; place-items:center !important; border:3px solid #fff !important; border-radius:50% !important; font-size:22px !important; }
.footer-wa-btn i { width:38px !important; height:38px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:#fff !important; color:#ed1767 !important; font-size:31px !important; font-style:normal !important; line-height:1 !important; }
.footer-links { position:absolute !important; left:7% !important; right:7% !important; bottom:8.8% !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:1.65fr 1fr 1fr 1fr !important; gap:2.5% !important; color:#fff !important; }
.footer-links h3 { margin:0 0 10px !important; color:#fff !important; font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(15px,1.7vw,20px) !important; font-weight:800 !important; }
.footer-links li { margin:4px 0 !important; font-size:clamp(10px,1.25vw,15px) !important; font-weight:600 !important; color:#fff !important; }
.footer-brand-new .brand-word { font-family:"Fredoka","Poppins",sans-serif !important; font-size:clamp(28px,3.3vw,39px) !important; line-height:1 !important; font-weight:900 !important; color:#ff2991 !important; text-shadow:0 3px 0 #fff !important; letter-spacing:-2px !important; }
.footer-brand-new .brand-word span { color:#ff2991 !important; }
.footer-brand-new p { margin:8px 0 0 !important; color:#fff !important; font-size:clamp(10px,1.25vw,15px) !important; font-weight:700 !important; }
.socials { display:flex !important; align-items:center !important; gap:18px !important; color:#fff !important; font-size:clamp(25px,3vw,35px) !important; }
.footer-bottom { position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:4.3% !important; padding:0 7% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; background:rgba(0,78,157,.72) !important; color:#fff !important; font-family:"Poppins",sans-serif !important; font-size:clamp(9px,1.1vw,13px) !important; font-weight:700 !important; }
@media(max-width:700px) {
  .visual-footer { aspect-ratio:auto !important; height:1180px !important; }
  .visual-footer .footer-bg { background-size:100% 100% !important; }
  .why-footer { top:2.5% !important; left:4% !important; right:4% !important; }
  .why-footer h2 { font-size:31px !important; }
  .benefit-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; margin-top:20px !important; }
  .benefit-card { height:auto !important; min-height:175px !important; padding:10px 7px !important; border-radius:17px !important; }
  .benefit-icon { width:50px !important; height:50px !important; font-size:30px !important; }
  .benefit-card h3 { font-size:15px !important; }
  .benefit-card p { font-size:10.5px !important; }
  .area-footer { top:31% !important; left:4% !important; right:4% !important; }
  .area-footer h2 { font-size:32px !important; }
  .area-footer p { font-size:11px !important; }
  .area-pills { gap:6px !important; }
  .area-pills span { min-width:0 !important; padding:7px 10px !important; font-size:10px !important; }
  .speech { position:relative !important; top:auto !important; right:auto !important; width:170px !important; aspect-ratio:auto !important; min-height:120px !important; margin:18px auto 0 !important; font-size:16px !important; }
  .footer-cta { top:54.5% !important; left:4% !important; right:4% !important; }
  .footer-cta h2 { font-size:28px !important; }
  .footer-cta p { font-size:12px !important; }
  .footer-wa-btn { width:92% !important; max-width:430px !important; font-size:14px !important; padding:12px !important; gap:9px !important; }
  .footer-wa-btn b { width:34px !important; height:34px !important; font-size:18px !important; }
  .footer-wa-btn i { width:30px !important; height:30px !important; font-size:24px !important; }
  .footer-links { left:5% !important; right:5% !important; bottom:7.2% !important; grid-template-columns:1fr 1fr !important; gap:18px 14px !important; }
  .footer-links h3 { font-size:15px !important; }
  .footer-links li { font-size:10.5px !important; }
  .footer-brand-new .brand-word { font-size:29px !important; }
  .footer-brand-new p { font-size:10px !important; }
  .socials { font-size:27px !important; gap:12px !important; }
  .footer-bottom { height:5.5% !important; flex-direction:column !important; justify-content:center !important; text-align:center !important; gap:3px !important; font-size:9px !important; padding:5px 8px !important; }
}

/* =========================================================
   FOOTER V12 — layout locked to the supplied 1208x1302 reference
   Background = artwork only. All visible copy, cards and buttons = HTML/CSS.
   ========================================================= */
.visual-footer{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1208/1302!important;
  overflow:hidden!important;
  background:#16a9e7!important;
  color:#174b86!important;
  margin:0!important;
}
.visual-footer .footer-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:100% 100%!important;
  background-position:0 0!important;
  background-repeat:no-repeat!important;
  z-index:0!important;
}
.visual-footer .footer-content{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:block!important;
  z-index:2!important;
}
/* top title */
.why-footer{
  position:absolute!important;
  left:5.9%!important;
  top:3.65%!important;
  width:88.2%!important;
  padding:0!important;
  margin:0!important;
  text-align:center!important;
}
.why-footer h2{
  margin:0!important;
  font-family:"Fredoka", "Arial Rounded MT Bold", sans-serif!important;
  font-size:clamp(30px,4.35vw,53px)!important;
  line-height:.98!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
  color:#1264bd!important;
  -webkit-text-stroke:2.5px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 3px 0 #fff,0 5px 8px rgba(20,93,165,.14)!important;
}
.why-footer h2 span{color:#ed1767!important}
/* 4 white cards */
.benefit-grid{
  position:absolute!important;
  left:0!important;
  top:6.65%!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:1.55%!important;
}
.benefit-card{
  box-sizing:border-box!important;
  height:17.25%!important;
  min-height:0!important;
  padding:9px 12px 8px!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.96)!important;
  border:0!important;
  box-shadow:0 5px 14px rgba(20,100,165,.08)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.benefit-icon{
  width:58px!important;
  height:58px!important;
  margin:0 auto 5px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  background:none!important;
  border-radius:0!important;
  filter:none!important;
  font-size:40px!important;
  line-height:1!important;
}
.benefit-card h3{
  margin:0 0 6px!important;
  color:#145aa8!important;
  font-family:"Fredoka", "Arial Rounded MT Bold", sans-serif!important;
  font-size:20px!important;
  line-height:1.03!important;
  font-weight:800!important;
  text-align:center!important;
  letter-spacing:-.4px!important;
}
.benefit-card p{
  margin:0!important;
  max-width:205px!important;
  color:#24466e!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:500!important;
  text-align:center!important;
}
/* area */
.area-footer{
  position:absolute!important;
  left:7.5%!important;
  top:33.5%!important;
  width:85%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  text-align:center!important;
}
.area-footer h2{
  margin:0!important;
  color:#fff!important;
  font-family:"Fredoka", "Arial Rounded MT Bold", sans-serif!important;
  font-size:clamp(31px,4.25vw,51px)!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-1.5px!important;
  -webkit-text-stroke:2.5px #1264bd!important;
  paint-order:stroke fill!important;
  text-shadow:0 3px 0 #1264bd,0 5px 8px rgba(0,72,150,.15)!important;
}
.area-footer p{
  margin:12px auto 20px!important;
  color:#fff!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.3!important;
  font-weight:500!important;
  text-shadow:0 1px 3px rgba(0,70,130,.25)!important;
}
.area-pills{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
}
.area-pills span{
  min-width:0!important;
  height:45px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#1559a5!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-shadow:0 4px 9px rgba(0,70,140,.10)!important;
}
/* speech bubble */
.speech{
  position:absolute!important;
  top:-8px!important;
  right:-1.5%!important;
  width:17.5%!important;
  height:145px!important;
  min-height:0!important;
  padding:0 16px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:50%!important;
  background:#fff!important;
  border:4px solid rgba(255,255,255,.9)!important;
  color:#ed1767!important;
  font-family:"Fredoka", "Arial Rounded MT Bold", sans-serif!important;
  font-size:18px!important;
  line-height:1.12!important;
  font-weight:800!important;
  box-shadow:0 4px 12px rgba(0,70,140,.10)!important;
}
.speech:after{
  content:""!important;
  position:absolute!important;
  left:28px!important;
  bottom:-27px!important;
  width:0!important;
  height:0!important;
  border-left:15px solid transparent!important;
  border-right:5px solid transparent!important;
  border-top:34px solid #fff!important;
  transform:rotate(13deg)!important;
}
/* CTA */
.footer-cta{
  position:absolute!important;
  left:7%!important;
  top:53.85%!important;
  width:86%!important;
  padding:0!important;
  margin:0!important;
  text-align:center!important;
}
.footer-cta h2{
  margin:0!important;
  color:#1264bd!important;
  font-family:"Fredoka", "Arial Rounded MT Bold", sans-serif!important;
  font-size:clamp(29px,4.0vw,48px)!important;
  line-height:1.02!important;
  font-weight:800!important;
  letter-spacing:-1.4px!important;
  -webkit-text-stroke:2px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 3px 0 #fff!important;
}
.footer-cta h2 span{color:#ed1767!important}
.footer-cta p{
  margin:10px 0 20px!important;
  color:#21456d!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:15px!important;
  line-height:1.3!important;
  font-weight:600!important;
}
.footer-wa-btn{
  width:455px!important;
  max-width:48%!important;
  min-width:0!important;
  height:74px!important;
  padding:0 20px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ff2991,#ed0070)!important;
  border:4px solid rgba(255,255,255,.92)!important;
  color:#fff!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:18px!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(217,0,107,.24)!important;
}
.footer-wa-btn b{
  width:42px!important;height:42px!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:50%!important;
  font-size:0!important;
}
.footer-wa-btn b:after{content:"◔";font-size:42px;line-height:1;transform:rotate(-35deg)}
.footer-wa-btn i{
  width:34px!important;height:34px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  background:#fff!important;color:#ed1767!important;
  font-size:29px!important;font-style:normal!important;line-height:1!important;
}
/* bottom navigation */
.footer-links{
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  bottom:8.0%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1.7fr 1fr 1fr 1fr!important;
  gap:28px!important;
  color:#fff!important;
  align-items:start!important;
}
.footer-links h3{
  margin:0 0 12px!important;
  color:#fff!important;
  font-family:"Fredoka","Arial Rounded MT Bold",sans-serif!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:800!important;
}
.footer-links li{
  margin:5px 0!important;
  color:#fff!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:500!important;
}
.footer-brand-new .brand-word{
  font-family:"Fredoka","Arial Rounded MT Bold",sans-serif!important;
  font-size:37px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#ff2991!important;
  -webkit-text-stroke:2px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 2px 0 #fff!important;
  letter-spacing:-1.8px!important;
}
.footer-brand-new .brand-word span{color:#ff2991!important}
.footer-brand-new p{
  margin:8px 0 0!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:600!important;
}
.socials{display:flex!important;align-items:center!important;gap:18px!important;color:#fff!important;font-size:32px!important}
.footer-bottom{
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:7.15%!important;
  padding:0 7%!important;
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:rgba(0,78,157,.72)!important;
  color:#fff!important;
  font-family:"Poppins",Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
}
/* Responsive: keep the same visual hierarchy without allowing shapes to overlap */
@media(max-width:700px){
  .visual-footer{aspect-ratio:1208/1450!important}
  .why-footer{top:3.2%!important}
  .why-footer h2{font-size:30px!important;-webkit-text-stroke:1.8px #fff!important}
  .benefit-grid{top:7%!important;grid-template-columns:repeat(2,1fr)!important;gap:9px!important}
  .benefit-card{height:auto!important;min-height:142px!important;padding:9px 7px!important;border-radius:15px!important}
  .benefit-icon{width:45px!important;height:45px!important;font-size:30px!important;margin-bottom:3px!important}
  .benefit-card h3{font-size:14px!important;margin-bottom:4px!important}
  .benefit-card p{font-size:10px!important;line-height:1.2!important}
  .area-footer{top:34%!important;left:4%!important;width:92%!important}
  .area-footer h2{font-size:30px!important;-webkit-text-stroke:1.8px #1264bd!important}
  .area-footer p{font-size:10px!important;margin:8px auto 13px!important}
  .area-pills{gap:5px!important;flex-wrap:wrap!important}
  .area-pills span{height:31px!important;padding:0 9px!important;font-size:9px!important}
  .speech{position:relative!important;top:auto!important;right:auto!important;width:155px!important;height:105px!important;margin:14px auto 0!important;font-size:14px!important}
  .footer-cta{top:54%!important;left:4%!important;width:92%!important}
  .footer-cta h2{font-size:27px!important;-webkit-text-stroke:1.5px #fff!important}
  .footer-cta p{font-size:11px!important;margin:7px 0 13px!important}
  .footer-wa-btn{width:330px!important;max-width:88%!important;height:53px!important;font-size:13px!important;gap:8px!important;border-width:3px!important}
  .footer-wa-btn b:after{font-size:31px!important}.footer-wa-btn i{width:27px!important;height:27px!important;font-size:23px!important}
  .footer-links{left:5%;right:5%;bottom:8.2%;grid-template-columns:1.4fr 1fr 1fr!important;gap:14px!important}
  .footer-links h3{font-size:14px!important;margin-bottom:8px!important}.footer-links li{font-size:10px!important;margin:4px 0!important}
  .footer-brand-new .brand-word{font-size:25px!important;-webkit-text-stroke:1.5px #fff!important}.footer-brand-new p{font-size:9px!important}.socials{font-size:24px!important;gap:11px!important}
  .footer-bottom{height:6%!important;padding:0 4%!important;font-size:8px!important}
}
@media(max-width:430px){
  .visual-footer{aspect-ratio:1208/1580!important}
  .why-footer h2{font-size:25px!important}
  .benefit-card{min-height:137px!important}.benefit-card h3{font-size:12px!important}.benefit-card p{font-size:9px!important}
  .area-footer h2{font-size:26px!important}.area-pills span{font-size:8px!important;padding:0 7px!important}
  .footer-cta h2{font-size:23px!important}.footer-wa-btn{font-size:12px!important}
  .footer-links{grid-template-columns:1.25fr 1fr!important}.footer-links>div:last-child{grid-column:2}.footer-brand-new .brand-word{font-size:22px!important}
}

.pestaku-footer{position:relative;isolation:isolate;overflow:hidden;min-height:430px;margin-top:28px;color:#fff;background-image:var(--footer-art);background-size:cover;background-position:center bottom;background-repeat:no-repeat;font-family:"Poppins","Segoe UI",Arial,sans-serif}
.pestaku-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(190,20,110,.30),rgba(190,20,110,.08) 48%,rgba(190,20,110,0) 72%)}
.pf-inner{width:min(1180px,calc(100% - 44px));min-height:430px;margin:auto;display:flex;align-items:flex-start;position:relative;padding:52px 0 0}
.pf-content{width:min(560px,55%);text-shadow:0 2px 5px rgba(70,0,45,.35)}
.pf-logo{font-size:clamp(38px,5vw,62px);font-weight:1000;line-height:.95;letter-spacing:-2.5px;color:#f51c83;-webkit-text-stroke:2.5px #fff;paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,89,170,.22)}
.pf-logo span{color:#087bc1}
.pf-tagline{font-size:16px;font-weight:800;margin:10px 0 18px;color:#fff}
.pf-description{font-size:14px;line-height:1.65;font-weight:600;max-width:470px;margin:0 0 22px;color:#fff}
.pf-page{font-size:14px;font-weight:800;margin:0 0 9px;color:#fff}
.pf-links{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:500px}
.pf-links a{color:#fff!important;text-decoration:none;font-size:13px;font-weight:700;transition:.2s}
.pf-links a:hover{opacity:.8;transform:translateY(-1px)}
.pf-bottom{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:space-between;gap:20px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(70,0,45,.35);padding-top:12px;border-top:1px solid rgba(255,255,255,.55)}
@media(max-width:900px){.pestaku-footer{min-height:460px;background-position:62% bottom}.pf-inner{min-height:460px;width:calc(100% - 32px);padding-top:42px}.pf-content{width:58%}.pf-logo{font-size:43px}}
@media(max-width:600px){.pestaku-footer{min-height:500px;background-size:auto 100%;background-position:67% bottom}.pf-inner{min-height:500px;width:calc(100% - 28px);padding-top:30px}.pf-content{width:58%;max-width:330px}.pf-logo{font-size:34px;letter-spacing:-1.5px;-webkit-text-stroke:1.7px #fff}.pf-tagline{font-size:11px;margin:8px 0 13px}.pf-description{font-size:10px;line-height:1.55;margin-bottom:15px}.pf-page{font-size:11px;margin-bottom:6px}.pf-links{gap:5px 12px}.pf-links a{font-size:9px}.pf-bottom{bottom:12px;padding-top:8px;font-size:7.5px;gap:8px;flex-direction:column}}

.layanan-kami{position:relative;width:100%;padding:56px 24px 64px;background:linear-gradient(180deg,#fffaf4 0%,#fff 100%);overflow:hidden;}
.layanan-kami:before,.layanan-kami:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;}
.layanan-kami:before{width:180px;height:180px;left:-90px;top:80px;background:rgba(25,184,236,.10);}
.layanan-kami:after{width:180px;height:180px;right:-90px;bottom:60px;background:rgba(237,23,103,.09);}
.lk-head{position:relative;z-index:1;text-align:center;margin:0 auto 28px;max-width:760px;}
.lk-title{display:inline-block;margin:0;padding:9px 28px;border-radius:999px;background:linear-gradient(180deg,#25c4e9,#0785c8);color:#fff;font-family:Poppins,"Segoe UI",sans-serif;font-size:clamp(24px,3vw,38px);font-weight:900;letter-spacing:-.7px;box-shadow:0 6px 0 rgba(0,91,157,.16),0 10px 24px rgba(8,123,193,.15);}
.lk-subtitle{margin:10px 0 0;color:#174c73;font-family:Poppins,"Segoe UI",sans-serif;font-size:clamp(13px,1.5vw,18px);font-weight:700;}
.lk-grid{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.lk-card{background:#fff;border:4px solid #fff;border-radius:28px;overflow:hidden;box-shadow:0 12px 30px rgba(30,90,120,.13);transition:transform .25s ease,box-shadow .25s ease;}
.lk-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(30,90,120,.18);}
.lk-image{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;}
.lk-body{padding:15px 18px 18px;text-align:center;background:#fff;}
.lk-name{margin:0;color:#087bc1;font-family:Poppins,"Segoe UI",sans-serif;font-size:clamp(18px,2vw,25px);font-weight:900;}
.lk-desc{margin:5px auto 13px;max-width:520px;color:#557086;font-family:Poppins,"Segoe UI",sans-serif;font-size:13px;line-height:1.45;font-weight:600;}
.lk-btn{display:inline-flex;align-items:center;justify-content:center;min-width:190px;padding:10px 18px;border-radius:999px;background:#ed1767;color:#fff;text-decoration:none;font-family:Poppins,"Segoe UI",sans-serif;font-size:13px;font-weight:900;box-shadow:0 5px 0 rgba(185,0,91,.15);}
.lk-btn:hover{filter:brightness(1.04);transform:translateY(-1px);}
@media(max-width:900px){.layanan-kami{padding:44px 16px 50px}.lk-grid{gap:14px}.lk-card{border-width:3px;border-radius:22px}.lk-body{padding:11px 10px 13px}.lk-desc{font-size:11px;margin-bottom:10px}.lk-btn{min-width:145px;padding:8px 12px;font-size:11px}}
@media(max-width:600px){.layanan-kami{padding:38px 10px 44px}.lk-head{margin-bottom:18px}.lk-title{font-size:22px;padding:7px 18px}.lk-subtitle{font-size:11px;margin-top:7px}.lk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lk-card{border-width:2px;border-radius:16px}.lk-body{padding:8px 6px 9px}.lk-name{font-size:14px}.lk-desc{font-size:8.5px;line-height:1.3;margin:3px auto 7px}.lk-btn{width:100%;min-width:0;padding:7px 5px;font-size:8.5px;box-shadow:0 3px 0 rgba(185,0,91,.14)}}

.seo-long-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px auto 26px;text-align:left;position:relative;z-index:1}.seo-long-card{background:rgba(255,255,255,.92);border:2px solid rgba(255,255,255,.95);border-radius:26px;padding:20px;box-shadow:0 10px 28px rgba(16,42,67,.08);overflow:hidden}.seo-long-head{display:flex;align-items:center;gap:12px}.seo-long-head .seo-shape-icon{flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#fff0f7;font-size:30px}.seo-long-head h3{margin:0;color:#1264bd;font-family:"Poppins",sans-serif;font-size:clamp(18px,2vw,25px);line-height:1.15;font-weight:900}.seo-long-intro{margin:12px 0 10px!important;color:#557086!important;font:600 12px/1.55 Poppins,sans-serif!important}.seo-details summary{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:9px 18px;border-radius:999px;background:linear-gradient(135deg,#ed1767,#ff4f9a);color:#fff;font:800 12px/1 Poppins,sans-serif;box-shadow:0 7px 15px rgba(237,23,103,.18);list-style:none}.seo-details summary::-webkit-details-marker{display:none}.seo-details summary:after{content:"＋";margin-left:8px;font-size:14px}.seo-details[open] summary:after{content:"−"}.seo-long-copy{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(8,123,193,.2)}.seo-long-copy p{margin:0 0 14px!important;color:#405a70!important;font:500 12px/1.75 Poppins,sans-serif!important}.seo-contact-strip{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,213,47,.28),rgba(255,79,154,.12),rgba(25,184,236,.12));color:#21456d;font:600 12px/1.4 Poppins,sans-serif}.seo-contact-strip strong{color:#ed1767;font-size:15px}.seo-contact-strip span{display:block}.seo-contact-strip .seo-cta{margin:0!important;white-space:nowrap}@media(max-width:700px){.seo-long-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.seo-long-card{padding:12px;border-radius:18px}.seo-long-head{gap:8px;align-items:flex-start}.seo-long-head .seo-shape-icon{flex-basis:38px;width:38px;height:38px;border-radius:12px;font-size:21px}.seo-long-head h3{font-size:14px}.seo-long-intro{font-size:9px!important;line-height:1.45!important}.seo-details summary{padding:7px 11px;font-size:9px}.seo-long-copy p{font-size:9px!important;line-height:1.6!important}.seo-contact-strip{padding:12px 10px;gap:7px;font-size:9px}.seo-contact-strip strong{font-size:12px}.seo-contact-strip .seo-cta{width:100%;text-align:center;white-space:normal!important;font-size:11px!important}}

/* ===== FINAL TYPOGRAPHY MATCH TO REFERENCE ===== */
.visual-footer{font-family:"Poppins","Segoe UI",sans-serif!important;}
.why-footer h2,.area-footer h2,.footer-cta h2,.benefit-card h3,.speech,.footer-links h3,.brand-word{
  font-family:"Poppins","Segoe UI",sans-serif!important;
  -webkit-text-stroke:0!important;
}
/* Main reference titles: smaller + thick white outline */
.why-footer h2{
  font-size:clamp(30px,3.7vw,48px)!important;
  letter-spacing:-1.4px!important;
  line-height:1.04!important;
  -webkit-text-stroke:3px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 3px 0 rgba(18,100,189,.25)!important;
}
.why-footer h2 span{
  -webkit-text-stroke:3px #fff!important;
  paint-order:stroke fill!important;
}
.benefit-card h3{
  font-size:18px!important;
  line-height:1.08!important;
  letter-spacing:-.35px!important;
}
.benefit-card p{
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:500!important;
}
.area-footer h2{
  font-size:clamp(34px,4vw,50px)!important;
  letter-spacing:-1.4px!important;
  -webkit-text-stroke:3px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 4px 0 #1264bd!important;
}
.footer-cta h2{
  font-size:clamp(30px,3.8vw,48px)!important;
  letter-spacing:-1.2px!important;
  -webkit-text-stroke:3px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 3px 0 rgba(18,100,189,.18)!important;
}
.footer-cta h2 span{
  -webkit-text-stroke:3px #fff!important;
  paint-order:stroke fill!important;
}
.footer-cta p{font-size:14px!important;margin:9px 0 20px!important;}
.footer-wa-btn{
  width:420px!important; padding:13px 20px!important; font-size:17px!important;
  border-width:3px!important; gap:11px!important;
}
.footer-wa-btn b{width:38px!important;height:38px!important;font-size:20px!important;}
.footer-wa-btn i{width:34px!important;height:34px!important;font-size:27px!important;}
.footer-links h3{font-size:17px!important;}
.footer-links li{font-size:13px!important;}
.footer-brand-new .brand-word{font-size:34px!important;letter-spacing:-1.5px!important;}
.footer-brand-new p{font-size:13px!important;}
@media(max-width:600px){
  .why-footer h2{font-size:28px!important;-webkit-text-stroke:2px #fff!important;}
  .why-footer h2 span,.area-footer h2,.footer-cta h2,.footer-cta h2 span{ -webkit-text-stroke:2px #fff!important;}
  .benefit-card h3{font-size:14px!important;}
  .benefit-card p{font-size:10.5px!important;}
  .area-footer h2{font-size:29px!important;}
  .footer-cta h2{font-size:27px!important;}
  .footer-wa-btn{width:100%!important;font-size:14px!important;padding:11px 12px!important;}
}

.pestaku-footer{position:relative!important;isolation:isolate!important;overflow:hidden!important;width:100%!important;min-height:560px!important;margin-top:28px!important;background-image:var(--footer-art)!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important;color:#fff!important;font-family:Poppins,"Segoe UI",Arial,sans-serif!important}.pestaku-footer .pf-overlay{position:absolute!important;inset:0!important;z-index:0!important;background:linear-gradient(90deg,rgba(210,20,120,.5),rgba(210,20,120,.12) 48%,transparent 72%)!important}.pestaku-footer .pf-wrap{position:relative!important;z-index:1!important;width:min(1180px,calc(100% - 48px))!important;min-height:500px!important;margin:auto!important;padding:62px 0 90px!important;display:grid!important;grid-template-columns:minmax(330px,1fr) minmax(430px,1fr)!important;gap:70px!important}.pf-copy{max-width:500px!important;text-shadow:0 2px 5px rgba(70,0,45,.3)!important}.pf-site{font-size:clamp(42px,5vw,64px)!important;line-height:.95!important;font-weight:900!important;letter-spacing:-3px!important;color:#f52388!important;-webkit-text-stroke:2.5px #fff!important;paint-order:stroke fill!important}.pf-site span{color:#087bc1!important}.pf-tag{font-size:17px!important;font-weight:800!important;margin:12px 0 16px!important}.pf-copy p{font-size:14px!important;line-height:1.6!important;font-weight:600!important;max-width:450px!important;margin:0 0 22px!important}.pf-wa{display:inline-flex!important;align-items:center!important;padding:12px 23px!important;border-radius:999px!important;background:#ef197e!important;color:#fff!important;text-decoration:none!important;font-weight:800!important;font-size:15px!important;border:3px solid #fff!important;box-shadow:0 8px 22px rgba(185,0,91,.3)!important}.pf-nav{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:28px!important;padding-top:20px!important}.pf-nav h3{margin:0 0 12px!important;font-size:18px!important;font-weight:900!important}.pf-nav a{display:block!important;color:#fff!important;text-decoration:none!important;font-size:13px!important;font-weight:700!important;margin:7px 0!important;text-shadow:0 2px 4px rgba(70,0,45,.3)!important}.pf-social{display:flex!important;gap:12px!important}.pf-social a{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;border:2px solid #fff!important;border-radius:50%!important;font-size:20px!important;margin:0!important}.pf-bottom{position:absolute!important;z-index:2!important;left:0!important;right:0!important;bottom:0!important;display:flex!important;justify-content:space-between!important;padding:14px max(24px,calc((100% - 1180px)/2))!important;background:rgba(8,92,175,.78)!important;color:#fff!important;font-size:11px!important;font-weight:600!important}@media(max-width:900px){.pestaku-footer{min-height:600px!important;background-position:65% center!important}.pestaku-footer .pf-wrap{grid-template-columns:1fr!important;gap:25px!important;padding-top:45px!important}.pf-copy{max-width:56%!important}.pf-nav{grid-template-columns:repeat(3,1fr)!important}}@media(max-width:600px){.pestaku-footer{min-height:650px!important;background-size:auto 100%!important;background-position:69% center!important}.pestaku-footer .pf-wrap{width:calc(100% - 28px)!important;min-height:590px!important;padding:30px 0 100px!important;display:block!important}.pf-copy{max-width:58%!important}.pf-site{font-size:34px!important;letter-spacing:-1.8px!important;-webkit-text-stroke:1.7px #fff!important}.pf-tag{font-size:11px!important;margin:8px 0 12px!important}.pf-copy p{font-size:10px!important;line-height:1.5!important;margin-bottom:14px!important}.pf-wa{font-size:11px!important;padding:9px 15px!important;border-width:2px!important}.pf-nav{margin-top:24px!important;grid-template-columns:1fr 1fr!important;gap:20px 12px!important}.pf-nav h3{font-size:13px!important;margin-bottom:8px!important}.pf-nav a{font-size:10px!important;margin:5px 0!important}.pf-social a{width:34px!important;height:34px!important;font-size:17px!important}.pf-bottom{padding:10px 14px!important;font-size:7px!important;flex-direction:column!important;gap:3px!important}}

/* FINAL FOOTER RE-LAYOUT: keep every HTML element in the empty pink area */
.pestaku-footer{min-height:620px!important;background-size:cover!important;background-position:center center!important;background-color:#f58ac2!important}
.pestaku-footer .pf-overlay{background:linear-gradient(90deg,rgba(255,113,177,.10),rgba(255,113,177,0) 68%)!important}
.pestaku-footer .pf-wrap{display:block!important;width:min(1180px,calc(100% - 50px))!important;min-height:540px!important;padding:70px 0 105px!important}
.pestaku-footer .pf-copy{width:54%!important;max-width:620px!important;margin:0!important;text-shadow:none!important}
.pestaku-footer .pf-site{font-size:clamp(42px,4.8vw,62px)!important;line-height:1!important;color:#ed187c!important;-webkit-text-stroke:3px #fff!important;paint-order:stroke fill!important;text-shadow:0 3px 0 rgba(8,123,193,.18)!important}
.pestaku-footer .pf-site span{color:#087bc1!important}
.pestaku-footer .pf-tag{display:inline-block!important;margin:8px 0 14px!important;padding:5px 14px!important;border-radius:999px!important;background:#087bc1!important;color:#fff!important;font-size:15px!important;font-weight:900!important;box-shadow:0 4px 0 rgba(0,83,155,.18)!important}
.pestaku-footer .pf-copy p{color:#164c73!important;font-size:14px!important;line-height:1.55!important;font-weight:800!important;max-width:560px!important;margin:0 0 18px!important}
.pestaku-footer .pf-wa{background:#ed187c!important;border:3px solid #fff!important;color:#fff!important;font-size:14px!important;padding:11px 22px!important;box-shadow:0 6px 0 rgba(185,0,91,.18)!important}
.pestaku-footer .pf-nav{width:62%!important;max-width:700px!important;display:grid!important;grid-template-columns:1.05fr 1fr 1fr!important;gap:18px!important;padding-top:42px!important}
.pestaku-footer .pf-nav>div{min-width:0!important}
.pestaku-footer .pf-nav h3{display:inline-block!important;margin:0 0 10px!important;padding:5px 12px!important;border-radius:999px!important;background:#087bc1!important;color:#fff!important;font-size:16px!important;font-weight:900!important;box-shadow:0 4px 0 rgba(0,83,155,.16)!important}
.pestaku-footer .pf-nav a{color:#164c73!important;font-size:13px!important;font-weight:800!important;margin:6px 0!important;text-shadow:none!important}
.pestaku-footer .pf-social{gap:9px!important}
.pestaku-footer .pf-social a{background:#fff!important;color:#087bc1!important;border:3px solid #087bc1!important;width:40px!important;height:40px!important;box-shadow:0 4px 0 rgba(0,83,155,.12)!important}
.pestaku-footer .pf-bottom{background:rgba(8,123,193,.92)!important;font-size:11px!important;padding-top:13px!important;padding-bottom:13px!important}
@media(max-width:900px){
 .pestaku-footer{min-height:650px!important;background-position:65% center!important}
 .pestaku-footer .pf-wrap{width:calc(100% - 34px)!important;padding-top:48px!important}
 .pestaku-footer .pf-copy{width:58%!important}
 .pestaku-footer .pf-nav{width:64%!important;padding-top:34px!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
}
@media(max-width:600px){
 .pestaku-footer{min-height:690px!important;background-size:auto 100%!important;background-position:72% center!important}
 .pestaku-footer .pf-wrap{width:calc(100% - 28px)!important;min-height:620px!important;padding:34px 0 100px!important}
 .pestaku-footer .pf-copy{width:60%!important;max-width:60%!important}
 .pestaku-footer .pf-site{font-size:32px!important;-webkit-text-stroke:2px #fff!important}
 .pestaku-footer .pf-tag{font-size:10px!important;padding:4px 9px!important}
 .pestaku-footer .pf-copy p{font-size:10px!important}
 .pestaku-footer .pf-wa{font-size:10px!important;padding:9px 13px!important}
 .pestaku-footer .pf-nav{width:64%!important;padding-top:28px!important;grid-template-columns:1fr 1fr!important;gap:16px 10px!important}
 .pestaku-footer .pf-nav h3{font-size:11px!important;padding:4px 9px!important}
 .pestaku-footer .pf-nav a{font-size:9px!important;margin:4px 0!important}
 .pestaku-footer .pf-social a{width:31px!important;height:31px!important;font-size:15px!important;border-width:2px!important}
 .pestaku-footer .pf-bottom{font-size:7px!important}
}

/* Footer v18 — image logo + clean playful shapes */
.pestaku-footer{min-height:650px!important;background-size:cover!important;background-position:center center!important;background-color:#f38ac1!important}
.pestaku-footer .pf-overlay{background:linear-gradient(90deg,rgba(255,112,181,.06),rgba(255,112,181,0) 72%)!important}
.pestaku-footer .pf-wrap{width:min(1180px,calc(100% - 56px))!important;min-height:560px!important;padding:58px 0 100px!important;display:grid!important;grid-template-columns:minmax(360px,520px) minmax(420px,1fr)!important;gap:42px!important;align-items:start!important}
.pestaku-footer .pf-copy{width:100%!important;max-width:520px!important;padding:24px 28px 26px!important;border-radius:28px!important;background:rgba(255,255,255,.90)!important;box-shadow:0 12px 30px rgba(153,31,100,.12)!important;border:4px solid rgba(255,255,255,.95)!important;text-shadow:none!important}
.pestaku-footer .pf-site{display:block!important;width:250px!important;height:auto!important;line-height:0!important;margin:0 0 10px!important}
.pestaku-footer .pf-site img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important}
.pestaku-footer .pf-tag{display:inline-block!important;margin:2px 0 14px!important;padding:7px 15px!important;border-radius:999px!important;background:#087bc1!important;color:#fff!important;font-size:14px!important;font-weight:900!important;box-shadow:0 4px 0 rgba(0,83,155,.18)!important}
.pestaku-footer .pf-copy p{color:#174c73!important;font-size:14px!important;line-height:1.6!important;font-weight:700!important;margin:0 0 18px!important;max-width:470px!important}
.pestaku-footer .pf-wa{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#ed187c!important;color:#fff!important;border:3px solid #fff!important;border-radius:999px!important;font-size:14px!important;font-weight:900!important;padding:11px 22px!important;box-shadow:0 6px 0 rgba(185,0,91,.16)!important;text-decoration:none!important}
.pestaku-footer .pf-nav{width:100%!important;max-width:650px!important;padding:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}
.pestaku-footer .pf-nav>div{background:rgba(255,255,255,.88)!important;border:4px solid rgba(255,255,255,.95)!important;border-radius:24px!important;padding:17px 18px 16px!important;box-shadow:0 10px 24px rgba(153,31,100,.10)!important}
.pestaku-footer .pf-nav>div:first-child{grid-column:1/-1}
.pestaku-footer .pf-nav h3{display:inline-flex!important;align-items:center!important;margin:0 0 11px!important;padding:6px 13px!important;border-radius:999px!important;background:#087bc1!important;color:#fff!important;font-size:15px!important;font-weight:900!important;box-shadow:0 4px 0 rgba(0,83,155,.16)!important}
.pestaku-footer .pf-nav a{color:#174c73!important;font-size:13px!important;font-weight:800!important;margin:6px 0!important;text-shadow:none!important;text-decoration:none!important}
.pestaku-footer .pf-nav a:hover{color:#ed187c!important}
.pestaku-footer .pf-social{display:flex!important;gap:10px!important}
.pestaku-footer .pf-social a{display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;background:#fff!important;color:#087bc1!important;border:3px solid #087bc1!important;border-radius:50%!important;font-size:19px!important;margin:0!important;box-shadow:0 4px 0 rgba(0,83,155,.12)!important}
.pestaku-footer .pf-bottom{background:rgba(8,123,193,.93)!important;border:0!important;text-shadow:none!important;font-size:11px!important;padding:13px max(24px,calc((100% - 1180px)/2))!important;color:#fff!important}
@media(max-width:900px){
 .pestaku-footer{min-height:720px!important;background-position:65% center!important}
 .pestaku-footer .pf-wrap{width:calc(100% - 34px)!important;min-height:630px!important;padding-top:42px!important;grid-template-columns:1fr!important;gap:18px!important}
 .pestaku-footer .pf-copy{width:58%!important;max-width:520px!important}
 .pestaku-footer .pf-nav{width:58%!important;max-width:520px!important}
}
@media(max-width:600px){
 .pestaku-footer{min-height:760px!important;background-size:auto 100%!important;background-position:72% center!important}
 .pestaku-footer .pf-wrap{width:calc(100% - 24px)!important;min-height:690px!important;padding:25px 0 100px!important}
 .pestaku-footer .pf-copy{width:62%!important;max-width:none!important;padding:17px 15px 18px!important;border-radius:22px!important;border-width:3px!important}
 .pestaku-footer .pf-site{width:175px!important;margin-bottom:7px!important}
 .pestaku-footer .pf-tag{font-size:10px!important;padding:5px 9px!important;margin-bottom:10px!important}
 .pestaku-footer .pf-copy p{font-size:10px!important;line-height:1.5!important;margin-bottom:12px!important}
 .pestaku-footer .pf-wa{font-size:10px!important;padding:8px 12px!important;border-width:2px!important}
 .pestaku-footer .pf-nav{width:62%!important;grid-template-columns:1fr!important;gap:10px!important}
 .pestaku-footer .pf-nav>div{padding:11px 12px!important;border-width:3px!important;border-radius:18px!important}
 .pestaku-footer .pf-nav>div:first-child{grid-column:auto}
 .pestaku-footer .pf-nav h3{font-size:10px!important;padding:4px 8px!important;margin-bottom:6px!important}
 .pestaku-footer .pf-nav a{font-size:9px!important;margin:4px 0!important}
 .pestaku-footer .pf-social a{width:31px!important;height:31px!important;font-size:15px!important;border-width:2px!important}
 .pestaku-footer .pf-bottom{font-size:7px!important;padding:9px 12px!important;gap:3px!important;flex-direction:column!important}
}

/* v19: benefit shapes lebih transparan agar artwork/awan tetap terlihat */
.cc-benefit{
  background:rgba(54,190,166,.86)!important;
  border:4px solid rgba(255,255,255,.72)!important;
  box-shadow:0 7px 14px rgba(28,91,79,.14)!important;
}
.cc-icon{
  background:#f04b91!important;
  border:4px solid rgba(255,255,255,.82)!important;
  box-shadow:0 3px 8px rgba(122,38,83,.10)!important;
}
/* outline putih tetap terlihat, tetapi tidak menutup background */
.cc-ribbon{
  box-shadow:0 5px 0 rgba(180,36,99,.18)!important;
}
@media(max-width:680px){
  .cc-benefit{
    background:rgba(54,190,166,.84)!important;
    border-width:2px!important;
  }
  .cc-icon{border-width:2px!important;}
}

/* Pesanan untuk acara - elegant compact grid */
.order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px auto 18px;text-align:left;position:relative;z-index:1}
.order-shape{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;background:linear-gradient(135deg,#ffffff 0%,#fff8fc 100%);border:2px solid rgba(255,255,255,.95);box-shadow:0 9px 24px rgba(16,42,67,.08);min-height:78px}
.order-shape:nth-child(2){background:linear-gradient(135deg,#fff4fa 0%,#ffffff 100%)}
.order-shape:nth-child(3){background:linear-gradient(135deg,#f2fbff 0%,#ffffff 100%)}
.order-shape:nth-child(4){background:linear-gradient(135deg,#fffbed 0%,#ffffff 100%)}
.order-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#ed1767,#ff63a4);box-shadow:0 6px 14px rgba(237,23,103,.16);font-size:24px}
.order-shape h3{margin:0 0 4px;color:#0874b8;font:800 15px/1.2 Poppins,sans-serif}
.order-shape p{margin:0;color:#557086;font:500 11px/1.5 Poppins,sans-serif}
.seo-order-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border-radius:999px;background:linear-gradient(135deg,#ed1767,#ff4f9a);color:#fff!important;text-decoration:none;font:800 13px/1 Poppins,sans-serif;box-shadow:0 9px 20px rgba(237,23,103,.2);position:relative;z-index:2;transition:.2s}
.seo-order-cta:hover{transform:translateY(-2px);filter:brightness(1.03)}
@media(max-width:700px){.order-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:17px auto 14px}.order-shape{gap:7px;padding:10px;border-radius:17px;min-height:72px}.order-icon{flex-basis:34px;width:34px;height:34px;border-radius:11px;font-size:18px}.order-shape h3{font-size:11px;line-height:1.15}.order-shape p{font-size:8.5px;line-height:1.42}.seo-order-cta{width:100%;min-height:40px;padding:9px 12px;font-size:10px}}

/* Performance helpers: keep layout dimensions predictable without changing the design. */
img { max-width:100%; }

/* PERFORMANCE: reserve image space and avoid accidental overflow */
img { max-width:100%; }
.slide > img { display:block; }

/* ===== PERFORMANCE SAFETY LAYER ===== */
@media (min-width: 701px) {
  .below-fold-section { content-visibility:auto; contain-intrinsic-size:800px; }
}
@media (max-width: 700px) {
  .below-fold-section { content-visibility:auto; contain-intrinsic-size:900px; }
}


/* FINAL MOBILE GRID: preserve the tablet-style two-column layout on phones. */
@media (max-width:680px){
  .cards, .features { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ===== PESTAKU PREMIUM HAMBURGER MENU ===== */
.nav{
  position:fixed!important; z-index:80!important; top:0!important; right:0!important; bottom:0!important;
  width:min(410px,92vw)!important; height:100dvh!important; padding:22px 18px 18px!important;
  background:linear-gradient(155deg,#fff 0%,#fff7fb 48%,#f1fbff 100%)!important;
  border-left:1px solid rgba(237,23,103,.10)!important;
  box-shadow:-18px 0 55px rgba(16,42,67,.18)!important;
  display:flex!important; flex-direction:column!important; gap:9px!important;
  overflow-y:auto!important; overscroll-behavior:contain!important;
  transform:translateX(105%)!important; visibility:hidden!important; opacity:0!important;
  transition:transform .34s cubic-bezier(.22,.8,.24,1),opacity .22s ease,visibility .34s!important;
}
.nav.open{transform:translateX(0)!important;visibility:visible!important;opacity:1!important}
.nav::before{content:"";display:block;position:absolute;left:0;top:0;width:7px;height:100%;background:linear-gradient(180deg,#ed1767 0%,#ff4f9a 48%,#19b8ec 100%);pointer-events:none}
.nav-top{position:sticky!important;top:-22px;z-index:2;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 2px 15px 10px!important;margin:0 0 3px!important;border-bottom:2px solid rgba(237,23,103,.10)!important;background:linear-gradient(155deg,#fff 0%,#fff8fb 80%,rgba(255,255,255,.96) 100%)!important;color:#087bc1!important;font-size:16px!important;font-weight:900!important}
.nav-top span{display:flex;align-items:center;gap:9px;color:#087bc1!important}
.nav-top span::before{content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#ed1767,#19b8ec);box-shadow:0 0 0 5px rgba(237,23,103,.08)}
.menu-close{width:40px!important;height:40px!important;flex:0 0 40px;border:2px solid rgba(8,123,193,.12)!important;background:#fff!important;border-radius:13px!important;box-shadow:0 6px 16px rgba(16,42,67,.09)!important;color:#ed1767!important;font-size:26px!important;line-height:1!important}
.nav>a{position:relative!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 20px!important;align-items:center!important;gap:9px!important;min-height:58px!important;padding:10px 11px!important;border-radius:17px!important;color:#173f5d!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(8,123,193,.09)!important;box-shadow:0 5px 15px rgba(16,42,67,.045)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease!important}
.nav>a:hover{transform:translateX(-3px)!important;border-color:rgba(237,23,103,.20)!important;background:#fff!important;box-shadow:0 8px 20px rgba(16,42,67,.08)!important}
.nav>a span{width:30px;height:30px;display:grid!important;place-items:center;color:#fff!important;background:linear-gradient(135deg,#ed1767,#ff4f9a)!important;border-radius:10px!important;font-size:10px!important;font-weight:900!important;box-shadow:0 4px 10px rgba(237,23,103,.16)}
.nav>a b{font-size:14px!important;font-weight:800!important;line-height:1.15!important;white-space:normal!important}
.nav>a em{font-style:normal!important;color:#19a9dc!important;font-size:18px!important;font-weight:900!important;text-align:right}
.nav .nav-wa{margin-top:7px!important;min-height:58px!important;color:#fff!important;background:linear-gradient(135deg,#20c863,#10a84f)!important;border:0!important;box-shadow:0 10px 22px rgba(32,200,99,.22)!important}
.nav .nav-wa span{background:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important;font-size:17px!important}
.nav .nav-wa em{color:#fff!important}
.menu-backdrop{z-index:70!important;background:rgba(16,42,67,.34)!important;backdrop-filter:blur(5px)!important}
@media(max-width:680px){
  .nav{width:min(390px,92vw)!important;padding:16px 12px 14px!important;gap:8px!important}
  .nav-top{top:-16px;padding:7px 3px 12px 8px!important;font-size:14px!important}
  .nav>a{min-height:54px!important;padding:9px 9px!important;border-radius:15px!important;grid-template-columns:31px minmax(0,1fr) 17px!important;gap:7px!important}
  .nav>a span{width:28px;height:28px;border-radius:9px!important;font-size:9px!important}
  .nav>a b{font-size:12.5px!important}
  .nav>a em{font-size:16px!important}
  .menu-close{width:36px!important;height:36px!important;flex-basis:36px!important}
  .nav .nav-wa{margin-top:5px!important}
}
@media(min-width:681px){.nav{width:410px!important}}

/* Keep the MASTER hamburger visually aligned with the multi-page Pestaku theme. */
.menu-backdrop{z-index:89!important}
@media(max-width:680px){
  .nav{width:min(390px,92vw)!important;background:linear-gradient(180deg,#fff 0%,#fff8fc 55%,#f2fffb 100%)!important;border-left:1px solid rgba(8,123,193,.10)!important;box-shadow:-20px 0 55px rgba(16,42,67,.18)!important}
  .nav>a{border-radius:21px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 9px 24px rgba(16,42,67,.07)!important}
}

/* FINAL FIX — Layanan Kami: tampilkan artwork utuh di semua ukuran */
.layanan-kami .lk-card .lk-image,
.lk-grid .lk-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* RESPONSIVE IMAGE DELIVERY — preserve the existing visual layout */
img { image-rendering:auto; }
.layanan-kami .lk-card .lk-image, .lk-grid .lk-image { object-fit:contain !important; object-position:center !important; height:auto !important; }
@media (max-width:680px){
  .slider{aspect-ratio:2/1 !important; height:auto !important; min-height:0 !important; max-height:none !important;}
  .slide>img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center !important;}
  .lk-card{min-width:0 !important;}
  .lk-image{width:100% !important;height:auto !important;object-fit:contain !important;}
}

/* V11 MOBILE POLISH — tablet-like layout, smaller typography, natural artwork proportions */
@media (max-width:680px){
  /* Header scallop: smaller and calmer on phones */
  .site-header::after{
    bottom:-10px !important;
    height:12px !important;
    background-size:42px 12px !important;
    background-image:radial-gradient(21px 11px at 21px 0,#fff 98%,transparent 100%) !important;
  }

  /* Keep hero exactly tablet-like and fully visible */
  .slider{aspect-ratio:2/1 !important;height:auto !important;min-height:0 !important;max-height:none !important;}
  .slide>img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;}

  /* Promo: scale text/controls down so no HTML overlays collide */
  .cotton-promo{width:100% !important;aspect-ratio:1121/1403 !important;overflow:hidden !important;}
  .cc-title{
    top:11.7% !important;left:5% !important;right:5% !important;
    font-size:clamp(22px,6.0vw,38px) !important;
    line-height:1.02 !important;letter-spacing:-1px !important;
    -webkit-text-stroke:3px #fff !important;
  }
  .cc-title span{-webkit-text-stroke:2.5px #fff !important;}
  .cc-ribbon{
    top:25.3% !important;left:14% !important;width:72% !important;
    min-height:34px !important;padding:7px 8px !important;
    font-size:clamp(10px,3.1vw,17px) !important;line-height:1.15 !important;
  }
  .cc-benefits{
    left:4% !important;top:35.5% !important;width:45% !important;
    gap:1.2% !important;
  }
  .cc-benefit{
    min-height:52px !important;height:auto !important;
    border-width:2px !important;border-radius:0 12px 12px 0 !important;
  }
  .cc-icon{
    flex:0 0 45px !important;width:45px !important;height:45px !important;
    margin-left:-3px !important;border-width:2px !important;font-size:17px !important;
  }
  .cc-benefit-text{
    font-size:clamp(8px,2.05vw,11px) !important;
    line-height:1.18 !important;padding:0 4px !important;
  }
  .cc-bottom-copy{
    left:3% !important;bottom:3.2% !important;width:42% !important;
    padding:4% 3% 1% !important;
    font-size:clamp(7px,1.75vw,10px) !important;
    line-height:1.32 !important;
  }
  .cc-bottom-cta{right:3% !important;bottom:3.2% !important;width:40% !important;}
  .cc-limited{font-size:clamp(11px,3.1vw,18px) !important;-webkit-text-stroke:1.5px #fff !important;}
  .cc-contact{font-size:clamp(9px,2.5vw,14px) !important;padding:3% 2% !important;}

  /* Layanan Kami: preserve natural image ratio and compact text */
  .layanan-kami .lk-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
  .layanan-kami .lk-image,.lk-grid .lk-image{width:100% !important;height:auto !important;aspect-ratio:auto !important;object-fit:contain !important;}
  .lk-name{font-size:13px !important;line-height:1.15 !important;}
  .lk-desc{font-size:8px !important;line-height:1.3 !important;}

  /* Footer: do NOT force 16:9 artwork into a tall phone box. Keep original proportions. */
  .pestaku-footer{
    min-height:590px !important;
    height:auto !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    background-color:#f38ac1 !important;
  }
  .pestaku-footer .pf-wrap{
    min-height:560px !important;
    padding:25px 0 100px !important;
  }
}