/* ==========================================================
   Token ukuran: semua dimensi nav diturunkan dari sini.
   Desktop > 960px | Tablet 768-960px | Mobile <= 767px
   ========================================================== */
:root{
    --nav-active:#10283c;
    --nav-active-deep:#0a1b29;
    --nav-hover:#245f5e;
    --nav-glass:rgba(236,246,248,.72);

    --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:16px;                      /* bar header & panel menu mobile */
    --r-mid:calc(var(--r-outer) - 4px);  /* kotak menu & hamburger */
    --r-inner:calc(var(--r-mid) - 4px);  /* link & tombol di dalam menu */

    --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:14px;
    }
}

.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:var(--r-outer);
    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);
    box-shadow:0 6px 24px rgba(16,40,60,.10);
    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;
      border-color: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);
  border:1px solid rgba(197,227,226,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-mid);
  width:max-content;
  margin:auto;
  padding:7px 5px;
}
.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:var(--ink);
  border:1px solid rgba(255,255,255,.5);
}
.desktop-menu li.nav-cta a:hover{
  background:var(--brand-dark);
  color:var(--ink);
}

.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:var(--r-outer);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    padding:calc(var(--bar-px) + 5px);
    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:6px;
    border-radius:calc(var(--r-outer) - 6px);
    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;
  }
  .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:var(--r-mid);cursor:pointer;
    background:var(--nav-active);
    z-index:1001;
    transition:background .25s ease;
  }
  .hamburger span{
    width:20px;height:2px;border-radius:2px;
    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 #ff9c00;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:99px}
@media (max-width:767px){:root{--r-outer:99px}}
@media (max-width:960px){
  .desktop-menu{border-radius:28px}
  .desktop-menu::before{border-radius:22px}
}

/* 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}}

/* ==========================================================
   Dock mengambang di bawah: kolom pencarian + ikon dengan teks kecil
   Gaya kaca sama dengan header: pil 99px, blur, bayangan lembut
   ========================================================== */
.dock{
    position:fixed;
    left:50%;
    bottom:max(14px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(620px,calc(100vw - 180px));
    z-index:9998;
    font-family:var(--sans);
}
.dock-bar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px;
    border-radius:99px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(197,227,226,.8);
    box-shadow:0 6px 24px rgba(16,40,60,.14);
    -webkit-backdrop-filter:blur(30px);
    backdrop-filter:blur(30px);
}

/* Kolom pencarian besar, selalu tampil */
.dock-field{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    height:54px;
    margin:0;
    padding:0 20px;
    border-radius:99px;
    background:#fff;
    border:1px solid rgba(16,40,60,.08);
    color:var(--muted);
    transition:border-color .2s ease,box-shadow .2s ease;
}
.dock-field:focus-within{
    border-color:var(--nav-hover);
    box-shadow:0 0 0 3px rgba(16,40,60,.10);
}
.dock-field svg{
    flex:none;
    width:22px;height:22px;
    fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
}
.dock-field input[type=search]{
    flex:1;
    min-width:0;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    outline:0;
    background:transparent;
    font:inherit;
    font-size:1rem;
    color:var(--ink);
    -webkit-appearance:none;
    appearance:none;
}
.dock-field input[type=search]::placeholder{color:var(--muted);opacity:.8}
.dock-field input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* Ikon + teks kecil */
.dock-btn{
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:68px;
    height:54px;
    padding:0 10px;
    border-radius:99px;
    color:var(--ink);
    text-decoration:none;
    transition:background .25s ease,color .25s ease,transform .2s ease;
}
.dock-btn svg{
    flex:none;
    width:22px;height:22px;
    fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
}
.dock-btn span{
    font-size:11px;
    font-weight:600;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
}
.dock-btn:hover{
    background:var(--nav-hover);
    color:#fff;
    transform:translateY(-1px);
}
.dock-btn:focus-visible{outline:3px solid #ff9c00;outline-offset:2px}
.dock-btn:active{background:var(--nav-active);color:#fff}

/* Beri ruang di footer agar dock tidak menutupi teks hak cipta */
.site-footer{padding-bottom:calc(1rem + 92px)}

/* Tombol chat sejajar dengan dock: satu baris di bawah, chat di kanan */
.dock ~ .chat-w{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 5px)}
.dock ~ .chat-w .chat-panel{bottom:76px}

@media (max-width:767px){
    .dock{bottom:max(10px,env(safe-area-inset-bottom))}
    .dock ~ .chat-w{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 4px);right:max(12px,env(safe-area-inset-right))}
}
/* HP: dock rata kiri selebar sisa ruang di kiri tombol chat */
@media (max-width:520px){
    .dock{
        left:max(12px,env(safe-area-inset-left));
        transform:none;
        width:calc(100vw - 24px - 58px - 8px);
    }
    .dock-field{height:52px;padding:0 14px;gap:8px}
    .dock-field svg{width:20px;height:20px}
    .dock-field input[type=search]{font-size:16px}
    .dock-btn{min-width:54px;height:52px;padding:0 6px}
    .dock-btn span{font-size:10.5px}
    .dock ~ .chat-w .chat-panel{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 76px);height:min(78svh,calc(100svh - 150px),560px)}
}
@media (prefers-reduced-motion:reduce){
    .dock-btn,.dock-field{transition:none}
}

/* Warna ikon dock sesuai tema: Travel biru, Medical hijau */
.dock-btn.dock-travel{background:var(--trv,#0a6aa8);color:#fff}
.dock-btn.dock-travel:hover,.dock-btn.dock-travel:active{background:#085a8f;color:#fff}
.dock-btn.dock-medical{background:var(--med,#245f5e);color:#fff}
.dock-btn.dock-medical:hover,.dock-btn.dock-medical:active{background:#1b4a49;color:#fff}

/* Pencarian bottom bar: pilih tempat mencari (Travel / Medical) */
.dock.has-q .dock-btn[data-cari]{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(16,40,60,.28)}
.dock-pick{
    position:absolute;
    left:0;right:0;
    bottom:calc(100% + 10px);
    padding:14px 16px 16px;
    border-radius:22px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(197,227,226,.8);
    box-shadow:0 10px 32px rgba(16,40,60,.18);
    -webkit-backdrop-filter:blur(30px);
    backdrop-filter:blur(30px);
}
.dock-pick[hidden]{display:none}
.dock-pick p{margin:0 0 10px;font-size:.92rem;color:var(--muted);overflow-wrap:anywhere}
.dock-pick p b{color:var(--ink);font-weight:600}
.dock-pick-btns{display:flex;gap:8px}
.dock-pick-btns button{
    flex:1;
    min-height:46px;
    padding:0 12px;
    border:0;
    border-radius:99px;
    font:inherit;
    font-size:.95rem;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    transition:background .25s ease,transform .2s ease;
}
.dock-pick-btns button:hover{transform:translateY(-1px)}
.dock-pick-btns button:focus-visible{outline:3px solid #ff9c00;outline-offset:2px}
.dock-pick-travel{background:var(--trv,#0a6aa8)}
.dock-pick-travel:hover{background:#085a8f}
.dock-pick-medical{background:var(--med,#245f5e)}
.dock-pick-medical:hover{background:#1b4a49}
@media (max-width:520px){
    .dock-pick-btns{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
    .dock-pick-btns button{transition:none}
}