/* ============================================================
   Nuetta Travel — custom CSS (dipakai semua halaman)
   Brand final: Coral Peach #FF8A65 + Sand Beige #F2D9B6 (aksen CTA),
   latar terang putih/beige. Hero tetap memakai Signature Gradient
   guideline (teal → aqua → mint → peach → cream) sebagai identitas.
   TANPA warna cokelat/gelap proyek di luar alarm brand guideline.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Cadangan utility agar perilaku disabled upload gambar (cms_image)
   tetap konsisten meski Tailwind Play CDN belum siap / offline.
   Class ini SANGAT diutamakan oleh Tailwind jika CDN berjalan normal,
   jadi definisi di bawah hanya jalan sebagai fallback. */
.pointer-events-none {
  pointer-events: none !important;
}
.opacity-60 {
  opacity: 0.60;
}

/* Anchor tidak tertutup navbar fixed */
section[id] { scroll-margin-top: 100px; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.serif { font-family: Georgia, "Times New Roman", serif; }

/* Motif titik lembut di latar hero — "bintang siang" warna hangat
   (peach + sand + sky) supaya teksturnya terasa ceria & alami. */
.hero-pattern {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,246,241,.55) 0 2px, transparent 3px),   /* peach tint  */
    radial-gradient(circle at 82% 24%, rgba(242,217,182,.35) 0 2px, transparent 3px),   /* sand beige  */
    radial-gradient(circle at 72% 80%, rgba(230,246,250,.40) 0 2px, transparent 3px);   /* sky blue    */
  background-size: 90px 90px, 120px 120px, 150px 150px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Navbar (sticky; shell kaca hangat) ────────────────── */
/* Desktop: shell melayang fixed agar animasi & backdrop-filter mulus. */
@media (min-width: 1024px) {
  .nav-shell {
    position: fixed;
    top: 1rem;          /* jarak melayang konsisten saat scroll */
    left: 0;
    right: 0;
    max-width: 80rem;   /* = max-w-7xl */
    margin-inline: auto;
  }
}
/* Shell glossy gradient (brand 2 warna — Coral & Sand):
   — kilau putih diagonal (sheen) di lapisan teratas,
   — permukaan kaca Sand tint #FAF6EE → putih krem → Coral tint #FFF6F1,
   — tepi 1px Signature Gradient pastel (echo guideline versi ultra-muda:
     aqua-mint di kiri → peach → cream di kanan),
   — highlight kaca atas + depth bawah peach untuk kesan glossy 3D. */
.nav-shell {
  border: 1px solid transparent;
  background:
    /* sheen glossy */
    linear-gradient(105deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.22) 28%, rgba(255,255,255,0) 52%) padding-box,
    /* permukaan kaca hangat: Sky Blue → krem → Peach tint */
    linear-gradient(100deg, rgba(230,246,250,.94) 0%, rgba(255,252,248,.92) 48%, rgba(255,246,241,.94) 100%) padding-box,
    /* tepi Signature Gradient pastel (guideline: aqua → mint → peach → cream) */
    linear-gradient(90deg, rgba(110,196,201,.36) 0%, rgba(168,221,211,.36) 30%, rgba(255,176,143,.36) 70%, rgba(253,227,208,.40) 100%) border-box;
  box-shadow:
    0 12px 40px rgba(199, 97, 58, .12),        /* bayangan coral hangat */
    inset 0 1px 0 rgba(255, 255, 255, .85),    /* highlight kaca atas */
    inset 0 -1px 0 rgba(255, 138, 101, .10);   /* depth bawah tipis (peach) */
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .6rem .65rem;
  font-size: .875rem;
  font-weight: 600;
  color: #233132;                                   /* ink — charcoal hangat */
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.nav-link:hover {
  color: #007a8a;                                   /* Deep Teal — teks sorotan */
  background: rgba(0, 122, 138, .10);
  transform: translateY(-1px);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .32rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ec4c9, #a8ddd3, #ffd9c0, #ffb08f); /* underline: mint → peach */
  transform: translateX(-50%);
  transition: width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 22px; }
.nav-link.active { color: #007a8a; }               /* Deep Teal — sorotan halaman aktif */

.nav-pill { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.nav-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242, 106, 75, .28);
}

/* Logo: jangan pernah memutihkan logo berwarna dengan filter (brightness/invert) —
   detail vektor & wordmark teal hilang. Di latar gelap, sajikan logo full-color
   di atas chip putih (lihat footer.php & cms/layout.php). */

/* Dropdown: hover desktop + klik (.open) + jembatan anti-gap */
.nav-dropdown {
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease .12s, transform .22s ease .12s, visibility .22s ease .12s;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.nav-dropdown-item { transition: background .2s ease, transform .2s ease; }
.nav-dropdown-item:hover {
  background: #fff6f1;                              /* Coral Peach tint */
  transform: translateX(3px);
}

/* ── Animasi ────────────────────────────────────────────────── */
@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(3deg); }
  50%     { transform: translateY(-12px) rotate(3deg); }
}
@keyframes floatX {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(10px) rotate(-3deg); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,138,101,0); }   /* Coral Peach #FF8A65 */
  50%     { box-shadow: 0 0 0 12px rgba(255,138,101,.14); }
}
.hero-photo-main { animation: floatY 7s ease-in-out infinite; }
.hero-photo-small { animation: floatX 6s ease-in-out infinite; }
.hero-badge { animation: pulseGlow 3s ease-in-out infinite; }
.float-soft { animation: floatY 5s ease-in-out infinite; }