/* AdaSoft Saha Web — mobil görsel dili · V2 "V1 Lacivert" (2026-08-19, kullanıcı seçimi). Tek kaynak: docs/SPEC_WEB_MOBIL_V2.md §3. Sınıf ADLARI V1 (eski) sürümle uyumlu tutuldu — ekranlar faz faz yenilenirken hepsi çalışır kalmalı. Framework YOK (Bootstrap/Tailwind/Chart.js): şantiye 4G'sinde her KB önemli. Grafikler inline SVG ile sunucuda çizilir; ikonlar _Ikonlar.cshtml sprite'ında. ⚠️ font-size 16px'in ALTINA düşürmeyin: iOS Safari daha küçük bir input'a odaklanınca sayfayı otomatik yakınlaştırır, form kullanılamaz hâle gelir. ⚠️ Dokunma hedefleri en az 48px — eldivenli/kirli parmakla kullanılacak. */ :root { /* Koyu lacivert blok (üst şerit + hero + satış alt çubuğu) */ --hero-1: #1a2352; --hero-2: #2b3a85; --lacivert: #1a2352; /* Vurgu (accent): indigo. Token adı tarihsel — tüm sayfalar --mor okur. */ --mor: #4353c9; --zemin: #eef1f7; --kart: #ffffff; --yazi: #141a2e; --soluk: #68718c; --cizgi: #e3e7f0; /* Pastel ikon kutuları */ --ik-mavi: #e8ecfb; --ik-mavi-yazi: #3547c8; --ik-turuncu: #fdf3dd; --ik-turuncu-yazi: #a06e0c; --ik-mor: #f3e9fb; --ik-mor-yazi: #7a3fc0; --ik-yesil: #e4f5ee; --ik-yesil-yazi: #178a5f; --basari: #178a5f; --basari-zemin: #e4f5ee; --basari-cizgi: #bfe4d2; --uyari: #a06e0c; --uyari-zemin: #fbf2dc; --uyari-cizgi: #ecd9a8; --tehlike: #c93f41; --tehlike-zemin: #fdecec; --tehlike-cizgi: #f2c6c7; --yuvarlak: 18px; --yuvarlak-orta: 16px; --yuvarlak-kucuk: 12px; --bosluk: 16px; --golge: 0 1px 2px rgba(23, 32, 78, .05), 0 8px 24px rgba(23, 32, 78, .10); --alt-cubuk-h: 68px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--zemin); color: var(--yazi); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } a { color: var(--mor); } /* Sprite ikonları: renk metinden gelir (currentColor). */ .ikon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── TUTAR GİZLEME (göz ikonu) ───────────────────────────── Yetki gizliliğinden AYRI katman: yetkisi OLAN kullanıcının kişisel aç/kapa'sı (omuz üstünden bakma koruması). Tercih localStorage'da ("sahaTutarGizle"); sınıf 'e _Layout'taki boya-öncesi script ile ve kabuk.js ile konur. Güvenlik özelliği DEĞİLDİR. */ html.tutar-gizli .tutar, html.tutar-gizli .hero-deger, html.tutar-gizli .kpi-deger, html.tutar-gizli .bakiye-deger, html.tutar-gizli .kk-tutar, html.tutar-gizli .bt-satir, html.tutar-gizli .bs-deger, html.tutar-gizli .dikkat .ipucu, html.tutar-gizli .odeme-toplam span:last-child { filter: blur(8px); user-select: none; } /* Alt çubuk varken içerik onun altında kalmasın */ .kabuk { max-width: 680px; margin: 0 auto; padding: 0 var(--bosluk) calc(var(--alt-cubuk-h) + 28px); } .kabuk-sade { max-width: 680px; margin: 0 auto; padding: 0 var(--bosluk) 40px; } /* ─── Üst şerit (V1: lacivert blok, beyaz yazı) ──────────── */ .ust { background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 100%); color: #fff; padding: 10px var(--bosluk); position: sticky; top: 0; z-index: 20; } .ust-ic { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 9px; min-height: 46px; } .ust h1 { font-size: 17px; margin: 0; font-weight: 700; flex: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .geri { font-size: 26px; line-height: 1; text-decoration: none; color: #fff; padding: 6px 10px 10px; margin-left: -10px; border-radius: var(--yuvarlak-kucuk); } .geri:active { background: rgba(255,255,255,.14); } /* Başlık ikon düğmeleri: göz (tutar gizle) · çan (bildirim) · çıkış */ .ust-btn { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.13); color: #fff; border: 0; border-radius: var(--yuvarlak-kucuk); cursor: pointer; text-decoration: none; position: relative; } .ust-btn:active { background: rgba(255,255,255,.24); } .ust-btn:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; } .can-rozet { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; border: 2px solid var(--hero-1); background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 13px; text-align: center; } /* Göz: iki ikon, durum .tutar-gizli sınıfından okunur */ .goz .goz-acik { display: block; } .goz .goz-kapali { display: none; } html.tutar-gizli .goz .goz-acik { display: none; } html.tutar-gizli .goz .goz-kapali { display: block; } /* Çıkış artık ikon düğmesi (dar başlıkta yer açar); POST form içinde kalır. */ .ust-cikis { background: rgba(255,255,255,.13); border: 0; border-radius: var(--yuvarlak-kucuk); color: #fff; width: 42px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ust-cikis:active { background: rgba(255,255,255,.24); } /* Avatar (baş harfler) */ .avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .3px; } /* ─── HERO kartı (V1: lacivert blok) ────────────────────── */ .hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 100%); color: #fff; border-radius: var(--yuvarlak); padding: 20px; margin-top: var(--bosluk); box-shadow: 0 10px 30px rgba(26, 35, 82, .30); } /* Dekoratif grafik silueti — sağ üstte soluk */ .hero::after { content: ""; position: absolute; right: -30px; top: -20px; width: 190px; height: 150px; opacity: .10; background: linear-gradient(to top right, transparent 48%, #fff 48%, #fff 53%, transparent 53%), radial-gradient(circle at 70% 30%, #fff 0 3px, transparent 3px); pointer-events: none; } .hero-selam { font-size: 13px; opacity: .82; font-weight: 500; } /* ⚠️ Uzun proje/cari adı hero'ya başlık olarak basılıyor (Saha/Proje, Cari/Detay) → boşluksuz uzun metin kabı taşırmasın diye kelime bölme açık. */ .hero-baslik { font-size: 21px; font-weight: 700; margin: 2px 0 16px; letter-spacing: -.01em; overflow-wrap: break-word; } .hero-ayrac { height: 1px; background: rgba(255,255,255,.16); margin-bottom: 14px; } .hero-satir { display: flex; gap: 22px; } .hero-blok { flex: 1; min-width: 0; } .hero-etiket { font-size: 12px; opacity: .78; margin-bottom: 3px; } .hero-deger { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; } /* V1: ana değer BEYAZ (eski kehribar vurgu kaldırıldı; sınıf uyumluluk için duruyor) */ .hero-deger.vurgu { color: #fff; } .hero-deger-kucuk { font-size: 16.5px; } .hero-bos { font-size: 14px; opacity: .8; } /* Hero alt satırı: toplam gibi ikincil bir değer (blokların altında, ayraçlı). */ .hero-alt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); } /* ─── Ana sayfa: proje kartları (yatay kaydırma) ────────── */ .proje-kaydir { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .proje-kaydir::-webkit-scrollbar { display: none; } .proje-kart { min-width: 236px; max-width: 260px; flex: none; display: flex; flex-direction: column; overflow: hidden; background: var(--kart); border-radius: var(--yuvarlak-orta); box-shadow: var(--golge); text-decoration: none; color: inherit; } .proje-kart:active { background: #f6f8fc; } .proje-gorsel { display: block; position: relative; height: 86px; background: linear-gradient(120deg, var(--hero-2), var(--mor)); } .proje-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; } .proje-rozet { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #fff; background: rgba(12, 17, 40, .5); border-radius: 999px; padding: 3px 9px; } .proje-ic { display: block; padding: 11px 13px 13px; } .proje-ad { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proje-tip { display: block; font-size: 12px; color: var(--soluk); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proje-ilerleme { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .proje-ilerleme .ilerleme { flex: 1; margin-top: 0; } .proje-ilerleme b { font-size: 12.5px; font-variant-numeric: tabular-nums; } /* ─── Ana sayfa: Dikkat Gerekenler ──────────────────────── */ /* Renk kuralı: sorun bordo, takip sarı, bilgi yeşil — sıfır/no-op nötr olurdu ama sıfırlık kart zaten üretilmez (motor yalnız eşiği aşanları döndürür). */ .dikkat-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .dikkat { display: flex; flex-direction: column; padding: 12px 13px; border-radius: var(--yuvarlak-kucuk); border: 1px solid transparent; text-decoration: none; min-height: 48px; } .dikkat .sayi { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; } .dikkat .ad { font-size: 12.5px; font-weight: 700; margin-top: 1px; } .dikkat .ipucu { font-size: 11.5px; opacity: .78; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .d-kirmizi { background: var(--tehlike-zemin); color: var(--tehlike); } .d-sari { background: var(--uyari-zemin); color: var(--uyari); } .d-yesil { background: var(--basari-zemin); color: var(--basari); } /* Okunmuş kart panelde KALIR ama soluklaşır (WPF çan kuralıyla aynı). */ .dikkat-soluk, .bildirim-okundu { opacity: .62; } /* ─── Bildirimler sayfası ───────────────────────────────── */ .bildirim-satirlar { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--cizgi); } .bildirim-satirlar li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13.5px; } .bildirim-satirlar .bs-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bildirim-satirlar .bs-deger { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ─── KPI ızgarası (2 sütun; V1: çerçevesiz beyaz kart + gölge) ── */ .kpi-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .kpi-kart { background: var(--kart); border: 1px solid transparent; border-radius: var(--yuvarlak-orta); padding: 14px; box-shadow: var(--golge); min-height: 108px; display: flex; flex-direction: column; text-decoration: none; color: inherit; } a.kpi-kart:active { background: #f6f8fc; } .kpi-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .kpi-ikon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .kpi-ikon .ikon { width: 19px; height: 19px; } .ik-mavi { background: var(--ik-mavi); color: var(--ik-mavi-yazi); } .ik-turuncu { background: var(--ik-turuncu); color: var(--ik-turuncu-yazi); } .ik-mor { background: var(--ik-mor); color: var(--ik-mor-yazi); } .ik-yesil { background: var(--ik-yesil); color: var(--ik-yesil-yazi); } .kpi-etiket { font-size: 13px; color: var(--soluk); margin-top: 12px; } .kpi-deger { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; letter-spacing: -.01em; } /* ─── Hızlı işlemler ────────────────────────────────────── */ .hizli { background: var(--kart); border: 1px solid transparent; border-radius: var(--yuvarlak-orta); padding: 16px; margin-top: 12px; box-shadow: var(--golge); } .hizli-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .hizli-oge { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: inherit; padding: 4px 2px; border-radius: var(--yuvarlak-kucuk); min-height: 76px; } .hizli-oge:active { background: var(--zemin); } .hizli-ikon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .hizli-ad { font-size: 11.5px; color: var(--soluk); text-align: center; line-height: 1.25; font-weight: 600; } /* ─── Bölüm başlığı ─────────────────────────────────────── */ .bolum-baslik { font-size: 12px; font-weight: 700; color: var(--soluk); letter-spacing: .9px; text-transform: uppercase; margin: 24px 0 2px; padding-left: 2px; } /* ─── Kart ──────────────────────────────────────────────── */ .kart { background: var(--kart); border: 1px solid transparent; border-radius: var(--yuvarlak-orta); padding: var(--bosluk); margin-top: 12px; box-shadow: var(--golge); } /* ⚠️ overflow-wrap: uzun ürün kodu / boşluksuz metin ("TSMARTULTRAHD4K…") satır sonu bulamaz ve kabı genişletir. break-word kelimeyi ancak gerekiyorsa böler. */ .kart-baslik { font-weight: 700; font-size: 16px; margin: 0 0 3px; letter-spacing: -.01em; overflow-wrap: break-word; } .kart-alt { color: var(--soluk); font-size: 13.5px; overflow-wrap: break-word; } a.kart-link { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; min-height: 70px; min-width: 0; } a.kart-link:active { background: #f6f8fc; } /* Ortadaki metin bloğu daralabilmeli (min-width:0), ok ve ikon sabit kalır. */ a.kart-link > span:not(.kart-ikon):not(.ok) { flex: 1; min-width: 0; } a.kart-link .ok { margin-left: auto; flex: none; color: #b9c1d4; font-size: 22px; line-height: 1; } .kart-ikon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; } /* ─── Grafik (inline SVG) ───────────────────────────────── */ .grafik-kart { background: var(--kart); border: 1px solid transparent; border-radius: var(--yuvarlak-orta); padding: 16px; margin-top: 12px; box-shadow: var(--golge); } .grafik-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .grafik-gosterge { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--soluk); } .gosterge-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .grafik-svg { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; } /* ─── Butonlar ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 20px; border: 1px solid transparent; border-radius: 14px; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; width: 100%; } /* Kural: ekranda TEK birincil buton */ .btn-birincil { background: var(--mor); color: #fff; box-shadow: 0 6px 16px rgba(67, 83, 201, .28); } .btn-birincil:active { filter: brightness(.92); } .btn-sessiz { background: #fff; color: var(--lacivert); border-color: var(--cizgi); } .btn-sessiz:active { background: var(--zemin); } .btn:disabled { opacity: .55; cursor: default; } .btn:focus-visible { outline: 2px solid var(--mor); outline-offset: 2px; } /* Fotoğraf giriş ikilisi: "Çek" ve "Galeriden Seç" yan yana, eşit genişlikte. Dar telefonda (<340px) alt alta iner — 52px dokunma hedefi korunsun. */ .foto-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } @media (max-width: 340px) { .foto-secim { grid-template-columns: 1fr; } } /* ─── Malzeme kullanım satırları ────────────────────────── */ /* Her malzeme kendi kutusunda: sahada eldivenli parmakla yanlış satıra yazmak kolay, satırlar görsel olarak net ayrılmalı. */ .malzeme-liste { display: flex; flex-direction: column; gap: 12px; } .malzeme-satir { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); padding: 12px 14px; background: var(--zemin); } .malzeme-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .malzeme-ad { font-weight: 600; font-size: 15px; } .malzeme-kod { font-size: 12px; color: var(--soluk); white-space: nowrap; } .malzeme-stok { font-size: 13px; color: var(--soluk); margin-top: 3px; } /* Miktar geniş, tip dar — usta en çok miktar girer. */ .malzeme-giris { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 10px; } /* Satır içi alanlar form varsayılanının üst boşluğunu almamalı. */ .malzeme-giris input, .malzeme-giris select { margin: 0; } /* Şefin red gerekçesi — usta bunu görmezse aynı hatayı tekrarlar. */ .red-kutu { margin-top: 8px; padding: 9px 11px; font-size: 13.5px; line-height: 1.45; border-left: 3px solid var(--tehlike); border-radius: 0 4px 4px 0; background: var(--tehlike-zemin); color: var(--tehlike); } /* ─── Form ──────────────────────────────────────────────── */ label { display: block; font-size: 13px; font-weight: 600; color: var(--soluk); margin: 16px 0 6px; } input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px; /* ⚠️ iOS zoom eşiği */ font-family: inherit; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kucuk); background: #fff; color: var(--yazi); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mor); box-shadow: 0 0 0 3px rgba(67, 83, 201, .16); } textarea { min-height: 96px; resize: vertical; } .alan-ipucu { font-size: 12px; color: var(--soluk); margin-top: 5px; } .arama { display: flex; gap: 8px; margin-top: 12px; } .arama input { flex: 1; } .arama .btn { width: auto; min-width: 92px; } /* ─── Uyarı şeritleri ───────────────────────────────────── */ .uyari { padding: 12px 14px; border-radius: var(--yuvarlak-kucuk); margin-top: 12px; font-size: 15px; border: 1px solid transparent; } .uyari-hata { background: var(--tehlike-zemin); color: var(--tehlike); border-color: var(--tehlike-cizgi); } .uyari-basari { background: var(--basari-zemin); color: var(--basari); border-color: var(--basari-cizgi); } .uyari-bilgi { background: var(--ik-mavi); color: var(--ik-mavi-yazi); border-color: #d3dafb; } /* ─── Boş durum ─────────────────────────────────────────── */ /* ⚠️ İKİ AYRI durum: "hiç kayıt yok" ile "filtreye uyan yok" karıştırılmaz — ikincisi olmadan kullanıcı kayıtların silindiğini sanar. */ .bos { text-align: center; color: var(--soluk); padding: 44px 20px; font-size: 15px; } .bos-ikon { font-size: 36px; opacity: .3; display: block; margin-bottom: 10px; } .bos-baslik { font-weight: 700; color: var(--yazi); margin-bottom: 4px; } /* ─── Liste ─────────────────────────────────────────────── */ .liste { list-style: none; margin: 12px 0 0; padding: 0; } .liste li { background: var(--kart); border: 1px solid transparent; border-radius: var(--yuvarlak-orta); margin-bottom: 9px; box-shadow: var(--golge); } .liste a, .liste .satir-ic { display: block; padding: 13px var(--bosluk); text-decoration: none; color: inherit; min-height: 58px; } .liste a:active { background: #f6f8fc; } /* Eski satır düzeni (detay ekranları hâlâ kullanıyor): ad | tutar. min-width:0 → uzun ad tutarı ezmeden kırpılır. */ .liste-ust { display: flex; align-items: baseline; gap: 10px; min-width: 0; } /* ⚠️ display:block ŞART: yeni satır düzeninde .liste-ad bir ve kapsayıcısı (.liste-orta) flex DEĞİL → satır içi eleman olarak kalırsa genişlik almaz ve overflow/text-overflow HİÇ ÇALIŞMAZ; uzun ad kartı taşırır. (Eski düzende .liste-ust flex kabıydı, flex:1 iş görüyordu.) */ .liste-ad { display: block; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; } /* ⚠️ min-width:0 olmadan flex çocuk kendi içeriğinden daha dar olamaz (varsayılan min-width:auto) — uzun rozet/kod satırı da kartı taşırırdı. */ .liste-alt { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; color: var(--soluk); min-width: 0; } /* Alt satırdaki serbest metinler (marka, "son işlem …") kırpılabilir olmalı; rozet ve kod gibi kısa öğeler kırpılmaz (flex:none ile korunur). */ .liste-alt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .liste-alt > .rozet { flex: none; } /* Baş harf rozeti (liste satırlarında ad yerine görsel çapa). Renk adın ilk harfinden türetilir (sunucuda .bh-1..4 sınıfı verilir) — rastgele DEĞİL: aynı cari her listede aynı rengi alsın. */ .liste-bas { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: .02em; } .bh-1 { background: var(--ik-mavi); color: var(--ik-mavi-yazi); } .bh-2 { background: var(--ik-yesil); color: var(--ik-yesil-yazi); } .bh-3 { background: var(--ik-turuncu); color: var(--ik-turuncu-yazi); } .bh-4 { background: var(--ik-mor); color: var(--ik-mor-yazi); } /* Baş harfli satır düzeni: rozet | ad+kod | tutar ⚠️ min-width:0 zinciri KOPMAMALI: flex çocukların varsayılanı min-width:auto'dur (içerikten dar olamaz). Zincirdeki tek bir halka eksikse uzun ürün/cari adı kırpılmak yerine kabı genişletir ve kartı taşırır. */ .liste-satir { display: flex; align-items: center; gap: 12px; min-width: 0; } .liste-orta { flex: 1; min-width: 0; overflow: hidden; } /* Tutar kırpılMAZ (para eksik okunamaz) → kendi genişliğini korur. */ .liste-sag { text-align: right; flex: none; } .liste-sag .liste-etiket { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--soluk); margin-top: 3px; } /* Tutar: sabit genişlikli rakam → alt alta hizalı. ⚠️ Renk YAZIDA; satır zemini boyanmaz (masaüstü kuralı). */ .tutar { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; letter-spacing: -.01em; } .tutar-borc { color: var(--tehlike); } .tutar-alacak { color: var(--basari); } .tutar-notr { color: var(--soluk); } /* ─── Rozet ─────────────────────────────────────────────── */ /* Yumuşak rozet: açık zemin + koyu yazı + ince çerçeve. */ .rozet { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; background: var(--ik-mavi); color: var(--ik-mavi-yazi); border: 1px solid #d3dafb; white-space: nowrap; } .rozet-basari { background: var(--basari-zemin); color: var(--basari); border-color: var(--basari-cizgi); } .rozet-uyari { background: var(--uyari-zemin); color: var(--uyari); border-color: var(--uyari-cizgi); } .rozet-tehlike { background: var(--tehlike-zemin); color: var(--tehlike); border-color: var(--tehlike-cizgi); } .rozet-notr { background: var(--zemin); color: var(--soluk); border-color: var(--cizgi); } /* ─── İlerleme çubuğu ───────────────────────────────────── */ /* ⚠️ display:block şart: liste satırlarında olarak da kullanılıyor (satır içi yükseklik almaz, çubuk görünmez). */ .ilerleme { display: block; height: 7px; background: #e6e9f2; border-radius: 999px; overflow: hidden; margin-top: 8px; } .ilerleme > span { display: block; height: 100%; background: var(--mor); border-radius: 999px; } .ilerleme.tamam > span { background: var(--basari); } .ilerleme.gecikme > span { background: var(--tehlike); } /* ─── ALT GEZİNME ÇUBUĞU + FAB ──────────────────────────── */ /* ⚠️ Sekmeler YETKİYE GÖRE süzülür — usta "Kasa" görmemeli. */ .alt-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--cizgi); padding-bottom: env(safe-area-inset-bottom); } .alt-nav-ic { max-width: 680px; margin: 0 auto; display: flex; align-items: stretch; } .alt-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--alt-cubuk-h); text-decoration: none; color: var(--soluk); font-size: 11px; font-weight: 600; } .alt-nav a .an-ikon { font-size: 19px; line-height: 1; } .alt-nav a svg.an-ikon { width: 22px; height: 22px; } .alt-nav a.aktif { color: var(--mor); } .alt-nav a:active { background: var(--zemin); } /* FAB: ortadaki "+" — yetkiye göre süzülmüş hızlı işlem sayfasını açar. Yuva sekmelerle eşit genişlikte; düğme çubuğun üstüne taşar. */ .fab-yuva { flex: 1; position: relative; min-height: var(--alt-cubuk-h); } .fab { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--zemin); cursor: pointer; background: var(--mor); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(43, 58, 133, .38); } .fab .ikon { width: 26px; height: 26px; transition: transform .18s; } .fab:focus-visible { outline: 2px solid var(--mor); outline-offset: 3px; } body.eylem-acik .fab .ikon { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .fab .ikon { transition: none; } } /* ─── HIZLI EYLEM SAYFASI (FAB bottom sheet) ────────────── */ .eylem-ortu { position: fixed; inset: 0; z-index: 40; background: rgba(12, 17, 40, .45); opacity: 0; pointer-events: none; transition: opacity .18s; border: 0; padding: 0; /*