*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#050505;color:white;overflow-x:hidden}

/* LOADER */
#loader{
position:fixed;
width:100%;
height:100%;
background:black;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}
#loader img{
width:160px;
animation:zoom 1.5s ease;
}
@keyframes zoom{
0%{transform:scale(0.5);opacity:0}
100%{transform:scale(1);opacity:1}
}

/* HEADER */
.nav{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
padding:15px 25px;
z-index:10;
}
.logo{width:120px}

.glass{
background:rgba(0,0,0,0.5);
backdrop-filter:blur(12px);
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-start;   /* UBAH INI */
  justify-content:center;
  text-align:center;
  position:relative;
  padding-top:140px;        /* BERI JARAK DARI ATAS */
  padding-bottom:80px;      /* BERI JARAK BAWAH */
}


.hero video{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
filter:brightness(0.3);
}
.hero-content{z-index:1}

.neon{
font-size:60px;
text-shadow:0 0 10px #7b5cff,0 0 30px #00e5ff,0 0 60px #ff4fd8;
}

/* SECTION */
.section{
padding:100px 20px;
text-align:center;
}

/* PORTFOLIO */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:15px;
margin-top:30px;
}
.card{
height:220px;
border-radius:15px;
overflow:hidden;
}
.card img{
width:100%;
height:100%;
object-fit:cover;
}

/* BOOKING */
.booking{
max-width:400px;
margin:auto;
padding:30px;
display:flex;
flex-direction:column;
gap:10px;
border-radius:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
}
.booking input,.booking select{
padding:12px;
border-radius:10px;
border:none;
background:#111;
color:white;
}
.booking button{
padding:12px;
border:none;
border-radius:10px;
background:linear-gradient(45deg,#7b5cff,#ff4fd8);
color:white;
}

/* ANIMASI SCROLL */
.reveal{
opacity:0;
transform:translateY(40px);
transition:1s;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}

.smoke{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:radial-gradient(circle at 30% 50%, rgba(123,92,255,0.15), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(0,229,255,0.15), transparent 40%),
radial-gradient(circle at 50% 30%, rgba(255,79,216,0.15), transparent 40%);
animation:smokeMove 12s linear infinite;
z-index:0;
}

@keyframes smokeMove{
0%{transform:translateY(0)}
50%{transform:translateY(-40px)}
100%{transform:translateY(0)}
}

.cursor-glow{
position:fixed;
width:200px;
height:200px;
background:radial-gradient(circle, rgba(123,92,255,0.4), transparent 60%);
pointer-events:none;
border-radius:50%;
z-index:999;
mix-blend-mode:screen;
}

.ba-container{
position:relative;
width:90%;
max-width:500px;
margin:auto;
overflow:hidden;
border-radius:20px;
}

.ba-container img{
width:100%;
display:block;
}

.after{
position:absolute;
top:0;
left:0;
width:50%;
overflow:hidden;
}

#slider{
width:100%;
margin-top:10px;
}

.btn{
padding:10px 18px;
border-radius:12px;
border:none;
cursor:pointer;
font-weight:bold;
letter-spacing:1px;
transition:0.3s;
color:white;
}

.neon-btn{
background:linear-gradient(45deg,#7b5cff,#ff4fd8);
box-shadow:0 0 10px #7b5cff,0 0 20px #ff4fd8;
}

.neon-btn:hover{
transform:translateY(-2px) scale(1.05);
box-shadow:0 0 20px #7b5cff,0 0 40px #ff4fd8;
}

.glass-btn{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.2);
}

.glass-btn:hover{
background:rgba(255,255,255,0.15);
transform:translateY(-2px);
}

.big{
padding:14px 28px;
font-size:18px;
margin-top:20px;
}

.nav-buttons{
display:flex;
gap:10px;
}

.btn{
position:relative;
overflow:hidden;
padding:12px 22px;
border-radius:14px;
border:none;
cursor:pointer;
font-weight:bold;
letter-spacing:1px;
color:white;
transition:0.3s;
}

.neon-btn{
background:linear-gradient(45deg,#7b5cff,#ff4fd8);
box-shadow:0 0 10px #7b5cff,0 0 20px #ff4fd8;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{box-shadow:0 0 10px #7b5cff}
50%{box-shadow:0 0 25px #ff4fd8}
100%{box-shadow:0 0 10px #7b5cff}
}

.neon-btn:hover{
transform:translateY(-2px) scale(1.05);
}

.glass-btn{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.2);
}

.glass-btn:hover{
background:rgba(255,255,255,0.15);
}

.smoke-btn{
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
background:radial-gradient(circle, rgba(123,92,255,0.2), transparent 60%);
opacity:0;
transition:0.4s;
pointer-events:none;
}

.fx:hover .smoke-btn{
opacity:1;
animation:smokeBtn 2s linear infinite;
}

@keyframes smokeBtn{
0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.5);
transform:scale(0);
animation:rippleAnim 0.6s linear;
pointer-events:none;
}

@keyframes rippleAnim{
to{
transform:scale(4);
opacity:0;
}
}

.footer{
text-align:center;
padding:30px 10px;
font-size:13px;
opacity:0.6;
}

.credit{
cursor:pointer;
color:#7b5cff;
text-shadow:0 0 6px #7b5cff;
transition:0.3s;
}

.credit:hover{
color:#ff4fd8;
text-shadow:0 0 10px #ff4fd8,0 0 20px #7b5cff;
}

/* LOADER FULL */
#loader{
position:fixed;
width:100%;
height:100%;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

/* BOX */
.loader-box{
text-align:center;
}

/* LOGO */
.logo-load{
width:160px;
margin-bottom:25px;
animation:logoFade 1s ease;
}

@keyframes logoFade{
0%{opacity:0;transform:scale(0.8)}
100%{opacity:1;transform:scale(1)}
}

/* BAR */
.load-bar{
width:220px;
height:6px;
background:rgba(255,255,255,0.1);
border-radius:10px;
overflow:hidden;
margin:auto;
}

/* FILL */
.load-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#7b5cff,#00e5ff,#ff4fd8);
box-shadow:0 0 10px #7b5cff,0 0 20px #ff4fd8;
transition:width 0.2s;
}

/* NAV BUTTON FIX MOBILE */
@media(max-width:768px){

.nav{
padding:10px 12px;
}

.logo{
width:90px;
}

/* container tombol */
.nav-buttons{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}

/* tombol */
.nav-buttons button{
padding:8px 14px;
font-size:12px;
border-radius:20px;
white-space:nowrap;
}

/* supaya tidak kepotong */
header{
overflow:hidden;
}

}

@media(max-width:768px){

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.nav-buttons{
gap:6px;
}

.nav-buttons button{
padding:7px 12px;
font-size:11px;
}

}

/* ================= PRICE SECTION ================= */

.price-section {
  padding: 80px 10%;
  background: #111;
  color: #fff;
  text-align: center;
}

.section-title {
  font-size: 36px;
  margin-bottom: 50px;
  font-weight: bold;
  letter-spacing: 2px;
}

.price-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.price-box {
  background: #1c1c1c;
  padding: 30px;
  border-radius: 15px;
  width: 350px;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.2);
  transition: 0.3s;
}

.price-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}

.price-box h3 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #ff2e2e;
}

.price-box ul {
  list-style: none;
  padding: 0;
}

.price-box ul li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #333;
  font-size: 14px;
}

.price-box ul li span {
  text-align: left;
}

.price-box ul li b {
  color: #fff;
}

.note {
  margin-top: 10px;
  font-size: 12px;
  color: #aaa;
}

.open-hours {
  margin-top: 60px;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 12px;
}

.open-hours h3 {
  color: #ff2e2e;
  margin-bottom: 10px;
}

.open-hours p {
  font-size: 18px;
  font-weight: bold;
}

/* ================= LOCATION SECTION ================= */

.map-section {
  padding: 80px 10%;
  background: #0f0f0f;
  text-align: center;
  color: #fff;
}

.map-container {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
}

.map-card {
  background: #1c1c1c;
  padding: 25px;
  border-radius: 20px;
  width: 450px;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.15);
  transition: 0.3s ease;
}

.map-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.5);
}

.map-card h3 {
  margin-bottom: 20px;
  color: #ff2e2e;
  font-size: 18px;
}

.map-card iframe {
  width: 100%;
  height: 250px;
  border: none;
  border-radius: 15px;
}

.map-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #ff2e2e;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.3s;
}

.map-btn:hover {
  background: #fff;
  color: #000;
}

/* ================= FOOTER ================= */

.footer {
  background: #0a0a0a;
  padding: 25px 10%;
  text-align: center;
  border-top: 1px solid #222;
}

.powered {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 1px;
}

.ig-credit {
  color: #ff2e2e;
  text-decoration: none;
  font-weight: bold;
  margin-left: 5px;
  transition: 0.3s ease;
}

.ig-credit i {
  margin-right: 5px;
}

.ig-credit:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

/* ================= SOCIAL ICON BUTTONS ================= */

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-btn {
  width: 45px;
  height: 45px;
  background: #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
}

.social-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.social-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  background: #ff2e2e;
}

.social-btn:hover img {
  filter: brightness(0) invert(1);
}

/* WhatsApp special glow */
.whatsapp:hover {
  box-shadow: 0 0 20px rgba(0, 255, 100, 0.7);
}

/* ================= MOBILE OPTIMIZATION ================= */

@media (max-width: 768px) {

  .nav-buttons {
    justify-content: center;
    gap: 10px;
  }

  .social-btn {
    width: 40px;
    height: 40px;
  }

  .social-btn img {
    width: 20px;
    height: 20px;
  }

}

/* ================= INFO BANNER FIXED ================= */

.info-banner {
  width: 100%;
  background: linear-gradient(135deg, #101010, #1c1c1c);
  padding: 160px 8% 70px; /* tambah padding atas */
  color: #f1f1f1;
  text-align: center;
}

body{
  padding-top:110px;
}


body{
  background:#050505;
  color:white;
  overflow-x:hidden;
  overflow-y:auto;
}


.info-wrapper {
  max-width: 1000px;
  margin: auto;
  animation: fadeUp 1.2s ease forwards;
}

.info-wrapper p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 22px;
  color: #ddd;
}

.info-subtitle {
  margin-top: 25px;
  font-weight: bold;
  color: #ff2e2e;
  font-size: 17px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.info-list li {
  margin: 8px 0;
  font-size: 15px;
  color: #ccc;
}

.info-highlight {
  margin-top: 30px;
  font-size: 17px;
  font-weight: bold;
  color: #ff2e2e;
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

  .info-banner {
    padding: 50px 6%;
  }

  .info-wrapper p {
    font-size: 14px;
  }

  .info-list li {
    font-size: 14px;
  }

  .info-highlight {
    font-size: 15px;
  }

}

/* ===== PORTFOLIO GALLERY ===== */

.filter-buttons {
  text-align: center;
  margin-bottom: 20px;
}

.filter-buttons button {
  background: transparent;
  border: 1px solid cyan;
  color: cyan;
  padding: 8px 18px;
  margin: 5px;
  border-radius: 20px;
  cursor: pointer;
}

.filter-buttons button.active {
  background: cyan;
  color: black;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.gallery-item {
  aspect-ratio: 1 / 1; /* bikin kotak seragam */
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop otomatis tengah */
  transition: 0.4s;
}

.gallery-item img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* ===== GALLERY TITLE ===== */
.gallery-title {
  margin: 30px 0 15px;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: cyan;
  text-transform: uppercase;
}

/* ===== GALLERY GRID ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
}

/* kotak seragam */
.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.6s forwards;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== WATERMARK ===== */
.gallery-item::after {
  content: "Magic Ink";
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
}

/* hover */
.gallery-item:hover img {
  transform: scale(1.1);
  transition: 0.4s;
}

/* fade animation */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== FILTER BUTTON ===== */
.filter-buttons {
  text-align: center;
  margin-bottom: 20px;
}

.filter-buttons button {
  background: transparent;
  border: 1px solid cyan;
  color: cyan;
  padding: 8px 18px;
  margin: 5px;
  border-radius: 20px;
  cursor: pointer;
}

.filter-buttons button.active {
  background: cyan;
  color: black;
}

/* ===== LIGHTBOX ===== */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 15px;
}


.gallery-item:hover img {
  transform: scale(1.1);
}

/* Lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 15px;
}

/* ===== FOOTER ===== */
.footer {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 25px 10px;
  text-align: center;
  border-top: 1px solid rgba(0,255,255,0.3);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer p {
  margin: 0;
  font-size: 0.85rem;
  color: #aaa;
}

.footer .ig-credit {
  color: cyan;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.footer .ig-credit i {
  margin-right: 5px;
}

.footer .ig-credit:hover {
  color: white;
  text-shadow: 0 0 10px cyan;
}