/* =========================================================
   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; }
}

/* ---------- sol taraf: başlık + bölüm kutucukları (login.php) ---------- */
.auth-brand.is-rich{
  border-right-color:rgba(255,255,255,.05);
  background:
    radial-gradient(620px 420px at 0% 100%, rgba(255,77,61,.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.auth-brand.is-rich::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(160deg, #000 10%, transparent 70%);
          mask-image:linear-gradient(160deg, #000 10%, transparent 70%);
}
.auth-brand.is-rich::after{ display:none; }
.auth-brand.is-rich > *{ position:relative; z-index:1; }
.auth-spark-bg{
  position:absolute !important; z-index:0 !important; pointer-events:none;
  right:6%; top:8%; width:min(30vw, 400px); height:auto; opacity:.045;
  --bg-spark:#FF4D3D;
}
.auth-brand.is-rich .auth-brand-mid{ max-width:520px; }
.auth-brand.is-rich .auth-brand-mid h1{
  margin:14px 0 30px; font-size:clamp(32px, 3.6vw, 48px); line-height:1.08;
}
.auth-brand.is-rich .auth-brand-mid h1 em{ font-style:normal; color:var(--dby-orange); }

.auth-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-tile{
  display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:center;
  padding:14px; border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .2s ease, background .2s ease;
}
.auth-tile:hover{ background:rgba(255,255,255,.055); border-color:rgba(255,77,61,.28); }
.auth-tile i{
  grid-row:span 2; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; font-size:16px; color:#FF8A7E;
  background:rgba(255,77,61,.13); box-shadow:inset 0 0 0 1px rgba(255,138,126,.2);
}
.auth-tile strong{ font-size:13.5px; font-weight:600; color:#fff; line-height:1.25; }
.auth-tile span{ font-size:12px; color:rgba(231,236,247,.5); line-height:1.35; }

.auth-brand.is-rich .auth-brand-foot{ justify-content:space-between; }
.auth-ver{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  font-family:var(--mono-font); font-size:11px; color:rgba(231,236,247,.55);
}
.auth-ver i{ color:#6ee7a8; }

@media (max-width: 1199.98px){
  .auth-brand.is-rich{ padding:40px; }
  .auth-tiles{ grid-template-columns:1fr; }
}

/* 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); }
/* daha ferah kart: geniş iç boşluk, alanlar arası nefes */
@media (min-width: 576px){
  .auth-card{ max-width:420px; padding:52px 40px 40px; }
  .auth-card .auth-head p{ margin-bottom:32px !important; }
  .auth-card .mb-3{ margin-bottom:22px !important; }
  .auth-card .mb-4{ margin-bottom:30px !important; }
  .auth-card .auth-foot{ margin-top:30px; padding-top:22px; }
}