/* ============================================================
   BAYİ GİRİŞİ — referans tasarım (BayiLogin.cshtml, 12 Eylül 2026)
   ============================================================

   BİRİNCİ BÖLÜM referansın satır içi CSS'inin BİREBİR kopyasıdır; tek fark
   Razor kaçışının çözülmesi (`@@media` → `@media`). Referans güncellenirse
   YALNIZCA bu bölüm değiştirilir.

   İKİNCİ BÖLÜM ("EKLENENLER") referansta tasarımı OLMAYAN parçalar içindir:
   referans yalnızca TELEFON adımını çiziyor, oysa bu sayfa üç adım ve bir
   "Şifremi Unuttum" modalı taşıyor (bkz. CLAUDE.md → "Bayi portalı").
   ============================================================ */

:root { --blue:#0784ef; --navy:#101d45; --muted:#647da1; --line:#dbe5f2; --bg:#eaf5ff; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--navy); font-size:16px; background:radial-gradient(ellipse at 20% 10%,#dcefff,transparent 55%),#eff7fd; }
input,button { font:inherit; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
button,a,input { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #04b9ef; outline-offset:4px; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.page { width:min(1510px,calc(100% - 96px)); margin:auto; }
.topbar { min-height:88px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { display:inline-flex; align-items:flex-start; color:#119bea; font-weight:800; font-size:34px; letter-spacing:-1.4px; }
.brand:hover { text-decoration:none; }
.brand .heart { width:17px; height:17px; fill:currentColor; margin:0 0 0 2px; }
.back { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; min-height:44px; }
.back .icon { width:20px; height:20px; }
.portal { display:grid; grid-template-columns:45% 55%; min-height:740px; min-height:min(780px,calc(100svh - 160px)); border-radius:24px; background:#fff; overflow:hidden; box-shadow:0 25px 60px #377cad13; }
.visual { background:radial-gradient(ellipse at 100% 0%,#126dd1,transparent 55%),linear-gradient(155deg,#073675,#064993 65%,#0c4c95); color:white; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; }
.visual:before { content:""; position:absolute; width:390px; height:390px; border-radius:50%; background:#3593fa12; top:-250px; right:-80px; z-index:-1; }
.visual-copy { padding:clamp(32px,4vw,68px) clamp(30px,5vw,82px) 0; }
.badge { display:inline-flex; align-items:center; gap:10px; border:1px solid #22d7ff; border-radius:30px; color:#45dbff; font-size:14px; font-weight:700; padding:12px 18px; }
.badge .icon { width:20px; height:20px; }
h1 { font-size:clamp(32px,3.3vw,53px); line-height:1.17; letter-spacing:-1.2px; margin:28px 0 20px; }
.visual-copy p { font-size:clamp(17px,1.55vw,23px); line-height:1.6; color:#bdd8f7; margin:0; }
.art { margin:auto 0 0; width:100%; position:relative; }
.art img { display:block; width:100%; height:auto; aspect-ratio:650/365; object-fit:contain; }
/* PNG orijinal tasarımdan kırpılmıştır; çevresindeki mavi fon korunur.
   Üst ve alt geçiş katmanları görselin panelle birleşmesini yumuşatır. */
.art:before,.art:after { content:""; position:absolute; left:0; right:0; height:35px; pointer-events:none; }
.art:before { top:0; background:linear-gradient(#064993,transparent); }
.art:after { bottom:0; background:linear-gradient(transparent,#0c4c95); }
.visual-footer { margin:0; padding:16px 42px 32px; color:#b7d5f6; font-size:14px; }
.form-side { padding:40px clamp(30px,6.8vw,120px); display:flex; align-items:center; }
.form-content { width:100%; max-width:600px; margin:auto; }
.form-head { text-align:center; }
.store-bubble { width:80px; height:80px; margin:0 auto 15px; border-radius:50%; background:#e5f3ff; display:grid; place-items:center; color:var(--blue); }
.store-bubble .icon { width:40px; height:40px; stroke-width:2; }
h2 { font-size:36px; letter-spacing:-.7px; margin:0 0 10px; }
.intro { color:var(--muted); margin:0; line-height:1.6; font-size:17px; }
.progress { margin:28px auto 24px; }
.steps { display:flex; justify-content:center; gap:10px; list-style:none; padding:0; margin:0 0 14px; }
.steps li { width:64px; height:9px; border-radius:20px; background:#e5ebf3; }
.steps .current { background:linear-gradient(90deg,#17a3ec,#0481e3); }
.step-text { font-size:13px; color:#41577c; margin:0; }
.info { display:flex; align-items:flex-start; gap:14px; background:#f1f8ff; border:1px solid #d2e9ff; border-radius:12px; padding:15px 18px; margin:0 0 20px; }
.info .icon { color:var(--blue); width:22px; height:22px; margin-top:1px; }
.info p { margin:0; font-size:14px; line-height:1.65; }
.field-label { display:block; font-weight:700; margin:0 0 10px; }
.phone-box { display:flex; align-items:center; gap:16px; min-height:64px; border:2px solid var(--line); background:#fff; border-radius:15px; padding:0 22px; transition:border-color .15s,box-shadow .15s; }
.phone-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #008bff0c; }
.phone-box>.icon { color:#8399b6; }
.country { color:#617ca3; padding-right:20px; border-right:1px solid #cedbea; white-space:nowrap; }
.phone-box input { min-width:0; width:100%; height:60px; border:0; outline:0; background:transparent; color:var(--navy); font-size:18px; }
.phone-box input:focus-visible { outline:none; }
.phone-box input::placeholder { color:#95a8c1; }
.helper { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.field-error { color:#b0253e; font-size:14px; line-height:1.5; margin:8px 0 0; }
.field-error:empty { display:none; }
.phone-box:has([aria-invalid="true"]) { border-color:#c64154; }
.submit { border:0; display:flex; align-items:center; justify-content:center; gap:16px; width:100%; min-height:64px; border-radius:15px; background:linear-gradient(100deg,#159fe6,#078bed); color:#fff; font-size:20px; font-weight:750; cursor:pointer; margin-top:22px; box-shadow:0 7px 18px #1193ee12; }
.submit:hover { background:linear-gradient(100deg,#078ee0,#087bda); }
.submit:disabled { opacity:.65; cursor:wait; }
.forgot { display:flex; justify-content:center; margin-top:18px; }
.forgot a { display:inline-flex; align-items:center; min-height:44px; gap:9px; font-size:15px; }
.forgot .icon { width:19px; height:19px; }
.support { margin-top:20px; padding-top:22px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:14px; line-height:1.8; }
.support a { font-weight:600; display:inline-block; margin-left:5px; }
.footer { padding:24px 0; text-align:center; font-size:13px; color:#6c89ad; }
.errors { color:#a92036; background:#fff2f4; border:1px solid #f6d3d9; border-radius:12px; font-size:14px; line-height:1.5; padding:14px 18px; margin:0 0 16px; }
.errors ul { margin:0; padding-left:18px; }
.validation-summary-valid,.errors:empty { display:none; }
@media(min-width:1700px) { .portal { min-height:780px; } }
@media(max-width:1150px) { .page { width:calc(100% - 48px); } .form-side { padding:32px; } .visual-copy { padding:38px 32px 0; } h1 { font-size:38px; } .visual-copy p { font-size:18px; } .visual-footer { padding-left:30px; } }
@media(max-width:800px) { .page { width:min(580px,calc(100% - 28px)); } .topbar { min-height:80px; gap:14px; } .brand { font-size:28px; } .back { font-size:13px; max-width:160px; } .portal { display:flex; flex-direction:column; min-height:0; border-radius:22px; } .visual { padding:0; } .visual-copy { padding:26px 28px; } .badge { padding:8px 12px; font-size:12px; } h1 { font-size:29px; margin:18px 0 10px; } .visual-copy p { font-size:15px; } .art,.visual-footer { display:none; } .form-side { padding:28px; } .store-bubble { width:62px; height:62px; } .store-bubble .icon { width:32px; height:32px; } h2 { font-size:29px; } .intro { font-size:15px; } .info { padding:13px; gap:10px; } .info p { font-size:13px; } .phone-box { padding:0 14px; gap:12px; } .country { padding-right:12px; } .phone-box input { font-size:16px; } .footer { padding:20px 0; } }
@media(max-width:370px) { .form-side { padding:22px 18px; } .topbar { gap:8px; } .brand { font-size:25px; } .back { font-size:12px; } .phone-box>.icon { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

/* ============================================================
   EKLENENLER — referansta tasarımı OLMAYAN parçalar
   ============================================================ */

/* ---- adımlar ----
   Üç adım AYRI SAYFA DEĞİL, aynı kartın içinde yer değiştiren görünümlerdir:
   ayrı sayfa olsalardı her adımda tam sayfa yenilenir ve kullanıcının
   girdiği numara ile bulunan bayi kimliği kaybolurdu. */
.step { display: none; }
.step.active { display: block; animation: stepIn .22s ease; }

@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Referans yalnızca "current" durumunu tanımlıyor; tamamlanmış adım da
   ayırt edilmeli, yoksa 3. adımda ilk iki nokta hiç girilmemiş gibi görünür. */
.steps .done { background: #9fd2f6; }

/* ---- şifre alanı ----
   Referansın `.phone-box` kabuğu PAYLAŞILIR, ikinci bir alan stili
   yazılmaz: iki kutu farklı dosyalarda yaşasaydı biri değiştiğinde öteki
   sessizce eskirdi. Fark yalnızca ülke ayıracının olmaması ve göz düğmesi. */
.pw-toggle {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 40px; height: 44px;
    padding: 0; border: 0;
    background: none; color: #8399b6; cursor: pointer;
}

.pw-toggle:hover { color: var(--navy); }
.pw-toggle .icon { width: 22px; height: 22px; }

/* ---- şifre gücü ---- */
.pw-strength { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 6px; }
.pw-bar { height: 6px; border-radius: 3px; background: #e5ebf3; transition: background .2s; }
.pw-text { font-size: 13px; color: var(--muted); min-height: 18px; }

/* ---- karşılama (2. adım) ----
   Bayinin hangi hesaba şifre oluşturduğunu görmesi gerekiyor: aynı numara
   birden çok firmada yetkili olabilir. */
.welcome {
    text-align: center;
    margin: 0 0 22px; padding: 18px;
    border: 1px solid #d2e9ff; border-radius: 14px;
    background: #f1f8ff;
}

.welcome-name { font-size: 20px; font-weight: 700; }
.welcome-company { color: var(--muted); font-size: 15px; margin-top: 4px; }
.welcome-msg { color: #41577c; font-size: 14px; margin-top: 10px; }

/* ---- uyarı kutuları ----
   Referansın `.errors` kutusu yalnızca KIRMIZI; akış "kod gönderildi" gibi
   olumlu ve "hesabınız pasif" gibi nötr durumlar da bildiriyor. */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 12px; font-size: 14px; line-height: 1.55;
    padding: 14px 18px; margin: 0 0 16px;
}

.alert:empty { display: none; }
.alert .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.alert-danger { color: #a92036; background: #fff2f4; border: 1px solid #f6d3d9; }
.alert-success { color: #12694a; background: #eefaf4; border: 1px solid #bde9d5; }
.alert-info { color: #1b4f87; background: #f1f8ff; border: 1px solid #d2e9ff; }

/* ---- düğme çeşitleri ---- */
.submit-success { background: linear-gradient(100deg, #18b57e, #0e9a68); }
.submit-success:hover { background: linear-gradient(100deg, #12a772, #0c8a5c); }

/* Metin ile dönen daire AYNI düğmenin içinde yer değiştirir; düğme
   kaybolmaz, yoksa altındaki her şey yukarı kayar ve sayfa zıplardı. */
.submit .spinner {
    width: 20px; height: 20px;
    border: 2.5px solid #ffffff66; border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- ikincil bağlantı (adım içi "Şifremi Unuttum") ----
   ⚠️ Referans bunu SINIFSIZ bir <a href> olarak yazıyor ve görünümünü
   dosyanın başındaki genel `a {}` kuralından alıyor. Bizde hedef ayrı bir
   sayfa değil bir MODAL, yani öge <button>; genel kural düğmeye UYMAZ ve
   yazılmasaydı tarayıcının gri kutusu çizilirdi (bkz. panel giriş ekranında
   yaşanan aynı tuzak). */
.link-button {
    padding: 0; border: 0; background: none;
    color: var(--blue); font: inherit;
    text-decoration: none; cursor: pointer;
}

.link-button:hover { text-decoration: underline; }

/* ---- "Şifremi Unuttum" modalı ----
   <dialog> kullanılır: ortalama, örtü, ESC ile kapanma ve odak tuzağı
   tarayıcıdan gelir. Elle yazılsaydı odak yönetimi de elle kurulurdu. */
.modal {
    /* ⚠️ Konum ELLE yazılır: dosyanın başındaki `* { box-sizing }` ve
       gövde sıfırlamaları UA'nın "inset:0 + margin:auto" ortalamasını
       bozabiliyor (panel giriş ekranında kutu sol üste yapışmıştı). */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(480px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px #0714331f;
    color: var(--navy);
    overflow: hidden;
}

.modal::backdrop { background: #0a1c3c66; backdrop-filter: blur(2px); }
.modal[open] { animation: modalIn .2s cubic-bezier(.2, .9, .3, 1.2); }

@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    font-size: 19px; font-weight: 700;
}

.modal-head .icon { color: var(--blue); }

.modal-close {
    margin-left: auto;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 0; border-radius: 10px;
    background: none; color: var(--muted); cursor: pointer;
}

.modal-close:hover { background: #eef3f9; color: var(--navy); }
.modal-body { padding: 24px; }
.modal-body p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.modal-foot { display: flex; gap: 12px; padding: 0 24px 24px; }
.modal-foot .submit { min-height: 54px; font-size: 17px; }

.btn-ghost {
    flex: 0 0 auto;
    min-height: 54px; padding: 0 22px;
    border: 1px solid var(--line); border-radius: 15px;
    background: #fff; color: var(--navy); font-weight: 600; cursor: pointer;
}

.btn-ghost:hover { background: #f3f7fc; }

/* ⚠️ Bu kural ŞART: sınıfla tanımlı `display` değerleri tarayıcının kendi
   [hidden] kuralını ezer ve gizli sayılan öge ekranda kalırdı. */
[hidden] { display: none !important; }

/* ---- marka görseli ----
   ⚠️ Referans markayı METİN olarak yazıyor; bizde gerçek kelime logosu var
   (panel giriş ekranında da o kullanıldı). Yalnızca YÜKSEKLİK sabitlenir,
   genişlik `auto`: ikisi de sabitlenseydi 500×155 olan görsel ezilirdi.
   Ölçüler referansın yazı boyutlarına (34 / 28 / 25 px) hizalandı. */
.brand img { height: 30px; width: auto; display: block; }

@media(max-width:800px) { .brand img { height: 25px; } }
@media(max-width:370px) { .brand img { height: 22px; } }

/* ---- "Şifremi Unuttum" satırı ----
   Referans `.forgot a` yazıyor; bizde hedef ayrı sayfa değil bir modal,
   yani öge <button>. Görünüm birebir aynı kalmalı. */
.forgot .link-button {
    display: inline-flex; align-items: center;
    min-height: 44px; gap: 9px;
    font-size: 15px;
}


/* ---- arka arkaya gelen alanlar ----
   ⚠️ Referansın `.field-label` kuralı ÜST kenar boşluğu taşımıyor; o ekranda
   tek alan var. 2. adımda iki alan alt alta duruyor ve ikinci etiket şifre
   gücü metnine YAPIŞIYORDU (ölçüldü: 0 px, ötekilerde 22 px). Değer, aynı
   adımdaki öteki boşluklarla aynı olsun diye 22 px. */
.pw-text + .field-label,
.phone-box + .field-label { margin-top: 22px; }

/* ---- ekranı TAM KAPLAMA (kullanıcının kararı, 12 Eylül 2026) ----
   ⚠️ Referanstan bilinçli sapma. Referans kartı
   `min-height: min(780px, calc(100svh - 160px))` ile 780 px'de SINIRLIYOR;
   uzun ekranlarda (ölçüldü: 1215 px görünüm) altta ~280 px boş zemin
   kalıyordu. Panel giriş ekranındaki `.shell` gibi görünümün tamamını
   doldurması istendi.

   ⚠️ Referansın `min-height` satırı SİLİNMEDİ, üstüne yazılmadı: o değer
   artık bir TABAN olarak iş görüyor (kısa ekranda kart okunmaz hâle gelecek
   kadar kısalmasın), üst sınırı ise `flex` kaldırıyor.

   ⚠️ Ölçü `svh`dir, `vh` değil: mobilde adres çubuğu görünürken `100vh`
   görünümden BÜYÜK olur ve sayfa hiç kaydırılmadığı hâlde altta bir şerit
   taşardı. */
.page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* Üst çubuk ve alt bilgi kendi yüksekliklerini korur; artan yeri kart alır. */
.portal { flex: 1 1 auto; }