/* ===================================================================== Bayi paneli arayuzu Tasarim dili Lovable ciktisindan alindi: - sol sabit menu + ince ust bar - indigo (#4f46e5) tek vurgu rengi - genis yuvarlatilmis kartlar, cok yumusak golgeler - kucuk, kalin, harf arasi acilmis versal mikro etiketler - anlam renkleri: yesil stokta / kehribar kritik / kirmizi tukendi Tailwind kullanilmiyor; paylasimli hosting'de derleme adimi istemedigimiz icin ayni dil elle yazildi. ===================================================================== */ :root { --bg: #f8f9fc; --card: #ffffff; --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --ink-4: #94a3b8; --line: #e2e8f0; --line-soft: #f1f5f9; --primary: #4f46e5; /* zemin rolu (buton, rozet dolgusu) */ --primary-ink: #4f46e5; /* metin rolu (baglanti, vurgu yazisi) */ --primary-dark: #4338ca; --primary-soft: #eef2ff; --primary-line: #e0e7ff; --ok: #047857; --ok-soft: #ecfdf5; --ok-line: #a7f3d0; --warn: #b45309; --warn-soft: #fffbeb; --warn-line: #fde68a; --bad: #be123c; --bad-soft: #fff1f2; --bad-line: #fecdd3; --row-warn: #fffbeb; /* tablo satir tonu (rozetten ayri) */ --row-bad: #fff1f2; --r-card: 24px; --r: 14px; --r-sm: 10px; --sh: 0 4px 20px rgba(15, 23, 42, .04); --sh-lift: 0 12px 28px rgba(15, 23, 42, .07); --sh-primary: 0 8px 18px rgba(79, 70, 229, .25); --sidebar-w: 268px; --topbar-h: 68px; --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* --------------------------------------------------------------------- KARANLIK MOD Uc durum var: 1. Kullanici acikca sectiyse -> 2. Secmediyse -> isletim sisteminin tercihi 3. Hicbiri -> acik tema (yukaridaki :root) Renkler DAIMA degiskenler uzerinden kullanilir; bilesenlerin icine dogrudan renk yazilmaz. Aksi halde bir tema digerinin zemininde okunmaz hale gelir. --------------------------------------------------------------------- */ /* * Koyu palet — göz yormayacak biçimde ayarlandı. * * Ilk denemede zemin neredeyse siyah (#0f1419), yazi neredeyse saf beyazdi. * Bu ikili "halelenme" (halation) yapar: harflerin kenarlari parlayip * titriyormus gibi gorunur ve uzun bakista yorar. Duzeltmesi: * * - Zemin siyahtan uzaklastirildi (#1b2028), kart bir tik acildi (#232933) * -> yuzey ayrimi da netlesti, kartlar zeminden ayirt ediliyor. * - Yazi saf beyaz degil kirik beyaz (#d3dae3) -> kontrast hala 11:1, * yani fazlasiyla okunur ama parlamiyor. * - Anlam renklerinin doygunlugu dusuruldu; koyu zeminde cig durmasinlar. * * NOT: Asagidaki iki blok ayni degerleri tasir (biri sistem tercihi, digeri * kullanicinin acik secimi icin). Duz CSS'te paylasilamiyor; birini * degistirirken digerini de degistirin. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --bg: #2b313a; --card: #39414f; --ink: #e4ebf2; --ink-2: #b8c4d2; --ink-3: #abb9c7; --ink-4: #a4b2c1; --line: #4d5769; --line-soft: #434b5a; --primary: #5751e2; /* buton zemini: beyaz yazi 5.71:1 */ --primary-ink: #b4b0ff; /* metin: kart uzerinde 5.19:1 */ --primary-dark: #4a44d6; --primary-soft: #413f70; --primary-line: #565396; --ok: #6fd89b; --ok-soft: #2c5040; --ok-line: #46866a; --warn: #e9b954; --warn-soft: #4d4023; --warn-line: #806a34; --bad: #f79aa4; --bad-soft: #5e3a46; --bad-line: #8a5763; /* Tablo satir tonlari: rozet tonlarindan AYRI ve cok daha hafif. Doygun rengi tum satira doldurmak koyu temada leke gibi duruyordu; anlami sol kenardaki renkli cizgi tasiyor (bkz. .row-issue). */ --row-warn: #484132; --row-bad: #4e3c42; --sh: 0 2px 8px rgba(0, 0, 0, .18); --sh-lift: 0 10px 24px rgba(0, 0, 0, .3); --sh-primary: 0 6px 14px rgba(87, 81, 226, .3); } } :root[data-tema="koyu"] { --bg: #2b313a; --card: #39414f; --ink: #e4ebf2; --ink-2: #b8c4d2; --ink-3: #abb9c7; --ink-4: #a4b2c1; --line: #4d5769; --line-soft: #434b5a; --primary: #5751e2; /* buton zemini: beyaz yazi 5.71:1 */ --primary-ink: #b4b0ff; /* metin: kart uzerinde 5.19:1 */ --primary-dark: #4a44d6; --primary-soft: #413f70; --primary-line: #565396; --ok: #6fd89b; --ok-soft: #2c5040; --ok-line: #46866a; --warn: #e9b954; --warn-soft: #4d4023; --warn-line: #806a34; --bad: #f79aa4; --bad-soft: #5e3a46; --bad-line: #8a5763; /* Tablo satir tonlari: rozet tonlarindan AYRI ve cok daha hafif. Doygun rengi tum satira doldurmak koyu temada leke gibi duruyordu; anlami sol kenardaki renkli cizgi tasiyor (bkz. .row-issue). */ --row-warn: #484132; --row-bad: #4e3c42; --sh: 0 2px 8px rgba(0, 0, 0, .18); --sh-lift: 0 10px 24px rgba(0, 0, 0, .3); --sh-primary: 0 6px 14px rgba(87, 81, 226, .3); } /* Koyu temada beyaz zeminli yerler (ust bar, yapiskan cubuk) saydam beyaz yerine kart rengini kullanmali. Ayrica golgeler koyu zeminde neredeyse gorunmez; kartlarin zeminden ayrilmasini kenarlik ustlensin. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .topbar, :root:not([data-tema="acik"]) .sticky-actions { background: var(--card); backdrop-filter: none; } :root:not([data-tema="acik"]) .card, :root:not([data-tema="acik"]) .stat, :root:not([data-tema="acik"]) .auth-box { border-color: var(--line); } } :root[data-tema="koyu"] .topbar, :root[data-tema="koyu"] .sticky-actions { background: var(--card); backdrop-filter: none; } :root[data-tema="koyu"] .card, :root[data-tema="koyu"] .stat, :root[data-tema="koyu"] .auth-box { border-color: var(--line); } * { box-sizing: border-box; } /* * "hidden" ozniteligi HER ZAMAN gizlemeli. * * Tarayici [hidden] icin display:none uygular ama bu KENDI stil * dosyasindan gelir; bizim yazdigimiz ".sticky-actions { display: flex }" * gibi bir kural onu ezer ve oge gizlenmez. Toplu islem cubugu hicbir * siparis secilmemisken "0 siparis secildi" diye gorunuyordu. * * !important burada dogru kullanim: "gizle" niyeti tartisilmaz. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* * Yatay tasma emniyeti. * * Tek bir genis oge (uzun kargo kodu, tasan tablo) sayfanin tamamini * yana kaydirilabilir yapiyor; telefonda parmagi kaydiran kullanici * icerigin bir kismini bulamiyordu. Genis icerik KENDI kabinda * kaysin diye (bkz. .card ve .table-wrap overflow-x) burada kapatiyoruz. */ overflow-x: hidden; } /* * Uzun ve bosluksuz metinler (kargo kodu, barkod, e-posta) dar ekranda * kabini tasirmasin. */ .table td, .kv dd, .koli-kod, .mono, .eslesme-barkod { overflow-wrap: anywhere; } a { color: var(--primary-ink); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; letter-spacing: -.02em; } h1 { font-size: 24px; font-weight: 800; } h2 { font-size: 15px; font-weight: 800; } h3 { font-size: 15px; font-weight: 700; } hr { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; } :focus-visible { outline: 3px solid rgba(79, 70, 229, .28); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .ico { flex: none; vertical-align: middle; } /* Klavye kullanicisi icin: Tab'a ilk basista icerige atlama baglantisi */ .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: var(--r-sm); font-weight: 700; } .skip:focus { left: 8px; text-decoration: none; } /* ── yardimcilar ───────────────────────────────────────────────────── */ .muted { color: var(--ink-3); } .small { font-size: 12.5px; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .hidden { display: none; } .inline { display: inline; } .strike { text-decoration: line-through; } .req { color: var(--bad); } .mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .mono.big { font-size: 17px; font-weight: 700; } code { padding: 2px 6px; background: var(--line-soft); border-radius: 5px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); } /* ═══════════════════════════════════════════════════ KABUK ═══════ */ /* * 100dvh, 100vh DEGIL. * * Mobil tarayicilarda 100vh, adres cubugu GIZLIYKENKI yuksekliktir. * Cubuk gorunurken sayfanin alti ekranin disinda kalir: "Kaydet" * dugmesine ulasmak icin once sayfayi kaydirmak gerekir. dvh (dynamic * viewport height) o an gercekten gorunen alani verir. * * vh once yaziliyor: dvh desteklemeyen eski tarayici onu kullanir. */ .shell { display: flex; min-height: 100vh; min-height: 100dvh; } /* ── sol menu ──────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); flex: none; background: var(--card); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; } .logo { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: var(--r); box-shadow: var(--sh-primary); } .logo-text { font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } /* * Cekmece kapatma dugmesi. Genis ekranda menu zaten sabit oldugu icin * gizli; yalnizca 900px altinda gorunur (bkz. DAR EKRAN bolumu). * Scrim'e dokunmak da kapatiyor ama gorunur bir cikis her zaman gerekli: * dar ekranda scrim'in kalan seridi bazen 40px kadar oluyor. */ .menu-kapat { display: none; width: 38px; height: 38px; margin-left: auto; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; } .menu-kapat:hover { color: var(--ink); border-color: var(--ink-4); } .sidebar-nav { flex: 1; padding: 4px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-section { margin: 18px 0 6px; padding: 0 12px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); } .nav-section:first-child { margin-top: 4px; } .navlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 3px; border-radius: var(--r); color: var(--ink-3); font-size: 13.5px; font-weight: 600; transition: background .16s, color .16s; } .navlink:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; } .navlink-text { flex: 1; } .navlink-on { background: var(--primary); color: #fff; font-weight: 700; box-shadow: var(--sh-primary); } .navlink-on:hover { background: var(--primary-dark); color: #fff; } .navbadge { min-width: 20px; padding: 0 6px; background: var(--primary-soft); color: var(--primary-ink); border-radius: 8px; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; } .navlink-on .navbadge { background: rgba(255, 255, 255, .22); color: #fff; } .navbadge-warn { background: var(--warn-soft); color: var(--warn); } .navlink-on .navbadge-warn { background: rgba(255, 255, 255, .22); color: #fff; } .sidebar-foot { padding: 14px; } .who { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r); } .who-avatar { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-4); } .who-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-name small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); } .who-out { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-4); transition: color .16s, border-color .16s; } .who-out:hover { color: var(--bad); border-color: var(--bad-line); } /* ── ust bar ───────────────────────────────────────────────────────── */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 30; } .burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; } .topsearch { position: relative; flex: 1; max-width: 460px; } .topsearch .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; } /* Genel input kuralindan sonra geldigi icin daha ozgul olmali; aksi halde sol bosluk eziliyor ve buyutec metnin altinda kaliyor. */ .topsearch input[type=search] { width: 100%; height: 42px; margin: 0; padding: 0 14px 0 42px; background: var(--bg); border: 1px solid transparent; border-radius: var(--r); font: inherit; font-size: 13.5px; color: var(--ink); } .topsearch input[type=search]::placeholder { color: var(--ink-4); font-weight: 500; } .topsearch input[type=search]:focus { background: var(--card); border-color: var(--primary-line); } .topsearch-off { pointer-events: none; } .topmeta { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Tema anahtari: hangi temada hangi ikonun gorunecegi CSS ile secilir, boylece JS calismadan once de dogru ikon durur. */ .temabtn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); cursor: pointer; transition: color .16s, border-color .16s; } .temabtn:hover { color: var(--primary-ink); border-color: var(--primary-line); } .tema-gunes { display: none; } /* acik tema: ay goster */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .tema-ay { display: none; } :root:not([data-tema="acik"]) .tema-gunes { display: block; } } :root[data-tema="koyu"] .tema-ay { display: none; } :root[data-tema="koyu"] .tema-gunes { display: block; } :root[data-tema="acik"] .tema-ay { display: block; } :root[data-tema="acik"] .tema-gunes { display: none; } .datechip, .cartchip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .cartchip { color: var(--primary-ink); border-color: var(--primary-line); background: var(--primary-soft); } .cartchip:hover { text-decoration: none; background: var(--primary-line); } .content { flex: 1; padding: 26px 24px 60px; max-width: 1320px; width: 100%; } .scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 40; } /* ── giris / kayit ─────────────────────────────────────────────────── */ .auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Centikli telefonlarda alt cubugun altinda kalmasin */ padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); gap: 16px; } .auth-box { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); box-shadow: var(--sh); padding: 30px; } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } /* Bayi basvurusu gibi iki sutunlu uzun formlar icin */ .auth-box-wide { max-width: 620px; } .auth-foot { color: var(--ink-4); font-size: 12.5px; margin: 0; } /* giris sayfalari kendi kartini da sariyordu; ic ice kart olmasin */ .auth .card, .auth .card-narrow { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; } /* ═══════════════════════════════════════════════ BILESENLER ═════ */ /* ── sayfa basligi ─────────────────────────────────────────────────── */ .page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .page-head p { width: 100%; margin: 0; color: var(--ink-3); font-size: 13.5px; max-width: 84ch; } /* ── kart ──────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); box-shadow: var(--sh); padding: 22px; margin-bottom: 18px; /* Genis tablolar kartin icinde kaysin; sayfanin kendisi yana kaymasin. */ overflow-x: auto; } .card > h2 { margin-bottom: 16px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } .card-narrow { max-width: 460px; margin: 40px auto; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .cols { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; } /* min-width olmadan grid ogesi icerigi kadar genisler ve genis tablolar sayfayi yana kaydirir. */ .col-main, .col-side { min-width: 0; } /* ── form ──────────────────────────────────────────────────────────── */ .card label, .form label { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); } label small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; } input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=datetime-local], input[type=file], select, textarea { width: 100%; margin-top: 6px; padding: 10px 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 14px; color: var(--ink); transition: border-color .16s, box-shadow .16s; } input:hover, select:hover, textarea:hover { border-color: var(--ink-4); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); } input[type=file] { padding: 8px 10px; font-size: 13px; } textarea { resize: vertical; min-height: 72px; } /* Dokunmatik cihaz ayarlari DOSYANIN SONUNDA (bkz. oradaki aciklama). */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .check { display: flex !important; align-items: center; gap: 9px; font-weight: 600; } .check input { width: auto; margin: 0; } .qty { width: 76px; margin-top: 0; padding: 7px 9px; text-align: center; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; } .qty-sm { width: 62px; font-weight: 500; } .qty-price { width: 112px; text-align: right; } .bank { margin: 0 0 12px; padding: 13px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; color: var(--ink-2); } .form-inline-file { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 14px; } .form-inline-file input[type=file] { margin-top: 0; flex: 1; min-width: 170px; } /* ── buton ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .16s, border-color .16s, box-shadow .16s, color .16s; } .btn:hover { background: var(--bg); border-color: var(--ink-4); text-decoration: none; } .btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; } .btn-block { display: flex; width: 100%; } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--sh-primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } .btn-danger { background: var(--card); border-color: var(--bad-line); color: var(--bad); } .btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); } .btn-ghost:hover { background: var(--line-soft); color: var(--ink); border-color: transparent; } .row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .sticky-actions { position: sticky; bottom: 16px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-lift); margin-bottom: 18px; } /* ── uyari ─────────────────────────────────────────────────────────── */ .alert { padding: 13px 16px; margin-bottom: 16px; border: 1px solid; border-radius: var(--r); font-size: 13.5px; font-weight: 600; } .alert-success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .alert-error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); } .alert-info { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); } /* JavaScript'in ekledigi gecici mesaj: birkac saniye sonra solup gider */ .alert-gecici { animation: alertGir .18s ease-out; } .alert-solar { opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s; } @keyframes alertGir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── bos durum ─────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 40px 22px; } .empty p { margin: 0 0 6px; font-weight: 600; } .empty p.muted { font-weight: 400; } .empty .btn { margin-top: 14px; } .empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 50%; color: var(--ink-4); } /* ── panel ici bildirim seridi ─────────────────────────────────────── */ .notice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--primary-line); border-left: 4px solid var(--primary); border-radius: var(--r); box-shadow: var(--sh); } .notice-stok { border-color: var(--ok-line); border-left-color: var(--ok); } .notice-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-ink); border-radius: var(--r-sm); } .notice-stok .notice-ico { background: var(--ok-soft); color: var(--ok); } .notice-body { flex: 1; min-width: 0; } .notice-body strong { display: block; font-size: 14px; font-weight: 700; } .notice-body p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); } .notice-close { flex: none; } .notice-close .btn { font-size: 20px; line-height: 1; padding: 4px 10px; } /* ── tablo ─────────────────────────────────────────────────────────── */ .card > .table-wrap, .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table thead th { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); text-align: left; white-space: nowrap; } .table tbody td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); } .table tbody td strong { color: var(--ink); } .table tbody tr:last-child td { border-bottom: 0; } /* Satir vurgusu: uzun tablolarda goz satiri kaybetmesin. Renkli satirlar (gecikmis/uyarili) kendi rengini korur. */ .table tbody tr:not([class]):hover { background: var(--bg); } /* * NOT: Basliga "position: sticky" VERILMEZ. * Kartlarda genis tablolar icin overflow-x: auto var; bu, karti kaydirma * kabi yapar ve yapiskan baslik sayfaya degil kartin icine yapisir, * asagi kayip ilk satirin uzerine biner. Ikisi bir arada calismiyor, * yatay kaydirma daha degerli. */ .table tfoot th { padding: 14px 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 800; color: var(--ink); } .table-sm th, .table-sm td { padding: 8px 10px; font-size: 13px; } .table .right, .table .center { } .table td.right, .table th.right { text-align: right; font-variant-numeric: tabular-nums; } .table td.center, .table th.center { text-align: center; font-variant-numeric: tabular-nums; } /* * Uyarili / gecikmis satirlar. * * Once rozet tonu (--warn-soft) tum satira doldurulan yordu; koyu temada * bu kahverengi bir leke gibi duruyor ve gozu yoruyordu. Simdi zemin * karta cok yakin bir ton, anlami sol kenardaki renkli cizgi tasiyor. * Hem daha sakin hem daha net okunuyor. */ tr.row-issue { background: var(--row-warn); } tr.row-late { background: var(--row-bad); } tr.row-issue td:first-child { box-shadow: inset 3px 0 0 var(--warn); } tr.row-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .issue-text { margin-top: 3px; color: var(--bad); font-size: 11.5px; font-weight: 600; } .sub { display: block; margin-top: 2px; color: var(--ink-4); font-size: 11.5px; font-weight: 500; } /* ── rozet ─────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-info { background: var(--primary-soft); color: var(--primary-ink); } .badge-primary { background: var(--primary-soft); color: var(--primary-ink); } .badge-danger { background: var(--bad-soft); color: var(--bad); } .badge-muted { background: var(--line-soft); color: var(--ink-3); } .termin { font-family: var(--mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .termin-ok { color: var(--ok); } .termin-warn { color: var(--warn); } .termin-late { color: var(--bad); } .tag { display: inline-block; margin-right: 5px; padding: 3px 9px; background: var(--line-soft); border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .pill { display: inline-block; min-width: 20px; padding: 1px 7px; background: var(--primary); color: #fff; border-radius: 20px; font-size: 10.5px; font-weight: 800; text-align: center; } .pill-warn { background: var(--warn-soft); color: var(--warn); } /* ── filtre ────────────────────────────────────────────────────────── */ .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip { padding: 7px 15px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 20px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); transition: background .16s, color .16s, border-color .16s; } .chip:hover { background: var(--bg); color: var(--ink); text-decoration: none; } .chip-on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--sh-primary); } .chip-on:hover { background: var(--primary-dark); color: #fff; } .search { display: flex; gap: 7px; margin-left: auto; } .search input { margin-top: 0; width: 250px; } /* ── sayfalama ─────────────────────────────────────────────────────── */ .sayfalama { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 14px 4px 2px; border-top: 1px solid var(--line-soft); margin-top: 6px; } .sayfa, .sayfa-ok { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 700; color: var(--ink-3); transition: background .16s, color .16s, border-color .16s; } a.sayfa:hover, a.sayfa-ok:hover { background: var(--bg); color: var(--ink); text-decoration: none; } .sayfa-on { background: var(--primary); border-color: var(--primary); color: #fff; } .sayfa-ok { font-size: 17px; line-height: 1; } .sayfa-pasif { opacity: .35; cursor: default; } .sayfa-bosluk { padding: 0 3px; color: var(--ink-3); font-size: 13px; } /* Kayit sayisi saga yaslanir; dar ekranda alta duser. */ .sayfa-ozet { margin-left: auto; font-size: 12.5px; } @media (max-width: 560px) { .sayfa-ozet { margin-left: 0; width: 100%; padding-top: 6px; } } /* Yazdirmada sayfa baglantilari anlamsiz. */ @media print { .sayfalama { display: none; } } /* ── tarih araligi ─────────────────────────────────────────────────── */ .daterange { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .daterange input[type=date] { width: auto; margin-top: 0; padding: 6px 10px; font-size: 13px; } .daterange-etiket { margin: 0 2px 0 0; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } .daterange-ara { color: var(--ink-4); } .daterange-hizli { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } .daterange-hizli .chip { padding: 5px 12px; font-size: 12px; } @media (max-width: 760px) { .daterange-hizli { margin-left: 0; } .search { margin-left: 0; width: 100%; } .search input { width: 100%; } } /* ── istatistik ────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .stat { display: block; padding: 18px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); box-shadow: var(--sh); color: inherit; transition: box-shadow .18s, transform .18s; } .stat:hover { text-decoration: none; box-shadow: var(--sh-lift); transform: translateY(-2px); } .stat-no { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .stat-label { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); } .stat-warn .stat-no { color: var(--warn); } .stat-info .stat-no { color: var(--primary-ink); } /* ── urun ──────────────────────────────────────────────────────────── */ .product { } .product-head { display: flex; gap: 18px; margin-bottom: 18px; } .product-img { width: 116px; height: 116px; flex: none; object-fit: cover; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r); } .product-img-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .product-meta { flex: 1; min-width: 0; } .product-meta h2 { margin-bottom: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.025em; text-transform: none; color: var(--ink); } .product-meta p { margin: 6px 0; color: var(--ink-3); font-size: 13px; } .price { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .price .muted { font-size: 12px; font-weight: 600; } .thumb { display: block; width: 46px; height: 46px; object-fit: cover; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-sm); } .thumb-empty { border-style: dashed; border-color: var(--line); } .thumb-lg { width: 118px; height: 118px; margin-top: 8px; border-radius: var(--r); } /* Numara satirlarinin giris kutulari dikeyde ortalansin */ .table-stock td { vertical-align: middle; } /* ── toplu siparis girisi ──────────────────────────────────────────── */ .table-batch { min-width: 980px; } .table-batch td { padding: 8px 6px; vertical-align: top; } .table-batch th { padding: 9px 6px; } .table-batch input, .table-batch select { margin-top: 0; padding: 7px 9px; font-size: 13px; } .table-batch .qty { width: 100%; } .table-batch .rowno { padding-top: 15px; font-variant-numeric: tabular-nums; font-weight: 700; } .table-batch .row-del { font-size: 18px; line-height: 1; padding: 6px 9px; } .table-batch input[type=file] { padding: 5px 6px; font-size: 11.5px; } /* * input.mono-in: "input[type=text]" kuralinin (ayni ozgulluk, daha once) * yazi boyunu ezebilmek icin secici elementle guclendirildi. Eski * "!important" cozumu dokunmatik 16px kuralini da eziyor ve iOS'ta * otomatik yakinlastirmaya sebep oluyordu. */ input.mono-in, .mono-in { font-family: var(--mono); font-size: 12.5px; } .mt6 { margin-top: 6px; } /* ── numara izgarasi ───────────────────────────────────────────────── */ .size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .size-cell { padding: 11px 9px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-align: center; transition: border-color .18s, box-shadow .18s, transform .18s; } .size-cell:hover { border-color: var(--primary-line); box-shadow: 0 8px 18px rgba(79, 70, 229, .1); transform: translateY(-2px); } .size-cell-out { background: var(--bg); border-color: var(--line-soft); } .size-cell-out:hover { border-color: var(--bad-line); box-shadow: none; transform: none; } .size-no { font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .size-stock { margin: 2px 0 9px; font-size: 11px; font-weight: 700; color: var(--ink-3); } .size-stock strong { color: var(--ok); } .size-stock-out { color: var(--bad); text-transform: uppercase; letter-spacing: .08em; } .size-form { display: flex; gap: 5px; justify-content: center; } .size-form .qty { width: 44px; padding: 5px 3px; font-size: 12px; } .size-form .btn { flex: 1; padding: 5px 6px; font-size: 11px; } /* Sepette olan numara: bayi neyi ekledigini bir bakista gorsun */ .size-cell-in { border-color: var(--primary); background: var(--primary-soft); } .size-cell-in:hover { border-color: var(--primary); } .size-incart { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--primary-line); font-size: 11px; font-weight: 700; color: var(--primary-ink); } .size-incart[hidden] { display: none; } /* Takip edilen (stok gelince haber ver) numara */ .btn-watch { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .btn-watch:hover { background: var(--ok); border-color: var(--ok); color: var(--card); } /* Istek surerken buton bekleme durumu */ .btn-bekle { opacity: .55; cursor: progress; } .btn:disabled { opacity: .55; cursor: not-allowed; } .stock-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .stock-head h2 { font-size: 16px; text-transform: none; letter-spacing: -.02em; color: var(--ink); } /* ── panel grafigi ─────────────────────────────────────────────────── */ .grafik { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding-top: 18px; } .grafik-sutun { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .grafik-cubuk { position: relative; width: 100%; max-width: 42px; background: var(--primary-soft); border: 1px solid var(--primary-line); border-bottom: 0; border-radius: 5px 5px 0 0; transition: background .16s; } .grafik-sutun:hover .grafik-cubuk { background: var(--primary-line); } .grafik-bugun .grafik-cubuk { background: var(--primary); border-color: var(--primary); } .grafik-deger { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-2); } .grafik-bugun .grafik-deger { color: var(--primary-ink); } .grafik-gun { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); } .grafik-bugun .grafik-gun { color: var(--primary-ink); font-weight: 700; } /* Muhasebe: aylik ikili cubuk (satis + tahsilat) */ .grafik-ay { height: 168px; padding-top: 22px; } .grafik-ay .grafik-sutun { color: inherit; border-radius: var(--r); padding: 0 2px; } .grafik-ay .grafik-sutun:hover { text-decoration: none; background: var(--bg); } .grafik-cift { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; } .grafik-cift .grafik-cubuk { max-width: 22px; } .grafik-cubuk.grafik-tahsilat { background: var(--ok-soft); border-color: var(--ok); } .grafik-bugun .grafik-cubuk.grafik-tahsilat { background: var(--ok); } .grafik-ay .grafik-sutun:hover .grafik-satis { background: var(--primary-line); } .grafik-secili { background: var(--primary-soft) !important; } .grafik-secili .grafik-gun { color: var(--primary-ink); font-weight: 700; } .grafik-lejant { display: inline-flex; align-items: center; gap: 12px; } .lejant { display: inline-flex; align-items: center; gap: 5px; } .lejant::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--primary-line); background: var(--primary-soft); } .lejant-tahsilat::before { border-color: var(--ok); background: var(--ok-soft); } .trend { font-weight: 800; font-size: 12px; } .trend-arti { color: var(--ok); } .trend-eksi { color: var(--bad); } .card-head h3 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } /* ── stok hareketi ─────────────────────────────────────────────────── */ .delta { font-family: var(--mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .delta-arti { color: var(--ok); } .delta-eksi { color: var(--bad); } /* ── cari hesap ────────────────────────────────────────────────────── */ .cari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .cari-kalem { padding: 13px 14px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r); } .cari-sonuc { background: var(--card); border-color: var(--line); border-width: 2px; } .cari-etiket { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } .cari-tutar { display: block; margin: 4px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .cari-borc { color: var(--bad); } .cari-ok { color: var(--ok); } .cari-kalem .muted { font-size: 11.5px; } .cari-form { padding-bottom: 4px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; } @media (max-width: 900px) { .cari { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } } /* ── toplama listesi ───────────────────────────────────────────────── */ /* Yazdirilan listede elle isaretlemek icin kutucuk */ .kutucuk { display: inline-block; width: 17px; height: 17px; border: 1.5px solid var(--ink-4); border-radius: 3px; vertical-align: middle; } /* * Ekranda ISARETLENEBILEN kutucuk (toplama listesi). * Eski .kutucuk yalnizca kagit icindi; ekranda tiklanabilir gorunup * hicbir sey yapmiyordu. Durum localStorage'da tutulur (toplama.php). */ .kutucuk-sec { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; vertical-align: middle; } /* Raftan alinan satir soner ve ustu cizilir; goz kalanlara odaklanir */ tr.alindi td { opacity: .45; } tr.alindi td:first-child strong { text-decoration: line-through; } tr.alindi .kutucuk-sec { opacity: 1; } /* Hazirlanan koli yesil cizgiyle sakinlesir */ .koli.alindi { opacity: .55; border-left-color: var(--ok); } .koli.alindi .koli-kod { text-decoration: line-through; } .koli { padding: 13px 15px; margin-bottom: 10px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r); break-inside: avoid; } .koli-gec { border-left-color: var(--bad); background: var(--row-bad); } .koli-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 9px; } .koli-kod { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-right: 10px; } .koli-firma { font-weight: 700; } .koli-sag { display: flex; align-items: center; gap: 12px; } .koli-urun { list-style: none; margin: 0 0 10px; padding: 0; } .koli-urun li { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .koli-urun li:last-child { border-bottom: 0; } .koli-numara { display: inline-block; min-width: 30px; padding: 1px 8px; margin-left: 6px; background: var(--ink); color: var(--card); /* koyu temada --ink acilir, yazi da onunla ters doner */ border-radius: 5px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: center; } /* ── liste / zaman cizelgesi ───────────────────────────────────────── */ .kv { margin: 0; } .kv dt { margin-top: 13px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } .kv dd { margin: 3px 0 0; font-weight: 600; } .kv dd.big { font-size: 17px; } .list { margin: 0; padding-left: 18px; } .list li { margin-bottom: 7px; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .timeline li:last-child { border-bottom: 0; } /* ═══════════════════════════════════════════════ DAR EKRAN ══════ */ /* * KIRILMA NOKTALARI * * 1100px yan sutun (aside) ana sutunun altina iner * 900px sol menu cekmeceye doner, hamburger cikar * 720px TABLOLAR YIGILMIS KARTA DONER * 560px her sey tek sutun, sikistirilmis bosluklar * * 720px'in sebebi: sipariş listesinde 9 sutun var. Tablet dikeyde bile * yatay kaydirma gerektiriyor; kaydirilan tabloda kullanici hangi * sutuna baktigini kaybediyor (baslik satiri gorunmuyor). */ @media (max-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 50; width: min(var(--sidebar-w), 84vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sh-lift); /* Cekmece icerigi centigin altina girmesin */ padding-bottom: env(safe-area-inset-bottom); } .sidebar-open { transform: translateX(0); } .burger { display: flex; } .topsearch { max-width: none; } .content { padding: 20px 16px 50px; } .topbar { padding: 0 16px; } /* Cekmece acikken arka plan kaymasin (JS body'ye sinif ekler) */ body.menu-acik { overflow: hidden; } /* Cekmecede gorunur kapatma dugmesi */ .menu-kapat { display: flex; } .sidebar-brand { padding-right: 14px; } /* * Ust bardaki arama kutusu telefonda tema/sepet dugmelerini sikistiriyordu. * Kucuk ekranlarda arama kendi satirina iner, bar iki kademeli olur. */ .topbar { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; } .topsearch { order: 3; flex: 1 1 100%; } .topsearch-off { display: none; } .topmeta { margin-left: auto; } } /* ───────────────────────────────────────────────────────────────── YIGILMIS TABLO Tablo satiri, mobilde kendi basina bir karta donusur: ┌───────────────────────────┐ │ SIPARIS SP-260813-4A │ │ KARGO KODU 7280035663 │ │ TUTAR 1.250 TL│ │ DURUM [Onaylandi]│ │ [Detay]│ └───────────────────────────┘ Sutun basligi her hucrenin soluna "data-etiket" ozniteliginden yazilir. Oznitelik yoksa etiket bos kalir - salt eylem hucreleri (Detay/Sil dugmesi) icin istenen davranis budur. thead SILINMEZ, gorsel olarak gizlenir: ekran okuyucu tablo yapisini kaybetmesin. ───────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { /* .table-batch kendi mobil duzenine sahip (asagida) */ .table:not(.table-batch) { display: block; border-collapse: separate; } .table:not(.table-batch) thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .table:not(.table-batch) tbody, .table:not(.table-batch) tfoot, .table:not(.table-batch) tr, .table:not(.table-batch) td, .table:not(.table-batch) tfoot th { display: block; width: auto; } .table:not(.table-batch) tbody tr { padding: 12px 14px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } .table:not(.table-batch) tbody tr:last-child { margin-bottom: 0; } .table:not(.table-batch) tbody tr:hover { background: var(--card); } .table:not(.table-batch) tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); text-align: left; } .table:not(.table-batch) tbody td:first-child { padding-top: 0; } .table:not(.table-batch) tbody td:last-child { padding-bottom: 0; border-bottom: 0; } /* Bos hucre mobilde bos bir satir olarak gorunmesin */ .table:not(.table-batch) tbody td:empty { display: none; } .table:not(.table-batch) tbody td::before { content: attr(data-etiket); flex: none; max-width: 45%; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); line-height: 1.7; } /* Deger tarafi: saga yasli ve tasmasiz */ .table:not(.table-batch) tbody td > * { text-align: right; } .table:not(.table-batch) tbody td { min-width: 0; } /* * Etiketi olmayan hucre = eylem hucresi. Dugmeler saga toplansin, * yan yana sigmiyorsa alt satira gecsin. */ .table:not(.table-batch) tbody td:not([data-etiket]) { justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 11px; } .table:not(.table-batch) tbody td:not([data-etiket]) form { display: inline; } /* * Durum cizgisi: masaustunde ilk hucrenin soluna ic golge olarak * ciziliyor. Yigilmis duzende hucreler alt alta oldugu icin cizgi * kartin tamamina taşınır. */ .table:not(.table-batch) tbody tr.row-issue td:first-child, .table:not(.table-batch) tbody tr.row-late td:first-child { box-shadow: none; } .table:not(.table-batch) tbody tr.row-issue { border-left: 3px solid var(--warn); } .table:not(.table-batch) tbody tr.row-late { border-left: 3px solid var(--bad); } /* Toplam satiri: kartlarin altinda ozet seridi */ .table:not(.table-batch) tfoot tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); } .table:not(.table-batch) tfoot th { padding: 0; border: 0; font-size: 14px; } .table:not(.table-batch) tfoot th:empty { display: none; } .table:not(.table-batch) tfoot th:last-child { font-size: 17px; } /* Kart icindeki tablo kendi cercevesini tasidigi icin kart daralsin */ .card { padding: 14px; } .card > h2 { margin-bottom: 12px; } /* Yigilmis tabloda yatay kaydirmaya gerek kalmadi */ .table-wrap { overflow-x: visible; } /* Numara/adet kutulari hucrenin sagina otursun */ .table:not(.table-batch) tbody td .qty { width: 84px; } /* * STOK TABLOSU: yigin yerine kompakt izgara. * * 60 numara x 6 alan tam yiginla ~38.000px'lik bir sayfa uretiyordu. * Buradaki alanlar kisa (sayi + iki kucuk kutu); alt alta dizmek * yerine her numara 3 sutunlu mini bir kart olur, sayfa ucte bire iner. * * Ayni ozgullukteki genel yigin kurallarindan SONRA geldigi icin * onlari ezer (kaynak sirasi). */ .table.table-stock tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: start; } .table.table-stock tbody td { display: block; padding: 0; border-bottom: 0; } .table.table-stock tbody td::before { display: block; max-width: none; margin-bottom: 3px; /* "KRITIK SEVIYE" iki satira kirilinca izgara kayiyordu */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Numara sutunu kartin kimligi: iri ve hizali dursun */ .table.table-stock tbody td:first-child strong { font-size: 19px; line-height: 1.4; } .table.table-stock tbody td > *, .table.table-stock tbody td { text-align: left; } .table.table-stock tbody td .qty { width: 100%; } /* Bildirim sutunu tek basina genis; kendi satirini alsin */ .table.table-stock tbody td:last-child { grid-column: 1 / -1; } /* Bos ya da "-" iceren bildirim hucresi yer kaplamasin */ .table.table-stock tbody td:last-child:empty { display: none; } } /* ───────────────────────────────────────────────────────────────── TOPLU SIPARIS GIRISI - mobil Masaustunde 8 sutunlu bir tablo (min-width: 980px). Telefonda o tabloyu kaydirarak doldurmak imkansiza yakin: kullanici hangi satirda oldugunu kaybediyor. Her satir kendi kartina donusuyor, alanlar alt alta ve etiketli. ───────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .table-batch { min-width: 0; display: block; } .table-batch thead { display: none; } .table-batch tbody, .table-batch tr, .table-batch td { display: block; width: auto; } .table-batch tbody tr { position: relative; padding: 14px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--primary-line); border-radius: var(--r); } .table-batch td { padding: 0 0 11px; border: 0; } .table-batch td:last-child { padding-bottom: 0; } /* Alan etiketi ustte, giris altinda */ .table-batch td[data-etiket]::before { content: attr(data-etiket); display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); } .table-batch .qty { width: 100%; } .table-batch input, .table-batch select { font-size: 16px; padding: 10px 12px; } .table-batch input[type=file] { font-size: 13px; padding: 9px 10px; } /* Satir numarasi kartin sag ust kosesinde rozet olarak */ .table-batch .rowno { position: absolute; top: 10px; right: 12px; padding: 0; font-size: 11px; font-weight: 800; color: var(--ink-4); } .table-batch .rowno::before { content: "SATIR "; letter-spacing: .12em; } /* Satir temizleme dugmesi tam genislik, yanlislikla basilmasin diye altta */ .table-batch .row-del { width: 100%; min-height: 40px; font-size: 13px; border: 1px dashed var(--line); } .table-batch .row-del::after { content: " Satırı temizle"; font-size: 12px; } } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .product-head { flex-direction: column; } .datechip { display: none; } h1 { font-size: 20px; } .size-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } .notice { flex-wrap: wrap; } .notice-body { flex: 1 1 100%; order: 2; } /* Sayfa basligindaki dugmeler tam genislik alsin, sikismasin */ .page-head { gap: 10px; } .page-head h1 { flex: 1 1 100%; } /* Kart basligi ile yanindaki bilgi alt alta */ .card-head { flex-direction: column; align-items: flex-start; gap: 6px; } /* Cari hesap ve odeme formu */ .koli-bas { flex-direction: column; gap: 6px; } .koli-sag { width: 100%; justify-content: space-between; } /* Trendyol eslestirme satiri: alanlar alt alta */ .eslesme-satir { flex-direction: column; align-items: stretch; } .eslesme-satir input, .eslesme-satir select { width: 100%; min-width: 0; } .eslesme-barkod { min-width: 0; } } @media (max-width: 560px) { .content { padding: 16px 12px 44px; } .topbar { padding: 0 12px; gap: 10px; } .card { padding: 13px; margin-bottom: 14px; } .auth-box { padding: 22px 18px; } h1 { font-size: 19px; } /* Yatay kayan filtre seridi: cipler alt alta yigilmak yerine kaysin */ .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; /* Kaydirilabilir oldugu belli olsun diye sag kenarda solma */ -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .filters::-webkit-scrollbar { display: none; } .filters .chip { flex: none; } /* Arama ve tarih araligi kendi satirinda tam genislik */ .filters .search, .filters .daterange { flex: none; } /* Grafik: 14 gun telefonda cok dar, cubuklar inceliyor. Deger etiketlerini gizleyip cubuklara nefes aldiriyoruz. */ .grafik { height: 108px; gap: 3px; } .grafik-ay { height: 128px; } .grafik-cift { gap: 2px; } .grafik-deger { display: none; } .grafik-gun { font-size: 9px; } /* Numara izgarasi: 3 sutun garantili */ .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .size-cell { padding: 9px 6px; } .thumb-lg { width: 92px; height: 92px; } .product-img { width: 92px; height: 92px; } } /* * Cok dar ekran (iPhone SE ~320px) */ @media (max-width: 380px) { .size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartchip span { display: none; } .stat-no { font-size: 27px; } } /* * ALT ISLEM CUBUGU * * "Siparisi Gonder" / "Stoklari Kaydet" gibi dugmeleri tasiyor ve * position: sticky ile altta duruyor. Centikli telefonlarda alt * gezinme cubugunun ALTINDA kaliyordu - dugmeye basilamiyordu. */ .sticky-actions { bottom: calc(16px + env(safe-area-inset-bottom)); } @media (max-width: 640px) { .sticky-actions { flex-wrap: wrap; gap: 9px; padding: 12px 14px; bottom: calc(10px + env(safe-area-inset-bottom)); } /* Ana eylem tam genislik: parmakla ilk hedef o olsun */ .sticky-actions .btn-primary { flex: 1 1 100%; } /* Aciklama metni cubugu sismesin diye kucultuluyor */ .sticky-actions .muted { flex: 1 1 100%; font-size: 11.5px; line-height: 1.4; } } /* ═══════════════════════════════════════════════ YAZDIRMA ═══════ */ /* * Siparis detayi yazdirildiginda paketleme fisine donsun: * menu, butonlar ve formlar cikmasin, sadece koli bilgisi kalsin. */ @media print { :root { --sh: none; --sh-lift: none; --sh-primary: none; } .sidebar, .topbar, .scrim, .skip, .notice, .filters, .row-actions, .sticky-actions, .btn, form, .size-form, .foot { display: none !important; } /* Sadece salt okunur kartlar kalsin */ body { background: #fff; font-size: 12px; } .shell, .main { display: block; } .content { padding: 0; max-width: none; } .card { border: 1px solid #ccc; border-radius: 0; box-shadow: none; break-inside: avoid; margin-bottom: 10px; padding: 12px; } .cols { display: block; } .col-side, .col-main { min-width: 0; } .table thead th { color: #000; border-bottom: 1px solid #000; } .table tbody td { border-bottom: 1px solid #ddd; } .badge, .termin { border: 1px solid #999; background: none !important; color: #000 !important; } .mono.big { font-size: 20px; font-weight: 700; } a[href]::after { content: ""; } /* baglanti adreslerini basma */ /* Kargo kodu yazdirmada en gorunur bilgi olmali */ .kv dt { color: #444; } .page-head h1 { font-size: 18px; } } /* ── Trendyol eslestirme satiri ────────────────────────────────────── */ .eslesme-satir { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px dashed var(--line); } .eslesme-satir:last-of-type { border-bottom: 0; } .eslesme-satir input, .eslesme-satir select { margin-top: 0; width: auto; } .eslesme-satir select { min-width: 210px; } .eslesme-satir input[type=text] { min-width: 190px; } .eslesme-barkod { font-weight: 700; min-width: 160px; } /* ═══════════════════════════════════════════ DOKUNMATIK CIHAZ ═══ */ /* * BU BLOK DOSYANIN SONUNDA DURMALI. * * Media query ozgulluk (specificity) eklemez; ".size-form .qty" gibi * daha ozgul veya ayni ozgullukte daha SONRA gelen bir kural buradaki * ayarlari ezer. Blok ortadayken tam da bu oldu: adet kutulari 12px * kaldi ve iOS her dokunusta sayfayi buyuttu. Kurallar en sona alinarak * "ayni ozgullukte son yazilan kazanir" kurali lehimize cevrildi. * * pointer: coarse = birincil isaretcisi parmak olan cihaz. Masaustunde * hicbir sey degismez. * * 1) YAZI BOYU 16px: iOS Safari 16px altindaki alana odaklaninca * sayfayi OTOMATIK buyutur ve geri almaz. "user-scalable=no" cozum * degil - gormeyen kullanicinin buyutme hakkini da kapatir. * * 2) DOKUNMA HEDEFI en az 44px (parmak ucu ~9mm). */ @media (pointer: coarse) { input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=datetime-local], input[type=date], select, textarea, input.mono-in, .daterange input[type=date], .table-batch input, .table-batch select, .qty, .qty-sm, .qty-price { font-size: 16px; padding: 11px 13px; } .topsearch input[type=search] { font-size: 16px; height: 46px; } /* Adet kutulari: yazi buyuyunce kutu da genislemeli */ .qty { width: 92px; padding: 9px 6px; } .qty-sm { width: 76px; } .qty-price { width: 128px; } .size-form .qty { width: 56px; padding: 9px 4px; font-size: 16px; } .btn { min-height: 44px; padding: 10px 18px; } .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 13px; } /* Filtre cipleri ve sayfalama: 35px parmak icin dar */ .chip { min-height: 40px; display: inline-flex; align-items: center; } .sayfa, .sayfa-ok { min-width: 42px; height: 42px; } /* Onay kutulari (".check input { width:auto }" kuralini ezmek icin genis secici). 24px = WCAG 2.5.8 asgari hedef boyutu. */ input[type=checkbox], input[type=radio], .check input[type=checkbox] { width: 24px; height: 24px; min-width: 24px; padding: 0; } /* Ikon dugmeler */ .who-out, .temabtn, .burger, .menu-kapat { min-width: 44px; min-height: 44px; } .navlink { padding: 12px 12px; } .size-form .btn { min-height: 40px; font-size: 12px; } /* Dosya alani 16px'e gerek duymaz (yazilmiyor, dokunuluyor) ama hedef buyusun */ input[type=file] { font-size: 13px; padding: 10px 10px; } /* Hover efektleri dokunmatikte "yapisik" kaliyor */ .size-cell:hover, .stat:hover { transform: none; box-shadow: var(--sh); } }