/* =========================================
   Scan&Call Global Spinner CSS (Component)
   Dosya: assets/css/global-spinner.css
   ========================================= */

/* GENEL */
*{
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
}

/* Not:
   Eski testte html,body, wrapper vardı. Component yapıda sayfayı bozmayalım diye
   html,body margin/background gibi şeyleri burada KULLANMIYORUZ.
   Spinner overlay kendi background'unu zaten beyaz basıyor.
*/

/* =========================================
   OVERLAY + WRAPPER (component için eklendi)
   ========================================= */
.sc-spinner-overlay{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:99999;
}

/* JS ile hidden attribute kullanırsan */
.sc-spinner-overlay[hidden]{ display:none; }

/* Senin wrapper mantığı */
.sc-spinner{
  height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px;
}

/* =========================================
   SLOGAN
   ========================================= */
.sc-slogan-wrap{
  height:5px;
  margin-bottom:0;
  position:relative;
  width:100%;
  max-width:90%;
  z-index:2;
}

.sc-slogan{
  position:absolute;
  width:100%;
  opacity:0;
  transition:opacity .5s ease;
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  color:#F28C28;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sc-slogan.active{ opacity:1; }

/* =========================================
   LOGO
   ========================================= */
.sc-logo{
  width:360px;
  max-width:90%;
  margin-top:-10px;
  margin-bottom:28px;
  position:relative;
  z-index:1;
}

/* =========================================
   LOADER
   ========================================= */
.sc-loader{
  width:52px;
  height:52px;
}

.sc-loader circle{
  fill:none;
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:180;
  stroke-dashoffset:0;
  transform-origin:50% 50%;
  animation:scSpin 1.2s linear infinite;
  stroke:url(#scGrad);
}

@keyframes scSpin{
  0%{transform:rotate(0deg);stroke-dashoffset:180;}
  50%{stroke-dashoffset:60;}
  100%{transform:rotate(360deg);stroke-dashoffset:180;}
}

/* =========================================
   ALT BİLGİ METNİ (component için eklendi)
   ========================================= */
.sc-spinner-info{
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:#111;
  opacity:.75;
  max-width:92%;
  white-space:normal;
}

/* =========================
   PAW (DOKUNMADIM)
   ========================= */
.sc-paw-trail{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:3;
}

.sc-paw{
  position:absolute;
  width:22px;
  opacity:0;
  transform:scale(.6);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}

.sc-paw-trail.active{ opacity:1; }

.sc-paw-trail.active .p1{ animation:pawStep .35s ease 0s forwards; }
.sc-paw-trail.active .p2{ animation:pawStep .35s ease .14s forwards; }
.sc-paw-trail.active .p3{ animation:pawStep .35s ease .28s forwards; }
.sc-paw-trail.active .p4{ animation:pawStep .35s ease .42s forwards; }
.sc-paw-trail.active .p5{ animation:pawStep .35s ease .56s forwards; }
.sc-paw-trail.active .p6{ animation:pawStep .35s ease .70s forwards; }

@keyframes pawStep{
  0%   { opacity:0; transform:scale(.5) rotate(-6deg); }
  60%  { opacity:1; transform:scale(1) rotate(0deg); }
  100% { opacity:.95; }
}

/* =========================
   CAR (SENİN SON HALİN)
   ========================= */
.sc-car-anim{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:-90px;
  pointer-events:none;
  opacity:0;
  overflow:visible;
}

.sc-car-anim svg{
  position:absolute;
  width:44px;
  height:auto;
  top:-40px;
  left:0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  transform: translateX(-140px);
}

.sc-car-anim.run{ opacity:1; }

@keyframes carPass{
  0%   { transform: translateX(-140px); }
  100% { transform: translateX(calc(100% + 180px)); }
}

.sc-car-anim.run svg{
  animation: carPass 2.2s cubic-bezier(.25,0,.2,1) forwards;
}

/* =========================
   BAG / VALİZ (EKLENDİ)
   ========================= */
.sc-bag-anim{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  pointer-events:none;
  opacity:0;
  overflow:visible;
}

.sc-bag-anim svg{
  position:absolute;
  width:46px;
  height:auto;
  top:-60px;
  left:0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
  transform: translateX(-140px);
}

.sc-bag-anim.run{ opacity:1; }

@keyframes bagPass{
  0%   { transform: translateX(-140px); }
  100% { transform: translateX(calc(100% + 180px)); }
}

@keyframes bagBounce{
  0%   { translate: 0 0; }
  20%  { translate: 0 -4px; }
  40%  { translate: 0 0; }
  60%  { translate: 0 -3px; }
  80%  { translate: 0 0; }
  100% { translate: 0 0; }
}

.sc-bag-anim.run svg{
  animation:
    bagPass 2.15s cubic-bezier(.25,0,.2,1) forwards,
    bagBounce .9s ease-in-out .35s 1;
}