/* ════════════════════════════════════════════════════════════
   wb-transitions.css — Webey Sayfa Geçiş & Mikro Animasyonlar
   v2.1 — Admin-optimized, conflict-free
   ════════════════════════════════════════════════════════════ */

/* ── Progress Bar ── */
#wb-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, #0ea5b3, #06d6a0);
  z-index: 99999;
  border-radius: 0 2px 2px 0;
  transition: width .25s ease, opacity .35s ease;
  box-shadow: 0 0 8px rgba(14,165,179,.45);
  pointer-events: none;
  will-change: width, opacity;
}
#wb-progress.wb-done {
  width: 100% !important;
  opacity: 0;
  transition: width .15s ease, opacity .3s ease .05s;
}

/* ── Sayfa Giriş Animasyonu ── */
@keyframes wbPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wbPageInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wb-page-in {
  animation: wbPageIn .28s cubic-bezier(.22,1,.36,1) both;
}
.wb-hero-in {
  animation: wbPageIn .35s cubic-bezier(.22,1,.36,1) .04s both;
}

/* Staggered cards */
.rec-card-wrap { animation: wbPageIn .35s cubic-bezier(.22,1,.36,1) both; }
.rec-card-wrap:nth-child(1)  { animation-delay: .03s; }
.rec-card-wrap:nth-child(2)  { animation-delay: .07s; }
.rec-card-wrap:nth-child(3)  { animation-delay: .10s; }
.rec-card-wrap:nth-child(4)  { animation-delay: .13s; }
.rec-card-wrap:nth-child(5)  { animation-delay: .16s; }
.rec-card-wrap:nth-child(6)  { animation-delay: .19s; }

/* ── Sayfa Çıkış ── */
body.wb-leaving {
  animation: wbPageOut .17s ease forwards;
  pointer-events: none;
}
@keyframes wbPageOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* ════════════════════════════════════════════════════════════
   MODAL ANİMASYONLARI
   ════════════════════════════════════════════════════════════ */

@keyframes wbModalIn {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wbModalOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.97) translateY(4px); }
}

.wb-modal-in  { animation: wbModalIn  .2s cubic-bezier(.22,1,.36,1) both; }
.wb-modal-out { animation: wbModalOut .15s ease forwards; }

/* sb-modal (rail profil modalı) */
.sb-overlay.show .sb-modal {
  animation: wbModalIn .2s cubic-bezier(.22,1,.36,1) both;
}

/* ════════════════════════════════════════════════════════════
   RİPPLE EFEKTİ
   ════════════════════════════════════════════════════════════ */

.wb-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  pointer-events: none;
  transform: scale(0);
  animation: wbRippleAnim .5s cubic-bezier(.4,0,.2,1) forwards;
  will-change: transform, opacity;
}
@keyframes wbRippleAnim {
  0%   { transform: scale(0);  opacity: .8; }
  80%  { transform: scale(4);  opacity: .12; }
  100% { transform: scale(5);  opacity: 0; }
}
.wb-ripple.dark {
  background: rgba(0,0,0,.1);
}

/* ════════════════════════════════════════════════════════════
   BUTON PRESS DURUMLARI
   ════════════════════════════════════════════════════════════ */

button, .btn, [role="button"],
.view-item, .chk, .radio,
.rail__btn, .wb-bn-item,
.icon-btn, .apply, .pill {
  -webkit-tap-highlight-color: transparent;
}

.wb-press,
button.wb-press,
a.wb-press {
  transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s ease;
}
.wb-press:active {
  transform: scale(.96) !important;
}

.icon-btn,
.btn-icon {
  transition: background .14s ease,
              transform  .11s cubic-bezier(.34,1.56,.64,1),
              box-shadow .11s ease;
}
.icon-btn:active,
.btn-icon:active {
  transform: scale(.88);
}

/* ── Lift hover ── */
.wb-lift {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.wb-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.11);
}

/* ════════════════════════════════════════════════════════════
   SKELETON LOADING
   ════════════════════════════════════════════════════════════ */

@keyframes wbSkeletonShimmer {
  0%   { background-position: -700px 0; }
  100% { background-position:  700px 0; }
}

.wb-skel {
  background: linear-gradient(90deg, #eff1f6 25%, #e4e7ee 50%, #eff1f6 75%);
  background-size: 1400px 100%;
  animation: wbSkeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.wb-skel-line       { height: 13px; margin-bottom: 8px; }
.wb-skel-line.sm    { height: 10px; width: 55%; }
.wb-skel-line.lg    { height: 18px; }
.wb-skel-circle     { width: 40px; height: 40px; border-radius: 50%; }
.wb-skel-rect       { height: 180px; }
.wb-skel-btn        { height: 38px; width: 110px; border-radius: 10px; }
.wb-skel-avatar     { width: 44px; height: 44px; border-radius: 50%; }

/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════════════ */

.wb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.wb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.wb-reveal[data-delay="1"] { transition-delay: .1s; }
.wb-reveal[data-delay="2"] { transition-delay: .2s; }
.wb-reveal[data-delay="3"] { transition-delay: .3s; }
.wb-reveal[data-delay="4"] { transition-delay: .4s; }

/* ════════════════════════════════════════════════════════════
   TOAST / SNACKBAR
   ════════════════════════════════════════════════════════════ */

#wb-toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.wb-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 12px;
  background: #111318;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.1);
  pointer-events: auto;
  white-space: nowrap;
  max-width: min(420px, 90vw);
  animation: wbToastIn .26s cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity;
}
.wb-toast.wb-toast-exit { animation: wbToastOut .18s ease forwards; }
.wb-toast.success { background: #15803d; }
.wb-toast.error   { background: #dc2626; }
.wb-toast.warn    { background: #d97706; }
.wb-toast__icon   { flex-shrink: 0; }

@keyframes wbToastIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wbToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(.97); }
}

/* ════════════════════════════════════════════════════════════
   FOCUS STATESLERİ
   ════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.22), 0 0 0 1.5px #4f46e5 !important;
  border-radius: 6px;
}

.rail__btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(124,108,255,.5) !important;
  border-radius: 12px;
}

/* ════════════════════════════════════════════════════════════
   SMOOTH SCROLL + REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .wb-ripple { display: none !important; }
}