/* Kasap Yönetim — modern, sade arayüz. Renkler yalnızca aşağıdaki değişkenlerden gelir. */ :root { color-scheme: light; --zemin: #f4f6f9; --yuzey: #ffffff; --yuzey-2: #f6f7f9; --yuzey-3: #eceef2; --cizgi: #e6e9ee; --cizgi-guclu: #d4d9e1; --metin: #161b26; --metin-2: #4a5263; --metin-3: #687183; --vurgu: #2563eb; --vurgu-koyu: #1d4fd7; --vurgu-metin: #ffffff; --vurgu-zemin: #edf3ff; --vurgu-yazi: #1d4fd7; --marka: #a3303d; --marka-yazi: #1d4fd7; --iyi: #15803d; --iyi-zemin: #eaf7ee; --kotu: #c42323; --kotu-zemin: #fdf0f0; --uyari: #8a5a00; --uyari-zemin: #fdf5e1; --seri-1: #2f6fed; --grafik-izgara: #eef0f4; --t-satis: #2a78d6; --t-alis: #e0622f; --t-tahsilat: #16a06f; --t-odeme: #d99200; --t-dekont: #5a49c4; --t-gider: #e04848; --t-gelir: #0f8a2e; --golge-kucuk: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04); --golge-orta: 0 8px 20px -8px rgba(16, 24, 40, 0.14); --golge-buyuk: 0 24px 48px -12px rgba(16, 24, 40, 0.24), 0 8px 16px -8px rgba(16, 24, 40, 0.08); --halka: 0 0 0 3px rgba(37, 99, 235, 0.2); --perde-renk: rgba(15, 23, 42, 0.42); --yaricap: 14px; --yaricap-kucuk: 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --zemin: #0e1116; --yuzey: #161a21; --yuzey-2: #1c2129; --yuzey-3: #262c36; --cizgi: #252b34; --cizgi-guclu: #353c48; --metin: #eef1f5; --metin-2: #b6bdc9; --metin-3: #8f97a5; --vurgu: #3471ec; --vurgu-koyu: #4a82f4; --vurgu-metin: #ffffff; --vurgu-zemin: #19253a; --vurgu-yazi: #8db4ff; --marka: #b8404d; --marka-yazi: #8db4ff; --iyi: #4cc477; --iyi-zemin: #12261a; --kotu: #f2827c; --kotu-zemin: #2f1718; --uyari: #f0bf5c; --uyari-zemin: #2b2311; --seri-1: #4c8dff; --grafik-izgara: #222832; --t-satis: #4c8dff; --t-alis: #e56c37; --t-tahsilat: #2fbf87; --t-odeme: #e3a52a; --t-dekont: #9b8ff0; --t-gider: #ee6b6b; --t-gelir: #3cb35a; --golge-kucuk: 0 1px 2px rgba(0, 0, 0, 0.3); --golge-orta: 0 8px 20px -8px rgba(0, 0, 0, 0.5); --golge-buyuk: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03); --halka: 0 0 0 3px rgba(76, 141, 255, 0.32); --perde-renk: rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --zemin: #0e1116; --yuzey: #161a21; --yuzey-2: #1c2129; --yuzey-3: #262c36; --cizgi: #252b34; --cizgi-guclu: #353c48; --metin: #eef1f5; --metin-2: #b6bdc9; --metin-3: #8f97a5; --vurgu: #3471ec; --vurgu-koyu: #4a82f4; --vurgu-metin: #ffffff; --vurgu-zemin: #19253a; --vurgu-yazi: #8db4ff; --marka: #b8404d; --marka-yazi: #8db4ff; --iyi: #4cc477; --iyi-zemin: #12261a; --kotu: #f2827c; --kotu-zemin: #2f1718; --uyari: #f0bf5c; --uyari-zemin: #2b2311; --seri-1: #4c8dff; --grafik-izgara: #222832; --t-satis: #4c8dff; --t-alis: #e56c37; --t-tahsilat: #2fbf87; --t-odeme: #e3a52a; --t-dekont: #9b8ff0; --t-gider: #ee6b6b; --t-gelir: #3cb35a; --golge-kucuk: 0 1px 2px rgba(0, 0, 0, 0.3); --golge-orta: 0 8px 20px -8px rgba(0, 0, 0, 0.5); --golge-buyuk: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03); --halka: 0 0 0 3px rgba(76, 141, 255, 0.32); --perde-renk: rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------ temel */ *, *::before, *::after { box-sizing: border-box; } /* Kaydırma çubuğu her sayfada durur (kısa sayfada soluk): uzun sayfaya (ör. cari kartı) geçince çubuk sonradan çıkıp sayfayı daraltmaz, üst çubuktaki tarih ve yazılar yerinden oynamaz */ html { -webkit-text-size-adjust: 100%; overflow-y: scroll; } body { margin: 0; background: var(--zemin); color: var(--metin); font: 15px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 600; font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; } h1 { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; } h2 { font-size: 16px; letter-spacing: -0.005em; } h3 { font-size: 14.5px; } p { margin: 0; } a { color: var(--vurgu-yazi); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } small { font-size: 12.5px; } code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; } [hidden] { display: none !important; } ::selection { background: color-mix(in srgb, var(--vurgu) 22%, transparent); } :focus-visible { outline: none; box-shadow: var(--halka); border-radius: 6px; } .soluk { color: var(--metin-2); } .cok-soluk { color: var(--metin-3); } .sag { text-align: right; } .orta { text-align: center; } .kalin { font-weight: 600; } .sayi { font-variant-numeric: tabular-nums; white-space: nowrap; } .kirp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yigin > * + * { margin-top: 22px; } .yigin-kucuk > * + * { margin-top: 8px; } .satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .esnek { flex: 1; min-width: 0; } /* ------------------------------------------------------------------ kabuk */ .kabuk { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .yan { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; background: var(--yuzey); border-right: 1px solid var(--cizgi); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 2px; } .marka { display: flex; align-items: center; gap: 12px; padding: 2px 8px 22px; } /* Logo kendi şeklinde (kırmızı daire + boğa başı); arkasında kutu yok */ .marka-logo { flex: none; display: block; width: 48px; height: 48px; } .marka-logo svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.16)); } .marka strong { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; } .marka small { color: var(--metin-3); display: block; max-width: 160px; font-size: 12.5px; } /* Sayfa başlığındaki küçük açılır menü ("Diğer işlemler") */ .acilir { position: relative; } .acilir > summary { list-style: none; } .acilir > summary::-webkit-details-marker { display: none; } .acilir-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge-buyuk); animation: modal-gir 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .acilir-liste a { padding: 8px 10px; border-radius: 8px; color: var(--metin); font-size: 14px; text-decoration: none; } .acilir-liste a:hover { background: var(--yuzey-2); } /* Yan menü: grup başlıkları, geniş tıklama alanı, seçili sayfa mavi tonla belirgin */ .menu { display: grid; gap: 2px; } .menu-baslik { padding: 0 12px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--metin-3); } .menu a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--metin-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background 0.18s ease, color 0.18s ease; } .menu.ayrac { margin-top: 20px; } .menu a svg { width: 18px; height: 18px; flex: none; color: var(--metin-3); transition: color 0.18s ease; } .menu a:hover { background: var(--yuzey-2); color: var(--metin); } .menu a:hover svg { color: var(--metin-2); } .menu a.aktif { background: var(--vurgu-zemin); color: var(--vurgu-yazi); font-weight: 600; } .menu a.aktif svg { color: var(--vurgu); } .menu-alt { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cizgi); } .ana { min-width: 0; display: flex; flex-direction: column; } .ust { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 36px; background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); } .ust-sag { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* Üst çubukta, tema düğmesinin solunda bugünün tarihi (her sayfada) */ .ust-tarih { display: grid; justify-items: end; gap: 1px; margin-right: 6px; padding: 5px 13px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); box-shadow: var(--golge-kucuk); } .ust-tarih small { font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--metin-3); line-height: 1.2; } .ust-tarih strong { font-size: 14.5px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .ust-tarih { padding: 5px 9px; margin-right: 0; } .ust-tarih small { display: none; } .ust-tarih strong { font-size: 13px; } } .kullanici-kutu { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 6px; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vurgu-zemin); color: var(--vurgu-yazi); font-weight: 650; font-size: 12.5px; letter-spacing: 0.02em; } .kullanici-kutu .metin small { display: block; color: var(--metin-3); line-height: 1.2; font-size: 12px; } .kullanici-kutu .metin span { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; } .deneme-rozet { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 99px; background: var(--uyari-zemin); color: var(--uyari); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; } .deneme-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .deneme-rozet { white-space: nowrap; } /* Telefonda üst çubuğa tarih de sığsın: rozet kısalır ("DENEME"), boşluklar daralır */ @media (max-width: 600px) { .deneme-rozet { padding: 0 9px; } .deneme-rozet .uzun { display: none; } .ust { gap: 8px; } .ust-sag { gap: 2px; } .kullanici-kutu { padding: 0 2px; } } .ust .menu-dugme { display: none; } .icerik { padding: 32px 36px 56px; width: 100%; max-width: 1400px; } /* ------------------------------------------------------------------ yumuşak geçişler */ /* Sayfa değişimi: eski sayfa kısa sürede tamamen solar (0.15 sn, app.js CIKIS_MS), ardından yeni sayfa hafifçe aşağıdan süzülerek gelir. Ekran hiçbir an sert biçimde değişmez. */ .sayfa { animation: sayfa-gir 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .icerik.geciste > .sayfa { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s ease-in, transform 0.15s ease-in; } @keyframes sayfa-gir { from { opacity: 0; transform: translateY(8px); } } /* Program açılışı ve giriş / çıkış: ana ekran ve giriş kartı belirerek gelir, solarak gider (0.26 sn, EKRAN_CIKIS_MS) */ .kabuk { animation: soluk-gir 0.45s ease-out backwards; } .giris-kap { animation: soluk-gir 0.3s ease-out backwards; } .giris-kart { animation: giris-gir 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards; } @keyframes giris-gir { from { opacity: 0; transform: translateY(12px) scale(0.985); } } .kabuk.cikiyor, .giris-kap.cikiyor { opacity: 0; pointer-events: none; transition: opacity 0.26s ease-in; } .giris-kap.cikiyor .giris-kart { transform: translateY(-6px) scale(0.99); transition: transform 0.26s ease-in; } /* Açık / koyu tema değişimi (tarayıcının görünüm geçişiyle) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; } /* Sekme içerikleri (raporlar, ayarlar) ve filtreyle yenilenen listeler yumuşakça belirir */ #rapor > *, #bolum > *, .liste-ust + #liste > *, #ekstre > *, #cipler > .cip { animation: soluk-gir 0.24s ease-out backwards; } /* Yazdıkça süzülen listede (cari arama) her harfte yeniden belirme olmasın */ #liste.canli > *, #cipler.canli > .cip { animation: none !important; } @keyframes soluk-gir { from { opacity: 0; } } /* Tıklanabilir satırlar ve düğmeler: üzerine gelince yumuşak renk, basınca hafif çökme */ .tablo tr.tikla td { transition: background-color 0.15s ease; } .btn:active:not(:disabled), .fm-oge:active, .islem-oge:active { transform: translateY(1px); } /* Yükleme biraz uzarsa üstte ince, sakin bir ilerleme çizgisi */ body.yukleniyor-ust::after { content: ""; position: fixed; top: 0; left: 0; z-index: 400; width: 30%; height: 2px; background: var(--vurgu); animation: ilerle 1.1s ease-in-out infinite; } @keyframes ilerle { from { transform: translateX(-100%); } to { transform: translateX(340%); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .perde { display: none; } /* 1180 pikselden dar ekranda (tablet, küçük dizüstü penceresi) yan menü sol üstteki düğmeyle açılır; içerik tam genişlik */ @media (max-width: 1180px) { .kabuk { grid-template-columns: minmax(0, 1fr); } .yan { position: fixed; inset: 0 auto 0 0; width: 276px; z-index: 60; height: 100%; transform: translateX(-102%); transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: var(--golge-buyuk); } .yan.acik { transform: none; } .perde.acik { display: block; position: fixed; inset: 0; z-index: 55; background: var(--perde-renk); animation: soluk-gir 0.2s ease-out; } .ust .menu-dugme { display: inline-grid; } .ust { padding: 0 16px; height: 56px; } .icerik { padding: 22px 16px 40px; } .kullanici-kutu .metin { display: none; } h1 { font-size: 22px; } } /* ------------------------------------------------------------------ sayfa başlığı */ .sayfa-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .sayfa-ust p { margin-top: 4px; font-size: 14px; color: var(--metin-3); } .sayfa-ust .rozet { vertical-align: middle; margin-left: 6px; } .eylemler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .geri { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--metin-3); margin-bottom: 8px; } .geri:hover { color: var(--metin); text-decoration: none; } .geri svg { width: 16px; height: 16px; } /* ------------------------------------------------------------------ kart */ .kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge-kucuk); } /* Tablolar ve renkli satırlar yuvarlak köşeden taşmasın (içinde açılır menü olan kartlar hariç) */ .kart:not(:has(.acilir, .filtre-kap)) { overflow: clip; } .kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; min-height: 60px; } .kart-ust p { font-size: 13px; color: var(--metin-3); margin-top: 2px; } .kart-govde { padding: 20px; } .kart-govde.sikisik { padding: 0; } .kart-alt { padding: 12px 20px; border-top: 1px solid var(--cizgi); background: var(--yuzey-2); } .izgara { display: grid; gap: 20px; } .izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .izgara-ana { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } @media (max-width: 1180px) { .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Ana bölüm ve yan kartlar 1360 pikselden dar ekranda alt alta: yan yana dururken belgedeki ürün tablosu sığmıyordu */ @media (max-width: 1360px) { .izgara-ana { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .izgara-2, .izgara-3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ özet rakamlar: ayrı, sade kutucuklar */ .izgara:has(> .ist) { gap: 16px; } .ist { display: block; min-width: 0; padding: 18px 20px; color: inherit; text-decoration: none !important; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge-kucuk); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } a.ist:hover { border-color: var(--cizgi-guclu); box-shadow: var(--golge-orta); transform: translateY(-1px); } /* Kart içindeki özet kutuları (raporlar) daha yumuşak */ .kart .ist { background: var(--yuzey-2); border-color: transparent; box-shadow: none; } .ist-etiket { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--metin-2); } .ist-ikon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--yuzey-3); color: var(--metin-2); } .ist-ikon svg { width: 17px; height: 17px; } .ist-ikon.iyi { background: var(--iyi-zemin); color: var(--iyi); } .ist-ikon.kotu { background: var(--kotu-zemin); color: var(--kotu); } .ist-ikon.vurgu { background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .ist-deger { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .ist-alt { font-size: 13px; color: var(--metin-3); margin-top: 4px; } /* Kesim / parçalama formu: tür seçimi, adım numaraları, çıkan ürün satırları ve canlı özet */ .kesim-tur .secenek { flex: 1 1 240px; } .adim { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--vurgu-zemin); color: var(--vurgu-yazi); font-size: 13px; font-weight: 700; vertical-align: 1px; } /* Ürünler listesi: tür ve birim tek satırda */ .urun-t :is(.m-kat, .m-alis) { white-space: nowrap; } /* Kesilecek hayvan / parçalanacak et: depodakiler düğme kartları olarak (depoda olmayan seçilemez) */ .hayvan-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .hayvan-kart { display: grid; gap: 2px; min-height: 58px; padding: 11px 14px; text-align: left; font: inherit; color: var(--metin); background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: 11px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .hayvan-kart strong { font-size: 15px; font-weight: 600; } .hayvan-kart small { font-size: 12.5px; color: var(--metin-3); } .hayvan-kart:hover:not(:disabled) { border-color: var(--cizgi-guclu); background: var(--yuzey-2); } .hayvan-kart.secili { border-color: var(--vurgu); background: var(--vurgu-zemin); box-shadow: 0 0 0 3px var(--vurgu-zemin); } .hayvan-kart.secili small { color: var(--vurgu-yazi); } .hayvan-kart:disabled { cursor: not-allowed; opacity: 0.55; background: var(--yuzey-2); } .bos-secim { display: grid; justify-items: start; gap: 6px; margin-top: 4px; padding: 14px 16px; border: 1px dashed var(--cizgi-guclu); border-radius: 11px; background: var(--yuzey-2); } .bos-secim span { font-size: 13.5px; color: var(--metin-2); } .bos-secim .btn { margin-top: 4px; } /* Hayvan türü ekle penceresi: seçilebilir tür çipleri */ .tur-secim { display: flex; flex-wrap: wrap; gap: 8px; } .tur-cip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; font-weight: 550; border: 1.5px solid var(--cizgi); border-radius: 99px; cursor: pointer; user-select: none; } .tur-cip:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-zemin); } .tur-cip.var { cursor: default; opacity: 0.7; } .tur-cip small { font-size: 12.5px; font-weight: 500; color: var(--metin-3); } @media (max-width: 560px) { .hayvan-secim { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cikti-liste { display: grid; gap: 12px; } .cikti-satir { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 12px; align-items: end; } .c-miktar-kutu { position: relative; display: block; min-width: 0; } .alan > .c-miktar-kutu { margin-top: 7px; } .c-miktar-kutu > input { display: block; padding-right: 52px; font-variant-numeric: tabular-nums; } .c-birim { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13.5px; font-weight: 500; color: var(--metin-3); pointer-events: none; } .c-sil { margin-bottom: 3px; } .kesim-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 14px; } .kesim-sayilar > div { min-width: 0; padding: 10px 12px; border-radius: 9px; background: var(--yuzey-2); } .kesim-sayilar small { display: block; font-size: 12.5px; color: var(--metin-3); } .kesim-sayilar strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; } .kesim-sayilar span { font-size: 12.5px; color: var(--metin-3); } .kesim-not { margin: 0 20px 12px; } .kesim-ozet .tablo-kap { margin-bottom: 10px; } @media (max-width: 560px) { .cikti-satir { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; border: 1px solid var(--cizgi); border-radius: 10px; } .cikti-satir .c-urun { grid-column: 1 / -1; } .kesim-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 14px 12px; } .kesim-not { margin: 0 14px 12px; } } /* Giderler sayfası: ay seçici sağda; kategoriler ve son 6 ay çubuklu satırlar (her satır bir düğme) */ .gider-ay { display: flex; justify-content: flex-end; } .gider-izgara { align-items: start; } .gider-kat { list-style: none; margin: 0; padding: 4px 10px 12px; display: grid; gap: 2px; } .gk-satir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 34%) auto; align-items: center; gap: 4px 14px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease; } .gk-satir:hover { background: var(--yuzey-2); } .gk-satir.secili { background: var(--vurgu-zemin); } .gk-ad { display: grid; gap: 1px; min-width: 0; font-weight: 550; } .gk-ad small { font-size: 12.5px; font-weight: 400; color: var(--metin-3); } .gk-iz { height: 8px; border-radius: 4px; background: var(--yuzey-3); overflow: hidden; } .gk-iz i { display: block; height: 100%; border-radius: 4px; background: var(--t-gider); } .gk-tutar { min-width: 96px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 560px) { .gider-kat { padding: 2px 4px 8px; } .gk-satir { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; } .gk-iz { grid-row: 2; grid-column: 1 / -1; } } /* Gelir Gider sayfası: kâr / zarar tablosu ve depodaki mal yan yana (dar ekranda alt alta) */ .gg-izgara { display: grid; gap: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } @media (max-width: 1100px) { .gg-izgara { grid-template-columns: minmax(0, 1fr); } } .kz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px 0; margin: 0; font-size: 15px; align-items: baseline; } .kz dt { color: var(--metin-2); } .kz dt small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--metin-3); } .kz dd { margin: 0; padding-left: 16px; text-align: right; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; } .kz dd small { font-size: 12.5px; font-weight: 400; color: var(--metin-3); } .kz .kz-soluk { color: var(--metin-3); font-weight: 400; } .kz .kz-ara { padding-top: 11px; border-top: 1px solid var(--cizgi); font-weight: 650; color: var(--metin); } .kz .kz-net { padding-top: 13px; border-top: 2px solid var(--metin); font-size: 19px; font-weight: 700; color: var(--metin); } .kz dd.renk-iyi { color: var(--iyi); } .kz dd.renk-kotu { color: var(--kotu); } .kz-sade { padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: 14.5px; } .kz-not { display: grid; gap: 6px; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--metin-3); } .dm-ust { display: grid; gap: 2px; margin-bottom: 16px; } .dm-ust small { font-size: 13px; color: var(--metin-3); } .dm-ust strong { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .dm-ust span { font-size: 13px; color: var(--metin-3); } .gg-ay-t > tbody > tr.secili > td { background: var(--vurgu-zemin); } /* Raporlar: bölüm başlığı, kâr açıklaması, aylara göre kâr tablosunun toplam satırı */ .rk-bolum { margin: 6px 0 -6px; font-size: 15px; font-weight: 650; } .rk-not { margin: 12px 20px 16px; font-size: 12.5px; line-height: 1.5; } .rk-ay-t > tfoot > tr > td { font-weight: 700; } .eb-tablo.eb-kz td:first-child { width: 70%; } /* Yan sütundaki gider kategorileri: ad ve tutar üstte, pay çubuğu altta (ad sıkışmasın) */ .gg-izgara .gk-satir { grid-template-columns: minmax(0, 1fr) auto; } .gg-izgara .gk-iz { grid-row: 2; grid-column: 1 / -1; } /* Ana sayfadaki depo satırı: başlık solda, depodaki malın tutarı sağda */ .ist.depo-ozet { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ist.depo-ozet .ist-deger { margin-top: 0; font-size: 22px; } /* Telefonda kutucuklar ikişer yan yana, daha derli toplu */ @media (max-width: 560px) { .izgara:has(> .ist) { gap: 10px; } .ist { padding: 14px; } .ist-etiket { gap: 8px; font-size: 13px; } .ist-ikon { width: 28px; height: 28px; border-radius: 8px; } .ist-ikon svg { width: 15px; height: 15px; } .ist-deger { font-size: 20px; margin-top: 8px; } .ist.depo-ozet .ist-deger { margin-top: 0; font-size: 19px; } .ist-alt { font-size: 12px; } } /* ------------------------------------------------------------------ düğmeler */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--yaricap-kucuk); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } .btn svg { width: 16px; height: 16px; flex: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-birincil { background: var(--vurgu); color: var(--vurgu-metin); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-birincil:hover:not(:disabled) { background: var(--vurgu-koyu); } .btn-ikincil { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi-guclu); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .btn-ikincil:hover:not(:disabled) { background: var(--yuzey-2); border-color: color-mix(in srgb, var(--cizgi-guclu) 70%, var(--metin-3)); } .btn-hayalet { background: transparent; color: var(--metin-2); } .btn-hayalet:hover:not(:disabled) { background: var(--yuzey-2); color: var(--metin); } .btn-tehlike { background: var(--yuzey); color: var(--kotu); border-color: var(--cizgi-guclu); } .btn-tehlike:hover:not(:disabled) { background: var(--kotu-zemin); border-color: color-mix(in srgb, var(--kotu) 35%, transparent); } .btn-tehlike-dolu { background: var(--kotu); color: #fff; } .btn-tehlike-dolu:hover:not(:disabled) { background: color-mix(in srgb, var(--kotu) 88%, #000); } .btn-kucuk { height: 32px; padding: 0 12px; font-size: 13.5px; } .btn-blok { width: 100%; height: 42px; } .ikon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--metin-3); cursor: pointer; font: inherit; transition: background 0.15s ease, color 0.15s ease; } .ikon-btn:hover { background: var(--yuzey-3); color: var(--metin); } .ikon-btn svg { width: 18px; height: 18px; } .link-btn { border: 0; background: none; padding: 0; color: var(--vurgu-yazi); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; text-align: left; overflow-wrap: anywhere; } .link-btn:hover { text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------------------ formlar */ .form-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .form-izgara .g2 { grid-column: span 2; } .form-izgara .g3 { grid-column: span 3; } .form-izgara .gtam { grid-column: 1 / -1; } @media (max-width: 860px) { .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-izgara .g3 { grid-column: 1 / -1; } } @media (max-width: 520px) { .form-izgara { grid-template-columns: minmax(0, 1fr); } .form-izgara .g2 { grid-column: auto; } } .alan { display: block; font-size: 13.5px; font-weight: 550; color: var(--metin); min-width: 0; } .alan > input, .alan > select, .alan > textarea { display: block; margin-top: 7px; } .alan .ipucu { font-weight: 400; color: var(--metin-3); font-size: 12.5px; } .alan-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } input, select, textarea { font: inherit; font-size: 14.5px; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--yaricap-kucuk); height: 40px; padding: 0 12px; width: 100%; min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--metin-3); opacity: 0.8; font-weight: 400; } select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808898' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; } input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--cizgi-guclu) 65%, var(--metin-3)); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: var(--halka); } input:disabled, select:disabled, textarea:disabled { background-color: var(--yuzey-2); color: var(--metin-2); box-shadow: none; } input.gecersiz, select.gecersiz { border-color: var(--kotu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kotu) 15%, transparent); } input.sayi-girdi { text-align: right; font-variant-numeric: tabular-nums; } /* Para kutusu (ui.js paraAlaniBagla): solda sabit ₺ işareti, tutar sağa yaslı ve binlik ayraçlı */ .para-kutu { position: relative; display: block; min-width: 0; } .alan > .para-kutu { margin-top: 7px; } .para-kutu > input { display: block; padding-left: 28px; font-variant-numeric: tabular-nums; } .para-kutu::before { content: "₺"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 14px; font-weight: 600; color: var(--metin-3); pointer-events: none; transition: color 0.15s ease; } .para-kutu:focus-within::before { color: var(--vurgu); } input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; padding: 0; accent-color: var(--vurgu); cursor: pointer; box-shadow: none; } .onay { display: inline-flex; align-items: center; gap: 9px; color: var(--metin); cursor: pointer; font-size: 14.5px; } .secenek-grup { display: flex; gap: 10px; flex-wrap: wrap; } .secenek { flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; cursor: pointer; border: 1px solid var(--cizgi-guclu); border-radius: var(--yaricap-kucuk); background: var(--yuzey); transition: border-color 0.15s ease, background 0.15s ease; } .secenek:hover { border-color: color-mix(in srgb, var(--cizgi-guclu) 65%, var(--metin-3)); } .secenek:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-zemin); } .secenek input { margin-top: 2px; } .secenek strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--metin); } .secenek small { color: var(--metin-3); font-weight: 400; } /* İki sütunlu alan dizilimi (cari paneli gibi dar formlar için) */ .alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .alanlar .tam { grid-column: 1 / -1; } .alan-buyuk input { height: 44px; font-size: 15.5px; } .alan-not { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--metin-3); line-height: 1.45; } .alan-not.uyari { color: var(--uyari); } .alan-not.hata { color: var(--kotu); } @media (max-width: 560px) { .alanlar { grid-template-columns: minmax(0, 1fr); } } /* Panel içindeki bölümler: ince çizgiyle ayrılmış, küçük başlıklı */ .panel-bolum { padding: 22px 0; border-top: 1px solid var(--cizgi); } .panel-bolum:first-child { padding-top: 0; border-top: 0; } .panel-bolum:last-of-type { padding-bottom: 0; } .panel-bolum > h3 { font-size: 14px; font-weight: 650; color: var(--metin); margin-bottom: 14px; } .bakiye-cumle { margin-top: 10px; font-size: 13.5px; color: var(--metin-2); line-height: 1.5; } .bakiye-cumle strong { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; } /* Açılıp kapanan "Diğer bilgiler" bölümü */ .panel-detay > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; user-select: none; font-size: 14px; font-weight: 650; color: var(--metin); } .panel-detay > summary::-webkit-details-marker { display: none; } .panel-detay > summary small { font-weight: 400; color: var(--metin-3); font-size: 12.5px; } .panel-detay > summary svg { width: 16px; height: 16px; margin-left: auto; color: var(--metin-3); transition: transform 0.2s ease; } .panel-detay > summary:hover svg { color: var(--metin); } .panel-detay[open] > summary svg { transform: rotate(180deg); } .panel-detay > .alanlar { margin-top: 16px; animation: soluk-gir 0.2s ease-out backwards; } /* Seçim düğmeleri (Müşteri / Tedarikçi / Her ikisi gibi) */ .segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--yuzey-3); border-radius: 11px; } .segment label { position: relative; } .segment input { position: absolute; opacity: 0; width: 1px; height: 1px; } .segment span { display: block; padding: 7px 15px; border-radius: 8px; font-size: 14px; font-weight: 550; color: var(--metin-2); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .segment span:hover { color: var(--metin); } .segment input:checked + span { background: var(--yuzey); color: var(--metin); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 0 0 1px var(--cizgi); } .segment input:focus-visible + span { box-shadow: var(--halka); } .segment input:disabled + span { cursor: not-allowed; opacity: 0.6; } /* Tam genişlik: seçenekler satırı eşit paylaşır */ .segment.blok { display: flex; width: 100%; } .segment.blok label { flex: 1 1 0; min-width: 0; } .segment.blok span { text-align: center; padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-hata { background: var(--kotu-zemin); color: var(--kotu); border-radius: var(--yaricap-kucuk); padding: 11px 14px; font-size: 14px; font-weight: 500; } .form-alt { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .yapiskan-alt { position: sticky; bottom: 0; z-index: 10; margin: 0 -36px -56px; padding: 14px 36px; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--cizgi); } @media (max-width: 1180px) { .yapiskan-alt { margin: 0 -16px -40px; padding: 12px 16px; } } .filtre { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); } .filtre > * { flex: 0 1 auto; } .filtre input[type="search"] { width: 260px; } .filtre select { width: auto; } .aralik { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .aralik input[type="date"] { width: 154px; } .aralik select { width: auto; } /* ------------------------------------------------------------------ tablolar */ .tablo-kap { width: 100%; overflow-x: auto; } /* Kart gövdesindeki tablolar ince çerçeveli kutuda */ .kart-govde .tablo-kap:not(.kalem-kaydir) { border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); } .tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tablo th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--metin-3); letter-spacing: 0.01em; padding: 11px 16px; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); white-space: nowrap; } .tablo th.sag { text-align: right; } /* Depo · kesim ve parçalama: kayıt arttıkça sayfa uzamaz, liste kendi içinde kayar; başlık satırı üstte sabit kalır */ .kart .tablo-kap.kesim-kaydir { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; } /* İşlemler listesi: ekranın altına kadar uzanır, kayıtlar kutunun içinde kayar (yükseklik ui.js ekranaSigdir) */ .kart .tablo-kap.liste-kaydir { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; } :is(.kesim-kaydir, .liste-kaydir) thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--cizgi); } .kesim-sayi { align-self: center; font-size: 13px; white-space: nowrap; } /* POS · bir günün ödemeleri penceresindeki tablo: ince çerçeveli kutu */ .pos-odeme-kap { border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); } /* Perakende Müşteri'nin cari kartında "yalnızca peşin satış" notu; hareket satırında bakiye yerine ödeme şekli */ .perakende-not { margin: 6px 4px 2px; font-size: 13px; line-height: 1.45; } .hareket-t > tbody .m-bakiye.m-odeme::before { content: none; } /* Cari kartında satışın kârı (açıklamada) ve carinin toplam kârı (özet kutusu) */ .kar-etiket { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .ozet-kutu.kar-kutu { --tc: var(--iyi); } .ozet-kutu.kar-kutu strong { color: var(--iyi); } .ozet-kutu.kar-kutu.zarar { --tc: var(--kotu); } .ozet-kutu.kar-kutu.zarar strong { color: var(--kotu); } .ozet-kutu.kar-kutu.sifir strong { color: var(--metin-3); } .ozet-kutu strong small { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--metin-2); } .tablo td { padding: 13px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; } .tablo th:first-child, .tablo td:first-child { padding-left: 20px; } .tablo th:last-child, .tablo td:last-child { padding-right: 20px; } .tablo tbody tr:last-child td { border-bottom: 0; } .tablo tr.tikla { cursor: pointer; } .tablo tr.tikla:hover td { background: var(--yuzey-2); } .tablo tr.iptal td { color: var(--metin-3); } .tablo tr.iptal td .tutar { text-decoration: line-through; } .tablo tfoot td { font-weight: 600; background: var(--yuzey-2); border-top: 1px solid var(--cizgi); border-bottom: 0; } .tablo .alt-satir { display: block; margin-top: 1px; font-size: 13px; color: var(--metin-3); max-width: 420px; } .tablo td.dar, .tablo th.dar { width: 1%; white-space: nowrap; } .tablo td.aciklama { color: var(--metin-2); font-size: 14px; min-width: 200px; max-width: 460px; } .tablo .devir td { color: var(--metin-2); font-style: italic; } .tablo a { color: var(--metin); } .tablo a:hover { color: var(--vurgu-yazi); } .tablo a.mono { color: var(--metin-2); } /* Cari listesi: baş harf simgesi, tip etiketi, iki satırlı bakiye ve satır sonunda ok */ .cari-tablo td { padding-top: 12px; padding-bottom: 12px; } .kod-hap { display: inline-block; padding: 3px 8px; border-radius: 7px; background: var(--yuzey-3); color: var(--metin-2); font-size: 12px; white-space: nowrap; } .cari-hucre { display: flex; align-items: center; gap: 12px; min-width: 0; } .cari-harf { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 13.5px; font-weight: 650; letter-spacing: 0.02em; background: color-mix(in srgb, var(--tc, var(--metin-3)) 12%, transparent); color: color-mix(in srgb, var(--tc, var(--metin-3)) 80%, var(--metin)); } .cari-hucre-metin { min-width: 0; } .cari-tablo tr.pasif-satir .cari-harf, .cari-tablo tr.pasif-satir .rozet.tip { filter: grayscale(1); opacity: 0.7; } .liste-bakiye { display: inline-grid; justify-items: end; gap: 3px; } .liste-bakiye-tutar { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .liste-bakiye-durum { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; background: var(--yuzey-3); color: var(--metin-3); } .liste-bakiye.borclu .liste-bakiye-tutar { color: var(--iyi); } .liste-bakiye.borclu .liste-bakiye-durum { background: var(--iyi-zemin); color: var(--iyi); } .liste-bakiye.alacakli .liste-bakiye-tutar { color: var(--kotu); } .liste-bakiye.alacakli .liste-bakiye-durum { background: var(--kotu-zemin); color: var(--kotu); } .liste-bakiye.kapali .liste-bakiye-tutar { color: var(--metin-3); font-weight: 600; } .cari-tablo td.satir-ok { padding-left: 0; } .satir-ok svg { display: block; width: 17px; height: 17px; transform: rotate(180deg); color: var(--metin-3); opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease; } .tablo tr.tikla:hover .satir-ok svg { opacity: 1; color: var(--vurgu); transform: rotate(180deg) translateX(-3px); } .sayfalama { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--cizgi); font-size: 13.5px; color: var(--metin-3); flex-wrap: wrap; } /* ------------------------------------------------------------------ rozetler ve bakiye */ .rozet { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 550; background: var(--yuzey-3); color: var(--metin-2); white-space: nowrap; } /* İşlem türü: türün renginde yumuşak etiket + nokta */ .rozet.tip, .rozet.islem-rozet { background: color-mix(in srgb, var(--tc, var(--metin-3)) 11%, transparent); color: color-mix(in srgb, var(--tc, var(--metin-3)) 62%, var(--metin)); font-size: 13px; font-weight: 550; gap: 6px; } .rozet .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--metin-3)); flex: none; } .t-SATIS { --tc: var(--t-satis); } .t-ALIS { --tc: var(--t-alis); } .t-TAHSILAT { --tc: var(--t-tahsilat); } .t-ODEME { --tc: var(--t-odeme); } .t-BORC_DEKONT, .t-ALACAK_DEKONT { --tc: var(--t-dekont); } .t-GIDER { --tc: var(--t-gider); } .t-GELIR { --tc: var(--t-gelir); } .rozet.iptal { background: var(--kotu-zemin); color: var(--kotu); } .rozet.pasif { background: var(--yuzey-3); color: var(--metin-2); } .rozet.uyari { background: var(--uyari-zemin); color: var(--uyari); } .rozet.basari { background: var(--iyi-zemin); color: var(--iyi); } .bakiye { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .bakiye small { font-weight: 500; font-size: 12px; margin-left: 5px; color: var(--metin-3); } .bakiye.borclu { color: var(--iyi); } .bakiye.alacakli { color: var(--kotu); } .bakiye.kapali { color: var(--metin-3); font-weight: 500; } .renk-iyi { color: var(--iyi); } .renk-kotu { color: var(--kotu); } /* ------------------------------------------------------------------ çeşitli */ .bos { padding: 52px 20px; text-align: center; color: var(--metin-3); font-size: 14px; } .bos svg { width: 22px; height: 22px; color: var(--metin-3); margin-bottom: 12px; padding: 13px; box-sizing: content-box; border-radius: 50%; background: var(--yuzey-3); } .bos strong { display: block; color: var(--metin); font-weight: 600; font-size: 15px; margin-bottom: 4px; } .bos .btn { margin-top: 16px; } .yukleniyor { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; color: var(--metin-3); } .yukleniyor::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cizgi-guclu); border-top-color: var(--vurgu); animation: don 0.7s linear infinite; } @keyframes don { to { transform: rotate(360deg); } } .uyari-kutu { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: var(--yaricap-kucuk); font-size: 14px; line-height: 1.5; } .uyari-kutu svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .uyari-kutu.kotu { background: var(--kotu-zemin); color: var(--kotu); } .uyari-kutu.bilgi { background: var(--vurgu-zemin); color: color-mix(in srgb, var(--vurgu-yazi) 70%, var(--metin)); } .uyari-kutu.sari { background: var(--uyari-zemin); color: var(--uyari); } .uyari-kutu strong { color: inherit; font-weight: 650; } .bilgi-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 14.5px; } .bilgi-liste dt { color: var(--metin-3); } .bilgi-liste dd { margin: 0; overflow-wrap: anywhere; } .sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 22px; overflow-x: auto; } .sekmeler button { border: 0; background: none; font: inherit; font-weight: 550; font-size: 14.5px; color: var(--metin-3); padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .sekmeler button:hover { color: var(--metin); } .sekmeler button.aktif { color: var(--vurgu-yazi); border-bottom-color: var(--vurgu); font-weight: 600; } .liste-sade { list-style: none; margin: 0; padding: 0; } .liste-sade li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 10px 20px; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; } .liste-sade li:last-child { border-bottom: 0; } .liste-sade a { color: var(--metin); font-weight: 500; } .liste-sade a:hover { color: var(--vurgu-yazi); } /* Ana sayfa aylık satış kartı: ay değişince yalnızca bu kart solup yenilenir */ .aylik-kart { transition: opacity 0.2s ease; } .aylik-kart.yukleniyor-kart { opacity: 0.55; pointer-events: none; } .aylik-kart > .grafik-yan { animation: soluk-gir 0.24s ease-out backwards; } /* Gösterge panelindeki "Bu ay" özeti */ .ozet-liste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; margin: 0; padding: 22px; font-size: 14.5px; align-content: start; } .ozet-liste dt { color: var(--metin-2); } .ozet-liste .ozet-baslik { grid-column: 1 / -1; color: var(--metin); font-weight: 650; } .ozet-liste dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .ozet-liste dd small { display: block; color: var(--metin-3); font-weight: 400; } .grafik-yan { display: grid; grid-template-columns: minmax(0, 1fr) 270px; } /* Kartta açılır menü olduğu için köşeler kırpılmaz; gri özet kutusu kartın yuvarlak köşesine uyar */ .grafik-yan > :last-child { border-left: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 calc(var(--yaricap) - 1px) 0; } @media (max-width: 1000px) { .grafik-yan { grid-template-columns: minmax(0, 1fr); } .grafik-yan > :last-child { border-left: 0; border-top: 1px solid var(--cizgi); border-radius: 0 0 calc(var(--yaricap) - 1px) calc(var(--yaricap) - 1px); } } /* ------------------------------------------------------------------ belge formu satırları */ .kalem-tablo { min-width: 900px; } .kalem-tablo td { padding: 6px 6px; vertical-align: top; } .kalem-tablo th { padding: 10px 6px; } .kalem-tablo td:first-child, .kalem-tablo th:first-child { padding-left: 16px; } .kalem-tablo td:last-child, .kalem-tablo th:last-child { padding-right: 10px; } .kalem-tablo input, .kalem-tablo select { height: 38px; font-size: 14.5px; } .kalem-tablo .sira { color: var(--metin-3); padding-top: 15px; width: 28px; } .kalem-tablo .k-tutar { padding-top: 15px; font-weight: 600; } .kalem-tablo .k-alt { display: block; font-size: 12px; color: var(--metin-3); font-weight: 400; margin-top: 2px; } .toplamlar { display: grid; grid-template-columns: max-content max-content; gap: 8px 32px; justify-content: end; font-size: 14.5px; } .toplamlar dt { color: var(--metin-3); } .toplamlar dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; } .toplamlar .genel { font-size: 18px; font-weight: 650; color: var(--metin); padding-top: 10px; border-top: 1px solid var(--cizgi); } .fire-not { margin-top: 14px; font-size: 14px; } .toplamlar .toplam-not { grid-column: 1 / -1; font-size: 13px; font-weight: 400; } /* Satış satırında ürünün maliyeti ve fiyata göre kâr / zarar */ .k-maliyet { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--metin-2); } .k-maliyet strong { font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums; } .k-maliyet strong, .k-maliyet .renk-iyi, .k-maliyet .renk-kotu { white-space: nowrap; } .k-maliyet .renk-iyi, .k-maliyet .renk-kotu { font-weight: 600; font-variant-numeric: tabular-nums; } /* Depoda olmayan malda: "Depoda yok. Kaça mal ettiniz? [₺ 0,00] / kg · kâr …" */ .k-elle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--metin-2); } .k-elle[hidden] { display: none; } .k-elle-etiket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; font-weight: 400; color: var(--metin-2); } .k-elle-kutu { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .k-elle-girdi { width: 112px; height: 34px; padding: 4px 10px; text-align: right; font-variant-numeric: tabular-nums; } .k-elle-kar .renk-iyi, .k-elle-kar .renk-kotu { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .panel-kar { font-size: 13.5px; color: var(--metin-3); margin-top: -6px; } .panel-kar strong { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; } .panel-kar strong.renk-iyi { color: var(--iyi); } .panel-kar strong.renk-kotu { color: var(--kotu); } .cari-bilgi { display: flex; gap: 28px; flex-wrap: wrap; padding: 13px 16px; border-radius: var(--yaricap-kucuk); background: var(--yuzey-2); font-size: 14.5px; } .cari-bilgi > div small { display: block; color: var(--metin-3); font-size: 12px; } .buyuk-tutar { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; } /* ------------------------------------------------------------------ seçici (arama kutulu açılır liste) */ .secici-liste { position: fixed; z-index: 200; max-height: 300px; overflow-y: auto; scrollbar-width: thin; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge-buyuk); padding: 5px; animation: soluk-gir 0.14s ease-out backwards; } .secici-oge { padding: 8px 11px; border-radius: 8px; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14.5px; } /* Uzun ürün adı ile açıklama yan yana sığmazsa açıklama alt satıra iner (liste yana kaymaz) */ .secici-oge > span { min-width: 0; overflow-wrap: anywhere; } .secici-oge small { color: var(--metin-3); white-space: nowrap; } .secici-oge.aktif, .secici-oge:hover { background: var(--vurgu-zemin); } .secici-bos { padding: 10px; color: var(--metin-3); font-size: 14px; } .secici-oge.secici-yeni { color: var(--vurgu-yazi); font-weight: 600; } .secici-oge.secici-yeni:not(:first-child) { margin-top: 4px; box-shadow: 0 -1px 0 var(--cizgi); border-radius: 0 0 8px 8px; } /* ------------------------------------------------------------------ modal ve bildirim */ .modal-arka { position: fixed; inset: 0; z-index: 100; background: var(--perde-renk); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; animation: soluk-gir 0.18s ease-out backwards; } .modal { width: 100%; max-width: 520px; background: var(--yuzey); border-radius: 18px; box-shadow: var(--golge-buyuk); border: 1px solid var(--cizgi); animation: modal-gir 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } @keyframes modal-gir { from { opacity: 0; transform: translateY(10px) scale(0.985); } } .modal.genis { max-width: 760px; } .modal-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--cizgi); } .modal-ust h2 { font-size: 17px; } .modal-ust p { margin-top: 2px; font-size: 13.5px; color: var(--metin-3); } .modal-govde { padding: 24px; } .modal-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--cizgi); flex-wrap: wrap; background: var(--yuzey-2); border-radius: 0 0 17px 17px; } /* Kapanış: arka plan solar, pencere hafifçe kaybolur */ .modal-arka.kapaniyor { animation: soluk-cik 0.2s ease-in forwards; pointer-events: none; } .modal-arka.kapaniyor .modal { animation: modal-cik 0.16s ease-in forwards; } @keyframes soluk-cik { to { opacity: 0; } } @keyframes modal-cik { to { opacity: 0; transform: translateY(6px) scale(0.99); } } /* Orta panel: ekranın ortasında açılan kayıt penceresi. Başlık ve düğmeler sabit kalır; içerik ekrana sığmazsa yalnızca aradaki bölüm kayar. */ .modal-arka.orta-panel-arka { align-items: center; padding: 24px 16px; overflow: hidden; } .modal.orta-panel { max-width: 560px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); } .modal.orta-panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .modal.orta-panel .modal-ust { padding: 18px 16px 16px 26px; } .modal.orta-panel .modal-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px 26px; scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; } .modal.orta-panel .modal-alt { padding: 14px 26px; } .modal.orta-panel .form-hata { margin-top: 18px; } /* Başlıkta simgeli pencere */ .modal-baslik { display: flex; align-items: center; gap: 14px; min-width: 0; } .modal-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .modal-ikon svg { width: 20px; height: 20px; } /* Satış / alış paneli */ .modal.orta-panel.ticari-panel { max-width: 900px; } /* Satırlar içerik kadar yüksek (max-content): pencere ekrandan uzun olunca alt alta duran bölümler (ör. peşin tutar alanı) küçülüp bir sonraki bölümün üstüne binmez, gövde kayar */ .ticari-panel .modal-govde, .odeme-panel .modal-govde { display: grid; gap: 18px; align-content: start; grid-auto-rows: max-content; } .ticari-panel .modal-alt > .btn, .odeme-panel .modal-alt > .btn { flex: 1 1 0; height: 44px; font-size: 14.5px; } .ticari-ust { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; } @media (max-width: 560px) { .ticari-ust { grid-template-columns: minmax(0, 1fr); } } /* Satır alanı sabit yükseklikte: satır eklendikçe pencere büyümez, bu alan kendi içinde kayar */ .kalem-kaydir { height: 236px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; } @media (max-height: 820px) { .kalem-kaydir { height: 188px; } } .panel-kalem thead th { position: sticky; top: 0; z-index: 2; background: var(--yuzey-2); } .kalem-kutu { display: grid; gap: 10px; justify-items: start; padding: 10px 12px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--yuzey-2); } .kalem-kutu .tablo-kap { justify-self: stretch; } .kalem-tablo.panel-kalem { min-width: 580px; width: 100%; border-collapse: separate; border-spacing: 0; } .panel-kalem th { padding: 4px 4px 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--metin-3); border: 0; text-align: left; white-space: nowrap; } .panel-kalem th.sag { text-align: right; padding-right: 6px; } .panel-kalem td, .panel-kalem td:first-child, .panel-kalem th:first-child { padding: 3px 4px; border: 0; } .panel-kalem tbody tr:last-child td { border: 0; } .panel-kalem input, .panel-kalem select { height: 40px; background-color: var(--yuzey); } .panel-kalem .k-tutar { padding-top: 12px !important; padding-right: 6px !important; } .toplam-kutu { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border: 1px solid var(--cizgi); border-left: 4px solid var(--metin-3); border-radius: var(--yaricap); background: var(--yuzey); } /* Düzenleme penceresi açılınca odak burada durur (kutu seçili görünmez, telefonda klavye açılmaz) */ .toplam-kutu:focus { outline: none; } .toplam-kutu.satis { border-left-color: var(--t-satis); } .toplam-kutu.alis { border-left-color: var(--t-alis); } .toplam-kutu.dusus { border-left-color: var(--iyi); } .toplam-kutu.dusus strong { color: var(--iyi); } .toplam-kutu > span { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--metin-2); } .toplam-kutu small { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--metin-3); } .toplam-kutu strong { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .pesin-satir { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 40px; } .pesin-alan { display: inline-flex; gap: 8px; } .pesin-alan input { width: 150px; } .pesin-alan select { width: 150px; } .panel-bakiye { font-size: 13.5px; color: var(--metin-3); } .panel-bakiye strong { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; } .panel-bakiye .ok { margin: 0 6px; } @media (max-width: 520px) { .modal-arka.orta-panel-arka { padding: 12px; } .modal.orta-panel { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); } .modal.orta-panel .modal-govde { padding: 18px 16px 22px; } .modal.orta-panel .modal-ust { padding: 14px 12px 14px 16px; } .modal.orta-panel .modal-alt { padding: 12px 16px; } } #bildirimler { position: fixed; right: 20px; top: 72px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); pointer-events: none; } .bildirim { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #1b2230; color: #f2f4f8; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: var(--golge-buyuk); font-size: 14px; font-weight: 500; animation: gir 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); } .bildirim::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7aa7ff; } .bildirim.hata { background: var(--kotu); color: #fff; } .bildirim.hata::before { background: #fff; } .bildirim.basari { background: #1b2230; color: #f2f4f8; } .bildirim.basari::before { background: #4ade80; } .bildirim.gidiyor { opacity: 0; transform: translateY(-6px); transition: all 0.25s; } @keyframes gir { from { opacity: 0; transform: translateY(-8px); } } /* ------------------------------------------------------------------ grafik (aylık satış) */ .grafik { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 22px 22px 16px; } .grafik-eksen { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: 12px; color: var(--metin-3); text-align: right; font-variant-numeric: tabular-nums; } .grafik-eksen span:first-child { transform: translateY(-50%); } .grafik-eksen span:last-child { transform: translateY(50%); } .grafik-alan { position: relative; min-width: 0; } .grafik-izgara { position: absolute; inset: 0 0 auto 0; height: 180px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .grafik-izgara i { display: block; height: 1px; background: var(--grafik-izgara); } .grafik-izgara i:last-child { background: var(--cizgi-guclu); } .grafik-sutunlar { position: relative; height: 180px; display: flex; align-items: stretch; gap: 3px; } .sutun { flex: 1; display: flex; align-items: flex-end; justify-content: center; cursor: default; border-radius: 5px; } .sutun:hover, .sutun:focus-visible { background: color-mix(in srgb, var(--seri-1) 8%, transparent); } .sutun-cubuk { width: 100%; max-width: 18px; background: linear-gradient(to top, var(--seri-1), color-mix(in srgb, var(--seri-1) 78%, #fff)); border-radius: 5px 5px 2px 2px; min-height: 0; } .grafik-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--metin-3); font-variant-numeric: tabular-nums; } .grafik-ipucu { position: absolute; z-index: 5; pointer-events: none; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge-buyuk); padding: 8px 12px; font-size: 13px; white-space: nowrap; transform: translate(-50%, -100%); } .grafik-ipucu strong { display: block; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .grafik-ipucu small { color: var(--metin-3); } /* Raporlar → dönem özeti: satış ve alış grafiği (iki seri yan yana; renkler işlem türü renkleriyle aynı) */ .grafik-kutu { border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); } .grafik-kutu-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); } .grafik-kutu-ust h3 { font-size: 15px; font-weight: 650; } .grafik-kutu-ust p { font-size: 13px; color: var(--metin-3); margin-top: 2px; } .grafik-kutu-sag { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; } .grafik-kutu .grafik-tablo { border: 0; border-radius: 0 0 var(--yaricap-kucuk) var(--yaricap-kucuk); max-height: 360px; overflow-y: auto; } .lejant { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--metin-2); } .lejant span { display: inline-flex; align-items: center; gap: 7px; } .lejant i { width: 10px; height: 10px; border-radius: 3px; background: var(--tc); } .lejant strong { color: var(--metin); font-weight: 650; } .grafik-cift .sutun { gap: 2px; } .grafik-cift .sutun:hover, .grafik-cift .sutun:focus-visible { background: color-mix(in srgb, var(--metin-3) 9%, transparent); } .grafik-cift .sutun-cubuk { flex: 1; max-width: 20px; background: linear-gradient(to top, var(--tc), color-mix(in srgb, var(--tc) 80%, #fff)); border-radius: 4px 4px 0 0; } .grafik-x.hizali { gap: 3px; } .grafik-x.hizali span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; } .ipucu-satir { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .ipucu-satir i { width: 12px; height: 3px; border-radius: 2px; background: var(--tc); align-self: center; } .grafik-ipucu .ipucu-satir strong { display: inline; font-size: 14px; } .ipucu-satir span { color: var(--metin-3); } /* Tür tablosundaki pay: alt türün kendi türü içindeki oranı, türün renginde ince çubuk */ .pay-baslik { width: 190px; } .pay { display: inline-flex; align-items: center; gap: 10px; } .pay-iz { width: 120px; height: 6px; border-radius: 3px; background: var(--yuzey-3); overflow: hidden; } .pay-iz i { display: block; height: 100%; border-radius: 3px; background: var(--tc); } .pay-metin { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--metin-2); } @media (max-width: 1000px) { .pay-baslik { width: auto; } .pay-iz { width: 64px; } } @media (max-width: 640px) { .pay-sutun { display: none; } } /* Rapor yenilenirken önceki sonuç soluk durur */ #rapor { transition: opacity 0.2s ease; } #rapor.yenileniyor { opacity: 0.55; pointer-events: none; } /* Ay seçici: ‹ | takvim Ekim 2026 [Bu ay] ▾ | › tek parça düğme. Ortası, Filtrele menüsü gibi yumuşakça açılan ay takvimini açar (yıl seçimi + 12 ay); seçili ay mavi, içinde bulunulan ay altında noktalı */ .ay-secici { display: inline-flex; align-items: stretch; height: 38px; background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--yaricap-kucuk); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .ay-ok { display: grid; place-items: center; width: 36px; padding: 0; border: 0; background: none; color: var(--metin-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ay-ok:first-child { border-radius: calc(var(--yaricap-kucuk) - 1px) 0 0 calc(var(--yaricap-kucuk) - 1px); } .ay-ok:last-child { border-radius: 0 calc(var(--yaricap-kucuk) - 1px) calc(var(--yaricap-kucuk) - 1px) 0; } .ay-ok:hover:not(:disabled) { background: var(--yuzey-2); color: var(--metin); } .ay-ok:disabled { opacity: 0.4; cursor: default; } .ay-ok svg { width: 16px; height: 16px; } .ay-ok.ileri svg, .ay-yil-ok.ileri svg { transform: rotate(180deg); } .ay-kap { display: flex; border-inline: 1px solid var(--cizgi); } .ay-dugme { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; list-style: none; cursor: pointer; user-select: none; font-size: 14px; font-weight: 600; color: var(--metin); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .ay-dugme::-webkit-details-marker { display: none; } .ay-dugme:hover { background: var(--yuzey-2); } .ay-dugme > svg { flex: none; width: 16px; height: 16px; color: var(--metin-3); transition: color 0.15s ease, transform 0.2s ease; } .ay-dugme > svg:last-child { width: 14px; height: 14px; } .ay-dugme em { font-style: normal; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 99px; background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .ay-kap[open] > .ay-dugme { background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .ay-kap[open] > .ay-dugme > svg { color: var(--vurgu); } .ay-kap[open] > .ay-dugme > svg:last-child { transform: rotate(180deg); } .ay-kap[open] > .ay-dugme em { background: var(--yuzey); } .ay-ok:focus-visible, .ay-dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; box-shadow: none; } @media (min-width: 761px) { .ay-menu { width: 296px; right: -37px; } } .ay-menu-yil { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ay-menu-yil strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .ay-yil-ok { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuzey); color: var(--metin-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ay-yil-ok:hover:not(:disabled) { background: var(--yuzey-2); color: var(--metin); } .ay-yil-ok:disabled { opacity: 0.35; cursor: default; } .ay-yil-ok svg { width: 15px; height: 15px; } .ay-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ay-hucre { position: relative; height: 40px; padding: 0 4px; border: 1px solid transparent; border-radius: 9px; background: var(--yuzey-2); color: var(--metin); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ay-hucre:hover:not(:disabled):not(.secili) { background: var(--yuzey); border-color: var(--cizgi-guclu); } .ay-hucre:disabled { background: none; color: var(--metin-3); opacity: 0.5; cursor: default; } .ay-hucre.bu-ay::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--vurgu); } .ay-hucre.secili { background: var(--vurgu); color: var(--vurgu-metin); font-weight: 650; } .ay-hucre.secili::after { background: var(--vurgu-metin); } .ay-hucre:focus-visible { box-shadow: var(--halka); } /* ------------------------------------------------------------------ giriş ekranı */ .giris-kap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 480px at 50% -8%, color-mix(in srgb, var(--vurgu) 10%, transparent), transparent 70%), var(--zemin); } .giris-kart { width: 100%; max-width: 400px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px; padding: 32px; box-shadow: var(--golge-buyuk); } .giris-kart .marka { padding: 0; } .giris-kart h1 { margin-top: 26px; font-size: 22px; } .giris-kart > p { margin: 4px 0 22px; font-size: 14px; } /* Başlığın altında açıklama yoksa (işletme adı logonun yanında) form başlıktan aynı boşlukla ayrılır */ .giris-kart h1 + form { margin-top: 20px; } .giris-kart .cihaz-kodu[hidden] { display: none; } .giris-kart .cihaz-kodu input { letter-spacing: 0.18em; font-variant-numeric: tabular-nums; } /* Ayarlar → Cihazlar: onaylayan ve tarihler tek satırda kalır (bilgisayar görünümü) */ @media (min-width: 701px) { .cihaz-t td:not(:first-child) { white-space: nowrap; } } /* Ayarlar → Cihazlar: oluşturulan cihaz kodu */ .cihaz-kod-kutu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .cihaz-kod-kutu p { flex: 1 1 260px; margin: 0; font-size: 13.5px; } .cihaz-kod { font-size: 30px; font-weight: 700; letter-spacing: 0.12em; padding: 8px 18px; border-radius: 12px; background: var(--yuzey-2, var(--zemin)); border: 1px dashed var(--cizgi-guclu); color: var(--metin); } /* ------------------------------------------------------------------ cari kartı */ .ust-etiket { font-size: 11.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--metin-3); } .cari-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .cari-baslik { position: relative; margin-top: 6px; padding-left: 16px; font-size: 27px; line-height: 1.25; letter-spacing: -0.02em; } .cari-baslik::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--vurgu); } .cari-baslik .rozet { vertical-align: middle; margin-left: 6px; } .cari-ust .geri { margin: 14px 0 0; font-weight: 500; } .cari-ust-2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .bakiye-kart { min-width: min(360px, 100%); padding: 16px 22px; background: var(--yuzey); box-shadow: var(--golge-kucuk); border: 1px solid var(--cizgi); border-left: 4px solid var(--cizgi-guclu); border-radius: var(--yaricap); } .bakiye-kart.borclu { border-left-color: var(--iyi); } .bakiye-kart.alacakli { border-left-color: var(--kotu); } .bakiye-kart-satir { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; } .bakiye-kart strong { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .bakiye-kart.borclu strong { color: var(--iyi); } .bakiye-kart.alacakli strong { color: var(--kotu); } .bakiye-rozet { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--yuzey-3); color: var(--metin-2); white-space: nowrap; } .bakiye-kart.borclu .bakiye-rozet { background: var(--iyi-zemin); color: var(--iyi); } .bakiye-kart.alacakli .bakiye-rozet { background: var(--kotu-zemin); color: var(--kotu); } /* Sol: işlem kısayolları, ürünler, cari bilgileri · Sağ: hesap hareketleri */ .cari-izgara { display: grid; gap: 20px; align-items: start; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "islem hareket" "urun hareket" "bilgi hareket"; grid-template-rows: auto auto 1fr; } .islem-kart { grid-area: islem; padding: 14px; } .hareket-kart { grid-area: hareket; min-width: 0; } .urun-kart { grid-area: urun; overflow: hidden; } .bilgi-kart { grid-area: bilgi; } /* Ekran daralınca sol sütun üste/alta geçer, tablo tam genişliği kullanır */ @media (max-width: 1480px) { .cari-izgara { grid-template-columns: minmax(0, 1fr); grid-template-areas: "islem" "hareket" "urun" "bilgi"; grid-template-rows: none; } .islem-liste { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } } @media (max-width: 600px) { .cari-ust { flex-direction: column-reverse; } .cari-baslik { font-size: 23px; } } .islem-ac { width: 100%; height: 44px; font-size: 14.5px; } .islem-ac svg { width: 18px; height: 18px; } .islem-liste { display: grid; gap: 8px; margin-top: 10px; animation: soluk-gir 0.2s ease-out backwards; } .islem-oge { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 14px; color: var(--metin); text-decoration: none !important; font-size: 14.5px; font-weight: 550; border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); background: var(--yuzey); transition: background 0.15s ease, border-color 0.15s ease; } .islem-oge:hover { background: var(--vurgu-zemin); border-color: color-mix(in srgb, var(--vurgu) 30%, transparent); } .islem-oge svg { width: 18px; height: 18px; color: var(--metin-3); flex: none; transition: color 0.15s ease; } .islem-oge:hover svg { color: var(--vurgu); } .sayac { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--yuzey-3); color: var(--metin-2); font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; } .kucuk-tablo { font-size: 14px; } .kucuk-tablo th, .kucuk-tablo td { padding: 9px 16px; } /* Hesap hareketleri: başlık + özet kutular, altında çerçeveli tablo */ .hareket-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 18px 18px 16px 20px; } .hareket-baslik h2 { font-size: 16px; } .cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 13px; } .cip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 11px; border-radius: 99px; background: var(--vurgu-zemin); color: var(--vurgu-yazi); border: 1px solid color-mix(in srgb, var(--vurgu) 22%, transparent); font-size: 13px; font-weight: 550; } .cip button { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.7; cursor: pointer; } .cip button:hover { background: color-mix(in srgb, var(--vurgu) 16%, transparent); opacity: 1; } .cip svg { width: 12px; height: 12px; } .ozet-kutular { display: flex; flex-wrap: wrap; gap: 8px; } /* İşlem listeleri: üstte seçili filtre etiketleri (solda) ve tür toplamları (sağda) */ .liste-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; min-height: 56px; padding: 12px 20px; border-bottom: 1px solid var(--cizgi); } .liste-ust .cipler { margin-top: 0; } .liste-ozet { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; } .liste-ozet:empty { display: none; } /* Özet kutuları: içi beyaz; yalnızca simge türün renginde. Solda etiket, altında belirgin tutar */ .ozet-kutu { min-width: 118px; padding: 9px 12px 10px; border-radius: 12px; text-align: left; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-kucuk); } .ozet-kutu span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--metin-2); white-space: nowrap; } .ozet-ikon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--tc, var(--metin-3)) 16%, transparent); color: var(--tc, var(--metin-3)); } .ozet-ikon svg { width: 13px; height: 13px; stroke-width: 2.1; } .ozet-kutu strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .ozet-kutu.sifir strong { color: var(--metin-3); font-weight: 600; } .nokta.t-SATIS, .nokta.t-ALIS, .nokta.t-TAHSILAT, .nokta.t-ODEME { background: var(--tc); } .bakiye-kutu { --tc: var(--metin-3); } .bakiye-kutu.borclu { --tc: var(--iyi); } .bakiye-kutu.borclu strong { color: var(--iyi); } .bakiye-kutu.alacakli { --tc: var(--kotu); } .bakiye-kutu.alacakli strong { color: var(--kotu); } /* Çek / senet: özet kutuları, süzme alanları, vade uyarıları ve ödeme formundaki çek alanları */ .rozet.bekliyor { background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .cek-ozet { margin-bottom: 18px; } .cek-ozet .ozet-kutu { flex: 1 1 200px; } .k-acik { --tc: var(--vurgu); } .k-geciken { --tc: var(--kotu); } .k-geciken:not(.sifir) strong { color: var(--kotu); } .k-yakin { --tc: var(--uyari); } .k-kapanan { --tc: var(--iyi); } .kutu-adet { font-size: 12px; font-weight: 500; color: var(--metin-3); } .kutu-adet::before { content: "·"; margin-right: 6px; } .cek-filtre { display: flex; flex-wrap: wrap; gap: 10px; } .cek-filtre select { width: 200px; } .cek-filtre input { width: 260px; } @media (max-width: 600px) { .cek-filtre select, .cek-filtre input { flex: 1 1 100%; width: 100%; } } .tablo .alt-satir.vade-gecti { color: var(--kotu); font-weight: 600; } .tablo .alt-satir.vade-yakin { color: var(--uyari); font-weight: 600; } .cek-panel textarea { min-height: 64px; resize: vertical; } .cek-panel input[readonly] { background: var(--yuzey-2); color: var(--metin-2); cursor: default; } .cek-panel input[readonly]:focus { box-shadow: none; border-color: var(--cizgi); } .kayit-bilgi { font-size: 12.5px; color: var(--metin-3); } .cek-alanlari { padding: 14px; border: 1px dashed var(--cizgi-guclu); border-radius: var(--yaricap); background: var(--yuzey-2); } .cek-bilgi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: 14px; align-items: center; } .cek-bilgi .link-btn { margin-left: 10px; font-size: 13.5px; } .hareket-kap { margin: 0 18px 18px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-kucuk); overflow: auto; } .hareket-tablo { font-size: 14px; } .hareket-tablo th { background: var(--yuzey-2); color: var(--metin-2); font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; } .hareket-tablo td { padding: 10px 12px; } .hareket-tablo th:first-child, .hareket-tablo td:first-child { padding-left: 12px; } .hareket-tablo th:last-child, .hareket-tablo td:last-child { padding-right: 12px; } .hareket-tablo td.sayi { white-space: nowrap; } .hareket-tablo th + th, .hareket-tablo td + td { border-left: 1px solid var(--cizgi); } .hareket-tablo tfoot td { background: var(--yuzey-2); } .hareket-tablo td.aciklama { min-width: 150px; } .hareket-tablo .belge-no { display: block; margin-top: 4px; font-size: 12px; white-space: nowrap; } @media (min-width: 1481px) { .hareket-kap { max-height: max(420px, calc(100vh - 340px)); scrollbar-width: thin; scrollbar-color: var(--cizgi-guclu) transparent; } .hareket-tablo thead th { position: sticky; top: 0; z-index: 1; } .hareket-tablo tfoot td { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -1px 0 var(--cizgi-guclu); } } .rozet.islem-rozet { height: 24px; padding: 0 10px; border-radius: 99px; } .satir-eylem { width: 1%; white-space: nowrap; padding: 3px 6px !important; } .satir-eylem .ikon-btn { width: 30px; height: 30px; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; } .satir-eylem .ikon-btn svg { width: 16px; height: 16px; } .hareket-tablo tr:hover .satir-eylem .ikon-btn, .satir-eylem .ikon-btn:focus-visible { opacity: 1; } @media (hover: none) { .satir-eylem .ikon-btn { opacity: 1; } } .ikon-btn.tehlike:hover { color: var(--kotu); background: var(--kotu-zemin); } /* Filtre menüsü: ana liste + sola açılan yan paneller */ .filtre-kap > summary { cursor: pointer; } .filtre-kap[open] > summary, #filtreDugme.etkin { border-color: var(--vurgu); color: var(--vurgu-yazi); } .filtre-sayi { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; margin-left: 2px; border-radius: 99px; background: var(--vurgu); color: var(--vurgu-metin); font-size: 11px; font-weight: 650; } .filtre-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 330px; padding: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: var(--golge-buyuk); transform-origin: top right; animation: filtre-gir 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } /* Menü süzülerek açılır; kapanırken önce solar (0.15 sn, ui.js filtreMenusuKur) */ @keyframes filtre-gir { from { opacity: 0; transform: translateY(-6px) scale(0.97); } } .filtre-kap.kapaniyor .filtre-menu { opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; transition: opacity 0.15s ease-in, transform 0.15s ease-in; } .fm-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 2px; } .fm-ust .link-btn { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; } .fm-grup { display: grid; gap: 6px; } .fm-oge-kap { position: relative; } .fm-oge { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 550; color: var(--metin); text-align: left; cursor: pointer; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fm-oge:hover { background: var(--yuzey-2); border-color: var(--cizgi-guclu); } .fm-oge > svg { width: 17px; height: 17px; flex: none; color: var(--metin-3); } .fm-oge > svg:last-child:not(:first-child) { margin-left: auto; width: 15px; height: 15px; } .fm-oge.acik { background: var(--yuzey-2); border-color: var(--cizgi-guclu); } .fm-oge.secili { background: var(--vurgu-zemin); border-color: color-mix(in srgb, var(--vurgu) 35%, transparent); color: var(--vurgu-yazi); } .fm-oge.secili > svg { color: var(--vurgu); } .fm-oge.secili > span::after { content: " ✓"; color: var(--vurgu); } .fm-yan { position: absolute; right: calc(100% + 12px); top: -14px; z-index: 2; width: 300px; padding: 14px; display: grid; gap: 10px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: var(--golge-buyuk); animation: fm-gir 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } @keyframes fm-gir { from { opacity: 0; transform: translateX(10px); } } .fm-tur-liste { width: 290px; gap: 6px; } /* Uzun seçenek listesi (ör. iller) kendi içinde kayar */ .fm-tur-liste.cok { max-height: 330px; overflow-y: auto; scrollbar-width: thin; } .fm-yan-2 { width: 330px; } /* Filtre düğmesi sayfanın solunda kalınca (ui.js filtreMenusuKur): menü sağa doğru açılır, yan paneller menünün içinde akar */ .filtre-kap.sola .filtre-menu { left: 0; right: auto; max-width: calc(100vw - 32px); transform-origin: top left; } .filtre-kap.sola :is(.fm-yan, .fm-tur-liste, .fm-yan-2) { position: static; width: auto; margin-top: 6px; box-shadow: none; background: var(--yuzey-2); animation: soluk-gir 0.22s ease-out backwards; } .filtre-kap.sola .fm-yan .fm-oge { background: var(--yuzey); } .filtre-kap.sola .fm-oge > svg:last-child:not(:first-child) { transform: rotate(-90deg); } @media (max-width: 760px) { .filtre-kap { position: static; } .filtre-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; transform-origin: top center; } .fm-yan, .fm-tur-liste, .fm-yan-2 { position: static; width: auto; margin-top: 6px; box-shadow: none; background: var(--yuzey-2); animation: soluk-gir 0.22s ease-out backwards; } .fm-tur-liste.cok { max-height: none; } .fm-yan .fm-oge { background: var(--yuzey); } .fm-oge > svg:last-child:not(:first-child) { transform: rotate(-90deg); } } /* ------------------------------------------------------------------ telefon */ /* Program çoğunlukla telefondan kullanılır. Bu bölümdeki kurallar yalnızca dar ekranlarda geçerlidir; bilgisayardaki görünüm değişmez. İlkeler: yazılar okunaklı (giriş kutuları 16 px: iPhone dokununca ekranı büyütmez), dokunma alanları en az 44 px, listeler kart satırı (tutar / bakiye sağda, büyük), formlar tek sütun, kayıt pencereleri tam ekran. */ @media (min-width: 1001px) { .yalniz-mobil { display: none !important; } } .tel-baglanti { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; } .tel-baglanti svg { width: 15px; height: 15px; flex: none; } .cari-eposta { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; } .cari-eposta svg { width: 15px; height: 15px; flex: none; } @media (hover: none) { .klavye-ipucu { display: none !important; } } /* Dokunmatik ekranlar (telefon, her boyutta tablet) ve dar pencereler: giriş kutuları 16 px ve daha yüksek (iPhone / iPad 16 pikselden küçük yazılı kutuya dokununca ekranı kendiliğinden büyütür) */ @media (max-width: 960px), (pointer: coarse) { input, select, textarea { font-size: 16px; } :is(input, select, textarea).mono { font-size: 16px; } .alan-buyuk input { font-size: 17px; } input:not([type="checkbox"]):not([type="radio"]), select { height: 46px; } .kalem-tablo input, .kalem-tablo select, .panel-kalem input, .panel-kalem select { height: 46px; font-size: 16px; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; } .para-kutu::before { font-size: 16px; } .para-kutu > input { padding-left: 30px; } /* Klavye açılınca odaklanan kutu (ve başlığı) üst çubuğun altında kalmasın; pencere içinde üst çubuk yoktur */ :is(input, select, textarea) { scroll-margin: calc(76px + env(safe-area-inset-top)) 0 110px; } :is(.alan, .kalem-tablo td) { scroll-margin-top: calc(68px + env(safe-area-inset-top)); } .modal :is(.alan, .kalem-tablo td) { scroll-margin-top: 10px; } .modal :is(input, select, textarea) { scroll-margin: 40px 0 20px; } } /* Dokunmatik ekranlarda (ör. tablet, bilgisayar görünümünde bile) küçük düğme ve bağlantılar parmakla rahat basılacak boyutta; fareyle kullanılan bilgisayarda görünüm değişmez. Telefondaki daha büyük ölçüler aşağıdaki bölümdedir. */ @media (pointer: coarse) { .btn-kucuk { min-height: 40px; } .ikon-btn { min-width: 40px; min-height: 40px; } .satir-eylem .ikon-btn { width: 40px; height: 40px; } .link-btn { min-height: 40px; display: inline-flex; align-items: center; } .alan-ust .link-btn { margin: -10px 0; } .geri { min-height: 40px; } .onay { min-height: 40px; } .panel-detay > summary { min-height: 44px; } .tel-baglanti { min-height: 40px; } .cari-ad-link { padding: 10px 0; } .ay-yil-ok { width: 40px; height: 40px; } .ay-hucre { min-height: 44px; } /* Satırı dokunulabilir olmayan tablolardaki (ör. işlem günlüğü) bağlantılar: dolgu dokunma alanını büyütür, satır yüksekliği değişmez */ .tablo tr:not(.tikla) td a:not(.btn) { display: inline-block; padding: 12px 0; margin: -12px 0; } .uyari-kutu a { padding: 13px 0; } } /* Eksik bilgi uyarısı Kaydet düğmelerinin hemen üstünde sabit görünür; sayfa (ya da pencere) uyarıya kaymadığı için hatalı kutu da ekranda kalır (ui.js formHatasi). Telefondaki ölçüler aşağıdaki bölümdedir. */ .sayfa > form > .form-hata:has(+ .yapiskan-alt), .modal .modal-govde .form-hata { position: sticky; bottom: 76px; z-index: 9; border: 1px solid color-mix(in srgb, var(--kotu) 30%, transparent); box-shadow: var(--golge-orta); } .modal .modal-govde .form-hata { bottom: 0; } /* Pencerede uyarı çıkınca odaklanan kutu (ör. çek no) uyarının altında kalmaz, üstünde görünür */ .modal .modal-govde { scroll-padding-bottom: 84px; } /* Altta sabit Kaydet çubuğu olan sayfada, odaklanan kutu (ör. peşin tutarı) çubuğun arkasında kalmaz */ html:has(.yapiskan-alt) { scroll-padding-bottom: 90px; } /* Fareli bilgisayarda odaklanan kutu üstteki sabit çubuğun arkasında kalmaz (telefon / tablette kutuların kendi payı var) */ @media (min-width: 961px) and (pointer: fine) { html { scroll-padding-top: 72px; } } /* Ürün / cari seçici, telefonda kutunun altında sayfanın içinde açılır (ui.js "satir-ici"); satırlar parmağa göre */ .secici-liste.satir-ici { position: relative; z-index: 5; margin-top: 6px; max-height: min(52vh, 360px); box-shadow: var(--golge-orta); } .satir-ici .secici-oge { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; padding: 9px 12px; font-size: 16px; } .satir-ici .secici-oge small { font-size: 13px; white-space: normal; } .satir-ici .secici-bos { font-size: 15px; } /* Dar ekran (≤1000 px: telefon, dik tablet, yan çevrilmiş telefon, dar pencere): listeler ve tablolar yana kaydırılmadan okunsun diye her satır bir karttır; ürün satırları da kutulardan oluşan kartlardır. */ @media (max-width: 1000px) { .yalniz-masaustu { display: none !important; } .mobil-ara { position: relative; display: block; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); } .mobil-ara > svg { position: absolute; left: 27px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--metin-3); pointer-events: none; } .mobil-ara input { height: 48px; padding-left: 42px; border-radius: 12px; } /* ---- listeler: her satır bir kart. Tablo başlığı gizlenir, hücreler sınıflarına göre yerleşir (.m-*). */ .tablo-kap:has(> .mliste), .tablo-kap:has(> .etiketli) { overflow: visible; } .tablo.mliste, .tablo.mliste > tbody, .tablo.mliste > tfoot { display: block; } .tablo.mliste > thead { display: none; } .tablo.mliste > tbody > tr, .tablo.mliste > tfoot > tr { display: grid; align-items: center; column-gap: 12px; row-gap: 4px; padding: 13px 16px; border-bottom: 1px solid var(--cizgi); } .tablo.mliste > tbody > tr:last-child { border-bottom: 0; } .tablo.mliste > tfoot > tr { background: var(--yuzey-2); border-top: 1px solid var(--cizgi); border-bottom: 0; } /* Hücrenin görünümü (display) düşük öncelikli verilir: listelere özel kurallar (gizleme, satır sınırı) bunu yenebilsin. Genişlik ise "dar" sütunların bilgisayardaki %1 genişliğini geçersiz kılmalıdır. */ .tablo.mliste :where(td) { display: block; } .tablo.mliste td { width: auto; min-width: 0; max-width: none; padding: 0 !important; border: 0 !important; background: none !important; } .tablo.mliste td:empty { display: none; } .tablo.mliste .alt-satir { max-width: none; } /* Kartın tamamı tek dokunma alanıdır; içteki ad / numara bağlantıları ayrıca tetiklenmez (yanlış sayfaya gidilmez) */ :is(.mliste, .etiketli) tr.tikla a { pointer-events: none; } .tablo tr.tikla:active td, .tablo.mliste > tbody > tr.tikla:active { background: var(--yuzey-2) !important; } .satir-ok, .tablo td.satir-eylem { display: none; } /* İşlemler: cari ve tutar · tarih, belge no, tür · açıklama */ .islem-t > tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cari cari tutar" "tarih no tur" "acik acik acik"; } .islem-t .m-cari { grid-area: cari; font-size: 15.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .islem-t .m-cari a { color: var(--metin); } .islem-t .m-tutar { grid-area: tutar; align-self: start; font-size: 16.5px; font-weight: 700; text-align: right; } .islem-t .m-tarih { grid-area: tarih; font-size: 13.5px; color: var(--metin-2); } .islem-t .m-no { grid-area: no; overflow: hidden; white-space: nowrap; } .islem-t .m-no a { font-size: 12.5px; color: var(--metin-3); } .islem-t .m-tur { grid-area: tur; justify-self: end; display: flex; gap: 4px; } .islem-t .m-aciklama { grid-area: acik; font-size: 13.5px; line-height: 1.45; color: var(--metin-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .islem-t tr.iptal :is(.m-cari, .m-cari a, .m-tutar) { color: var(--metin-3); } /* Cari listesi: baş harfler, ad ve telefon / il · bakiye */ .cari-t > tbody > tr, .cari-t > tfoot > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad bakiye"; padding: 12px 14px; } .cari-t td:is(.m-kod, .m-tip, .m-son, .m-ok) { display: none; } .cari-t .m-ad, .cari-t .m-ozet { grid-area: ad; } .cari-t .m-ozet { font-weight: 600; } .cari-t .m-bakiye { grid-area: bakiye; } .cari-t .cari-hucre { gap: 12px; } .cari-t .cari-harf { width: 44px; height: 44px; font-size: 14.5px; } .cari-t .cari-hucre-metin a { color: var(--metin); } .cari-t .cari-hucre-metin strong { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cari-t .alt-satir { margin-top: 2px; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cari-t .liste-bakiye-tutar { font-size: 16px; } .cari-t .liste-bakiye-durum { font-size: 12.5px; } /* Cari hesap hareketleri: işlem ve tutar · tarih ve o andaki bakiye · açıklama */ .hareket-kap { margin: 0 10px 10px; } .hareket-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "islem tutar" "tarih bakiye" "acik acik"; padding: 12px 14px; } .hareket-t td:is(.m-sno, .m-eylem) { display: none; } .hareket-t .m-islem { grid-area: islem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .hareket-t .m-islem .belge-no { display: inline; margin: 0; font-size: 12.5px; color: var(--metin-3); } .hareket-t .m-tutar { grid-area: tutar; font-size: 16.5px; font-weight: 700; text-align: right; } .hareket-t .m-tarih { grid-area: tarih; font-size: 13.5px; color: var(--metin-2); } .hareket-t .m-bakiye { grid-area: bakiye; font-size: 13.5px; color: var(--metin-2); text-align: right; } .hareket-t > tbody .m-bakiye::before { content: "Bakiye "; color: var(--metin-3); } .hareket-t .m-aciklama { grid-area: acik; font-size: 13.5px; line-height: 1.45; color: var(--metin-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hareket-t > tbody > tr.devir { grid-template-areas: "acik acik" "tarih bakiye"; } .hareket-t > tfoot > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ozet tutar" "ozet bakiye"; padding: 12px 14px; } .hareket-t .m-ozet { grid-area: ozet; font-weight: 600; } .hareket-t > tfoot .m-bakiye { font-size: 15px; font-weight: 700; color: var(--metin); } .hareket-t > tfoot .m-bakiye::before { content: "Son bakiye "; font-size: 13px; font-weight: 500; color: var(--metin-3); } .hareket-ust { padding: 14px 14px 12px; } .ozet-kutular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } .ozet-kutu { min-width: 0; } .ozet-kutu span { font-size: 13px; } .ozet-kutu strong { font-size: 16.5px; } .ozet-kutular > .ozet-kutu:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Belgedeki ürünler: ürün ve tutar · miktar ve birim fiyat · baş/adet ve KDV */ .kalem-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun tutar" "miktar fiyat" "adet kdv"; row-gap: 5px; } .kalem-t td.m-sira { display: none; } .kalem-t .m-urun { grid-area: urun; font-size: 15px; } .kalem-t .m-tutar { grid-area: tutar; align-self: start; font-size: 16px; } .kalem-t :is(.m-miktar, .m-fiyat, .m-adet, .m-kdv) { font-size: 13.5px; color: var(--metin-2); white-space: normal; } .kalem-t :is(.m-miktar, .m-fiyat, .m-adet, .m-kdv)::before { content: attr(data-etiket) ": "; color: var(--metin-3); } .kalem-t .m-miktar { grid-area: miktar; text-align: left; } .kalem-t .m-fiyat { grid-area: fiyat; text-align: right; } .kalem-t .m-adet { grid-area: adet; text-align: left; } .kalem-t .m-adet.bos { display: none; } .kalem-t .m-kdv { grid-area: kdv; text-align: right; } .kalem-t .m-miktar .alt-satir { display: inline; } .kalem-t .m-miktar .alt-satir::before { content: " · "; } /* Ürünler: ad, altında kategori ve satış fiyatı */ .urun-t > tbody > tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "urun"; } .urun-t td:is(.m-kod, .m-kat, .m-alis, .m-satis) { display: none; } .urun-t .m-urun { grid-area: urun; align-self: center; font-size: 15.5px; } .urun-t .m-urun a { color: var(--metin); } .urun-t .m-urun .alt-satir { margin-top: 3px; font-size: 13.5px; } /* Ürünün depo hareketleri: tür, açıklama, giren / çıkan · tarih, no, o anki stok */ .stok-t > tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kaynak acik miktar" "tarih no stok"; } .stok-t .m-kaynak { grid-area: kaynak; } .stok-t .m-aciklama { grid-area: acik; font-size: 14px; font-weight: 550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .stok-t :is(.m-giris, .m-cikis) { grid-area: miktar; text-align: right; font-size: 15.5px; font-weight: 700; } .stok-t .m-giris { color: var(--iyi); } .stok-t .m-giris::before { content: "+"; } .stok-t .m-cikis { color: var(--kotu); } .stok-t .m-cikis::before { content: "−"; } .stok-t .m-tarih { grid-area: tarih; font-size: 13.5px; color: var(--metin-2); } .stok-t .m-no { grid-area: no; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--metin-3); } .stok-t .m-stok { grid-area: stok; text-align: right; font-size: 13.5px; } .stok-t .m-stok::before { content: "Stok "; font-weight: 400; color: var(--metin-3); } /* Depo: ürün ve stok · kategori, maliyet ve değer (ürün hücresinin alt satırında) ve "Sayım" */ .depo-urun-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun stok" "urun dugme"; row-gap: 8px; } .depo-urun-t td:is(.m-maliyet, .m-deger) { display: none; } .depo-urun-t .m-urun { grid-area: urun; align-self: center; font-size: 15.5px; } .depo-urun-t .m-urun a { color: var(--metin); } .depo-urun-t .m-urun .alt-satir { margin-top: 3px; font-size: 13px; } .depo-urun-t .m-stok { grid-area: stok; text-align: right; font-size: 15.5px; } .depo-urun-t .m-dugme { grid-area: dugme; justify-self: end; } /* Kesim ve parçalama kayıtları: işlem ve giren → çıkanlar · tarih, verim ve fire */ .kesim-t > tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tur ozet ozet" "tarih verim fire"; row-gap: 6px; } .kesim-t .m-tur { grid-area: tur; align-self: start; } .kesim-t .m-ozet { grid-area: ozet; font-size: 14.5px; } .kesim-t .m-ozet a { color: var(--metin); } .kesim-t .m-ozet .alt-satir { margin-top: 2px; font-size: 13px; } .kesim-t .m-tarih { grid-area: tarih; font-size: 13px; color: var(--metin-3); } .kesim-t .m-verim { grid-area: verim; text-align: right; font-size: 13px; } .kesim-t .m-verim::before { content: "Verim "; color: var(--metin-3); } .kesim-t .m-fire { grid-area: fire; text-align: right; font-size: 13px; padding-left: 12px; } .kesim-t .m-fire::before { content: "Fire "; color: var(--metin-3); } /* Kesim formunun özeti: ürün ve kilo maliyeti · miktar ve maliyet payı */ .kesim-maliyet-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun kilo" "miktar pay"; row-gap: 3px; } .kesim-maliyet-t .m-urun { grid-area: urun; font-size: 14.5px; } .kesim-maliyet-t .m-kilo { grid-area: kilo; text-align: right; font-size: 14.5px; } .kesim-maliyet-t .m-miktar { grid-area: miktar; text-align: left; font-size: 13px; color: var(--metin-2); } .kesim-maliyet-t .m-pay { grid-area: pay; text-align: right; font-size: 13px; color: var(--metin-3); } .kesim-maliyet-t .m-pay::before { content: "Pay "; } /* Kesim kaydının çıkan ürünleri: ürün ve toplam maliyet · miktar ve kilo maliyeti */ .kesim-cikti-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun toplam" "miktar kilo"; row-gap: 4px; } .kesim-cikti-t td.m-pay { display: none; } .kesim-cikti-t .m-urun { grid-area: urun; font-size: 15px; } .kesim-cikti-t .m-urun a { color: var(--metin); } .kesim-cikti-t .m-toplam { grid-area: toplam; text-align: right; font-size: 15px; } .kesim-cikti-t .m-miktar { grid-area: miktar; text-align: left; font-size: 13px; color: var(--metin-2); } .kesim-cikti-t .m-kilo { grid-area: kilo; text-align: right; font-size: 13px; color: var(--metin-2); } /* Giderler: kategori ve tutar · açıklama · tarih ve ödeme yöntemi */ .gider-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kat tutar" "acik acik" "tarih yontem"; row-gap: 4px; } .gider-t .m-kat { grid-area: kat; font-size: 15px; font-weight: 600; } .gider-t .m-kat a { color: var(--metin); } .gider-t .m-tutar { grid-area: tutar; text-align: right; font-size: 15.5px; } .gider-t .m-aciklama { grid-area: acik; font-size: 13.5px; color: var(--metin-2); } .gider-t .m-tarih { grid-area: tarih; font-size: 13px; color: var(--metin-3); } .gider-t .m-yontem { grid-area: yontem; text-align: right; font-size: 13px; color: var(--metin-3); } /* Çek / senetler: cari ve tutar · vade ve durum · tür, no, banka · kayıt no */ .cek-t > tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cari cari tutar" "vade vade durum" "tur evrak evrak" "kayit kayit kayit"; } .cek-t .m-cari { grid-area: cari; font-size: 15.5px; font-weight: 600; } .cek-t .m-cari a { color: var(--metin); } .cek-t .m-cari .alt-satir { font-weight: 400; } .cek-t .m-tutar { grid-area: tutar; align-self: start; font-size: 16.5px; } .cek-t .m-vade { grid-area: vade; font-size: 14px; } .cek-t .m-durum { grid-area: durum; justify-self: end; } .cek-t .m-tur { grid-area: tur; font-size: 13.5px; color: var(--metin-2); } .cek-t .m-evrak { grid-area: evrak; font-size: 13.5px; } .cek-t .m-kayit { grid-area: kayit; font-size: 12.5px; color: var(--metin-3); } .cek-t td.m-kayit { white-space: normal; } .cek-t :is(.m-vade, .m-evrak, .m-kayit) .alt-satir { display: inline; margin: 0 0 0 6px; } .cek-t .m-kayit .alt-satir { font-size: 12.5px; } .cek-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cek-ozet .ozet-kutu { flex: none; } .cek-ozet .ozet-kutu > span { flex-wrap: wrap; row-gap: 2px; line-height: 1.3; white-space: normal; } .cek-ozet .kutu-adet { flex-basis: 100%; } .cek-ozet .kutu-adet::before { content: none; } /* Dönem özeti türleri: tür, kategori ve toplam · adet ve türü içindeki payı (çubuk) */ .tur-t > tbody > tr { grid-template-columns: minmax(76px, auto) minmax(0, 1fr) auto; grid-template-areas: "tur kat tutar" "adet pay pay"; row-gap: 8px; } .tur-t .m-tur { grid-area: tur; } .tur-t .m-kat { grid-area: kat; font-size: 15px; font-weight: 600; } .tur-t .m-tutar { grid-area: tutar; font-size: 15.5px; text-align: right; } .tur-t .m-adet { grid-area: adet; font-size: 13.5px; color: var(--metin-2); text-align: left; } .tur-t .m-pay { grid-area: pay; justify-self: end; } .tur-t .pay-iz { width: clamp(48px, 26vw, 110px); } /* Kasa hareketleri: cari / kategori ve tutar (giriş yeşil +, çıkış kırmızı −) · tarih ve tür · ödeme yöntemi ve belge no */ .kasa-t > tbody > tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "baslik baslik tutar" "tarih tarih tur" "yontem no no"; } .kasa-t .m-baslik { grid-area: baslik; font-size: 15.5px; font-weight: 600; line-height: 1.35; } .kasa-t .m-baslik .alt-satir { margin-top: 2px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--metin-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kasa-t td:is(.m-giris, .m-cikis) { grid-area: tutar; align-self: start; font-size: 16px; font-weight: 700; text-align: right; } .kasa-t .m-giris { color: var(--iyi); } .kasa-t .m-giris::before { content: "+"; } .kasa-t .m-cikis { color: var(--kotu); } .kasa-t .m-cikis::before { content: "−"; } .kasa-t .m-tarih { grid-area: tarih; font-size: 13.5px; color: var(--metin-2); } .kasa-t .m-yontem { grid-area: yontem; font-size: 13.5px; white-space: nowrap; } .kasa-t .m-tur { grid-area: tur; justify-self: end; } .kasa-t .m-no { grid-area: no; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--metin-3); } .kasa-t .m-no::before { content: "· "; } .kasa-t .m-no a { font-size: 12.5px; color: var(--metin-3); } /* Raporlar ve ayarlar tabloları: her satır, başlığı ve altında "etiket: değer" satırları olan bir kart */ .tablo.etiketli, .tablo.etiketli > tbody, .tablo.etiketli > tfoot { display: block; } .tablo.etiketli > thead { display: none; } .tablo.etiketli > tbody > tr, .tablo.etiketli > tfoot > tr { display: flex; flex-direction: column; gap: 6px; padding: 13px 16px; border-bottom: 1px solid var(--cizgi); } .tablo.etiketli > tbody > tr:last-child { border-bottom: 0; } .tablo.etiketli > tfoot > tr { background: var(--yuzey-2); border-top: 1px solid var(--cizgi); } .tablo.etiketli td { display: flow-root; min-width: 0; max-width: none; width: auto; padding: 0 !important; border: 0 !important; background: none !important; font-size: 14.5px; text-align: right; white-space: normal; } .tablo.etiketli td::before { content: attr(data-etiket); float: left; margin-right: 14px; color: var(--metin-3); font: 500 13.5px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; } /* Satırın tamamı dokunulabilir olmayan tablolarda bağlantının dokunma alanı büyütülür (satır yüksekliği değişmez) */ .tablo.etiketli tr:not(.tikla) td a { display: inline-block; padding: 10px 0; margin: -10px 0; } .tablo.etiketli td:empty, .tablo.etiketli td.m-bos { display: none; } .tablo.etiketli tr > td:first-child, .tablo.etiketli td.m-baslik { order: -1; font-size: 15.5px; font-weight: 600; text-align: left; } .tablo.etiketli tr > td:first-child::before, .tablo.etiketli td.m-baslik::before { content: none; } .tablo.etiketli tr:has(> .m-baslik) > td:first-child:not(.m-baslik) { order: 0; font-size: 14.5px; font-weight: 400; text-align: right; } .tablo.etiketli tr:has(> .m-baslik) > td:first-child:not(.m-baslik)::before { content: attr(data-etiket); } .tablo.etiketli .alt-satir { max-width: none; font-weight: 400; } .tablo.etiketli :is(td.m-baslik, tr > td:first-child) .alt-satir { text-align: left; } .tablo.etiketli td.aciklama { min-width: 0; } .tablo.etiketli .btn { margin-top: 4px; } /* ---- satış / alış formundaki ürün satırları: her satır, etiketli kutulardan oluşan bir kart */ .tablo-kap:has(> .kalem-tablo) { overflow: visible; } .kart > .tablo-kap:has(> .kalem-tablo) { padding: 14px 14px 0; } .kalem-tablo, .kalem-tablo > tbody { display: block; width: 100%; min-width: 0 !important; } .kalem-tablo > thead { display: none; } .kalem-tablo > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-bottom: 12px; padding: 14px 12px 12px; background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: 14px; box-shadow: var(--golge-kucuk); } .kalem-tablo td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; } .kalem-tablo td[data-etiket]::before { content: attr(data-etiket); display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--metin-2); } .kalem-tablo .sira { display: none; } .kalem-tablo .ku-urun { order: 1; grid-column: 1 / -1; padding-right: 50px !important; } .kalem-tablo .ku-sil { position: absolute; top: 6px; right: 6px; } .kalem-tablo .ku-miktar { order: 2; } .kalem-tablo .ku-birim { order: 3; } .kalem-tablo .ku-fiyat { order: 4; } .kalem-tablo .ku-kdv { order: 5; } .kalem-tablo .ku-adet { order: 6; } .kalem-tablo .ku-aciklama { order: 7; grid-column: 1 / -1; } .kalem-tablo tr:has(.ku-kdv):has(.ku-adet) .ku-aciklama { grid-column: auto; } .kalem-tablo tr:not(:has(.ku-kdv)):not(:has(.ku-adet)) .ku-fiyat { grid-column: 1 / -1; } .kalem-tablo .ku-tutar { order: 8; grid-column: 1 / -1; padding-top: 10px !important; border-top: 1px dashed var(--cizgi-guclu) !important; font-size: 18px; font-weight: 700; text-align: right; } .kalem-tablo .ku-tutar::before { display: inline !important; float: left; margin: 3px 0 0 !important; font-size: 14px !important; } .kalem-tablo .k-tutar .k-alt { font-size: 13px; } .kalem-kutu { padding: 10px; } .kalem-kaydir { height: auto !important; overflow: visible; } /* Gelir Gider · ürünlere göre kâr: ürün ve kâr · satılan ve kâr oranı · satış ve maliyet */ .gg-urun-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun kar" "miktar oran" "satis maliyet"; row-gap: 5px; } .gg-urun-t .m-urun { grid-area: urun; font-size: 15.5px; } .gg-urun-t .m-urun a { color: var(--metin); } .gg-urun-t .m-urun .alt-satir { margin-top: 2px; font-size: 13px; } .gg-urun-t .m-kar { grid-area: kar; align-self: start; font-size: 16px; text-align: right; } .gg-urun-t :is(.m-miktar, .m-satis, .m-maliyet, .m-oran) { font-size: 13.5px; color: var(--metin-2); } .gg-urun-t :is(.m-miktar, .m-satis, .m-maliyet, .m-oran)::before { content: attr(data-etiket) ": "; color: var(--metin-3); } .gg-urun-t .m-miktar { grid-area: miktar; text-align: left; } .gg-urun-t .m-oran { grid-area: oran; text-align: right; } .gg-urun-t .m-satis { grid-area: satis; text-align: left; } .gg-urun-t .m-maliyet { grid-area: maliyet; text-align: right; } /* Gelir Gider · son 6 ay: ay ve net kâr · satış, brüt kâr, gider */ .gg-ay-t > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ay ay net" "satis brut gider"; row-gap: 6px; } .gg-ay-t > tbody > tr.secili { background: var(--vurgu-zemin); } .gg-ay-t .m-ay { grid-area: ay; font-size: 15px; } .gg-ay-t .m-net { grid-area: net; text-align: right; font-size: 16px; } .gg-ay-t :is(.m-satis, .m-brut, .m-gider) { font-size: 13.5px; text-align: left; } .gg-ay-t :is(.m-satis, .m-brut, .m-gider)::before { content: attr(data-etiket); display: block; font-size: 12.5px; font-weight: 400; color: var(--metin-3); } .gg-ay-t .m-satis { grid-area: satis; color: var(--metin-2); } .gg-ay-t .m-brut { grid-area: brut; } .gg-ay-t .m-gider { grid-area: gider; color: var(--metin-2); } /* POS · günlere göre: gün ve kartla alınan · kesinti ve hesaba geçen · gün sonu durumu */ .pos-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "gun kart" "kesinti net" "durum durum"; row-gap: 6px; } .pos-t .m-gun { grid-area: gun; font-size: 15px; } .pos-t .m-kart { grid-area: kart; text-align: right; font-size: 16px; } .pos-t .m-kart .alt-satir { font-size: 12.5px; font-weight: 400; } .pos-t :is(.m-kesinti, .m-net) { font-size: 13.5px; } .pos-t :is(.m-kesinti, .m-net)::before { content: attr(data-etiket) " "; color: var(--metin-3); } .pos-t .m-kesinti { grid-area: kesinti; text-align: left; } .pos-t .m-net { grid-area: net; text-align: right; } .pos-t .m-durum { grid-area: durum; text-align: left; } .pos-t .m-durum .btn { width: 100%; } /* POS · bir günün ödemeleri (pencerede): kimden ve tutar · saat ve belge no */ .pos-odeme-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cari tutar" "saat no"; row-gap: 4px; padding: 12px 4px; } .pos-odeme-t .m-cari { grid-area: cari; font-size: 15px; } .pos-odeme-t .m-cari .alt-satir { font-size: 13px; } .pos-odeme-t .m-tutar { grid-area: tutar; align-self: start; text-align: right; font-size: 16px; } .pos-odeme-t .m-saat { grid-area: saat; font-size: 13px; color: var(--metin-3); } .pos-odeme-t .m-no { grid-area: no; text-align: right; font-size: 12.5px; color: var(--metin-3); } /* Depo · kesim ve parçalama: telefonda da liste kendi içinde kayar (yaklaşık 5 kayıt görünür) */ .kart .tablo-kap.kesim-kaydir { overflow-x: hidden; overflow-y: auto; max-height: min(470px, 62vh); border-top: 1px solid var(--cizgi); } .kart .tablo-kap.liste-kaydir { overflow-x: hidden; overflow-y: auto; } /* Raporlar · aylara göre kâr: telefonda maliyet ve kâr oranı gizlenir; toplam satırı da aynı düzende */ .rk-ay-t td:is(.m-maliyet, .m-oran) { display: none; } .rk-ay-t > tfoot > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ay ay net" "satis brut gider"; row-gap: 6px; } .rk-ay-t > tfoot .m-ay { font-size: 15px; } /* Raporlar · en çok kazandıran ürünler: ürün ve kâr · (miktar, satış) ve kâr oranı */ .rk-karli-t > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "urun kar" "urun oran"; row-gap: 2px; } .rk-karli-t .m-urun { grid-area: urun; font-size: 15px; } .rk-karli-t .m-urun a { color: var(--metin); } .rk-karli-t .m-urun .alt-satir { margin-top: 2px; font-size: 13px; } .rk-karli-t .m-kar { grid-area: kar; text-align: right; font-size: 15.5px; } .rk-karli-t .m-oran { grid-area: oran; text-align: right; font-size: 13px; color: var(--metin-2); } } @media (max-width: 700px) { html { -webkit-tap-highlight-color: transparent; } /* ---- yazılar ve dokunma alanları */ body { font-size: 15.5px; } h1 { font-size: 23px; } small, .bakiye small, .cari-bilgi > div small { font-size: 13px; } code, .mono { font-size: 13px; } :is(input, select, textarea).mono { font-size: 16px; } p code { overflow-wrap: anywhere; } /* Bilgi kutusundaki belge bağlantısı: dolgu dokunma alanını büyütür, satır aralığını değiştirmez */ .uyari-kutu a { padding: 13px 0; } .ust-etiket, .menu-baslik, .toplam-kutu > span, .kutu-adet, .deneme-rozet { font-size: 12.5px; } .ay-dugme em { font-size: 12.5px; } .grafik-eksen, .grafik-x { font-size: 12.5px; } .btn { height: 46px; padding: 0 16px; font-size: 15px; } .btn-kucuk { height: 42px; padding: 0 14px; font-size: 14.5px; } .btn svg { width: 18px; height: 18px; } .ikon-btn { flex: none; width: 44px; height: 44px; } .ikon-btn svg { width: 20px; height: 20px; } .link-btn { min-height: 40px; display: inline-flex; align-items: center; font-size: 14.5px; } /* Alan başlığının yanındaki bağlantı (ör. "+ Yeni cari"): dokunma alanı büyük, satır yüksekliği aynı */ .alan-ust .link-btn { margin: -10px 0; } .tel-baglanti { min-height: 40px; } /* Satır içindeki ad bağlantısı: dolgu dokunma alanını büyütür, satır aralığını değiştirmez */ .cari-ad-link { padding: 10px 0; } .segment span { padding-top: 10px; padding-bottom: 10px; line-height: 22px; font-size: 15px; } /* Tam genişlik seçenekler: uzun yazı ("Alacağımız var") kesilmez, gerekirse iki satıra iner */ .segment.blok label { display: flex; } .segment.blok span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px; line-height: 1.25; white-space: normal; text-overflow: clip; } .panel-detay > summary { min-height: 44px; } input[type="checkbox"], input[type="radio"] { flex: none; } .alan-buyuk input { height: 50px; font-size: 17px; } .rozet { height: 26px; font-size: 13px; } .alan { font-size: 14.5px; } .alan .ipucu, .alan-not { font-size: 13px; } /* Onay kutusu solda, yazı (ve açıklaması) yanında tek parça akar ve gerekirse alt satıra iner */ .onay { display: block; position: relative; min-height: 44px; padding: 11px 0 11px 32px; font-size: 15.5px; line-height: 1.45; } .onay > input { position: absolute; left: 0; top: 12px; margin: 0; } .uyari-kutu { font-size: 14.5px; } .bilgi-liste { font-size: 15px; gap: 12px 16px; } .cip { height: 36px; padding-left: 13px; font-size: 14px; } .cip button { width: 32px; height: 32px; } .cip svg { width: 14px; height: 14px; } .kod-hap { font-size: 12.5px; } /* ---- üst çubuk ve yan menü */ .ust { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; gap: 4px; } .ust-sag { gap: 0; } /* Çok dar ekranda (ör. telefonda büyük yazı / ekran yakınlaştırma açık) üst çubuk sığsın: kullanıcının baş harfleri gizlenir (sayfa yana taşmasın) */ @media (max-width: 359px) { .ust { padding-inline: 2px; } .kullanici-kutu { display: none; } .ust-tarih { padding: 5px 7px; } } .yan { width: min(300px, 86vw); padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .menu a { height: 48px; font-size: 16px; } .menu a svg { width: 20px; height: 20px; } .icerik { padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); } body.form-sayfa .icerik { padding-bottom: 24px; } #bildirimler { left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top)); max-width: none; } .bildirim { padding: 14px 16px; font-size: 15px; } /* ---- sayfa başlığı ve düğmeleri: düğmeler satırı eşit paylaşır */ .sayfa-ust { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; } .sayfa-ust p { font-size: 14px; } .eylemler { width: 100%; } .eylemler > .btn, .eylemler > .acilir { flex: 1 1 auto; } .eylemler > .acilir > summary.btn { width: 100%; } .geri { min-height: 40px; margin-bottom: 2px; font-size: 15px; } /* ---- özet kutucukları: ikişer yan yana, tek kalan tam genişlik */ .izgara-3:has(> .ist) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara-3:has(> .ist) > .ist:nth-child(3):last-child { grid-column: 1 / -1; } .ist { padding: 14px; } .ist-etiket { font-size: 13.5px; } .ist-deger { font-size: clamp(18px, 5.6vw, 23px); white-space: nowrap; overflow-wrap: normal; } .ist-alt { font-size: 13px; } .kart-ust { padding: 14px 16px; } .kart-govde { padding: 16px; } .kart-alt { padding: 12px 16px; font-size: 13px !important; } .yigin > * + * { margin-top: 16px; } /* ---- sekmeler: yana kaydırmak gerekmesin diye hepsi görünür, satırlara yayılan düğmeler; filtre satırları */ .sekmeler { flex-wrap: wrap; gap: 8px; margin: 0 0 18px; border-bottom: 0; overflow: visible; } .sekmeler button { flex: 1 1 auto; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--cizgi-guclu); border-radius: 99px; background: var(--yuzey); color: var(--metin-2); font-size: 15px; } .sekmeler button.aktif { border-color: var(--vurgu); background: var(--vurgu-zemin); color: var(--vurgu-yazi); } .filtre { padding: 12px 14px; } .filtre input[type="search"], .filtre > span { flex: 1 1 100%; width: 100%; } /* Seçim kutuları yazıları sığıyorsa yan yana, sığmıyorsa alt alta (yazı kesilmez) */ .filtre > select { flex: 1 1 auto; min-width: 0; max-width: 100%; } .aralik { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; } .aralik select { grid-column: 1 / -1; width: 100%; } .aralik input[type="date"] { width: 100%; } .liste-ust { min-height: 0; padding: 10px 14px; } .liste-ozet { font-size: 14px; } .fm-oge { min-height: 50px; font-size: 15.5px; } .filtre-sayi { min-width: 21px; height: 21px; font-size: 12.5px; } .filtre-menu { top: calc(64px + env(safe-area-inset-top)); } .fm-ust .link-btn { font-size: 13px; } .panel-satir-ekle, #satirEkle { width: 100%; height: 46px; justify-self: stretch; } /* Peşin: onay kutusu, altında tutar ve yöntem yan yana */ .pesin-satir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .pesin-alan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } .pesin-alan input, .pesin-alan select { width: 100%; } .toplam-kutu { padding: 14px 16px; } .toplam-kutu strong { font-size: 23px; } .panel-bakiye { font-size: 14px; } .cari-bilgi { gap: 12px 20px; } .toplamlar { width: 100%; grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; gap: 8px 0; font-size: 15px; } .toplamlar dd { padding-left: 16px; } .toplamlar .genel { font-size: 18px; } /* Kayıt sayfalarında Vazgeç / Kaydet ekranın altında hep görünür; eksik bilgi uyarısı da hemen üstünde görünür kalır */ .yapiskan-alt, body.form-sayfa .sayfa > form > .form-alt { position: sticky; bottom: 0; z-index: 10; margin: 0 -14px -24px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--zemin) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--cizgi); } body.form-sayfa .sayfa > form > .form-hata, .modal .modal-govde .form-hata { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 9; border: 1px solid color-mix(in srgb, var(--kotu) 30%, transparent); box-shadow: var(--golge-orta); } /* Pencerede uyarı, kayan bölümün altına (düğmelerin hemen üstüne) sabitlenir */ .modal .modal-govde .form-hata { bottom: 0; } .form-alt > .btn { flex: 1 1 0; height: 50px; font-size: 16px; } /* ---- pencereler: kayıt pencereleri tam ekran, kısa sorular alttan açılan kart. Pencere ya da yan menü açıkken arkadaki sayfa parmakla kaydırılmaz. */ html:has(.modal-arka), html:has(.yan.acik) { overflow: hidden; } .modal-arka { align-items: flex-end; padding: 0; overflow: hidden; } .modal { display: flex; flex-direction: column; max-width: none; max-height: 94vh; max-height: 94dvh; border: 0; border-radius: 20px 20px 0 0; } .modal > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .modal .modal-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 20px; } .modal-ust { padding: 12px 8px 12px 18px; } .modal-ust h2 { font-size: 18px; } .modal-ust p { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .modal-alt { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; } .modal-alt > .btn { flex: 1 1 0; height: 50px; font-size: 16px; } .modal-arka.orta-panel-arka, .modal-arka:has(> .modal.genis) { align-items: stretch; padding: 0; } .modal.orta-panel, .modal.genis { height: 100vh; height: 100dvh; max-height: none !important; border-radius: 0; } .modal.orta-panel .modal-ust, .modal.genis .modal-ust { padding: calc(10px + env(safe-area-inset-top)) 8px 10px 14px; } .modal.orta-panel .modal-govde { padding: 16px 14px 22px; } .modal.orta-panel .modal-alt { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .modal-ikon { width: 38px; height: 38px; } /* Klavye açıkken (ekranın yarısı) pencere başlığı tek satıra iner, yazı alanına daha çok yer kalır */ @media (max-height: 520px) { .modal-ust p { -webkit-line-clamp: 1; } .modal.orta-panel .modal-ust, .modal.genis .modal-ust { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; } } /* ---- cari kartı */ .cari-ust { margin-bottom: 14px; } .cari-baslik { padding-left: 14px; font-size: 22px; } .cari-ust .geri { margin-top: 8px; } .cari-ust-2 { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; } .cari-ust-2 .eylemler > * { flex: 1 1 0; } .bakiye-kart { min-width: 0; padding: 14px 16px; } /* Etiket ve tutar yan yana sığmazsa (dar ekran, büyük tutar) tutar alt satırda sağa yaslanır */ .bakiye-kart-satir { flex-wrap: wrap; gap: 6px 12px; } .bakiye-kart strong { margin-left: auto; font-size: 27px; white-space: nowrap; } .cari-izgara { gap: 16px; } .islem-kart { padding: 12px; } .islem-ac { height: 50px; font-size: 15.5px; } .islem-liste { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .islem-oge { height: 54px; gap: 9px; padding: 0 12px; font-size: 15px; } .islem-oge:last-child:nth-child(odd) { grid-column: 1 / -1; } .kucuk-tablo th, .kucuk-tablo td { padding: 11px 14px; font-size: 14.5px; } /* ---- diğer */ .buyuk-tutar { font-size: 28px; } .liste-sade li { flex-wrap: wrap; padding: 12px 16px; font-size: 15px; } .grafik { padding: 16px 12px 12px; } .ozet-liste { padding: 16px; font-size: 15px; } .ay-secici { width: 100%; height: 46px; } .ay-ok { flex: none; width: 46px; } .ay-kap { flex: 1 1 auto; min-width: 0; } .ay-dugme { justify-content: center; width: 100%; min-width: 0; font-size: 15px; } /* Çok dar ekranda (ör. telefonda büyük yazı / ekran yakınlaştırma açık) ay düğmesindeki simgeler gizlenir, oklar küçülmez */ @media (max-width: 359px) { .ay-dugme { gap: 6px; padding: 0 8px; } .ay-dugme > svg { display: none; } } .ay-hucre { height: 48px; font-size: 15px; } .ay-yil-ok { width: 42px; height: 42px; } .giris-kart { padding: 24px 20px; border-radius: 18px; } } /* ------------------------------------------------------------------ yazdırma */ .yazdir-baslik { display: none; } @media print { @page { margin: 14mm; } body { background: #fff; color: #000; font-size: 12px; } .yan, .ust, .perde, .eylemler, .filtre, .sayfalama, .yazdirma, .yapiskan-alt, #bildirimler, .sekmeler, .geri { display: none !important; } .kabuk { display: block; } .icerik { padding: 0; max-width: none; } .kart, .ist { border-color: #bbb; box-shadow: none; break-inside: avoid; } .tablo th { color: #000; background: none; border-bottom: 1px solid #000; } .tablo tfoot td { background: none; } .tablo td, .tablo th { padding: 5px 8px; } .tablo-kap { overflow: visible; } .yazdir-baslik { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; } .yazdir-baslik strong { font-size: 16px; } .bakiye.borclu, .bakiye.alacakli, .renk-iyi, .renk-kotu { color: #000; } a { color: #000; } .cari-izgara { display: block; } .filtre-kap, .ozet-kutular, .cipler { display: none !important; } .hareket-kap { max-height: none !important; overflow: visible; margin: 0; border: 0; } .hareket-tablo thead th, .hareket-tablo tfoot td { position: static !important; box-shadow: none !important; } .hareket-tablo th { background: none; } .cari-baslik::before { display: none; } .rozet.tip, .rozet.islem-rozet { background: none; padding: 0; color: #000; } } /* ------------------------------------------------------------------ yazdırılan belgeler: cari hesap ekstresi, satış / alış fişi, raporlar */ /* Ekranda görünmez; yazdırınca sayfanın yerine yalnızca bu belge basılır. Kenar yazıları (--yb-*: ui.js yazdirmaKenarlari) tanımlı olduğu için tarayıcı kendi üst / alt bilgisini (tarih, sayfa adresi) basmaz. */ .ekstre-belge, .fis-belge, .rapor-belge { display: none; } @page belge { size: A4 portrait; margin: 13mm 12mm 15mm; @top-left { content: var(--yb-ust-sol, ""); font: 7.5pt "Segoe UI", Arial, sans-serif; color: #6b7280; } @top-right { content: var(--yb-ust-sag, ""); font: 7.5pt "Segoe UI", Arial, sans-serif; color: #6b7280; } @bottom-left { content: var(--yb-alt-sol, ""); font: 7.5pt "Segoe UI", Arial, sans-serif; color: #6b7280; } @bottom-right { content: "Sayfa " counter(page) " / " counter(pages); font: 7.5pt "Segoe UI", Arial, sans-serif; color: #6b7280; } } @media print { /* Koyu temada da kâğıt beyaz basılır (sayfa kenarları dahil) */ :root { color-scheme: light !important; } html { background: #fff; } .cari-ekran, .belge-ekran, .rapor-ekran { display: none !important; } .ekstre-belge, .fis-belge, .rapor-belge { display: block; page: belge; position: relative; color: #111827; font-size: 9pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } :is(.ekstre-belge, .fis-belge, .rapor-belge) dl { margin: 0; } :is(.ekstre-belge, .fis-belge, .rapor-belge) dd { margin: 0; } :is(.ekstre-belge, .fis-belge, .rapor-belge) .sag { text-align: right; } :is(.ekstre-belge, .fis-belge, .rapor-belge) small { font-size: 7.5pt; font-weight: 500; color: #6b7280; } .eb-tablo th { white-space: nowrap; } .eb-tablo .eb-sira { width: 26px; color: #6b7280; } .eb-tablo th.eb-sira { color: #fff; } .eb-tablo tbody tr { break-inside: avoid; } .eb-soluk { color: #6b7280; } .eb-kalin { font-weight: 650; } .eb-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 10px; border-bottom: 2.5px solid #1e3a5f; } .eb-isletme { font-size: 8.5pt; color: #374151; line-height: 1.5; } .eb-isletme strong { display: block; margin-bottom: 2px; font-size: 15pt; font-weight: 700; letter-spacing: -0.01em; color: #111827; } .eb-logo { display: block; width: 62px; height: 62px; margin: 4px 0 2px; } .eb-logo svg { display: block; width: 100%; height: 100%; } .eb-baslik { text-align: right; } .eb-baslik h1 { margin: 0 0 6px; font-size: 15pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #1e3a5f; } .eb-baslik dl { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 1px 10px; font-size: 8.5pt; } .eb-baslik dt { color: #6b7280; } .eb-baslik dd { font-weight: 600; } .eb-bilgi { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 12px; } .eb-kutu { padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; break-inside: avoid; } .eb-etiket { margin-bottom: 3px; font-size: 7pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; } .eb-cari-ad { margin-bottom: 4px; font-size: 11.5pt; font-weight: 700; } .eb-kutu dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 12px; font-size: 8.5pt; } .eb-kutu dt { color: #6b7280; } .eb-kutu dl.eb-tutarlar { grid-template-columns: minmax(0, 1fr) auto; } .eb-tutarlar dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .eb-bakiye { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 7px; padding: 6px 10px; border-radius: 5px; background: #f3f4f6; } .eb-bakiye span { font-size: 8.5pt; font-weight: 700; } .eb-bakiye span small { display: block; font-weight: 500; } .eb-bakiye strong { font-size: 13pt; font-weight: 700; font-variant-numeric: tabular-nums; } .eb-bakiye.borclu { background: #ecfdf3; } .eb-bakiye.borclu strong { color: #166534; } .eb-bakiye.alacakli { background: #fef2f2; } .eb-bakiye.alacakli strong { color: #991b1b; } .eb-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; } .eb-ozet div { padding: 6px 10px; border: 1px solid #e5e7eb; border-left: 3px solid #1e3a5f; border-radius: 4px; break-inside: avoid; } .eb-ozet span { display: block; font-size: 7.5pt; font-weight: 600; color: #6b7280; } .eb-ozet strong { display: block; font-size: 10.5pt; font-variant-numeric: tabular-nums; } .eb-bolum { margin: 16px 0 6px; font-size: 10.5pt; font-weight: 700; color: #1e3a5f; } .eb-tablo { width: 100%; border-collapse: collapse; font-size: 8.5pt; } .eb-tablo th { padding: 6px 7px; text-align: left; font-size: 7.5pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: #1e3a5f; } .eb-tablo th.sag { text-align: right; } .eb-tablo td { padding: 5px 7px; vertical-align: top; border-bottom: 1px solid #e5e7eb; font-variant-numeric: tabular-nums; } .eb-tablo .eb-tarih { width: 62px; } .eb-tablo .eb-islem { width: 112px; } .eb-tablo .eb-tutar { width: 80px; } .eb-tablo .eb-bakiye-s { width: 96px; } .eb-tablo td.sag { white-space: nowrap; } .eb-grup { break-inside: avoid; } .eb-grup tr:first-child td strong { font-weight: 650; } .eb-no { display: block; font: 7.5pt ui-monospace, Consolas, monospace; color: #6b7280; } .eb-grup:has(.eb-alt) > tr:first-child td { border-bottom: 0; } .eb-alt td { padding-top: 0; } .eb-devir td { background: #f9fafb; font-style: italic; color: #374151; } .eb-toplam td { padding-top: 7px; padding-bottom: 7px; font-weight: 700; background: #f3f4f6; border-top: 1.5px solid #1e3a5f; border-bottom: 0; } .eb-kalemler { width: 100%; border-collapse: collapse; font-size: 8pt; background: #f9fafb; border: 1px solid #eef0f3; border-radius: 4px; } .eb-kalemler th { padding: 3px 7px; font-size: 7pt; font-weight: 600; letter-spacing: 0.03em; color: #6b7280; background: none; text-transform: none; text-align: left; border-bottom: 1px solid #e5e7eb; } .eb-kalemler th.sag { text-align: right; } .eb-kalemler td { padding: 2.5px 7px; border: 0; } .eb-kalemler td.sag { white-space: nowrap; } .eb-not { margin-top: 6px; font-size: 7.5pt; color: #6b7280; } .eb-mutabakat { margin-top: 18px; padding-top: 10px; border-top: 1px solid #d1d5db; font-size: 8.5pt; break-inside: avoid; } .eb-imzalar { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; text-align: center; break-inside: avoid; } .eb-imzalar div { padding-top: 6px; border-top: 1px solid #111827; } .eb-imzalar strong { display: block; font-size: 9pt; } .eb-imzalar span { font-size: 7.5pt; color: #6b7280; } /* Satış / alış fişi (üst bilgi, kutular, tablo ve imza ekstreyle ortak: eb-*) */ .fb-iptal { position: absolute; top: 300px; left: 50%; transform: translateX(-50%) rotate(-22deg); padding: 0 34px; font-size: 88pt; font-weight: 800; letter-spacing: 0.12em; color: rgba(185, 28, 28, 0.14); border: 7px solid rgba(185, 28, 28, 0.14); border-radius: 18px; pointer-events: none; } .fb-iptal-not { margin-top: 10px; padding: 7px 10px; border: 1px solid #fca5a5; border-radius: 5px; background: #fef2f2; color: #991b1b; font-size: 8.5pt; } .fb-durum { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: 8pt; font-weight: 700; } .fb-durum.odendi { background: #dcfce7; color: #166534; } .fb-durum.kismen { background: #fef3c7; color: #92400e; } .fb-durum.odenmedi { background: #fee2e2; color: #991b1b; } .fb-durum.iptal { background: #e5e7eb; color: #374151; } .fb-urunler .fb-sira { width: 24px; } .fb-urunler .fb-adet { width: 70px; } .fb-urunler .fb-miktar { width: 95px; } .fb-urunler .fb-fiyat { width: 125px; } .fb-urunler .fb-kdv { width: 80px; } .fb-urunler .fb-tutar { width: 110px; } .fb-urunler td:first-child { color: #6b7280; } .fb-urunler td strong { font-weight: 650; } .fb-alt-satir { display: block; font-size: 7.5pt; color: #6b7280; } .fb-alt { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; margin-top: 12px; break-inside: avoid; } .fb-yaziyla { margin-bottom: 10px; padding: 7px 10px; border: 1px dashed #cbd5e1; border-radius: 5px; background: #f8fafc; font-size: 8.5pt; } .fb-yaziyla span { margin-right: 6px; font-size: 7pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; } .fb-toplamlar { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; } .fb-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 9pt; color: #374151; } .fb-satir strong { font-weight: 650; font-variant-numeric: tabular-nums; color: #111827; } .fb-satir.fb-genel { margin: 3px 0; padding: 8px 0; border-top: 1.5px solid #1e3a5f; border-bottom: 1.5px solid #1e3a5f; font-size: 12.5pt; font-weight: 800; color: #1e3a5f; } .fb-satir.fb-genel strong { font-weight: 800; color: #1e3a5f; } .fb-satir.fb-kalan, .fb-satir.fb-kalan strong { font-weight: 800; } .fb-satir.fb-kalan.var, .fb-satir.fb-kalan.var strong { color: #991b1b; } .fb-aciklama { margin-top: 12px; font-size: 8.5pt; }