*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --navy:#1B2A4A; --navy-light:#243558; --maroon:#A22D3D; --gold-light:#E8C76A;
      --white:#FFFFFF; --light:#F5F7FA; --text:#334155; --text-light:#64748B;
      --border:#E2E8F0; --radius:0.75rem;
    }
    html { scroll-behavior:smooth; }
    body { font-family:'Poppins',sans-serif; color:var(--text); background:var(--white); line-height:1.6; }
    img { max-width:100%; display:block; }
    a { text-decoration:none; color:inherit; }
    .container { max-width:1200px; margin:0 auto; padding:0 2rem; }
    @media(min-width:768px) { .container { padding:0 3rem; } }
    @media(min-width:1280px) { .container { padding:0 4rem; } }

    /* NAVBAR */
    .navbar { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; height:90px; }
    .nav-brand { display:flex; align-items:center; gap:0.75rem; }
    .logo-icon { width:120px; height:120px; object-fit: contain; flex-shrink: 0; }
    .brand-text { font-weight:700; font-size:0.95rem; color:var(--navy); line-height:1.2; }
    .brand-sub { font-size:0.7rem; color:var(--text-light); font-weight:500; margin-top:4px; display:block; }
    .nav-links { display:flex; align-items:center; gap:2rem; }
    .nav-links a { font-size:0.875rem; font-weight:500; color:var(--text-light); transition:color .2s; }
    .nav-links a:hover { color:var(--navy); }
    .btn-gold { display:inline-block; background:var(--maroon); color:var(--white); padding:0.625rem 1.5rem; border-radius:var(--radius); font-weight:600; font-size:0.875rem; border:none; cursor:pointer; transition:opacity .2s; box-shadow:0 4px 14px rgba(212,168,67,0.3);  }
    .btn-gold:hover { opacity:0.9; }

    .hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--navy); }
    .hamburger svg { width:28px; height:28px; }
    .hamburger .icon-close { display:none; }
    .hamburger.active .icon-open { display:none; }
    .hamburger.active .icon-close { display:block; }

    .mobile-menu { display:none; position:absolute; top:72px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); padding:1rem 1.5rem 1.5rem; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
    .mobile-menu.open { display:block; }
    .mobile-menu a { display:block; padding:0.875rem 0; font-size:1rem; font-weight:500; color:var(--text); border-bottom:1px solid var(--border); transition:color .2s; }
    .mobile-menu a:last-of-type { border-bottom:none; }
    /* .mobile-menu a:hover { color:var(--navy); }
    .mobile-menu .btn-gold { display:block; text-align:center; margin-top:1rem; padding:0.875rem; font-size:1rem; width:100%; } */

    /* 1. Kondisi Awal: Outline Maroon (berlaku untuk Desktop & Mobile) */
    .btn-gold,
.nav-links a.btn-gold,
.mobile-menu a.btn-gold {
    display: block;
    align-items: center;
    justify-content: center;
    background: transparent !important; /* Latar belakang bening */
    color: var(--maroon) !important; /* Tulisan warna merah marun */
    margin-top: 1rem; /* Jarak atas untuk mobile */
    padding: 0.65rem 1.75rem; /* Ukuran ruang dalam tombol */
    border-radius: 8px; /* Bentuk sudut sedikit membulat */
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid var(--maroon) !important; /* Ketebalan garis luar 2px */
    cursor: pointer;
    transition: all 0.3s ease; /* Transisi halus untuk semua perubahan (warna & background) */
    box-shadow: none; /* Menghilangkan shadow kuning lama */
    text-align: center;
}

/* 2. Kondisi Saat Di-hover: Fill Maroon, Teks Putih */
.btn-gold:hover,
.nav-links a.btn-gold:hover,
.mobile-menu a.btn-gold:hover {
    background: var(--maroon) !important; /* Tombol terisi warna maroon */
    color: var(--white) !important; /* Tulisan berubah putih */
    border-color: var(--maroon) !important;
    box-shadow: 0 4px 14px rgba(162, 45, 61, 0.35); /* Menambahkan bayangan merah marun yang elegan */
}

    
    /* HERO */
    .hero { position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
    .hero-bg { position:absolute; inset:0; }
    .hero-bg img { width:100%; height:100%; object-fit:cover; }
    .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(27,42,74,0.94),rgba(27,42,74,0.78),rgba(27,42,74,0.55)); }
    .hero-content { position:relative; z-index:2; max-width:680px; padding:8rem 0 4rem; text-align: left;}
    .hero-badge { display:inline-block; background:rgba(212,168,67,0.15); color:var(--white); border:1px solid rgba(212,168,67,0.3); padding:0.375rem 1rem; border-radius:50px; font-size:0.75rem; font-weight:600; letter-spacing:0.05em; margin-bottom:1.5rem; }
    .hero h1 { font-size:clamp(2rem,4.5vw,3.25rem); font-weight:800; color:var(--white); line-height:1.18; margin-bottom:1.5rem; }
    .hero h1 em { font-style:normal; color:var(--maroon); }
    .hero p.lead { color:rgba(255,255,255,0.8); font-size:1.05rem; line-height:1.7; margin-bottom:2rem; max-width:560px; }
    .hero-proofs { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:2.25rem; justify-content: flex-start;}
    .proof-pill { display:flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:var(--white); padding:0.5rem 0.95rem; border-radius:50px; font-size:0.8rem; font-weight:500; }
    .proof-pill .check { color:var(--maroon); font-weight:800; }
    .hero-buttons { display:flex; flex-wrap:wrap; gap:1rem; justify-content: flex-start;}
    .btn-outline { border:2px solid rgba(255,255,255,0.3); color:var(--white); padding:0.75rem 2rem; border-radius:var(--radius); font-weight:600; font-size:0.9rem; background:none; cursor:pointer; transition:background .2s; display:block; }
    .btn-outline:hover { background:rgba(255,255,255,0.1); }
    .btn-hero { padding:0.75rem 2rem; font-size:0.875rem; }
    

    /* SECTIONS */
    .section { padding:5rem 0; }
    .section-alt { background:var(--light); }
    .section-dark { background:var(--navy); color:var(--white); }
    .section-header { text-align:center; max-width:640px; margin:0 auto 3.5rem; }
    .section-label { color:var(--maroon); font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
    .section-title { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; color:var(--navy); margin:0.5rem 0 1rem; }
    .section-dark .section-title { color:var(--white); }
    .section-desc { color:var(--text-light); font-size:0.95rem; line-height:1.6; }
    .section-dark .section-desc { color:rgba(255,255,255,0.6); }

    /* ABOUT */
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
    .about-img-wrap { position:relative; }
    .about-img-wrap img { border-radius:1rem; height:460px; object-fit:cover; width:100%; box-shadow:0 20px 40px rgba(0,0,0,0.1); }
    .about-badge { position:absolute; bottom:-1.5rem; right:-1.5rem; background:var(--maroon); color:var(--white); border-radius:var(--radius); padding:1.25rem; box-shadow:0 8px 24px rgba(212,168,67,0.3); }
    .about-badge .num { font-size:1.75rem; font-weight:800; }
    .about-badge .txt { font-size:0.7rem; font-weight:500; }
    .about-text .section-label { text-align:left; }
    .about-text h2 { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; color:var(--navy); margin:0.5rem 0 1.5rem; }
    .about-text p { color:var(--text-light); line-height:1.75; margin-bottom:1rem; }
    .about-text p.tight { margin-bottom:0.4rem; }
    .who-block { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--border); }
    .who-label { color:var(--maroon); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1rem; display:block; }
    .who-list { list-style:none; }
    .who-list li { display:flex; align-items:flex-start; gap:0.75rem; padding:0.55rem 0; color:var(--text); font-size:0.9rem; }
    .who-list li svg { width:18px; height:18px; color:var(--maroon); flex-shrink:0; margin-top:3px; }

    /* WHY (5 cards) */
    .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    .feature-card { background:var(--white); border-radius:1rem; padding:1.85rem; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:all .3s; }
    .feature-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.08); transform:translateY(-4px); }
    .feature-icon { width:48px; height:48px; border-radius:12px; background:rgba(212,168,67,0.12); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; font-size:1.4rem; }
    .feature-card h3 { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:0.6rem; }
    .feature-card p { font-size:0.875rem; color:var(--text-light); line-height:1.65; }

    /* PROGRAMS - Phases */
    .phases { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    .phase-card { background:var(--white); border:1px solid var(--border); border-radius:1rem; padding:2rem 1.75rem; transition:all .3s; display:flex; flex-direction:column; }
    .phase-card:hover { border-color:rgba(212,168,67,0.4); box-shadow:0 12px 32px rgba(0,0,0,0.08); transform:translateY(-4px); }
    .phase-num { display:inline-block; background:var(--white); color:var(--maroon); font-size:0.7rem; font-weight:700; letter-spacing:0.1em; padding:0.35rem 0.75rem; border-radius:50px; margin-bottom:1rem; align-self:flex-start; }
    .phase-card h3 { font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:0.35rem; }
    .phase-grade { color:var(--maroon); font-size:0.85rem; font-weight:600; margin-bottom:1rem; }
    .phase-card .tagline { font-size:0.95rem; font-weight:600; color:var(--navy); margin-bottom:1rem; }
    .phase-list { list-style:none; padding:0; }
    .phase-list li { position:relative; padding-left:1.4rem; padding-bottom:0.7rem; font-size:0.85rem; color:var(--text-light); line-height:1.55; }
    .phase-list li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--maroon); }
    .phase-list li strong { color:var(--navy); font-weight:600; }
    .phase-sub { margin-top:0.4rem; padding-left:1rem; }
    .phase-sub li { font-size:0.8rem; padding-bottom:0.35rem; color:var(--text-light); list-style:none; position:relative; padding-left:1rem; }
    .phase-sub li::before { content:'›'; position:absolute; left:0; color:var(--maroon); font-weight:700; }
    .phase-extension { margin-top:1rem; padding:0.85rem 1rem; background:rgba(212,168,67,0.08); border-left:3px solid var(--maroon); border-radius:0 8px 8px 0; font-size:0.8rem; color:var(--text); line-height:1.55; }
    .phase-extension strong { color:var(--navy); display:block; margin-bottom:0.25rem; }


    /* ===== PROGRAMS ===== */
    .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .program-card {
      background: var(--white); border-radius: 16px; padding: 28px;
      border: 1px solid var(--border); transition: all 0.3s;
    }
    .program-card:hover { border-color: rgba(212,168,67,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
    .program-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px; font-size: 22px;
    }
    .program-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; transition: color 0.3s; }
    .program-card:hover h3 { color: var(--maroon); }
    .program-card p { font-size: 13px; color: var(--gray); line-height: 1.6; }
    .icon-blue { background: #EFF6FF; color: #2563EB; }
    .icon-green { background: #F0FDF4; color: #16A34A; }
    .icon-purple { background: #FAF5FF; color: #9333EA; }
    .icon-amber { background: #FFFBEB; color: #D97706; }
    .icon-pink { background: #FFF1F2; color: #E11D48; }

    @media (max-width: 768px) { .programs-grid { grid-template-columns: 1fr; } }

    /* TESTIMONIALS */
    .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    .testimonial-card { background:var(--white); border:1px solid var(--border); border-radius:1rem; padding:2rem; position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:all .3s; display:flex; flex-direction:column; }
    .testimonial-card:hover { border-color:rgba(212,168,67,0.4); box-shadow:0 12px 32px rgba(0,0,0,0.08); transform:translateY(-4px); }
    
    .quote-icon { position:absolute; top:1.5rem; right:1.5rem; color:rgba(212,168,67,0.12); }
    .quote-icon svg { width:48px; height:48px; }
    
    .star-rating { display:flex; gap:0.25rem; color:var(--maroon); margin-bottom:1.25rem; }
    .star-rating svg { width:18px; height:18px; fill:currentColor; }
    
    .testimonial-text { color:var(--text-light); font-size:0.9rem; line-height:1.7; margin-bottom:1.5rem; position:relative; z-index:2; flex-grow:1; }
    
    .client-profile { display:flex; align-items:center; gap:1rem; border-top:1px solid var(--border); padding-top:1.25rem; }
    .client-avatar { width:44px; height:44px; border-radius:50%; background:rgba(212,168,67,0.12); display:flex; align-items:center; justify-content:center; color:var(--gold); font-weight:700; font-size:1rem; flex-shrink:0; }
    .client-info h4 { font-size:0.95rem; font-weight:700; color:var(--navy); margin-bottom:0.1rem; }
    .client-info p { font-size:0.75rem; color:var(--text-light); }

    /* FOOTER */
    .footer { background:var(--navy); color:var(--white); }
    .footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding:4rem 0; }
    .footer h4 { font-size:0.875rem; font-weight:700; margin-bottom:1rem; }
    .footer p, .footer a { font-size:0.85rem; color:rgba(255,255,255,0.6); line-height:1.7; }
    .footer a:hover { color:var(--maroon); }
    .footer-brand { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; }
    .footer-brand .logo-icon { background:var(--navy-light); border:1px solid rgba(255,255,255,0.1); }
    .social-links { display:flex; gap:0.75rem; margin-top:1.25rem; }
    .social-link { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition:background .2s; color:rgba(255,255,255,0.7); }
    .social-link:hover { background:var(--white); color:var(--maroon); }
    .social-link svg { width:16px; height:16px; }
    .contact-item { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.75rem; color:rgba(255,255,255,0.6); font-size:0.85rem; }
    .contact-item svg { width:16px; height:16px; margin-top:3px; flex-shrink:0; opacity:0.6; }
    .footer-handle { font-size:0.75rem; color:rgba(255,255,255,0.4); margin-top:1rem; }
    .footer-map iframe { border-radius:var(--radius); border:1px solid rgba(255,255,255,0.1); width:100%; }
    .footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:1.25rem 0; text-align:center; }
    .footer-bottom p { font-size:0.75rem; color:rgba(255,255,255,0.35); }

    .fade-up { opacity:0; transform:translateY(30px); transition:opacity .7s ease-out, transform .7s ease-out; }
    .fade-up.visible { opacity:1; transform:translateY(0); }

    @media(max-width:1024px) {
      .features-grid { grid-template-columns:1fr 1fr; }
      .phases { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr 1fr; }
      /* Tambahan untuk Testimonial (Tablet) */
      .testimonials-grid { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:768px) {
      .nav-links { display:none !important; }
      .hamburger { display:block !important; }
      .about-grid { grid-template-columns:1fr; gap:2rem; }
      .about-badge { display:none; }
      .about-img-wrap img { height:300px; }
      .features-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr; gap:2rem; }
      /* Tambahan untuk Testimonial (HP) */
      .testimonials-grid { grid-template-columns:1fr; }
      
      .hero-content { padding:6.5rem 0 3rem; }
      .hero h1 { font-size:1.95rem; }
      .section { padding:3.5rem 0; }
    }