/* ════════════════════════════════════════════════════════════
   wb-bottom-nav.css  — Webey Admin Mobil Alt Navigasyon (5 item + CTA merkez)
   Sadece ≤767px'de görünür
   ════════════════════════════════════════════════════════════ */

:root {
  --bn-h:        68px;
  --bn-bg:       #ffffff;
  --bn-border:   rgba(0,0,0,.07);
  --bn-ink:      #94a3b8;
  --bn-active:   #0ea5b3;
  --bn-badge:    #ef4444;
  --bn-safe:     env(safe-area-inset-bottom, 0px);
  --bn-cta-size: 52px;
  --bn-cta-color:#0ea5b3;
}

/* Sayfa altına boşluk */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--bn-h) + var(--bn-safe) + 4px) !important; }
}

/* ── Container ── */
.wb-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bn-h) + var(--bn-safe));
  padding-bottom: var(--bn-safe);
  background: var(--bn-bg);
  border-top: 1px solid var(--bn-border);
  z-index: 9000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -2px 20px rgba(0,0,0,.06);
}

@media (max-width: 767px) {
  .wb-bottom-nav { display: flex; }
}

/* ── İç wrapper ── */
.wb-bn-inner {
  display: flex;
  width: 100%;
  height: var(--bn-h);
  align-items: stretch;
}

/* ── Nav Item (ortak) ── */
.wb-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--bn-ink);
  position: relative;
  transition: color .18s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: hidden;
}

.wb-bn-item:active { opacity: .7; }

/* ── Aktif durum ── (settings.css --accent override'ını önlemek için specificity artırıldı) */
.wb-bottom-nav .wb-bn-item.is-active,
.wb-bottom-nav .wb-bn-item[aria-current="page"] {
  color: var(--bn-active) !important;
}

/* Aktif: üst gösterge çizgisi */
.wb-bottom-nav .wb-bn-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background: var(--bn-active);
  border-radius: 0 0 3px 3px;
  animation: bnSlideIn .22s ease;
}

/* CTA (ortadaki büyük buton) aktif göstergesi yok */
.wb-bottom-nav .wb-bn-item.wb-bn-cta.is-active::before,
.wb-bottom-nav .wb-bn-item.wb-bn-cta[aria-current="page"]::before {
  display: none;
}

@keyframes bnSlideIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── İkon ── */
.wb-bn-icon {
  font-size: 21px;
  line-height: 1;
  position: relative;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-bottom-nav .wb-bn-item.is-active .wb-bn-icon {
  transform: translateY(-1px) scale(1.08);
}

/* ── Etiket ── */
.wb-bn-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}

/* ── Badge ── */
.wb-bn-badge {
  position: absolute;
  top: 9px;
  right: calc(50% - 16px);
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--bn-badge);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid #fff;
  transform: scale(0);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.wb-bn-badge.visible { transform: scale(1); }

/* ══════════════════════════════════════
   ORTA BÜYÜK BUTON — CTA (Takvim)
   ══════════════════════════════════════ */
.wb-bn-item.wb-bn-cta {
  flex: 0 0 78px;
  justify-content: flex-end;
  padding-bottom: 6px;
  color: var(--bn-cta-color);
}

.wb-bn-cta-bubble {
  width: var(--bn-cta-size);
  height: var(--bn-cta-size);
  border-radius: 50%;
  background: var(--bn-cta-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 16px rgba(14,165,179,.38),
    0 1px 4px rgba(14,165,179,.2);
  transition:
    transform .18s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s ease;
  margin-bottom: 4px;
}

.wb-bn-item.wb-bn-cta:active .wb-bn-cta-bubble {
  transform: scale(.91);
  box-shadow: 0 2px 8px rgba(14,165,179,.25);
}

.wb-bn-cta-bubble .wb-bn-icon {
  font-size: 24px;
  color: #fff;
  transform: none !important;
}

.wb-bn-item.wb-bn-cta .wb-bn-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--bn-cta-color);
  margin-top: 0;
}

/* Aktif halinde CTA biraz büyüsün */
.wb-bn-item.wb-bn-cta.is-active .wb-bn-cta-bubble {
  box-shadow:
    0 6px 20px rgba(14,165,179,.45),
    0 2px 6px rgba(14,165,179,.25);
}

/* ── Ripple efekti (CTA hariç) ── */
.wb-bn-item:not(.wb-bn-cta)::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: var(--bn-active);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.wb-bn-item:not(.wb-bn-cta):active::after {
  transform: scale(1);
  opacity: .07;
  transition: none;
}