:root{
 --primary:#6d5efc;
 --secondary:#06b6d4;
 --accent:#10b981;
 --dark:#0f172a;
 --dark2:#1e293b;
 --light:#f1f5f9;
 --text:#0f172a;
 --muted:#64748b;
 --white:#ffffff;
}

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

body{
 background:
 radial-gradient(circle at top left, rgba(109,94,252,.18), transparent 35%),
 radial-gradient(circle at bottom right, rgba(16,185,129,.18), transparent 35%),
 #e2e8f0;
 color:var(--text);
 overflow-x:hidden;
}

/* NAVBAR */
.nav{
 position:fixed;
 top:0;
 width:100%;
 padding:14px 7%;
 display:flex;
 justify-content:space-between;
 align-items:center;
 backdrop-filter:blur(18px);
 background:rgba(255,255,255,0.75);
 border-bottom:1px solid rgba(255,255,255,0.3);
 box-shadow:0 8px 25px rgba(0,0,0,0.05);
 z-index:999;
}

/* LOGO WRAP */
.logo-wrap{
 display:flex;
 align-items:center;
 gap:10px;
}

/* LOGO IMAGE (dibikin clean & modern) */
.logo-img{
 height:44px;
 width:44px;
 object-fit:cover;
 border-radius:50%;
 padding:3px;
 background:linear-gradient(135deg,#6366f1,#10b981);
 box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

/* TEXT */
.logo-text{
 font-size:18px;
 font-weight:700;
 color:#0f172a;
 letter-spacing:0.3px;
}

/* BUTTON KHUSUS NAV */
.nav-btn{
 padding:10px 22px;
 border-radius:999px;
 font-size:14px;
 background:linear-gradient(90deg,#6366f1,#10b981);
 color:white;
 text-decoration:none;
 box-shadow:0 8px 20px rgba(99,102,241,0.3);
 transition:.3s;
}

.nav-btn:hover{
 transform:translateY(-2px) scale(1.03);
 box-shadow:0 12px 25px rgba(99,102,241,0.4);
}

/* HERO */
.hero{
 min-height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
 padding:120px 20px 80px;
 background:linear-gradient(135deg,#0f172a,#334155);
 color:white;
 position:relative;
 overflow:hidden;
}

.hero::before{
 content:"";
 position:absolute;
 width:600px;
 height:600px;
 background:rgba(109,94,252,.28);
 filter:blur(130px);
 top:-200px;
 left:-150px;
}

.hero::after{
 content:"";
 position:absolute;
 width:500px;
 height:500px;
 background:rgba(6,182,212,.18);
 filter:blur(130px);
 bottom:-200px;
 right:-100px;
}

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

.hero h1{
 font-size:4rem;
 font-weight:800;
 line-height:1.15;
 background:linear-gradient(90deg,#ffffff,#93c5fd,#6d5efc);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

.hero p{
 margin-top:18px;
 font-size:18px;
 color:#cbd5e1;
 line-height:1.8;
}

/* BUTTON */
.hero-btns{
 margin-top:35px;
 display:flex;
 justify-content:center;
 gap:15px;
 flex-wrap:wrap;
}

.btn{
 padding:14px 28px;
 border-radius:999px;
 text-decoration:none;
 font-weight:600;
 transition:.3s;
 display:inline-block;
}

.primary{
 background:linear-gradient(90deg,var(--primary),var(--accent));
 color:white;
 box-shadow:0 15px 35px rgba(109,94,252,.35);
}

.outline{
 border:1.5px solid rgba(255,255,255,.35);
 color:white;
 background:rgba(255,255,255,.06);
}

.btn:hover{
 transform:translateY(-4px) scale(1.03);
}

/* BADGE */
.badge{
 margin-top:25px;
 color:#cbd5e1;
 font-size:14px;
}

/* GENERAL SECTION */
section{
 padding:90px 8%;
 text-align:center;
}

/* TITLE */
section h2{
 font-size:2.5rem;
 margin-bottom:10px;
 color:var(--dark);
 font-weight:800;
}

/* GRID */
.grid{
 margin-top:35px;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:24px;
}

/* CARD */
.card{
 background:rgba(255,255,255,.82);
 backdrop-filter:blur(12px);
 border:1px solid rgba(255,255,255,.5);
 padding:28px;
 border-radius:24px;
 box-shadow:0 12px 35px rgba(15,23,42,.06);
 transition:.35s;
}

.card:hover{
 transform:translateY(-10px);
 box-shadow:0 20px 45px rgba(109,94,252,.15);
}

.card h3{
 margin-bottom:10px;
 font-size:22px;
 color:var(--dark);
}

.card p{
 color:var(--muted);
 line-height:1.7;
}

/*program */
.sub{
 margin-top:10px;
 color:#64748b;
}

.program-card{
 text-align:left;
}

.program-card ul{
 margin:10px 0;
 padding-left:18px;
 color:#475569;
}

.program-card li{
 margin:4px 0;
}

.result{
 display:block;
 margin-top:10px;
 font-size:13px;
 font-weight:600;
 color:#10b981;
}

/* CTA kecil */
.program-cta{
 margin-top:40px;
 padding:18px 20px;
 border-radius:16px;
 background:rgba(99,102,241,0.08);
 border:1px solid rgba(99,102,241,0.2);
 font-size:15px;
 color:#1e293b; /* lebih gelap & jelas */
 text-align:center;
 font-weight:500;
}

.btn-outline-strong{
 border:2px solid #6366f1;
 color:#6366f1;
 background:white;
}
/* tombol */
.program-cta .btn{
 margin-top:12px;
 display:inline-block;
 padding:8px 18px;
 font-size:13px;
 border-radius:999px;
}
.btn-cta-small{
 margin-top:12px;
 display:inline-block;
 padding:9px 18px;
 font-size:13px;
 border-radius:999px;
 background:linear-gradient(90deg,#6366f1,#10b981);
 color:white;
 text-decoration:none;
 font-weight:600;
 box-shadow:0 8px 20px rgba(99,102,241,0.25);
 transition:.3s;
}

.btn-cta-small:hover{
 transform:scale(1.05);
 box-shadow:0 12px 25px rgba(99,102,241,0.35);
} 



/* BENEFIT SECTION */
.benefit{
 background:linear-gradient(135deg,#f8fafc,#e2e8f0);
 border-radius:35px;
 margin:0 5%;
}



/* CTA */
.cta{
 margin:80px 8%;
 padding:100px 20px;
 border-radius:35px;
 background:linear-gradient(135deg,#6366f1,#10b981);
 color:white;
 text-align:center;
 box-shadow:0 25px 60px rgba(0,0,0,.2);
 position:relative;
 overflow:hidden;
}

/* glow effect */
.cta::before{
 content:"";
 position:absolute;
 width:400px;
 height:400px;
 background:rgba(255,255,255,0.15);
 filter:blur(120px);
 top:-100px;
 left:-100px;
}

/* content */
.cta-content{
 position:relative;
 z-index:2;
 max-width:700px;
 margin:auto;
}

.cta h2{
 font-size:2.8rem;
 font-weight:800;
}

.cta p{
 margin-top:10px;
 color:#e0f2fe;
}

/* PROMO BOX */
.promo-box{
 margin:30px auto;
 padding:25px;
 border-radius:20px;
 background:rgba(255,255,255,0.15);
 backdrop-filter:blur(12px);
 border:1px solid rgba(255,255,255,0.25);
 text-align:left;
}

.promo-title{
 font-weight:800;
 margin-bottom:10px;
 font-size:16px;
}

.promo-box ul{
 list-style:none;
 padding:0;
 margin:10px 0;
}

.promo-box li{
 margin:6px 0;
}

.promo-note{
 margin-top:10px;
 font-size:13px;
 color:#fef9c3;
}

/* BUTTON CTA */
.cta{
 margin:70px 8%;
 padding:70px 20px;
 border-radius:30px;
 background:linear-gradient(135deg,#6366f1,#10b981);
 color:white;
 text-align:center;
 box-shadow:0 20px 50px rgba(0,0,0,.15);
}

/* TITLE */
.cta h2{
 font-size:2.4rem;
 font-weight:800;
}

.cta p{
 margin-top:8px;
 color:#e0f2fe;
}

/* PROMO INLINE */
.promo-inline{
 margin-top:18px;
 display:flex;
 justify-content:center;
 gap:10px;
 flex-wrap:wrap;
}

.promo-inline span{
 background:rgba(255,255,255,0.15);
 padding:6px 12px;
 border-radius:999px;
 font-size:13px;
}

/* INFO */
.cta-info{
 margin-top:15px;
 font-size:14px;
 color:#fef9c3;
}

.divider{
 margin:0 6px;
 opacity:.6;
}

/* BUTTON */
.cta-btn{
 display:inline-block;
 margin-top:20px;
 padding:14px 30px;
 border-radius:999px;
 font-weight:700;
 background:white;
 color:#0f172a;
 text-decoration:none;
 box-shadow:0 10px 30px rgba(0,0,0,.2);
 transition:.3s;
}

.cta-btn:hover{
 transform:scale(1.05);
}

/* SMALL TEXT */
.cta-small{
 display:block;
 margin-top:8px;
 font-size:12px;
 color:#e0f2fe;
}

.big{
 font-size:18px;
 padding:16px 35px;
}

/* FOOTER */
.footer{
 background:#0f172a;
 color:#94a3b8;
 padding:45px;
 text-align:center;
}

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

.hero h1{
 font-size:2.5rem;
}

.hero p{
 font-size:16px;
}

section h2{
 font-size:2rem;
}

.nav{
 padding:15px 5%;
}

}

/* buat chatbox */
/* CHAT WIDGET */
.chat-widget{
 position:fixed;
 right:25px;
 bottom:25px;
 z-index:9999;
}

/* BUTTON BULAT */
.chat-btn{
 width:60px;
 height:60px;
 border-radius:50%;
 border:none;
 cursor:pointer;

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

 font-size:24px;
 color:white;

 background:linear-gradient(135deg,#6366f1,#10b981);
 box-shadow:0 10px 30px rgba(99,102,241,.3);

 transition:.3s;
}

.chat-btn:hover{
 transform:scale(1.1);
}

/* CHAT BOX */
.chat-box{
 width:320px;
 height:420px;
 background:white;
 border-radius:18px;
 box-shadow:0 20px 60px rgba(0,0,0,.2);

 position:absolute;
 bottom:80px;
 right:0;

 display:flex;
 flex-direction:column;

 /* 🔥 ANIMATION FIX */
 opacity:0;
 pointer-events:none;
 transform:translateY(20px) scale(.95);
 transition:.3s;
}

/* ACTIVE STATE */
.chat-box.active{
 opacity:1;
 pointer-events:auto;
 transform:translateY(0) scale(1);
}

/* HEADER */
.chat-header{
 background:linear-gradient(90deg,#6366f1,#10b981);
 color:white;
 padding:14px;
 text-align:center;
 font-weight:600;
 font-size:14px;
}

/* BODY */
.chat-body{
 flex:1;
 overflow:auto;
 padding:10px;
 display:flex;
 flex-direction:column;
}

/* BUBBLE */
.bubble{
 padding:10px 14px;
 border-radius:14px;
 max-width:70%;
 font-size:13px;
 margin:5px;
}

.bubble.admin{
 background:#6366f1;
 color:white;
 align-self:flex-start;
}

.bubble.user{
 background:#e0f2fe;
 align-self:flex-end;
}

/* INPUT */
.chat-input{
 display:flex;
 gap:8px;
 padding:10px;
 border-top:1px solid #eee;
}

.chat-input input{
 flex:1;
 padding:10px;
 border-radius:10px;
 border:1px solid #ccc;
}

.chat-input button{
 padding:10px 14px;
 border:none;
 border-radius:10px;
 background:linear-gradient(90deg,#6366f1,#10b981);
 color:white;
 cursor:pointer;
}