/* ==========================================================================
   CADAS NETWORK — PREMIUM FINISH (tanpa perubahan tipografi)
   Font, ukuran, dan gaya teks = tampilan asli. Hanya warna aksen,
   kartu, tombol, dan ritme gerak yang diperhalus.
   ========================================================================== */
:root {
  --gold: #E6CF9B;
  --gold-deep: #B8975A;
  --hair: rgba(255,255,255,0.07);
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="light"] { --hair: rgba(15,23,42,0.08); --gold: #9A7B3C; --gold-deep: #7A5F28; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* Ruang bernapas */
section { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* Kartu: garis rambut + bayangan dalam (tanpa blur, tanpa glow putih) */
.card {
  background: linear-gradient(165deg, rgba(14,28,52,0.92) 0%, rgba(6,16,32,0.96) 60%, rgba(3,9,18,0.98) 100%);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 30px 60px -30px rgba(0,0,0,0.75);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card:hover {
  border-color: rgba(230,207,155,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.4), 0 40px 80px -30px rgba(0,0,0,0.85), 0 0 60px -20px rgba(45,217,232,0.18);
}
html[data-theme="light"] .card {
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,23,42,0.05), 0 30px 60px -34px rgba(15,23,42,0.28);
}
html[data-theme="light"] .card:hover { border-color: rgba(154,123,60,0.4); }
.card::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(230,207,155,0.10), transparent 55%); }
html[data-theme="light"] .card::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(154,123,60,0.10), transparent 55%); }

/* Tombol */
.btn-primary, .nav-cta {
  background: linear-gradient(135deg, #1B6FB5 0%, #2DD9E8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 14px 34px -12px rgba(45,217,232,0.55);
}
.hero .btn-primary { animation: none; }
.btn-ghost { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.14); }
html[data-theme="light"] .btn-ghost { background: rgba(255,255,255,0.6); border-color: rgba(15,23,42,0.14); }
.btn-primary::after, .nav-cta::after, .reco-btn::after { animation: none; left: -70%; transition: left 1s var(--ease-lux); }
.btn-primary:hover::after, .nav-cta:hover::after, .reco-btn:hover::after { left: 140%; }
.ripple { display: none; }

/* Navbar kaca */
.navbar {
  border-radius: 100px;
  border: 1px solid var(--hair);
  backdrop-filter: blur(22px) saturate(160%);
  background: rgba(10,16,30,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 50px -30px rgba(0,0,0,0.8);
}
html[data-theme="light"] .navbar { background: rgba(255,255,255,0.7); }

/* Kartu rekomendasi: bingkai emas tipis */
.reco-card {
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, rgba(14,28,52,0.9), rgba(5,12,26,0.95)) padding-box,
    linear-gradient(140deg, rgba(230,207,155,0.7), rgba(255,255,255,0.08) 40%, rgba(45,217,232,0.5)) border-box;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.9), 0 0 80px -30px rgba(45,217,232,0.25);
}
html[data-theme="light"] .reco-card {
  background:
    linear-gradient(165deg, #fff, #f5f7fc) padding-box,
    linear-gradient(140deg, rgba(154,123,60,0.7), rgba(15,23,42,0.08) 40%, rgba(8,145,178,0.5)) border-box;
}
.reco-badge { animation: none; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1405; border: none; }

/* Paket unggulan */
.pkg.featured {
  animation: none;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(150deg, var(--gold), rgba(255,255,255,0.1) 45%, #2DD9E8) border-box;
  box-shadow: 0 40px 80px -36px rgba(230,207,155,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pkg-tag { animation: none; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1405; }

/* Ikon tenang */
.fi svg, .service-icon svg, .lb-ic svg { animation: none; }
.card:hover .fi, .card:hover .service-icon { transform: scale(1.08); }

/* Ambient halus */
.cursor-glow.on { opacity: 0.55; }
.grain { opacity: 0.05; }
.scroll-progress { height: 2px; background: linear-gradient(90deg, var(--gold), #2DD9E8); box-shadow: none; }

/* Menu samping tertutup tidak meninggalkan bayangan di tepi layar */
.offcanvas:not(.open) { box-shadow: none; border-left-color: transparent; visibility: hidden; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.4s; }
.offcanvas.open { visibility: visible; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: -10px 0 40px rgba(0,0,0,0.5); }

/* ==========================================================================
   GERAK PREMIUM: lambat, berlapis, blur-ke-tajam, tirai halaman
   ========================================================================== */

/* Masuk: naik pelan + fokus dari blur (bukan sekadar fade) */
.reveal {
  opacity: 0; filter: blur(10px); transform: translateY(26px);
  transition: opacity 1.4s var(--ease-lux), transform 1.4s var(--ease-lux), filter 1.2s var(--ease-lux);
}
.reveal.in { opacity: 1; filter: none; transform: none; }
.reveal.stagger { opacity: 1; filter: none; transform: none; transition: none; }
.card.reveal { transition: opacity 1.4s var(--ease-lux), transform 1.4s var(--ease-lux), filter 1.2s var(--ease-lux), border-color 0.35s ease, box-shadow 0.4s ease; }
.card.reveal.stagger { transition: border-color 0.35s ease, box-shadow 0.4s ease; }
.reveal.stagger.in > * { animation: popIn 1.3s var(--ease-lux) backwards; animation-delay: calc(var(--i,0) * 120ms); }
@keyframes popIn {
  from { opacity: 0; transform: translateY(34px) scale(0.975); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
.wi { transition-duration: 1.3s; transition-timing-function: var(--ease-lux); transition-delay: calc(var(--wi,0) * 70ms + 150ms); }
.card { transition-timing-function: var(--ease-lux); transition-duration: 0.6s; }

/* Hero: tiap elemen fokus dari blur, ritme lebih santai */
@keyframes heroUp { from { filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
body.is-loaded .hero h1 .grad { animation: heroUp 1.4s var(--ease-lux) 0.8s forwards, gradShift 12s linear 2.4s infinite; }
body.is-loaded .hero p.lead { animation-duration: 1.3s; animation-delay: 1.05s; }
body.is-loaded .hero .hero-ctas { animation-duration: 1.3s; animation-delay: 1.25s; }
body.is-loaded .hero .trust-chip-row { animation-duration: 1.3s; animation-delay: 1.45s; }
@keyframes recoIn {
  from { opacity: 0; transform: translateY(60px) rotate(3deg) scale(0.94); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0) rotate(1.5deg); filter: none; }
}
body.is-loaded .reco-card { animation: recoIn 1.6s var(--ease-lux) 0.7s forwards, float 7s ease-in-out 2.4s infinite; }

/* Loader: logo + garis tipis, lalu naik seperti tirai */
.page-loader { transition: transform 1.1s var(--ease-lux), opacity 0.4s ease 0.8s, visibility 0s linear 1.2s; }
.page-loader.done { transform: translateY(-100%); opacity: 0; visibility: hidden; }
.page-loader .pl-bar { width: 120px; height: 1px; }
.page-loader .pl-logo { animation-duration: 2.4s; }

/* Tirai saat pindah halaman */
.curtain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: var(--bg); transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.curtain::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
body.page-leave .curtain { transform: translateY(0); }

/* Parallax berlapis di hero (diisi JS lewat properti translate) */
.hero-content, .reco-card, .hero-stats { will-change: translate; }

/* Garis rambut yang "tergambar" di bawah judul section */
.section-head::after {
  content: ""; display: block; height: 1px; width: 72px; margin-top: 22px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.6s var(--ease-lux) 0.5s;
}
.section-head.reveal.in::after { transform: scaleX(1); }
.section-head[style*="center"]::after, .section-head.center::after { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; }

/* Hover tombol & kartu lebih halus */
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-2px); }
.nav-links a { transition-duration: 0.5s, 0.2s, 0.2s; }

/* Header versi simpel (Daftar & Legal): tetap polos seperti aslinya, tanpa pill/kaca/bayangan */
html header.header-simple .navbar.navbar-simple {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none;
}
html header.header-simple.scrolled { padding: 20px 24px; }