/* ========================================================================== NOVASTAR — mobil önce, eldivenli parmakla kullanılacak kadar büyük hedefler Barscan'in yerleşim alışkanlığı korunur: üst şerit / kare buton ızgarası / alt sabit bilgi şeridi. TEMA: Açık tema varsayılan. Karanlık tema ile açılır (ana menüdeki düğme). Seçim tarayıcıda saklanır. ========================================================================== */ :root { --lacivert: #305496; /* kurumsal ana renk */ --lacivert-koyu: #24406f; --lacivert-acik: #4a72b8; --kirmizi: #b4232a; /* alt şerit — Barscan'deki gibi */ --zemin: #eef1f5; --kart: #ffffff; --yazi: #16202c; --yazi-soluk: #5d6875; --cizgi: #d3dae3; --yesil: #157a4e; --turuncu: #b3600d; --girdi-zemin: #ffffff; --vurgu-zemin: #e7edf7; /* basılı hâl */ --golge: rgba(0,0,0,.06); --golge-koyu: rgba(0,0,0,.18); --ust-yukseklik: 52px; --alt-yukseklik: 38px; --r: 6px; color-scheme: light; } /* ---------- KARANLIK TEMA ---------- Depoda/gece kullanım için. Lacivert koyu zeminde okunmadığı için açık maviye çekildi; kırmızı şerit de göz yormayacak tona indirildi. */ :root[data-tema="karanlik"] { --lacivert: #6f9ae0; --lacivert-koyu: #5482c9; --lacivert-acik: #8fb4ea; --kirmizi: #8f2d33; --zemin: #12161c; --kart: #1b2129; --yazi: #e9edf3; --yazi-soluk: #9aa5b4; --cizgi: #2e3742; --yesil: #4cba8b; --turuncu: #d9964f; --girdi-zemin: #232b35; --vurgu-zemin: #2a3441; --golge: rgba(0,0,0,.4); --golge-koyu: rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; background: var(--zemin); color: var(--yazi); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; } /* ---------- ÜST ŞERİT ---------- */ .ust { position: fixed; top: 0; left: 0; right: 0; height: var(--ust-yukseklik); background: var(--lacivert); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 12px; z-index: 50; box-shadow: 0 2px 6px var(--golge-koyu); } .ust .geri { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 38px; height: 38px; border-radius: var(--r); font-size: 22px; line-height: 1; cursor: pointer; flex: none; } .ust .geri:active { background: rgba(255,255,255,.3); } .ust .baslik { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ust .kur { font-size: 12px; opacity: .9; font-variant-numeric: tabular-nums; flex: none; } .ust .tema-dugme { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 38px; height: 38px; border-radius: var(--r); font-size: 19px; line-height: 1; cursor: pointer; flex: none; } .ust .tema-dugme:active { background: rgba(255,255,255,.3); } :root[data-tema="karanlik"] .ust .tema-dugme { background: rgba(255,255,255,.10); color: #e9edf3; } /* ---------- ALT ŞERİT ---------- */ .alt { position: fixed; bottom: 0; left: 0; right: 0; height: var(--alt-yukseklik); background: var(--kirmizi); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 12px; z-index: 50; } .alt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- GÖVDE ---------- */ .govde { padding: calc(var(--ust-yukseklik) + 10px) 10px calc(var(--alt-yukseklik) + 14px); min-height: 100%; } /* ---------- MENÜ IZGARASI (Barscan'deki kare butonlar) ---------- */ .izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; } .kare { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6px; font-size: 13px; font-weight: 600; color: var(--yazi); text-decoration: none; text-align: center; line-height: 1.15; cursor: pointer; box-shadow: 0 1px 2px var(--golge); } .kare:active { background: var(--vurgu-zemin); transform: translateY(1px); } .kare svg { width: 34px; height: 34px; fill: none; stroke: var(--lacivert); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .kare.cikis svg { stroke: var(--kirmizi); } .kare.cikis { color: var(--kirmizi); } /* ---------- KART / FORM ---------- */ .kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px; margin: 0 auto 12px; max-width: 520px; } .kart h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; } label { display: block; font-size: 13px; color: var(--yazi-soluk); margin: 10px 0 4px; font-weight: 600; } input, select, button, textarea { font-family: inherit; font-size: 16px; /* 16px: iOS'ta yakınlaştırmayı önler */ } input[type=text], input[type=password], input[type=number], input[type=search], select { width: 100%; padding: 12px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--girdi-zemin); color: var(--yazi); } input:focus, select:focus { outline: 3px solid rgba(48,84,150,.35); outline-offset: 0; border-color: var(--lacivert); } .dugme { display: block; width: 100%; padding: 14px; border: 0; border-radius: var(--r); background: var(--lacivert); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; margin-top: 14px; } .dugme:active { background: var(--lacivert-koyu); } .dugme.ikincil { background: #6b7686; } .dugme.kirmizi { background: var(--kirmizi); } /* ---------- BARKOD ALANI ---------- */ .barkod-kutu { display: flex; gap: 8px; } .barkod-kutu input { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .barkod-kutu button { flex: none; width: 56px; border: 0; border-radius: var(--r); background: var(--lacivert); color: #fff; font-size: 20px; cursor: pointer; } /* ---------- ÜRÜN KARTI ---------- */ .urun-ad { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 2px; } .urun-kod { font-size: 13px; color: var(--yazi-soluk); font-variant-numeric: tabular-nums; } .satirlar { margin-top: 12px; border-top: 1px solid var(--cizgi); } .satir { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cizgi); } .satir .etiket { font-size: 13px; color: var(--yazi-soluk); font-weight: 600; } .satir .deger { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .satir .deger small { display: block; font-size: 11px; font-weight: 500; color: var(--yazi-soluk); } .rozet { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .03em; } .rozet.stok-var { background: #e2f2ea; color: var(--yesil); } .rozet.stok-yok { background: #fbe6e7; color: var(--kirmizi); } .rozet.usd { background: #e8eefa; color: var(--lacivert); } .rozet.try { background: #fdf0e2; color: var(--turuncu); } /* ---------- CANLI ÜRÜN ÖNERİLERİ (fiş ve stok inceleme) ---------- */ .oneriler { margin-top: 8px; max-height: 46vh; overflow-y: auto; } .oneriler:empty { display: none; } .oneri { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--cizgi); border-radius: var(--r); margin-bottom: 5px; background: var(--kart); cursor: pointer; } .oneri:active { background: var(--vurgu-zemin); } .oneri .sol { flex: 1; min-width: 0; } .oneri .ad { font-weight: 600; font-size: 14px; line-height: 1.25; } .oneri .kod { font-size: 12px; color: var(--yazi-soluk); font-variant-numeric: tabular-nums; } .oneri .sag { text-align: right; flex: none; font-variant-numeric: tabular-nums; } .oneri .stok { font-weight: 700; font-size: 14px; } .oneri .fiyat { font-size: 12px; color: var(--yazi-soluk); } /* ---------- LİSTE ---------- */ .liste { max-width: 520px; margin: 0 auto; } .liste-satir { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 11px 12px; margin-bottom: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; } .liste-satir:active { background: var(--vurgu-zemin); } .liste-satir .sol { min-width: 0; } .liste-satir .ad { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .liste-satir .kod { font-size: 12px; color: var(--yazi-soluk); font-variant-numeric: tabular-nums; } .liste-satir .sag { text-align: right; flex: none; font-variant-numeric: tabular-nums; } /* ---------- MESAJ ---------- */ .mesaj { padding: 11px 13px; border-radius: var(--r); margin: 0 auto 12px; max-width: 520px; font-size: 14px; font-weight: 600; } .mesaj.hata { background: #fbe6e7; color: #8c1c22; border: 1px solid #f0b8bb; } .mesaj.bilgi { background: #e8eefa; color: var(--lacivert-koyu); border: 1px solid #bacce9; } .mesaj.uyari { background: #fdf0e2; color: #8a4a08; border: 1px solid #f0cfa4; } .bos { text-align: center; color: var(--yazi-soluk); padding: 26px 12px; font-size: 14px; } /* ---------- GİRİŞ EKRANI ---------- */ .giris-sarmal { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; } .giris { width: 100%; max-width: 340px; } .giris .logo { text-align: center; margin-bottom: 18px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--lacivert); } .giris .logo small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--yazi-soluk); margin-top: 2px; } @media (max-width: 360px) { .kare { font-size: 12px; } .kare svg { width: 28px; height: 28px; } } /* ---------- KARANLIK TEMA: şeritler ve butonlar ---------- Açık temada şeritler kurumsal lacivert + beyaz yazı. Karanlık temada aynı mantık kullanılırsa açık mavi üstüne beyaz yazı düşer ve okunmaz; bu yüzden şeritler koyu yüzeye, yazı açığa alındı. Ana butonlarda ise tersi: açık mavi zemin + koyu yazı. */ :root[data-tema="karanlik"] .ust { background: #1c2634; color: #e9edf3; border-bottom: 1px solid #2e3742; } :root[data-tema="karanlik"] .alt { background: #3a1a1d; color: #e6c9cb; } :root[data-tema="karanlik"] .ust .geri { background: rgba(255,255,255,.10); color: #e9edf3; } :root[data-tema="karanlik"] .ust .geri:active { background: rgba(255,255,255,.20); } :root[data-tema="karanlik"] .dugme { background: var(--lacivert); color: #10161f; } :root[data-tema="karanlik"] .dugme:active { background: var(--lacivert-acik); } :root[data-tema="karanlik"] .dugme.ikincil { background: #3c4552; color: #e9edf3; } :root[data-tema="karanlik"] .dugme.kirmizi { background: #a33840; color: #fff; } :root[data-tema="karanlik"] .barkod-kutu button { background: var(--lacivert); color: #10161f; } :root[data-tema="karanlik"] .toplam { color: #10161f; } :root[data-tema="karanlik"] .turler button.secili, :root[data-tema="karanlik"] .bolumler button.secili, :root[data-tema="karanlik"] .gruplar button.secili { background: var(--lacivert); color: #10161f; } :root[data-tema="karanlik"] input:focus, :root[data-tema="karanlik"] select:focus { outline-color: rgba(111,154,224,.45); } /* ---------- KARANLIK TEMA: durum renkleri ---------- Açık temadaki pastel zeminler koyu arkaplanda parlıyor; koyulaştırıldı. */ :root[data-tema="karanlik"] .rozet.stok-var { background: #16302a; color: #61c79c; } :root[data-tema="karanlik"] .rozet.stok-yok { background: #331a1c; color: #e08a90; } :root[data-tema="karanlik"] .rozet.usd { background: #1e2a3d; color: #8fb4ea; } :root[data-tema="karanlik"] .rozet.try { background: #33261a; color: #d9964f; } :root[data-tema="karanlik"] .mesaj.hata { background: #331a1c; color: #f0a5aa; border-color: #5c2a2e; } :root[data-tema="karanlik"] .mesaj.bilgi { background: #1e2a3d; color: #a8c4ee; border-color: #35496b; } :root[data-tema="karanlik"] .mesaj.uyari { background: #33261a; color: #e5b578; border-color: #5e442380; } :root[data-tema="karanlik"] .kod, :root[data-tema="karanlik"] input[readonly] { background: var(--vurgu-zemin) !important; } /* Fiş / sayım / tahsilat ekranlarındaki sayfa içi beyaz kutular */ /* NOT: .etiket bilerek DIŞARIDA — barkod etiketleri kâğıda basılacağı için karanlık temada bile beyaz zemin/siyah yazı kalmalı. */ :root[data-tema="karanlik"] .fis-ust, :root[data-tema="karanlik"] .kalem, :root[data-tema="karanlik"] .hareket, :root[data-tema="karanlik"] .hrk, :root[data-tema="karanlik"] .ayar, :root[data-tema="karanlik"] .kisayol, :root[data-tema="karanlik"] .arac button, :root[data-tema="karanlik"] .turler button, :root[data-tema="karanlik"] .bolumler button, :root[data-tema="karanlik"] .gruplar button { background: var(--kart); color: var(--yazi); } :root[data-tema="karanlik"] .arac button:active, :root[data-tema="karanlik"] .kisayol:active { background: var(--vurgu-zemin); } /* Yazdırma her zaman açık temada olsun — koyu zemin mürekkep yakar */ @media print { :root, :root[data-tema="karanlik"] { --zemin:#fff; --kart:#fff; --yazi:#000; --yazi-soluk:#444; --cizgi:#bbb; --girdi-zemin:#fff; --golge:transparent; --golge-koyu:transparent; } }