/* ============================================================
📁 FILE : static/css/index.css
============================================================ */
:root{
  --fg:#ffffff;
  --fg-dim:rgba(255,255,255,.86);
  --fg-soft:rgba(255,255,255,.72);
  --outline:rgba(255,255,255,.52);
  --outline-2:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#000;
}

.nav-toggle{display:none}
.nav-toggle:checked ~ .drawer{transform:translateX(0)}
.nav-toggle:checked ~ .backdrop{opacity:1;pointer-events:auto}
.nav-toggle:checked ~ .page{height:100vh;overflow:hidden}

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 24px;
  z-index:20;
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  backdrop-filter:saturate(120%) blur(2px);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
}

.topbar a{color:var(--fg);text-decoration:none;padding:10px 8px;display:inline-block}
.left,.right{display:flex;align-items:center}
.left{gap:16px}
.right{gap:16px;justify-self:end}
.nav-left,.nav-right{display:flex;gap:18px;align-items:center}
.nav-right{justify-content:flex-end}
.brand{justify-self:center;font-family:Optima,"Palatino Linotype",Palatino,"Times New Roman",Times,serif;font-weight:600;letter-spacing:.5em;font-size:22px}

.topbar .brand{
  text-decoration:none;
  color:inherit;
  padding:0;
  display:block;
  letter-spacing: .7em;
}
.topbar .brand:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:2px;
}

.topbar .nav-left a,
.topbar .nav-right a{
  text-decoration:none;
}

.topbar .nav-left a:hover,
.topbar .nav-right a:hover{
  text-decoration:underline;
  text-decoration-color:var(--fg);
  text-decoration-thickness:1px;
  text-underline-offset:0.6em;
}
.topbar .brand{ text-decoration:none }
.topbar .brand:hover{ text-decoration:none }

.topbar{backdrop-filter:saturate(120%) blur(2px)}
.scrolled .topbar{backdrop-filter:saturate(140%) blur(6px)}

.hamb{display:none;position:relative;width:26px;height:20px;cursor:pointer}
.hamb::before,.hamb::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fg-dim);transition:transform .25s ease,opacity .25s ease}
.hamb::before{top:5px}
.hamb::after{bottom:5px}

.icon{line-height:0;color:var(--fg-dim)}

.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  z-index:0;
}
.hero-bg{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  filter:contrast(1.02) saturate(1.02) brightness(.86);
  transform:translateZ(0);
  pointer-events:none;
  z-index:-2;
}

.scrim{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.40) 100%);
  pointer-events:none;
  z-index:-1;
}

.hero,
.hero-copy,
.cta{
  position:relative;
  z-index:1;
}

.hero-copy{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:18px;
  padding:0 24px;
  text-align:center;
}
.title{
  margin:0;
  font-family:Optima,"Palatino Linotype",Palatino,"Times New Roman",Times,serif;
  font-weight:500;
  font-size:clamp(40px,7.6vw,88px);
  line-height:1.02;
  color:var(--fg);
  text-transform:uppercase;
  text-shadow:var(--shadow);
}
.subtitle{
  margin:0;
  font-size:clamp(12px,2.1vw,18px);
  letter-spacing:.28em;
  color:var(--fg-soft);
  text-transform:uppercase;
}

.cta{
  position:absolute;
  left:50%;
  bottom:9vh;
  transform:translateX(-50%);
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  padding:16px 22px;
  border-radius:5px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .15s ease,opacity .15s ease,background-color .15s ease,color .15s ease;
  will-change:transform;
}
.btn.ghost{
  border:1px solid var(--fg);
  color:var(--fg);
  background:transparent;
  backdrop-filter:saturate(120%) blur(1px);
  -webkit-backdrop-filter:saturate(120%) blur(1px);
}
.btn.ghost:hover{transform:translateY(-1px);opacity:.92}
.btn.ghost:active{transform:translateY(0)}

.drawer{
  position:fixed;
  top:0;
  left:0;
  height:100dvh;
  width:86vw;
  max-width:420px;
  background:rgba(12,16,20,.28);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-right:1px solid var(--outline-2);
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  z-index:40;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 22px;
}
.drawer-head{display:flex;justify-content:flex-end;align-items:center}
.close{position:relative;width:24px;height:24px;cursor:pointer}
.close::before,.close::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:var(--fg-dim);transform-origin:center}
.close::before{transform:translateY(-50%) rotate(45deg)}
.close::after{transform:translateY(-50%) rotate(-45deg)}

.drawer-links{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.drawer-links a{display:block;padding:14px 6px;color:var(--fg);text-decoration:none;text-transform:uppercase;letter-spacing:.22em;border:1px solid transparent;border-radius:6px}
.drawer-links a:active{border-color:var(--outline)}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:30;
}

.desktop{display:flex}
.mobile{display:none}
.icon.mobile{display:none}

@media (max-width:920px){
  .topbar{height:64px;padding:0 16px}
  .desktop{display:none}
  .mobile{display:inline-flex}
  .icon.mobile{display:inline-flex}
  .hamb{display:inline-flex}
  .right{gap:10px;justify-self:end}
  .brand{letter-spacing:.22em;font-size:14px}
  .cta{bottom:12vh}
  .btn{min-width:200px;padding:14px 18px}
  .icon svg{width:24px;height:24px;}
  .icon{padding:6px;}
}

@media (max-width: 920px){
  .drawer{
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    border-right: none;
    transform: translateX(-100%);
  }
  .nav-toggle:checked ~ .drawer{
    transform: translateX(0);
  }
  .backdrop{ display:none !important; }
}

@media (max-width:520px){
  .cta{bottom:13vh}
}


/* ==== HANYA SAAT PWA (standalone) — aman dari notch & home indicator ==== */
@media (display-mode: standalone){
  :root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
  }

  /* pakai tinggi layar penuh aplikasi */
  html, body{ height: 100dvh; }

  /* Topbar turun sesuai notch */
  .topbar{
    padding-top: var(--safe-top);
    height: calc(72px + var(--safe-top));
  }
  @media (max-width:920px){
    .topbar{
      height: calc(64px + var(--safe-top));
      padding-left: 16px; padding-right: 16px; /* tetap konsisten dgn mobile */
    }
  }

  /* Hero & background menyesuaikan 100dvh */
  .hero{ height: 100dvh; }
  .hero-bg, .scrim{
    top: 0; height: 100dvh; width: 100vw;
  }

  /* Konten di tengah tidak ketabrak notch/home indicator */
  .hero-copy{
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bot);
  }

  /* CTA aman dari home indicator */
  .cta{
    bottom: max(9vh, calc(12px + var(--safe-bot)));
  }

  /* Drawer sudah pakai env(safe-area-inset-top), tambah bottom juga */
  .drawer{
    padding-top: calc(var(--safe-top) + 14px);
    padding-bottom: calc(var(--safe-bot) + 22px);
  }
}