/* ==================================================================
   GECCEBET · HESAP EKRANLARI
   Kayıt, giriş, şifre sıfırlama. app.css'ten sonra yükleniyor;
   değişkenler, butonlar ve odak stilleri oradan geliyor.

   Düzen ikiye bölünmüş: solda form, sağda fotoğraf. Sağ taraf
   dekorasyon değil — anasayfadan gelen kişi aynı yerde olduğunu
   görüyor, doğrudan reklamdan gelen ise ilk kez görüyor. Dar ekranda
   fotoğraf üstte ince bir bant oluyor, forma yer açılıyor.
   ================================================================== */

.auth {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
}

/* ---- sol: form ---- */

.auth-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(24px, 4vw, 64px) 40px;
  background: linear-gradient(180deg, #3e1b15, #20100b 58%, #130b06);
}

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.auth-top .brand-logo { height: 26px; }

/* Üstteki karşı bağlantı. Kayıttayken girişe, giriştekiyse kayda. */
.auth-swap {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tx-3);
  white-space: nowrap;
}
.auth-swap a { color: var(--aqua-soft); font-weight: 600; }
.auth-swap a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-in {
  width: 100%;
  max-width: 400px;
  margin: auto 0;
}

.auth-k {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua);
}
.auth-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.auth-note {
  margin: 11px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tx-2);
}

/* ---- alanlar ---- */

.form { margin-top: 26px; }

/* İki alan yan yana: ad ve soyad. Dar ekranda alt alta düşüyor. */
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field { margin-bottom: 14px; }
/* Onay kutusunun kabı. Hata mesajı .field içinde durmalı, yoksa
   .field.is-bad kuralı ona ulaşmıyor. */
.field-check { margin-top: 22px; }
.field-check .check { margin-top: 0; }
.field-check .err { margin-inline-start: 31px; }
.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tx-2);
}

.inp {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line-tx);
  background: rgba(23, 10, 7, .5);
  color: var(--tx);
  font-size: 15px;
  transition: border-color var(--t), background var(--t);
}
.inp::placeholder { color: var(--tx-4); }
.inp:hover { border-color: rgba(245, 244, 236, .26); }
.inp:focus {
  outline: none;
  border-color: var(--aqua);
  background: rgba(23, 10, 7, .72);
}
/* Odak halkası butonlarla aynı dil; :focus-visible app.css'te tanımlı
   ama input'ta her odakta görünmesi gerekiyor. */
.inp:focus-visible { outline: 2px solid var(--aqua-soft); outline-offset: 2px; }

/* Chrome'un otomatik doldurma sarısı koyu zeminde kartı mahvediyordu.
   Renk doğrudan atanamıyor, iç gölgeyle boyuyoruz. */
.inp:-webkit-autofill,
.inp:-webkit-autofill:hover,
.inp:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tx);
  -webkit-box-shadow: 0 0 0 60px #29140e inset;
  caret-color: var(--tx);
}

.hint {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--tx-3);
}

/* ---- telefon: ülke kodu + numara ---- */

.f-tel { display: flex; gap: 8px; }
/* Ulke kodu artik SECICI degil, sabit bir etiket: tek pazar var.
   Acilir liste bes ulke gosterip hepsini reddetmek kullaniciyi bosuna
   ugrastiriyordu. Kod yine ayri duruyor ki numara alani
   bicimlendirilebilsin. */
.f-dial {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  font-size: 15px;
  color: var(--tx-2);
  white-space: nowrap;
  /* Rakam ve bayrak her dilde soldan saga okunur. */
  direction: ltr;
  unicode-bidi: isolate;
}

.f-tel .inp { flex: 1; min-width: 0; }

/* ---- şifre ---- */

.f-pass { position: relative; }
.f-pass .inp { padding-inline-end: 52px; }
.f-eye {
  position: absolute;
  /* Input'un padding'i padding-inline-end; buton da ayni kenarda
     olmali, yoksa RTL'de bosluk solda buton sagda kaliyor ve yazi
     ikonun altina giriyor. */
  top: 0; inset-inline-end: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--tx-3);
  transition: color var(--t);
}
.f-eye:hover { color: var(--aqua-soft); }
.f-eye svg { width: 19px; height: 19px; }
/* Açıkken hangi ikonun görüneceği tek yerden. */
.f-eye .off { display: none; }
.f-eye.is-on .on { display: none; }
.f-eye.is-on .off { display: block; }

/* Şifre gücü. Uzunluğa bakıyor, karakter çeşidine değil — güncel
   kılavuz karakter karışımı dayatmayı bırakalı çok oldu, uzunluk daha
   çok iş görüyor. Üç kademe yeterli: kullanıcıya puan değil karar lazım. */
.meter {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.meter i {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: rgba(245, 244, 236, .12);
  transition: background var(--t);
}
.meter[data-level="1"] i:nth-child(1) { background: var(--coral); }
.meter[data-level="2"] i:nth-child(-n+2) { background: #ffb04a; }
.meter[data-level="3"] i { background: var(--win); }

/* ---- onay kutusu ---- */

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 22px 0 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tx-2);
  cursor: pointer;
}
.check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border-radius: 6px;
  border: 1px solid var(--line-tx);
  background: rgba(23, 10, 7, .5);
  cursor: pointer;
  transition: var(--t);
}
.check input:checked {
  background: var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' fill='none' stroke='%232a0509' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5 4.5 8.5 12 1'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--aqua);
}
.check input:focus-visible { outline: 2px solid var(--aqua-soft); outline-offset: 2px; }
.check a { color: var(--aqua-soft); text-decoration: underline; text-underline-offset: 3px; }

.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.check-row .check { margin: 0; }
.check-row a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tx-3);
  white-space: nowrap;
}
.check-row a:hover { color: var(--aqua-soft); }

.form .btn-lg { margin-top: 24px; }

/* ---- hata durumları ---- */

.inp[aria-invalid="true"] { border-color: var(--coral); }

.err {
  display: none;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #ff9d8d;
}
.field.is-bad .err { display: block; }
.field.is-bad .hint { display: none; }

/* Gönderimde toplanan hatalar. Ekran okuyucu tek seferde duyuyor,
   gören kullanıcı da nereye bakacağını biliyor. */
.err-box {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 115, 95, .35);
  background: rgba(255, 115, 95, .09);
  font-size: 13.5px;
  line-height: 1.5;
  color: #ffc7bd;
}
.err-box[hidden] { display: none; }
.err-box b { display: block; margin-bottom: 4px; color: #ff9d8d; }
.err-box ul { margin: 0; padding-inline-start: 18px; }

/* Sunucunun olumlu durumu (orn. "sıfırlama bağlantısı gönderildi",
   "yeni bağlantı gönderildi"). Tasarimda böyle bir kutu YOKTU (bkz.
   sifre-sifirlama.html - sadece err-box vardı); B5 görev şartı ("Show
   the server's own status") için eklendi. KASITLI OLARAK .err-box
   sınıfını PAYLAŞMIYOR: auth.js'nin form-submit dinleyicisi
   kapsam.querySelector('.err-box') ile TEK bir kutu arıyor (bkz.
   public/tema/js/auth.js "Doğrulama" bölümü) - aynı data-auth-scope
   içinde ikinci bir .err-box olsaydı, ilk eşleşen (belki bu durum
   kutusu) istemci doğrulama hatalarını YANLIŞ kutuya yazardı. Renk
   şeması hesap.css'teki .pill-ok / var(--win) ile AYNI (bkz. o
   dosyanın #3ddc84 kararı) - projede tek "başarı" rengi bu, burada
   yeniden icat edilmedi. */
.status-box {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(61, 220, 132, .35);
  background: rgba(61, 220, 132, .09);
  font-size: 13.5px;
  line-height: 1.5;
  color: #bdf3d3;
}
.status-box b { display: block; margin-bottom: 4px; color: var(--win); }
.status-box ul { margin: 0; padding-inline-start: 18px; }

/* Gönderim sırasında. Buton genişliği değişmesin diye metin yerinde
   kalıyor, üstüne halka biniyor. */
.btn.is-sending { color: transparent; pointer-events: none; position: relative; }
.btn.is-sending::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(35, 15, 11, .3);
  border-top-color: var(--ink);
  animation: auth-spin .6s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---- alt satır ---- */

.auth-foot {
  margin-top: 28px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tx-4);
}
.auth-foot a { color: var(--tx-3); text-decoration: underline; text-underline-offset: 3px; }

/* ---- sağ: fotoğraf ---- */

.auth-art {
  position: relative;
  overflow: hidden;
}
.auth-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: brightness(.82) saturate(.94);
}
.auth-art::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Fotoğraf ham hâlinde markadan daha aydınlık kalıyordu; "After
     Dark" olan bir sitenin kayıt ekranı gün ortası gibi duramaz.
     Üç katman: sola geçişi yumuşatan, sözün arkasını taşıyan ve
     tamamını bir kademe kısan. */
  background:
    linear-gradient(90deg, rgba(19, 11, 6, .95) 0%, rgba(19, 11, 6, .45) 28%, rgba(19, 11, 6, .06) 62%),
    linear-gradient(180deg, rgba(19, 11, 6, .4), rgba(19, 11, 6, 0) 30%, rgba(19, 11, 6, .78));
}

.auth-say {
  position: absolute;
  inset-inline: clamp(32px, 5vw, 72px);
  bottom: clamp(40px, 7vh, 76px);
  z-index: 1;
  max-width: 460px;
}
/* IKINCI BUYUK BASLIK YOK. Fotografin uzerinde de serif bir baslik
   durunca ekranda iki baslik yarisiyordu ve formun kendi basligi
   geri plana dusuyordu. Burasi artik yalniz kucuk bir bilgi satiri.
   (h2 kurali duruyor: sunucu ileride buraya baslik basmak isterse
   olcusu hazir olsun, ama isaretlemede kullanilmiyor.) */
.auth-say h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
}
.auth-say p {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 244, 236, .74);
}
.auth-cap {
  margin: 0;
  max-width: 380px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(245, 244, 236, .82);
}

/* Fotoğrafın üstünde güven satırı. Kayıt ekranında insan tam da bunu
   merak ediyor. */
.auth-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.auth-tags span {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 244, 236, .18);
  background: rgba(23, 10, 7, .4);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 500;
  color: rgba(245, 244, 236, .82);
}


@media (max-width: 1080px) {
  .auth { grid-template-columns: minmax(0, 480px) 1fr; }
  .auth-say { max-width: 340px; }
  .auth-tags { display: none; }        /* dar kolonda satır satır sarıyordu */
}

/* Fotoğraf artık yan yana durmuyor; üstte ince bir bant olarak kalıyor.
   Tamamen atmak da olurdu ama ekran o zaman formdan ibaret kalıyor. */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { order: -1; height: 190px; }
  .auth-art img { object-position: 62% 42%; }
  .auth-art::after {
    background:
      linear-gradient(180deg, rgba(19, 11, 6, .5) 0%, rgba(19, 11, 6, .1) 40%, #3e1b15 100%);
  }
  .auth-side { padding-top: 22px; }
  /* Bilgi satiri dar ekranda GIZLENIYOR. Bir donem "fotografin
     altina, formun ustune gecsin" diye konumlandirilmisti; ardindan
     gelen display:none o kurali zaten olu birakiyordu ve yorum
     olmayan bir davranisi anlatiyordu. 190px'lik bir bantta yazi
     hem sikisiyor hem formun onune geciyor - dogru olan gizlemek. */
  .auth-say { display: none; }
  .auth-in { margin: 0; max-width: 460px; margin-inline: auto; }
  .auth-top { margin-bottom: 26px; }
}

@media (max-width: 460px) {
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .auth-art { height: 150px; }
  .check-row { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-sending::after { animation: none; }
}


/* ==================================================================
   HESAP PENCERESI - sablon v2 (Gorev 8)
   Kaynak C:\Users\Ayaz\Desktop\index\styles.css 663-669 (harita 1.1 H5);
   degerler sablonun SON hali (666'daki ek ayarlar yerine islendi).
   Isaretleme resources/views/arsenal/parca/kimlik.blade.php, acma/kapama
   app.js katman() (#account), adimlar auth.js. arsenal.css'e DEGIL buraya:
   pencere kimlik formlarinin (.field/.err/.hint/.err-box) yaninda durur.
   Eski tek sutunlu .sheet* kurallari kalkti - baska kullanan yoktu.

   Mevcut form parcalari (auth.js bunlara bagli) pencerede sablonun
   olcusune iner; kurallar .auth-modal altinda, kimlik SAYFALARI
   (/forgot-password vb.) ve hesap formlari etkilenmez.
   ================================================================== */

/* Kapali pencere [hidden] (katman() kapanista 220 ms sonra basar);
   display:grid tarayicinin [hidden] kuralini eziyor, acikca yok ediliyor.
   Sablonun visibility:hidden gecisi ALINMADI: katman() pencereyi acar
   acmaz (is-open bir kare sonra gelir) kapatma dugmesine odak veriyor,
   visibility:hidden bir ogeye odak verilemiyor - klavyedeki kisi arkada
   kalan (inert) dugmede asili kaliyordu. Solma yalniz opacity ile, sure
   katman()'in 220 ms'si. overflow-y: dusuk ekranda (dizustu, 1. adim +
   hata kutusu) pencere kesilmesin, kaysin. */
.auth-modal-backdrop{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:24px;overflow-y:auto;overscroll-behavior:contain;background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);opacity:0;transition:opacity .22s}
.auth-modal-backdrop[hidden]{display:none}
.auth-modal-backdrop.is-open{opacity:1}
/* Adim/pano gecisleri hidden ile; asagidaki display kurallari onu ezmesin. */
.auth-modal [hidden]{display:none!important}
.auth-modal{position:relative;display:grid;width:min(820px,100%);min-height:520px;margin:auto;grid-template-columns:.86fr 1.14fr;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#0c1016;box-shadow:0 35px 100px rgba(0,0,0,.72),0 0 0 1px rgba(239,30,52,.14);transform:translateY(18px) scale(.97);transition:transform .3s}
.auth-modal-backdrop.is-open .auth-modal{transform:none}

/* Sol gorsel. Sablon burada url('assets/...') ile C-1'de silinen vaat
   slaytini kullaniyordu (testle yasak). Yerine kirmizi degrade + sablonun
   kendi top filigrani (govde zeminindeki ayni dosya), soluk. Alttaki
   karartma (:after) sablonun: logo ve slogan koyu zeminde okunsun. */
.auth-visual{position:relative;display:flex;min-height:520px;align-items:flex-end;padding:34px;overflow:hidden;background:radial-gradient(circle at 22% 14%,rgba(255,51,71,.42),transparent 52%),linear-gradient(155deg,#a1101f 0%,#5b0914 48%,#16070b 100%)}
.auth-visual:before{content:"";position:absolute;inset:0;background:url('../img/arsenal-cannon-mark.png') 58% 34%/120% auto no-repeat;opacity:.2}
.auth-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,13,.95),transparent 62%),linear-gradient(135deg,rgba(218,19,43,.28),transparent 45%)}
.auth-visual-copy{position:relative;z-index:1}
.auth-visual-copy img{width:190px;max-width:100%;height:auto;margin-bottom:17px}
.auth-visual-copy span{display:block;color:#ee334b;font-size:8px;font-weight:900;letter-spacing:1.8px}
/* Sablonda h2; baslik hiyerarsisi sag taraftaki form basliginin, bu sus. */
.auth-visual-copy p{max-width:280px;margin:7px 0 0;font:800 34px/.94 'Barlow Condensed',sans-serif}

.auth-close{position:absolute;z-index:5;inset-inline-end:16px;top:16px;display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(8,11,16,.76);color:#f04456;cursor:pointer}
.auth-close svg{width:16px;height:16px}
.auth-form-side{padding:52px 34px 30px;background:linear-gradient(160deg,#131821,#090c11)}

/* Sekmeler sablonda <button>; burada gercek adresli <a>. */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:25px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0a0d12}
.auth-tab{display:grid;height:38px;place-items:center;border-radius:7px;background:transparent;color:#7f8b98;font-size:11px;font-weight:900;text-decoration:none}
.auth-tab.is-active{background:linear-gradient(135deg,#e9253e,#b50d21);color:#fff;box-shadow:0 7px 18px rgba(215,18,42,.22)}

/* Sablonun .auth-heading>span'i (marka satiri) son halinde gizliydi, basilmiyor. */
.auth-heading h2{margin:6px 0 5px;color:#ef334b;font:800 30px/.98 'Barlow Condensed',sans-serif}
.auth-heading p{margin:0 0 21px;color:#82909d;font-size:10px;line-height:1.5}

/* Kayit tek form, iki adim kabi: her kap sablonun bir formu gibi. */
.auth-form,.auth-step{display:grid;gap:10px}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:start}
.auth-field{display:flex;min-height:45px;align-items:center;gap:9px;padding:0 12px;border:1px solid #29333e;border-radius:9px;background:#0e131a;transition:.2s}
.auth-field:focus-within{border-color:#ed2b42;box-shadow:0 0 0 3px rgba(237,43,66,.08)}
.auth-field svg{width:16px;height:16px;fill:none;stroke:#7b8793;stroke-width:1.7;flex:0 0 auto}
.auth-field input{width:100%;min-width:0;align-self:stretch;border:0;outline:0;background:transparent;color:#eef1f3;font-size:11px}
.auth-field input::placeholder{color:#6c7884}
/* Chrome otomatik doldurma zemini kutuyu boyuyordu (.inp'teki ayni care). */
.auth-field input:-webkit-autofill,.auth-field input:-webkit-autofill:hover,.auth-field input:-webkit-autofill:focus{-webkit-text-fill-color:#eef1f3;-webkit-box-shadow:0 0 0 60px #0e131a inset;caret-color:#eef1f3}
/* Sifre gozu (auth.js [data-eye]) kutunun icinde, sonda. */
.auth-field .f-eye{position:static;flex:none;width:30px;height:30px;margin-inline-end:-6px;color:#7b8793}
.auth-field .f-eye:hover{color:#ef334b}
/* type=date yer tutucu gostermiyor; etiketi kutunun icinde gorunur. */
.auth-field-cap{flex:none;color:#6c7884;font-size:11px;white-space:nowrap}
.auth-date-field input{color-scheme:dark}
.auth-date-field input::-webkit-datetime-edit{color:#eef1f3}
.auth-date-field input::-webkit-datetime-edit-text,.auth-date-field input::-webkit-datetime-edit-month-field,.auth-date-field input::-webkit-datetime-edit-day-field,.auth-date-field input::-webkit-datetime-edit-year-field{color:#eef1f3}
.auth-date-field input:invalid::-webkit-datetime-edit{color:#6c7884}
/* Sablonun istedigi gri bos tarih: parca renkleri (ustte beyaz) kabin
   rengini eziyordu, bos alan dolu gibi "gg.aa.yyyy" basiyordu. */
.auth-date-field input:invalid::-webkit-datetime-edit-text,.auth-date-field input:invalid::-webkit-datetime-edit-month-field,.auth-date-field input:invalid::-webkit-datetime-edit-day-field,.auth-date-field input:invalid::-webkit-datetime-edit-year-field{color:#6c7884}

.auth-checkline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1px 0 5px;color:#7d8995;font-size:9px}
.auth-checkline label{display:flex;align-items:center;gap:6px;cursor:pointer}
.auth-checkline input,.auth-consent input{accent-color:#eb2941}
.auth-checkline a{color:#e33b4d;text-decoration:none}
/* flex: auth.js gonderimde is-sending basar, halka ortada dursun. */
.auth-submit{position:relative;display:flex;height:45px;align-items:center;justify-content:center;border:1px solid #f33b51;border-radius:9px;background:linear-gradient(135deg,#ef243c,#ba0d21);box-shadow:0 12px 24px rgba(216,20,43,.23);color:#fff;font-size:11px;font-weight:900;cursor:pointer;transition:.2s}
.auth-submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.auth-submit.is-sending{color:transparent;pointer-events:none}
.auth-submit.is-sending:after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:auth-spin .6s linear infinite}
/* Sablonda formun icinde (gap 10 + margin 3); burada formun altinda. */
.auth-footer-switch{margin:13px 0 0;text-align:center;color:#77838f;font-size:10px}
.auth-footer-switch a{color:#ed344b;font-weight:900;text-decoration:none}
/* Sablonda display:none + .is-visible; burada [hidden] (yalniz 2. adimda). */
.auth-back{display:flex;align-items:center;gap:5px;margin:0 0 14px;padding:0;border:0;background:transparent;color:#9aa6b1;font-size:10px;font-weight:800;cursor:pointer}
/* .auth-modal oneki: onay etiketi .field'in dogrudan cocugu ve yukaridaki
   .field > label (12.5px, kalin, blok) onu eziyordu. */
.auth-modal .auth-consent{display:flex;align-items:center;gap:7px;margin:1px 0 3px;color:#87929e;font-size:8px;font-weight:400;letter-spacing:0;line-height:1.4;cursor:pointer}
.auth-consent a{color:#ed384d}

/* Mevcut parcalar pencerede. Sablonun .auth-note'u (guvenlik kelimesi
   notu) burada .hint'in gorunumu oldu: auth.css'in kendi .auth-note'u
   kimlik sayfalarinin aciklama satiri, ad cakisiyordu. */
.auth-modal .field{margin:0}
.auth-modal .hint{margin:4px 0 0;color:#707b86;font-size:8px;font-weight:400;line-height:1.35}
.auth-modal .err{margin-top:5px;font-size:10px}
.auth-modal .field.is-bad .auth-field{border-color:var(--coral)}
.auth-modal .field-check .err{margin-inline-start:20px}
.auth-modal .meter{margin-top:6px}
.auth-modal .err-box{margin:0 0 12px;padding:10px 12px;border-radius:9px;font-size:10px}
/* Kayit hatayla dondu, sifreler geri dolmadi: "yeniden gir" notu (yalniz
   o durumda basilir). Uyari tonu hata kutusuyla ayni aile, daha sakin. */
.auth-modal .auth-yeniden{margin:0;padding:8px 11px;border:1px solid rgba(255,176,74,.32);border-radius:8px;background:rgba(255,176,74,.08);color:#ffd9a3;font-size:10px;font-weight:700;line-height:1.4}

@media(max-width:780px){
.auth-modal-backdrop{padding:14px}
.auth-modal{width:100%;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);min-height:0;grid-template-columns:1fr;border-radius:20px;overflow:auto;overscroll-behavior:contain}
.auth-visual{display:none}
.auth-form-side{display:flex;flex-direction:column;justify-content:center;padding:64px 20px 30px;min-height:0}
.auth-close{inset-inline-end:14px;top:14px}
.auth-heading h2{font-size:34px}
/* Sablon yalniz sekme + formu 430px'e oturtuyordu, baslik tam genislikte
   kaliyordu; pano butun olarak ortalaniyor. */
.auth-tabs{margin:0 auto 24px;width:100%;max-width:430px}
.auth-pane{width:100%;max-width:430px;margin-inline:auto}
/* iOS 16px altindaki girdide odakta sayfayi buyutuyor, pencere kayiyordu. */
.auth-field input{font-size:16px}
}
@media(max-width:420px){
.auth-form-side{padding-inline:16px}
.auth-heading p{margin-bottom:17px}
.auth-row{grid-template-columns:1fr}
.auth-field{min-height:47px}
}
@media(prefers-reduced-motion:reduce){
.auth-modal-backdrop,.auth-modal{transition:none}
.auth-submit.is-sending:after{animation:none}
}