/* =====================================================
   GLOBAL
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html, body{
height:100%;
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#050505;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}


/* =====================================================
   BACKGROUND GLOW
===================================================== */
.bg-glow{
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: -1;

  background: linear-gradient(
    135deg,
    rgba(0,255,140,.28) 0%,
    rgba(0,255,140,.14) 35%,
    rgba(0,255,140,.06) 65%,
    rgba(0,0,0,.18) 100%
  );

  mix-blend-mode: screen;
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{
position:fixed;
top:0;
width:100%;
z-index:999;
background:rgba(0,0,0,.6);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
  position: relative;
  display: inline-block;
  font-weight: 800;
}

/* icon di belakang teks */
.logo::before{
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 60px;
  height: 60px;

  background-image: url("https://raw.githubusercontent.com/joehanz/rajarayap/refs/heads/main/images/rajarayap.icon.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: 0.4; /* transparan biar tidak ganggu teks */
  z-index: -1;
}
.desktop-menu{
display:flex;
gap:35px;
}

.desktop-menu a{
text-decoration:none;
color:#fff;
transition:.3s;
}

.desktop-menu a:hover{
color:#00ff84;
}

#burger{
display:none;
font-size:35px;
cursor:pointer;
}


/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu{
display:none;
padding:20px;
background:#111;
}

.mobile-menu a{
display:block;
padding:12px;
color:#fff;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-menu.active{
display:block;
}


/* =====================================================
   HERO
===================================================== */

.hero{
height:100vh;
width:100%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
text-align:center;
}

.hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:.25;
filter:brightness(.6) contrast(1.1);
animation:heroFloat 10s ease-in-out infinite;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,#050505,transparent);
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
padding:20px;
}

.hero-badge{
display:inline-block;
padding:8px 18px;
background:#00ff84;
color:#000;
border-radius:30px;
font-size:12px;
font-weight:700;
margin-bottom:25px;
}

.hero-title{
font-size:75px;
font-weight:900;
margin-bottom:15px;
}

.hero-desc{
font-size:18px;
opacity:.8;
margin-bottom:35px;
}

.hero-btn{
display:inline-block;
padding:15px 40px;
background:#00ff84;
color:#000;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.4s;
}

.hero-btn:hover{
transform:translateY(-5px);
}

.hero-image1{
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  object-fit: cover;

  opacity: 0.22;
  filter: brightness(0.7) contrast(1.1) saturate(1.1);

  z-index: -1; /* di belakang semua konten */
  pointer-events: none;
}

/* =====================================================
   INTRO
===================================================== */

.intro{
max-width:1000px;
margin:auto;
padding:100px 25px;
text-align:justify;
}

.intro h2{
font-size:38px;
margin-bottom:20px;
}

.intro p{
opacity:.8;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
padding:40px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
opacity:.7;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes heroFloat{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

.desktop-menu{
display:none;
}

#burger{
display:block;
}

.hero-title{
font-size:45px;
}

.hero-desc{
font-size:15px;
}

}


/* NAVBAR HILANG DI HOME */
body.home .navbar{
display:none;
}

/* FULL LOCK HOMEPAGE */
body.home{
height:100vh;
overflow:hidden;
position:fixed;
width:100%;
}