.fab {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Konteynerın yüksekliği ana butonun boyutu kadar — alt butonlar absolute */
    width: 60px;
    height: 60px;
}

@media (min-width: 576px) {
    .fab {
        left: 40px;
        bottom: 40px;
    }
}


/* ============ ANA BUTON — oval kare ============ */
.fab__main {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 18px; /* "Oval kare" — köşeleri yumuşatılmış kare */
    background: #d2d945;
    color: #153750;
    border: none;
    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(210, 217, 69, 0.4),
        0 3px 8px rgba(21, 55, 80, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.4s ease;

    /* HAREKETLİ SÜZÜLME ANİMASYONU (cards.css'tekinden daha aktif) */
    animation: fab-float 4s ease-in-out infinite;
    will-change: transform;
}

.fab__main:hover {
    background: #153750;
    color: #d2d945;
    box-shadow:
        0 12px 28px rgba(21, 55, 80, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.fab__main:focus-visible {
    outline: 3px solid #d2d945;
    outline-offset: 4px;
}

/* + ikonu — açıkken X'e döner */
.fab__main-icon {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Açık durumda + işareti 45° döner ve X olur, ayrıca buton tam yuvarlak olur */
.fab.is-open .fab__main {
    border-radius: 50%;
    animation-play-state: paused; /* Açıkken süzülme durur */
}

.fab.is-open .fab__main-icon {
    transform: rotate(135deg);
}


/* ============ SÜZÜLME ANİMASYONU (hareketli) ============ */
/* cards.css'tekinden daha geniş hareketler, daha kısa süre, rotate dahil */
@keyframes fab-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(5px, -8px) rotate(2deg); }
    40%      { transform: translate(-6px, -3px) rotate(-3deg); }
    60%      { transform: translate(4px, 6px) rotate(2deg); }
    80%      { transform: translate(-3px, 5px) rotate(-1deg); }
}


/* ============ ALT BUTONLAR (yuvarlak, fışkırır) ============ */
.fab__item {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.15);

    /* Default: kapalı — ana butonun arkasında, görünmez */
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
    pointer-events: none;

    /* Geri kapanma yumuşak olsun (cubic-bezier) */
    transition:
        transform 0.45s cubic-bezier(0.5, -0.5, 0.5, 1.5),
        opacity 0.3s ease,
        background 0.25s ease,
        box-shadow 0.3s ease;
}

.fab__item .fa {
    font-size: 22px;
    line-height: 1;
}

/* Renkler — her sosyal medya kendi rengi */
.fab__item--phone     { background: #153750; }
.fab__item--whatsapp  { background: #25d366; }
.fab__item--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* Hover — büyür ve parlaklık artar */
.fab__item:hover {
    transform: translate(-50%, var(--fab-y, 0)) scale(1.12);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.35),
        0 3px 8px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    text-decoration: none;
}

/* AÇIK DURUMDA — sırayla yukarı doğru fışkırır */
/* CSS custom property --fab-y ile hover'da konumu koruyoruz */

.fab.is-open .fab__item {
    opacity: 1;
    pointer-events: auto;
}

/* Stagger — her butonun gecikmesi farklı */
.fab.is-open .fab__item--phone {
    --fab-y: -76px;
    transform: translate(-50%, var(--fab-y)) scale(1);
    transition-delay: 0.05s;
}

.fab.is-open .fab__item--whatsapp {
    --fab-y: -136px;
    transform: translate(-50%, var(--fab-y)) scale(1);
    transition-delay: 0.12s;
}

.fab.is-open .fab__item--instagram {
    --fab-y: -196px;
    transform: translate(-50%, var(--fab-y)) scale(1);
    transition-delay: 0.19s;
}

/* Açıkken hover'da büyüme efektini bozma — y değerini koru */
.fab.is-open .fab__item--phone:hover     { transform: translate(-50%, -76px) scale(1.12); }
.fab.is-open .fab__item--whatsapp:hover  { transform: translate(-50%, -136px) scale(1.12); }
.fab.is-open .fab__item--instagram:hover { transform: translate(-50%, -196px) scale(1.12); }


/* ============ TOOLTIP (alt butonun yanında etiket) ============ */
/* Her alt butonun yanında küçük bir tooltip — opsiyonel, hover'da gösterir */
.fab__item::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 10, 10, 0.92);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fab.is-open .fab__item:hover::after {
    opacity: 1;
}


/* ============ MOBİL ============ */
@media (max-width: 575px) {
    .fab {
        left: 15px;
        bottom: 15px;
        width: 52px;
        height: 52px;
    }

    .fab__main {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .fab__main-icon { font-size: 24px; }

    .fab__item {
        width: 44px;
        height: 44px;
    }

    .fab__item .fa { font-size: 20px; }

    /* Mobilde alt butonların y mesafeleri biraz daha kısa */
    .fab.is-open .fab__item--phone {
        --fab-y: -64px;
        transform: translate(-50%, -64px) scale(1);
    }
    .fab.is-open .fab__item--whatsapp {
        --fab-y: -118px;
        transform: translate(-50%, -118px) scale(1);
    }
    .fab.is-open .fab__item--instagram {
        --fab-y: -172px;
        transform: translate(-50%, -172px) scale(1);
    }

    .fab.is-open .fab__item--phone:hover     { transform: translate(-50%, -64px) scale(1.12); }
    .fab.is-open .fab__item--whatsapp:hover  { transform: translate(-50%, -118px) scale(1.12); }
    .fab.is-open .fab__item--instagram:hover { transform: translate(-50%, -172px) scale(1.12); }
}


/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .fab__main {
        animation: none;
    }
    .fab__main-icon,
    .fab__item {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}