/* =============================================================================
   Hizli Iletisim Banti - mobil sticky CTA (2026-05-22, mig 117)
   =============================================================================
   3 slot dock: [Sol CTA] [Orta: WhatsApp bubble taşan] [Sag: Bizi Arayin]

   Konum: Mevcut mobile-bottom-bar'in (bottom:0, h~60px) UZERINDE,
          bottom: 60px civarinda. Bubble bantin ust kenarindan icerige
          dogru tasar (gorsel hierarchy).

   Sadece mobil (<=767.98px) render edilir.

   z-index: 1109 - mobile-bottom-bar (1110) ALTINDA olsun ki kategori
   bottom-sheet acildiginda ust katman onu kapatsin. Sepet drawer (1130)
   ve modal (1140+) bantin ustune cikar - DOGRU davranis.
============================================================================= */

.hi-bant {
    display: none; /* default hidden; mobile media query acar */
    position: fixed;
    left: 0;
    right: 0;
    /* Nav-bar yuksekligi = padding (6+6) + icerik (~35) = ~48px + safe-area.
       Bant nav-bar'in tam ustunde durmali ki gomulmesin. Erdem son
       ayarinda "5px daha bosluk" istedi -> 60 -> 65. */
    bottom: calc(65px + env(safe-area-inset-bottom));
    z-index: 1109;
    padding: 0 12px;
    pointer-events: none; /* sadece icindeki linkler tiklanabilir */
}

.hi-bant__inner {
    position: relative;
    /* Erdem: daha profesyonel gradient. Stripe/Linear/Apple Wallet stilinde
       3-stop diagonal (135deg): slate-800 (sicak ust-sol) -> slate-900
       (koyu orta) -> slate-950 (siyaha yakin alt-sag). Ust kenarda 1px
       beyaz "inset highlight" = cam/celik hissi. Drop shadow guclendirildi. */
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 55%, #030712 100%);
    border-radius: 999px;
    padding: 8px 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Erdem: 3 yazi (Hedef Belirle / WhatsApp / Bizi Arayin) yatayda
       birbiriyle hizali olsun. align-items: end ile hepsi grid hucresinin
       alt kenarina yapisir, padding-bottom esit -> label baseline ayni. */
    align-items: end;
    gap: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),  /* premium ust isik */
        0 14px 36px rgba(0, 0, 0, 0.4),           /* derin gölge */
        0 4px 12px rgba(15, 23, 42, 0.22);
    pointer-events: auto;
    color: #fff;
    /* bantın üst kenarından bubble tasması icin extra ust ic bosluk */
    margin-top: 24px;
}

/* Sol & sag CTA item'lari ----------------------------------------------- */
.hi-bant__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;    /* label en altta; align-items:end inner ile esles */
    gap: 6px;                     /* Erdem: ikon ile baslik arasinda 6px (3+3 daha) */
    text-decoration: none;
    color: #fff;                  /* Erdem: tum yazi/ikon beyaz */
    font-size: 10px;              /* Erdem: daha kucuk font */
    font-weight: 600;
    line-height: 1.1;
    padding: 4px 2px 6px;         /* alt 6px - WA ile esitle (label baseline align) */
    text-align: center;
    transition: color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.hi-bant__item:hover,
.hi-bant__item:active {
    color: #fff;
    transform: translateY(-1px);
}
.hi-bant__item .bi {
    font-size: 16px;              /* Erdem: ikon kucuk */
    line-height: 1;
    color: #fff;                  /* Erdem: tum ikonlar beyaz */
}
/* Eski renk override'lari kaldirildi - tum item'larda tek beyaz palet. */

.hi-bant__item--bos {
    /* hem grid hizalamasi korunsun, hem icerik yok - placeholder */
    visibility: hidden;
}

/* Orta WhatsApp ---------------------------------------------------------- */
.hi-bant__wa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: #fff;
    /* bubble yukari tasacak diye flexbox alt hizalama yerine bubble'i
       absolute konumlandiriyoruz; label normal akista. Erdem son ayar:
       "WhatsApp ikonu ve yazisi asagiya gelecek" -> padding-top 24->32
       (label asagiya) + bubble top -32->-22 (bubble inner icine daha
       cok girer = visual olarak asagi). padding-bottom: 6 = sol/sag
       ile label baseline aynidir (Erdem: hizali olsun). */
    padding: 32px 0 6px;
    min-width: 78px;
    -webkit-tap-highlight-color: transparent;
}

.hi-bant__wa-bubble {
    position: absolute;
    /* Erdem: sembol asagiya gelsin -> -32px -> -22px. Bubble inner
       icine daha cok giriyor (10px), padding-top: 32 ile label 6px
       altta kaldigi icin cakisma yok. */
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 4px rgba(37, 211, 102, 0.18),  /* yumusak halo */
        0 6px 16px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: hi-wa-pulse 2.4s ease-in-out infinite;
}
.hi-bant__wa:hover .hi-bant__wa-bubble,
.hi-bant__wa:active .hi-bant__wa-bubble {
    transform: translateX(-50%) scale(1.06);
    box-shadow:
        0 0 0 6px rgba(37, 211, 102, 0.22),
        0 8px 20px rgba(37, 211, 102, 0.55);
}
.hi-bant__wa-bubble .bi {
    color: #fff;
    font-size: 22px;              /* Erdem: kucuk WhatsApp ikonu */
    line-height: 1;
}

.hi-bant__wa-nokta {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: hi-wa-nokta-pulse 1.6s ease-in-out infinite;
}

.hi-bant__wa-label {
    font-size: 10px;              /* Erdem: kucuk font */
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.2px;
    line-height: 1.1;             /* sol/sag .hi-bant__item ile esit -> baseline align */
}

/* Pulse animasyonu (yesil halo) - 2.4s tek dongu, sakin tempolu */
@keyframes hi-wa-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18), 0 8px 20px rgba(37, 211, 102, 0.45); }
    50%      { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.08), 0 10px 26px rgba(37, 211, 102, 0.55); }
}

/* Kirmizi nokta pulse - daha sik (1.6s), dikkat ceken */
@keyframes hi-wa-nokta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ============================================================================
   MOBIL GORUNURLUK + body padding offset
   ============================================================================ */
@media (max-width: 767.98px) {
    .hi-bant {
        display: block;
    }
    /* Bant bottom:65 + inner ~66px (gap+padding artti) + bubble taşması ~22 = ~153
       + nefes. 165px guvenli toplam. */
    body {
        padding-bottom: calc(165px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================================
   GIZLEME: bazi ozel sayfalarda istemiyoruz
   - Sepet drawer ACIK iken: drawer overlay altinda kalsin, gorunmesin
     Drawer body'ye 'sepet-drawer-acik' class ekliyor (eger eklemiyorsa
     bunu sonra yazilir).
   - body.hi-bant--gizle eklenince component gizlenir (sayfa override).
============================================================================ */
body.hi-bant--gizle .hi-bant {
    display: none !important;
}

/* iOS Safari address bar gizlenirken bant zıplamasin diye GPU compositing */
.hi-bant {
    will-change: transform;
    transform: translateZ(0);
}