/* ============================================================
   ATIKLER FLAKE — Hızlı / Floating Butonlar
   Dosya: assets/anasayfa-hizli-butonlar.css
   ============================================================ */

:root {
  --hb-red:    #D32F2F;
  --hb-red2:   #FF5252;
  --hb-wa:     #25D366;
  --hb-wa2:    #1ebe57;
  --hb-navy:   #1A1F3A;
  --hb-white:  #FFFFFF;
  --hb-size:   54px;
  --hb-gap:    12px;
  --tr:        0.35s cubic-bezier(.22,1,.36,1);
}

/* ======================================================
   WRAP — sağ alt, her zaman görünür
   ====================================================== */
.hb-wrap {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hb-gap);
}

/* ======================================================
   ORTAK BUTON
   ====================================================== */
.hb-btn {
  position: relative;
  width: var(--hb-size);
  height: var(--hb-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  flex-shrink: 0;
  transition: transform var(--tr), box-shadow var(--tr);
}
.hb-btn:hover {
  transform: scale(1.1) translateY(-2px);
}

.hb-icon {
  position: relative;
  z-index: 2;
  display: block;
  flex-shrink: 0;
}

/* Tooltip */
.hb-tooltip {
  position: absolute;
  right: calc(var(--hb-size) + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--hb-navy);
  color: var(--hb-white);
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hb-tooltip::after {
  content: '';
  position: absolute;
  right: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--hb-navy);
  border-right: none;
}
.hb-btn:hover .hb-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ======================================================
   SİREN HALKALARI
   ====================================================== */
.hb-siren {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: hb-pulse 2s ease-out infinite;
  z-index: 0;
  pointer-events: none;
}
.hb-siren-2 { animation-delay: 1s; }

.hb-siren-top  { background: rgba(26,31,58,0.6); }
.hb-siren-wa   { background: rgba(37,211,102,0.5); }
.hb-siren-call { background: rgba(211,47,47,0.55); }

@keyframes hb-pulse {
  0%   { transform: scale(1);   opacity: 0.75; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ======================================================
   EN YUKARI ÇIK
   — varsayılan: gizli; scroll'da .hb-top-visible ile göster
   ====================================================== */
.hb-top {
  background: var(--hb-navy);
  color: var(--hb-white);
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);

  /* başlangıçta görünmez */
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  pointer-events: none;
  transition: opacity var(--tr), transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.hb-top.hb-top-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}
.hb-top:hover {
  background: var(--hb-red);
  box-shadow: 0 6px 24px rgba(211,47,47,0.50);
  transform: scale(1.1) translateY(-2px) !important;
}
/* Dönen kırmızı border */
.hb-top::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--hb-red);
  animation: hb-spin 3s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes hb-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity:0.55; }
  50%  { transform: rotate(180deg) scale(1.08); opacity:1; }
  100% { transform: rotate(360deg) scale(1);    opacity:0.55; }
}

/* ======================================================
   WHATSAPP — her zaman görünür
   ====================================================== */
.hb-wa {
  background: var(--hb-wa);
  color: var(--hb-white);
  box-shadow: 0 6px 20px rgba(37,211,102,0.35);
}
.hb-wa:hover {
  background: var(--hb-wa2);
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
}
.hb-wa::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--hb-wa);
  animation: hb-wa-flash 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hb-wa-flash {
  0%,100% { opacity:0.25; transform:scale(1); }
  50%     { opacity:0.9;  transform:scale(1.12); }
}

/* ======================================================
   HEMEN ARA — her zaman görünür
   ====================================================== */
.hb-call {
  background: var(--hb-red);
  color: var(--hb-white);
  box-shadow: 0 6px 20px rgba(211,47,47,0.40);
}
.hb-call:hover {
  background: var(--hb-red2);
  box-shadow: 0 6px 28px rgba(211,47,47,0.65);
}
.hb-call::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px solid var(--hb-red2);
  animation: hb-call-flash 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hb-call-flash {
  0%,100% { opacity:0.2; transform:scale(1);    }
  50%     { opacity:1;   transform:scale(1.16);
            box-shadow: 0 0 16px rgba(255,82,82,0.7); }
}
/* Telefon ikonu sallansın */
.hb-call .hb-icon {
  animation: hb-ring 2.8s ease-in-out infinite;
}
@keyframes hb-ring {
  0%,55%,100% { transform: rotate(0deg); }
  60%,70%     { transform: rotate(-18deg); }
  65%,75%     { transform: rotate(18deg); }
  80%         { transform: rotate(-10deg); }
  85%         { transform: rotate(10deg); }
  90%         { transform: rotate(0deg); }
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 480px) {
  :root {
    --hb-size: 48px;
    --hb-gap:  10px;
  }
  .hb-wrap { right: 14px; bottom: 20px; }
  .hb-tooltip { display: none; }
}