*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;touch-action:none}
.container{position:relative;width:100vw;height:100vh;overflow:hidden}

.background-image{
  position:absolute;inset:0;
  background-image:url('../images/bg.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  z-index:1;
}

.hotspot{
  position:absolute;cursor:pointer;z-index:10;
  transition:all .3s ease;border-radius:8px;
}
.hotspot:hover{background-color:rgba(255,255,255,.1);box-shadow:0 0 20px rgba(255,255,255,.3)}
.hotspot::after{
  content:'👆';position:absolute;bottom:-25px;left:50%;
  transform:translateX(-50%);font-size:20px;opacity:0;
  animation:pulse 2s infinite;pointer-events:none;
}
.hotspot:hover::after{opacity:1}
@keyframes pulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.2)}
}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:none;justify-content:center;align-items:center;
  z-index:100;opacity:0;transition:opacity .3s ease;padding:20px;
}
.modal-overlay.active{display:flex;opacity:1}
.modal-content{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border-radius:20px;padding:25px;max-width:90%;width:350px;
  max-height:80vh;overflow-y:auto;position:relative;
  transform:scale(.8);transition:transform .3s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.3);color:#fff;
}
.modal-overlay.active .modal-content{transform:scale(1)}
.modal-close{
  position:absolute;top:15px;right:15px;width:30px;height:30px;
  background:rgba(255,255,255,.2);border:none;border-radius:50%;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(255,255,255,.4)}
.modal-image{
  width:100%;height:150px;border-radius:12px;margin-bottom:15px;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:60px;
}
.modal-title{font-size:24px;font-weight:bold;margin-bottom:10px;text-align:center}
.modal-text{font-size:16px;line-height:1.6;text-align:center;opacity:.95}
.modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;justify-content:center}
.tag{background:rgba(255,255,255,.2);padding:5px 12px;border-radius:20px;font-size:12px}

/* Instruction */
.instruction{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#fff;padding:12px 20px;border-radius:25px;
  font-size:14px;z-index:50;backdrop-filter:blur(10px);
  animation:fadeInOut 4s ease-in-out;pointer-events:none;
}
@keyframes fadeInOut{
  0%,100%{opacity:0;transform:translateX(-50%) translateY(20px)}
  20%,80%{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* Ripple */
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.6);
  transform:scale(0);animation:ripple-animation .6s ease-out;pointer-events:none;
}
@keyframes ripple-animation{to{transform:scale(4);opacity:0}}

/* Loading */
.loading{
  position:fixed;inset:0;background:#f5f5f5;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:1000;transition:opacity .5s;
}
.loading.hidden{opacity:0;pointer-events:none}
.loading-spinner{
  width:50px;height:50px;border:4px solid #ddd;border-top-color:#667eea;border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{margin-top:15px;color:#666;}

/* ===== Device Warning (Block Desktop) ===== */
.device-warning{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:rgba(0,0,0,.85);
  z-index:2000;
}
.device-warning.active{display:flex}

.device-warning-box{
  width:100%;
  max-width:420px;
  background:#111;
  color:#fff;
  border-radius:18px;
  padding:22px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  text-align:center;
}

.device-warning-icon{font-size:48px;margin-bottom:10px}
.device-warning-title{font-size:22px;margin-bottom:8px}
.device-warning-text{font-size:14px;line-height:1.6;opacity:.9}

.device-warning-list{
  margin:14px 0 16px;
  padding-left:18px;
  text-align:left;
  font-size:13px;
  opacity:.95;
}

.device-warning-btn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  cursor:pointer;
}

/* Optional: sedikit rapihin modal di layar pendek */
@media (max-height: 700px){
  .modal-content{padding:20px}
  .modal-image{height:120px}
}