/* ==================================================================
   BestPos giriş ekranı düzeltmeleri

   Ayrı dosya, bilerek: style.css satıcı temasının ana dosyası ve
   güncellemede üzerine yazılabiliyor. Buradaki kurallar en son
   yüklendiği için tema kurallarını geçersiz kılar.

   Ölçüm 2026-08-27, canlı sayfa, 1440 ve 390 piksel genişlik.
   ================================================================== */

:root {
    --bp-kirmizi: #c52127;
    --bp-kirmizi-koyu: #a41a1f;
    --bp-metin: #101828;
    --bp-metin-soluk: #475467;
    --bp-cizgi: #d0d5dd;
}

/* ------------------------------------------------------------------
   Yatay taşma

   Logo kabı "w-100 mx-4" ile yazılmıştı: genişlik %100 (1440 piksel)
   artı iki yandan 24'er piksel kenar boşluğu. Ölçüldü: belge
   genişliği 1464 piksel, pencere 1440 piksel. Sayfa yana kayıyordu
   ve sağda beyaz bir şerit kalıyordu.

   Kenar boşluğu yerine iç boşluk kullanılıyor, box-sizing border-box
   olduğu için genişlik büyümüyor.
------------------------------------------------------------------ */
.footer .footer-logo.bestpos-auth-logo {
    width: 100%;
    margin: 0;
    padding: 24px 32px 0;
}

/* ------------------------------------------------------------------
   Dikey boşluk

   Kart 1000 piksellik pencerede 404 piksel yer kaplıyordu, üstünde
   256 piksel boş kırmızı alan vardı. Bölüm yüksekliği logo şeridini
   de hesaba katacak biçimde düzeltildi, alt kenarda nefes payı
   bırakıldı.
------------------------------------------------------------------ */
.mybazar-login-section {
    height: auto;
    min-height: calc(100vh - 96px);
    padding-bottom: 48px;
}

/* ------------------------------------------------------------------
   Kart

   Gölge yalnızca sola düşüyordu (-16px 0), bu yüzden kart sağ
   kenarda zemine yapışık görünüyordu. Yönsüz gölge ile kart tek
   başına bir yüzey gibi duruyor.
------------------------------------------------------------------ */
.mybazar-login-section .login-wrapper {
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .28);
}

/* Başlık 30, alt satır 20 pikseldi: aradaki fark az olduğu için
   ikisi de başlık gibi okunuyordu. Alt satır gövde ölçüsüne indi. */
.mybazar-login-section .login-wrapper h2 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -.01em;
}

.mybazar-login-section .login-wrapper h6 {
    font-size: 16px;
    line-height: 24px;
    color: var(--bp-metin-soluk);
    margin-top: 6px;
    margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   Alan etiketleri

   Önceki hâlde alanın ne istediğini yalnızca placeholder söylüyordu:
   kullanıcı yazmaya başlayınca etiket kayboluyor, ekran okuyucu da
   alanı adlandıramıyordu. Blade tarafında görünür label eklendi,
   burada biçimi veriliyor.
------------------------------------------------------------------ */
.mybazar-login-section .field-block {
    margin-top: 16px;
}

.mybazar-login-section .field-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--bp-metin);
    margin-bottom: 6px;
}

/* Alan zemini %30 saydam gri idi, kenarlığı da soluktu: kutunun
   nerede başladığı belli olmuyordu. Zemin beyaz, kenarlık opak. */
.mybazar-login-section .login-wrapper .input-group {
    margin-top: 0;
    background-color: #fff;
    border: 1px solid var(--bp-cizgi);
    border-radius: 8px;
    overflow: hidden;
}

.mybazar-login-section .login-wrapper .input-group .form-control {
    height: 50px;
    background-color: #fff;
}

/* Odak halkası: klavye ile gezen kullanıcı hangi alanda olduğunu
   görebilmeli. Tema hiçbir yerde odak biçimi tanımlamamıştı. */
.mybazar-login-section .login-wrapper .input-group:focus-within {
    border-color: var(--bp-kirmizi);
    box-shadow: 0 0 0 3px rgba(197, 33, 39, .16);
}

.mybazar-login-section .login-wrapper .input-group .form-control:focus {
    outline: none;
}

/* Parolayı göster düğmesi tıklanabilir olduğunu belli etsin. */
.mybazar-login-section .login-wrapper .input-group .hide-pass {
    cursor: pointer;
    padding: 8px;
    right: 8px;
}

/* ------------------------------------------------------------------
   Dokunma hedefleri

   Ölçüldü: onay kutusu 18x18, "Anasayfaya Dön" ve "Hesap Oluştur"
   17 piksel yüksekliğinde, "Parolayı Unuttunuz mu?" 24 piksel.
   Hepsi 44 pikselin altındaydı. Tıklama alanı büyütüldü, yazı
   boyutu okunurluğu bozmayacak biçimde korundu.
------------------------------------------------------------------ */
.mybazar-login-section .forget-password {
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
}

.mybazar-login-section .forget-password label.custom-control-label {
    min-height: 44px;
    padding: 10px 0;
    margin: 0;
    gap: 10px;
}

/* Seçici custom.css:11 ile aynı biçimde yazıldı. Orada
   "input[type=checkbox]" kullanıldığı için öğe seçicisi de
   sayılıyor ve yalnızca sınıfla yazılan kural kaybediyordu:
   width 20px verildiği hâlde hesaplanan değer 18px kalmıştı. */
.mybazar-login-section .forget-password input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bp-kirmizi);
    cursor: pointer;
    margin-top: 0;
}

/* custom.css:34 işaretli kutuya "accent-color: #3291d4 !important"
   veriyordu: kullanıcı "Beni Hatırla"yı seçince kutu marka
   kırmızısı yerine maviye dönüyordu. Sayfada başka hiçbir yerde
   bu mavi yok. Marka rengine çevrildi. */
.mybazar-login-section .forget-password input[type="checkbox"]:checked {
    accent-color: var(--bp-kirmizi) !important;
}

.mybazar-login-section .forget-password a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--bp-metin-soluk);
}

/* ------------------------------------------------------------------
   Giriş düğmesi
------------------------------------------------------------------ */
.mybazar-login-section .login-btn {
    min-height: 52px;
    margin-top: 20px;
    border-radius: 8px;
    transition: background-color .18s ease, transform .18s ease;
}

.mybazar-login-section .login-btn:hover {
    background: var(--bp-kirmizi-koyu);
}

.mybazar-login-section .login-btn:active {
    transform: translateY(1px);
}

/* ------------------------------------------------------------------
   Kart altındaki iki bağlantı

   Bootstrap row/col ile yazılmıştı; iki bağ 14 piksel yazı ve
   17 piksel yükseklikteydi. Asıl iş giriş yapmak olduğu için ikisi
   de ikincil kalıyor, yalnızca tıklama alanı ve ayırıcı çizgi
   ekleniyor.
------------------------------------------------------------------ */
.mybazar-login-section .login-foot-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #eaecf0;
}

.mybazar-login-section .login-foot-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: var(--bp-metin-soluk);
    text-decoration: none;
}

.mybazar-login-section .login-foot-links a.text-primary {
    color: var(--bp-kirmizi) !important;
    font-weight: 600;
}

.mybazar-login-section .login-foot-links a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Klavye odağı
------------------------------------------------------------------ */
.mybazar-login-section a:focus-visible,
.mybazar-login-section button:focus-visible,
.mybazar-login-section .hide-pass:focus-visible,
.mybazar-login-section input[type="checkbox"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 6px;
}

.mybazar-login-section .login-wrapper a:focus-visible,
.mybazar-login-section .login-wrapper button:focus-visible,
.mybazar-login-section .login-wrapper .hide-pass:focus-visible,
.mybazar-login-section .login-wrapper input[type="checkbox"]:focus-visible {
    outline-color: var(--bp-kirmizi);
}

/* ------------------------------------------------------------------
   Tablet ve telefon

   Tema 1200 pikselin altında logoyu tamamen gizliyordu
   (style.css:4775, display: none). Giriş ekranında marka adı
   kalmıyordu; kullanıcının doğru adreste olduğunu gösteren tek
   işaret o olduğu için geri getirildi.

   Aynı kural bloğunda kart kabının kenar boşluğu "30px 30px 30px
   14px" yazılmıştı: sağdan 30, soldan 14 piksel. Kart ekranın
   ortasında değil 8 piksel sağda duruyordu. Eşitlendi.
------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .footer .footer-logo.bestpos-auth-logo {
        display: block;
    }

    .mybazar-login-section {
        height: auto;
    }

    .mybazar-login-section .mybazar-login-wrapper {
        margin: 24px;
    }
}

/* ------------------------------------------------------------------
   Dar ekran

   390 pikselde başlık kart kenarlarına değiyordu.
------------------------------------------------------------------ */
@media (max-width: 767px) {
    .footer .footer-logo.bestpos-auth-logo {
        padding: 20px 20px 0;
        text-align: center;
    }

    .footer .footer-logo.bestpos-auth-logo img {
        display: inline-block;
        margin-top: 0;
        height: 36px;
    }

    .mybazar-login-section {
        min-height: calc(100vh - 80px);
        padding: 24px 0 32px;
    }

    .mybazar-login-section .login-wrapper {
        padding: 24px 20px;
    }

    .mybazar-login-section .login-wrapper h2 {
        font-size: 24px;
        line-height: 32px;
    }

    /* İki bağ tek satıra sığmayıp birbirine değiyordu. */
    .mybazar-login-section .forget-password {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mybazar-login-section .login-btn {
        transition: none;
    }

    .mybazar-login-section .login-btn:active {
        transform: none;
    }
}


/* ------------------------------------------------------------------
   Odak halkası, ikinci geçiş

   Ölçüldü 2026-08-27 03:45, Chrome 151, Tab tuşu gerçekten gönderilerek:
   "Giriş Yap" düğmesi ile "Parolayı Unuttunuz mu?", "Anasayfaya Dön",
   "Hesap Oluştur" bağlarının hesaplanan değeri outline-style: none idi,
   yani klavye ile gezen kullanıcı hiçbir halka görmüyordu. Ekran
   görüntüsüyle de doğrulandı: odaklı düğmenin çevresinde çizgi yok.

   Sebep tema ve bootstrap tarafındaki .btn:focus { outline: 0 } ve
   "a, a:hover, a:focus, a:active { outline: 0 }" kuralları. Ikisi de
   satıcı dosyasında ve bu dosyadan daha yüksek özgüllükte olmadıkları
   halde outline-style'i sıfırlıyorlar. Tek çare aynı silahla karşılık
   vermek; e-posta ve parola alanlarında gerek yok, orada
   :focus-within kenarlığı zaten görünür (ölçüldü: 3 piksel halka).

   Kart beyaz zeminli olduğu için halka marka kırmızısı; kartın dışında
   kalan bağlar kırmızı zemin üzerinde durduğu için beyaz.
------------------------------------------------------------------- */
.mybazar-login-section .login-wrapper a:focus-visible,
.mybazar-login-section .login-wrapper button:focus-visible,
.mybazar-login-section .login-wrapper .btn:focus-visible {
    outline: 2px solid var(--bp-kirmizi, #c52127) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

.mybazar-login-section > .footer-logo a:focus-visible,
.mybazar-login-section .bestpos-auth-logo a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
}