/* ============================================================
   PASHA SUITES — MOTION LAYER
   Akdeniz kimligini bozmadan eklenen hareket katmani.
   Tum efektler prefers-reduced-motion altinda kapanir.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 260ms;
  --dur-base: 620ms;
  --dur-slow: 900ms;
}

/* ============================================================
   1. REVEAL — IntersectionObserver ile tetiklenen giris animasyonu
   JS yoksa icerik her zaman gorunur kalir (no-JS guvenli).
   ============================================================ */

html.js [data-reveal] {
  opacity: 0;
  /* will-change BURADA TANIMLANMAZ. Sayfada 40'tan fazla reveal
     ogesi var; hepsine kalici will-change vermek tarayiciyi o kadar
     kompozit katman ayirmaya zorluyor ve kaydirma tikaniyordu.
     motion.js katmani yalnizca animasyon suresince acar. */
  transition:
    opacity var(--dur-base) var(--ease-out-soft),
    transform var(--dur-base) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
html.js [data-reveal="down"]  { transform: translate3d(0, -24px, 0); }
html.js [data-reveal="left"]  { transform: translate3d(34px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(-34px, 0, 0); }
html.js [data-reveal="zoom"]  { transform: scale(0.94); }
html.js [data-reveal="blur"]  { filter: blur(10px); transform: translate3d(0, 18px, 0); }
html.js [data-reveal="mask"]  { clip-path: inset(0 0 100% 0); transform: none; }

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

html.js [data-reveal="mask"] {
  transition:
    opacity var(--dur-slow) var(--ease-out-soft),
    clip-path var(--dur-slow) var(--ease-out-expo);
}

/* Cocuklari sirayla acan kapsayici: <div data-reveal-stagger="80"> */
html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-base) var(--ease-out-soft),
    transform var(--dur-base) var(--ease-out-expo);
}
html.js [data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. NAVIGASYON — scroll durumu + gizlen/goster
   ============================================================ */

.med-nav {
  transform: translate3d(0, 0, 0);
  transition:
    background var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    padding var(--dur-fast) ease,
    transform 420ms var(--ease-out-expo);
}

.med-nav.is-top {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.med-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 30px rgba(26, 58, 92, 0.12);
}

.med-nav.is-hidden {
  transform: translate3d(0, -104%, 0);
}

/* Aktif/hover link alti cizgisi */
.med-nav__links a {
  position: relative;
}
.med-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-terra);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out-expo);
}
.med-nav__links a:hover::after,
.med-nav__links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Okuma ilerleme cubugu */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-aegean), var(--c-turquoise), var(--c-terra));
  pointer-events: none;
}

/* ============================================================
   3. HERO — ken burns + parallax + basligin kelime kelime acilisi
   ============================================================ */

.hero-slide {
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 7s linear;
}
.hero-slide.active {
  transform: scale(1);
}

.med-hero__content {
  will-change: transform, opacity;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.7em, 0) rotate(2deg);
  animation: heroWordIn 900ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 180ms);
}

@keyframes heroWordIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.med-hero__eyebrow,
.med-hero__text,
.med-hero__actions {
  animation: heroFadeIn 900ms var(--ease-out-soft) both;
}
.med-hero__eyebrow { animation-delay: 80ms; }
.med-hero__text    { animation-delay: 520ms; }
.med-hero__actions { animation-delay: 660ms; }

@keyframes heroFadeIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Scroll gostergesi nabzi */
.med-hero__scroll-line {
  position: relative;
  overflow: hidden;
}
.med-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(-100%);
  animation: scrollHint 2.2s var(--ease-out-soft) infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ============================================================
   4. KARTLAR — yumusak kaldirma, parlama, ikon canlanmasi
   ============================================================ */

.med-feature-card,
.med-fac-card,
.review-card,
.med-room-card,
.aeo-fact {
  transition:
    transform 420ms var(--ease-out-expo),
    box-shadow 420ms var(--ease-out-expo),
    border-color 420ms ease;
}

.med-feature-card:hover,
.med-fac-card:hover,
.aeo-fact:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 44px rgba(26, 58, 92, 0.14);
  border-color: rgba(27, 108, 168, 0.28);
}

.med-feature-card__icon {
  transition: transform 520ms var(--ease-out-expo);
}
.med-feature-card:hover .med-feature-card__icon {
  transform: rotate(-8deg) scale(1.08);
}

/* Butonlarda gecen isik */
.med-btn-primary,
.med-submit-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.med-btn-primary::after,
.med-submit-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.34) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-out-expo);
}
.med-btn-primary:hover::after,
.med-submit-btn:hover::after {
  transform: translateX(120%);
}

/* Gorsellerde yakinlasma */
.med-gallery img,
.med-room-card img {
  transition: transform 900ms var(--ease-out-expo), filter 520ms ease;
}
.med-gallery a:hover img,
.med-gallery img:hover,
.med-room-card:hover img {
  transform: scale(1.06);
}

/* ============================================================
   5. SAYAC (count-up) ve istatistik kutulari
   ============================================================ */

.stat-box {
  transition: transform 420ms var(--ease-out-expo), background 420ms ease;
}
.stat-box:hover {
  transform: translate3d(0, -5px, 0);
  background: rgba(255, 255, 255, 0.14) !important;
}
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   6. FAQ — yukseklik animasyonu (grid tabanli, max-height hilesi yok)
   ============================================================ */

.faq-a {
  height: 0;
  overflow: hidden;
  max-height: none;
  transition: height 380ms var(--ease-out-expo);
}
.faq-item.open .faq-a {
  /* Acik yukseklik motion.js tarafindan olculup atanir; boylece uzun
     cevaplar kirpilmaz (eski max-height:20rem sinirinin sorunuydu). */
  height: auto;
}
/* JS yoksa akordeon calismaz; o durumda tum cevaplar acik kalsin. */
html:not(.js) .faq-a { height: auto; }
.faq-q:focus-visible {
  outline: 2px solid var(--c-aegean);
  outline-offset: -2px;
  border-radius: 1.25rem;
}

/* ============================================================
   7. AEO — "Hizli Bilgiler" blogu
   AI ozetleyicilerin ve one cikan snippet'lerin dogrudan
   alintilayabilecegi, tarama dostu gercek listesi.
   ============================================================ */

.aeo-answer {
  background: #fff;
  border: 1px solid rgba(27, 108, 168, 0.16);
  border-left: 4px solid var(--c-terra);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-text);
  box-shadow: 0 4px 24px rgba(26, 58, 92, 0.07);
}
.aeo-answer strong { color: var(--c-navy); }

.aeo-facts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0;
  padding: 0;
}
.aeo-fact {
  background: #fff;
  border: 1px solid rgba(26, 58, 92, 0.1);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
}
.aeo-fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-aegean);
  margin-bottom: 0.375rem;
}
.aeo-fact dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-navy);
  line-height: 1.5;
}

/* ============================================================
   8. LIGHTBOX — galeri buyutme
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 28, 42, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 1rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 420ms var(--ease-out-expo);
}
.lightbox.is-open img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}

/* ============================================================
   9. ERISILEBILIRLIK — hareket azaltma tercihi
   Kullanici sistem ayarinda hareketi kisitladiysa her sey
   aninda son haline gecer; hicbir icerik gizli kalmaz.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .hero-word {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .med-hero__eyebrow,
  .med-hero__text,
  .med-hero__actions,
  .med-hero__scroll-line::after {
    animation: none;
    opacity: 1;
  }

  .hero-slide,
  .hero-slide.active {
    transform: none;
    transition: opacity 320ms ease;
  }

  .scroll-progress { display: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   10. AOS UYUMLULUK KATMANI
   Eski sayfalardaki data-aos="fade-up" gibi isaretlemeler ayni
   reveal motoruyla calisir; boylece AOS'un CDN'den yuklenen
   CSS + JS ciftini tamamen kaldirabiliyoruz (iki daha az istek,
   render-blocking yok).
   ============================================================ */

html.js [data-aos] {
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-out-soft),
    transform var(--dur-base) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-aos="fade-up"]    { transform: translate3d(0, 28px, 0); }
html.js [data-aos="fade-down"]  { transform: translate3d(0, -24px, 0); }
html.js [data-aos="fade-left"]  { transform: translate3d(34px, 0, 0); }
html.js [data-aos="fade-right"] { transform: translate3d(-34px, 0, 0); }
html.js [data-aos="zoom-in"]    { transform: scale(0.94); }

html.js [data-aos].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   11. KLAVYE ERISIMI — icerige atlama baglantisi
   ============================================================ */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--c-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.75rem 0.75rem;
  text-decoration: none;
  transition: transform 220ms var(--ease-out-expo);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--c-terra);
  outline-offset: 2px;
}

/* ── AEO blogu: alt basliklar ve yakin cevre listesi ── */
.aeo-subhead {
  font-family: 'Manrope', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 2.5rem 0 1rem;
}

.aeo-nearby {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.aeo-nearby li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 58, 92, 0.08);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  color: var(--c-text);
}
.aeo-nearby li > span:first-child { flex: 1; }
.aeo-nearby__dist {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-aegean);
  white-space: nowrap;
}