/* ══════════════════════════════════════════════════════════════════════
   Adım 13.3 — Hero yeniden tasarımı v3 (İki paralel kayan şerit)
   Slogan ortada (ön plan) + arka planda iki sonsuz şerit:
     • ÜST şerit: sağdan sola
     • ALT şerit: soldan sağa
   Saf CSS transform animasyonu (GPU accelerated, reflow yok → akıcı 60 FPS).
   Her şerit 4 kartını 2 kez tekrarlar → translateX(-50%) noktasında dikişsiz
   loop. theme.css'e dokunulmadı; home.css'ten SONRA yüklenir (eski .hero
   kurallarını override eder). Yılan (snake-flow v2) tamamen kaldırıldı.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero kabı: tam ekran, ortalı ── */
.hero-redesign {
    min-height: 100vh;
    padding: 96px 0 64px;          /* sticky navbar'ın altında kalmasın */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* ── Arka plan katmanı: iki şeridin kabı ── */
.hero-showcase {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;          /* boş alan tıklamayı yutmasın; kartlar geri açar */
}

/* ── Tek şerit (yatay bant) ── */
.strip {
    position: absolute;
    left: 0;
    right: 0;
    height: 320px;
    overflow: hidden;
}

.strip-top    { top: 8%; }
.strip-bottom { bottom: 8%; }

/* ── Kayan ray: kartlar yan yana, içerik 2x (dikişsiz loop) ── */
.strip-track {
    display: flex;
    gap: 24px;
    width: max-content;
    height: 100%;
    will-change: transform;        /* yalnızca ray; kartlara değil */
}

/* ÜST: sağdan sola | ALT: soldan sağa */
.strip-top .strip-track {
    animation: scrollLeft 45s linear infinite;
}

.strip-bottom .strip-track {
    animation: scrollRight 45s linear infinite;
}

/* -50% = içeriğin yarısı (bir tam set); ikinci yarı birinciyle örtüşür */
@keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Tek yetenek kartı (3:4, Hollywood poster oranı) ── */
.snake-card {
    flex: 0 0 auto;
    width: 240px;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .5);
    background: var(--color-surface, #14101f);
    position: relative;
    pointer-events: auto;          /* hover için tıklanabilir */
    transition: transform .3s ease, box-shadow .3s ease;
}

.snake-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kart altı etiket — siyahtan şeffafa gradient overlay */
.snake-card .card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.75rem 1rem .9rem;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}

.snake-card .name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.2;
}

.snake-card .category {
    display: inline-block;
    margin-top: 3px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Hover: TÜM akış durur (iki şerit birden) ── */
.hero-showcase.paused .strip-track {
    animation-play-state: paused;
}

/* ── Hover: hover edilen kart büyür ── */
.snake-card.hovered {
    transform: scale(1.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    z-index: 100;
}

/* ── Ön plan katmanı: slogan + CTA ── */
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 600px;              /* dar kalsın → kartlar etrafından geçsin */
    pointer-events: none;          /* kartlar slogan kutusunun arkasından geçerken hover'ı engellemesin */
}

.hero-content a {
    pointer-events: auto;          /* butonlar tıklanabilir kalır */
}

/* Kartların arkasında slogan okunaklı kalsın diye yumuşak scrim */
.hero-content::before {
    content: "";
    position: absolute;
    inset: -14% -20%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(13, 10, 26, .9) 0%,
        rgba(13, 10, 26, .65) 45%,
        transparent 75%);
}

/* Slogan: orta boy, ortalı (Playfair theme.css'ten geliyor) */
.hero-redesign .hero-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.15;
    max-width: 18ch;
    margin: 0 auto 1.25rem;
}

.hero-redesign .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.hero-redesign .hero-cta {
    justify-content: center;
    margin-bottom: 0;
}

/* Telif + dürüstlük notu */
.hero-disclaimer {
    margin: 1.75rem 0 0;
    font-size: .75rem;
    letter-spacing: .3px;
    color: var(--color-text-muted);
    opacity: .5;
}

/* ── Responsive (tablet) — kart biraz küçülür ── */
@media (max-width: 991px) {
    .strip {
        height: 270px;
    }

    .snake-card {
        width: 200px;
        height: 270px;
    }
}

/* ── Mobile (≤768px): yalnızca ÜST şerit görünür, alt gizli.
   Üst şerit aynı transform animasyonuyla çalışır. ── */
@media (max-width: 768px) {
    .strip-bottom {
        display: none;
    }

    .strip-top {
        top: 5%;
        height: 200px;
    }

    .snake-card {
        width: 160px;
        height: 200px;
    }

    .hero-redesign .hero-title {
        font-size: 1.8rem;
        max-width: 100%;
    }

    .hero-content {
        max-width: 100%;
    }
}

/* ── Hareketi azalt tercihi: tüm şerit animasyonu kapalı (a11y) ── */
@media (prefers-reduced-motion: reduce) {
    .strip-track {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Giriş/kayıt başarı geri bildirimi (frontend-only)
   Hero'nun ortasında yeşil onay tiki + kısa yazı; JS bir kez açar,
   fade-in (0.3s) → ~1.8s bekle → fade-out (0.8s) → gizlenir.
   Yeşil, tema paletindeki başarı rengi (Dansçı #1D9E75) ile uyumlu.
   ════════════════════════════════════════════════════════════════════ */
.auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    opacity: 0;
    transform: translateY(10px) scale(.94);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;            /* geri bildirim; etkileşim yok */
}

/* JS fade-in tetikler */
.auth-success.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* JS fade-out tetikler — "yavaşça kaybolma" hissi (0.8s) */
.auth-success.is-hiding {
    opacity: 0;
    transform: translateY(-8px) scale(1.03);
    transition: opacity .8s ease, transform .8s ease;
}

/* Yeşil daire */
.auth-success-check {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1D9E75, #16B587);
    box-shadow: 0 14px 44px rgba(29, 158, 117, .45),
                0 0 0 10px rgba(29, 158, 117, .12);
}

/* Beyaz tik (SVG stroke) */
.auth-success-check svg {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tikin çizilerek belirmesi (görünürken bir kez) */
.auth-success-check svg path {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
}

.auth-success.is-shown .auth-success-check svg path {
    animation: authCheckDraw .42s .18s ease forwards;
}

@keyframes authCheckDraw {
    to { stroke-dashoffset: 0; }
}

/* Başarı yazısı — Playfair başlık fontu (theme.css) */
.auth-success-text {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.2;
    color: #fff;
}

/* Hareketi azalt: çizim/kayma yok, yalnızca yumuşak opaklık */
@media (prefers-reduced-motion: reduce) {
    .auth-success,
    .auth-success.is-hiding {
        transform: none;
        transition: opacity .25s linear;
    }

    .auth-success-check svg path {
        stroke-dashoffset: 0;
    }

    .auth-success.is-shown .auth-success-check svg path {
        animation: none;
    }
}