/* =====================================================================
   LikedWin — Cinematic Footer (beyaz zemin)
   React/GSAP referans bileşeninin vanilla CSS/JS uyarlaması.
   Efektler: aurora nefes • grid • dev arka plan yazısı (parallax) •
   diyagonal marquee • metalik başlık • cam pill'ler • manyetik butonlar •
   kalp atışı • scroll-reveal geçiş • yukarı çık.
   ===================================================================== */

.site-footer, .footer-hero {
    color: var(--text);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Footer artık NORMAL AKIŞTA — curtain reveal geçiş animasyonu kaldırıldı */
.page-shell { background: #fff; }

/* ===== 1) CTA HERO — koyu yuvarlak kart ===== */
.footer-hero {
    padding: clamp(28px, 4vw, 60px) 20px clamp(18px, 3vw, 36px);
    background: #fff;
}
.footer-hero__card {
    --pad: clamp(22px, 3.2vw, 48px);
    position: relative; overflow: hidden; isolation: isolate;
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr; align-items: center;
    gap: clamp(18px, 2.6vw, 40px);
    padding: var(--pad);
    border-radius: clamp(22px, 2.6vw, 34px);
    background: #05052a;
    color: #fff;
}
.footer-hero__glow {
    position: absolute; z-index: 0; pointer-events: none;
    right: 3%; top: 50%; transform: translateY(-50%);
    width: 64%; height: 135%;
    background: radial-gradient(closest-side at 60% 50%, rgba(196, 74, 236, .5), rgba(132, 46, 210, .22) 46%, transparent 72%);
    filter: blur(46px);
    animation: footer-glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes footer-glow-breathe { from { opacity: .6; } to { opacity: 1; } }
.footer-hero__content { position: relative; z-index: 1; }

/* ===== 2) LİNK GÖVDESİ (normal akış) ===== */
.site-footer {
    position: relative;
    background: #fff;
}

/* ---------- Arka plan katmanları ---------- */
.footer-aurora {
    position: absolute; left: 50%; top: 42%;
    width: min(1000px, 92vw); height: 66vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
        rgba(235, 12, 206, .55) 0%,
        rgba(242, 41, 91, .20) 45%,
        transparent 72%);
    filter: blur(72px);
    border-radius: 50%;
    pointer-events: none; z-index: 0;
    animation: footer-breathe 8s ease-in-out infinite alternate;
}
@keyframes footer-breathe {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: .65; }
    100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.footer-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-size: 56px 56px;
    background-image:
        linear-gradient(to right,  rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.footer-giant {
    position: absolute; left: 50%; bottom: -2vh;
    transform: translateX(-50%);
    font-size: clamp(70px, 17vw, 260px);
    line-height: .74; font-weight: 900; letter-spacing: -.05em;
    white-space: nowrap; z-index: 0; pointer-events: none; user-select: none;
    color: transparent;
    -webkit-text-stroke: 1px rgba(32, 30, 31, .06);
    background: linear-gradient(180deg, rgba(32, 30, 31, .09) 0%, transparent 62%);
    -webkit-background-clip: text; background-clip: text;
    will-change: transform;
}

/* ---------- Diyagonal Marquee ---------- */
.footer-marquee {
    position: relative; z-index: 1; overflow: hidden;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .7);
    transform: rotate(-2deg) scale(1.06);
    box-shadow: 0 22px 45px -22px rgba(16, 24, 40, .16);
}
.footer-marquee__track { display: flex; width: max-content; animation: footer-marquee 40s linear infinite; }
.footer-marquee__group {
    display: flex; align-items: center; gap: 46px; padding: 0 23px;
    font-size: 13px; font-weight: 700; letter-spacing: .26em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.footer-marquee__group .sep { color: var(--brand); opacity: .55; }
@keyframes footer-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- İçerik kabı ---------- */
.footer-inner {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
    padding: 72px 20px 0;
}

/* ---------- Hero içerik (sol) ---------- */
.footer-stars { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.footer-stars__row { display: inline-flex; gap: 2px; color: #fbbf24; font-size: 13px; filter: drop-shadow(0 0 8px rgba(251, 191, 36, .4)); }
.footer-rating { font-size: 12px; color: #fff; }
.footer-rating b { font-weight: 800; }
.footer-rating span { color: rgba(226, 214, 247, .6); font-weight: 500; }

.footer-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(20px, 2vw, 29px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
    margin: 0 0 12px; max-width: 20ch; color: #fff;
}
.footer-tagline { color: rgba(226, 214, 247, .7); font-size: clamp(12.5px, .95vw, 14px); line-height: 1.62; margin: 0 0 20px; max-width: 500px; }

/* CTA kartı — beyaz buton + "veya Yardım Alın →" */
.footer-cta-card {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px; border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.footer-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px; border-radius: 10px;
    background: #fff; color: #0a0a2e;
    font-weight: 800; font-size: 13.5px; text-decoration: none; letter-spacing: -.01em;
    box-shadow: 0 10px 26px -12px rgba(255, 255, 255, .3);
    transition: transform var(--ease), box-shadow var(--ease);
}
.footer-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 255, 255, .45); }
.footer-cta-or { font-size: 12.5px; color: rgba(255, 255, 255, .5); font-weight: 600; }
.footer-cta-help { color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; opacity: .95; transition: opacity .2s; }
.footer-cta-help:hover { opacity: 1; }
.footer-cta-help span { display: inline-block; transition: transform .25s; }
.footer-cta-help:hover span { transform: translateX(4px); }

/* ---------- Hero medya (masaüstü: video · mobil: görsel) ---------- */
/* DİKKAT: burada z-index KULLANMA — stacking context yaratır ve videonun
   mix-blend-mode'u kartın zeminiyle karışamaz (kare geri gelir). */
.footer-hero__media { position: relative; display: grid; place-items: center; }
.footer-hero__video {
    width: min(300px, 100%); height: auto;
    /* Videodaki koyu kare zeminleri yok etmek için: önce kontrastla koyu tonları
       kart renginin (#05052a) altına ez, sonra lighten ile karta karıştır.
       Sonuç: kareler kaybolur, açık memoji görünür kalır. */
    filter: contrast(1.35);
    mix-blend-mode: lighten;
}
.footer-hero__photo { display: none; }

/* Mobil hero: tek sütun, içerik ortalı, altta tam-en görsel */
@media (max-width: 860px) {
    .footer-hero__card { grid-template-columns: 1fr; text-align: center; padding-bottom: 0; }
    .footer-hero__glow { right: 50%; top: 42%; transform: translate(50%, -50%); width: 92%; }
    .footer-stars, .footer-cta-card { justify-content: center; }
    .footer-cta-card { flex-direction: column; gap: 12px; width: 100%; }
    .footer-cta-btn { width: 100%; }
    .footer-title, .footer-tagline { margin-left: auto; margin-right: auto; }
    .footer-hero__video { display: none; }
    .footer-hero__photo {
        display: block; max-width: none;
        width: calc(100% + 2 * var(--pad));
        margin: 26px calc(-1 * var(--pad)) 0;
    }
}

/* ---------- Cam Pill ---------- */
.f-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px;
    font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none;
    background: linear-gradient(145deg, rgba(32, 30, 31, .035) 0%, rgba(32, 30, 31, .012) 100%);
    border: 1px solid rgba(32, 30, 31, .08);
    box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .18), inset 0 1px 1px rgba(255, 255, 255, .7);
    transition: background .4s cubic-bezier(.16, 1, .3, 1), border-color .4s, box-shadow .4s, color .4s;
    will-change: transform;
}
.f-pill:hover {
    background: linear-gradient(145deg, rgba(32, 30, 31, .07) 0%, rgba(32, 30, 31, .02) 100%);
    border-color: rgba(32, 30, 31, .2);
    box-shadow: 0 22px 44px -14px rgba(16, 24, 40, .22), inset 0 1px 1px rgba(255, 255, 255, .9);
    color: var(--ink);
}
.f-pill svg { width: 20px; height: 20px; }
/* Birincil pill (marka mavisi) */
.f-pill--primary {
    background: var(--brand); border-color: transparent; color: #fff;
    box-shadow: 0 14px 30px -10px rgba(37, 68, 216, .5);
}
.f-pill--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 20px 40px -10px rgba(37, 68, 216, .55); }

/* ---------- Link sütunları ---------- */
.footer-cols {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px;
    padding: 8px 0 56px; margin-top: 8px; padding-top: 56px;
}
.footer-col h3 {
    font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); margin: 0 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
    color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .2s ease, transform .2s ease;
}
.footer-col a:hover { color: var(--brand); transform: translateX(3px); }
.footer-col a .ico { width: 15px; text-align: center; color: var(--muted-2); transition: color .2s; }
.footer-col a:hover .ico { color: var(--brand); }

/* ---------- Ödeme yöntemleri ---------- */
.footer-pay {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    padding: 30px 0; border-top: 1px solid var(--line);
}
.footer-pay span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.footer-pay img { height: 30px; width: auto; opacity: .85; filter: saturate(.9); }

/* ---------- Alt bar ---------- */
.footer-bottom {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
    padding: 24px 20px 30px;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.footer-copy { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; order: 2; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; order: 1; }
.footer-legal a { font-size: 12.5px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--brand); }

.footer-made {
    display: inline-flex; align-items: center; gap: 7px; order: 3;
    padding: 10px 16px; border-radius: 999px;
    background: linear-gradient(145deg, rgba(32, 30, 31, .035), rgba(32, 30, 31, .012));
    border: 1px solid rgba(32, 30, 31, .08);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.footer-made .heart { color: #ef4444; font-size: 14px; animation: footer-heartbeat 2s cubic-bezier(.25, 1, .5, 1) infinite; }
.footer-made b { color: var(--ink); font-weight: 900; letter-spacing: 0; text-transform: none; }
@keyframes footer-heartbeat {
    0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgba(239, 68, 68, .5)); }
    15%, 45% { transform: scale(1.22); filter: drop-shadow(0 0 9px rgba(239, 68, 68, .8)); }
    30%      { transform: scale(1); }
}

/* Yukarı çık */
.footer-top {
    order: 4; width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, rgba(32, 30, 31, .035), rgba(32, 30, 31, .012));
    border: 1px solid rgba(32, 30, 31, .1); color: var(--muted); cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .2);
    transition: color .3s, border-color .3s, background .3s;
    will-change: transform;
}
.footer-top:hover { color: var(--ink); border-color: rgba(32, 30, 31, .25); }
.footer-top svg { width: 20px; height: 20px; transition: transform .3s ease; }
.footer-top:hover svg { transform: translateY(-3px); }

/* ---------- Geçiş animasyonu kaldırıldı — içerik doğrudan görünür ---------- */
.footer-reveal { opacity: 1; transform: none; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
    .footer-inner { padding-top: 56px; }
    .footer-marquee__group { gap: 34px; letter-spacing: .2em; font-size: 12px; }
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-legal { justify-content: center; }
    .footer-copy { order: 3; width: 100%; }
    .footer-made { order: 2; }
    .footer-top { order: 1; }
}
@media (max-width: 480px) {
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .footer-cta__pills .f-pill { padding: 14px 22px; font-size: 14px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .footer-aurora, .footer-marquee__track, .footer-made .heart, .footer-online .dot { animation: none !important; }
    .footer-reveal { opacity: 1; transform: none; transition: none; }
}