/* ==========================================================================
   Estorix — Anasayfa akışkan etkileşim katmanı (yalnız body.is-home)
   --------------------------------------------------------------------------
   estorix-home-apple.css'ten SONRA yüklenir; onun görsel dilini bozmaz,
   üstüne DAVRANIŞ ekler. Referans: Apple "Designing Fluid Interfaces"
   (WWDC 2018) + "The Details of UI Typography" (WWDC 2020).

   Kapsam:
     1) Yanıt — geri bildirim basışta (pointer-down), bırakışta değil
     2) Malzeme & derinlik — translucent üst çubuk, lightbox, sayfa (sheet)
     3) Tipografi — boyuta özel harf aralığı (tracking) ve satır yüksekliği
     4) Fizik yüzeyleri — sürüklenebilir alanlar için touch-action / will-change
     5) Erişilebilirlik — az hareket / az saydamlık / yüksek kontrast

   Hareketin kendisi assets/js/estorix-home-fluid.js içindeki yaylarla
   sürülür; bu dosya yalnızca yüzeyi hazırlar. Dosya silinirse sayfa
   önceki haline döner.
   ========================================================================== */

body.estorix-vibe.is-home {
  /* Basış geri bildirimi: gecikmesiz, kısa, tek yönlü */
  --fl-press-ms: 110ms;
  --fl-press-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Malzeme: büyük yüzey = daha kalın bulanıklık */
  --fl-mat-blur: 20px;
  --fl-mat-sat: 180%;
}

/* ==========================================================================
   1) YANIT — geri bildirim basış anında başlar (§ Response)
   Geçiş listesi burada yeniden kurulur; çünkü basıştaki `transform`
   önceki katmanların `transition` tanımlarında yer almıyor.
   ========================================================================== */
body.estorix-vibe.is-home .btn,
body.estorix-vibe.is-home .ex-mod,
body.estorix-vibe.is-home .ex-mod__chip,
body.estorix-vibe.is-home .ex-mod__cta,
body.estorix-vibe.is-home .ex-shop__card,
body.estorix-vibe.is-home .ex-shop__cta,
body.estorix-vibe.is-home .ex-shop__filter,
body.estorix-vibe.is-home .ex-market__card,
body.estorix-vibe.is-home .seo-usecase-card,
body.estorix-vibe.is-home .estorix-showcase__tab,
body.estorix-vibe.is-home .estorix-showcase__thumb,
body.estorix-vibe.is-home .estorix-showcase__zoom,
body.estorix-vibe.is-home .estorix-download__btn,
body.estorix-vibe.is-home .estorix-download__store-btn,
body.estorix-vibe.is-home .ex-lead-pop__submit,
body.estorix-vibe.is-home .ex-lead-pop__close {
  transition:
    transform var(--fl-press-ms) var(--fl-press-ease),
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.28s ease,
    color 0.22s ease,
    opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Küçük hedefler belirgin, geniş yüzeyler ölçülü küçülür:
   aynı oran her boyutta aynı hissi vermez. */
body.estorix-vibe.is-home .btn.is-fluid-press,
body.estorix-vibe.is-home .ex-mod__chip.is-fluid-press,
body.estorix-vibe.is-home .ex-shop__cta.is-fluid-press,
body.estorix-vibe.is-home .ex-shop__filter.is-fluid-press,
body.estorix-vibe.is-home .estorix-showcase__tab.is-fluid-press,
body.estorix-vibe.is-home .estorix-showcase__thumb.is-fluid-press,
body.estorix-vibe.is-home .estorix-download__btn.is-fluid-press,
body.estorix-vibe.is-home .estorix-download__store-btn.is-fluid-press,
body.estorix-vibe.is-home .ex-lead-pop__submit.is-fluid-press,
body.estorix-vibe.is-home .ex-lead-pop__close.is-fluid-press {
  transform: scale(0.962) !important;
}

body.estorix-vibe.is-home .ex-mod.is-fluid-press,
body.estorix-vibe.is-home .ex-shop__card.is-fluid-press,
body.estorix-vibe.is-home .ex-market__card.is-fluid-press,
body.estorix-vibe.is-home .seo-usecase-card.is-fluid-press,
body.estorix-vibe.is-home .estorix-showcase__zoom.is-fluid-press {
  transform: scale(0.988) !important;
}

/* Klavye odağı — basış geri bildiriminin klavyedeki karşılığı */
body.estorix-vibe.is-home a:focus-visible,
body.estorix-vibe.is-home button:focus-visible,
body.estorix-vibe.is-home summary:focus-visible,
body.estorix-vibe.is-home input:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}

/* ==========================================================================
   2) MALZEME & DERİNLİK (§ Materials)
   -------------------------------------------------------------------------- */

/* 2a) Üst çubuk — içerik altından akar; sert çizgi yerine kenar geçişi */
body.estorix-vibe.is-home header.estorix-topbar .estorix-topbar__shell {
  position: relative;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(var(--fl-mat-blur)) saturate(var(--fl-mat-sat));
  -webkit-backdrop-filter: blur(var(--fl-mat-blur)) saturate(var(--fl-mat-sat));
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

body.estorix-vibe.is-home header.estorix-topbar.is-scrolled .estorix-topbar__shell {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Kenar geçişi (scroll edge effect): 1px çizgi değil, kısa bir kararma */
body.estorix-vibe.is-home header.estorix-topbar.is-scrolled .estorix-topbar__shell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.055), rgba(15, 23, 42, 0));
}

/* Saydam yüzeyde metin: düz gri değil, biraz daha ağır ve nefesli (vibrancy) */
body.estorix-vibe.is-home .epm-nav-link {
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* 2b) Lightbox — koyu malzeme + JS'in sürdüğü yüzey */
body.estorix-vibe.is-home .estorix-showcase-lightbox {
  background: rgba(6, 10, 20, 0.62) !important;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  will-change: opacity;
}

body.estorix-vibe.is-home .estorix-showcase-lightbox__figure {
  will-change: transform;
  touch-action: none;
  cursor: grab;
}

body.estorix-vibe.is-home .estorix-showcase-lightbox.is-fluid-dragging .estorix-showcase-lightbox__figure {
  cursor: grabbing;
}

/* Sürüklenen görsel tarayıcının kendi drag hayaletini üretmesin */
body.estorix-vibe.is-home .estorix-showcase-lightbox__img,
body.estorix-vibe.is-home .estorix-showcase__main-img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* JS devredeyken hazır keyframe'ler susar; hareketi yaylar yönetir */
html.fluid-on body.estorix-vibe.is-home .ex-lead-pop__panel,
html.fluid-on body.estorix-vibe.is-home .ex-lead-pop__backdrop {
  animation: none !important;
}

html.fluid-on body.estorix-vibe.is-home .ex-lead-pop__panel {
  will-change: transform, opacity;
}

body.estorix-vibe.is-home .ex-lead-pop__backdrop {
  background: rgba(9, 16, 30, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* 2c) Mobilde iletişim pop-up'ı alttan gelen bir "sayfa" (sheet) olur:
   çıktığı yerden geri gider, tutamağından aşağı atılabilir. */
body.estorix-vibe.is-home .ex-lead-pop__grabber {
  display: none;
}

@media (max-width: 640px) {
  body.estorix-vibe.is-home .ex-lead-pop {
    align-items: flex-end;
    padding: 0;
  }

  body.estorix-vibe.is-home .ex-lead-pop__panel {
    width: 100%;
    max-width: none;
    padding: 18px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -18px 60px rgba(9, 16, 30, 0.3);
    touch-action: none;
  }

  body.estorix-vibe.is-home .ex-lead-pop__panel input,
  body.estorix-vibe.is-home .ex-lead-pop__panel textarea {
    touch-action: auto;
  }

  body.estorix-vibe.is-home .ex-lead-pop__grabber {
    display: block;
    width: 38px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
  }

  body.estorix-vibe.is-home .ex-lead-pop__close {
    top: 14px;
  }
}

/* ==========================================================================
   3) TİPOGRAFİ — harf aralığı boyuta özeldir (§ Typography)
   Büyüdükçe sıkışır, küçüldükçe hafifçe açılır. Tek bir letter-spacing
   her boyutta yanlıştır.
   ========================================================================== */
body.estorix-vibe.is-home {
  font-optical-sizing: auto;
}

body.estorix-vibe.is-home .hero-title {
  letter-spacing: -0.038em;
  line-height: 1.04;
}

body.estorix-vibe.is-home .section-title {
  letter-spacing: -0.032em;
  line-height: 1.06;
}

body.estorix-vibe.is-home .ex-mod__title,
body.estorix-vibe.is-home .ex-shop__name,
body.estorix-vibe.is-home .estorix-showcase__info-title,
body.estorix-vibe.is-home .estorix-download__title,
body.estorix-vibe.is-home .seo-usecase-card h3,
body.estorix-vibe.is-home .ex-lead-pop__title {
  letter-spacing: -0.018em;
  line-height: 1.22;
}

body.estorix-vibe.is-home .hero-subtitle,
body.estorix-vibe.is-home .section-subtitle {
  letter-spacing: -0.004em;
}

/* Küçük metin: okunurluk için aralık hafif pozitif */
body.estorix-vibe.is-home .estorix-showcase__caption,
body.estorix-vibe.is-home .ex-market__note,
body.estorix-vibe.is-home .ex-shop__note,
body.estorix-vibe.is-home .ex-shop__price-note,
body.estorix-vibe.is-home .ex-modules__note,
body.estorix-vibe.is-home .estorix-ref-disclaimer,
body.estorix-vibe.is-home .ex-lead-pop__kvkk {
  letter-spacing: 0.008em;
  line-height: 1.55;
}

/* ==========================================================================
   4) FİZİK YÜZEYLERİ — parmakla sürüklenen alanlar
   ========================================================================== */
body.estorix-vibe.is-home .estorix-showcase__stage {
  touch-action: pan-y;
}

/* Katman yükseltmesi yalnız görünen panele: hareket yalnız orada olur,
   dört panelin tamamını sürekli katmanda tutmanın bedeli boşuna. */
body.estorix-vibe.is-home .estorix-showcase__panel.is-active {
  will-change: transform, opacity;
}

/* ==========================================================================
   5) ERİŞİLEBİLİRLİK — az hareket, az saydamlık, yüksek kontrast
   Az hareket "geri bildirim yok" demek değildir; vestibüler olmayan
   karşılığı verilir: yer değiştirme yerine solma.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Sınıf bilerek iki kez yazıldı: yukarıdaki basış kuralları
     `.btn.is-fluid-press` biçiminde iki sınıf taşıyor; tek sınıflı bir
     geçersiz kılma daha az belirgin kalır ve erişilebilirlik kuralı
     kaybederdi. Ölçek yerine sönük bir geri bildirim bırakılır. */
  body.estorix-vibe.is-home .is-fluid-press.is-fluid-press {
    transform: none !important;
    opacity: 0.82;
  }

  body.estorix-vibe.is-home .estorix-showcase-lightbox__figure,
  html.fluid-on body.estorix-vibe.is-home .ex-lead-pop__panel,
  body.estorix-vibe.is-home .estorix-showcase__panel {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  body.estorix-vibe.is-home .estorix-showcase-lightbox {
    transition: opacity 200ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.estorix-vibe.is-home header.estorix-topbar .estorix-topbar__shell,
  body.estorix-vibe.is-home header.estorix-topbar.is-scrolled .estorix-topbar__shell {
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }

  body.estorix-vibe.is-home .estorix-showcase-lightbox {
    background: rgba(6, 10, 20, 0.96) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.estorix-vibe.is-home .ex-lead-pop__backdrop {
    background: rgba(9, 16, 30, 0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.estorix-vibe.is-home header.estorix-topbar .estorix-topbar__shell {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.35) !important;
  }

  body.estorix-vibe.is-home .ex-mod,
  body.estorix-vibe.is-home .ex-shop__card,
  body.estorix-vibe.is-home .ex-market__card,
  body.estorix-vibe.is-home .seo-usecase-card,
  body.estorix-vibe.is-home .ex-lead-pop__panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.4) !important;
  }
}