/* Cobig Tour — Custom Styles */

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
[data-stagger="1"] { transition-delay: 80ms; }
[data-stagger="2"] { transition-delay: 160ms; }
[data-stagger="3"] { transition-delay: 240ms; }
[data-stagger="4"] { transition-delay: 320ms; }
[data-stagger="5"] { transition-delay: 400ms; }
[data-stagger="6"] { transition-delay: 480ms; }

/* Sticky nav transitions */
#nav { transition: background-color .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s, top .3s; }
#announcement-bar { transition: transform .3s ease; }
#nav.scrolled { background-color: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgb(220 232 248); box-shadow: 0 4px 20px -4px rgba(15,32,68,0.06); }
#nav.scrolled .nav-link { color: #2563eb; }
#nav.scrolled .nav-link:hover { color: #dc2626; }
#nav.scrolled .logo-text { color: #2563eb; }
#nav.scrolled .logo-sub { color: #64748B; }
#nav.scrolled .nav-phone { color: #475569; }
#nav.scrolled .nav-phone:hover { color: #dc2626; }
#nav.scrolled .mobile-menu-btn { color: #2563eb; }

/* Khatam geometric pattern */
.pattern-khatam {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 4 L48 24 L68 24 L52 38 L60 60 L40 48 L20 60 L28 38 L12 24 L32 24 Z' fill='none' stroke='%231a3a6b' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* Khatam pattern light version for gold cards */
.pattern-khatam-light {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 4 L48 24 L68 24 L52 38 L60 60 L40 48 L20 60 L28 38 L12 24 L32 24 Z' fill='none' stroke='%230a1628' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* Nav link underline animation */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #dc2626; transition: width .2s ease; }
.nav-link:hover::after { width: 100%; }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1), padding .3s ease; }
.faq-item.open .faq-answer { max-height: 600px; }
.faq-item .faq-chevron { transition: transform .3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Mobile menu */
#mobile-menu { transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#mobile-menu.open { transform: translateX(0); }

/* WhatsApp FAB pulse */
@keyframes wa-ping { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.5); opacity: 0; } }
.wa-pulse { animation: wa-ping 2s cubic-bezier(0,0,.2,1) infinite; }

/* Testimonial marquee */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* Smooth scroll */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* Hide scrollbar for horizontal scroll cards */
.overflow-x-auto { -ms-overflow-style: none; scrollbar-width: none; }
.overflow-x-auto::-webkit-scrollbar { display: none; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Form input focus glow */
.form-input:focus { box-shadow: 0 0 0 3px rgba(230,184,0,0.1); }
.form-input:hover:not(:focus) { border-color: #94A3B8; }

/* Custom dropdown */
.custom-dropdown { animation: dropIn .2s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.custom-option.selected { background: #FBF3D9; font-weight: 500; }

/* Tabular nums utility */
.tabular-nums { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* Body lock when mobile menu open */
body.menu-open { overflow: hidden; }

/* Image fallback */
img.img-fallback { background: #000a1e; }

/* Islamic geometric ornaments */
.islamic-ornament {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  background-repeat: repeat;
  background-size: 80px 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0L50 10L40 20L30 10Z M0 40L10 30L20 40L10 50Z M40 60L50 70L40 80L30 70Z M60 40L70 30L80 40L70 50Z M40 20L60 40L40 60L20 40Z' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='8' fill='none' stroke='%23c9a96e' stroke-width='0.3'/%3E%3C/svg%3E");
}
.islamic-ornament-star {
  position: absolute;
  pointer-events: none;
  opacity: 0.05;
  background-repeat: repeat;
  background-size: 120px 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,5 72,42 110,42 78,65 90,102 60,80 30,102 42,65 10,42 48,42' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='60' r='25' fill='none' stroke='%23ffffff' stroke-width='0.3'/%3E%3C/svg%3E");
}


/* Package grid wrapper */
.paket-wrapper { overflow: visible; padding-top: 1rem; }
@media (min-width: 768px) { .paket-wrapper { overflow: visible; padding-top: 1.5rem; } }
#paket-track > div { margin: 0; }
@media (min-width: 768px) { #paket-track > div { margin: 0; } }