/* ==========================================================================
   TexHoliday hareket katmanı
   main.css'ten sonra yüklenir, onun kurallarını ezmez, üstüne ekler.

   Kurallar:
   - Yalnızca transform ve opacity animasyonlanır. Bunlar GPU'da çalışır,
     yerleşimi yeniden hesaplatmaz.
   - Giren ve çıkan her şey ease-out kullanır. ease-in kullanılmaz: yavaş
     başlar ve arayüzü ağır hissettirir.
   - Arayüz animasyonları 300ms'yi geçmez. Yalnızca kaydırma girişleri
     biraz daha uzundur çünkü kullanıcı onları beklemez.
   - Hiçbir içerik görünürlüğünü animasyona borçlu değildir. Gizleme
     sınıfını JavaScript ekler; script çalışmazsa her şey görünür kalır.
   ========================================================================== */

:root {
  /* Tarayıcının yerleşik eğrileri kararlı hareket için fazla yumuşak. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-press: 160ms;
  --dur-hover: 200ms;
  --dur-pop: 190ms;
  --dur-reveal: 520ms;
}

/* --------------------------------------------------------------------------
   1. Kaydırınca beliren içerik
   -------------------------------------------------------------------------- */

.is-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.is-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Kemer + pantolon askısı: hero'ya hangi yoldan gelirse gelsin gizlenme yok. */
.hero.is-reveal, .hero .is-reveal { opacity: 1; transform: none; transition: none; }

/* --------------------------------------------------------------------------
   2. Basma geri bildirimi
   Arayüzün kullanıcıyı duyduğunu anlatan tek şey. Ölçek 0.97: fark
   edilmeyecek kadar ince, hissedilecek kadar var.
   -------------------------------------------------------------------------- */

.button,
.menu-toggle,
.locale-trigger,
.post-more,
.embed-link,
.search-form button {
  transition:
    transform var(--dur-press) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    background var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.button:active,
.menu-toggle:active,
.locale-trigger:active,
.search-form button:active {
  transform: scale(0.97);
}

/* Dokunmatikte hover parmakla tetiklenir, bu yüzden yalnızca gerçek imleçte. */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
  .post-card:hover .post-thumb img {
    transform: scale(1.05);
  }
  .post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(16, 41, 59, 0.16);
  }
}

.post-card {
  transition:
    transform 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}

.post-thumb {
  overflow: hidden;
  display: block;
}

.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. Header küçülmesi
   Durum IntersectionObserver ile ölçülür, scroll dinleyicisiyle değil.
   -------------------------------------------------------------------------- */

#header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

.site-header {
  transition:
    background var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}

/* --------------------------------------------------------------------------
   4. Dil ve para birimi seçici
   Açılır katman tetikleyicisinden büyür, ekranın ortasından değil.
   scale(0) kullanılmaz: gerçek dünyada hiçbir şey yoktan belirmez.
   -------------------------------------------------------------------------- */

.locale-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.locale-currency select,
.locale-trigger {
  appearance: none;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: var(--r-pill);
  background: transparent;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* Dokunmatik cihazda para birimi seçici ve dil düğmesi 29px yüksekliğindeydi.
   Yalnız (pointer: coarse) altında büyütülüyor; masaüstünde header'ın dikey
   ritmi bozulmasın. */
@media (pointer: coarse) {
  .locale-currency select,
  .locale-trigger { min-height: 44px; padding-block: 0; }
}

.locale-lang {
  position: relative;
}
.locale-select { display: none; }

.locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.locale-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-pop) var(--ease-out);
}

.locale-trigger[aria-expanded='true'] .locale-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.locale-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 168px;
  /* Sitede 17 dil var; sınır olmadan liste telefonda ekranın altına taşıyor
     ve taşan kısma erişilemiyordu. Header 83px, altında pay bırakıyoruz. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 41, 59, 0.18);

  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition:
    opacity var(--dur-pop) var(--ease-out),
    transform var(--dur-pop) var(--ease-out),
    visibility var(--dur-pop);
}

.locale-list[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.locale-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-hover) var(--ease-out);
}

.locale-list a:hover,
.locale-list a[aria-current='true'] {
  background: rgba(16, 41, 59, 0.06);
}

.nav-locale {
  display: none;
}

@media (max-width: 900px) {
  .header-locale {
    display: none;
  }
  .nav-locale {
    display: block;
    padding: 14px 0 0;
  }
}

/* --------------------------------------------------------------------------
   5. Gömülü rezervasyon widget'ları
   -------------------------------------------------------------------------- */

.texholiday-embed {
  margin: 32px 0;
}

.embed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.embed-title {
  margin: 0;
}

.embed-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--coral, #f0644b);
  text-decoration: none;
}

.embed-status {
  margin-top: 14px;
  font-size: 15px;
}

.texholiday-notice {
  padding: 14px 16px;
  border-left: 3px solid var(--coral, #f0644b);
  background: rgba(240, 100, 75, 0.08);
  font-size: 14px;
}

/* İskelet. Widget gelene kadar bölümün şeklini tutar, boş alan bırakmaz. */
.embed-skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 860px) {
  .embed-skeleton {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.skeleton-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: var(--r-md);
}

.skeleton-media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
}

.skeleton-line {
  display: block;
  height: 11px;
  border-radius: 6px;
}

.skeleton-line.w70 { width: 70%; }
.skeleton-line.w45 { width: 45%; }

.skeleton-media,
.skeleton-line {
  background: linear-gradient(
    100deg,
    rgba(16, 41, 59, 0.07) 30%,
    rgba(16, 41, 59, 0.13) 50%,
    rgba(16, 41, 59, 0.07) 70%
  );
  background-size: 220% 100%;
  animation: th-shimmer 1500ms linear infinite;
}

@keyframes th-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

/* --------------------------------------------------------------------------
   6. Blog yerleşimi
   -------------------------------------------------------------------------- */

.blog-layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1000px) {
  .blog-layout.has-sidebar,
  .blog-layout:has(.blog-sidebar) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.blog-sidebar {
  display: grid;
  gap: 26px;
}

.archive-header {
  max-width: 62ch;
  margin-bottom: 34px;
}

.archive-intro {
  margin-top: 12px;
  opacity: 0.75;
}

.search-form {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.search-form input[type='search'] {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 15px;
}

.post-thumb-empty {
  display: block;
  aspect-ratio: 16 / 10;
  background: rgba(16, 41, 59, 0.07);
}

/* --------------------------------------------------------------------------
   7. Azaltılmış hareket ve Customizer kapatması
   Hareketi kaldırır, içeriği kaldırmaz.
   -------------------------------------------------------------------------- */

.motion-off .is-reveal,
.motion-off .is-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-reveal,
  .is-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button:active,
  .menu-toggle:active,
  .locale-trigger:active,
  .search-form button:active,
  .button:hover,
  .post-card:hover,
  .post-card:hover .post-thumb img {
    transform: none;
  }

  .skeleton-media,
  .skeleton-line {
    animation: none;
  }

  .locale-list {
    transform: none;
    transition: opacity 120ms linear, visibility 120ms;
  }
}

/* ==========================================================================
   8. MOBİL DÜZELTMELERİ
   main.css'ten sonra yüklendiği için buradaki kurallar onunkileri ezer.

   Düzeltilen üç şey:
   a) Hero sabit 760-790px yüksekteydi. Telefonda ekranın tamamını, hatta
      fazlasını kaplıyordu; kullanıcı içeriğe ulaşmak için boş bir ekran
      boyu kaydırmak zorunda kalıyordu. Artık ekran yüksekliğine bağlı.
   b) Başlık 41px sabitti. 390px genişlikte beş satıra yayılıyordu.
   c) Ana eylem düğmesi 760px altında tamamen gizleniyordu. Telefonda
      sitenin birincil eylemi kayboluyordu.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Dil ve para birimi seçici menünün içine iner, header'da sıkışmaz. */
  .header-locale { display: none; }
  .nav-locale { display: block; padding: 18px 0 0; border-top: 1px solid var(--line); margin-top: 18px; }

  /*
    DİL LİSTESİ DRAWER'IN İÇİNDE AKAR — absolute kalırsa KIRPILIYOR.

    Ölçülen hata (v2.50.0, 375x812, kullanıcı bildirdi):
      .main-nav.is-open   72 -> 442  (370px, overflow-y: auto)
      .locale-list       410 -> 1074 (665px, position: absolute)
      menü içinde görünen dil: 0 / 17

    Liste, kendi içinde kayan bir kabın içinde absolute duruyordu; kabın
    dolgu kutusunun dışına taşan kısmı kırpılıyor. 17 dilin hiçbiri
    görünmüyordu, yalnız listenin 32px'lik üst dolgusu.

    max-height: calc(100vh - 120px) = 692px de işe yaramıyordu çünkü ölçü
    EKRANA göre alınmış; oysa kap 370px. Liste kabından iki kat büyük
    kalıyor, kendi overflow'u hiç devreye girmiyordu.

    Çözüm: mobilde absolute'tan çık, normal akışa gir. Artık kırpılamaz.
    Kendi max-height'i 45vh ve kendi içinde kayıyor, böylece drawer'ı
    600px uzatmıyor. overscroll-behavior ana kuralda zaten contain.

    Kapalıyken display:none ŞART: akışa girdiği için visibility:hidden
    ile yer kaplamaya devam eder ve menüde koca bir boşluk bırakırdı.

    Ölçüldü (aynı ekran): liste 410 -> 775, 365px, scrollHeight 663,
    17 dilin hepsi erişilebilir, 9'u ilk bakışta görünür, taşma yok.
    Kapalıyken menü 370px'e dönüyor, boşluk yok.

    Masaüstü etkilenmiyor: orada .header-locale kullanılıyor, bu kural
    .nav-locale ile sınırlı.
  */
  .nav-locale .locale-list {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    transform: none;
    max-height: 45vh;
    overflow-y: auto;
    display: none;
  }

  .nav-locale .locale-list[data-open='true'] {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  /*
    Liste akışa girince .locale-switcher'ın align-items: center'ı para
    birimi düğmesini listenin ortasına kaydırıyor — ölçüldü: liste açılınca
    TRY düğmesi y=358'den y=544'e iniyor ve havada duruyor gibi görünüyor.
    flex-start ikisini de tetikleyici hizasında tutuyor, liste dil
    düğmesinin altına açılıyor.
  */
  .nav-locale .locale-switcher { align-items: flex-start; }

  /*
    TELEFONDA DİL: ÖZEL LİSTE YERİNE YEREL <select>.
    iPhone'da ölçüldü: liste 168px genişliğinde, drawer'ın içinde ikinci
    bir kaydırma alanı, altta kesik. Sistem seçicisi bunların hiçbirini
    yapmıyor. Düğme ve liste burada gizleniyor, masaüstünde tersi.
  */
  .nav-locale .locale-trigger,
  .nav-locale .locale-list { display: none !important; }
  .nav-locale .locale-select {
    display: block;
    appearance: none; -webkit-appearance: none;
    min-height: 44px; padding: 0 36px 0 14px;
    border: 1px solid var(--line, #e4e7ec); border-radius: var(--r-pill);
    background: transparent no-repeat right 14px center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23162630' stroke-width='1.5'/%3E%3C/svg%3E");
    font: inherit; font-size: 13px; font-weight: 600; color: inherit;
  }

  /* Mobil menü uzun olabilir: ekranı taşarsa kendi içinde kaysın. */
  .main-nav.is-open {
    max-height: calc(100svh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  /*
    svh: mobil tarayıcının adres çubuğu açıkken de doğru yükseklik.
    Alt sınır 520px, üst sınır 88svh: hero ekranı asla tamamen yutmaz,
    altındaki içeriğin bir kısmı hep görünür kalır.
  */
  .hero {
    min-height: clamp(520px, 88svh, 720px);
    align-items: center;
  }
  .hero-content { padding-top: 96px; padding-bottom: 32px; }

  /*
    iPHONE'DA HERO İKİYE BÖLÜNMÜŞ GÖRÜNÜYORDU (kullanıcı bildirdi, iOS
    Simulator'da doğrulandı): sabit ve şeffaf header'ın altındaki 82px'lik
    bant, hero görselinin FARKLI bir kesitini gösteriyordu; üst üste iki
    kopya gibi. CSS'te header'a görsel çizen kural yok; bu iOS Safari'nin
    position:fixed + background-size:cover birleşimindeki çizim hatası.
    Kökü tartışmak yerine kaynağı kaldırıyoruz: telefonda header düz
    lacivert, görsel onun altında başlıyor. Masaüstünde şeffaf kalıyor.
  */
  .home .site-header:not(.is-scrolled) {
    background: var(--navy);
    border-bottom-color: rgba(255,255,255,.12);
  }

  /* Akıcı ölçek: 390px'de ~34px, 760px'de ~50px. */
  .hero h1 {
    font-size: clamp(2rem, 8.2vw, 3.1rem);
    line-height: 1.08;
    margin: 14px 0 14px;
    text-wrap: balance;
  }
  .hero-copy p { font-size: 15.5px; margin-bottom: 26px; }

  /* Birincil eylem telefonda da dursun, yalnızca küçülsün. */
  .header-actions .button {
    display: inline-flex;
    min-height: 38px;
    padding-inline: 15px;
    font-size: 13px;
  }

  .main-nav.is-open { max-height: calc(100svh - 72px); }

  /* Başlık ölçeği tek yerde: main.css'teki clamp(). Burada ikinci bir
     tanım vardı ve mobilde H2'yi 27px'e düşürüp H3 (23px) ile aynı
     düzleme getiriyordu; hiyerarşi çöküyordu. */

  /* Uzun kelimeler taşmasın. */
  h1, h2, h3 { overflow-wrap: break-word; }

  .embed-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .hero { min-height: clamp(480px, 86svh, 680px); }
  .hero h1 { font-size: clamp(2.15rem, 9.5vw, 2.6rem); }
  .hero-content { padding-top: 88px; }

  /* Marka + hamburger + düğme aynı satırda sıkışmasın. */
  .header-inner { gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions .button { padding-inline: 12px; font-size: 12.5px; }

  .embed-skeleton { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
  .search-form button { width: 100%; }
}

/* svh desteklemeyen eski tarayıcılar için yedek. */
@supports not (height: 1svh) {
  @media (max-width: 760px) {
    .hero { min-height: 78vh; }
  }
}

/* ==========================================================================
   8. AÇILIR KATMAN DÜZELTMESİ  (tarih ve kişi seçici)

   Belirti: arama çubuğundaki tarih takvimi ve misafir sayısı kutusu
   açılıyor ama alttaki bölümün ARKASINDA kalıyor, tarih seçilemiyor.

   İki ayrı sebep üst üste binmişti, ikisi de main.css'te:

   1) .hero { overflow: hidden }
      Takvim hero kutusunun alt kenarını aştığı anda KIRPILIYORDU.
      Bu kural gereksizdi: hero'nun arka planı background-image, perdesi
      de inset:0 ile konumlanmış .hero-overlay. İkisi de zaten kutunun
      dışına taşmaz, yani kırpacak bir şey yoktu.

   2) .trust-row { position: relative; z-index: 3; margin-top: -38px }
      Bir sonraki bölüm hero'nun üstüne 38px biniyor ve z-index 3 ile
      boyanıyor. Arama paneli ise yalnızca .hero-content içinde z-index 1
      taşıyordu. 3 > 1 olduğu için açılan katman altta kalıyordu.

   Çözüm: kırpmayı kaldır, arama panelini sonraki bölümün üstüne al.
   Tavan header'ın z-index 1000 değeri; 40 ile 60 arası güvenli aralık.
   ========================================================================== */

.hero {
  overflow: visible;
}

/* Sonraki bölümün z-index 3 değerinin üstüne çık, header'ın 1000'inin altında kal. */
.hero-content {
  z-index: 40;
}

/*
  Panelin kendisi ayrı bir katman. Widget kendi açılır kutusunu panelin
  içine, yerinde basıyor (body'e portal atmıyor), bu yüzden panelin
  yığınlama sırası doğrudan takvimin görünürlüğünü belirliyor.
*/
.search-panel {
  position: relative;
  z-index: 50;
}

/*
  Widget'ın kendi açılır katmanlarına taban değer. Vendor DOM'una
  karışmıyoruz, yalnızca yığınlama sırasını garantiye alıyoruz.
*/
.nuitee-search [class*='dropdown'],
.nuitee-search [class*='popup'],
.nuitee-search [class*='calendar'],
.nuitee-search [class*='datepicker'],
.nuitee-search [class*='typeahead'],
.nuitee-search [role='dialog'],
.nuitee-search [role='listbox'] {
  z-index: 60;
}

/*
  Gömülü arama kısa kodu da aynı sorunu yaşayabilir: içeriğin ortasına
  konduğunda altındaki bölüm üstünü örtmesin.
*/
.texholiday-embed-search {
  position: relative;
  z-index: 40;
}

/*
  Mobilde trust-row zaten hero'ya binmiyor (margin-top: 0), ama takvim
  ekranın altına taşabildiği için kırpma yasağı orada da geçerli olmalı.
*/
@media (max-width: 900px) {
  .hero,
  .hero-content,
  .search-panel {
    overflow: visible;
  }
}

/* ==========================================================================
   9. GÜVEN VE ÇEKİCİLİK KATMANI
   Redesign-Preserve: mevcut tema korunuyor, üstüne inceltme ekleniyor.
   Uydurma güven rozeti, sahte sertifika logosu, uydurma sayı YOK.
   Güven, gerçek bilgiyi net göstermekten geliyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Gölgeler markanın rengine boyanıyor
   Saf siyah gölge açık zeminde kirli ve ucuz görünür. Gölgeyi zeminin
   tonuna çalarsak kart sayfadan kopmaz, üstünde durur.
   -------------------------------------------------------------------------- */

.stay-card,
.editorial-card,
.post-card,
.search-panel,
.trust-grid {
  box-shadow:
    0 1px 2px rgba(16, 41, 59, 0.04),
    0 12px 32px -12px rgba(16, 41, 59, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .stay-card:hover,
  .editorial-card:hover,
  .post-card:hover {
    box-shadow:
      0 2px 4px rgba(16, 41, 59, 0.05),
      0 28px 60px -20px rgba(16, 41, 59, 0.28);
  }
}

/* Arama paneli sayfanın en önemli öğesi. Gölgesi de öyle davranmalı. */
.search-panel {
  box-shadow:
    0 2px 6px rgba(1, 18, 29, 0.08),
    0 32px 80px -28px rgba(1, 18, 29, 0.42);
}

/* --------------------------------------------------------------------------
   9.2 Güven şeridi
   Üç madde. İkon değil, işaret. Her biri doğrulanabilir bir olgu.
   -------------------------------------------------------------------------- */

.trust-grid > div {
  position: relative;
  transition: background 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .trust-grid > div:hover {
    background: rgba(16, 41, 59, 0.02);
  }
}

/* Sol kenarda ince marka çizgisi: göz sırayı buradan alıyor. */
.trust-grid > div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--coral, #f0644b);
  transform: translateY(-50%);
  transition: height 280ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .trust-grid > div:hover::before {
    height: 46%;
  }
}

/* --------------------------------------------------------------------------
   9.3 Tipografik ritim
   Başlıklar biraz daha sıkı, gövde biraz daha rahat. En ucuz kalite artışı.
   -------------------------------------------------------------------------- */

.hero h1 {
  letter-spacing: -0.038em;
}

/* Harf aralığı main.css'te -0.038em olarak tanımlı; buradaki daha gevşek
   ikinci tanım onu eziyordu. */

.hero-copy p,
.section-heading p,
.editorial-card p,
.post-card-body p {
  line-height: 1.68;
  text-wrap: pretty;
}

.hero h1,
.section-heading h2 {
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   9.4 Odak halkası
   Klavyeyle gezen kullanıcı nerede olduğunu görmeli. Tarayıcı varsayılanı
   koyu zeminlerde kayboluyordu.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--coral, #f0644b);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero :focus-visible,
.site-footer :focus-visible,
.anchor-card :focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   9.5 (boş) Mobil rezervasyon çubuğu v2.6.0'da kaldırıldı; stilleri de
   gitti. Yalnızca hareketi azaltma tercihi için kalan kural aşağıda.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .trust-grid > div::before {
    transition: none;
  }
}

/* ==========================================================================
   10. HERO GİRİŞİ VE DÜZELTMELER
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 Mobilde header hizası
   Menü gizlenince eylem düğmeleri logonun hemen yanına yapışıyordu.
   Sağa itiliyor; hamburger ile aynı grupta duruyor.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .header-actions {
    margin-left: auto;
  }
  .header-inner {
    gap: 10px;
  }
}

/* Çok dar ekranda metin bağlantısı düşer, ana düğme kalır. */
@media (max-width: 420px) {
  .header-actions .account-link {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10.2 Hero girişi
   Sayfa açılınca ilk ekran sırayla yerine oturuyor. Amaç süs değil:
   göz önce başlığa, sonra açıklamaya, en son arama kutusuna gitsin.
   Okuma sırasını hareket kuruyor.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .motion-on .hero-copy > *,
  .motion-on .search-panel {
    animation: hero-rise 760ms var(--ease-out) backwards;
  }

  .motion-on .hero-copy > *:nth-child(1) { animation-delay: 80ms; }
  .motion-on .hero-copy > *:nth-child(2) { animation-delay: 160ms; }
  .motion-on .hero-copy > *:nth-child(3) { animation-delay: 240ms; }
  .motion-on .search-panel              { animation-delay: 340ms; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }

  /*
    Hero fotoğrafı çok yavaş yaklaşıyor. Duran bir fotoğraf ölü görünür;
    18 saniyede %5 büyüme fark edilmez ama sahne canlı kalır.
  */
  .motion-on .hero {
    background-size: cover;
    animation: hero-drift 22s ease-in-out infinite alternate;
  }

  @keyframes hero-drift {
    from { background-position: center center; background-size: cover; }
    to   { background-position: center 46%; background-size: 106% auto; }
  }
}

/* --------------------------------------------------------------------------
   10.3 Kaydırma girişi biraz daha belirgin
   18px fark edilmiyordu. 26px ve hafif ölçek, hareketi hissedilir yapıyor
   ama hâlâ 300ms üstü sürede tamamlanıyor, sinir bozmuyor.
   -------------------------------------------------------------------------- */

.is-reveal {
  transform: translateY(26px) scale(0.995);
}

/* --------------------------------------------------------------------------
   10.4 Bölüm başlıklarında alt çizgi
   Başlık göründüğünde altındaki çizgi soldan sağa çiziliyor. Bölümün
   başladığını söyleyen tek işaret; süs değil, yapı.
   -------------------------------------------------------------------------- */

.section-heading h2,
.journal h2 {
  position: relative;
  padding-bottom: 14px;
}

/*
  VARSAYILAN GÖRÜNÜR. Çizginin varlığı animasyona bağlı değil.
  İlk ekranda olan başlıklar animasyona hiç girmiyor; çizgi 0'dan
  başlasaydı onlarda sonsuza kadar görünmez kalırdı.
  Yalnızca animasyona GİREN başlıklarda (.is-reveal) sıfırdan çiziliyor.
*/
.section-heading h2::after,
.journal h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 56px;
  border-radius: 2px;
  background: var(--coral, #f0644b);
  transition: width 700ms var(--ease-out) 120ms;
}

.is-reveal .section-heading h2::after,
.is-reveal.section-heading h2::after,
.is-reveal .journal h2::after {
  width: 0;
}

.is-reveal.is-in .section-heading h2::after,
.is-reveal.is-in.section-heading h2::after,
.is-reveal.is-in .journal h2::after {
  width: 56px;
}

.motion-off .section-heading h2::after,
.motion-off .journal h2::after {
  width: 56px;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-on .hero-copy > *,
  .motion-on .search-panel,
  .motion-on .hero {
    animation: none;
  }
  .section-heading h2::after,
  .journal h2::after {
    width: 56px;
    transition: none;
  }
}

/* ==========================================================================
   11. DOKU, DERİNLİK VE ETKİLEŞİM HAREKETİ

   Önceki tur "hareket yok" geri bildirimini yalnızca giriş animasyonuyla
   karşılamıştım. Eksik olan asıl şey etkileşim hareketiydi: sayfa dokunmaya
   cevap vermiyordu. Buradaki her kural bir kullanıcı eylemine bağlı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 Grenli doku
   Düz renk alanları ekranda ölü görünüyor. Çok hafif bir gren, sıcak krem
   zemine kağıt hissi veriyor. SVG gömülü, ağ isteği yok.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   11.2 Fotoğraflı kartlarda yakınlaşma
   Kart fotoğrafları background-image olduğu için doğrudan ölçeklenemiyor;
   ayrı bir katman gerekiyor. Kartın kendisi yükselirken fotoğraf hafifçe
   yakınlaşıyor: iki ayrı hız, tek hareket hissi.
   -------------------------------------------------------------------------- */
.stay-card { background-image: none; }
.stay-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  transition: transform .75s cubic-bezier(.23, 1, .32, 1);
}
.motion-on .stay-card:hover::after { transform: scale(1.06); }
.stay-card:active { transform: translateY(-2px) scale(.99); }

/* --------------------------------------------------------------------------
   11.3 Okların yol alması
   "Otelleri keşfet →" gibi bağlantılarda ok imleçle birlikte ilerliyor.
   Küçük ama bağlantının tıklanabilir olduğunu anlatan en ucuz sinyal.
   -------------------------------------------------------------------------- */
.card-link,
.text-link,
.hotels-fallback .button span,
.final-cta .button span,
.journal-feature a,
.journal-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.motion-on .card-link,
.motion-on .text-link,
.motion-on .journal-feature a,
.motion-on .journal-list a { transition: gap .28s cubic-bezier(.23, 1, .32, 1), color .2s ease; }
.motion-on .stay-card:hover .card-link,
.motion-on .text-link:hover,
.motion-on .journal-feature a:hover,
.motion-on .journal-list a:hover { gap: 13px; }
.text-link:hover,
.journal-feature a:hover,
.journal-list a:hover { color: var(--coral); }

/* --------------------------------------------------------------------------
   11.4 Şerit kartlarının sıralı girişi
   Ayrı bir animasyon yazmıyoruz: <ul> üzerindeki data-reveal sayesinde her
   <li> temanın kendi açılma sistemine giriyor ve --reveal-delay ile sırayla
   geliyor. İkinci bir sistem kurmak, görünürlük garantisini de ikiye
   bölerdi; içeriğin gizli kalma riski oradan çıkar.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   11.5 Otel listesi yerine otururken
   Widget kartları geldiğinde sert bir sıçrama yerine yumuşak bir geçiş.
   -------------------------------------------------------------------------- */
.motion-on .hotels-widget.is-ready {
  animation: hotels-in .5s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes hotels-in { from { opacity: 0; transform: translateY(14px); } }

/* --------------------------------------------------------------------------
   11.6 Şeridin mobil hâli
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Şeridin mobil hâli main.css'te; burada yalnız yardımcılar. */
  .rail-nav { display: none; }          /* parmakla kaydırmak zaten doğal */
  .hotels-skeleton { grid-template-columns: 1fr 1fr; }
  .hotels-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --------------------------------------------------------------------------
   11.7 Hareketi kapatanlar için
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .rail { scroll-behavior: auto; }
  .rail-wrap.is-reveal .dest-card,
  .hotels-widget.is-ready { animation: none; opacity: 1; transform: none; }
  .stay-card::after { transition: none; }
}
.motion-off .rail-wrap.is-reveal .dest-card,
.motion-off .hotels-widget.is-ready { animation: none; opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Dil öneri çubuğu (auto-language.php). Sabit konum: akışa girmez, CLS
   üretmez. Header 82px (mobilde 72px) sabit, çubuk onun hemen altında.
   -------------------------------------------------------------------------- */
.th-dilbar {
  position: fixed; top: 82px; left: 0; right: 0; z-index: 990;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 16px; padding: 10px 16px;
  background: rgba(252,250,246,.96); color: var(--ink, #162630);
  border-bottom: 1px solid var(--line, #e4e7ec);
  box-shadow: 0 8px 24px rgba(16,41,59,.08);
  font-size: 14px; line-height: 1.4;
  backdrop-filter: blur(12px);
}
.th-dilbar-gec {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-pill, 999px);
  background: var(--navy, #10293b); color: #fff !important; text-decoration: none !important;
  font-weight: 700;
}
.th-dilbar-kapat {
  min-height: 36px; padding: 0 10px; border: 0; background: none;
  color: var(--muted, #61717b); font: inherit; font-size: 13.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 760px) { .th-dilbar { top: 72px; font-size: 13.5px; } }