@charset "UTF-8";
/* @charset ZORUNLU (2026-08-21): açılış yazısı ("Makro yükleniyor") görünür bir metindir;
   dosyada BOM yok, tarayıcı kodlamayı yanlış varsayarsa 'ü' bozuk çıkardı. */

/* ══ MARKA RENGİ ══════════════════════════════════════════════════════════════
   Renk eskiden tek tek kurallara GÖMÜLÜYDÜ; artık tek değişkenden gelir. Marka
   bilgisinin kaynağı FİRMA KARTIDIR (FIRMALAR.fir_marka_renk, migr 186): B2B
   portalı açılırken bu değişkeni firma kartındaki hex ile ezer.
   Buradaki değerler BUGÜNKÜ renklerdir — firma kartı boşsa hiçbir şey değişmez. */
:root {
    --makro-marka: #1b6ec2;        /* birincil */
    --makro-marka-koyu: #1861ac;   /* kenarlık / koyu uç */
    --makro-marka-gece: #0a3d6e;   /* giriş arka planı degrade bitişi */
    /* Marka renginin ÜSTÜNE yazılan metin. Marka rengi serbest hex olduğu için sabit beyaz
       güvenli değildir (#ffff00 yazan müşteride yazı kaybolur) — firma rengi verildiğinde
       bu değişken rengin parlaklığına göre siyah/beyaz hesaplanır (Services/MarkaRengi.cs). */
    --makro-marka-yazi: #fff;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: var(--makro-marka-yazi);
    background-color: var(--makro-marka);
    border-color: var(--makro-marka-koyu);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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: "Bir hata oluştu."
    }

/* ---------------- Makro Doküman ---------------- */
.page-root { min-height: 100vh; background: #f4f6f9; }
.makro-topbar { position: sticky; top: 0; z-index: 100; }
.makro-content { padding: 0; }
/* FIRMA LOGOSU = SERIDIN SAG UST KOSESI (kullanici istegi 2026-08-27):
   "Makro Mobil nasil solda yukari en sola hizaliysa aynisini logoda en saga yukari hizali."

   MUTLAK KONUM SART: seridin sag tarafi iki satirdir (veritabani rozeti / kullanici + kasa).
   Logo akisin icinde kalirsa o iki satirin ORTASINA hizalanir ve kasa bakiyesinin karsisina
   duser - iki kez boyle denendi, kullanici "olmamis" dedi. Akistan cikinca seridin kac satir
   oldugu logoyu ilgilendirmez.

   top degeri seridin kendi ust bosluguyla (navbar padding-y = .5rem) ayni tutuldu ki logonun
   ust kenari "Makro Mobil" ile AYNI hizada baslasin - istenen simetri budur.

   .makro-topbar'in position'i BURADA DEGISTIRILMEZ: yukarida position:sticky tanimli ve sticky
   zaten konumlandirilmis bir kutudur, mutlak cocuk ona gore yerlesir. relative eklenirse sticky
   ezilir ve serit sayfayla birlikte yukari kayar. */
.makro-topbar .firma-logo {
    position: absolute;
    top: .5rem;
    right: .75rem;
    z-index: 5;
    /* BOYUT (kullanici 2026-08-27): "asagi dogru %60 oraninda, solada %50 oraninda buyusun".
       Yukseklik 48 -> 77 px (x1.6), genislik 190 -> 285 px (x1.5). Ust-sag kose sabit oldugu
       icin buyume kendiliginden ASAGI ve SOLA olur.

       min(285px, 46vw): dar telefonda (375 px) 285 px'lik logo seridin neredeyse tamamini
       kaplar ve sagdaki veritabani/kullanici rozetlerine yer kalmazdi. Ekranin yarisini asmaz;
       genis ekranda istenen 285 px'e cikar.

       Logo 77 px iken serit yuksekliginden (~60 px) TASAR - istenen "asagi buyume" budur.
       pointer-events:none: tasan bolum sayfanin ust kismindaki dugmelerin uzerine binebilir,
       tiklamayi calmasin diye logo fare/dokunusa gecirgen birakildi. */
    height: 77px;
    max-width: min(285px, 46vw);
    object-fit: contain;
    pointer-events: none;
    background: #fff;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Logo genisligi + sag bosluk + nefes payi (ayni vw sinirina uyar). */
.makro-topbar .logolu { padding-right: min(299px, 49vw); }

/* Login */
.login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--makro-marka) 0%, var(--makro-marka-gece) 100%);
    padding: 1rem;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card { border: none; border-radius: 12px; }

/* Klasör ağacı */
.klasor-tree { max-height: 70vh; overflow-y: auto; }
.klasor-satir {
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .5rem; cursor: pointer; border-radius: 6px;
    user-select: none; white-space: nowrap;
}
.klasor-satir:hover { background: #eef3fb; }
.klasor-satir.aktif { background: #1b6ec2; color: #fff; }
.klasor-ad { overflow: hidden; text-overflow: ellipsis; }

/* AI Sohbet */
.sohbet-akis {
    height: 60vh; min-height: 320px; overflow-y: auto;
    background: #f7f9fc;
}
.sohbet-balon {
    max-width: 80%; padding: .55rem .8rem; border-radius: 12px;
    white-space: pre-wrap; word-break: break-word; line-height: 1.35;
}
.balon-kullanici { background: #1b6ec2; color: #fff; border-bottom-right-radius: 3px; }
.balon-asistan { background: #fff; border: 1px solid #dfe4ea; border-bottom-left-radius: 3px; }
@media (max-width: 576px) { .sohbet-balon { max-width: 92%; } }

/* Modal backdrop */
.modal-backdrop-makro {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040;
}
.modal.d-block { z-index: 1050; }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

/* YAZI DAİRENİN İÇİNDE (kullanıcı isteği 2026-08-21): eskiden sabit bir üst boşlukla
   konumlanıyordu (inset: calc(20vh + 3.25rem)) ve yazı iki satır olunca dairenin ALTINA
   taşıyordu. Artık kutu DAİRENİN TAM ÜSTÜNE oturur (aynı üst hiza + aynı yükseklik) ve içerik
   flex ile ortalanır — satır sayısı değişse de ortada kalır, elle hesap gerekmez.
   translateY: optik düzeltme — kullanıcı "bir iki tık yukarı" dedi; matematiksel orta,
   dairenin alt yayı yüzünden göze biraz aşağıda görünüyor. */
.loading-progress-text {
    position: absolute;
    inset: 20vh 0 auto 0;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-0.35rem);
    text-align: center;
    font-weight: bold;
}

    /* AÇILIŞ YAZISI (kullanıcı isteği 2026-08-21): Blazor'un varsayılan "Loading" / yüzde metni
       yerine "Makro yükleniyor". İlerleme zaten dairenin dolmasıyla görünüyor; telefonu eline alan
       kişi hangi programın açıldığını okusun. */
    .loading-progress-text:after {
        /* İKİ SATIR (kullanıcı isteği 2026-08-21): dar telefonda tek satır daire genişliğini
           aşıyordu. \A = satır sonu; white-space:pre olmadan yok sayılır. */
        content: "Makro\A yükleniyor";
        white-space: pre;
        line-height: 1.25;
    }

code {
    color: #c02d76;
}

/* ═══ MOBİL LOGIN + MENÜ (2026-08-17) ═══
   Masaüstü karakteristiğinin mobil karşılığı: MAKRO rozeti ve kare modül kartları. */

/* Login'deki "M" rozeti — masaüstündeki logo kutusunun aynısı (mavi kare, beyaz kalın M). */
.makro-rozet {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(180deg, #2563EB, #1D4ED8);
    color: #fff; font-weight: 900; font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}

/* Menü kutuları — kullanıcı düzeltmesi 2026-08-19: ÇERÇEVE SİMGENİN ETRAFINDA olacak,
   menü adını da içine alan GENİŞ KARE kutu OLMAYACAK. Eskiden butonun kendisi
   aspect-ratio:1/1 kare + kenarlıktı; ad ve numara da o karenin içinde kalıyordu.
   Şimdi buton yüksekliği içeriğe göre, çerçeve yalnız simgeyi sarıyor. */
.menu-kare {
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    text-align: center; border-radius: 10px;
}
.menu-kare:active { transform: scale(.97); }
.menu-kare:disabled { opacity: .55; }

/* Simge çerçevesi: kutu SİMGE KADAR. Ölçü em cinsindendir → simgenin punto'su
   değişirse çerçeve onunla büyür/küçülür (kullanıcı kuralı: simge büyüklüğüne dokunma).
   Etrafta boşluk YOK: 1.1em, glyph'in em kutusunu sarar, dolgu eklemez. */
.menu-simge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1em; height: 1.1em; padding: 0; line-height: 1;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px;
    flex: 0 0 auto;
}

/* ═══ UYGULAMA GİBİ DAVRANIŞ (PWA — kullanıcı isteği 2026-08-17) ═══
   Ana ekrana kurulunca tarayıcı çubuğu olmadan açılır (manifest display:standalone).
   Aşağısı "web sayfası" hissini alıp "uygulama" hissini veren küçük ayarlardır. */

html, body {
    overscroll-behavior-y: contain;   /* aşağı çekince sayfa yenilenmesin (pull-to-refresh kapalı) */
    -webkit-tap-highlight-color: transparent;  /* dokununca mavi kutu parlamasın */
}

/* Düğme/etiket metinleri seçilmesin — uzun basınca "kopyala" balonu çıkmasın.
   ⚠️ GİRİŞ ALANLARI HARİÇ: orada metin seçebilmek şart (barkod düzeltme, kopyala-yapıştır). */
body { user-select: none; -webkit-user-select: none; }
input, textarea, select, .list-group-item { user-select: text; -webkit-user-select: text; }

/* Çentikli telefonlarda üst/alt güvenli alan (iPhone vb.) */
.makro-topbar { padding-top: env(safe-area-inset-top); }
.makro-content { padding-bottom: env(safe-area-inset-bottom); }

/* ═══ SAYIM EKRANI — DURUM ŞERİDİ VE SATIR VURGUSU (saha 2026-08-18) ═══ */

/* Durum mesajı ekranın ALTINDA sabit: telefonda sayı klavyesi açılınca sayfanın üstü
   görünmüyordu ve kullanıcı ne başarıyı ne hatayı görebiliyordu. Klavye açıkken de
   görünür kalsın diye position:fixed + güvenli alan boşluğu. Dokununca kapanır. */
/* ORTAK DURUM ŞERİDİ (kullanıcı kuralı 2026-08-25): hata/bilgi mesajı EKRANIN ALTINDA,
   işlem düğmelerinin olduğu yerde görünür. Sayfanın tepesine yazılan mesaj, uzun formlarda
   düğmeye basan kullanıcının göremediği bir yerde kalıyordu ("buton aşağıda uyarı en tepede").
   .sayim-durum ESKİ ADIDIR ve korunur — üç ekran onu kullanıyor, ikisi aynı kuralı paylaşır. */
.makro-durum,
.sayim-durum {
    position: fixed;
    left: .5rem; right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    z-index: 1080;
    margin: 0;
    border-radius: 10px;
}

/* Yeni eklenen/artırılan satır kısa süre sarı yanar — kullanıcı listede ne değiştiğini görsün. */
.sayim-vurgu { animation: sayimVurgu 1.6s ease-out 1; }
/* Son sayım balonu (2026-10-04): ürün satıra gelince adın üstünde 5 sn — ipucu görünümü. */
.sayim-sonsayim-balon { display:inline-block; background:#1F2937; color:#fff; font-size:.7rem;
    padding:2px 8px; border-radius:6px; margin-bottom:2px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
@keyframes sayimVurgu {
    0%   { background-color: #fde68a; }
    100% { background-color: transparent; }
}

/* ═══ AÇILIR KUTULAR (select) — MOBİLE UYGUN ÖLÇÜ ═══════════════════════════════════════════
   Kullanıcı kuralı 2026-08-23: "dropdown/combobox'lardan gelen verilerin ve gösterimlerin
   büyüklüğü çok büyük... depo seçin kutusunun gösterimi, talep fişindeki STOK ADI ile aynı
   olsun; devasa, anlamsız, ergonomisiz olmasın."

   Ölçü referansı stok adıdır: .85rem. Bootstrap'in varsayılanı 1rem ve telefonda bir satırı
   tek başına dolduruyordu; seçili değer ekranda gereğinden çok yer kaplıyordu.

   ⚠️ AÇILAN LİSTE (option) İŞLETİM SİSTEMİNE AİTTİR: iOS/Android açılır listeyi kendi
   arayüzüyle çizer ve CSS'i çoğu zaman yok sayar. Buradaki kural KUTUNUN KENDİSİNİ (kapalı
   hâlini) ve masaüstü tarayıcılardaki listeyi küçültür — telefonda açılan tam ekran liste
   sistemin ölçüsünde kalır, ona müdahale edilemez. */
.form-select,
.form-select option {
    font-size: .85rem;
}

/* Zaten "küçük" işaretli kutular bir tık daha küçük kalsın (satır içi kullanım: birim, miktar). */
.form-select-sm,
.form-select-sm option {
    font-size: .8rem;
}

/* Yükseklik de ölçüyle uyumlu olsun: büyük font için ayrılmış dolgu, küçük yazıyla
   kutuyu gereksiz şişiriyordu. */
.form-select      { padding-top: .3rem; padding-bottom: .3rem; }
.form-select-sm   { padding-top: .2rem; padding-bottom: .2rem; }

/* ═══ MAKRO SEÇİM KUTUSU (native select yerine) ════════════════════════════════════════════
   Kullanıcı isteği 2026-08-23: telefonda açılan listeyi işletim sistemi çiziyordu ve devasa
   görünüyordu. Liste artık uygulamanın içinde — ölçüsü buradan belirlenir.
   Referans ölçü yine stok adı: .85rem (kutu) / .8rem (liste satırı). */
.makro-secim { position: relative; display: inline-block; }

.makro-secim-kutu {
    display: flex; align-items: center; justify-content: space-between; gap: .35rem;
    width: 100%; text-align: left;
    font-size: .85rem; line-height: 1.2;
    padding: .25rem .5rem;
    border: 1px solid #ced4da; border-radius: .375rem;
    background: #fff; color: #212529;
}
.makro-secim-kutu:disabled { background: #e9ecef; color: #6c757d; }
.makro-secim-deger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.makro-secim-ok    { flex: 0 0 auto; opacity: .55; font-size: .7rem; }

/* Perde listenin ALTINDA (z-index daha düşük): dokunuş listeye değil perdeye giderse kapanır. */
.makro-secim-perde {
    position: fixed; inset: 0; z-index: 1040; background: transparent;
}

.makro-secim-liste {
    position: absolute; z-index: 1041; top: calc(100% + 2px); left: 0; min-width: 100%;
    max-height: 15rem; overflow-y: auto;
    background: #fff; border: 1px solid #ced4da; border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    padding: .15rem;
}

.makro-secim-oge {
    display: block; width: 100%; text-align: left;
    font-size: .8rem; line-height: 1.25;
    padding: .35rem .5rem;
    border: 0; border-radius: .25rem; background: transparent; color: #212529;
    white-space: nowrap;
}
.makro-secim-oge:hover   { background: #f1f3f5; }
.makro-secim-oge.secili  { background: #e7f1ff; font-weight: 600; }