:root{--primary:#8B5CF6;--secondary:#EC4899;--accent:#F59E0B;--bg:#FDFBFF;--card:#fff;--text:#1E1B4B;--text-soft:#6B7280;--gradient:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);}
body.dark{--bg:#0F0A1A;--card:#1A142E;--text:#F3F4F6;--text-soft:#9CA3AF;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);transition:0.3s;}
.header{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);padding:10px 5%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(139,92,246,0.1); min-height:90px;}
body.dark .header{background:rgba(26,20,46,0.7);}
.header img { height: 100%; max-height: 80px; width: auto; }
.dark-btn{background:var(--card);border:2px solid var(--primary);color:var(--primary);width:45px;height:45px;border-radius:50%;cursor:pointer;font-size:18px;transition:0.3s;}
.dark-btn:hover{background:var(--gradient);color:#fff;transform:rotate(180deg);}
.hero-wrap{background:var(--gradient);padding:80px 5%;color:#fff;text-align:center;position:relative;overflow:hidden;}
.hero-wrap::before{content:'';position:absolute;width:400px;height:400px;background:rgba(255,255,255,0.1);border-radius:50%;top:-100px;left:-100px;}
.hero h1{font-size:56px;font-weight:800;margin-bottom:20px;letter-spacing:-1px;}
.hero p{font-size:18px;max-width:700px;margin:0 auto;opacity:0.9;}

/* BANNER 979x431 */
.banner{width:100%;max-width:1200px;margin:-40px auto 60px;border-radius:25px;overflow:hidden;box-shadow:0 25px 60px rgba(139,92,246,0.3);position:relative;z-index:10;}
.slide-content{position:relative;width:100%;aspect-ratio:979 / 431;overflow:hidden;}
.parallax-bg{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;}
.slide-text{position:absolute;bottom:40px;left:40px;color:#fff;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,0.5);}
.slide-text h2{font-size:32px;font-weight:800;}
.slide-text p{font-size:16px;}
.swiper-button-next, .swiper-button-prev{color:#fff;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);border-radius:50%;width:50px;height:50px;}
@media(max-width:1024px){ .banner{max-width:95%;} }

.container{max-width:1300px;margin:0 auto;padding:60px 5%;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;}
.section-title{font-size:32px;font-weight:800;display:flex;align-items:center;gap:12px;}
.section-title i{color:var(--secondary);}
.filter-tags{display:flex;gap:10px;flex-wrap:wrap;}
.tag{padding:8px 18px;background:var(--card);border:2px solid #E5E7EB;border-radius:50px;font-weight:600;color:var(--text-soft);cursor:pointer;transition:0.3s;}
body.dark .tag{border-color:#374151;}
.tag.active,.tag:hover{background:var(--gradient);color:#fff;border-color:transparent;}
.store-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;}
@media(max-width:1000px){ .store-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:650px){ .store-grid{ grid-template-columns:1fr; } }
.store-card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.05);transition:0.4s;border:1px solid #F3F4F6; position:relative;}
body.dark .store-card{border:1px solid rgba(139,92,246,0.2);}
.store-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(139,92,246,0.2);}
.store-card::before{content:'\f07a';font-family:'Font Awesome 6 Free'; font-weight:900;position:absolute; top:-15px; right:-15px;font-size:35px; color:#fff; background:var(--gradient);width:65px; height:65px; border-radius:50%;display:flex; align-items:center; justify-content:center;z-index:3; animation: joget 1.8s ease-in-out infinite;box-shadow:0 5px 20px rgba(139,92,246,0.4);border:3px solid var(--card);}
@keyframes joget{ 0%,100%{transform:rotate(-12deg) scale(1);} 50%{transform:rotate(12deg) scale(1.1);} }
.map-wrap{position:relative;padding-bottom:60%;height:0;overflow:hidden; background:#F3E5F5;}
.map-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.store-info{padding:25px;}
.store-info h3{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.store-info p{color:var(--text-soft);font-size:14px;line-height:1.7;margin-bottom:10px;display:flex;gap:10px;}
.store-info p i{color:var(--secondary);width:16px; margin-top:2px;}
.btn-group{ display:flex; gap:10px; margin-top:20px; }
.btn{ flex:1; padding:12px; border-radius:12px; text-decoration:none; font-weight:600; font-size:14px; text-align:center; transition:0.3s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-maps{ background: var(--gradient); color:#fff; }
.btn-maps:hover{ opacity:0.9; transform:scale(1.02); }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#20C05C; transform:scale(1.02); }
.footer{background:var(--text);color:#fff;padding:60px 5% 30px;}
body.dark .footer{background:linear-gradient(180deg, #0F0A1A 0%, #000 100%);border-top:1px solid rgba(139,92,246,0.2);}
.footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns: repeat(3, 1fr);gap:40px;align-items:start;}
.footer h4{margin-bottom:15px;font-size:18px; display:flex; align-items:center; gap:8px;}
.footer p{color:rgba(255,255,255,0.8); margin-bottom:8px; font-size:14px;}
.footer a{color:rgba(255,255,255,0.8);text-decoration:none;}
.footer a:hover{color:#fff;}
.sosmed{ display:flex; gap:12px; margin-top:15px; flex-wrap:wrap; }
.sosmed a{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center;font-size:18px; color:#fff; text-decoration:none;transition:0.3s;}
.sosmed a:hover{ transform:translateY(-4px) scale(1.1); }
.sosmed .ig:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.sosmed .fb:hover{ background:#1877F2; }
.sosmed .yt:hover{ background:#FF0000; }
.sosmed .tt:hover{ background:#000; }
.sosmed .wa:hover{ background:#25D366; }
@media(max-width:768px){.footer-grid{ grid-template-columns:1fr; gap:30px; }}
#toTop{ position:fixed; bottom:30px; right:30px; background:var(--gradient); color:#fff; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; text-decoration:none; box-shadow:0 8px 25px rgba(139,92,246,0.4); z-index:9998; opacity:0; visibility:hidden; transform:translateY(20px); transition:0.4s; }
#toTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.store-btn{display:inline-flex;align-items:center;gap:10px;margin-top:15px;padding:12px 22px;background:var(--gradient);color:#fff;font-weight:700;font-size:14px;border-radius:50px;text-decoration:none;box-shadow:0 8px 25px rgba(139,92,246,0.4);transition:0.3s;position:relative;overflow:hidden;}
.store-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);transition:0.5s;}
.store-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 35px rgba(236,72,153,0.5);}
.store-btn:hover::before{left:100%;}
.store-btn i:last-child{transition:0.3s;}
.store-btn:hover i:last-child{transform:translateX(4px);}
body.dark .store-btn{box-shadow:0 8px 25px rgba(139,92,246,0.6);}