body{
    margin:0;
    font-family:Segoe UI;
    background:#071a16;
    color:white;
    overflow-x:hidden;
    }
    
    /* NAVBAR */
    .navbar{
    display:flex;
    justify-content:space-between;
    padding:15px 30px;
    position:fixed;
    width:100%;
    z-index:999;
    transition:.3s;
    }
    
    .navbar.scrolled{
    background:#061d18;
    box-shadow:0 0 15px #ffd70066;
    }
    
    .logo{
    color:#ffd700;
    font-weight:bold;
    }
    
    .nav-menu{
    display:flex;
    gap:20px;
    list-style:none;
    }
    
    .nav-menu a{
    color:white;
    text-decoration:none;
    }
    
    .menu-toggle{
    display:none;
    font-size:25px;
    cursor:pointer;
    }
    
    /* HERO */
    .hero{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    radial-gradient(circle,#0f3d34,#071a16);
    font-size:40px;
    font-weight:bold;
    text-align:center;
    }
    
    .slide{
    display:none;
    animation:fade 1s;
    }
    
    .slide.active{
    display:block;
    }
    
    @keyframes fade{
    from{opacity:0}
    to{opacity:1}
    }
    
    /* LAYANAN */
    .layanan{
    padding:80px 20px;
    text-align:center;
    }
    
    .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    }
    
    .card{
    background:#0f3d34;
    padding:30px;
    border-radius:12px;
    transition:.3s;
    box-shadow:0 0 10px #ffd70033;
    }
    
    .card:hover{
    transform:translateY(-10px);
    box-shadow:0 0 20px #ffd700;
    }
    
    /* TESTI */
    .marquee{
    overflow:hidden;
    white-space:nowrap;
    }
    
    .track{
    display:inline-block;
    animation:scroll 15s linear infinite;
    }
    
    .track span{
    margin:0 40px;
    }
    
    @keyframes scroll{
    from{transform:translateX(100%)}
    to{transform:translateX(-100%)}
    }
    
    /* WHATSAPP FLOAT SUPER PRO */
.wa{
    position:fixed;
    bottom:25px;
    right:25px;
    
    width:65px;
    height:65px;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:white;
    
    border-radius:50%;
    font-size:32px;
    
    box-shadow:0 8px 25px rgba(0,0,0,0.4);
    transition:0.3s;
    
    z-index:999;
    }
    
    /* HOVER EFFECT */
    .wa:hover{
    transform:scale(1.15) rotate(8deg);
    box-shadow:0 0 20px #25D366, 0 0 40px #25D366;
    }
    
    /* ANIMASI DENYUT */
    .wa::after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:#25D366;
    animation:pulse 2s infinite;
    z-index:-1;
    }
    
    @keyframes pulse{
    0%{transform:scale(1); opacity:.7;}
    70%{transform:scale(1.6); opacity:0;}
    100%{opacity:0;}
    }
    /* ================= PREMIUM ISLAMIC HERO ================= */

/* Kubah masjid siluet */
.hero::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:220px;
    
    background:url("https://svgshare.com/i/15Rj.svg") bottom center no-repeat;
    background-size:cover;
    
    opacity:0.15;
    pointer-events:none;
    }
    
    /* Partikel bintang */
    .star{
    position:absolute;
    width:3px;
    height:3px;
    background:#ffd700;
    border-radius:50%;
    opacity:.8;
    animation:twinkle linear infinite;
    }
    
    @keyframes twinkle{
    0%{transform:translateY(0);opacity:0}
    50%{opacity:1}
    100%{transform:translateY(-200px);opacity:0}
    }
    
    
    /* REVEAL SCROLL */
    .reveal{
    opacity:0;
    transform:translateY(50px);
    transition:1s;
    }
    
    .reveal.active{
    opacity:1;
    transform:translateY(0);
    }
    
   /* ================= NAVBAR FIX ================= */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    
    display:flex;
    justify-content:space-between;
    align-items:center;
    
    padding:12px 20px;
    box-sizing:border-box;
    
    background:#061d18;
    z-index:9999;
    }
    
    /* Biar konten tidak ketutup navbar */
    body{
    padding-top:70px;
    }
    
    /* MENU DESKTOP */
    .nav-menu{
    display:flex;
    gap:20px;
    list-style:none;
    margin:0;
    padding:0;
    }
    
    .nav-menu a{
    text-decoration:none;
    color:white;
    font-weight:500;
    }
    
    /* HAMBURGER */
    .menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#ffd700;
    }
    
    /* ================= MOBILE ================= */
    @media(max-width:768px){
    
    .nav-menu{
    position:absolute;
    top:60px;
    right:0;
    
    width:220px;
    background:#061d18;
    
    flex-direction:column;
    align-items:flex-start;
    
    padding:15px;
    display:none;
    
    border-radius:0 0 0 12px;
    box-shadow:0 10px 20px rgba(0,0,0,0.5);
    }
    
    /* Saat aktif */
    .nav-menu.active{
    display:flex;
    }
    
    /* Tampil hamburger */
    .menu-toggle{
    display:block;
    }
    
    }
    /* ================= FOOTER PRO ================= */

.footer{
    background:#061d18;
    padding-top:50px;
    color:white;
    }
    
    .footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    padding:0 30px 40px 30px;
    }
    
    .footer-box h3{
    color:#ffd700;
    margin-bottom:15px;
    }
    
    .footer-box ul{
    list-style:none;
    padding:0;
    }
    
    .footer-box ul li{
    margin-bottom:8px;
    }
    
    .footer-box a{
    color:white;
    text-decoration:none;
    transition:.3s;
    }
    
    .footer-box a:hover{
    color:#ffd700;
    padding-left:5px;
    }
    
    /* SOCIAL ICON */
    .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    width:40px;
    height:40px;
    margin-right:8px;
    
    background:#0f3d34;
    border-radius:50%;
    font-size:18px;
    
    transition:.3s;
    }
    
    .social a:hover{
    background:#ffd700;
    color:black;
    transform:translateY(-5px);
    }
    
    /* BOTTOM */
    .footer-bottom{
    text-align:center;
    padding:15px;
    background:#041512;
    font-size:14px;
    }
    /* TESTIMONI BOX BERJALAN */

.marquee{
    overflow:hidden;
    padding:20px 0;
    }
    
    .track{
    display:flex;
    gap:20px;
    animation:scrollBox 18s linear infinite;
    }
    
    .testi-box{
    min-width:250px;
    background:#0f3d34;
    padding:20px;
    border-radius:12px;
    box-shadow:0 0 12px #ffd70033;
    }
    
    .testi-box p{
    margin:0 0 10px 0;
    }
    
    .testi-box span{
    font-size:14px;
    color:#ffd700;
    }
    
    /* ANIMASI */
    @keyframes scrollBox{
    0%{transform:translateX(100%)}
    100%{transform:translateX(-100%)}
    }
    /* ================= PREMIUM HERO VISUAL ================= */

/* Slider background layer */
.hero{
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    transition:background-image 1.2s ease-in-out;
    }
    
    /* Kabut spiritual */
    .hero::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
    background:radial-gradient(circle at 30% 30%, rgba(255,215,0,0.08), transparent),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.05), transparent);
    
    pointer-events:none;
    }
    
    /* Partikel cahaya */
    .light{
    position:absolute;
    width:4px;
    height:4px;
    background:#ffd700;
    border-radius:50%;
    opacity:.7;
    animation:floatLight linear infinite;
    }
    
    @keyframes floatLight{
    0%{transform:translateY(0); opacity:0}
    50%{opacity:1}
    100%{transform:translateY(-200px); opacity:0}
    }
     h2 {
         text-align: center;
     }