/* Spatial Glass Light: Beranda. Rollback: hapus <link> home-clay di view home */
.hero-split, .explore-section, .site-header {
  --ink: #0f1b2d; --soft: #52607a; --green: #16a34a;
  --glass: linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  --glass-line: rgba(255,255,255,.95);
  --glass-shadow: 0 40px 60px -30px rgba(40,70,120,.28), 0 14px 26px -14px rgba(40,70,120,.18),
                  inset 0 1px 0 #fff, inset 0 -1px 0 rgba(120,150,200,.18);
}
body:has(.hero-split) { background: #f4f8fb; color: var(--ink, #0f1b2d); }

/* ===== HEADER terang (hanya di beranda; menu mobile tetap seperti asli) ===== */
.site-header, .site-header.scrolled {
  background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 30px -12px rgba(40,70,120,.2);
}
.title-text { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
.nav-capsule { background: rgba(255,255,255,.7); border: 1px solid #fff; box-shadow: 0 8px 20px -10px rgba(40,70,120,.25); }
.nav-menu a { color: var(--soft); }
.nav-menu a:hover { color: var(--green); }
.nav-menu a.active { background: #fff; color: var(--green); border: 1px solid rgba(22,163,74,.25); box-shadow: 0 6px 14px -6px rgba(22,163,74,.35); }
.search-toggle, .menu-toggle { background: rgba(255,255,255,.75); border: 1px solid #fff; color: var(--ink); box-shadow: 0 6px 14px -6px rgba(40,70,120,.25); }
.menu-toggle span { background: var(--ink); }
.menu-toggle:hover span { background: var(--green); }

/* ===== HERO: cahaya ambient ===== */
.hero-split {
  background:
    radial-gradient(55% 50% at 85% 20%, rgba(125,211,252,.55), transparent 70%),
    radial-gradient(50% 50% at 8% 15%, rgba(134,239,172,.50), transparent 70%),
    radial-gradient(45% 45% at 60% 105%, rgba(196,181,253,.45), transparent 70%),
    radial-gradient(30% 30% at 40% 60%, rgba(253,186,116,.25), transparent 70%),
    #f4f8fb;
}
.hero-split::before, .hero-split::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(40px); animation: spaceDrift 16s ease-in-out infinite;
}
.hero-split::before { width: 380px; height: 380px; top: -120px; left: 40%; background: rgba(74,222,128,.28); }
.hero-split::after  { width: 320px; height: 320px; bottom: -120px; left: -60px; background: rgba(56,189,248,.26); animation-delay: -8s; }
@keyframes spaceDrift {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(30px,-24px,0); }
}
.hero-split-container { position: relative; z-index: 2; }

.hero-badge-top {
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(16px);
}
.title-line-sm { color: var(--soft); }
.title-line-lg { color: var(--ink); text-shadow: 0 18px 30px rgba(40,70,120,.18); }
.title-highlight {
  background: linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 10px 16px rgba(14,165,233,.25));
}
.hero-tagline svg { color: #16a34a; }
.hero-tagline p { color: var(--ink); }

.btn-enter {
  background: linear-gradient(160deg, #4ade80 0%, #16a34a 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.12),
              0 20px 34px -12px rgba(22,163,74,.6), 0 0 0 1px rgba(255,255,255,.5);
}
.btn-enter:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
              0 28px 44px -12px rgba(22,163,74,.7), 0 0 0 1px #fff; }

/* ===== Kolase foto: panel kaca berlapis ===== */
.hero-right { perspective: 1400px; }
.hero-right::before {
  content: ""; position: absolute; inset: 6% -4% -6% 8%; border-radius: 40px;
  background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(20px);
  transform: translateZ(-60px) rotateY(-14deg) rotateX(7deg) translate(26px,26px);
}
.bento-grid { position: relative; transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(7deg); gap: 18px; }
.bento-item {
  padding: 8px; border-radius: 28px; border: 1px solid var(--glass-line);
  background: var(--glass); backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  animation: panelFloat 7s ease-in-out infinite;
}
.bento-item img { border-radius: 20px; }
.bento-large { --z: 20px; }
.bento-small:nth-child(2) { --z: 70px; animation-delay: -2.3s; }
.bento-small:nth-child(3) { --z: 110px; animation-delay: -4.6s; }
@keyframes panelFloat {
  0%, 100% { transform: translateZ(var(--z, 0)) translateY(0); }
  50% { transform: translateZ(var(--z, 0)) translateY(-12px); }
}

/* ===== EXPLORE ===== */
.explore-section {
  background:
    radial-gradient(45% 40% at 12% 25%, rgba(134,239,172,.40), transparent 70%),
    radial-gradient(45% 40% at 92% 70%, rgba(196,181,253,.40), transparent 70%),
    radial-gradient(40% 35% at 55% 0%, rgba(125,211,252,.35), transparent 70%),
    #f4f8fb;
}
.explore-section::before { display: none; }
.explore-label-top {
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--green);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(14px);
}
.explore-dot { background: var(--green); }
.explore-title { color: var(--ink); text-shadow: 0 18px 30px rgba(40,70,120,.15); }
.explore-title-accent {
  background: linear-gradient(135deg, #16a34a, #0ea5e9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.explore-subtitle { color: var(--soft); }

.explore-arrow {
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(12px);
}
.explore-arrow:hover { background: var(--glass); color: var(--green); border-color: rgba(22,163,74,.4); }

.explore-slider { padding: 26px 16px 50px; perspective: 1100px; }
.explore-card {
  position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 26px;
  backdrop-filter: blur(18px); box-shadow: var(--glass-shadow);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s;
}
.explore-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.9), transparent 55%);
  transition: opacity .4s;
}
.explore-card:hover {
  transform: translateY(-14px) rotateX(5deg) rotateY(-5deg);
  border-color: #fff;
  box-shadow: var(--glass-shadow), 0 44px 60px -24px rgba(40,70,120,.4);
}
.explore-card:hover::after { opacity: 1; }
.explore-card.is-featured {
  background: linear-gradient(145deg, rgba(187,247,208,.85), rgba(255,255,255,.5));
  border-color: #fff;
}
.explore-card-badge, .explore-card-badge.badge-featured {
  background: rgba(255,255,255,.8); border: 1px solid #fff; color: var(--soft);
  box-shadow: 0 4px 10px -4px rgba(40,70,120,.2);
}
.explore-card-badge.badge-featured { color: var(--green); }
.explore-card-image { border-radius: 16px; box-shadow: 0 16px 24px -12px rgba(40,70,120,.4), 0 0 0 3px #fff; }
.explore-card-title { color: var(--ink); }
.explore-card-desc { color: var(--soft); }
.explore-card-more { color: var(--green); }

.explore-cta-card {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 28px;
  box-shadow: var(--glass-shadow); backdrop-filter: blur(18px);
}
.explore-cta-text { color: var(--soft); }
.explore-cta-btn {
  background: linear-gradient(160deg, #4ade80, #16a34a); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 28px -10px rgba(22,163,74,.6);
}

/* ===== HP & aksesibilitas ===== */
@media (max-width: 992px) {
  .hero-right::before { display: none; }
  .bento-grid { transform: none; gap: 12px; }
  .bento-item { animation: none; transform: none; padding: 5px; border-radius: 20px; backdrop-filter: none; background: rgba(255,255,255,.8); }
  .bento-item img { border-radius: 15px; }
  .hero-split::before, .hero-split::after { animation: none; }
  .explore-card { backdrop-filter: none; background: rgba(255,255,255,.75); }
  .explore-card:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-split::before, .hero-split::after, .bento-item { animation: none !important; }
}