:root {
    /* Bilser Yazılım kurumsal rengi ("Only Web" varyantı, bkz. Bilsernet Docs/images/Renk Kodu.txt) —
       06.09.2026, TASARIM Bölüm P.8/Grup B: Radzen'in ücretsiz Material temasının üzerine CSS
       değişkeniyle bindiriliyor, yeni bir tema paketi KURULMADI. */
    --bilsernet-marka: #660000;
    --bilsernet-marka-acik: color-mix(in srgb, var(--bilsernet-marka) 40%, white);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* TASARIM Bölüm I.5 (bağlayıcı UX kuralı): dokunma hedefi >=60px, yazı >=18px — hedef kullanıcı
   yaşı yüksek, teknoloji okuryazarlığı düşük saha temsilcisi. Giriş ekranı da bu profille
   karşılaşan İLK ekran olduğu için aynı kural burada da uygulandı. */
.giris-sayfa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* eski tarayıcılar için yedek */
    min-height: 100dvh; /* mobilde adres çubuğu açılıp kapandıkça GERÇEK görünür yüksekliği izler
                            — 100vh sabit/en-büyük yüksekliği varsayar, bu yüzden içerik "dar/kırpık"
                            görünüyordu (02.09.2026, kullanıcı bildirimi) */
    background: #f5f5f7;
}

.giris-kutu {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.giris-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin: 0 auto 1.5rem;
}

.giris-kutu label {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
}

.giris-kutu input {
    display: block;
    width: 100%;
    min-height: 60px;
    margin-top: 0.4rem;
    padding: 0 1rem;
    font-size: 1.125rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.giris-kutu button {
    width: 100%;
    min-height: 60px;
    font-size: 1.125rem;
    background: var(--bilsernet-marka);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.giris-hata {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fdecea;
    color: #b32121;
    border-radius: 8px;
    font-size: 1rem;
}

.ana-sayfa {
    max-width: 640px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* TODO-12 — "Leb Demeden" ekranı. TASARIM Bölüm I.5: dokunma hedefi >=60px, gövde yazı >=18px,
   tek sütun doğrusal akış — bu dosyadaki her etkileşimli öğe bu iki asgariyi karşılar. */
.sip-sayfa {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.sip-baslik {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.sip-alt-baslik {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
}

.sip-bilgi {
    font-size: 1rem;
    color: #555;
}

.sip-geri {
    background: none;
    border: none;
    color: var(--bilsernet-marka);
    font-size: 1.125rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

/* TASARIM Bölüm 4.1/4.2 (18.09.2026, TALİMAT Bölüm 4.1/4.2) — cari ünvanı: tam satır genişliğinde,
   TEK satır. Taşma durumunda önceden son birkaç karakter sessizce KESİLİYORDU (kutunun kendi
   `overflow` davranışı) — artık BİLEREK yatay kaydırılabilir bırakıldı (metin ASLA kaybolmaz,
   parmakla/fare ile kaydırılıp TAMAMI okunabilir — bu, sabit "..." göstergesinden daha
   BÜTÜNLÜKLÜ bir çözüm: "..." salt görsel bir ipucudur ama içeriği GÖRÜNMEZ kılar, kaydırma ise
   hem taşmayı görsel olarak (sağ kenarda solan bir geçişle) belli eder HEM DE tam metne erişimi
   korur). Kaydırma çubuğu gizlendi (görsel gürültü) ama kaydırma İŞLEVİ kalıyor. Masaüstünde
   `title` özniteliği (Siparis.razor'da eklendi) fare ile üzerine gelince tam metni tooltip
   olarak gösterir — native tarayıcı davranışı, ek JS/kütüphane GEREKMEDİ. */
.sip-cari-satir {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox — kaydırma çubuğu gizli, kaydırma YİNE çalışır */
    margin: 0.25rem 0 1rem;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

.sip-cari-satir::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge — kaydırma çubuğu gizli, dokunmatik/fare kaydırma ÇALIŞIR */
}

.sip-arama {
    display: block;
    width: 100%;
    min-height: 60px;
    padding: 0 1rem;
    font-size: 1.125rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.sip-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sip-kart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 60px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.sip-kart-baslik {
    font-size: 1.125rem;
    font-weight: 600;
}

.sip-kart-alt {
    font-size: 1rem;
    color: #666;
}

.sip-buton-birincil {
    width: 100%;
    min-height: 60px;
    font-size: 1.25rem;
    font-weight: 600;
    background: var(--bilsernet-marka);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
}

.sip-buton-birincil:disabled {
    background: var(--bilsernet-marka-acik);
    cursor: not-allowed;
}

/* TASARIM Bölüm S.2.4 (09.09.2026) — gönderim sırasında görsel ilerleme göstergesi: buton
   metninin tek başına değişmesi, bekleme süresi birkaç saniyeye çıktığında "bir şey oluyor mu?"
   belirsizliğini gidermeye yetmiyordu; kullanıcı bunu tekrar tekrar basmaya çalışarak
   yorumlayabiliyordu (veri idempotent korunuyor olsa da UX'i bozuyordu). */
.sip-spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.5em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.2em;
    animation: sip-spin 0.7s linear infinite;
}

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

.sip-buton-ikincil {
    width: 100%;
    min-height: 60px;
    font-size: 1.125rem;
    background: #eceff1;
    color: var(--bilsernet-marka);
    border: 1px solid #c5cae9;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0.75rem;
}

.sip-kamera video {
    width: 100%;
    border-radius: 8px;
    margin-top: 0.75rem;
}

.sip-miktar-kutu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
}

.sip-miktar-satir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
}

.sip-miktar-buton {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: #eceff1;
    color: var(--bilsernet-marka);
    border: 1px solid #c5cae9;
    border-radius: 8px;
    cursor: pointer;
}

.sip-miktar-deger {
    font-size: 1.25rem;
    min-width: 100px;
    text-align: center;
}

/* TASARIM Bölüm R.2 (07.09.2026) — ondalık miktar giriş kutusu (inputmode="decimal": mobil
   işletim sisteminin kendi sayısal klavyesini açar, kendi tuş takımımız GEREKMEDİ). */
.sip-miktar-giris {
    width: 100px;
    min-height: 60px;
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.sip-sepet {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* TASARIM Bölüm 4.5 (07.09.2026) — sepet akordiyon başlığı: tam genişlik, dokunma hedefi ≥60px. */
.sip-akordiyon-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    padding: 0 0.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 1.125rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.sip-sepet-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.125rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

/* TASARIM Bölüm 4.5 — pastel renk zeminli kutucuklar (kullanıcı talebi: "estetik olmalı"). */
.sip-sepet-satir-pastel {
    background: #f3e9ea; /* --bilsernet-marka'nın (#660000) çok açık pastel tonu */
    border: 1px solid #e6d4d6;
    border-bottom: 1px solid #e6d4d6;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.sip-sil {
    background: none;
    border: none;
    color: #b32121;
    font-size: 1rem;
    min-height: 44px;
    padding: 0 0.75rem;
    cursor: pointer;
}

.sip-cari-bilgi {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* TALİMAT TODO-38 P2.1 (17.09.2026) — Plasiyer satırı artık `sip-cari-bilgi` kutusunun EN ALT
   satırı, ayrı bir bölüm gibi değil; hem salt-okunur metin hem düzenlenebilir kutu için ortak
   üst boşluk (input zaten kendi `.sip-arama` stilinden yükseklik/kenarlık alıyor). */
.sip-cari-bilgi-plasiyer {
    margin: 0.75rem 0 0;
}

.sip-3buton {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sip-tur-buton {
    flex: 1;
    min-height: 60px;
    font-size: 1.125rem;
    font-weight: 600;
    background: #fff;
    border: 2px solid #c5cae9;
    border-radius: 8px;
    cursor: pointer;
}

.sip-tur-buton.sip-secili {
    background: var(--bilsernet-marka);
    color: #fff;
    border-color: var(--bilsernet-marka);
}

.sip-baglanti {
    display: block;
    background: none;
    border: none;
    color: var(--bilsernet-marka);
    font-size: 1.125rem;
    padding: 0.75rem 0;
    cursor: pointer;
    text-align: left;
}

.sip-not {
    width: 100%;
    min-height: 100px;
    font-size: 1.125rem;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.sip-diger {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.sip-etiket {
    display: block;
    font-size: 1.125rem;
    margin-top: 0.75rem;
}

.sip-sayi {
    display: block;
    width: 100%;
    min-height: 60px;
    font-size: 1.125rem;
    padding: 0 1rem;
    margin-top: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.sip-hata {
    background: #fdecea;
    color: #b32121;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 1rem;
}

.sip-gonder {
    font-size: 1.375rem;
}

/* TASARIM Bölüm P.2 — ISiparisOnKontrol Uyari akışı: sessizce geçilmez, kullanıcı açıkça
   onaylar/vazgeçer. Amber/turuncu — hata (kırmızı) ile karıştırılmasın diye ayrı renk. */
.sip-uyari {
    background: #fff8e1;
    color: #8a6100;
    border: 1px solid #ffd54f;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 1.0625rem;
}

.sip-uyari .sip-buton-birincil,
.sip-uyari .sip-buton-ikincil {
    margin-top: 0.75rem;
}

/* TASARIM Bölüm P.3 — Sepet/Özet minimum: GENEL TOPLAM "en büyük, en belirgin" olmalı. */
.sip-toplam {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
}

.sip-onay {
    text-align: center;
    padding-top: 3rem;
}

.sip-onay-tik {
    font-size: 5rem;
    color: #2e7d32;
    margin: 0;
}

/* TASARIM Bölüm 2.1 (18.09.2026, TALİMAT Bölüm 2.1) — KRİTİK mobil kusur: telefonda ürün arama
   kutusuna yazınca açılan öneri listesi, ekran klavyesinin ALTINDA/ARKASINDA kalıp hiç
   GÖRÜNMÜYORDU (klavye kapatılınca görünüyordu — kullanıcı için "sonuç yok" gibi görünen,
   aslında bir GÖRÜNÜRLÜK hatası). Reddedilen alternatifler: (a) listeyi kutunun ÜSTÜNDE açmak —
   klavye yüksekliği cihaza/klavyeye göre değiştiği için KIRILGAN; (b) sadece "sonuç var" ipucu
   göstermek — kullanıcı yine klavyeyi KAPATMAK zorunda kalırdı, 60 saniye hedefine aykırı bir
   FAZLADAN adım. Seçilen çözüm: TAM EKRAN arama katmanı — mobil uygulamalarda YERLEŞİK bir desen,
   "görünür alan hesabıyla uğraşma" sorununu TAMAMEN ortadan kaldırıyor. `position: fixed; inset: 0`
   ile sabitlenen bir katman, mobil tarayıcılarda klavye açıldığında GÖRSEL VIEWPORT'A göre
   otomatik küçülür (`100dvh` ile AYNI mekanizma) — bu yüzden içindeki hiçbir öğe klavyenin
   ARKASINA düşmez, sonuç listesi HER ZAMAN klavyenin ÜSTÜNDEKİ görünür alanda kalır.
   SADECE mobilde (bkz. media query) — masaüstünde bu blok sıradan bir `<div>` gibi akışta kalır,
   MEVCUT açılır liste davranışı hiç DEĞİŞMEDİ ("Masaüstünde mevcut açılır liste davranışı
   korunsun — sorun yalnızca mobilde" talimatı). */
@media (max-width: 640px) {
    .sip-arama-katmani {
        position: fixed;
        inset: 0;
        z-index: 500;
        background: #fff;
        display: flex;
        flex-direction: column;
        padding: 1rem 1rem 0.5rem;
        box-sizing: border-box;
        overflow: hidden; /* dış katman kaymaz — SADECE liste kendi içinde kayar */
    }

    .sip-arama-katmani-ust {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 0 0 auto;
    }

    .sip-arama-katmani-ust .sip-arama {
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    .sip-arama-katmani-barkod {
        flex: 0 0 auto;
        width: 60px;
        min-height: 60px;
        margin-top: 0;
        font-size: 1.5rem;
        padding: 0;
    }

    .sip-arama-katmani-liste {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 0.75rem;
        padding-bottom: 1.5rem;
    }

    /* TALİMAT TODO-38 P1.1 (17.09.2026) — sepet+"Devam Et" artık katmanın İÇİNDE, altta sabit bir
       şerit (bkz. Siparis.razor açıklaması). `flex: 0 0 auto` — sonuç listesi (`liste`, yukarıda
       `flex:1 1 auto`) bu şeride yer açmak için küçülür, şerit HİÇ küçülmez/kaybolmaz. */
    .sip-arama-katmani-sepet {
        flex: 0 0 auto;
        border-top: 1px solid #eee;
        padding-top: 0.25rem;
    }

    /* Açık sepet listesi sınırsız büyüyüp alttaki "Devam Et" butonunu dış katmanın
       `overflow:hidden`'ı ARKASINA itebilirdi (çok sayıda kalemde) — kendi içinde sınırlı/kaydırmalı. */
    .sip-arama-katmani-sepet .sip-sepet {
        max-height: 30vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* TALİMAT TODO-38 P1.2 (17.09.2026) — mobilde parmakla yukarıdan aşağı sürükleme (native "pull to
   refresh") tarayıcıyı SAYFAYI YENİLİYORDU; bu Blazor Server devresini (SignalR) kopardığı için
   sepet TAMAMEN kayboluyor, kullanıcı "Cari Seç" ekranına başa dönüyordu (veri kaybı, kullanıcı
   bulgusu). Kök nedeni ortadan kaldırmak (jesti tamamen devre dışı bırakmak), jesti YAKALAYIP özel
   bir onay penceresi göstermekten daha SAĞLAM: ikincisi dokunma olaylarını elle izlemeyi ve tam
   ekranda HER ZAMAN doğru çalışacağını garanti etmeyi gerektirir (cihaz/tarayıcıya göre kırılgan
   olabilir), oysa `overscroll-behavior` standart bir CSS özelliğidir ve PWA'larda pull-to-refresh
   zaten genelde İSTENMEYEN bir davranıştır. */
html, body {
    overscroll-behavior-y: contain;
}