@font-face {
      font-family: 'YourFont';
      src: url('/fonts/UcC73FwrK....woff2') format('woff2');
      font-display: swap;
    }
    /* tambahkan semua font-face lain di sini */
    :root{
      --bg:#0b1020; --muted:#a6b0c3; --brand:#4dd0ff; --brand2:#7cf7cf; --card:#0f1530; --accent:#d2f1ff;
      --header-h:64px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#061125 50%,#0b1020);color:#eef3ff;overflow-x:hidden}
    a{color:inherit}
    .container{width:min(1200px,92vw);margin-inline:auto}

    /* HEADER STATIS */
    header{
      position:sticky;
      top:0;
      background:rgba(6,17,37,.92);
      
      z-index:1000;
      isolation:isolate;
    }
    .nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);padding:.4rem 0}
    .logo{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:inherit}
    .logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 12px rgba(77,208,255,.8)}
    .logo-text{
      font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Inter,Arial,sans-serif;
      font-weight:800; letter-spacing:.3px;
      font-size:clamp(1.1rem,1.6vw,1.35rem);
      background:linear-gradient(90deg,#d2f1ff,#ffffff);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow:0 0 24px rgba(124,247,207,.15);
    }

    /* Nav */
    nav.stack{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
    nav a{text-decoration:none}
    .chip{font-size:.9rem;padding:.45rem .85rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#cdd7ea;line-height:1}
    .chip:hover{border-color:rgba(255,255,255,.24)}
    .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#05101a;font-weight:700;text-decoration:none;border:0;box-shadow:0 10px 30px rgba(77,208,255,.25);transition:transform .15s ease;line-height:1}
    .btn:hover{transform:translateY(-1px)}
    .ghost{background:transparent;color:#d8e6ff;border:1px solid rgba(255,255,255,.12);box-shadow:none}

    /* Tombol kecil untuk area kontak */
    .btn.sm{padding:.55rem .9rem;font-size:.95rem;border-radius:12px}

    /* Ikon dalam tombol */
    .btn .ico-img{
      width:1.05em;height:1.05em;display:inline-block;
      vertical-align:-0.18em;margin-right:.45rem
    }
    /* Ghost button: ikon dibikin terang agar kontras */
    .btn.ghost .ico-img{filter: invert(1) brightness(1.4)}
    .btn-label{margin-left:.45rem}
    .icon-inline{margin-right:.45rem;vertical-align:-0.18em;fill:currentColor}

    .grid{display:grid;gap:1.2rem}

    /* ==== HERO: anti-jitter (layer sticky) ==== */
    .hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:clip}
    .hero-media{position:sticky;top:0;height:100vh;width:100vw;max-width:100%;z-index:0}
    .hero-bg-img {
      position: absolute;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }
    .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(180deg,transparent,rgba(11,16,32,1));z-index:1}
    .hero-content{position:relative;z-index:2;text-align:center;padding:10vh 0}

    h1{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.05;margin:0 0 .8rem}
    .lead{color:#dbe7ff;opacity:.95;font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:900px;margin:0 auto 1.2rem}
    .stack{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
    .stack-top{margin-top:1rem}
    .stack-start{justify-content:flex-start}
    .stack-contact{justify-content:flex-start;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
    section{padding:5rem 0}
    .section-tight-top{padding-top:0}
    .section-title{margin:0 0 1rem}
    .section-title-sm{margin:0 0 .8rem}
    .section-subtitle{margin:0 0 1.6rem}
    .cta-title{margin:.2rem 0 1rem}

    .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
    .card{background:linear-gradient(180deg,#0c1430,#0a1028);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.2rem;box-shadow:0 20px 40px rgba(0,0,0,.25)}
    .card h3{margin:.2rem 0 .4rem}
    .muted{color:var(--muted)}
    .pill{display:inline-block;font-size:.75rem;padding:.3rem .6rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#bcd0ff}

    .features{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
    .feat{display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:16px}
    .feat .icon{flex:0 0 44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#06202c;font-weight:900}

    .cta{display:grid;gap:1rem;align-items:center;grid-template-columns:1.3fr .7fr}
    .cta .panel{background:linear-gradient(180deg,#0b122b,#0a1025);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:1.2rem}
    .cta img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.06)}
    .contact-form{grid-template-columns:1fr;gap:.8rem;margin-top:.8rem}
    .hp-field{display:none}
    .field-input{padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0a0f22;color:#eaf1ff}

    footer{padding:2.8rem 0;border-top:1px solid rgba(255,255,255,.06);color:#a9b8d6}
    .footer-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
    @media (max-width: 860px){
      .cta{grid-template-columns:1fr}
      .hero{min-height:64vh}
      .hero-media{height:64vh}
    }

    /* ===== Dropdown Kontak di navbar ===== */
    .dropdown {
      position: relative;
    }
    .dropdown-toggle{
      /* Agar tombol kontak sama seperti chip */
      font-size:.9rem; padding:.45rem .85rem; border:1px solid rgba(255,255,255,.12);
      border-radius:999px; color:#cdd7ea; line-height:1; text-decoration:none;
    }
    .dropdown-toggle:hover{
      border-color:rgba(255,255,255,.24)
    }

    .menu-panel{
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: rgba(6,17,37,.92);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: .6rem;
      min-width: 240px;
      z-index: 2200;
      backdrop-filter: saturate(1.2) blur(8px);
      box-shadow: 0 14px 40px rgba(0,0,0,.35);

      /* Atur agar tersembunyi secara default */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .14s ease-out, transform .14s ease-out;
    }

    /* Tampilkan saat di-hover */
    .dropdown:hover > .menu-panel {
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
    }

    /* Tampilkan saat tombol aktif (setelah diklik) */
    .dropdown.show > .menu-panel {
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
    }

    .menu-panel .btn {
      display: flex; align-items: center; justify-content: flex-start;
      width: 100%; margin: .25rem 0;
      background: transparent;
      border: 1px solid rgba(255,255,255,.12);
      color: #26A5E4;
    }
    .menu-panel .btn.whatsapp {
      color: #26A5E4;
      /* WhatsApp tetap hijau di ikon SVG, tapi teks sama dengan Telegram */
    }
    .menu-panel .btn:not(.ghost):not(.telegram):not(.whatsapp) {
      /* Email button: pastikan sama dengan Telegram */
      color: #26A5E4;
    }

    /* jaga header selalu di atas layer hero */
    header{ z-index: 1000; isolation: isolate; }

    .partners {
      padding: 48px 0;
      background: #0f1530;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .partners .container {
      text-align: center;
    }
    .partners h2 {
      font-size: clamp(1.2rem,2vw,1.6rem);
      margin-bottom: 30px;
      color: var(--muted);
    }
    .partner-logos {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 48px;
      margin: 0;
      padding: 0;
    }
    .partner-logos img {
      max-height: 70px;
      width: auto;
      display: block;
      opacity: .7;
      filter: brightness(1.2) grayscale(100%);
      transition: opacity .2s, filter .2s;
    }
    .partner-logo.dnsfilter{
      width: 180px;
      height: 56px;
      object-fit: cover;
      object-position: center;
    }
    .partner-logos img:hover {
      opacity: 1;
      filter: none;
    }

    /* fallback lama (JPEG) untuk browser jadul) */
    .hero-media{
      background: url('/images/semeru.jpg') center/cover no-repeat;
    }
    @supports (background: image-set(url('/images/semeru-1280.webp') 1x)) {
      .hero-media{
        background: image-set(
          url('/images/semeru-1280.webp') 1x,
          url('/images/semeru-1920.webp') 2x
        ) center/cover no-repeat;
      }
    }

  
    @media (max-width: 640px){
      .nav{flex-wrap:wrap;gap:.5rem}
      nav.stack{width:100%;justify-content:flex-start;gap:.4rem}
      .chip,.dropdown-toggle{font-size:.82rem;padding:.4rem .7rem}
      .logo-text{font-size:1.1rem}
      .menu-panel{right:auto;left:0;min-width:200px}
      .partners{padding:32px 0}
      .partner-logos{gap:16px;justify-content:space-evenly}
      .partner-logos li{flex:0 1 45%}
      .partner-logos img{height:48px;max-width:160px;width:100%;object-fit:contain}
    }