/* =========================================================
   Can Hoca — Motion katmanı
   Bkz. CLAUDE.md → "Animasyon & Motion Denetimi (2026-08-23)"

   NOT: Bu dosya denetim öncesinde hiçbir sayfaya <link>lenmemişti,
   yani içindeki WhatsApp sinyal animasyonu hiç çalışmıyordu.
   Artık 4 sayfada da yükleniyor.
   ========================================================= */

:root {
    /* #12 — motion tokenları: tek kaynak. GSAP tarafındaki karşılıkları main.js'te. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    /* giriş/çıkış — güçlü ease-out */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    /* ekran içi hareket */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    /* iOS benzeri drawer eğrisi */

    --dur-press: 160ms;
    --dur-hover: 200ms;
    --dur-popover: 250ms;
    --dur-drawer: 350ms;
}

::selection {
    background: #e6a800;
    color: white;
}

/* ---------------------------------------------------------
   #7 — WhatsApp FAB sonar halkaları
   Eskiden `infinite` idi: oturum boyunca kesintisiz hareket.
   Artık patlama (burst) halinde — main.js `.wa-pulse` ekleyip
   3 tur sonra kaldırıyor, sekme gizliyken hiç oynatmıyor.
   --------------------------------------------------------- */
@keyframes wa-ripple {
    0% {
        transform: scale(1);
        opacity: 0.45;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.wa-fab .wa-ring-1,
.wa-fab .wa-ring-2 {
    opacity: 0;
}

.wa-fab.wa-pulse .wa-ring-1 {
    animation: wa-ripple 2.2s var(--ease-out) 3;
}

.wa-fab.wa-pulse .wa-ring-2 {
    animation: wa-ripple 2.2s var(--ease-out) 0.7s 3;
}

/* ---------------------------------------------------------
   #8 — WhatsApp popup
   Eski kod `animation: slideUp 0.4s ease` diyordu ama o keyframe
   hiçbir yerde tanımlı değildi; popup sertçe beliriyordu.
   display:none transition edilemediği için görünürlük `visibility`
   ile yönetiliyor, hareket transform+opacity üzerinden.
   Kart tetikleyicisinden (sağ alt FAB) doğuyor → transform-origin.
   --------------------------------------------------------- */
#wa-popup .wa-popup-card {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 70;
    max-width: 280px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    font-family: 'Lexend', sans-serif;

    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity var(--dur-popover) var(--ease-out),
        transform var(--dur-popover) var(--ease-out),
        visibility 0s linear var(--dur-popover);
}

#wa-popup.is-open .wa-popup-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

#wa-popup .wa-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    transition: color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}

#wa-popup .wa-popup-close:active {
    transform: scale(0.9);
}

#wa-popup .wa-popup-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 900;
    color: #181112;
}

#wa-popup .wa-popup-text {
    margin: 0 0 14px;
    font-size: 12px;
    color: #886368;
}

#wa-popup .wa-popup-cta {
    display: block;
    padding: 10px 16px;
    border-radius: 9999px;
    background: #25D366;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transition: transform var(--dur-press) var(--ease-out);
}

#wa-popup .wa-popup-cta:active {
    transform: scale(0.97);
}

/* ---------------------------------------------------------
   #9 — Dokunmatik cihazda takılı kalan hover
   Dokunmatikte ilk dokunuş :hover tetikliyor ve zoom başka yere
   dokunulana kadar takılı kalıyordu. :active hariç tutuluyor ki
   basma geri bildirimi (active:scale-95) dokunmatikte de çalışsın.
   --------------------------------------------------------- */
@media (hover: none),
(pointer: coarse) {

    .hover\:scale-110:hover:not(:active),
    .hover\:scale-105:hover:not(:active),
    .hover\:-translate-y-2:hover:not(:active),
    .group:hover .group-hover\:scale-110 {
        transform: none !important;
    }

    .gallery-item:hover img,
    .gallery-item:hover video {
        transform: none !important;
    }
}

/* ---------------------------------------------------------
   #6 / #17 — Hareket azaltma tercihi
   Kural: daha az ve daha yumuşak, sıfır değil. Konum değiştiren
   hareket kalkar; opacity ve renk geçişleri anlaşılırlık için kalır.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html,
    body {
        scroll-behavior: auto !important;
    }

    .wa-fab.wa-pulse .wa-ring-1,
    .wa-fab.wa-pulse .wa-ring-2 {
        animation: none;
    }

    #wa-popup .wa-popup-card {
        transform: none;
        transition:
            opacity 150ms linear,
            visibility 0s linear 150ms;
    }

    #wa-popup.is-open .wa-popup-card {
        transform: none;
    }

    .hover\:scale-110:hover,
    .hover\:scale-105:hover,
    .hover\:-translate-y-2:hover,
    .group:hover .group-hover\:scale-110,
    .gallery-item:hover img,
    .gallery-item:hover video {
        transform: none !important;
    }

    /* Dekoratif keyframe animasyonları sussun — transition'lara dokunmuyoruz */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}