/* Reset dan tema dasar */
@import "tailwindcss";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  min-height: 100%;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
}

/* Hero section */
.hero {
  min-height: 100vh;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hero h1 {
  font-size: 3rem;
  text-align: center;
}

/* Header */
header.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  transition: transform 0.6s ease;
  z-index: 999;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 12px 12px;
  border-radius: 0; 
  /* background: rgba(195, 185, 102, 0.2);  */
  color: #000;
  border-color: #fff;
  transition: background-color 0.3s ease, max-width 0.3s ease,
    border-radius 0.3s ease;
}

/* Logo dan menu */
.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  height: clamp(28px, 5.5vw, 44px);
  width: auto;
  display: block;
}

/* Default di hero (bg terang → logo hitam) */
.logo .logo--light {
  display: none;
  height: clamp(58px, 5.5vw, 44px);
}
.logo .logo--dark {
  display: block;
  height: clamp(68px, 5.5vw, 44px);
}

nav a {
  display: none;
  color: #000;
  margin: 0 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.3s;
}
nav a:hover {
  color: #DB6010;
}

nav .btn{
  display: none;
}

.logo img {
  width: auto;
  display: block;
}

/* State ketika scroll */
header.main-header.scrolled .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(38, 38, 38, 0.54);
  max-width: 90%;
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}

header.main-header.scrolled .logo .logo--dark {
  display: none;
}
header.main-header.scrolled .logo .logo--light {
  display: block;
}

header.main-header.scrolled nav a {
  display: inline-block;
  color: #fff;
}
header.main-header.scrolled nav a:hover {
  color: #DB6010;
}

.content {
  padding: 4rem 1rem;
}

/* fallback jika backdrop-filter tidak didukung: naikkan opasitas */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  header.main-header.glass .header-inner {
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Overlay menu mobile */
.mobile-nav{
  position:fixed; inset:0; z-index:998;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:88px; /* ruang untuk header */
  background: rgba(17,17,17,.65);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-nav ul{ list-style:none; width:min(560px, 88%); }
.mobile-nav li + li{ margin-top:12px; }
.mobile-nav a{
  display:block; color:#fff; text-transform:uppercase; letter-spacing:.08em;
  font-size: clamp(1rem, 4.6vw, 1.6rem);
  padding:14px 18px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.mobile-nav a:hover{ background: rgba(255,255,255,.12); }

/* Breakpoint: aktifkan mode mobile tanpa mengubah desktop */
@media (max-width: 992px){
  /* Sembunyikan nav horizontal yang sudah ada (hanya di mobile) */
  .main-header nav { display:none; }

  /* Tampilkan tombol hamburger (hanya di mobile) */
  .ham-btn{ display:inline-block; important! } 

  /* Header agar sedikit merapat di mobile (tanpa sentuh desktop) */
  .header-inner{ width: calc(100% - 16px); }

  /* Burger -> X ketika overlay dibuka (hanya mobile) */
  .main-header.open .ham-line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .main-header.open .ham-line:nth-child(2){ opacity:0; }
  .main-header.open .ham-line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Jika markup logo Anda punya .logo--dark & .logo--light, pastikan overlay pakai logo terang */
  .main-header.open .logo .logo--dark{ display:none; height: clamp(28px, 5.5vw, 44px); }
  /* .main-header.open .logo .logo--light{ display:block; height: clamp(28px, 5.5vw, 44px);} */



/* Fallback jika backdrop-filter tidak didukung (khusus overlay) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .mobile-nav{ background: rgba(17,17,17,.92); }
}