/* Shared site styles (clean, responsive, multi-page) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg1:#040714; --bg2:#071029; --accent:#49aaff; --muted:#9fb4d8;
  --card:#071226; --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#e8f6ff; -webkit-font-smoothing:antialiased;
}

/* container helper */
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* header / nav */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand a{color:var(--accent);text-decoration:none;font-weight:700}
.top-nav{display:flex;gap:16px}
.top-nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:6px}
.top-nav a.active{color:#fff;background:rgba(73,170,255,0.08)}

/* menu toggle for small screens */
.menu-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:18px}

/* hero */
.hero{padding:48px 0 20px}
.hero h1{font-size:44px;margin:0;color:transparent;background:linear-gradient(90deg,var(--accent),#b2f0ff);-webkit-background-clip:text;background-clip:text}
.lead{color:var(--muted);margin-top:8px}
.hero-actions{margin-top:18px}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,var(--accent),#6de0ff);color:#021127;text-decoration:none;font-weight:600;border:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04)}
.card, .panel{background:var(--card);border-radius:var(--radius);padding:18px;margin:18px 0;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}

/* thumbs */
.thumbs img{width:100px;height:70px;object-fit:cover;border-radius:8px;margin-right:8px;box-shadow:0 8px 20px rgba(0,0,0,0.6)}
.mini-chapters .mini{background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;margin-top:8px}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item img{width:100%;height:220px;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.figcaption{color:var(--muted)}

/* dashboard */
.dashboard .stat{margin-bottom:12px}
.bar{background:rgba(255,255,255,0.03);height:12px;border-radius:8px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--accent),#84e0ff);width:0;transition:width 1.2s ease}

/* capsules */
.capsules .capsule{padding:12px 16px;border-radius:10px;margin-right:10px;background:rgba(73,170,255,0.06);border:none;cursor:pointer}

/* modal (reused) */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:999}
.modal-card{background:#071226;padding:20px;border-radius:12px;color:#eaf9ff;max-width:640px;width:94%;position:relative}

.about-layout {
  display: flex;
  gap: 40px;
  margin-top: 60px;
  align-items: flex-start;
}

/* SLIDER */
.photo-slider {
  width: 380px;
  height: 480px;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
}

.photo-slider img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 18px;
}

.slides {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

.photo-slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
}

.prev { left: 10px; }
.next { right: 10px; }

/* TEXT CONTENT */
.about-content {
  flex: 1;
}


/* ==== ABOUT HER LAYOUT ==== */

.about-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 60px;
}

/* ==== SLIDER ==== */

.slider-box {
  width: 330px;          /* Foto portrait */
  height: 440px;
  background: rgba(255,255,255,0.04);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.slider-track img.portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* Foto portrait jadi rapi */
  border-radius: 20px;
}

.slider-track {
  display: flex;
  transition: 0.4s ease;
}

.slider-box button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 22px;
}

.slider-box .prev { left: 10px; }
.slider-box .next { right: 10px; }

/* ==== TEXT SECTION ==== */

.about-info {
  flex: 1;
  color: white;
}

.about-info h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.about-info .lead {
  opacity: 0.8;
  margin-bottom: 20px;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.info-cards {
  display: grid;
  gap: 20px;
}

.card {
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
}

.maintenance-box {
  padding: 80px 30px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.maintenance-box h2 {
  font-size: 2.4rem;
  color: #fff;
}

.maintenance-box p {
  color: #d0d0d0;
}

/* === FLOATING MUSIC PLAYER === */
.floating-player {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: rgba(30, 30, 45, 0.85);
  backdrop-filter: blur(6px);
  padding: 14px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 999;
  transition: 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.floating-player:hover {
  transform: scale(1.03);
}

/* MUSIC TITLE */
.music-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 14px;
}

/* EQUALIZER ANIMATION */
.eq {
  display: flex;
  gap: 2px;
  height: 14px;
}

.eq div {
  width: 3px;
  background: #4aa3ff;
  animation: bounce 1s infinite ease-in-out;
}

.eq div:nth-child(2) {
  animation-delay: 0.2s;
}
.eq div:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0% { height: 3px; }
  50% { height: 14px; }
  100% { height: 3px; }
}

/* PLAY BUTTON */
.play-btn {
  background: #1e90ff;
  border: none;
  border-radius: 50%;
  padding: 10px 13px;
  font-size: 16px;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

.play-btn:hover {
  background: #4aa3ff;
}

/* AUTO HIDE */
.floating-player.hidden {
  opacity: 0.15;
  transform: scale(0.95);
}

.floating-player:hover {
  opacity: 1 !important;
}


/* ==== HERO WITH YOUR PHOTO ==== */
.hero-photo-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0;
  gap: 40px;
}

.hero-text {
  max-width: 50%;
}

.hero-photo-section h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero-photo-section .lead {
  font-size: 1.2rem;
  margin-bottom: 25px;
  opacity: 0.85;
}

.hero-image img {
  width: 380px;
  height: 380px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 0 40px rgba(0, 150, 255, 0.25);
  border: 2px solid rgba(255,255,255,0.1);
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-photo-section {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-image img {
    width: 90%;
    height: auto;
  }
}
/* COUNTDOWN PAGE */
.countdown-section {
    padding: 120px 10%;
    color: white;
    text-align: center;
}

.countdown-section h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.countdown-section p {
    color: #bcd;
    margin-bottom: 40px;
}

.countdown-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.countdown-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
    width: 280px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
}

.countdown-card h2 {
    margin-bottom: 20px;
}

.timer {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
}

/* SLIDER */
.photo-slider {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  margin: 22px 0 40px;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.photo-slider .slides {
  display: flex;
  width: 300%;
  animation: slideAnim 12s infinite;
}

.photo-slider img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

@keyframes slideAnim {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

/* COUNTDOWN CARDS */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
  margin-top: 30px;
}

.count-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  text-align: center;
  box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.count-card h2 {
  margin: 0 0 10px;
  color: #9fd8ff;
  font-weight: 600;
}

.cd-box {
  font-size: 28px;
  font-weight: 700;
  padding: 10px 0;
  color: #fff;
  text-shadow: 0 0 8px rgba(73,170,255,0.5);
  transition: 0.3s ease;
}

.cd-box.animate {
  transform: scale(1.06);
}

.cd-date {
  color: #a5bbd9;
  font-size: 14px;
  margin-top: 6px;
}




/* responsive */
@media (max-width:980px){
  .preview-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .top-nav{display:none}
}


/* Floating Music Widget */
.music-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  z-index: 9999;
}

/* Wave Animation */
.wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.wave span {
  display: block;
  width: 4px;
  height: 10px;
  background: #4aa3ff;
  border-radius: 3px;
  animation: waveAnim 1s infinite ease-in-out;
}

.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes waveAnim {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.label {
  color: white;
  font-size: 14px;
  opacity: 0.8;
}


/* === SLIDER FIX (Responsive) === */

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.slider-track img {
  width: 100%;
  max-width: 350px; /* ukuran normal di laptop */
  height: auto;
  border-radius: 15px;
}

/* === RESPONSIVE MOBILE FIX === */
@media (max-width: 600px) {
  .slider-track img {
    max-width: 100% !important;   /* gambar jadi lebar penuh */
    width: 100% !important;
  }

  .photo-slider {
    width: 100% !important;       /* container ikut melebar */
  }

  .prev, .next {
    transform: scale(1.2);        /* tombol lebih besar di HP */
  }
}

/* NAV MOBILE FIX */
.top-nav {
    display: flex;
    gap: 20px;
}

/* disembunyikan saat mobile */
@media (max-width: 768px) {
    .top-nav {
        display: none;
        flex-direction: column;
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 70px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 10px;
        backdrop-filter: blur(6px);
    }

    .top-nav.nav-open {
        display: flex !important;
    }

    .menu-toggle {
        display: block !important;
        cursor: pointer;
        font-size: 28px;
        background: none;
        border: none;
        color: white;
    }
}
/* === FIX FOTO DI HP JADI KECIL (TANPA MENGHAPUS STYLE LAIN) === */

@media (max-width: 600px) {
    /* kotak foto (slider) biar ikut layar penuh) */
    .slider-box,
    .photo-slider,
    .about-photo {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* gambar di dalam slider */
    .slider-box img,
    .photo-slider img,
    .about-photo img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* tombol next/prev tidak keluar */
    .slider-box button,
    .photo-slider button {
        transform: scale(1.2);
        top: 50%;
    }
}
/* === FIX UNIVERSAL FOTO HP === */
@media (max-width: 600px) {

    /* Semua container foto portrait */
    .slider-box,
    .photo-slider,
    .slider,
    .about-photo,
    .about-wrapper img,
    .slider-track img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 18px !important;
    }

    /* Perbaiki kotak slider jika ada height fixed */
    .slider-box,
    .photo-slider {
        height: auto !important;
        aspect-ratio: 3 / 4;
    }

    /* Tombol slider di HP */
    .prev,
    .next {
        transform: scale(1.3);
        top: 50% !important;
    }
}