/* =====================================================================
 * menu-glass.css - Menu utama sticky bergaya kaca (glassmorphism)
 * Dimuat SETELAH style.css, jadi menimpa gaya header/menu lama.
 * Susunan: [ segmen logo abu-abu ][ segmen menu hijau mint ] dalam satu pil.
 * ===================================================================== */

.site-header{
  --mg-mint: rgba(223,255,243,.58);      /* segmen menu (transparansi sama seperti navbar Folisa) */
  --mg-abu:  rgba(221,228,235,.62);      /* segmen logo */
  --mg-teks: #111;
  --mg-aktif: #1fa5ee;                   /* warna menu aktif / hover */
  --mg-blur: 24px;                       /* blur & saturasi = navbar Folisa */

  position:sticky; top:12px; z-index:1000;
  width:calc(100% - 28px); max-width:var(--lebar-konten,1140px);
  margin:0 auto 14px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:top .3s ease;
}
.site-header.mengecil{top:8px;background:transparent;box-shadow:none}

/* ---------- Pil utama ---------- */
.site-header .nav-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:0; padding:5px; min-height:56px; max-width:none; margin:0;
  border-radius:999px;
}
/* lapisan kaca ada di pseudo-element supaya dropdown tidak terpotong / blur bersarang */
.site-header .nav-wrap::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--mg-mint);
  -webkit-backdrop-filter:blur(var(--mg-blur)) saturate(180%);
  backdrop-filter:blur(var(--mg-blur)) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  /* bayangan lembut ala neumorphism: gelap di kanan-bawah, terang di kiri-atas */
  box-shadow:8px 8px 22px rgba(31,38,135,.10), -8px -8px 22px rgba(255,255,255,.55);
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.mengecil .nav-wrap::before{
  background:rgba(223,255,243,.72);
  box-shadow:8px 10px 26px rgba(31,38,135,.16), -8px -8px 22px rgba(255,255,255,.55);
}

/* ---------- Segmen logo (kiri, abu-abu) ---------- */
.site-header .brand{
  position:relative; z-index:1; flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:6px 38px 6px 16px; margin-right:-28px;
  border-radius:999px; color:#0b3d3a;
  background:var(--mg-abu);
  -webkit-backdrop-filter:blur(var(--mg-blur)) saturate(180%); backdrop-filter:blur(var(--mg-blur)) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.site-header .brand img{
  height:38px; width:auto; max-width:260px; object-fit:contain;
  filter:none; transform:none;
}
.site-header .brand:hover img{transform:none}
.site-header .brand-text{display:flex;flex-direction:column;line-height:1.15}
.site-header .brand-name{font-weight:800;font-size:.95rem}
.site-header .brand-tagline{font-size:.68rem;font-weight:400;color:#4d5d5c}

/* ---------- Segmen menu ---------- */
.site-header .main-nav{
  flex:1 1 auto; display:flex; justify-content:center; flex-wrap:nowrap;
  gap:0; padding:0 8px 0 36px; min-width:0;
}
.site-header .main-nav-inner{
  display:flex; align-items:center; justify-content:space-evenly; flex:1 1 auto; gap:2px;
}
.site-header .main-nav a{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:10px 13px; border-radius:999px;
  font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mg-teks); background:transparent; transform:none;
  transition:color .2s ease, background .2s ease;
}
.site-header .main-nav a:hover{background:rgba(255,255,255,.45);color:var(--mg-aktif);transform:none}
.site-header .main-nav a.aktif{color:var(--mg-aktif)}

/* ---------- Ikon menu: selalu kecil & rapi ---------- */
.site-header .nav-ikon{margin-right:6px;font-size:1.05em;line-height:1}
.site-header .nav-ikon-img{
  display:inline-block; flex:0 0 auto;
  width:20px !important; height:20px !important; max-width:20px; max-height:20px;
  object-fit:contain; margin-right:6px;
  mix-blend-mode:multiply;               /* latar putih ikon ikut "lebur" ke warna kaca */
}

/* ---------- Dropdown ---------- */
.site-header .nav-item-dropdown{position:relative;display:inline-flex;align-items:center;gap:0}
.site-header .caret-toggle{
  background:none;border:0;cursor:pointer;color:var(--mg-teks);
  padding:8px 6px 8px 0;margin-left:-6px;border-radius:6px;display:inline-flex;align-items:center;
}
.site-header .caret-toggle:hover{background:none;color:var(--mg-aktif)}
.site-header .nav-item-dropdown .caret{font-size:.7rem;line-height:1;transition:transform .25s ease}

.site-header .dropdown-menu{
  position:absolute; top:100%; left:50%; margin-top:12px; min-width:220px;
  max-height:none; overflow:visible; padding:8px; border-radius:20px;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:6px 6px 18px rgba(31,38,135,.12), -6px -6px 18px rgba(255,255,255,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* jembatan tak terlihat supaya hover tidak "putus" di celah antara menu & dropdown */
.site-header .dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.site-header .dropdown-menu a{
  display:flex; opacity:1; transform:none; padding:10px 14px; border-radius:12px;
  text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:600; color:#163f3d;
}
.site-header .dropdown-menu a:hover{background:rgba(255,255,255,.7);color:var(--mg-aktif);transform:none}
.site-header .dropdown-menu a.aktif{color:var(--mg-aktif)}

.site-header .nav-item-dropdown.terbuka .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0); transition-delay:0s;
}
.site-header .nav-item-dropdown.terbuka .caret{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .site-header .nav-item-dropdown:hover .dropdown-menu,
  .site-header .nav-item-dropdown:focus-within .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0); transition-delay:0s;
  }
  .site-header .nav-item-dropdown:hover .caret{transform:rotate(180deg)}
}

/* ---------- Tombol menu ponsel (hamburger -> X) ---------- */
.site-header .nav-toggle{display:none}
.site-header .nav-toggle-dots{width:20px;gap:5px;align-items:stretch}
.site-header .nav-toggle-dots span{width:20px;height:2px;border-radius:2px;background:#0b3d3a}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-dots span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-dots span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Laptop kecil: rapatkan ---------- */
@media (max-width:1100px) and (min-width:961px){
  .site-header .main-nav a{padding:10px 9px;font-size:.74rem;letter-spacing:.02em}
  .site-header .brand img{height:34px;max-width:200px}
}

/* ---------- Ponsel & tablet (menu jadi tombol) ---------- */
@media (max-width:960px){
  .site-header{top:8px;width:calc(100% - 16px)}
  .site-header .nav-wrap{flex-wrap:wrap;border-radius:28px;padding:5px}
  .site-header .brand{margin-right:0;padding:5px 18px 5px 12px;max-width:calc(100% - 58px)}
  .site-header .brand img{height:32px;max-width:100%}
  .site-header .brand-tagline{display:none}

  .site-header .nav-toggle{display:inline-flex;margin-left:auto;margin-right:6px;padding:8px}

  .site-header .main-nav{
    order:3; width:100%; padding:0; justify-content:stretch; align-items:stretch;
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:0fr; transition:grid-template-rows .32s ease;
  }
  .site-header .main-nav.terbuka{grid-template-rows:1fr}
  .site-header .main-nav-inner{
    overflow:hidden; min-height:0; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:2px; padding:0 6px;
  }
  .site-header .main-nav.terbuka .main-nav-inner{padding:8px 6px 6px}
  .site-header .main-nav-inner>a{padding:12px 14px;border-radius:14px}

  .site-header .nav-item-dropdown{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;position:relative}
  .site-header .nav-item-dropdown>a{flex:1 1 auto;padding:12px 14px;border-radius:14px}
  .site-header .caret-toggle{position:static;margin:0;padding:10px 14px}

  .site-header .dropdown-menu{
    display:none; position:static; width:100%; min-width:0; margin:2px 0 6px;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    background:rgba(255,255,255,.6);
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border:0; border-radius:14px;
  }
  .site-header .dropdown-menu::before{display:none}
  .site-header .nav-item-dropdown.terbuka .dropdown-menu{display:block;transform:none}
}