/* ===== Navbar kapsul mengambang: SEMUA halaman ===== */
/* Khusus beranda: slider mulai dari paling atas */
body:has(#hero-area){padding-top:0 !important}
#header-wrap:has(#hero-area){padding:0 !important;margin:0 !important}

#header-wrap > nav.navbar{
  position:fixed !important;top:18px !important;left:24px !important;right:24px !important;
  width:auto !important;height:auto !important;min-height:0 !important;
  padding:8px 14px 8px 12px !important;
  background:rgba(15,27,61,.94) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12) !important;border-radius:999px !important;
  box-shadow:0 10px 30px rgba(8,12,28,.35) !important;
  z-index:1040
}
#header-wrap > nav.navbar > .container{max-width:none !important;width:100% !important;padding:0 !important;flex-wrap:nowrap}

/* Logo di lencana putih */
#header-wrap .navbar-brand{margin:0 18px 0 0 !important;padding:0 !important;display:flex;align-items:center}
#header-wrap .navbar-brand img{height:46px !important;width:auto !important;max-width:none !important;background:#fff;border-radius:999px;padding:5px 16px}

/* Menu utama */
#header-wrap .navbar-collapse{flex-grow:1}
#header-wrap .navbar-nav{align-items:center;gap:2px;margin:0 !important}
#header-wrap .navbar-nav > li > a.nav-link,
#header-wrap .navbar-nav > li > .nav-link{
  color:#fff !important;font-size:13.5px !important;font-weight:600 !important;letter-spacing:.3px;
  text-transform:uppercase;padding:11px 14px !important;border-radius:999px;position:relative;
  transition:background .2s ease
}
#header-wrap .navbar-nav > li > a.nav-link:hover,
#header-wrap .navbar-nav > li > a.nav-link:focus,
#header-wrap .navbar-nav > li.active > a.nav-link{background:rgba(255,255,255,.14) !important;color:#fff !important}
#header-wrap .navbar-nav > li.active > a.nav-link::after{
  content:"";position:absolute;left:50%;bottom:5px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:#e8b422
}

/* Submenu desktop: kartu putih, teks navy */
#header-wrap .navbar-nav .dropdown-menu,
#header-wrap .navbar-nav ul.sub-menu,
#header-wrap .navbar-nav li > ul{
  background:#fff !important;border:0 !important;border-radius:14px !important;
  margin-top:14px !important;padding:8px !important;min-width:220px;
  box-shadow:0 12px 30px rgba(15,27,61,.25) !important
}
#header-wrap .navbar-nav .dropdown-menu a,
#header-wrap .navbar-nav ul.sub-menu a,
#header-wrap .navbar-nav li > ul a,
#header-wrap .navbar-nav .dropdown-item{
  display:block;color:#0f1b3d !important;background:transparent !important;
  font-size:13.5px !important;font-weight:600 !important;text-transform:none !important;letter-spacing:0;
  padding:10px 14px !important;border-radius:10px
}
#header-wrap .navbar-nav .dropdown-menu a:hover,
#header-wrap .navbar-nav ul.sub-menu a:hover,
#header-wrap .navbar-nav li > ul a:hover,
#header-wrap .navbar-nav .dropdown-item:hover{background:#eef0f6 !important;color:#0f1b3d !important}

/* Tombol cari: lingkaran emas */
#header-wrap .search-toggle-wrapper > .nav-link{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0 !important;
  background:#e8b422 !important;border-radius:50% !important
}
#header-wrap .search-toggle-wrapper > .nav-link i{color:#0f1b3d !important;font-size:16px}
#header-wrap .search-toggle-wrapper > .nav-link:hover{background:#fff !important}
#header-wrap .search-dropdown{border-radius:16px}

/* Jarak judul halaman dalam supaya tidak tertutup kapsul (sesuaikan angkanya) */
.page-header{padding-top:150px !important}

/* Layar 1200-1399px: rapatkan menu */
@media (min-width:1200px) and (max-width:1399px){
  #header-wrap .navbar-nav > li > a.nav-link{font-size:12.5px !important;padding:10px 9px !important}
  #header-wrap .navbar-brand{margin-right:10px !important}
}

/* ===== Hamburger di bawah 1200px ===== */
@media (max-width:1199px){
  #header-wrap > nav.navbar{top:12px !important;left:12px !important;right:12px !important;border-radius:30px !important}
  #header-wrap > nav.navbar > .container{flex-wrap:wrap}
  #header-wrap .navbar-brand img{height:40px !important;padding:4px 12px}
  #header-wrap .navbar-toggler{display:block !important;margin-left:auto;border:0;padding:8px 11px;border-radius:50%;background:rgba(255,255,255,.14)}
  #header-wrap .navbar-toggler i{color:#fff !important;font-size:20px}
  #header-wrap .navbar-collapse{display:none !important;flex-basis:100%;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.15);max-height:70vh;overflow:auto}
  #header-wrap .navbar-collapse.show,
  #header-wrap .navbar-collapse.collapsing{display:block !important}
  #header-wrap .navbar-nav{flex-direction:column !important;align-items:stretch !important;width:100%}
  #header-wrap .navbar-nav > li > a.nav-link{border-radius:12px;padding:12px 14px !important}
  #header-wrap .navbar-nav > li.active > a.nav-link::after{display:none}
  #header-wrap .search-toggle-wrapper > .nav-link{width:100%;border-radius:12px !important}

  /* Submenu HP: panel gelap transparan di dalam menu, teks putih */
  #header-wrap .navbar-nav .dropdown-menu,
  #header-wrap .navbar-nav ul.sub-menu,
  #header-wrap .navbar-nav li > ul{
    position:static !important;float:none !important;transform:none !important;
    width:auto !important;min-width:0 !important;
    margin:4px 0 8px 14px !important;padding:6px !important;
    background:rgba(255,255,255,.08) !important;border-radius:12px !important;box-shadow:none !important
  }
  #header-wrap .navbar-nav .dropdown-menu a,
  #header-wrap .navbar-nav ul.sub-menu a,
  #header-wrap .navbar-nav li > ul a,
  #header-wrap .navbar-nav .dropdown-item{color:#fff !important;font-size:14px !important;padding:10px 12px !important}
  #header-wrap .navbar-nav .dropdown-menu a:hover,
  #header-wrap .navbar-nav ul.sub-menu a:hover,
  #header-wrap .navbar-nav li > ul a:hover,
  #header-wrap .navbar-nav .dropdown-item:hover{background:rgba(255,255,255,.14) !important;color:#fff !important}
  #header-wrap .navbar-nav .dropdown-menu:not(.show){display:none}
  #header-wrap .navbar-nav .dropdown-menu.show{display:block}
  .page-header{padding-top:120px !important}
}

/* ===== Warna seragam #007bff + transparan ===== */
#header-wrap > nav.navbar{
  --nav-rgb:0,123,255;      /* #007bff */
  --nav-alpha:.55;          /* 0 = bening, 1 = pekat */
  background:rgba(var(--nav-rgb),var(--nav-alpha)) !important;
  -webkit-backdrop-filter:blur(4px) saturate(120%);backdrop-filter:blur(4px) saturate(120%);
  border:1px solid rgba(255,255,255,.4) !important;
  box-shadow:0 8px 24px rgba(0,60,140,.25) !important
}
/* Saat menu HP terbuka, lebih pekat supaya terbaca */
#header-wrap > nav.navbar:has(.navbar-collapse.show){--nav-alpha:.9}

/* Teks menu: putih, dengan bayangan tipis agar terbaca di atas foto terang */
#header-wrap .navbar-nav > li > a.nav-link,
#header-wrap .navbar-nav > li > .nav-link{color:#fff !important;text-shadow:0 1px 3px rgba(0,40,100,.55)}
#header-wrap .navbar-nav > li > a.nav-link:hover,
#header-wrap .navbar-nav > li > a.nav-link:focus,
#header-wrap .navbar-nav > li.active > a.nav-link{background:rgba(255,255,255,.22) !important;color:#fff !important}
#header-wrap .navbar-nav > li.active > a.nav-link::after{background:#fff !important}

/* Tombol cari: putih dengan ikon biru */
#header-wrap .search-toggle-wrapper > .nav-link{background:#fff !important}
#header-wrap .search-toggle-wrapper > .nav-link i{color:#007bff !important;text-shadow:none}
#header-wrap .search-toggle-wrapper > .nav-link:hover{background:rgba(255,255,255,.8) !important}

/* Hamburger HP */
#header-wrap .navbar-toggler{background:rgba(255,255,255,.22) !important}

/* Submenu desktop: kartu putih, teks biru */
#header-wrap .navbar-nav .dropdown-menu,
#header-wrap .navbar-nav ul.sub-menu,
#header-wrap .navbar-nav li > ul{
  background:rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 10px 28px rgba(0,60,140,.25) !important
}
#header-wrap .navbar-nav .dropdown-menu a,
#header-wrap .navbar-nav ul.sub-menu a,
#header-wrap .navbar-nav li > ul a,
#header-wrap .navbar-nav .dropdown-item{color:#007bff !important;text-shadow:none}
#header-wrap .navbar-nav .dropdown-menu a:hover,
#header-wrap .navbar-nav ul.sub-menu a:hover,
#header-wrap .navbar-nav li > ul a:hover,
#header-wrap .navbar-nav .dropdown-item:hover{background:rgba(0,123,255,.12) !important;color:#0056b3 !important}

@media (max-width:1199px){
  #header-wrap .navbar-collapse{border-top-color:rgba(255,255,255,.35)}
  /* Submenu HP: panel putih transparan di dalam menu, teks putih */
  #header-wrap .navbar-nav .dropdown-menu,
  #header-wrap .navbar-nav ul.sub-menu,
  #header-wrap .navbar-nav li > ul{background:rgba(255,255,255,.18) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
  #header-wrap .navbar-nav .dropdown-menu a,
  #header-wrap .navbar-nav ul.sub-menu a,
  #header-wrap .navbar-nav li > ul a,
  #header-wrap .navbar-nav .dropdown-item{color:#fff !important}
  #header-wrap .navbar-nav .dropdown-menu a:hover,
  #header-wrap .navbar-nav ul.sub-menu a:hover,
  #header-wrap .navbar-nav li > ul a:hover,
  #header-wrap .navbar-nav .dropdown-item:hover{background:rgba(255,255,255,.25) !important;color:#fff !important}
}

/* ===== Biru lebih gelap + kapsul lebih ramping + judul teks ===== */
#header-wrap > nav.navbar{
  --nav-rgb:0,40,105;        /* biru tua ~ #002869 */
  --nav-alpha:.62;           /* 0 = bening, 1 = pekat */
  --logo-w:32px;             /* lebar potongan lambang (atur jika terpotong) */
  top:14px !important;
  padding:5px 12px 5px 10px !important;
  box-shadow:0 8px 22px rgba(0,25,70,.35) !important
}
#header-wrap > nav.navbar:has(.navbar-collapse.show){--nav-alpha:.92}

/* Judul: lambang + teks (gambar logo asli hanya diambil bagian lambangnya) */
#header-wrap .navbar-brand{
  display:grid !important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:10px;align-items:center;margin:0 16px 0 0 !important;text-decoration:none
}
#header-wrap .navbar-brand img{
  grid-column:1;grid-row:1 / span 2;
  width:var(--logo-w) !important;height:38px !important;max-width:none !important;
  object-fit:cover !important;object-position:left center !important;
  background:none !important;padding:0 !important;border-radius:0 !important
}
#header-wrap .navbar-brand::before{
  content:"DISKOMINFO-SP";grid-column:2;grid-row:1;align-self:end;
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.6px;line-height:1.1;text-shadow:0 1px 3px rgba(0,20,60,.5)
}
#header-wrap .navbar-brand::after{
  content:"Kabupaten Tuban";grid-column:2;grid-row:2;align-self:start;
  color:#ffd75e;font-size:11.5px;font-weight:600;letter-spacing:.2px;line-height:1.2;text-shadow:0 1px 3px rgba(0,20,60,.5)
}

/* Menu lebih rendah */
#header-wrap .navbar-nav > li > a.nav-link,
#header-wrap .navbar-nav > li > .nav-link{font-size:13px !important;padding:8px 13px !important}
#header-wrap .navbar-nav > li.active > a.nav-link::after{bottom:3px;width:16px;height:2px}
#header-wrap .search-toggle-wrapper > .nav-link{width:34px;height:34px}
#header-wrap .search-toggle-wrapper > .nav-link i{color:#002869 !important;font-size:14px}
#header-wrap .navbar-nav .dropdown-menu,
#header-wrap .navbar-nav ul.sub-menu,
#header-wrap .navbar-nav li > ul{margin-top:10px !important}

/* Submenu desktop: teks biru tua */
#header-wrap .navbar-nav .dropdown-menu a,
#header-wrap .navbar-nav ul.sub-menu a,
#header-wrap .navbar-nav li > ul a,
#header-wrap .navbar-nav .dropdown-item{color:#0a3d91 !important}
#header-wrap .navbar-nav .dropdown-menu a:hover,
#header-wrap .navbar-nav ul.sub-menu a:hover,
#header-wrap .navbar-nav li > ul a:hover,
#header-wrap .navbar-nav .dropdown-item:hover{background:rgba(0,40,105,.1) !important;color:#002869 !important}

/* Jarak judul halaman dalam menyesuaikan kapsul yang lebih ramping */
.page-header{padding-top:120px !important}

@media (min-width:1200px) and (max-width:1399px){
  #header-wrap .navbar-nav > li > a.nav-link{font-size:12px !important;padding:8px 8px !important}
}
@media (max-width:1199px){
  #header-wrap > nav.navbar{top:10px !important;padding:5px 10px 5px 10px !important}
  #header-wrap .navbar-brand img{height:34px !important;width:calc(var(--logo-w) - 3px) !important}
  #header-wrap .navbar-brand::before{font-size:13.5px}
  #header-wrap .navbar-brand::after{font-size:10.5px}
  #header-wrap .navbar-toggler{padding:6px 9px !important}
  #header-wrap .navbar-toggler i{font-size:18px !important}
  #header-wrap .navbar-nav > li > a.nav-link{padding:10px 14px !important}
  /* Submenu HP: tetap putih transparan + teks putih */
  #header-wrap .navbar-nav .dropdown-menu a,
  #header-wrap .navbar-nav ul.sub-menu a,
  #header-wrap .navbar-nav li > ul a,
  #header-wrap .navbar-nav .dropdown-item{color:#fff !important}
  .page-header{padding-top:100px !important}
}