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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
background:#081b16;
color:white;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

section{
padding:100px 0;
}

img{
width:100%;
display:block;
}

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

.navbar{

position:fixed;
top:0;
left:0;

width:100%;

z-index:9999;

padding:25px 0;

transition:.4s;

}

.navbar.active{

background:rgba(0,0,0,.7);

backdrop-filter:blur(10px);

padding:18px 0;

box-shadow:0 5px 20px rgba(0,0,0,.3);

}

/* NAV */
.nav-container{

display:flex;
justify-content:space-between;
align-items:center;

}

/* LOGO */
.logo-wrapper{

display:flex;
align-items:center;
gap:15px;

}

.logo-box{

width:45px;
height:45px;

border:4px solid white;
border-radius:8px;

}

.logo-wrapper h2{

font-size:24px;
font-weight:700;

color:white;

}

/* MENU */
.nav-menu{

display:flex;
gap:40px;

list-style:none;

}

.nav-menu li a{

text-decoration:none;
color:white;

font-size:14px;
font-weight:600;

letter-spacing:1px;

transition:.3s;

}

.nav-menu li a:hover{

color:#f7c873;

}

/* MOBILE */
.menu-toggle{

display:none;

font-size:30px;
cursor:pointer;

color:white;

}

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

.hero{

height:100vh;

position:relative;

display:flex;
align-items:center;

background-size:cover;
background-position:center;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
to right,
rgba(0,0,0,.7),
rgba(0,0,0,.2)
);

}

/* CONTENT */
.hero-content{

position:relative;
z-index:5;

width:100%;

}

/* TEXT */
.hero-text{

max-width:750px;

}

.hero-text h1{

font-size:140px;
font-weight:800;

line-height:120px;

margin-bottom:10px;

text-transform:uppercase;

color:white;

}

.hero-text h2{

font-size:70px;
font-weight:700;

margin-bottom:30px;

color:white;

}

.hero-text p{

font-size:20px;
line-height:2;

max-width:650px;

margin-bottom:40px;

color:#ddd;

}

/* BUTTON */
.hero-btn{

display:inline-flex;
align-items:center;
gap:12px;

padding:18px 45px;

background:white;

border-radius:60px;

text-decoration:none;

font-weight:700;

color:#081b16;

transition:.4s;

}

.hero-btn:hover{

transform:translateY(-5px);

background:#f7c873;

}

/* =========================
SECTION TITLE
========================= */

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title h2{

font-size:55px;
margin-bottom:15px;

}

.section-title p{

max-width:700px;
margin:auto;

line-height:2;

color:#ddd;

}

/* =========================
BENEFIT
========================= */

.benefit{

background:#0d241e;

}

.benefit-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.benefit-card{

background:#123129;

padding:40px;

border-radius:25px;

text-align:center;

transition:.4s;

}

.benefit-card:hover{

transform:translateY(-10px);

}

.benefit-card i{

font-size:55px;

color:#f7c873;

margin-bottom:25px;

}

.benefit-card h3{

font-size:28px;
margin-bottom:15px;

}

.benefit-card p{

line-height:1.8;
color:#ddd;

}

/* =========================
VIDEO
========================= */

.video-section{

background:#081b16;
overflow:hidden;

}

.video-wrapper{

display:flex;
align-items:center;
gap:50px;

}

/* LEFT */
.video-left{

width:35%;

}

.video-left h2{

font-size:60px;
line-height:70px;

margin-bottom:25px;

}

.video-left p{

line-height:2;
font-size:18px;

color:#ddd;

margin-bottom:35px;

}

/* BUTTON */
.video-btn{

display:inline-block;

padding:16px 40px;

border:2px solid white;

border-radius:60px;

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

}

.video-btn:hover{

background:white;
color:#081b16;

}

/* RIGHT */
.video-right{

width:65%;

display:flex;
align-items:center;
gap:20px;

}

/* SLIDER */
.video-slider{

display:flex;
gap:20px;

overflow-x:auto;

scroll-behavior:smooth;

width:100%;

padding-bottom:10px;

}

.video-slider::-webkit-scrollbar{
display:none;
}

/* CARD */
.video-card{

min-width:260px;

background:#123129;

border-radius:30px;

overflow:hidden;

position:relative;

flex-shrink:0;

transition:.4s;

}

.video-card:hover{

transform:translateY(-10px);

}

/* IMAGE */
.video-image{

height:450px;
position:relative;

overflow:hidden;

}

.video-image img{

width:100%;
height:100%;

object-fit:cover;

}

/* OVERLAY */
.video-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,.1)
);

display:flex;
justify-content:flex-end;
align-items:flex-start;

padding:20px;

font-size:35px;

}

/* CONTENT */
.video-content{

position:absolute;

bottom:0;
left:0;

width:100%;

padding:25px;

z-index:5;

}

.video-content h3{

font-size:28px;
line-height:1.5;

margin-bottom:20px;

}

/* PLAY */
.play-video{

padding:12px 28px;

border:none;
border-radius:50px;

background:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.play-video:hover{

transform:scale(1.05);

}

/* BUTTON */
.slide-btn{

width:60px;
height:60px;

border:none;
border-radius:50%;

background:white;

font-size:20px;

cursor:pointer;

flex-shrink:0;

transition:.3s;

}

.slide-btn:hover{

transform:scale(1.1);

}

/* =========================
PAKET
========================= */

.paket{

background:#0d241e;

}

.paket-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

/* CARD */
.paket-card{

background:#123129;

border-radius:30px;

overflow:hidden;

transition:.4s;

}

.paket-card:hover{

transform:translateY(-10px);

}

/* IMAGE */
.paket-card img{

height:250px;

object-fit:cover;

}

/* CONTENT */
.paket-content{

padding:30px;

}

/* TITLE */
.paket-content h3{

font-size:30px;

margin-bottom:15px;

}

/* DESC */
.paket-content p{

line-height:1.8;

color:#ddd;

margin-bottom:25px;

}

/* PRICE */
.paket-price{

font-size:40px;
font-weight:800;

color:#f7c873;

margin-bottom:25px;

}

/* BUTTON */
.paket-btn{

display:inline-block;

padding:14px 35px;

background:white;

border-radius:50px;

text-decoration:none;

font-weight:700;

color:#081b16;

transition:.3s;

}

.paket-btn:hover{

background:#f7c873;

}

/* =========================
BONUS
========================= */

.bonus{

background:#081b16;

}

.bonus-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.bonus-card{

background:#123129;

border-radius:25px;

overflow:hidden;

transition:.4s;

}

.bonus-card:hover{

transform:translateY(-10px);

}

.bonus-card img{

height:250px;
object-fit:cover;

}

.bonus-card h3{

padding:25px;

text-align:center;

font-size:24px;

}

/* =========================
TESTIMONI
========================= */

.testimoni{

background:#0d241e;

}

.testi-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.testi-card{

background:#123129;

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;

}

.testi-card:hover{

transform:translateY(-10px);

}

.testi-card img{

width:90px;
height:90px;

border-radius:50%;

object-fit:cover;

margin:auto;
margin-bottom:20px;

}

.testi-card h3{

font-size:24px;
margin-bottom:5px;

}

.testi-card small{

color:#f7c873;

display:block;

margin-bottom:20px;

}

.testi-card p{

line-height:1.8;

color:#ddd;

}

/* =========================
CTA
========================= */

.cta{

background:#f7c873;

text-align:center;

color:#081b16;

}

.cta h2{

font-size:55px;

margin-bottom:30px;

}

.cta-btn{

display:inline-flex;
align-items:center;
gap:12px;

padding:18px 45px;

background:#25d366;

border-radius:60px;

text-decoration:none;

font-weight:700;

color:white;

transition:.4s;

}

.cta-btn:hover{

transform:translateY(-5px);

}

/* ─── FOOTER ─── */
      footer {
        background: var(--smoke);
        padding: 48px 5% 32px;
        text-align: center;
        border-top: 1px solid rgba(255, 248, 240, 0.06);
      }
      .footer-brand {
        font-family: "Bebas Neue", sans-serif;
        font-size: 2.5rem;
        letter-spacing: 6px;
        color: var(--gold);
        margin-bottom: 6px;
      }
      .footer-tagline {
        font-size: 0.78rem;
        color: var(--muted);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 28px;
      }
      .footer-links {
        display: flex;
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
        margin-bottom: 32px;
      }
      .footer-links a {
        color: rgba(255, 248, 240, 0.5);
        text-decoration: none;
        font-size: 0.8rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.2s;
      }
      .footer-links a:hover {
        color: var(--gold);
      }
      .footer-divider {
        width: 80%;
        max-width: 400px;
        height: 1px;
        background: rgba(255, 248, 240, 0.06);
        margin: 0 auto 28px;
      }
      .footer-credit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .footer-logo-wrap {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        border: 1.5px solid rgba(255, 184, 0, 0.3);
        background: rgba(255, 248, 240, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .footer-logo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .footer-logo-fallback {
        font-size: 1.4rem;
      }
      .footer-dev {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.5;
      }
      .footer-dev strong {
        color: rgba(255, 248, 240, 0.6);
      }
      .footer-copy {
        margin-top: 24px;
        font-size: 0.72rem;
        color: rgba(255, 248, 240, 0.25);
      }
/* =========================
POPUP VIDEO
========================= */

.popup-video{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.9);

display:none;

justify-content:center;
align-items:center;

z-index:99999;

padding:20px;

}

.popup-video.active{

display:flex;

}

/* CONTENT */
.popup-content{

width:100%;
max-width:950px;

position:relative;

}

.popup-content video{

width:100%;

border-radius:20px;

}

/* CLOSE */
.close-popup{

position:absolute;

top:-50px;
right:0;

font-size:35px;

cursor:pointer;

color:white;

}

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

@media(max-width:991px){

.video-wrapper{

flex-direction:column;

}

.video-left,
.video-right{

width:100%;

}

.video-left{

text-align:center;

}

.hero-text h1{

font-size:100px;
line-height:90px;

}

.hero-text h2{

font-size:55px;

}

}

/* MOBILE */
@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-menu{

position:fixed;

top:0;
right:-100%;

width:280px;
height:100vh;

background:#081b16;

flex-direction:column;

justify-content:center;
align-items:center;

transition:.4s;

}

.nav-menu.active{

right:0;

}

/* HERO */
.hero{

text-align:center;

}

.hero-text{

margin:auto;

}

.hero-text h1{

font-size:65px;
line-height:65px;

}

.hero-text h2{

font-size:35px;

}

.hero-text p{

font-size:16px;

}

.section-title h2{

font-size:40px;

}

.video-left h2{

font-size:40px;
line-height:50px;

}

.video-card{

min-width:220px;

}

.video-image{

height:360px;

}

.video-content h3{

font-size:22px;

}

.cta h2{

font-size:35px;

}

}