/* Kartların kapsayıcısı — flexbox dikey, ama kartlar margin ile farklı kayıyor */
.floating-cards {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    /* perspective: derinlik hissi için (3D float etkisini güçlendirir) */
    perspective: 1000px;
}

/* ============ TEK KART STİLİ ============ */
.floating-card {
    background: #153750;
    color: #ffffff;
    border-radius: 12px;
    padding: 32px 32px 28px;
    box-shadow:
        0 10px 30px rgba(21, 55, 80, 0.15),
        0 4px 12px rgba(21, 55, 80, 0.08);
    border-left: 4px solid #d2d945;
    position: relative;
    /* will-change: transform → tarayıcıya animation hint'i, GPU kullanımı */
    will-change: transform;
    /* Yumuşak hover geçişi */
    transition: box-shadow 0.3s ease, border-left-width 0.3s ease;
}

/* Kart üzerine geldiğinde animasyonu duraklat — kullanıcı buton tıklamak isterken kart kaymasın */
.floating-card:hover {
    animation-play-state: paused;
    box-shadow:
        0 18px 45px rgba(21, 55, 80, 0.25),
        0 6px 18px rgba(21, 55, 80, 0.12);
    border-left-width: 6px;
}

/* Dekoratif köşe aksanı — sağ üstte küçük marka rengi nokta */
.floating-card::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d2d945;
    opacity: 0.6;
}

/* Başlık */
.floating-card__title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 22px;
    letter-spacing: 0.01em;
    /* Marka rengi vurgu — başlık altına ince çizgi */
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(210, 217, 69, 0.18);
}

/* Buton wrapper (mevcut .button-jerry zaten siteden geliyor) */
.floating-card__action {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* "Süzülme" hissini güçlendirmek için kartın altında soft glow */
.floating-card::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    right: 10%;
    height: 12px;
    background: radial-gradient(ellipse at center,
        rgba(21, 55, 80, 0.15) 0%,
        rgba(21, 55, 80, 0) 70%);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}


/* ============ KART KONUMLARI — birbirinden farklı offset ============ */
/* Düz dikey liste hissi vermesin diye her kart farklı yöne kayık */

.floating-card--1 {
    /* Sola yakın — sağ tarafta bir miktar boşluk bırakır */
    margin-right: 60px;
    animation: float-card-1 7s ease-in-out infinite;
}

.floating-card--2 {
    /* Sağa kayık — solda boşluk */
    margin-left: 80px;
    animation: float-card-2 9s ease-in-out infinite 0.6s;
}

.floating-card--3 {
    /* Orta-sol pozisyon, hafif sağ marjı */
    margin-left: 30px;
    margin-right: 40px;
    animation: float-card-3 8s ease-in-out infinite 1.2s;
}


/* ============ FLOAT ANİMASYONLARI ============ */
/* Her kart için farklı patern + farklı süre → senkronize hareket etmesinler */

@keyframes float-card-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(4px, -6px) rotate(0.3deg); }
    50%      { transform: translate(-3px, 3px) rotate(-0.2deg); }
    75%      { transform: translate(3px, 5px) rotate(0.2deg); }
}

@keyframes float-card-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-5px, -4px) rotate(-0.3deg); }
    66%      { transform: translate(3px, 6px) rotate(0.25deg); }
}

@keyframes float-card-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(3px, 5px) rotate(0.2deg); }
    50%      { transform: translate(-5px, -3px) rotate(-0.3deg); }
    80%      { transform: translate(6px, 2px) rotate(0.15deg); }
}


/* ============ RESPONSIVE ============ */

/* Tablet ve altı: offset'leri sıfırla (dar ekranda yatay kayma istenmez) */
@media (max-width: 768px) {
    .floating-cards {
        gap: 20px;
    }

    .floating-card {
        padding: 26px 24px 22px;
    }

    .floating-card__title {
        font-size: 19px;
        margin-bottom: 18px;
    }

    /* Tüm offset'leri sıfırla — mobilde düz dizilsinler */
    .floating-card--1,
    .floating-card--2,
    .floating-card--3 {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Küçük mobil: padding daha az */
@media (max-width: 480px) {
    .floating-card {
        padding: 22px 20px 20px;
    }

    .floating-card__title {
        font-size: 17px;
    }
}

/* Reduced motion: animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
    .floating-card--1,
    .floating-card--2,
    .floating-card--3 {
        animation: none;
    }
}