/* =============================================
   assets/css/main.css - Main Stylesheet
   Undangan Khitan Premium
============================================= */

:root {
  --gold-100: #fef9ec;
  --gold-300: #fcd34d;
  --gold-400: #f59e0b;
  --gold-500: #d97706;
  --gold-600: #b45309;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --navy-800: #1e3a5f;
  --navy-900: #0f2647;
  --navy-950: #0a1628;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
  --glass-blur: blur(20px);
  --shadow-gold: 0 0 30px rgba(245,158,11,0.3);
  --shadow-emerald: 0 0 30px rgba(16,185,129,0.3);
  --transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* =============================================
   BASE
============================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--navy-950);
  color: white;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

::selection {
  background: var(--gold-500);
  color: var(--navy-950);
}

/* =============================================
   SCROLLBAR
============================================= */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb { background: var(--gold-500); border-radius: 2px; }

/* =============================================
   GLASSMORPHISM
============================================= */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* =============================================
   ISLAMIC PATTERN BACKGROUND
============================================= */
.islamic-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(245,158,11,0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(16,185,129,0.03) 0%, transparent 50%);
  background-size: 100px 100px;
  position: relative;
}

.islamic-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(245,158,11,0.03) 20px, rgba(245,158,11,0.03) 21px),
    repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(245,158,11,0.03) 20px, rgba(245,158,11,0.03) 21px);
}

/* =============================================
   FLOATING ORBS
============================================= */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}
.orb-1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%);
  top: 10%; left: -100px;
  animation-delay: 0s;
}
.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
  top: 40%; right: -150px;
  animation-delay: 3s;
}
.orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  bottom: 10%; left: 30%;
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-30px) rotate(5deg); }
  66% { transform: translateY(15px) rotate(-3deg); }
}

/* =============================================
   ORNAMENT DIVIDER
============================================= */
.ornament-divider {
  width: 120px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cline x1='0' y1='10' x2='45' y2='10' stroke='%23f59e0b' stroke-width='1' opacity='.5'/%3E%3Ccircle cx='60' cy='10' r='4' fill='none' stroke='%23f59e0b' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='10' r='1.5' fill='%23f59e0b'/%3E%3Ccircle cx='50' cy='10' r='2' fill='none' stroke='%23f59e0b' stroke-width='1' opacity='.7'/%3E%3Ccircle cx='70' cy='10' r='2' fill='none' stroke='%23f59e0b' stroke-width='1' opacity='.7'/%3E%3Cline x1='75' y1='10' x2='120' y2='10' stroke='%23f59e0b' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =============================================
   LOADING SCREEN
============================================= */
#loading-screen {
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loading-screen.hidden-fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-star svg {
  animation: spin-glow 3s linear infinite;
  filter: drop-shadow(0 0 15px rgba(245,158,11,0.6));
}

@keyframes spin-glow {
  0% { transform: rotate(0deg); filter: drop-shadow(0 0 15px rgba(245,158,11,0.6)); }
  50% { filter: drop-shadow(0 0 25px rgba(245,158,11,1)); }
  100% { transform: rotate(360deg); filter: drop-shadow(0 0 15px rgba(245,158,11,0.6)); }
}

/* =============================================
   OPENING SCREEN
============================================= */
#opening-screen {
  background: var(--navy-950);
  transition: all 0.8s cubic-bezier(0.4,0,0.2,1);
}
#opening-screen.closing {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Particles */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-400);
  border-radius: 50%;
  animation: particle-float linear infinite;
  opacity: 0;
}

@keyframes particle-float {
  0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-100px) translateX(var(--tx, 50px)) rotate(360deg); opacity: 0; }
}

/* Open invitation button */
.btn-open-invitation {
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-600) 100%);
  color: var(--navy-950);
  box-shadow: 0 0 30px rgba(245,158,11,0.5), 0 4px 20px rgba(0,0,0,0.3);
  transition: var(--transition);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.025em;
  cursor: pointer;
  border: none;
}
.btn-open-invitation:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 50px rgba(245,158,11,0.7), 0 8px 30px rgba(0,0,0,0.4);
}
.btn-open-invitation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  border-radius: inherit;
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-open-invitation:hover::before { transform: translateX(100%); }

/* =============================================
   HERO SECTION
============================================= */
.hero-photo-frame {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--gold-400);
  box-shadow: 0 0 0 6px rgba(245,158,11,0.2), 0 0 40px rgba(245,158,11,0.4);
}
.photo-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 60%, rgba(245,158,11,0.1) 100%);
}

/* Countdown */
.countdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.countdown-box {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px 14px;
  min-width: 64px;
  text-align: center;
}
.countdown-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold-300);
  font-family: 'Playfair Display', serif;
  line-height: 1;
  text-shadow: 0 0 20px rgba(252,211,77,0.5);
}
.countdown-label {
  display: block;
  font-size: 0.625rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.countdown-separator {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
  margin-top: -12px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Scroll indicator */
.scroll-indicator { text-align: center; }

/* =============================================
   ICON CIRCLES
============================================= */
.icon-circle-gold {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.1));
  border: 1px solid rgba(245,158,11,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  flex-shrink: 0;
}

/* =============================================
   MAPS BUTTON
============================================= */
.btn-maps {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1));
  border: 1px solid rgba(16,185,129,0.4);
  color: var(--emerald-400);
  transition: var(--transition);
}
.btn-maps:hover {
  background: linear-gradient(135deg, rgba(16,185,129,0.3), rgba(16,185,129,0.2));
  box-shadow: 0 0 20px rgba(16,185,129,0.3);
  transform: translateY(-1px);
}

/* =============================================
   TIMELINE
============================================= */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold-400), rgba(245,158,11,0.1));
}
.timeline-item {
  position: relative;
  margin-bottom: 16px;
}
.timeline-dot {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-400);
  border: 2px solid var(--navy-950);
  box-shadow: 0 0 10px rgba(245,158,11,0.6);
}

/* =============================================
   GALLERY MASONRY
============================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--navy-900);
}
.gallery-item:nth-child(3n) { aspect-ratio: 2/1; grid-column: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* =============================================
   FORM INPUTS
============================================= */
.form-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: white;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  width: 100%;
}
.form-input::placeholder { color: rgba(255,255,255,0.3); }
.form-input:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.form-input option { background: var(--navy-900); color: white; }

select.form-input { appearance: none; cursor: pointer; }

/* RSVP Radio */
.attendance-radio {
  display: block;
  cursor: pointer;
}
.attendance-radio input { display: none; }
.attendance-radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.03);
}
.attendance-radio input:checked + span {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.1));
  border-color: var(--gold-400);
  color: var(--gold-300);
  box-shadow: 0 0 15px rgba(245,158,11,0.2);
}

/* =============================================
   BUTTONS
============================================= */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-600) 100%);
  color: var(--navy-950);
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(245,158,11,0.3);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245,158,11,0.5);
}
.btn-gold:active { transform: translateY(0); }
.btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
  transition: var(--transition);
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37,211,102,0.5);
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--gold-400);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-copy:hover {
  background: rgba(245,158,11,0.25);
  box-shadow: 0 0 15px rgba(245,158,11,0.3);
}
.btn-copy.copied {
  background: rgba(16,185,129,0.2);
  border-color: var(--emerald-500);
  color: var(--emerald-400);
}

/* =============================================
   GUESTBOOK CARDS
============================================= */
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tag-relation {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--gold-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =============================================
   UPLOAD AREA
============================================= */
.upload-area {
  border: 2px dashed rgba(245,158,11,0.3);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(245,158,11,0.03);
}
.upload-area:hover {
  border-color: var(--gold-400);
  background: rgba(245,158,11,0.08);
}

/* =============================================
   TOAST NOTIFICATION
============================================= */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-800);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.875rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  border: 1px solid var(--glass-border);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 9999;
  text-align: center;
  max-width: 300px;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { border-color: var(--emerald-500); }
.toast.error { border-color: #ef4444; }

/* =============================================
   FORM STATUS MESSAGES
============================================= */
.form-success {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--emerald-400);
}
.form-error {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
}

/* =============================================
   GOOGLE MAPS EMBED
============================================= */
section iframe {
  width: 100%;
  height: 224px;
  border: none;
  border-radius: 24px;
}

/* =============================================
   MUSIC PLAYER
============================================= */
#music-player {
  animation: fadeInUp 1s ease 2s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================
   DARK MODE
============================================= */
body.light-mode {
  --navy-950: #f0f4f8;
  --navy-900: #e2e8f0;
  --navy-800: #cbd5e1;
  --glass-bg: rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.08);
  color: #1e293b;
  background: #f0f4f8;
}
body.light-mode .text-white { color: #1e293b !important; }
body.light-mode .text-gray-300 { color: #475569 !important; }
body.light-mode .text-gray-400 { color: #64748b !important; }
body.light-mode .text-gray-500 { color: #94a3b8 !important; }
body.light-mode .countdown-num { text-shadow: none; }
body.light-mode .glass-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }
body.light-mode .form-input { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #1e293b; }
body.light-mode .form-input::placeholder { color: rgba(0,0,0,0.3); }

/* =============================================
   LIGHTBOX
============================================= */
#lightbox.flex { display: flex; }

/* =============================================
   ANIMATIONS
============================================= */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease both; }

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 380px) {
  .countdown-box { min-width: 54px; padding: 10px 10px; }
  .countdown-num { font-size: 1.5rem; }
  .hero-photo-frame { width: 150px; height: 150px; }
}

@media (min-width: 768px) {
  .hero-photo-frame { width: 220px; height: 220px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item:nth-child(3n) { aspect-ratio: 1; grid-column: span 1; }
  .gallery-item:nth-child(5n) { aspect-ratio: 2/1; grid-column: span 2; }
}

/* =============================================
   AOS OVERRIDE
============================================= */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }