/* ==========================================================================
   Beşiktaş Paradoks Eğitim Kurumu — Özel Stil Dosyası
   Tailwind CDN'in üzerine eklenen özel animasyonlar ve küçük iyileştirmeler.
   Renk paleti: Lacivert (navy) + Bordo + Altın (gold) + Açık gri
   ========================================================================== */

:root {
  --navy: #0f2a4a;
  --navy-deep: #0a1f38;
  --bordo: #9b1c31;
  --gold: #c9a24b;
  --gray-soft: #f5f7fa;
}

/* Temel tipografi ve yumuşak kaydırma */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* sticky header için offset */
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ==========================================================================
   1. Sticky Header — kaydırma efekti
   ========================================================================== */
#site-header {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

#site-header.is-scrolled {
  box-shadow: 0 10px 30px -14px rgba(15, 42, 74, .3);
}

/* Menü linkleri altı çizgi animasyonu */
.nav-link {
  position: relative;
  transition: color .25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--bordo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.nav-link.active {
  color: var(--bordo) !important;
  font-weight: 600;
}

/* ==========================================================================
   2. Scroll Reveal Animasyonları (IntersectionObserver ile tetiklenir)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Kademeli gecikmeler */
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* Hareket azaltma tercihi olan kullanıcılar için erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   3. Hero deseni ve degrade
   ========================================================================== */
.hero-gradient {
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 162, 75, .18), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(155, 28, 49, .28), transparent 50%),
    linear-gradient(135deg, #0a1f38 0%, #0f2a4a 55%, #13315c 100%);
}
.hero-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Bölüm başlıklarında degrade metin */
.text-gradient-gold {
  background: linear-gradient(90deg, #e8c877, #c9a24b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   4. Kart hover efektleri
   ========================================================================== */
.card-hover {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s ease, border-color .35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(15, 42, 74, .35);
}

/* CTA butonu parıltısı */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-shine:hover::before { left: 130%; }

/* ==========================================================================
   5. FAQ Accordion
   ========================================================================== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item.open .faq-icon   { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* ==========================================================================
   6. Galeri Lightbox
   ========================================================================== */
#lightbox {
  transition: opacity .3s ease, visibility .3s ease;
}
#lightbox.hidden-lb {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#lightbox img {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.gallery-item {
  transition: transform .4s ease;
}

/* ==========================================================================
   7. Form başarı bildirimi (toast)
   ========================================================================== */
#form-toast {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
#form-toast.toast-hidden {
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   8. Mobil menü
   ========================================================================== */
#mobile-menu {
  transition: opacity .3s ease, transform .3s ease;
}
#mobile-menu.menu-closed {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

/* ==========================================================================
   9. Küçük yardımcılar
   ========================================================================== */
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--bordo);
  vertical-align: middle;
  margin-right: 10px;
}

/* Sayısal sayaç animasyonu için başlangıç durumu */
.stat-number { font-variant-numeric: tabular-nums; }

/* Özel ince kaydırma çubuğu */
::selection { background: rgba(155, 28, 49, .2); }

/* Odak erişilebilirliği */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(201, 162, 75, .6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   10. Yukarı çık butonu (JS ile oluşturulur; WhatsApp butonunun üzerinde durur)
   ========================================================================== */
#scroll-top {
  position: fixed;
  right: 1.25rem;            /* WhatsApp butonuyla aynı sağ hiza */
  bottom: 5.5rem;            /* WhatsApp butonunun hemen üzerinde */
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(15, 42, 74, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .25s ease;
}
#scroll-top:hover { background: var(--bordo); transform: translateY(0) scale(1.06); }
#scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#scroll-top svg { width: 1.4rem; height: 1.4rem; }