/* ==========================================================================
   NOVA BALO & DAVET — El işçiliği katmanı (mikro etkileşimler)
   Bu dosya EN SON yüklenir ve components/animations katmanlarını inceltir.
   İlke: daha fazla hareket değil, daha az ve daha nitelikli hareket.
   Tümü transform/opacity tabanlıdır ve prefers-reduced-motion ile kapanır.
   ========================================================================== */

/* ==========================================================================
   1. Maskeden yükselen kelimeler — imza başlık açılışı
   Her kelime kendi satır kutusundan yukarı doğru çıkar. Metin "belirmez",
   sayfanın içinden gelir. Yalnızca büyük ara cümlelerde ve bölüm
   başlıklarında kullanılır; gövde metninde asla.
   ========================================================================== */

.js [data-split] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Türkçe aksanlar için pay: ğ/Ğ kısa çizgisi üstte, ş/ç sedillası altta
     kalır. Padding maskeyi büyütür, negatif margin yerleşimi bozmaz.
     Yatay pay ise italik serifin sağa yatan çıkıntısını kırpılmaktan korur. */
  padding-block: 0.18em;
  margin-block: -0.18em;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
}

.js [data-split] .word__in {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform var(--dur-word) var(--ease-luxe);
  transition-delay: calc(var(--w, 0) * var(--stagger-word));
  will-change: transform;
}

/* Başlıkların çoğunda [data-reveal] başlığın KENDİSİNDE değil, onu saran
   kapsayıcıdadır (.section-head, .stack …). Bu yüzden .is-visible hem öğenin
   kendisinde hem de bir atasında olabilir — iki durumu da yakala. */
.js [data-split].is-visible .word__in,
.js .is-visible [data-split] .word__in { transform: translate3d(0, 0, 0); }

.js [data-split].is-settled .word__in,
.js .is-settled [data-split] .word__in { will-change: auto; }

/* Tek bir jest: kapsayıcı yalnızca solar, hareketi kelimeler taşır.
   Aksi hâlde blok yukarı kayarken kelimeler de yükselir ve hareket
   iki katmanlı, "ucuz" görünür. :has() desteklenmeyen tarayıcıda kural
   yok sayılır ve önceki davranış korunur. */
.js [data-reveal]:has([data-split]) { transform: none !important; }

/* ==========================================================================
   2. Kendini çizen saç teli çizgiler
   Altın bir hairline'ın soldan sağa çizilmesi — en sade, en pahalı jest.
   ========================================================================== */

.rule-draw { position: relative; }

.js .rule-draw::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 1px;
  margin-top: var(--space-3);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-draw) var(--ease-luxe) 260ms;
}

.js .rule-draw.is-visible::after,
.js .is-visible .rule-draw::after { transform: scaleX(1); }

/* --- Bölüm başlığı ritmi (referans: davetiye dizgisi) --------------------
   Üst etiketin ÜZERİNDE çizgi yerine, çizgi BAŞLIĞIN ALTINA alınır:
   etiket → başlık → kısa altın hat → gövde. Okumaya nefes aldırır ve
   başlığı "dizilmiş" gösterir. Bölüm başlıklarında etiket çizgisi kapanır. */
.section-head .eyebrow.rule-draw::after { display: none; }

.section-head h2 {
  position: relative;
  padding-bottom: var(--space-4);
}

.section-head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.75rem;
  height: 1px;
  background: var(--c-gold);
  transform: translateX(-50%) scaleX(1);
}

.js .section-head h2::after {
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--dur-draw) var(--ease-luxe) 320ms;
}

.js .section-head.is-visible h2::after,
.js .is-visible .section-head h2::after {
  transform: translateX(-50%) scaleX(1);
}

/* Sola hizalı başlık bloklarında (varsa) hat soldan açılır */
.section-head--left h2::after { left: 0; transform: scaleX(1); }
.js .section-head--left h2::after { transform: scaleX(0); transform-origin: left center; }
.js .section-head--left.is-visible h2::after,
.js .is-visible .section-head--left h2::after { transform: scaleX(1); }

/* Bölüm başlığı dışındaki etiketlerde (split intro, rezervasyon) eski
   davranış korunur — orada çizgi ortadan değil soldan açılır */
.section-head--left .rule-draw::after { margin-inline: 0; transform-origin: left center; }

/* ==========================================================================
   3. Arma: iki aşamalı çizim
   Önce çerçeve konturu çizilir (stroke-dashoffset), sonra monogram dolgusu
   belirir (fill-opacity). Her ikisi de SVG'de KALITSAL özelliklerdir; bu
   sayede <use> ile gölge ağacına aktarılabilirler.
   ========================================================================== */

.js .crest:not(.hero__crest) {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  fill-opacity: 0;
  transition:
    stroke-dashoffset var(--dur-crest) var(--ease-luxe),
    fill-opacity 0.9s var(--ease-glide) 0.6s;
}

.js .crest.is-drawn { stroke-dashoffset: 0; fill-opacity: 1; }

/* ==========================================================================
   4. Görselin karşı hareketi
   Maske açılırken görsel hafifçe küçülerek yerine oturur. Çerçeve ve içerik
   farklı hızlarda hareket edince fotoğraf "ağırlık" kazanır.
   ========================================================================== */

.zoom-frame img,
.ratio > img {
  transform: scale(var(--img-scale, 1));
  transition: transform 1.5s var(--ease-luxe);
}

.js [data-reveal="mask"]           { --img-scale: 1.13; }
.js [data-reveal="mask"].is-visible { --img-scale: 1; }

/* Fare ile yakınlaştırma, açılış kuralını geçebilmek için daha özgül */
.js .zoom-frame[data-reveal].is-visible:hover,
.js .zoom-frame[data-reveal].is-visible:focus-within,
.js .zoom-frame:hover,
.js .zoom-frame:focus-within { --img-scale: 1.05; }

.js .zoom-frame:hover img,
.js .zoom-frame:focus-within img { transition-duration: 1.1s; }

/* ==========================================================================
   5. Mekân kartı — tek blok "yukarı zıplama" yerine eşgüdümlü jest
   Görsel yaklaşır, başlık sağa kayar, altın çizgi çizilir, gölge derinleşir.
   Hepsi aynı eğriyle, farklı sürelerle.
   ========================================================================== */

.venue-card {
  transition:
    transform 0.75s var(--ease-luxe),
    box-shadow 0.75s var(--ease-luxe),
    border-color 0.5s var(--ease-glide);
}

.venue-card:hover,
.venue-card:focus-within {
  transform: translate3d(0, -7px, 0);
  box-shadow: var(--sh-3);
  border-color: rgba(201, 169, 97, 0.45);
}

.venue-card__title {
  position: relative;
  transition: transform 0.65s var(--ease-luxe), color 0.4s var(--ease-glide);
}

/* Başlığın altındaki nötr çizginin üzerine altın çizgi çizilir */
.venue-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease-luxe);
}

.venue-card:hover .venue-card__title,
.venue-card:focus-within .venue-card__title { transform: translate3d(5px, 0, 0); }

.venue-card:hover .venue-card__title::after,
.venue-card:focus-within .venue-card__title::after { transform: scaleX(1); }

/* Paket kartı da aynı dili konuşsun (yükselme yok, yalnızca kenar + gölge) */
.plan {
  transition: transform 0.75s var(--ease-luxe),
              box-shadow 0.75s var(--ease-luxe),
              border-color 0.5s var(--ease-glide);
}

.plan:hover,
.plan:focus-within {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--sh-3);
  border-color: rgba(201, 169, 97, 0.5);
}

/* ==========================================================================
   6. Oklu bağlantı — altına çizgi çizilir, ok yola çıkar
   ========================================================================== */

.link-arrow { position: relative; }

.link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1.9rem;
  bottom: 0.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-luxe);
}

.link-arrow:hover::before,
.link-arrow:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.link-arrow svg { transition: transform 0.55s var(--ease-luxe); }
.link-arrow:hover svg,
.link-arrow:focus-visible svg { transform: translate3d(6px, 0, 0); }

/* ==========================================================================
   7. Manyetik düğme
   İmleç yaklaştıkça düğme hafifçe ona doğru kayar (en fazla 8px), ayrılınca
   yay eğrisiyle yerine döner. Değerleri JS yazar; dönüşüm burada birleşir
   ki :active ölçeklemesi ezilmesin. Yalnızca ince imleçli aygıtlarda.
   ========================================================================== */

.btn {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--bs, 1));
}

.btn[data-magnetic] {
  transition:
    transform 0.65s var(--ease-spring),
    background var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft);
}

/* İmleç takip ederken yay gecikmesi olmasın — JS bu sınıfı ekler */
.btn[data-magnetic].is-magnetized { transition-duration: 0.12s, 260ms, 260ms, 260ms; }

.btn:active { --bs: 0.985; }

/* ==========================================================================
   8. SSS — iki aşamalı açılış
   Panel yüksekliği açılır, içerik 120ms sonra yükselerek gelir. Tek adımda
   açılan akordeon "hazır bileşen" gibi durur; iki adım el yapımı hissettirir.
   ========================================================================== */

.js .faq__panel > div > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.5s var(--ease-glide),
    transform 0.6s var(--ease-luxe);
}

.js .faq__item[open] .faq__panel > div > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 130ms;
}

/* Açık maddede soldan sağa çizilen altın çizgi */
.faq__item { position: relative; }

.faq__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--ease-luxe);
}

.faq__item[open]::after { transform: scaleX(1); }

.faq__trigger { transition: color 0.4s var(--ease-glide); }

/* Artı işareti 45° dönerken hafifçe büyür — "çarpı"ya dönüşür */
.faq__icon {
  transition: transform 0.55s var(--ease-luxe), opacity 0.4s var(--ease-glide);
}
.faq__item[open] .faq__icon { transform: rotate(135deg) scale(0.92); }

/* ==========================================================================
   9. İstatistik şeridi — rakamın altına çizgi çizilir
   ========================================================================== */

.stat__num { position: relative; display: inline-block; }

.js .stat__num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35em;
  width: 2rem;
  height: 1px;
  background: var(--c-gold);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.9s var(--ease-luxe) 380ms;
}

.js [data-reveal].is-visible .stat__num::after { transform: translateX(-50%) scaleX(1); }

/* ==========================================================================
   10. Kart ızgaralarında daha kendinden emin sıralama
   70ms şablon gibi duruyordu; 105ms her kartın kendi anını almasını sağlar.
   ========================================================================== */

[data-stagger] > *:nth-child(1) { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(2) { --reveal-delay: calc(var(--stagger-card) * 1); }
[data-stagger] > *:nth-child(3) { --reveal-delay: calc(var(--stagger-card) * 2); }
[data-stagger] > *:nth-child(4) { --reveal-delay: calc(var(--stagger-card) * 3); }
[data-stagger] > *:nth-child(5) { --reveal-delay: calc(var(--stagger-card) * 4); }
[data-stagger] > *:nth-child(6) { --reveal-delay: calc(var(--stagger-card) * 5); }

/* Açılış eğrisini de imza eğriyle değiştir */
.js [data-reveal] {
  transition-timing-function: var(--ease-luxe);
  transition-duration: 1.05s;
}

/* ==========================================================================
   11. Instagram ızgarası — doygunluk yerine sessiz bir yükselme
   ========================================================================== */

.social-grid a { transition: transform 0.7s var(--ease-luxe); }
.social-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 36, 0.28);
  opacity: 1;
  transition: opacity 0.6s var(--ease-glide);
}
.social-grid a:hover::after,
.social-grid a:focus-visible::after { opacity: 0; }

/* ==========================================================================
   12. Paralaks — yalnızca iki tam genişlik fotoğrafın arka planında
   Değeri JS yazar; burada yalnızca birleştirilir.
   ========================================================================== */

[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}

/* ==========================================================================
   13. Alıntı kartı — sol kenarda çizilen altın çizgi
   ========================================================================== */

.quote { position: relative; overflow: hidden; }

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ease-luxe) 200ms;
}

.js [data-reveal].is-visible.quote::before,
.js .quote[data-reveal].is-visible::before { transform: scaleY(1); }

/* ==========================================================================
   13b. Mühür dönüşü ve fotoğraf tonu birliği
   ========================================================================== */

/* Dairesel metin çok yavaş döner — durağan sayfada tek canlı nokta.
   Monogram ve halkalar sabit kalır; yalnızca yazı halkası döner. */
@keyframes nova-seal-rot { to { transform: rotate(360deg); } }

.seal__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: nova-seal-rot 75s linear infinite;
}

/* Karışık stok fotoğrafları tek "koleksiyon" gibi okutan ortak baskı tonu:
   hafif doygunluk kısma + krem/altın yönünde çok ince sıcak doku. Amaç
   "filtre" değil, aynı fotoğrafçının elinden çıkmış gibi duran tutarlılık.
   Hero ve tam genişlik arka planlar sinematik kalır, dokunulmaz. */
.venue-card img,
.photo-strip img,
.photo-trio img,
.framed img,
.social-grid img {
  filter: saturate(0.88) sepia(0.07) brightness(1.015);
}

/* ==========================================================================
   14. Hareket azaltma — el işçiliği katmanının tamamı geri alınır
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .js [data-split] .word { overflow: visible; padding-block: 0; margin-block: 0; }
  .js [data-split] .word__in { transform: none !important; transition: none !important; }

  .js .rule-draw::after,
  .js .section-head h2::after,
  .venue-card__title::after,
  .link-arrow::before,
  .faq__item::after,
  .js .stat__num::after,
  .quote::before {
    transform: none !important;
    transition: none !important;
  }

  /* Başlık altı hat ortalı kalmalı (transform:none onu kaydırır) */
  .js .section-head h2::after { transform: translateX(-50%) !important; }

  .seal__spin { animation: none !important; }
  .hero__l { animation: none !important; opacity: 1 !important; }

  .js .crest:not(.hero__crest) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important;
    transition: none !important;
  }

  .zoom-frame img,
  .ratio > img { --img-scale: 1 !important; transition: none !important; }

  .btn { --mx: 0px !important; --my: 0px !important; }

  [data-parallax] { --py: 0px !important; transform: none !important; }

  .js .faq__panel > div > * { opacity: 1 !important; transform: none !important; }

  .venue-card:hover,
  .plan:hover { transform: none !important; }
}