/* Toolbar */
.wifi-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.wifi-stat{margin-right:auto;background:#e6f0ff;color:#0a2a6b;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600}
.wifi-stat strong{font-size:18px;margin-right:4px}
#wifi-q,#wifi-kec{border:1px solid #c9d8f2;border-radius:999px;padding:10px 18px;background:#fff;color:#0a2a6b;font-size:14px;font-weight:600;outline:0;transition:border-color .2s,box-shadow .2s}
#wifi-q{width:240px;font-weight:500}
#wifi-kec{min-width:210px}
#wifi-q:focus,#wifi-kec:focus{border-color:#007bff;box-shadow:0 0 0 3px rgba(0,123,255,.15)}

/* Peta */
#wifi-map{width:100%;height:clamp(480px,78vh,780px);border-radius:22px;overflow:hidden;border:1px solid #1b2c52;box-shadow:0 14px 40px rgba(10,42,107,.22);background:#0c1a33;position:relative;z-index:1;font-family:inherit}
#wifi-empty{text-align:center;color:#667;margin-top:14px}

/* Titik WiFi: ikon berkedip */
.wifi-pin{background:transparent;border:0}
.wifi-pin-ring,.wifi-pin-dot{position:absolute;left:50%;top:50%;border-radius:50%}
.wifi-pin-ring{width:34px;height:34px;margin:-17px 0 0 -17px;background:rgba(30,160,255,.55);animation:wifiPulse 2.2s ease-out infinite}
.wifi-pin-dot{width:28px;height:28px;margin:-17px 0 0 -17px;border:3px solid #fff;box-sizing:content-box;background:linear-gradient(135deg,#1a8cff,#0a2a6b);box-shadow:0 4px 14px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;animation:wifiGlow 1.6s ease-in-out infinite}
.wifi-pin-dot svg{width:17px;height:17px}
.wifi-pin path{opacity:.25;animation:wifiWave 1.6s ease-in-out infinite}
.wifi-pin .w0{animation-delay:0s}
.wifi-pin .w1{animation-delay:.2s}
.wifi-pin .w2{animation-delay:.4s}
.wifi-pin .w3{animation-delay:.6s}
@keyframes wifiWave{0%,100%{opacity:.25}35%,60%{opacity:1}}
@keyframes wifiPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.4);opacity:0}}
@keyframes wifiGlow{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 0 rgba(26,160,255,0)}50%{box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 14px 4px rgba(26,160,255,.75)}}
@media (prefers-reduced-motion:reduce){
  .wifi-pin-ring{display:none}
  .wifi-pin-dot,.wifi-pin path{animation:none}
  .wifi-pin path{opacity:1}
}

/* Popup berbentuk kartu */
.wifi-popup .leaflet-popup-content-wrapper{padding:0;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(5,20,60,.45)}
.wifi-popup .leaflet-popup-content{margin:0;width:300px !important}
.wifi-popup .leaflet-popup-tip{background:#fff}
.wifi-popup a.leaflet-popup-close-button{top:10px !important;right:10px !important;width:28px !important;height:28px !important;border-radius:50%;background:rgba(10,20,50,.55);color:#fff !important;font:400 18px/27px Arial,sans-serif;text-align:center;padding:0 !important;z-index:3}
.wifi-popup a.leaflet-popup-close-button:hover{background:rgba(10,20,50,.85)}
.wifi-card-media{position:relative;height:160px;background:linear-gradient(135deg,#0a2a6b,#0b4fb3);overflow:hidden}
.wifi-card-media.no-photo{height:110px}
.wifi-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wifi-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,16,48,.88) 0%,rgba(4,16,48,.25) 55%,rgba(4,16,48,0) 100%)}
.wifi-card-bgicon{position:absolute;right:14px;top:14px;width:64px;height:64px;opacity:.18}
.wifi-card-bgicon svg{width:100%;height:100%}
.wifi-card-chip{position:absolute;z-index:2;top:12px;left:12px;background:rgba(255,255,255,.93);color:#0a2a6b;border-radius:999px;padding:4px 11px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.wifi-card-title{position:absolute;z-index:2;left:16px;right:16px;bottom:12px;margin:0;color:#fff;font-size:17px;font-weight:700;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.wifi-card-body{padding:14px 16px 16px}
.wifi-card-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:#2b3550;margin-bottom:9px}
.wifi-card-ico{flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#e6f0ff;color:#0a5bd8;display:flex;align-items:center;justify-content:center}
.wifi-card-ico svg{width:15px;height:15px}
.wifi-card-row small{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#7b88a6;font-weight:700}
.wifi-card-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#0a2a6b,#0b6bdc);color:#fff !important;font-size:13px;font-weight:700;text-decoration:none !important}
.wifi-card-btn svg{width:15px;height:15px}
.wifi-card-btn:hover{filter:brightness(1.12)}

/* Legenda */
.wifi-legend{background:rgba(255,255,255,.96);border-radius:14px;padding:12px 16px;min-width:210px;box-shadow:0 8px 24px rgba(5,20,60,.35);border:1px solid #e3e9f5;margin:0 0 16px 14px !important}
.wifi-legend-title{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#6b7a99;margin-bottom:8px}
.wifi-legend-row{display:flex;align-items:center;gap:10px;font-size:13px;color:#0a2a6b;font-weight:600;margin-top:6px}
.wifi-legend-count{margin-left:auto;background:#e6f0ff;border-radius:999px;padding:1px 10px;font-size:12px}
.wifi-legend-pin{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#1a8cff,#0a2a6b);display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.wifi-legend-pin svg{width:13px;height:13px}
.wifi-legend-area{width:22px;height:14px;border:2.5px solid #e0a800;border-radius:5px;flex:0 0 22px;box-sizing:border-box;background:#0a2a6b}

/* Kontrol bawaan Leaflet */
.leaflet-touch .leaflet-bar{border:0 !important;border-radius:12px !important;box-shadow:0 6px 18px rgba(5,20,60,.35) !important;overflow:hidden}
.leaflet-bar a{color:#0a2a6b !important;width:36px !important;height:36px !important;line-height:36px !important}
.wifi-home a{display:flex;align-items:center;justify-content:center}
.leaflet-container .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}

@media (max-width:767px){
  #wifi-q,#wifi-kec{width:100%}
  .wifi-stat{width:100%;text-align:center;margin-right:0}
  #wifi-map{border-radius:16px;height:clamp(440px,72vh,640px)}
  .wifi-legend{min-width:0;padding:9px 12px;margin:0 0 12px 8px !important}
  .wifi-legend-row{font-size:12px}
}
@media (max-width:480px){
  .wifi-popup .leaflet-popup-content{width:260px !important}
  .wifi-card-media{height:130px}
  .wifi-card-title{font-size:15px}
}

/* Foto bisa diklik + foto besar */
.wifi-card-media.has-photo{cursor:zoom-in}
.wifi-card-zoom{position:absolute;z-index:2;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(10,20,50,.6);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .2s}
.wifi-card-zoom svg{width:16px;height:16px}
.wifi-card-media.has-photo:hover .wifi-card-zoom{background:#007bff}
.wifi-card-media.has-photo .wifi-card-chip{right:52px;left:auto}
.wifi-lightbox{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,10,28,.92)}
.wifi-lightbox.is-open{display:flex}
.wifi-lightbox figure{margin:0;max-width:94vw;text-align:center}
.wifi-lightbox img{display:block;margin:0 auto;max-width:94vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:12px;background:#10204a;box-shadow:0 16px 50px rgba(0,0,0,.6)}
.wifi-lightbox figcaption{margin-top:14px;color:#fff;font-size:15px;font-weight:600}
.wifi-lightbox-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:50px;height:50px;border:3px solid #fff;border-radius:50%;background:#e8b422;color:#0f1b3d;font-size:32px;font-weight:700;line-height:1;padding:0 0 4px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.wifi-lightbox-close:hover{background:#fff}