:root{
    --green: #1EA847;
    --yellow: #E0C103;
    --bg: #0f1720;
    --card: rgba(255,255,255,0.06);
    --glass: rgba(255,255,255,0.08);
    --radius: 20px;
    font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:#e6eef3;overflow-x:hidden}

/* Background Aurora + Bintang */
.night-sky{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
    background:linear-gradient(180deg,#061018 0%,#0f1720 100%);}
.aurora{position:absolute;width:300%;height:300%;top:-100%;left:-100%;
    background:
        radial-gradient(circle at 20% 30%,rgba(30,168,71,0.5),transparent 45%),
        radial-gradient(circle at 80% 20%,rgba(224,193,3,0.4),transparent 50%),
        radial-gradient(circle at 50% 70%,rgba(30,168,71,0.3),transparent 55%);
    animation:aurora-move 50s infinite linear;opacity:0.4;filter:blur(90px);mix-blend-mode:screen;}
.stars{position:absolute;width:100%;height:100%;}
.star{position:absolute;background:#fff;border-radius:50%;opacity:0.3;
    animation:twinkle 4s infinite;}
@keyframes aurora-move{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(5%,10%) rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0.2}50%{opacity:1}}

/* Header */
header{padding:32px 40px;display:flex;align-items:center;gap:24px;position:relative;z-index:10;
    backdrop-filter:blur(12px);background:rgba(15,23,32,0.7);}
.logo img{height:70px;filter:drop-shadow(0 4px 12px rgba(30,168,71,0.4));}
.brand{font-size:32px;font-weight:800;}
.brand span{color:var(--yellow);}
.tagline{font-size:15px;opacity:0.9;margin-top:4px;}

/* Peta */
#map{height:65vh;margin:30px 40px;border-radius:var(--radius);overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);border:3px solid rgba(30,168,71,0.3);}

/* Galeri Produk */
.gallery{padding:60px 40px;}
.section-title{text-align:center;font-size:38px;margin-bottom:20px;color:var(--green);}
.village-caption{text-align:center;font-size:32px;font-weight:700;color:var(--yellow);margin:40px 0 50px;}
.products-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:28px;
    max-width:1600px;margin:0 auto;
}
.product-card{
    background:var(--card);border-radius:var(--radius);overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,0.3);backdrop-filter:blur(10px);
    transition:all 0.4s;opacity:0;transform:translateY(40px);
}
.product-card.visible{opacity:1;transform:none;}
.product-card:hover{transform:translateY(-16px);box-shadow:0 24px 70px rgba(30,168,71,0.3);}
.product-img{width:100%;height:240px;object-fit:cover;}
.product-info{padding:24px;}
.product-name{font-size:19px;font-weight:700;margin-bottom:8px;}
.product-price{font-size:22px;color:var(--green);font-weight:800;margin:8px 0;}
.ukm-name{font-size:14px;color:#b6d3c0;}
.location{font-size:13px;color:#93a6a1;margin-top:8px;display:flex;align-items:center;gap:6px;}

/* Dokumentasi Video */
.video-section{padding:80px 40px;background:rgba(15,23,32,0.6);text-align:center;}
.video-section h2{font-size:36px;margin-bottom:40px;color:var(--green);}
.youtube-container{
    position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);max-width:1100px;margin:0 auto;
}
.youtube-container iframe{
    position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}
/* Floating WA */
.wa-float{
    position:fixed;bottom:30px;right:30px;width:70px;height:70px;
    background:#25d366;color:#fff;border-radius:50%;font-size:38px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 40px rgba(37,211,102,0.6);z-index:1000;
    animation:pulse 3s infinite;transition:0.3s;
}
.wa-float:hover{transform:scale(1.2);}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(37,211,102,0.6)}50%{box-shadow:0 10px 60px rgba(37,211,102,0.9)}}

/* Responsif */
@media(max-width:1400px){.products-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
    #map{height:50vh;margin:20px;}
    header{padding:24px 20px;}
    .products-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
    .village-caption{font-size:26px;}
}
@media(max-width:480px){.products-grid{grid-template-columns:1fr}}