/* HERO backgrounds (fade + zoom) */
@keyframes zoomInLoop {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-color: #0b1220; /* görsel yüklenmezse boş görünmesin */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

    .hero-bg.active {
        opacity: 1;
        animation: zoomInLoop 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }

@media (prefers-reduced-motion: reduce) {
    .hero-bg {
        transition: none;
    }

        .hero-bg.active {
            animation: none;
            transform: none;
        }
}

.hero-bg.bg-1 {
    background-image: url('/assets/images/tutun-tarlasi.jpg');
}

.hero-bg.bg-2 {
    background-image: url('/assets/images/tutun-yapraklari.jpg');
}

.hero-bg.bg-3 {
    background-image: url('/assets/images/sari-tutun-yapragi.jpg');
}




/* Reveal on scroll (general) */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Hide horizontal scrollbar (for sliders) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Timeline (alternating S-layout + premium spring entrance + progress line) */
.tl-wrap {
    position: relative;
}

.tl-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, rgba(0,53,121,.20) 0%, rgba(15,23,42,.10) 42%, rgba(15,23,42,.06) 100%);
    border-radius: 999px;
}

.tl-center-fill {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    transform: translateX(-1px);
    height: 0%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0,53,121,.65) 0%, rgba(0,53,121,.18) 100%);
    box-shadow: 0 18px 55px rgba(0,53,121,.22);
    transition: height 760ms cubic-bezier(.16,1,.3,1);
    will-change: height;
}

.tl-item2 {
    position: relative;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity 520ms cubic-bezier(0.22,1,0.36,1);
    will-change: transform, opacity;
}

    .tl-item2.is-in {
        opacity: 1;
    }

/* Initial offsets (actual spring handled by keyframes) */
.tl-left {
    transform: translateX(-44px) translateY(18px) scale(.985);
}

.tl-right {
    transform: translateX(44px) translateY(18px) scale(.985);
}

/* Premium spring (back-ease) entrance */
@keyframes tlEnterLeft {
    0% {
        opacity: 0;
        transform: translateX(-56px) translateY(22px) scale(.985);
    }

    62% {
        opacity: 1;
        transform: translateX(10px) translateY(0px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes tlEnterRight {
    0% {
        opacity: 0;
        transform: translateX(56px) translateY(22px) scale(.985);
    }

    62% {
        opacity: 1;
        transform: translateX(-10px) translateY(0px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

.tl-item2.is-in.tl-left {
    animation: tlEnterLeft 860ms cubic-bezier(.16, 1, .3, 1) both;
}

.tl-item2.is-in.tl-right {
    animation: tlEnterRight 860ms cubic-bezier(.16, 1, .3, 1) both;
}

.tl-card2 {
    position: relative;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 60px rgba(2,6,23,.06);
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1), border-color 320ms cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
}

    .tl-card2::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 320ms cubic-bezier(0.22,1,0.36,1);
        background: radial-gradient(780px 160px at 18% 0%, rgba(255,255,255,.75), transparent 60%);
        mix-blend-mode: overlay;
    }

    .tl-card2:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 86px rgba(2,6,23,.10);
        border-color: rgba(0,53,121,.22);
    }

        .tl-card2:hover::after {
            opacity: .55;
        }

.tl-dot2 {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 14px 44px rgba(2,6,23,.10);
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1), background-color 260ms cubic-bezier(0.22,1,0.36,1), border-color 260ms cubic-bezier(0.22,1,0.36,1);
    position: relative;
}

    .tl-dot2::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 999px;
        opacity: 0;
        transform: scale(.92);
        transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1);
        background: radial-gradient(circle at 50% 50%, rgba(0,53,121,.28), transparent 62%);
        filter: blur(2px);
        pointer-events: none;
    }

.tl-item2:hover .tl-dot2 {
    transform: scale(1.06);
    box-shadow: 0 18px 55px rgba(0,53,121,.18);
}

.tl-item2.is-active .tl-dot2 {
    background: #003579;
    border-color: rgba(0,53,121,.18);
    box-shadow: 0 18px 55px rgba(0,53,121,.28);
}

    .tl-item2.is-active .tl-dot2::before {
        opacity: 1;
        transform: scale(1);
    }

.tl-item2.is-active .tl-num2 {
    color: #fff;
}

.tl-bridge {
    height: 2px;
    background: rgba(15,23,42,.10);
    border-radius: 999px;
}

.tl-item2.is-active .tl-bridge {
    background: linear-gradient(90deg, rgba(0,53,121,.42), rgba(0,53,121,.10));
}

/* MV icon micro-interactions */
.mv-icon {
    transition: transform 420ms cubic-bezier(0.22,1,0.36,1), filter 420ms cubic-bezier(0.22,1,0.36,1);
}

.mv-card:hover .mv-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.03);
    filter: drop-shadow(0 18px 35px rgba(0,53,121,.22));
}

.mv-card-dark:hover .mv-icon {
    transform: translateY(-4px) rotate(6deg) scale(1.03);
    filter: drop-shadow(0 18px 35px rgba(56,189,248,.18));
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tl-item2 {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .tl-left, .tl-right {
        transform: none;
    }

    .tl-card2, .tl-dot2 {
        transition: none;
    }

        .tl-card2:hover {
            transform: none;
        }

        .tl-card2::after, .tl-dot2::before {
            transition: none;
        }

    .tl-center-fill {
        transition: none;
        height: 100%;
    }

    .mv-icon {
        transition: none !important;
    }

    .mv-card:hover .mv-icon, .mv-card-dark:hover .mv-icon {
        transform: none;
        filter: none;
    }
}