/* ==========================================================================
   Animasyonlar — keyframe'ler ve scroll tetiklemeli geçişler
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scrollDrip {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes goldSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(169, 126, 95, 0.35); }
  70%      { box-shadow: 0 0 0 16px rgba(169, 126, 95, 0); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  /* will-change burada duruyordu: sayfadaki her açığa çıkma öğesini kalıcı
     olarak ayrı bir kompozisyon katmanına taşıyordu. Telefonda hem bellek
     yükü hem de yazının alt piksel düzleştirmesini kaybedip titrek
     görünmesi demekti. Opaklık ve dönüşüm geçişlerinde tarayıcı zaten
     kendi katmanını kuruyor, geçiş bitince de bırakıyor. */
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left  { opacity: 0; transform: translateX(-44px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(44px);  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(0.93);       transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Kademeli gecikme (stagger) */
.stagger > * { --reveal-delay: 0ms; }
.stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.stagger > *:nth-child(2) { --reveal-delay: 110ms; }
.stagger > *:nth-child(3) { --reveal-delay: 220ms; }
.stagger > *:nth-child(4) { --reveal-delay: 330ms; }
.stagger > *:nth-child(5) { --reveal-delay: 440ms; }
.stagger > *:nth-child(6) { --reveal-delay: 550ms; }

/* ---------- Altın parlama efekti (butonlar) ---------- */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--dur-fast);
}
.btn-primary:hover::after {
  opacity: 1;
  animation: goldSweep 1.1s var(--ease-in-out);
}

/* ---------- Bölüm ayırıcı süsleme ---------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto 1.4rem;
  color: var(--color-gold);
}
.ornament::before,
.ornament::after {
  content: '';
  width: clamp(40px, 8vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.ornament::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.ornament span {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- Müze sahne geçişi ---------- */
.museum-stage { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.museum-stage.is-ready { opacity: 1; }

/* ---------- Hover süzülme ---------- */
.float-soft { animation: floatSoft 6s var(--ease-in-out) infinite; }

/* ---------- Mobil menü ----------
   Tam ekran, sıcak ve koyu bir pano. Üstte küçük altın bir "Menü"
   künyesi; altında numaralı, iri satırlar (bulunulan sayfa altın bir
   noktayla işaretli); ardından Dijital Müze'ye götüren cam bir kart ve
   en altta dil seçimi. Künye, kart ve alt satır main.js · menuEkleri
   tarafından eklenir (.nav-ek) ve masaüstünde görünmez.

   Zemin tam opak: yarı saydam + backdrop-filter, arkadaki içeriği bulanık
   lekeler hâlinde sızdırıp menüyü kirli gösteriyordu.

   Yazı tipi masaüstündeki çubukla aynı (Outfit): menü açılınca başka bir
   ailenin görünmesi çubukla menüyü iki ayrı bileşen gibi gösteriyordu. */
.nav-ek { display: none; }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(6.4rem + env(safe-area-inset-top)) max(1.5rem, 6vw) calc(1.6rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    counter-reset: menu;
    background:
      radial-gradient(90% 55% at 100% 100%, rgba(127, 114, 94, 0.34) 0%, rgba(27, 23, 18, 0) 70%),
      radial-gradient(70% 40% at 0% 0%, rgba(201, 161, 132, 0.08) 0%, rgba(27, 23, 18, 0) 70%),
      linear-gradient(180deg, #1B1814 0%, #15120F 60%, #110F0C 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out), visibility 0.4s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; }

  /* Logo ve menü düğmesi panelin üstünde kalır */
  .brand { position: relative; z-index: 2; }
  .nav-toggle { z-index: 3; }

  /* Satırlar sırayla, aşağıdan süzülerek girer */
  .nav-links > li {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    text-align: left;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .nav-links.is-open > li { opacity: 1; transform: none; }
  .nav-links.is-open > li:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.is-open > li:nth-child(2) { transition-delay: 0.09s; }
  .nav-links.is-open > li:nth-child(3) { transition-delay: 0.13s; }
  .nav-links.is-open > li:nth-child(4) { transition-delay: 0.17s; }
  .nav-links.is-open > li:nth-child(5) { transition-delay: 0.21s; }
  .nav-links.is-open > li:nth-child(6) { transition-delay: 0.25s; }
  .nav-links.is-open > li:nth-child(7) { transition-delay: 0.29s; }
  .nav-links.is-open > li:nth-child(8) { transition-delay: 0.33s; }
  .nav-links.is-open > li:nth-child(9) { transition-delay: 0.37s; }

  /* Künye: "— MENÜ" */
  .nav-ek { display: block; }
  .nav-ek-baslik {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
  }
  .nav-ek-baslik::before { content: ''; width: 26px; height: 1px; background: var(--gradient-gold); }

  /* Bağlantı satırları: numara · ad · ok */
  .nav-links > li:not(.nav-ek) {
    counter-increment: menu;
    border-bottom: 1px solid rgba(243, 236, 227, 0.08);
  }
  .nav-links > li:not(.nav-ek) > a {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.02rem 0.2rem;
    font-family: var(--font-body);
    font-size: clamp(1.3rem, 5.6vw, 1.6rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: rgba(243, 236, 227, 0.8);
    transition: color 0.25s, padding 0.35s var(--ease-out);
  }
  .nav-links > li:not(.nav-ek) > a::before {
    content: counter(menu, decimal-leading-zero);
    min-width: 1.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(243, 236, 227, 0.36);
    font-variant-numeric: tabular-nums;
    transition: color 0.25s;
  }
  /* Masaüstündeki alt çizgi yerine sağda bir ok */
  .nav-links > li:not(.nav-ek) > a::after {
    content: '';
    position: static;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    background: none;
    transform: rotate(45deg);
    opacity: 0.35;
    transition: opacity 0.25s, transform 0.35s var(--ease-out);
  }
  .nav-links > li:not(.nav-ek) > a:hover,
  .nav-links > li:not(.nav-ek) > a:active { color: var(--color-text-primary); padding-left: 0.45rem; }
  .nav-links > li:not(.nav-ek) > a:active::after { opacity: 0.8; transform: translateX(3px) rotate(45deg); }

  /* Bulunulan sayfa: parlak ad, altın numara ve soldan sönen sıcak bir zemin */
  .nav-links > li:not(.nav-ek) > a.active {
    color: var(--color-text-primary);
    padding-left: 0.7rem;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(201, 161, 132, 0.14) 0%, rgba(201, 161, 132, 0) 75%);
  }
  .nav-links > li:not(.nav-ek) > a.active::before { color: var(--color-gold-light); }
  .nav-links > li:not(.nav-ek) > a.active::after { opacity: 0.8; color: var(--color-gold-light); }
  .nav-links > li:not(.nav-ek) > a:focus-visible {
    outline: none;
    border-radius: 12px;
    background: rgba(243, 236, 227, 0.06);
  }

  /* Dijital Müze kartı */
  .nav-ek-kart { margin-top: 1.6rem; }
  .nav-kart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    padding: 1.15rem 1.15rem 1.15rem 1.3rem;
    border-radius: 22px;
    overflow: hidden;
    background:
      linear-gradient(150deg, rgba(243, 236, 227, 0.1) 0%, rgba(243, 236, 227, 0.03) 60%),
      rgba(243, 236, 227, 0.02);
    border: 1px solid rgba(243, 236, 227, 0.14);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(243, 236, 227, 0.08);
  }
  /* Kartın köşesinde sıcak bir ışık */
  .nav-kart::before {
    content: '';
    position: absolute;
    right: -30%;
    top: -60%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(201, 162, 39, 0.22), transparent);
    pointer-events: none;
  }
  .nav-kart-ust {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gold-light);
  }
  .nav-kart-baslik {
    grid-column: 1;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-primary);
  }
  .nav-kart-ok {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #A9821C 0%, #C9A227 52%, #A9821C 100%);
    box-shadow: 0 10px 24px -8px rgba(201, 162, 39, 0.6);
    transition: transform 0.3s var(--ease-out);
  }
  .nav-kart-ok svg { width: 18px; height: 18px; }
  .nav-kart:active .nav-kart-ok { transform: translateX(3px); }

  /* En alt: dil seçimi ve künye */
  .nav-ek-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(243, 236, 227, 0.45);
  }
  .nav-dil {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(243, 236, 227, 0.16);
    background: rgba(243, 236, 227, 0.04);
  }
  .nav-dil button {
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(243, 236, 227, 0.6);
    transition: color 0.25s, background 0.25s;
  }
  .nav-dil button.active { color: var(--color-ink); background: var(--color-cream); }

  /* Kısa ekranda satırlar sıkışır */
  @media (max-height: 640px) {
    .nav-links { padding-top: calc(5.4rem + env(safe-area-inset-top)); }
    .nav-links > li:not(.nav-ek) > a { padding: 0.72rem 0.2rem; font-size: 1.2rem; }
    .nav-ek-kart { margin-top: 1rem; }
  }
}
/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-line::after { display: none; }
}

/* ---------- Kaydırma ipucu okları (mobil şeritler) ---------- */
@keyframes snap-hint-left {
  0%, 100% { transform: translateX(3px); opacity: 0.45; }
  50%      { transform: translateX(-3px); opacity: 1; }
}
@keyframes snap-hint-right {
  0%, 100% { transform: translateX(-3px); opacity: 0.45; }
  50%      { transform: translateX(3px); opacity: 1; }
}

/* ---------- Metin üzerinde altın parlama (hero başlığı, çizelge yılları) ---------- */
@keyframes textShimmer {
  0%, 68%, 100% { background-position: 118% 0; }
  84%           { background-position: -18% 0; }
}