/* ============================================================
   WHATSAPP FLOATING BUTTON (bkz. Views/Shared/_WhatsAppButton.cshtml)
   Landing layout'u ve hata layout'u (Metronic bundle) birlikte yükler; bu yüzden
   kendi kendine yeterlidir: landing token'larını varsayılan değerleriyle okur,
   kendi ekran okuyucu sınıfını taşır.

   Tek satır kapsül: solda işaret, sağda metin; ölçüleri .lp-btn ailesiyle aynı
   dilde. Düz siyah zemin; koyu bölümlerde kaybolmasın diye ince açık kenar.

   İki katman, iki iş:
   - a.lp-wa         → konum + giriş + tek seferlik zıplama (transform)
   - .lp-wa__body    → görünüm + hover/active tepkisi (transform)
   Aynı özellik iki katmanda ayrı yaşadığı için hiçbir animasyon diğerini ezmez;
   ayrı `translate`/`rotate` özellikleri ve :has() gerekmez (eski Safari/
   Chromium/Firefox'ta da aynı davranır).

   Çerez bannerı açıkken (consent JS body'ye .lp-consent-open ekler) ve mobil
   menü açıkken (.lp-menu-open) buton geri çekilir. Giriş animasyonu `backwards`
   dolguyla çalışır: bitişte opacity kilitlenmez, gizlemeyi `visibility` taşır.
   ============================================================ */
a.lp-wa {
    --lp-wa-offset: clamp(1rem, 2.5vw, 1.75rem);

    position: fixed; z-index: 950;
    right: 1.5rem; bottom: 1.5rem; /* env() desteklemeyen tarayıcılar için */
    right: calc(var(--lp-wa-offset) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--lp-wa-offset) + env(safe-area-inset-bottom, 0px));
    display: block;
    border-radius: 980px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-animation:
        lp-wa-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards,
        lp-wa-bump 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 4s 1;
    animation:
        lp-wa-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards,
        lp-wa-bump 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 4s 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.lp-wa__body {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 1.35rem 0.5rem 1.1rem;
    box-sizing: border-box;
    border: 1px solid var(--lp-border-inv, rgba(255, 255, 255, 0.14));
    border-radius: 980px;
    background: var(--lp-text, #1d1d1f);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.4);
    color: var(--lp-text-inv, #ffffff);
    font-family: inherit; font-size: 0.92rem; font-weight: 500; line-height: 1.2;
    letter-spacing: -0.005em; white-space: nowrap;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 220ms ease, box-shadow 220ms ease;
}
/* İşaret tek kaynaktan (media/social/whatsapp.svg) maske olarak boyanır. */
.lp-wa__icon {
    flex: none;
    width: 20px; height: 20px;
    /* gap yerine margin: flex gap Safari 14.1 öncesinde yok. */
    margin-right: 0.6rem;
    background-color: currentColor;
    -webkit-mask: url("../../media/social/whatsapp.svg") center / contain no-repeat;
    mask: url("../../media/social/whatsapp.svg") center / contain no-repeat;
    -webkit-animation: lp-wa-wiggle 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 4s 1;
    animation: lp-wa-wiggle 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 4s 1;
}
.lp-wa__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (hover: hover) {
    a.lp-wa:hover .lp-wa__body {
        background-color: #000;
        transform: translateY(-2px);
        box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.5);
    }
}
a.lp-wa:active .lp-wa__body { transform: scale(0.97); }
a.lp-wa:focus { outline: none; }
a.lp-wa:focus-visible { outline: 2px solid var(--lp-text, #1d1d1f); outline-offset: 3px; }

/* Çerez bannerı veya mobil menü açıkken geri çekil. */
body.lp-consent-open a.lp-wa,
body.lp-menu-open a.lp-wa {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

@-webkit-keyframes lp-wa-in {
    from { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes lp-wa-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@-webkit-keyframes lp-wa-bump {
    0%, 55%, 100% { -webkit-transform: none; transform: none; }
    30%           { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    75%           { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}
@keyframes lp-wa-bump {
    0%, 55%, 100% { transform: none; }
    30%           { transform: translateY(-6px); }
    75%           { transform: translateY(-2px); }
}
@-webkit-keyframes lp-wa-wiggle {
    0%, 100% { -webkit-transform: none; transform: none; }
    20%      { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); }
    40%      { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
    60%      { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }
    80%      { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
}
@keyframes lp-wa-wiggle {
    0%, 100% { transform: none; }
    20%      { transform: rotate(-14deg); }
    40%      { transform: rotate(10deg); }
    60%      { transform: rotate(-6deg); }
    80%      { transform: rotate(3deg); }
}

/* Telefon: daha kompakt, kenara daha yakın; başparmak menzilinde kalır. */
@media (max-width: 600px) {
    a.lp-wa { --lp-wa-offset: 1rem; }
    .lp-wa__body { min-height: 44px; padding: 0.45rem 1.15rem 0.45rem 0.95rem; }
    .lp-wa__icon { width: 18px; height: 18px; margin-right: 0.5rem; }
}
/* Yatay telefon: dikey alan dar, buton daha da alçak durur. */
@media (max-height: 480px) and (orientation: landscape) {
    a.lp-wa { --lp-wa-offset: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    a.lp-wa,
    .lp-wa__icon { -webkit-animation: none; animation: none; }
    a.lp-wa { transition: opacity 0.2s ease, visibility 0s linear 0s; }
    .lp-wa__body { transition: background-color 0.2s ease; }
    a.lp-wa:hover .lp-wa__body,
    a.lp-wa:active .lp-wa__body { transform: none; }
}
/* Yüksek kontrast (Windows): sistem renklerine bırak, kenar görünür kalsın. */
@media (forced-colors: active) {
    .lp-wa__body { border-color: ButtonText; }
    .lp-wa__icon { background-color: ButtonText; }
}
@media print {
    a.lp-wa { display: none; }
}