/* ==========================================================
   Token ukuran: semua dimensi nav diturunkan dari sini.
   Desktop > 960px | Tablet 768-960px | Mobile <= 767px
   ========================================================== */
:root{
    --nav-active:#3D4452;
    --nav-active-deep:#0B0E13;
    --nav-hover:#0A76DE;
    --nav-glass:rgba(232,236,241,.78);

    --top:10px;          /* jarak header dari tepi atas layar */
    --inset-x:16px;      /* jarak header dari tepi kiri/kanan */
    --bar-py:6px;        /* padding bar (atas/bawah) */
    --bar-px:10px;       /* padding bar (kiri/kanan) */
    --logo-h:38px;       /* tinggi logo & ikon logo */
    --hb:40px;           /* ukuran tombol hamburger */
    --ctl-h:53px;        /* kontrol tertinggi di bar (desktop: kotak menu) */
    --link-fs:15px;
    --link-py:10px;
    --link-px:14px;

    --r-outer:12px;                      /* bar header & panel menu mobile */
    --r-mid:12px;  /* kotak menu & hamburger */
    --menu-pad:7px;  /* jarak link ke tepi kotak menu */
    --r-inner:calc(var(--r-mid) - var(--menu-pad));  /* link & tombol di dalam menu: konsentris dengan kotak menu (12 - 7 = 5px) */

    --bar-h:calc(max(var(--logo-h), var(--ctl-h)) + var(--bar-py) * 2);
    --header-space:calc(var(--top) + var(--bar-h)); /* ruang untuk konten di bawah header */
}

/* Layar laptop kecil: rapatkan menu agar muat */
@media (min-width:961px) and (max-width:1100px){
    :root{--link-fs:14px;--link-px:11px;--logo-h:34px;--ctl-h:52px}
}

/* Tablet */
@media (max-width:960px){
    :root{
        --inset-x:14px;
        --logo-h:36px;
        --hb:40px;
        --ctl-h:var(--hb);
        --link-fs:17px;
        --link-py:14px;
        --link-px:20px;
    }
}

/* Mobile */
@media (max-width:767px){
    :root{
        --inset-x:10px;
        --bar-py:5px;
        --bar-px:8px;
        --logo-h:32px;
        --hb:38px;
        --link-fs:16px;
        --link-py:13px;
        --link-px:16px;
        --r-outer:12px;
    }
}

.site-header,
.site-header *{font-family:var(--sans)}

.site-header{
    position:fixed;
    top:var(--top);
    left:var(--inset-x);
    right:var(--inset-x);
    z-index:9999;
    transition:.35s ease;
}
.header-inner{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:var(--bar-py) var(--bar-px);
    border-radius:12px;
    background:rgba(255,255,255,.0062);
    transition:.35s;
}
.header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:-1;
    pointer-events:none;
}

/* Logo */
.brand{position:relative;display:flex;align-items:center;text-decoration:none}
.brand img{transition:opacity .3s ease}
.brand .logo-full{display:block;height:var(--logo-h);width:auto}
.brand .logo-icon{
    position:absolute;
    top:50%;left:0;
    transform:translateY(-50%);
    width:var(--logo-h);height:var(--logo-h);
    opacity:0;
    pointer-events:none;
}

/* Setelah di-scroll: padding & tinggi bar tetap sama, hanya lebar dan latar yang berubah */
.site-header.scrolled .header-inner{
    max-width:1100px;
    width:100%;
    background:rgba(255,255,255,.82);
    
    gap:8px;
}
.site-header.scrolled .header-inner::before{
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
}
.site-header.scrolled .brand{
    min-width:var(--logo-h);
    width:var(--logo-h);
    height:var(--logo-h);
    overflow:hidden;
}
.site-header.scrolled .brand .logo-full{opacity:0;pointer-events:none}
.site-header.scrolled .brand .logo-icon{opacity:1}

@media (min-width:961px){
  .site-header.scrolled .desktop-menu{
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
  }
}

/* Tablet & mobile: bar yang di-scroll menyusut jadi pil di kanan (ikon + hamburger) */
@media (max-width:960px){
    .site-header.scrolled .header-inner{
        width:fit-content;
        max-width:100%;
        margin-left:auto;
        margin-right:0;
        justify-content:flex-end;
        gap:10px;
    }
    .site-header.scrolled .nav-wrapper{gap:6px}
}

/* Checkbox penggerak menu: tersembunyi tapi tetap bisa difokus keyboard */
#menu-toggle{
    position:absolute;
    width:1px;height:1px;
    opacity:0;
    pointer-events:none;
}

.nav-wrapper{position:relative;z-index:999;display:flex;align-items:center;gap:12px}

/* Menu desktop */
.desktop-menu{
  background:var(--nav-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:12px;
  width:max-content;
  margin:auto;
  padding:var(--menu-pad) calc(var(--menu-pad) - 2px); /* + margin link 2px = jarak 7px di semua sisi */
}
.desktop-menu ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
}
.desktop-menu li{display:flex;align-items:center}
.desktop-menu a{
  color:var(--ink);
  text-decoration:none;
  font-size:var(--link-fs);
  margin:0 2px;
  font-weight:600;
  line-height:1;
  padding:var(--link-py) var(--link-px);
  border-radius:var(--r-inner);
  transition:background .25s ease,color .25s ease,transform .2s ease;
}
.desktop-menu a:hover{
  background:var(--nav-hover);
  color:#fff;
  transform:translateY(-1px);
}
.desktop-menu .current-menu-item a{
  background:var(--nav-active);
  color:#fff;
}
.desktop-menu .current-menu-item a:hover{
  background:var(--nav-active-deep);
  color:#fff;
}

/* Tombol "Hubungi kami" */
.desktop-menu li.nav-cta{margin-left:8px}
.desktop-menu li.nav-cta a{
  background:var(--brand);
  color:#fff;
}
.desktop-menu li.nav-cta a:hover{
  background:var(--brand-dark);
  color:#fff;
}

.hamburger{display:none}

/* Tablet & mobile: menu jadi panel */
@media (max-width:960px){
  .desktop-menu{
    position:fixed;
    top:calc(var(--header-space) + 8px);
    left:var(--inset-x);
    right:var(--inset-x);
    width:auto;
    opacity:0;visibility:hidden;
    transform:translate3d(0,-16px,0) scale(.98);
    -webkit-transform:translate3d(0,-16px,0) scale(.98);
    contain:paint;isolation:isolate;
    will-change:transform,opacity;
    transition:
      opacity .35s ease,
      transform .35s cubic-bezier(.22,.61,.36,1),
      visibility .35s ease;
    border-radius:12px;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    padding:calc(var(--menu-pad) - 3px) var(--menu-pad); /* + margin link 3px = jarak 7px di semua sisi */
    z-index:1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    max-height:calc(100dvh - var(--header-space) - 8px - var(--inset-x));
    overflow-y:auto;
  }
  .desktop-menu::before{
    content:"";
    position:absolute;inset:0;
    border-radius:12px;
    background:rgba(255,255,255,.88);
    pointer-events:none;
  }
  .desktop-menu ul{
    position:relative;z-index:2;
    flex-direction:column;align-items:stretch;
  }
  .desktop-menu li{width:100%}
  .desktop-menu a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    width:100%;
    margin:3px 0;
    border-radius:var(--r-inner);
  }
  .desktop-menu li.nav-cta{margin-left:0;margin-top:4px}

  #menu-toggle:checked ~ .desktop-menu{
    opacity:1;visibility:visible;
    transform:translate3d(0,0,0) scale(1);
    -webkit-transform:translate3d(0,0,0) scale(1);
  }
  .hamburger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;
    margin:0;
    width:var(--hb);height:var(--hb);
    border-radius:12px;cursor:pointer;
    background:var(--nav-active);
    z-index:1001;
    transition:background .25s ease;
  }
  .hamburger span{
    width:20px;height:2px;border-radius:12px;
    background:#fff;
    transition:transform .3s ease,opacity .3s ease;
  }
  #menu-toggle:checked + .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #menu-toggle:checked + .hamburger span:nth-child(2){opacity:0}
  #menu-toggle:checked + .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #menu-toggle:focus-visible + .hamburger{outline:3px solid #0A76DE;outline-offset:2px}
}

/* Tablet lebar: panel tidak perlu selebar layar, rata kanan di bawah hamburger */
@media (min-width:600px) and (max-width:960px){
  .desktop-menu{
    left:auto;
    width:min(400px, calc(100% - var(--inset-x) * 2));
    transform-origin:top right;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header,.header-inner,.desktop-menu,.desktop-menu a,.hamburger span{transition:none}
}
/* Radius pil 99px untuk bar, kotak menu, dan semua link/tombol menu */
:root{--r-outer:12px}
@media (max-width:767px){:root{--r-outer:12px}}
@media (max-width:960px){
  .desktop-menu{border-radius:12px}
  .desktop-menu::before{border-radius:12px}
}

/* Desktop saat di-scroll: jarak isi ke tepi bar disamakan dengan kotak menu saat belum di-scroll (7px atas/bawah, 6px kiri/kanan) */
@media (min-width:961px){
  .site-header.scrolled .header-inner{padding:0 0 0 7px;min-height:var(--ctl-h)}
}

/* Tablet & mobile saat di-scroll: padding pil sama rata di semua sisi */
@media (max-width:960px){
  .site-header.scrolled .header-inner{padding:6px}
}

/* Logo ikon saat di-scroll: sedikit lebih kecil + padding kiri agar tidak mepet */
.site-header.scrolled .brand .logo-icon{width:calc(var(--logo-h) - 8px);height:calc(var(--logo-h) - 8px);left:4px}
@media (min-width:961px){.site-header.scrolled .header-inner{padding:0 0 0 12px}}
@media (max-width:960px){.site-header.scrolled .header-inner{padding:6px 6px 6px 12px}}


/* ===== Dropdown Kategori ===== */
.desktop-menu li.has-sub{position:relative}
.desktop-menu .caret{border:4px solid transparent;border-top-color:currentColor;border-bottom:0;display:inline-block;margin-left:7px;vertical-align:middle}
.desktop-menu .sub{list-style:none;margin:0;padding:0;display:block;position:absolute;top:calc(100% + 10px);left:0;min-width:240px;
  background:rgba(250,250,250,.96);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:12px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.desktop-menu .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.desktop-menu .has-sub:hover .sub,.desktop-menu .has-sub:focus-within .sub,.desktop-menu .has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.desktop-menu .sub li{display:block;width:100%}
.desktop-menu .sub li+li{border-top:1px solid var(--steel)}
.desktop-menu .sub a{display:block;margin:0;padding:13px 24px;border-radius:0;font-size:14.5px;font-weight:500;color:var(--ink);transform:none}
.desktop-menu .sub li:first-child a{border-radius:12px 12px 0 0}
.desktop-menu .sub li:last-child a{border-radius:0 0 12px 12px}
.desktop-menu .sub a:hover{background:var(--mist);color:var(--ink);transform:none}
@media (max-width:960px){
  .desktop-menu .sub{position:static;display:none;opacity:1;visibility:visible;transform:none;background:transparent;min-width:0;border-radius:0;margin:0 0 4px}
  .desktop-menu .sub::before{display:none}
  .desktop-menu .has-sub.open .sub{display:block}
  .desktop-menu li.has-sub{flex-direction:column;align-items:stretch}
  .desktop-menu .sub a{text-align:center;padding:11px 16px;border-radius:var(--r-inner)!important;background:var(--mist);margin:3px 0}
  .desktop-menu .sub li+li{border-top:0}
}

/* ===== Glass hanya di kotak menu; bar header di luarnya transparan ===== */
.header-inner,
.site-header.scrolled .header-inner{background:transparent;}
.header-inner::before,
.site-header.scrolled .header-inner::before{display:none}
@media (min-width:961px){
  /* kotak menu tetap glass juga saat halaman di-scroll */
  .site-header.scrolled .desktop-menu{
    background:var(--nav-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
}