/* =========================================================
   Debriyo — Giriş ekranı (2026-10-12)
   app.css'teki 13. bölümün ÜSTÜNE yazar; yalnızca login.php
   ve invite.php bağlar. Sol taraf: oto servis tanıtım videosu.
   ========================================================= */
:root{
  --dby-orange: #F05A1A;   /* Debriyo turuncusu — logo damlası, vurgu */
  --dby-cta:    #C8440E;   /* beyaz yazıyla 4.9:1 — düğme zemini */
  --dby-cta-hi: #B23B0B;
  --dby-link:   #FF8A5B;
}

.auth-body{
  background:
    radial-gradient(800px 520px at 100% 0%, rgba(240,90,26,.10), transparent 60%),
    linear-gradient(160deg, #1C1F24, #111316 65%);
}

/* ---------- logo (view/layout/brand-defs.php) ---------- */
.dby-brand{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; }
.dby-logo{ display:block; height:58px; width:auto; aspect-ratio:350.1/145.5; color:#fff; --dby-tag:#FFB496; }
.dby-tag{
  font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.62); padding-left:2px;
}

/* ---------- sol taraf: video sahnesi ---------- */
.auth-brand.has-video{
  justify-content:flex-start;
  border-right:0; background:#05080f; isolation:isolate;
}
.auth-brand.has-video::after{ display:none; }
.auth-brand.has-video .auth-brand-mid{ margin-top:auto; }
.auth-brand.has-video .auth-brand-foot{ margin-top:34px; color:rgba(231,236,247,.55); }

.auth-video{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:#05080f; }
.auth-video video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.03);
  /* sönen klibin yakınlaşması, sönme bitince (1.2 sn sonra) sıfırlanır */
  transition:opacity 1.2s ease, transform 0s linear 1.2s;
}
.auth-video video.is-on{
  opacity:1; transform:scale(1.11);
  transition:opacity 1.2s ease, transform 9s linear;
}
/* okunabilirlik perdesi: üstte logo, altta yazılar */
.auth-video::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,8,15,.72) 0%, rgba(5,8,15,.12) 26%, rgba(5,8,15,.30) 50%, rgba(5,8,15,.94) 100%),
    linear-gradient(90deg, rgba(5,8,15,.50), rgba(5,8,15,0) 65%);
}

.auth-brand.has-video .auth-brand-mid h1{ text-shadow:0 2px 24px rgba(0,0,0,.45); }
.auth-brand.has-video .auth-brand-mid > p{ color:rgba(231,236,247,.78); margin-bottom:28px; }

/* sahne yazısı + ilerleme şeritleri */
.auth-scene{ max-width:460px; }
.auth-scene-bars{ display:flex; gap:6px; margin-bottom:16px; }
.auth-scene-bars span{
  position:relative; flex:1 1 0; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.auth-scene-bars span i{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:#fff; border-radius:inherit;
}
.auth-scene-bars span.done i{ transform:scaleX(1); }
.auth-scene-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
}
.auth-scene-kicker::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--dby-orange); box-shadow:0 0 0 4px rgba(240,90,26,.25);
}
.auth-scene-text{
  margin:8px 0 0; min-height:2.9em;
  font-size:15.5px; line-height:1.45; color:rgba(255,255,255,.92);
  transition:opacity .35s ease;
}
.auth-scene.is-swapping .auth-scene-text,
.auth-scene.is-swapping .auth-scene-kicker{ opacity:0; }
.auth-scene-kicker{ transition:opacity .35s ease; }

/* ---------- sağ taraf: form ---------- */
.auth-card-logo{ display:none; margin-bottom:22px; }
.auth-card-logo .dby-logo{ height:44px; }

.auth-body .btn-primary.auth-submit{
  background:var(--dby-cta); border-color:var(--dby-cta); color:#fff;
  box-shadow:0 10px 26px -10px rgba(200,68,14,.85), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-body .btn-primary.auth-submit:hover,
.auth-body .btn-primary.auth-submit:focus-visible{ background:var(--dby-cta-hi); border-color:var(--dby-cta-hi); }
.auth-body .btn-primary.auth-submit:disabled{ background:var(--dby-cta); border-color:var(--dby-cta); }

.auth-field .form-control:focus{
  border-color:var(--dby-orange);
  box-shadow:0 0 0 3px rgba(240,90,26,.22);
}
.auth-field:focus-within > i{ color:var(--dby-link); }
.auth-link{ color:var(--dby-link); }
.auth-link:hover{ color:#FFAD8F; }
.auth-card .form-check-input:checked{ background-color:var(--dby-cta); border-color:var(--dby-cta); }
.auth-card .form-check-input:focus{ border-color:var(--dby-orange); box-shadow:0 0 0 3px rgba(240,90,26,.22); }

/* ---------- dar ekran: video tüm sayfanın arkasına geçer ---------- */
@media (max-width: 991.98px){
  .auth-brand.has-video{
    display:block; position:fixed; inset:0; z-index:0; padding:0;
  }
  .auth-brand.has-video > :not(.auth-video){ display:none; }
  .auth-video::after{ background:rgba(5,8,15,.62); }
  .auth-form-side{ position:relative; z-index:1; min-height:100dvh; }
  .auth-card{ background:rgba(10,14,26,.80); }
  .auth-card-logo{ display:block; }
}

/* hareket istemeyen kullanıcı: video durur, ilk kare kalır */
@media (prefers-reduced-motion: reduce){
  .auth-video video,
  .auth-video video.is-on{ transition:none; transform:none; }
}

/* kart: antrasit zemine uysun (app.css'teki lacivert tonu yerine) */
.auth-card{ background: rgba(30,33,38,.80); border-color: rgba(255,255,255,.08); }