:root{
  --bg:#0b1220; --bg-2:#0a0f1c; --card:#0e172a; --muted:#94a3b8; --brand:#0ea5e9; --brand-2:#22d3ee; --text:#e2e8f0; --ok:#22c55e;
  --radius:16px; --shadow:0 10px 30px rgba(2,8,23,.35); --shadow-sm:0 6px 16px rgba(2,8,23,.2);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg-2);color:var(--text);scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin-inline:auto;padding:0 20px}
.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(10,15,28,.7);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.brand-logo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.brand-name{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:12px;align-items:center}
.menu a{opacity:.85;padding:10px 12px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.06);opacity:1}
.btn{border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#00131c;font-weight:700;box-shadow:var(--shadow-sm)}
.btn-light{background:#fff;color:#0b1220}
.hamb{display:none;background:transparent;border:0;color:var(--text);font-size:26px}
@media (max-width: 860px){
  .menu{display:none}
  .hamb{display:block}
  .mobile{position:fixed;inset:64px 14px auto 14px;background:rgba(12,18,32,.98);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;display:none;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
  .mobile a{padding:12px;border-radius:10px;opacity:.9}
  .mobile a:hover{background:rgba(255,255,255,.06)}
}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns: 1.15fr 1fr;gap:32px;padding:48px 0}
.badge{display:inline-flex;gap:8px;align-items:center;background:rgba(34,211,238,.15);border:1px solid rgba(34,211,238,.35);padding:6px 10px;border-radius:999px;color:#7dd3fc;font-size:13px}
.title{font-size:clamp(26px,5vw,44px);line-height:1.1;margin:14px 0 6px}
.grad{
  display:inline-block; /* penting biar clipping rapi */
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;  /* Safari/Chrome/iOS */
  background-clip: text;           /* standar */
  -webkit-text-fill-color: transparent; /* Safari/iOS fix */
  color: transparent;              /* fallback */
}

/* Fallback kalau browser nggak support background-clip:text */
@supports not (-webkit-background-clip: text) {
  .grad{ background:none; color:var(--brand); }
}

.subtitle{font-size:17px;color:var(--muted);max-width:60ch}
.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.hero-illus{align-self:center}
.list{display:grid;grid-template-columns: repeat(3,1fr);gap:14px;margin-top:18px}
.list .item{background:rgba(255,255,255,.03);border:1px dashed rgba(148,163,184,.25);padding:12px;border-radius:12px;font-size:14px;color:#cbd5e1}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.subtle{color:#9fb0c8;display:block;margin-top:8px;font-size:13px}

@media (max-width: 1020px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-illus{order:-1}
  .list{grid-template-columns:1fr}
  .grid-form{grid-template-columns:1fr}
}

/* Sections */
section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
h2{font-size:26px;margin:0 0 14px}
p.lead{color:var(--muted);max-width:70ch}

/* Grid umum */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}}

/* Icons kecil */
.i{width:20px;height:20px;margin-right:8px;vertical-align:-3px}

/* Advantages */
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.check .i{flex:0 0 20px}

/* Pricing Kartu */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{position:relative}
.price-card h3{margin:8px 0;display:flex;align-items:center;gap:8px}
.price{font-size:26px;font-weight:800}
.price small{font-weight:600;color:#a3b2c6}
.badge{font-weight:700}
.most{border:1px solid rgba(34,211,238,.5);box-shadow:0 12px 38px rgba(34,211,238,.18)}
@media (max-width: 960px){.pricing{grid-template-columns:1fr}}

/* Tabel Harga Lengkap */
.table-wrap{margin-top:16px;overflow-x:auto;border:1px solid rgba(255,255,255,.06);border-radius:12px}
.price-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.price-table th,.price-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.price-table thead th{position:sticky;top:0;background:rgba(34,211,238,.08);color:#7dd3fc;font-weight:800;z-index:1}
.price-table tbody tr:hover{background:rgba(255,255,255,.03)}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table .col-price{white-space:nowrap;font-weight:800}
@media (max-width: 720px){.price-table th,.price-table td{padding:12px}.price-table{font-size:14px}}
.notes-list{margin:0;padding:10px 18px 10px 24px;color:#a3b2c6;line-height:1.5}
.notes-list li{margin:6px 0}

/* Galeri */
#galeri figure{overflow:hidden}
#galeri img{border-radius:12px;transition:transform .35s ease}
#galeri img:hover{transform:scale(1.03)}

/* Testimoni */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{display:flex;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#0ea5e9)}
@media (max-width: 980px){.testi{grid-template-columns:1fr}}

/* Coverage */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04)}

/* CTA */
.cta{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.cta .form{display:grid;gap:10px}
.input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text)}
.input:focus{outline:none;border-color:var(--brand)}
@media (max-width: 980px){.cta{grid-template-columns:1fr}}

/* Footer */
.footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.06);color:#9fb0c8;font-size:14px}
.footer-flex{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer-links a{opacity:.9}
.footer-links a:hover{opacity:1}

/* Shimmer Skeleton */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.loading .real{display:none}
.loading .skel{display:block}
.skel{display:none}

/* Floating WA */
.wa-float{position:fixed;right:16px;bottom:80px;z-index:60}
.wa-float a{display:flex;align-items:center;gap:10px;background:#25D366;color:#062d12;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:var(--shadow)}
@media (min-width:980px){.wa-float{bottom:16px}}

/* Accordion minor tweaks */
.card.no-pad{padding:0}
details.acc{border-bottom:1px solid rgba(255,255,255,.06)}
details.acc summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600}
details.acc[open] summary{background:rgba(255,255,255,.04)}
details.acc .pad{padding:0 16px 14px;color:#a3b2c6}

/* Trust Strip */
.strip-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px auto}
.strip-badges span{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:8px 12px;border-radius:999px;color:#cbd5e1}

/* Sticky CTA (mobile only) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;justify-content:center;background:rgba(10,15,28,.9);backdrop-filter:blur(8px);padding:10px;border-top:1px solid rgba(255,255,255,.06)}
.sticky-cta a{display:inline-block;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#00131c;font-weight:800;box-shadow:0 6px 14px rgba(2,8,23,.25)}
@media (min-width:980px){.sticky-cta{display:none}}

/* ======== MOBILE PADDING & SPACING TWEAKS (PASTE DI PALING BAWAH) ======== */

/* HP standar ≤ 480px: longgarkan padding kiri–kanan hero + form */
@media (max-width: 480px){
  /* Lebarkan padding hanya di section Hero agar judul & Form Kilat tidak mepet */
  .hero .container { 
    padding-left: 24px; 
    padding-right: 24px; 
  }

  /* Tambah ruang vertikal hero */
  .hero .wrap { 
    padding: 40px 0; 
  }

  /* Kartu (termasuk Form Kilat) lebih lega */
  .card { 
    padding: 16px; 
  }

  /* Jarak antar input di Form Kilat */
  .grid-form { 
    gap: 12px; 
  }

  /* Judul & teks terasa lebih “bernapas” */
  .title{ 
    line-height: 1.15; 
    word-wrap: break-word; 
    margin-top: 10px; 
  }
  .subtitle{ 
    margin-top: 8px; 
  }
  .actions{ 
    margin-top: 16px; 
  }
}

/* HP kecil banget ≤ 360px: sedikit sesuaikan lagi */
@media (max-width: 360px){
  .hero .container { 
    padding-left: 20px; 
    padding-right: 20px; 
  }
  .title { 
    margin-top: 12px; 
  }
}

/* Safe-area untuk iPhone notch (biar tidak kepotong sisi kiri/kanan) */
@supports (padding: max(0px)) {
  @media (max-width: 480px){
    .hero .container {
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
  }
}


/* ===== Visibility rules: desktop vs mobile ===== */
@media (max-width: 979px){
  /* Sembunyikan floating WA di HP */
  .wa-float{ display:none !important; }
}
@media (min-width: 980px){
  /* Sembunyikan sticky-cta di desktop (sudah ada, just in case) */
  .sticky-cta{ display:none !important; }
}

/* ===== Sticky CTA modern (mobile) ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:10px;justify-content:center;align-items:center;
  background:rgba(10,15,28,.9);backdrop-filter:blur(8px);
  padding:10px 12px;border-top:1px solid rgba(255,255,255,.06)
}
.sticky-cta .cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  font-weight:800; text-decoration:none;
  box-shadow:0 6px 14px rgba(2,8,23,.25);
  transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  will-change: transform;
}
.sticky-cta .cta-btn .ico{display:inline-grid;place-items:center;width:18px;height:18px}
.sticky-cta .cta-btn .ico svg{width:18px;height:18px}

/* Warna tiap tombol */
.cta-wa{
  background:linear-gradient(135deg,#25D366,#1ebe57);
  color:#052d14;
}
.cta-price{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#00131c;
}
.cta-phone{
  background:linear-gradient(135deg,#60a5fa,#38bdf8);
  color:#04121e;
}

/* Hover/tap feel */
.sticky-cta .cta-btn:active{ transform:translateY(1px); }
.sticky-cta .cta-btn:hover{ box-shadow:0 10px 18px rgba(2,8,23,.35); }

/* Subtle pulse untuk tombol WA biar “manggil” */
@keyframes pulseGlow {
  0%,100%{ box-shadow:0 6px 14px rgba(37,211,102,.25) }
  50%{ box-shadow:0 10px 22px rgba(37,211,102,.35) }
}
@media (prefers-reduced-motion: no-preference){
  .cta-wa{ animation:pulseGlow 2.6s ease-in-out infinite; }
}

/* Jaga sticky-cta tidak menimpa konten WA float di desktop */
@media (min-width:980px){
  .wa-float{ bottom:16px; }
}

/* ===== Floating WA (desktop) tetap elegan ===== */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:60;
}
.wa-float a{
  display:flex;align-items:center;gap:10px;
  background:#25D366;color:#062d12;
  padding:12px 16px;border-radius:999px;
  font-weight:800;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float a:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(37,211,102,.25); }


/* ===== Visibility: desktop vs mobile ===== */
@media (max-width: 979px){ .wa-float{ display:none !important; } }
@media (min-width: 980px){ .sticky-cta{ display:none !important; } }

/* ===== Base icon size ===== */
.ico{ width:18px; height:18px; display:inline-block; }


.meta{
    margin-top: 10px;
}
/* =============================
   FIX: Sticky bar segmented + icon di atas, teks di bawah
   (tempel PALING BAWAH CSS)
   ============================= */

/* Bar bawah */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:stretch; /* biar sama tinggi */
  gap:0;                              /* tanpa celah antar segmen */
  padding:10px 12px;
  background:rgba(10,15,28,.9);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.06);
}

/* Setiap tombol jadi segmen: lebar seimbang & layout kolom */
.sticky-cta .btn-cta{
  flex:1 1 0%;               /* bagi rata lebar */
  display:flex !important;   /* paksa flex */
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  padding:10px 0 !important; /* vertikal saja, biar terlihat “menyatu” */
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:center !important;
  min-width:0;               /* cegah overflow label panjang */
}

/* Hanya sisi luar yang rounded */
.sticky-cta .btn-cta:first-child{
  border-top-left-radius:9999px !important;
  border-bottom-left-radius:9999px !important;
}
.sticky-cta .btn-cta:last-child{
  border-top-right-radius:9999px !important;
  border-bottom-right-radius:9999px !important;
}

/* Garis pemisah tipis antar segmen (opsional, bisa dihapus kalau mau benar2 nyatu) */
.sticky-cta .btn-cta + .btn-cta{
  border-left:1px solid rgba(255,255,255,.08);
}

/* Normalisasi ikon: SVG dipakai langsung sebagai .ico */
.sticky-cta .btn-cta .ico{
  width:22px; height:22px; display:block; /* tengah & rapih */
}
.sticky-cta .btn-cta .ico path,
.sticky-cta .btn-cta .ico circle,
.sticky-cta .btn-cta .ico rect{
  vector-effect: non-scaling-stroke;
}
.sticky-cta .btn-cta span{
  display:block; line-height:1; white-space:nowrap; font-size:12px;
}

/* Khusus WA/Phone sedikit lebih besar ikon */
.sticky-cta .btn-cta.wa .ico,
.sticky-cta .btn-cta.phone .ico{ width:24px; height:24px }

/* Pastikan style lama sticky-cta <a> tidak menimpa */
.sticky-cta > a{
  background: none !important;  /* latar belakang pakai varian .btn-cta */
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ====== VARIAN WARNA (ringkas, tetap glow) ====== */
:root{
  --wa:#25D366;    /* WhatsApp */
  --phone:#ef4444; /* Telepon merah */
  --onyx:#0b1220;  /* Hitam harga */
  --gold:#facc15;  /* Emas */
}

/* WA: hijau dengan kilau emas-merah halus */
.btn-cta.wa{
  background:linear-gradient(135deg,var(--wa),#1ebe57) !important;
  color:#052d14 !important;
  position:relative; overflow:hidden;
}
.btn-cta.wa::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -22px 44px rgba(250,204,21,.18),
    inset 0  16px 30px rgba(239,68,68,.08);
  pointer-events:none;
}
.btn-cta.wa::after{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 75%, rgba(255,255,255,.35) 80%, transparent 85%);
  transform:translateX(-120%) rotate(20deg);
  transition:transform .6s ease; pointer-events:none;
}
.btn-cta.wa:hover::after{ transform:translateX(120%) rotate(20deg) }

/* Phone: merah berkilau */
.btn-cta.phone{
  background:linear-gradient(135deg,var(--phone),#dc2626) !important;
  color:#fff !important;
  position:relative; overflow:hidden;
}
.btn-cta.phone::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -22px 44px rgba(239,68,68,.20),
    inset 0  16px 30px rgba(250,204,21,.10);
  pointer-events:none;
}
.btn-cta.phone::after{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 75%, rgba(255,255,255,.35) 80%, transparent 85%);
  transform:translateX(-120%) rotate(20deg);
  transition:transform .6s ease; pointer-events:none;
}
.btn-cta.phone:hover::after{ transform:translateX(120%) rotate(20deg) }

/* Harga: hitam elegan berkilau emas */
.btn-cta.price{
  background:linear-gradient(135deg,var(--onyx),#111827) !important;
  color:#e5e7eb !important;
  position:relative; overflow:hidden;
}
.btn-cta.price::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -22px 44px rgba(250,204,21,.18),
    inset 0  14px 24px rgba(34,211,238,.06);
  pointer-events:none;
}
.btn-cta.price::after{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 75%, rgba(255,255,255,.35) 80%, transparent 85%);
  transform:translateX(-120%) rotate(20deg);
  transition:transform .6s ease; pointer-events:none;
}
.btn-cta.price:hover::after{ transform:translateX(120%) rotate(20deg) }

/* Motion halus */
@keyframes glowPulse{ 0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))} 50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.22))} }
@media (prefers-reduced-motion:no-preference){
  .btn-cta.wa{ animation:glowPulse 2.6s ease-in-out infinite }
  .btn-cta.phone{ animation:glowPulse 3s ease-in-out infinite .3s }
}

/* =========================
   FOOTER + RUANG AMAN STICKY BAR
   ========================= */

/* tinggi sticky bar di HP (samakan dengan tingginya) */
:root{ --sticky-h: 62px; }

/* beri ruang di bawah konten saat sticky bar aktif (mobile) */
@media (max-width: 979px){
  body{ padding-bottom: calc(var(--sticky-h) + 12px); }
}

/* footer style */
.footer{ 
  padding:24px 0; 
  border-top:1px solid rgba(255,255,255,.06); 
  color:#9fb0c8; 
  font-size:14px; 
  background: rgba(10,15,28,.92);
}
.footer-flex{
  display:flex; 
  justify-content:space-between; 
  align-items:flex-start; 
  gap:16px; 
  flex-wrap:wrap;
}
.footer-links a{ opacity:.9; }
.footer-links a:hover{ opacity:1; }

/* Dropdown area di footer */
.footer-dropdown{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px 12px;
}
.footer-dropdown > summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:#e2e8f0;
}
.footer-dropdown > summary::-webkit-details-marker{ display:none; }
.footer-dropdown[open] > summary{ color:#7dd3fc; }

.footer-dropdown ul{
  margin:10px 0 0; padding:0 0 0 14px;
  display:grid; gap:6px;
}
.footer-dropdown a{ color:#cbd5e1; }
.footer-dropdown a:hover{ color:#e2e8f0; }

/* Pastikan sticky bar tetap di atas UI lain */
.sticky-cta{ z-index: 999; }

/* Jika ada anchor ke footer, beri “ruang scroll” biar tak ketutup sticky bar */
footer, #footer, .footer{ scroll-margin-bottom: calc(var(--sticky-h) + 16px); }


/* ===== Sisipan Foto Tengah + Shimmer ===== */
.figure-inline{
  margin: clamp(10px, 2vw, 20px) auto;
  padding: 0 5px;
  text-align: center;
}

/* kotak penampung (biar tidak loncat saat loading) */
.figure-inline .ph{
  position: relative;
  aspect-ratio: 4 / 3;                /* 1200x900 */
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* shimmer reuse dari util .skeleton yang sudah ada */
.figure-inline .ph.skeleton{
  background: rgba(255,255,255,.06);
}
.figure-inline .ph.skeleton::after{
  content:"";
  position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:shimmer 1.4s infinite;
}

/* gambar */
.figure-inline img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-sm);
  opacity:0;                          /* awalnya tersembunyi */
  transition:opacity .35s ease;
  margin:0 auto;
}

/* ketika sudah loaded: sembunyikan placeholder, tampilkan gambar */
.figure-inline.loaded .ph{ display:none; }
.figure-inline.loaded img{ opacity:1; }

/* caption opsional */
.figure-inline figcaption{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
}

/* ===== Header Logo ===== */
.brand-logo{
  width:36px;height:36px;border-radius:10px;
  background: rgba(255,255,255,.06); /* soft bg agar tepi logo rapih */
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
  overflow:hidden; /* biar sudut logo ikut rounded */
}
.brand-logo .logo-img{
  width:100%;height:100%;object-fit:contain;display:block;
}

/* ===== Hero Logo (opsional) ===== */
.logo-hero{
  display:inline-grid;place-items:center;
  margin-bottom:10px;
}
.logo-hero img{
  width: clamp(64px, 10vw, 96px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(2,8,23,.35));
}
/* ===== Footer Logo ===== */
.footer-brand{
  display:flex;align-items:center;gap:10px;
  opacity:.9;
}
.footer-brand img{
  width:28px;height:28px;object-fit:contain;display:block;
  border-radius:6px;
  background: rgba(255,255,255,.04);
  padding:3px; /* bingkai tipis supaya konsisten di footer gelap */
}
.footer-brand span{ font-weight:700; color:#e2e8f0; }


/* ===== Slider Brayen ===== */
.slider{
  position:relative; overflow:hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border:1px solid rgba(255,255,255,.06);
  background: var(--card);
}

/* ukuran dasar 600x275 tapi fleksibel */


.slider .track{
  display:flex; height:100%;
  transition: transform .5s ease;
  will-change: transform;
}

.slider .slide{
  position:relative;
  min-width:100%; height:100%;
  overflow:hidden;
}
.slider .slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* caption kecil */
.slider .caption{
  position:absolute; left:10px; bottom:10px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  background:rgba(0,0,0,.35); color:#fff;
  backdrop-filter: blur(4px);
}

/* nav */
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:0; display:grid; place-items:center;
  background:rgba(10,15,28,.6); color:#fff;
  box-shadow:0 6px 16px rgba(2,8,23,.25);
  cursor:pointer; z-index:2;
}
.slider .nav:hover{ background:rgba(10,15,28,.8); }
.slider .prev{ left:8px; } .slider .next{ right:8px; }

/* dots */
.slider .dots{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.slider .dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.35); border:0; cursor:pointer;
}
.slider .dot[aria-selected="true"]{ background: linear-gradient(135deg,var(--brand),var(--brand-2)); }

/* shimmer overlay (sebelum gambar siap) */
.slider .slider-shimmer{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background: rgba(255,255,255,.04);
}
.slider .slider-shimmer .bar{
  position:absolute; inset:0;
  transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: sliderShine 1.2s linear infinite;
}
@keyframes sliderShine{ to { transform: translateX(100%);} }

/* saat sudah siap, sembunyikan shimmer dengan kelas .is-ready */
.slider.is-ready .slider-shimmer{ display:none; }

/* responsive container spacing */
#slider-servis{ padding-top:20px; padding-bottom:20px; }

/* ====== FIX SLIDER: 1 gambar penuh per slide ====== */
.slider .viewport{ overflow:hidden; }            /* pastikan klip */
.slider .track{ display:flex; transition:transform .5s ease; }
.slider .slide{ min-width:100%; margin:0; padding:0; box-sizing:border-box; }
.slider figure{ margin:0; }                      /* hapus margin default figure */
.slider .slide img{ display:block; width:100%; height:100%; object-fit:cover; }

/* kalau masih terlihat “mengintip”, paksa nol-kan gap & border internal */
.slider .track, .slider .slide{ gap:0; border:0; }


/* ===== Slider Servis: rapetin jarak & geser naik di HP ===== */

/* Desktop/tablet: sedikit lebih rapat dari default 56px */
#slider-servis{ 
  padding-top: 32px; 
  padding-bottom: 32px; 
}

/* HP: naik ~20px + jarak vertikal lebih tipis */
@media (max-width: 480px){
  #slider-servis{
    margin-top: -80px;          /* geser naik 20px */
    padding-top: 20px;          /* tetap kasih napas */
    padding-bottom: 18px;
  }

  /* Kartu slider lebih tipis paddingnya */
  #slider-servis .slider.card{ 
    padding: 12px; 
  }

  /* Titik navigasi & caption juga dirapetin */
  #slider-servis .dots{ 
    margin-top: 8px; 
    gap: 6px; 
  }
  #slider-servis .caption{
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Kalau slider masih terasa terlalu tinggi, kamu bisa kurangi padding global .card khusus di sini juga */
#slider-servis .card{ padding: 14px; }