/* ===================================================================
 * app-fx.css — IŞIK, DERİNLİK VE GEÇİŞ KATMANI (TÜM CİHAZLAR)
 * ===================================================================
 *
 * NEDEN AYRI DOSYA
 * ----------------
 * app-desktop.css sözleşme gereği yalnızca masaüstü GEOMETRİSİNİ (>=900px)
 * yönetir. Bu dosya cihazdan bağımsız "his" katmanıdır: ışık, derinlik,
 * giriş animasyonları ve dokunma geri bildirimi. Geometriye karışmaz.
 *
 * TASARIM İLKESİ — "IŞIK HER ZAMAN VAR, HAREKET TERCİHE GÖRE"
 * -----------------------------------------------------------
 * Bu katmanın ilk sürümünde her şey `prefers-reduced-motion: no-preference`
 * içine sarılmıştı. Sonuç: işletim sisteminde "hareketi azalt" açık olan
 * cihazlarda sayfa TAMAMEN sönük kalıyordu — ne aurora, ne kenar ışığı, ne
 * parlama. Ölçüldü: 33 efekt yerine 0.
 *
 * Doğrusu şu: "hareketi azalt" HAREKETİ azaltmalı, IŞIĞI değil. Bu yüzden
 *   • görünüş (aurora zemin, kenar halkaları, parlama, gradyanlar) hareket
 *     tercihinden BAĞIMSIZ olarak her zaman tanımlanır;
 *   • hareket ayrı bloklarda verilir: normalde tam hız, "azalt" tercihinde
 *     çok daha yavaş — ama yine de canlı.
 * Aynı ilke projede kayan yazı için de geçerlidir (booking-app.css: mobil
 * şerit azaltılmış harekette bile akmaya devam eder).
 *
 * KURALLAR
 * --------
 * 1. Yalnızca `transform`, `opacity`, `box-shadow`, `filter` ve maskelenmiş
 *    gradyan kullanılır — hiçbiri yerleşimi değiştirmez, "sabit çerçeve"
 *    güvencesi bozulmaz.
 * 2. Kaydırma animasyonları JS'siz, `animation-timeline: view()` ile yapılır
 *    ve `@supports` ile korunur: desteklemeyen tarayıcıda kural hiç
 *    uygulanmaz, içerik her zaman görünür kalır (asla görünmez takılmaz).
 * 3. Kayan yazının (marquee) animasyonuna ASLA dokunulmaz.
 * =================================================================== */

@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes fx-ring-spin { to { --fx-angle: 360deg; } }

@keyframes fx-aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate3d(2.5%, -2.5%, 0) scale(1.1); opacity: 1; }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.05); opacity: 0.85; }
}

@keyframes fx-sweep {
  0% { transform: translate3d(-130%, 0, 0) skewX(-18deg); opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  58%, 100% { transform: translate3d(250%, 0, 0) skewX(-18deg); opacity: 0; }
}

@keyframes fx-text-sweep {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

@keyframes fx-title-glow {
  0%, 100% { text-shadow: 0 0 18px rgba(242, 61, 134, 0.22); }
  50% { text-shadow: 0 0 34px rgba(255, 168, 200, 0.55), 0 0 60px rgba(242, 61, 134, 0.3); }
}

@keyframes fx-badge-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(242, 61, 134, 0.18); }
  50% { box-shadow: 0 0 28px rgba(242, 61, 134, 0.45); }
}

@keyframes fx-halo {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(242, 61, 134, 0.42); }
  70% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(242, 61, 134, 0); }
}

@keyframes fx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@keyframes fx-reveal {
  from { opacity: 0; transform: translate3d(0, 42px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes fx-reveal-soft {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ===================================================================
 * A) GÖRÜNÜŞ — hareket tercihinden BAĞIMSIZ, her zaman görünür
 * =================================================================== */

/* --- Canlı zemin (telefon/tablet) ----------------------------------
 * site-app.css `@media (max-width: 767px)` içinde gövdenin dekoratif
 * katmanlarını kapatıp arka planı düz #0c0910'a indiriyor; kartlar zeminle
 * aynı tonda kaldığı için sayfa sönük görünüyordu. Katman burada geri
 * açılır ve gül/leylak/şampanya bir "aurora" zemine dönüştürülür. */
@media (max-width: 899.98px) {
  body.tina-app::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: -25% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(38% 26% at 16% 10%, rgba(242, 61, 134, 0.34), transparent 70%),
      radial-gradient(34% 24% at 84% 22%, rgba(168, 85, 247, 0.26), transparent 70%),
      radial-gradient(42% 30% at 52% 86%, rgba(255, 196, 140, 0.2), transparent 72%) !important;
    filter: blur(6px) !important;
  }

  /* İçerik her zaman zeminin üstünde kalır. */
  body.tina-app > *:not(script):not(style) {
    position: relative;
    z-index: 1;
  }
}

/* --- Kart kenarlarında ışık halkası -------------------------------- */
body.tina-app .app-hero-copy,
body.tina-app .app-reviews-section,
body.tina-app .app-contact-section,
body.tina-app .review-card-inner,
body.tina-app .gallery-card,
body.tina-app #randevu .booking-app-body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.tina-app .app-hero-copy::after,
body.tina-app .app-reviews-section::after,
body.tina-app .app-contact-section::after,
body.tina-app .review-card-inner::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 4;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--fx-angle) at var(--fx-mx, 50%) var(--fx-my, 50%),
      transparent 0 44%,
      rgba(242, 61, 134, 0.75) 58%,
      rgba(255, 224, 190, 1) 68%,
      rgba(168, 85, 247, 0.75) 78%,
      transparent 92% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (max-width: 899.98px) {
  body.tina-app #randevu .booking-app-body::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: 4;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--fx-angle) at var(--fx-mx, 50%) var(--fx-my, 50%),
        transparent 0 44%,
        rgba(242, 61, 134, 0.8) 58%,
        rgba(255, 224, 190, 1) 68%,
        rgba(168, 85, 247, 0.8) 78%,
        transparent 92% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* --- Kartlarda cam parlaması --------------------------------------- */
body.tina-app .app-hero-copy::before,
body.tina-app .gallery-card::before,
body.tina-app .app-reviews-section::before,
body.tina-app .app-contact-section::before,
body.tina-app .review-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg,
      transparent,
      rgba(255, 255, 255, 0.07) 40%,
      rgba(255, 214, 175, 0.26) 52%,
      rgba(255, 255, 255, 0.07) 64%,
      transparent);
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

/* --- Başlıklarda gradyan --------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.tina-app .app-reviews-section h2,
  body.tina-app .app-contact-section h2 {
    background-image: linear-gradient(100deg,
        #fff6f9 0%, #fff6f9 26%,
        #ffd9b4 40%, #ff7fae 50%, #ffd9b4 60%,
        #fff6f9 74%, #fff6f9 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* --- Dokunma geri bildirimi (telefonda hover yok) -------------------- */
body.tina-app #randevu .category-button,
body.tina-app #randevu .service-row,
body.tina-app #randevu .slot-button,
body.tina-app #randevu .calendar-day-btn,
body.tina-app #randevu .booking-primary,
body.tina-app #randevu .booking-secondary,
body.tina-app .hero-btn-primary,
body.tina-app .hero-btn-secondary {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

body.tina-app #randevu .category-button:active,
body.tina-app #randevu .service-row:active,
body.tina-app #randevu .slot-button:active,
body.tina-app #randevu .calendar-day-btn:active,
body.tina-app #randevu .booking-primary:active,
body.tina-app #randevu .booking-secondary:active,
body.tina-app .hero-btn-primary:active,
body.tina-app .hero-btn-secondary:active {
  transform: scale(0.972);
}

@media (max-width: 899.98px) {
  body.tina-app #randevu .category-section.open {
    box-shadow: 0 0 0 1px rgba(242, 61, 134, 0.45), 0 12px 30px rgba(242, 61, 134, 0.16);
  }
}

/* ===================================================================
 * B) HAREKET — normal tercih (tam hız)
 * =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 899.98px) {
    body.tina-app::after {
      animation: fx-aurora 26s ease-in-out infinite alternate !important;
      will-change: transform, opacity !important;
    }

    body.tina-app #randevu .booking-app-body::before { animation: fx-ring-spin 9s linear infinite; }

    body.tina-app #randevu .booking-primary,
    body.tina-app .hero-btn-primary { animation: fx-halo 3.8s ease-out infinite; }
  }

  body.tina-app .app-hero-copy::after,
  body.tina-app .app-reviews-section::after,
  body.tina-app .app-contact-section::after { animation: fx-ring-spin 11s linear infinite; }

  body.tina-app .review-card-inner::after { animation: fx-ring-spin 15s linear infinite; opacity: 0.9; }

  body.tina-app .app-hero-copy::before,
  body.tina-app .gallery-card::before,
  body.tina-app .app-reviews-section::before,
  body.tina-app .app-contact-section::before,
  body.tina-app .review-card-inner::before {
    animation: fx-sweep 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  body.tina-app .gallery-card::before { animation-delay: 1.6s; }
  body.tina-app .app-reviews-section::before { animation-delay: 3.2s; }
  body.tina-app .app-contact-section::before { animation-delay: 4.8s; }
  body.tina-app .review-card-inner::before { animation-delay: 2.4s; animation-duration: 11s; }

  body.tina-app .app-reviews-section h2,
  body.tina-app .app-contact-section h2 {
    animation: fx-text-sweep 9s linear infinite, fx-title-glow 5s ease-in-out infinite;
  }

  body.tina-app .app-reviews-section .text-center > .inline-flex,
  body.tina-app .app-contact-section .text-center > .inline-flex {
    animation: fx-badge-glow 4.2s ease-in-out infinite;
  }

  /* Baglantilar artik menunun icinde; suzulme ve hale TETIKLEYICIDE. */
  body.tina-app .booking-fab-stack .fab-trigger {
    animation: fx-float 4.6s ease-in-out infinite, fx-halo 3.6s ease-out infinite;
  }

  /* Menu acikken tetikleyici yerinde durur: suzulen bir butona nisan almak
     zordur ve acilan panelle birlikte oynamasi huzursuz gorunur. */
  body.tina-app .booking-fab-stack[data-open="true"] .fab-trigger {
    animation: none;
  }

  /* Telefonda kategori açılınca hizmetler sırayla belirir. */
  @media (max-width: 899.98px) {
    body.tina-app #randevu .category-services:not(.hidden) .service-row {
      animation: fx-reveal-soft 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(1) { animation-delay: 0.02s; }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(2) { animation-delay: 0.06s; }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(3) { animation-delay: 0.1s; }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(4) { animation-delay: 0.14s; }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(5) { animation-delay: 0.18s; }
    body.tina-app #randevu .category-services:not(.hidden) .service-row:nth-child(n+6) { animation-delay: 0.22s; }
  }

  /* Kaydırma ile giriş — JS'siz. */
  @supports (animation-timeline: view()) {
    body.tina-app .app-hero-copy,
    body.tina-app .gallery-card,
    body.tina-app .app-reviews-section .text-center,
    body.tina-app .app-contact-section .text-center,
    body.tina-app .app-contact-section #map,
    body.tina-app .app-seo-section > div {
      animation: fx-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }

    body.tina-app #gallery-grid > div,
    body.tina-app #reviews-track .review-card,
    body.tina-app .app-contact-section > .max-w-7xl > .grid > .group {
      animation: fx-reveal-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }

    body.tina-app #gallery-grid > div:nth-child(2),
    body.tina-app .app-contact-section > .max-w-7xl > .grid > .group:nth-child(2) { animation-range: entry 4% cover 30%; }
    body.tina-app #gallery-grid > div:nth-child(3),
    body.tina-app .app-contact-section > .max-w-7xl > .grid > .group:nth-child(3) { animation-range: entry 8% cover 34%; }
    body.tina-app #gallery-grid > div:nth-child(4) { animation-range: entry 6% cover 32%; }
    body.tina-app #gallery-grid > div:nth-child(5) { animation-range: entry 10% cover 36%; }
    body.tina-app #gallery-grid > div:nth-child(6) { animation-range: entry 14% cover 40%; }
  }
}

/* ===================================================================
 * C) HAREKET — "hareketi azalt" tercihi: SÖNMEZ, YAVAŞLAR
 *
 * Işık ve derinlik A bölümünde zaten tanımlı olduğu için burada yalnızca
 * hız düşürülür. Sıçrama/kayma gibi yer değiştiren animasyonlar (giriş,
 * salınım, hale) kapatılır; ışık akışları çok yavaş sürer.
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Hizlar GORULEBILIR olmalidir. Onceki surumde halkalar 48-70s, parlamalar
   * 30s idi; 70 saniyede bir tur atan isik insan gozune DURUYOR gibi gorunur.
   * Asagidaki sureler hareketi fark ettirir ama yer degistirme icermez:
   * opaklik, renk ve gradyan konumu vestibuler rahatsizligi tetiklemez —
   * tetikleyen buyuk olcekli yer degistirme ve parallax'tir, onlar kapali. */
  body.tina-app::after { animation: fx-aurora 24s ease-in-out infinite alternate !important; }

  @media (max-width: 899.98px) {
    body.tina-app #randevu .booking-app-body::before { animation: fx-ring-spin 11s linear infinite; }
  }

  body.tina-app .app-hero-copy::after,
  body.tina-app .app-reviews-section::after,
  body.tina-app .app-contact-section::after { animation: fx-ring-spin 13s linear infinite; }

  body.tina-app .review-card-inner::after { animation: fx-ring-spin 16s linear infinite; opacity: 0.9; }

  body.tina-app .app-hero-copy::before,
  body.tina-app .gallery-card::before,
  body.tina-app .app-reviews-section::before,
  body.tina-app .app-contact-section::before,
  body.tina-app .review-card-inner::before {
    animation: fx-sweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  body.tina-app .gallery-card::before { animation-delay: 1.2s; }
  body.tina-app .app-reviews-section::before { animation-delay: 2.4s; }
  body.tina-app .app-contact-section::before { animation-delay: 3.6s; }

  body.tina-app .app-reviews-section h2,
  body.tina-app .app-contact-section h2 { animation: fx-text-sweep 8s linear infinite; }

  body.tina-app .app-reviews-section .text-center > .inline-flex,
  body.tina-app .app-contact-section .text-center > .inline-flex {
    animation: fx-badge-glow 4.5s ease-in-out infinite;
  }

  /* Yer degistiren surekli hareketler kapali kalir (suzulme, parallax).
   * Kaydirma girisleri JS tarafinda kucuk mesafeyle (6px) yapilir. */
  body.tina-app .booking-fab-stack .fab-trigger,
  body.tina-app #randevu .category-services:not(.hidden) .service-row {
    animation: none;
  }
}

/* ===================================================================
 * BOLUM D — JS DESTEKLI KAYDIRMA KOREOGRAFISI
 * ===================================================================
 * Bu bolumun tamami `html.fx-ready` altindadir. Sinifi yalnizca
 * tina-fx.js ekler; JS calismazsa (veya kutuphane yuklenmezse) hicbir
 * oge gizlenmez, sayfa tam gorunur kalir. Gizlemeyi asla JS'siz
 * duruma birakmiyoruz.
 * =================================================================== */

/* GIZLI DURUM `:not(.fx-in)` UZERINDE TANIMLANIR — bu kritiktir.
 *
 * Onceki surumde gizleme duz `.fx-reveal-item` uzerindeydi ve acilma
 * `.fx-in` ile geri aliniyordu. Ancak "hareketi azalt" gecersiz kilma
 * kurali (`html.fx-ready.fx-reduce ... .fx-reveal-item`) ile acilma kurali
 * (`html.fx-ready ... .fx-reveal-item.fx-in`) AYNI ozgullukte (0,4,2) idi;
 * dosyada sonra geldigi icin gecersiz kilma kazaniyordu. Sonuc: hareket
 * azaltma acik olan her cihazda tum sayfa KALICI olarak 2px bulanik ve
 * 6px kaymis kaliyordu — fotograflar bozuk gorunuyordu.
 *
 * Gizli durumu `:not(.fx-in)` uzerine koyunca acilmis durumda gecersiz
 * kilinacak hicbir bildirim kalmaz; ozgullik yarisi imkansiz hale gelir. */
html.fx-ready body.tina-app .fx-reveal-item {
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--fx-delay, 0ms),
    translate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--fx-delay, 0ms),
    filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--fx-delay, 0ms);
}

html.fx-ready body.tina-app .fx-reveal-item:not(.fx-in) {
  opacity: 0;
  translate: 0 20px;
  filter: blur(3px);
}

/* "Hareketi azalt": giris animasyonu KALIR ama yer degistirme 20px yerine
 * 6px olur ve bulaniklik azalir. */
html.fx-ready.fx-reduce body.tina-app .fx-reveal-item {
  transition-duration: 0.5s;
}

html.fx-ready.fx-reduce body.tina-app .fx-reveal-item:not(.fx-in) {
  translate: 0 6px;
  filter: blur(2px);
}

/* FOTOGRAFLAR ASLA BULANIKLASTIRILMAZ. Bir fotografa blur uygulamak onu
 * dusuk cozunurluklu veya bozuk gosterir; galeri tam da bu yuzden hatali
 * gorunuyordu. Ayrica telefon/WhatsApp gibi KRITIK bilgiler de net kalir:
 * kullanici tam o sirada numarayi okuyor olabilir. Bu ogeler yalnizca
 * opaklik ve kucuk bir kayma ile girer. */
html.fx-ready body.tina-app #gallery-grid > .fx-reveal-item:not(.fx-in),
html.fx-ready body.tina-app .app-contact-section .grid > .fx-reveal-item:not(.fx-in),
html.fx-ready body.tina-app .fx-reveal-item:not(.fx-in):has(img),
html.fx-ready body.tina-app .fx-reveal-item:not(.fx-in):has(a[href^="tel"]),
html.fx-ready body.tina-app .fx-reveal-item:not(.fx-in):has(a[href^="https://wa.me"]) {
  filter: none;
}

html.fx-ready body.tina-app #gallery-grid > .fx-reveal-item,
html.fx-ready body.tina-app .app-contact-section .grid > .fx-reveal-item {
  transition-duration: 0.55s;
}

/* --- Kaydirmaya bagli isik ----------------------------------------- */
/* --fx-progress: sayfa ilerlemesi (0..1) — aurora rengi kaydikca doner. */
html.fx-ready body.tina-app::after {
  filter:
    hue-rotate(calc(var(--fx-progress, 0) * 46deg))
    saturate(calc(1 + var(--fx-progress, 0) * 0.4));
}

/* --fx-peak: bolum ekranin ortasindayken 1, kenarlardayken 0.
 * Kenar halkasi ve cam parlamasi bolum gecerken belirginlesir. */
html.fx-ready body.tina-app .app-hero-copy::after,
html.fx-ready body.tina-app .app-reviews-section::after,
html.fx-ready body.tina-app .app-contact-section::after {
  opacity: calc(0.4 + var(--fx-peak, 0.6) * 0.6);
}

html.fx-ready body.tina-app .app-reviews-section,
html.fx-ready body.tina-app .app-contact-section,
html.fx-ready body.tina-app .app-seo-section {
  --fx-lift: calc(var(--fx-peak, 0) * 1);
  box-shadow: 0 0 calc(var(--fx-lift) * 60px) rgba(242, 61, 134, calc(var(--fx-lift) * 0.16));
}

/* --- Imlec isigi ---------------------------------------------------- */
/* Konik halkanin MERKEZI --fx-mx/--fx-my ile imleci takip eder; bu yuzden
 * ayri bir katman/pseudo eklemeye gerek yoktur (hepsi zaten dolu). */
html.fx-ready body.tina-app .fx-spot {
  transition: box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.fx-ready body.tina-app .fx-spot:hover {
    box-shadow:
      0 0 0 1px rgba(255, 224, 190, 0.16),
      0 12px 46px -12px rgba(242, 61, 134, 0.5);
  }
}