/* =====================================================================
   SAW v3.1 — Top menu kaca (t_6da72719)
   Perintah Pak Kennedy: "glasslike translucent with gradient, aktif glow
   bawahnya tapi soft aja". Berkas terpisah agar tidak menimpa latar-v31.css
   (kartu t_24bfc573). Dimuat PALING AKHIR di index/partner/privasi.
   Header SELALU gelap-kaca (teks terang) supaya kontras AA di atas latar
   section terang maupun gelap; fallback tanpa backdrop-filter = lebih pekat.
   ===================================================================== */
:root{
  --kaca-navy-a:#04142a; --kaca-navy-b:#071e37; --kaca-emas:#e8bf65;
  --kaca-teks:#f4ecdd; --kaca-teks-aktif:#f6dca0;
}

/* ---------- 1. Lapisan kaca ---------- */
.header{color:var(--kaca-teks);isolation:isolate}
.header::before{                       /* lapisan kaca (menggantikan bayangan gradasi lama) */
  inset:0;z-index:-1;opacity:1;
  background:
    linear-gradient(100deg,rgba(4,20,42,.92) 0%,rgba(7,30,55,.90) 55%,rgba(40,44,46,.90) 82%,rgba(70,58,36,.90) 100%);
  border-bottom:1px solid rgba(232,191,101,.30);
  box-shadow:0 10px 30px -18px rgba(4,20,42,.75);
  transition:background var(--dur-2),box-shadow var(--dur-2)
}
.header::after{                        /* garis bawah tipis bercahaya */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,rgba(232,191,101,0) 0%,rgba(232,191,101,.55) 30%,rgba(246,220,160,.85) 50%,rgba(232,191,101,.55) 70%,rgba(232,191,101,0) 100%);
  box-shadow:0 0 10px 0 rgba(232,191,101,.22)
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .header::before{
    background:
      radial-gradient(120% 140% at 100% 0%,rgba(232,191,101,.12) 0%,rgba(232,191,101,0) 46%),
      linear-gradient(100deg,rgba(4,20,42,.66) 0%,rgba(7,30,55,.60) 60%,rgba(7,30,55,.66) 100%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)
  }
  /* setelah digulir: kaca lebih pekat agar teks tetap AA di atas section terang */
  .header.padat::before{
    background:
      radial-gradient(120% 140% at 100% 0%,rgba(232,191,101,.14) 0%,rgba(232,191,101,0) 46%),
      linear-gradient(100deg,rgba(4,20,42,.86) 0%,rgba(7,30,55,.80) 60%,rgba(7,30,55,.76) 100%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)
  }
}
/* override gaya padat lama (pasir terang) — header tetap kaca gelap */
.header.padat{background:transparent;color:var(--kaca-teks);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.header.padat::before{opacity:1}
.header .btn--garis,.header.padat .btn--garis{--fg:var(--kaca-teks);--bd:rgba(232,191,101,.75);background:rgba(232,191,101,.06)}
.header .btn--garis:hover{background:rgba(232,191,101,.16)}
.header .tombol-menu{border-color:rgba(232,191,101,.75);color:var(--kaca-teks);background:rgba(244,236,221,.04)}

/* ---------- 2. Menu aktif/hover: glow bawah LEMBUT ---------- */
.nav a{color:var(--kaca-teks);border-radius:10px;transition:color 260ms var(--ease-tiba)}
.nav a::after{                         /* garis cahaya tipis */
  left:18px;right:18px;bottom:9px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(232,191,101,0),rgba(246,220,160,.95) 50%,rgba(232,191,101,0));
  box-shadow:0 0 8px 1px rgba(232,191,101,.35);
  transform:scaleX(.3);transform-origin:center;opacity:0;
  transition:transform 380ms var(--ease-tiba),opacity 380ms var(--ease-tiba)
}
.nav a::before{                        /* elips cahaya lembut di bawah teks */
  content:"";position:absolute;left:8%;right:8%;bottom:2px;height:22px;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,rgba(232,191,101,.30) 0%,rgba(232,191,101,.10) 55%,rgba(232,191,101,0) 100%);
  opacity:0;transform:translateY(4px);transition:opacity 420ms var(--ease-tiba),transform 420ms var(--ease-tiba)
}
.nav a:hover::after{opacity:.7;transform:scaleX(.8)}
.nav a:hover::before{opacity:.6;transform:none}
.nav a[aria-current="true"],.nav a[aria-current="page"]{color:var(--kaca-teks-aktif)}
.nav a[aria-current="true"]::after,.nav a[aria-current="page"]::after{opacity:1;transform:scaleX(1)}
.nav a[aria-current="true"]::before,.nav a[aria-current="page"]::before{opacity:1;transform:none}

/* fokus keyboard: cincin emas tegas (tidak bergantung warna latar) */
.header :focus-visible{outline:2px solid var(--kaca-emas);outline-offset:2px;box-shadow:0 0 0 5px rgba(232,191,101,.22);border-radius:10px}

/* ---------- 3. Bar promo di atas menu: menyatu ---------- */
.promo-sticky{background:linear-gradient(100deg,#f7ecd2 0%,#f3e2bb 60%,#efd9a8 100%);border-bottom:1px solid rgba(201,164,92,.55);box-shadow:0 1px 0 rgba(4,20,42,.08)}
.promo-sticky + .header::before,.header.padat::before{border-top:0}

/* ---------- 4. HP: laci menu ikut kaca ---------- */
.menu-mob{
  background:
    radial-gradient(110% 60% at 100% 0%,rgba(232,191,101,.14) 0%,rgba(232,191,101,0) 50%),
    linear-gradient(170deg,rgba(4,20,42,.97) 0%,rgba(7,30,55,.95) 100%);
  color:var(--kaca-teks)
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .menu-mob{
    background:
      radial-gradient(110% 60% at 100% 0%,rgba(232,191,101,.16) 0%,rgba(232,191,101,0) 50%),
      linear-gradient(170deg,rgba(4,20,42,.84) 0%,rgba(7,30,55,.78) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)
  }
}
.menu-mob__atas{position:relative;padding-bottom:14px}
.menu-mob__atas::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(232,191,101,0),rgba(246,220,160,.7) 50%,rgba(232,191,101,0));box-shadow:0 0 10px rgba(232,191,101,.2)}
.menu-mob .tutup{border-color:rgba(232,191,101,.75)!important}
.menu-mob a:not(.btn){position:relative;border-bottom:1px solid rgba(232,191,101,.16);transition:color 260ms var(--ease-tiba)}
.menu-mob a:not(.btn)::after{content:"";position:absolute;left:0;width:46%;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(246,220,160,.95),rgba(232,191,101,0));box-shadow:0 0 8px rgba(232,191,101,.30);
  opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity 380ms var(--ease-tiba),transform 380ms var(--ease-tiba)}
.menu-mob a:not(.btn)::before{content:"";position:absolute;left:-8px;width:60%;bottom:0;height:26px;pointer-events:none;
  background:radial-gradient(50% 70% at 30% 100%,rgba(232,191,101,.22),rgba(232,191,101,0));opacity:0;transition:opacity 420ms var(--ease-tiba)}
.menu-mob a[aria-current="true"]:not(.btn){color:var(--kaca-teks-aktif)}
.menu-mob a[aria-current="true"]:not(.btn)::after,.menu-mob a:not(.btn):hover::after{opacity:1;transform:none}
.menu-mob a[aria-current="true"]:not(.btn)::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .nav a,.nav a::before,.nav a::after,.menu-mob a,.menu-mob a::before,.menu-mob a::after{transition:none!important}
}
@media (forced-colors:active){
  .header::before,.menu-mob{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav a[aria-current="true"]{text-decoration:underline}
}

/* ---------- 5. Kritik putaran 1: tombol "Kembali ke beranda" di HP (partner/privasi) tidak menumpuk ---------- */
.header .btn--kecil{white-space:nowrap}
@media (max-width:479px){
  .header:not(:has(.tombol-menu)) .merek span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------- 6. Perbaikan t_e02be76b: header HP, tombol Menu menimpa "SAW Tour & Travel" (lapor Pak Ken 6 Nov) ----------
   Brand boleh menyusut (min-width:0) + elipsis sebagai jaring pengaman untuk label apa pun.
   <=400px: tombol Menu jadi ikon saja 48x48 (nama aksesibel tetap "Menu" lewat aria-label + teks font-size:0),
   teks brand sedikit diperkecil. Tidak ada perubahan di >=401px selain jaring pengaman elipsis. */
.header .wadah{min-width:0}
.header .merek{min-width:0;flex:0 1 auto}
.header .merek img{flex:none}
.header .merek span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.header .tombol-menu,.header .btn--kecil{flex:none}
@media (max-width:400px){
  .header .wadah{gap:12px}
  .header .merek{gap:10px}
  .header .merek span{font-size:1.3rem}
  .header .tombol-menu{width:48px;padding:0;justify-content:center;gap:0;font-size:0;line-height:0}
  .header .tombol-menu svg{width:24px;height:24px}
}
@media (max-width:340px){
  .header .merek span{font-size:1.15rem}
}
@media (min-width:640px) and (max-width:767px){
  .header .wadah{gap:12px}
}