/* ===================================================================== BARKODIO — Ortak Stil (mobile-first, responsive) Breakpoint'ler: <768px telefon (varsayılan) / >=768px tablet / >=1280px masaüstü ===================================================================== */ /* Tema tokenları — koyu varsayılan, açık tema ile. Değişken isimleri Türkçe kalır; sabit renk yazmayın, hep var(--...) kullanın. */ :root { color-scheme: dark; --renk-indigo: #4f46e5; --renk-cyan: #06b6d4; --gradient: linear-gradient(135deg, var(--renk-indigo), var(--renk-cyan)); --bg-koyu: #0f1120; --bg-panel: #171a2e; --bg-panel-2: #1e2138; --bg-panel-3: #262a45; --metin: #e6e7ef; --metin-soluk: #9a9db8; --metin-ters: #ffffff; --kenarlik: #2a2e4a; --basari: #22c55e; --basari-arkaplan: rgba(34, 197, 94, .14); --basari-metin: #86efac; --tehlike: #ef4444; --tehlike-arkaplan: rgba(239, 68, 68, .14); --tehlike-metin: #fca5a5; --uyari: #f59e0b; --uyari-arkaplan: rgba(245, 158, 11, .14); --uyari-metin: #fbbf24; --bilgi: #3b82f6; --bilgi-arkaplan: rgba(59, 130, 246, .14); --bilgi-metin: #93c5fd; --radius: 8px; --radius-buyuk: 14px; --golge: 0 4px 16px rgba(0, 0, 0, .35); --overlay: rgba(4, 5, 12, .66); } [data-theme="light"] { color-scheme: light; --renk-indigo: #4338ca; --renk-cyan: #0e7490; --bg-koyu: #f4f5f9; --bg-panel: #ffffff; --bg-panel-2: #f0f1f6; --bg-panel-3: #e6e8f1; --metin: #1a1c2e; --metin-soluk: #5c5f78; --metin-ters: #ffffff; --kenarlik: #e1e3ee; --basari: #16a34a; --basari-arkaplan: rgba(22, 163, 74, .10); --basari-metin: #15803d; --tehlike: #dc2626; --tehlike-arkaplan: rgba(220, 38, 38, .10); --tehlike-metin: #b91c1c; --uyari: #b45309; --uyari-arkaplan: rgba(180, 83, 9, .10); --uyari-metin: #92400e; --bilgi: #2563eb; --bilgi-arkaplan: rgba(37, 99, 235, .10); --bilgi-metin: #1d4ed8; --golge: 0 2px 10px rgba(30, 33, 60, .08); --overlay: rgba(15, 17, 32, .45); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html { scrollbar-width: thin; scrollbar-color: var(--kenarlik) var(--bg-koyu); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-koyu); } ::-webkit-scrollbar-thumb { background: var(--kenarlik); border-radius: 999px; border: 2px solid var(--bg-koyu); } ::-webkit-scrollbar-thumb:hover { background: var(--bg-panel-2); } body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-koyu); color: var(--metin); line-height: 1.5; min-height: 100vh; } a { color: var(--renk-cyan); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* --------------------------- Üst Menü (giriş yapılmamış sayfalar) --------------------------- */ .app-header { background: var(--bg-panel); border-bottom: 1px solid var(--kenarlik); position: sticky; top: 0; z-index: 50; } .app-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; max-width: 1280px; margin: 0 auto; position: relative; } .app-header-inner .btn { width: auto; flex-shrink: 0; } .app-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.25rem; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .app-logo-ikon { width: 28px; height: 28px; flex-shrink: 0; } .menu-toggle { background: none; border: 1px solid var(--kenarlik); color: var(--metin); font-size: 1.25rem; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; } /* --------------------------- Sol Menü (Sidebar) — giriş yapılmış sayfalar --------------------------- */ .app-shell { display: block; } .app-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--kenarlik); position: sticky; top: 0; z-index: 50; } .app-topbar .app-logo { flex: 1; } /* Masaüstü üst bar — arama kutusu + kullanıcı, sadece >=1024px (bkz. medya sorgusu) */ .app-topbar-masaustu { display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--kenarlik); position: sticky; top: 0; z-index: 40; } .topbar-arama { position: relative; width: 300px; max-width: 40vw; } .topbar-arama-ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--metin-soluk); font-size: 0.85rem; pointer-events: none; } .topbar-arama input[type="search"] { width: 100%; margin: 0; padding: 8px 12px 8px 34px; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); color: var(--metin); font-size: 0.85rem; } .topbar-arama-sonuc { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius); box-shadow: var(--golge); overflow: hidden; z-index: 45; max-height: 320px; overflow-y: auto; } .topbar-arama-sonuc.acik { display: block; } .sutun-secici { position: relative; } .sutun-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius); box-shadow: var(--golge); padding: 10px 14px; z-index: 45; } .sutun-panel.acik { display: block; } .sutun-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.85rem; min-height: auto; cursor: pointer; } .sutun-panel input[type="checkbox"] { width: auto; min-height: auto; } #urun-tablosu [data-kolon="stok"] { text-align: center; cursor: pointer; } #urun-tablosu td[data-kolon="stok"] input { width: 100%; text-align: center; } .topbar-arama-sonuc a { display: block; padding: 9px 14px; color: var(--metin); font-size: 0.85rem; } .topbar-arama-sonuc a:hover { background: var(--bg-panel-2); text-decoration: none; } .topbar-arama-bos { padding: 9px 14px; color: var(--metin-soluk); font-size: 0.85rem; } .topbar-kullanici { display: flex; align-items: center; gap: 10px; color: var(--metin); flex-shrink: 0; } .topbar-kullanici:hover { text-decoration: none; } .topbar-kullanici-ad { font-size: 0.85rem; color: var(--metin-soluk); } .topbar-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--gradient); color: var(--metin-ters); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; } .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 85vw; z-index: 60; background: var(--bg-panel); padding: 16px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 12px 0 32px var(--overlay); } .app-sidebar.acik { transform: translateX(0); } .app-sidebar-kapat { display: flex; align-items: center; justify-content: center; margin-left: auto; margin-bottom: 12px; width: 36px; height: 36px; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin); border-radius: 50%; font-size: 1rem; cursor: pointer; } .app-sidebar-backdrop { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 59; } #app-sidebar.acik ~ .app-sidebar-backdrop { display: block; } .app-sidebar-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; } .app-sidebar-ust .app-logo { display: inline-flex; } .sidebar-daralt-btn { display: none; /* yalnızca masaüstünde (bkz. 1024px medya sorgusu) */ align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: 6px; color: var(--metin-soluk); font-size: 0.7rem; cursor: pointer; } .sidebar-daralt-btn:hover { color: var(--metin); } .nav-ikon { flex-shrink: 0; width: 20px; text-align: center; font-size: 0.95rem; } .app-nav { display: flex; flex-direction: column; gap: 2px; } .app-nav a, .nav-grup-baslik, .nav-alt-yakinda { color: var(--metin); padding: 10px 14px; border-radius: var(--radius); min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .app-nav a, .nav-grup-baslik { justify-content: flex-start; } .app-nav a .nav-etiket, .nav-grup-baslik .nav-etiket { flex: 1; } .tema-btn .nav-etiket.tema-btn-ad { flex: 1; } .app-nav a:hover { background: var(--bg-panel-2); text-decoration: none; } .app-nav a.aktif { background: var(--bg-panel-2); color: var(--renk-cyan); font-weight: 600; } .app-nav .cikis-link { color: var(--tehlike); } .nav-baslik { margin: 14px 0 4px; padding: 0 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--metin-soluk); } .nav-grup-baslik { width: 100%; background: none; border: none; font: inherit; cursor: pointer; text-align: left; } .nav-grup-ok { color: var(--metin-soluk); font-size: 0.8rem; transition: transform 0.15s; } .nav-grup.acik .nav-grup-ok { transform: rotate(180deg); } .nav-alt-liste { display: none; flex-direction: column; padding-left: 14px; } .nav-grup.acik .nav-alt-liste { display: flex; } .nav-alt-liste a, .nav-alt-yakinda { font-size: 0.92rem; padding: 8px 14px; min-height: auto; } .nav-alt-yakinda { color: var(--metin-soluk); cursor: default; } .nav-alt-yakinda em { font-style: normal; font-size: 0.65rem; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); padding: 2px 7px; border-radius: 999px; } .nav-alt-sabit { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--kenarlik); display: flex; flex-direction: column; gap: 2px; } /* Tema anahtarı */ .tema-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; background: none; border: none; border-radius: var(--radius); color: var(--metin); font: inherit; text-align: left; cursor: pointer; } .tema-btn:hover { background: var(--bg-panel-2); } .tema-btn-durum { font-size: 0.75rem; color: var(--metin-soluk); background: var(--bg-panel-2); border: 1px solid var(--kenarlik); padding: 2px 9px; border-radius: 999px; } .tema-btn-ikon { width: auto; min-width: 44px; justify-content: center; padding: 6px 10px; border: 1px solid var(--kenarlik); } .app-header-sag { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .app-content { display: flex; flex-direction: column; min-height: 100vh; } .app-main { flex: 1 0 auto; } @media (min-width: 1024px) { .app-shell { display: flex; align-items: flex-start; } .app-sidebar { position: sticky; inset: auto; top: 0; height: 100vh; width: 240px; max-width: none; flex-shrink: 0; border-right: 1px solid var(--kenarlik); z-index: auto; transform: none; box-shadow: none; } .app-sidebar-kapat { display: none; } .app-sidebar-backdrop { display: none !important; } .app-topbar { display: none; } .app-content { flex: 1; min-width: 0; } .sidebar-daralt-btn { display: flex; } .app-topbar-masaustu { display: flex; } /* Daraltılmış sidebar — yalnızca ikonlar, 224px -> 64px */ html[data-sidebar="daraltilmis"] .app-sidebar { width: 64px; padding-left: 8px; padding-right: 8px; } html[data-sidebar="daraltilmis"] .app-sidebar-ust { justify-content: center; } html[data-sidebar="daraltilmis"] .nav-etiket, html[data-sidebar="daraltilmis"] .nav-grup-ok, html[data-sidebar="daraltilmis"] .nav-baslik, html[data-sidebar="daraltilmis"] .nav-alt-liste, html[data-sidebar="daraltilmis"] .tema-btn-durum { display: none; } html[data-sidebar="daraltilmis"] .app-nav a, html[data-sidebar="daraltilmis"] .nav-grup-baslik, html[data-sidebar="daraltilmis"] .tema-btn { justify-content: center; padding: 10px 0; } html[data-sidebar="daraltilmis"] .sidebar-daralt-btn { transform: none; } } /* --------------------------- Genel Layout --------------------------- */ .app-main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px; } .container-dar { max-width: 480px; margin: 0 auto; padding: 16px; } .kart { background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); padding: 20px; margin-bottom: 16px; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: 1.6rem; } @media (min-width: 768px) { h1 { font-size: 2rem; } } /* --------------------------- Form Öğeleri --------------------------- */ label { display: block; margin: 12px 0 6px; font-size: 0.9rem; color: var(--metin-soluk); } input, select, textarea { width: 100%; padding: 12px 14px; font-size: 1rem; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); color: var(--metin); min-height: 44px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--renk-cyan); } .form-onay-satir { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 0.9rem; color: var(--metin); cursor: pointer; } .form-onay-satir input[type="checkbox"] { width: 16px; height: 16px; min-height: auto; accent-color: var(--renk-indigo); flex-shrink: 0; } input[type="file"] { padding: 8px 10px; } input[type="file"]::file-selector-button { background: var(--gradient); color: white; border: none; border-radius: calc(var(--radius) - 4px); padding: 8px 16px; margin-right: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; } input[type="file"]::file-selector-button:hover { opacity: 0.92; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius); border: none; font-size: 1rem; font-weight: 600; cursor: pointer; background: var(--gradient); color: white; width: 100%; } @media (min-width: 480px) { .btn { width: auto; } } .btn:hover { opacity: 0.92; text-decoration: none; } .btn-ikincil { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin); } .btn-tehlike { background: var(--tehlike); } .btn-kucuk { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; } .hata { background: var(--tehlike-arkaplan); border: 1px solid var(--tehlike); color: var(--tehlike-metin); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; } .basari-mesaj { background: var(--basari-arkaplan); border: 1px solid var(--basari); color: var(--basari-metin); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; } /* --------------------------- Tablolar (mobilde kart, masaüstünde tablo) --------------------------- */ table { width: 100%; border-collapse: collapse; } .tablo-sarici { overflow-x: auto; min-height: 160px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--kenarlik); white-space: nowrap; } th { color: var(--metin-soluk); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; } /* Ürünler tablosu: <768px'te tablo yerine kart listesi gösterilir (responsive kural) */ .urun-kart-liste { display: flex; flex-direction: column; gap: 10px; } .urun-kart-liste-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .urun-karti { border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 12px; background: var(--bg-panel-2); } .urun-karti-ust { display: flex; align-items: flex-start; gap: 10px; } .urun-karti-ust .urun-thumb { flex-shrink: 0; } .urun-karti-baslik { flex: 1; min-width: 0; font-weight: 600; } .urun-karti-baslik a { color: var(--metin); font-weight: 600; } .urun-karti-barkod { font-weight: 400; color: var(--metin-soluk); font-size: 0.8rem; margin-top: 2px; } .urun-karti-ust input[type="checkbox"] { width: auto; min-height: auto; flex-shrink: 0; } .urun-karti-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--kenarlik); font-size: 0.88rem; color: var(--metin-soluk); } .urun-karti-satir .inline-num { width: 110px; } .urun-karti-detay { border-top: 1px solid var(--kenarlik); padding-top: 8px; margin-top: 2px; } .urun-karti-detay summary { cursor: pointer; color: var(--renk-cyan); font-size: 0.85rem; padding: 6px 0; } .urun-karti-detay label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; margin: 8px 0 0; color: var(--metin-soluk); } .urun-karti-detay .inline-num { width: 110px; margin: 0; } .urun-karti-detay .liste-chip-grubu { margin-top: 10px; } .urun-karti-aksiyon { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kenarlik); } .urun-karti-aksiyon .btn { width: auto; flex: 1; min-width: 90px; } @media (min-width: 768px) { .urun-kart-liste { display: none; } } @media (max-width: 767.98px) { .tablo-sarici-urun-ana { display: none; } } /* --------------------------- Rozet / Etiket --------------------------- */ .rozet { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .rozet-yesil { background: var(--basari-arkaplan); color: var(--basari-metin); } .rozet-kirmizi { background: var(--tehlike-arkaplan); color: var(--tehlike-metin); } .rozet-sari { background: var(--uyari-arkaplan); color: var(--uyari-metin); } .rozet-mavi { background: var(--bilgi-arkaplan); color: var(--bilgi-metin); } /* --------------------------- Boş Durum --------------------------- */ .bos-durum { border: 1px dashed var(--kenarlik); border-radius: var(--radius); padding: 32px 20px; text-align: center; color: var(--metin-soluk); font-size: 0.9rem; } .bos-durum-ikon { font-size: 1.8rem; margin-bottom: 8px; display: block; } .bos-durum-aksiyon { margin-top: 12px; } /* Tablo satırı içinde boş durum (ör. "Kayıt bulunamadı" td'si) — kutu/kenarlık yok, tabloya uyar */ .bos-durum-satir { text-align: center; color: var(--metin-soluk); padding: 28px 12px !important; white-space: normal !important; } /* --------------------------- Yükleniyor İskeleti --------------------------- */ .iskelet-satir { height: 12px; border-radius: 4px; background: var(--bg-panel-2); margin-bottom: 8px; animation: iskelet-nabiz 1.4s ease-in-out infinite; } .iskelet-satir:last-child { margin-bottom: 0; } .iskelet-satir.w-70 { width: 70%; } .iskelet-satir.w-90 { width: 90%; } .iskelet-satir.w-50 { width: 50%; } @keyframes iskelet-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* --------------------------- Kilitli Eklenti --------------------------- */ .kilitli-oge { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-panel-2); opacity: 0.6; } .kilit-karti { padding: 16px; border-radius: var(--radius); background: var(--uyari-arkaplan); border: 1px solid var(--uyari); display: flex; flex-direction: column; gap: 6px; } .kilit-karti strong { color: var(--uyari); font-size: 0.92rem; } .kilit-karti p { margin: 0; color: var(--metin-soluk); font-size: 0.85rem; } /* Trendyol Karşılaştırma — eşleşen/eşleşmeyen satır vurgusu */ tr.ty-satir-eslesen td:first-child { border-left: 3px solid var(--basari); } tr.ty-satir-eslesmeyen td:first-child { border-left: 3px solid var(--uyari); } /* --------------------------- Scan Ekranı (telefon önceliği) --------------------------- */ .scan-kutusu { display: flex; gap: 8px; flex-direction: column; } @media (min-width: 480px) { .scan-kutusu { flex-direction: row; } } .scan-input { font-size: 1.3rem; padding: 18px; text-align: center; letter-spacing: 0.05em; } .scan-sonuc { margin-top: 16px; padding: 20px; border-radius: var(--radius-buyuk); background: var(--bg-panel-2); text-align: center; } .scan-sonuc .urun-adi { font-size: 1.2rem; font-weight: 700; } .scan-sonuc .adet-buyuk { font-size: 2.5rem; font-weight: 800; color: var(--renk-cyan); } /* --------------------------- Kamera ile Barkod Okuma (sadece mobil) --------------------------- */ .kamera-scan-btn { display: flex; } @media (min-width: 768px) { .kamera-scan-btn { display: none; } } .kamera-modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.85); padding: 16px; align-items: center; justify-content: center; } .kamera-modal.acik { display: flex; } .kamera-modal-ic { width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); padding: 16px; } .kamera-modal-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; } .kamera-kapat-btn { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin); width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; } #kamera-okuyucu { border-radius: var(--radius); overflow: hidden; } #kamera-okuyucu video { width: 100%; border-radius: var(--radius); } .kamera-ipucu { text-align: center; color: var(--metin-soluk); font-size: 0.85rem; margin: 12px 0 0; } /* --------------------------- Satış (POS) Ekranı --------------------------- */ .kategori-sekmeleri { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 12px; } .sekme-btn { flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 36px; } .sekme-btn.aktif { background: var(--gradient); border-color: transparent; color: white; } .urun-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; min-height: 220px; align-content: start; } @media (min-width: 480px) { .urun-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .urun-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .urun-grid { grid-template-columns: repeat(5, 1fr); } } .urun-grid-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 12px; cursor: pointer; min-height: 64px; text-align: left; } .urun-grid-btn:hover { border-color: var(--renk-cyan); } .urun-grid-ad { font-size: 0.85rem; color: var(--metin); font-weight: 600; } .urun-grid-fiyat { font-size: 0.9rem; color: var(--renk-cyan); font-weight: 700; } .sepet-sekmeleri { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .sepet-sekme-btn { flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); padding: 10px 16px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; } .sepet-sekme-btn.aktif { background: var(--gradient); border-color: transparent; color: white; } .pos-ek-satirlar { display: flex; flex-direction: column; } .pos-ek-satir { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .pos-ek-satir input, .pos-ek-satir select { width: auto; flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; } .pos-ek-satir select { flex: 0 0 90px; } @media (min-width: 1024px) { .pos-ek-satirlar { flex-direction: row; gap: 12px; } .pos-ek-satirlar .pos-ek-satir { flex: 1; min-width: 0; } } .pos-toplam-satir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pos-toplam-kutu { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 12px; text-align: center; } .pos-toplam-kutu span { display: block; font-size: 0.75rem; color: var(--metin-soluk); margin-bottom: 4px; } .pos-toplam-kutu strong { font-size: 1.1rem; } .pos-odeme-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; } @media (min-width: 640px) { .pos-odeme-grid { grid-template-columns: repeat(3, 1fr); } } .pos-hizli-nakit { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .pos-hizli-nakit .btn { flex: 1; min-width: 60px; padding: 8px; } #satisi-tamamla-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* --------------------------- Kompakt POS Düzeni (2 kolon, geniş ekran) --------------------------- */ /* Satış ekranı küçük laptop yüksekliklerine (768px) sığsın diye yatay iki kolona ayrılır: solda sepet/ürünler, sağda sabit (sticky) ödeme paneli. */ .pos-ust-bar { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; } .pos-ust-bar .scan-kutusu { flex: 1 1 260px; margin: 0; } .pos-ust-bar .scan-input { font-size: 1.05rem; padding: 12px 14px; text-align: left; letter-spacing: normal; } .pos-mod-secim { display: flex; gap: 6px; flex-shrink: 0; } .pos-mod-btn { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); padding: 8px 18px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 700; cursor: pointer; min-height: 44px; white-space: nowrap; } .pos-mod-btn.aktif { background: var(--gradient); border-color: transparent; color: var(--metin-ters); } .pos-mod-btn.pos-mod-iade.aktif { background: var(--tehlike); } .pos-duzen { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 1024px) { .pos-duzen { grid-template-columns: minmax(0, 1fr) 360px; } } .pos-duzen .kart { margin-bottom: 0; padding: 16px; } .pos-sol, .pos-sag { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (min-width: 1024px) { .pos-sag { position: sticky; top: 16px; } .pos-duzen { gap: 12px; } .pos-duzen .kart { padding: 12px; } .pos-sol, .pos-sag { gap: 12px; } } /* Satış ekranında ürün grid'i biraz daha sıkışık — dikeyde yer kazanmak için */ .pos-duzen .urun-grid { min-height: 0; gap: 8px; } .pos-duzen #sepet-tablosu th, .pos-duzen #sepet-tablosu td { padding: 8px 10px; } .pos-duzen .tablo-sarici { min-height: 0; } /* Ekrana sığdırma — küçük laptop yüksekliklerinde (ör. 1366x768) sayfa kaydırmadan tüm POS ekranı görünsün diye sepet listesi ve hızlı ürün grid'i kendi içinde kaydırılır, kart/ödeme paneli sabit kalır. */ @media (min-width: 1024px) { .pos-duzen .tablo-sarici { max-height: 34vh; overflow-y: auto; } .pos-duzen #sepet-tablosu thead th { position: sticky; top: 0; background: var(--bg-panel); z-index: 1; } .pos-duzen .urun-grid { max-height: 220px; overflow-y: auto; } } /* İade modu — panel ve tamamla butonu kırmızı vurgu alır, karışıklık olmasın */ .pos-ekran.iade-modu .pos-sag .kart { border-color: var(--tehlike); } .pos-ekran.iade-modu #satisi-tamamla-btn { background: var(--tehlike); } .pos-iade-uyari { display: none; background: var(--tehlike-arkaplan); border: 1px solid var(--tehlike); color: var(--tehlike-metin); padding: 8px 12px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; } .pos-ekran.iade-modu .pos-iade-uyari { display: block; } .pos-tam-btn-satir { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .pos-tam-btn-satir .btn { flex: 1; padding: 8px; min-height: 38px; min-width: 0; } .pos-sag .pos-toplam-kutu { padding: 10px; } .pos-sag .pos-toplam-kutu strong { font-size: 1rem; } /* Masaüstünde (>=1024px) sağ panel 360px sabit sütun olur — ödeme alanları yine de 3 kolon yan yana durur, dikeyde yer kazanmak için etiket/input/buton boyutları sıkılaştırılır. Mobil/tablette (tek kolon, panel tam genişlik) dokunma hedefleri küçülmesin diye bu sıkılaştırma UYGULANMAZ. */ @media (min-width: 1024px) { .pos-sag .pos-odeme-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .pos-sag .pos-odeme-grid label { margin: 0 0 4px; font-size: 0.78rem; } .pos-sag .pos-odeme-grid input { padding: 8px; min-height: 38px; font-size: 0.88rem; } .pos-sag .pos-hizli-nakit { gap: 4px; margin-top: 6px; } .pos-sag .pos-hizli-nakit .btn { flex: 1 1 42%; min-width: 0; padding: 6px 2px; font-size: 0.72rem; min-height: 30px; } .pos-sag .pos-tam-btn-satir { gap: 4px; margin-top: 4px; } .pos-sag .pos-tam-btn-satir .btn { padding: 6px 2px; font-size: 0.72rem; min-height: 30px; } } /* --------------------------- Genel Ayarlar (Hesabım) --------------------------- */ .ayar-liste-satirlari { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ayar-liste-satiri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 10px; } .ayar-liste-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; } .ayar-liste-form input[type="text"] { width: auto; flex: 1; min-width: 120px; min-height: 40px; padding: 8px 12px; } .ayar-liste-sayi { color: var(--metin-soluk); font-size: 0.8rem; white-space: nowrap; } /* --------------------------- Hızlı Liste Chip'leri (Ürünler) --------------------------- */ .liste-chip-grubu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .liste-chip { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; cursor: pointer; } .liste-chip.aktif { background: var(--gradient); border-color: transparent; color: white; } /* --------------------------- Ürün Arama Açılır Listesi (Satış) --------------------------- */ .urun-arama-sonuc { display: none; position: relative; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius); margin-top: 8px; max-height: 320px; overflow-y: auto; } .urun-arama-sonuc.acik { display: block; } .urun-arama-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--kenarlik); } .urun-arama-satir:last-child { border-bottom: none; } .urun-arama-satir:hover { background: var(--bg-panel-2); } .urun-arama-ad { font-weight: 600; font-size: 0.9rem; } .urun-arama-detay { color: var(--metin-soluk); font-size: 0.78rem; margin-top: 2px; } .urun-arama-sag { text-align: right; flex-shrink: 0; } .urun-arama-fiyat { color: var(--renk-cyan); font-weight: 700; font-size: 0.9rem; } .urun-arama-stok { color: var(--metin-soluk); font-size: 0.75rem; } /* --------------------------- Toplu Sayım Anahtarı (toggle) --------------------------- */ .toplu-secenek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; } .anahtar { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; } .anahtar input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .anahtar-track { position: absolute; inset: 0; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: 999px; transition: background 0.15s, border-color 0.15s; } .anahtar-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--metin-soluk); border-radius: 50%; transition: transform 0.15s, background 0.15s; } .anahtar input:checked ~ .anahtar-track { background: var(--gradient); border-color: transparent; } .anahtar input:checked ~ .anahtar-track .anahtar-thumb { transform: translateX(18px); background: white; } .anahtar input:focus-visible ~ .anahtar-track { outline: 2px solid var(--renk-cyan); outline-offset: 2px; } /* --------------------------- Toast Bildirimleri (okutma geri bildirimi) --------------------------- */ .toast-katman { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: calc(100% - 32px); max-width: 420px; pointer-events: none; } .toast { pointer-events: auto; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-left: 4px solid var(--basari); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--golge); font-size: 0.88rem; animation: toast-gir 0.2s ease, toast-cik 0.25s ease 1.65s forwards; } .toast strong { display: block; margin-bottom: 2px; } .toast span { color: var(--metin-soluk); } .toast.toast-hata { border-left-color: var(--tehlike); } @keyframes toast-gir { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-cik { to { opacity: 0; transform: translateY(-10px); } } /* --------------------------- Satış — sabit alt toplam barı --------------------------- */ .pos-sabit-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg-panel); border-top: 1px solid var(--kenarlik); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: var(--golge); } .pos-sabit-bar .pos-sabit-etiket { color: var(--metin-soluk); font-size: 0.78rem; } .pos-sabit-bar .pos-sabit-adet { color: var(--metin-soluk); font-size: 0.78rem; } .pos-sabit-bar .pos-sabit-tutar { font-size: 1.3rem; font-weight: 800; color: var(--renk-cyan); transition: transform 0.15s ease; display: inline-block; } .pos-sabit-bar .pos-sabit-tutar.pos-sabit-pulse { transform: scale(1.15); } .pos-mobil-spacer { height: 64px; } @media (min-width: 1024px) { /* Geniş ekranda sağ ödeme paneli zaten sabit görünür — alt bara gerek yok, bu yüzden onun için ayrılan boşluk da kaldırılır (sığdırma için önemli). */ .pos-sabit-bar { display: none; } .pos-mobil-spacer { height: 0; } } .adet-buyuk.pulse { animation: adet-pulse 0.3s ease; } @keyframes adet-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } /* --------------------------- Grid yardımcıları --------------------------- */ .grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* --------------------------- Landing sayfası --------------------------- */ .hero { text-align: center; padding: 60px 16px; } @media (min-width: 768px) { .hero { padding: 100px 16px; } } .hero h1 { font-size: 2rem; margin-bottom: 12px; } @media (min-width: 768px) { .hero h1 { font-size: 3rem; } } .hero p { color: var(--metin-soluk); font-size: 1.05rem; max-width: 600px; margin: 0 auto 28px; } .fiyat-karti { text-align: center; } .fiyat-buyuk { font-size: 2.5rem; font-weight: 800; } /* --------------------------- Raporlar --------------------------- */ .rapor-filtre-grid { display: grid; grid-template-columns: 1fr; gap: 14px 16px; align-items: stretch; } @media (min-width: 768px) { .rapor-filtre-grid { grid-template-columns: repeat(2, 1fr); } } /* Geniş ekranda flex: her hücre içeriğinden dar olamaz (tarih/saat kesilmez), kalan boşluk eşit dağılır, sığmayan alt satıra iner. */ @media (min-width: 1024px) { .rapor-filtre-grid { display: flex; flex-wrap: wrap; } .rapor-filtre-grid > div { flex: 1 1 160px; min-width: auto; } } /* Her hücre: etiket üstte, kontrol altta — etiketler üst hizada, kontroller alt hizada dursun diye hücreler dikey esner (Listele butonu alta yaslanır). */ .rapor-filtre-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; } .rapor-filtre-grid > div > :last-child { margin-top: auto; } .rapor-filtre-grid label { margin: 0; } .rapor-filtre-grid .btn { min-height: 44px; } .rapor-lokasyon-liste { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 10px; max-height: 120px; overflow-y: auto; } .rapor-lokasyon-secenek { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; } .rapor-lokasyon-secenek input { width: auto; min-height: auto; } /* "Tümünü seç" etiketin sağına oturur, ayrı satır kaplamaz */ .rapor-tumunu-sec { background: none; border: none; color: var(--renk-cyan); font-size: 0.8rem; cursor: pointer; padding: 0; position: absolute; top: 2px; right: 0; } /* "Dün" kısayol çipi tarih kutusunun yanında, aynı satırda durur */ .rapor-tarih-satir { display: flex; align-items: center; gap: 8px; } .rapor-tarih-satir input { flex: 1; min-width: 150px; } /* "12.07.2026" + takvim ikonu kesilmesin */ .dun-chip { flex-shrink: 0; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; } .dun-chip:hover { border-color: var(--renk-cyan); color: var(--metin); } .dun-chip.aktif { color: var(--metin); border-color: var(--renk-cyan); background: rgba(6,182,212,0.12); } .rapor-saat-satir { display: flex; gap: 6px; align-items: center; } .rapor-saat-satir input { width: auto; flex: 1; min-width: 0; padding: 8px 6px; text-align: center; } .rapor-saat-satir span { color: var(--metin-soluk); flex-shrink: 0; } /* Dar kolonda "00:00" değeri kesilmesin: saat ikonunu gizle (tıklayınca yine seçici açılır) */ .rapor-saat-satir input::-webkit-calendar-picker-indicator { display: none; } details.rapor-diger-secenekler { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 10px 14px; } details.rapor-diger-secenekler summary { cursor: pointer; color: var(--renk-cyan); font-weight: 600; } details.rapor-diger-secenekler .grid { margin-top: 12px; } .ozet-kart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 4px; } @media (min-width: 640px) { .ozet-kart-grid { grid-template-columns: repeat(4, 1fr); } } .ozet-kart { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 14px; } .ozet-kart span { display: block; font-size: 0.78rem; color: var(--metin-soluk); margin-bottom: 6px; } .ozet-kart strong { font-size: 1.25rem; } .ozet-kart small { display: block; color: var(--metin-soluk); font-size: 0.68rem; margin-top: 3px; } /* --------------------------- Footer --------------------------- */ .site-footer { border-top: 1px solid var(--kenarlik); margin-top: 40px; } .site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .site-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } } .site-footer-marka p { color: var(--metin-soluk); font-size: 0.9rem; margin-top: 8px; max-width: 320px; } .site-footer-kolon h4 { margin: 0 0 10px; font-size: 0.85rem; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: 0.03em; } .site-footer-kolon a { display: block; color: var(--metin); padding: 4px 0; font-size: 0.95rem; } .site-footer-kolon a:hover { color: var(--renk-cyan); text-decoration: none; } .site-footer-alt { border-top: 1px solid var(--kenarlik); padding: 16px; text-align: center; color: var(--metin-soluk); font-size: 0.85rem; } /* --------------------------- Panel Footer (giriş yapılmış) --------------------------- */ .app-footer { border-top: 1px solid var(--kenarlik); margin-top: 40px; padding: 18px 16px; } .app-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; text-align: center; color: var(--metin-soluk); font-size: 0.85rem; } .app-footer-inner a { color: var(--metin-soluk); } .app-footer-inner a:hover { color: var(--renk-cyan); text-decoration: none; } /* --------------------------- Etiket Bas (etiketler.php) --------------------------- */ .etiket-duzen { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } /* Grid öğeleri içlerindeki sabit ölçülü A4 önizlemesi yüzünden sayfayı genişletmesin (min-width:auto tuzağı) — önizleme JS ile ölçeklenir. */ .etiket-duzen > * { min-width: 0; } @media (min-width: 1100px) { .etiket-duzen { grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.1fr); } .etiket-onizleme-kolon { position: sticky; top: 16px; } } .etk-ayar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 4px; } @media (min-width: 480px) { .etk-ayar-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } .etk-onay-satir { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; color: var(--metin); font-size: 0.9rem; cursor: pointer; } .etk-onay-satir input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--renk-indigo); flex-shrink: 0; } .etk-alt-ayar { margin: 4px 0 10px 24px; padding-left: 12px; border-left: 2px solid var(--kenarlik); } .etk-logo-satir { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; } #etk-logo-onizleme { max-height: 48px; max-width: 140px; background: #fff; border-radius: 6px; padding: 4px; } .etk-sonuclar { max-height: 260px; overflow-y: auto; border: 1px solid var(--kenarlik); border-radius: var(--radius); margin-top: 10px; } .etk-sonuclar:empty { display: none; } .etk-sonuc-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; color: var(--metin-soluk); font-size: 0.85rem; flex-wrap: wrap; } .etk-eklenmis { opacity: 0.45; } .etk-secili-baslik { display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; } .etk-secili-butonlar { display: flex; gap: 6px; flex-wrap: wrap; } .tablo-sarici { overflow-x: auto; } .etk-secili-tablo { width: 100%; } .etk-secili-tablo td { vertical-align: middle; } .etk-bos-satir td { color: var(--metin-soluk); font-size: 0.85rem; } .etk-mini-input { width: 90px !important; min-height: 34px; padding: 4px 8px; font-size: 0.85rem; } .etk-vurgu { animation: etk-vurgu-yanip 0.9s ease; } @keyframes etk-vurgu-yanip { 0% { background: rgba(6, 182, 212, 0.45); border-color: var(--renk-cyan); } 100% { background: transparent; } } .etk-sablon-satir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .etk-sablon-satir select { flex: 1; min-width: 180px; } .etk-uyari { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--uyari-arkaplan); border: 1px solid var(--uyari); color: var(--uyari-metin); font-size: 0.85rem; } .etk-onizleme-baslik { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .etk-onizleme-bilgi { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; color: var(--metin-soluk); font-size: 0.85rem; flex-wrap: wrap; } .etk-sayfa-nav { display: flex; align-items: center; gap: 8px; } .etk-onizleme-sarici { overflow: hidden; } /* Etiket sayfası — hem ekrandaki önizleme hem yazdırma bunları kullanır. Ölçüler mm cinsindendir; yazılar SİYAH/BEYAZ basılır (tema ne olursa olsun). */ .etk-sayfa { width: 210mm; height: 297mm; position: relative; background: #fff; overflow: hidden; transform-origin: top left; box-shadow: var(--golge); } .etk { position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 1.15; } .etk-kesim { border: 0.2mm dashed #999; } .etk-satir { width: 100%; overflow: hidden; } .etk-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .etk-logo { max-width: 90%; object-fit: contain; margin-bottom: 0.5mm; } .etk-kod { display: block; flex-shrink: 0; } .etk-kodyazi { letter-spacing: 0.06em; } .etk-fiyat { margin-top: 0.3mm; } /* Yazdırma: sayfada YALNIZCA #yazdir-kok kalır (JS onu body'nin altına kurar) */ #yazdir-kok { display: none; } @media print { @page { size: A4 portrait; margin: 0; } html, body { background: #fff !important; } body > :not(#yazdir-kok) { display: none !important; } #yazdir-kok { display: block !important; } #yazdir-kok .etk-sayfa { box-shadow: none; page-break-after: always; break-after: page; } #yazdir-kok .etk-sayfa:last-child { page-break-after: auto; break-after: auto; } } /* --------------------------- Ürünler listesi (tablo görünümü) --------------------------- */ .bilgi-mesaj { background: var(--bilgi-arkaplan); border: 1px solid var(--bilgi); color: var(--bilgi-metin); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; } .filtre-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filtre-bar input[type="search"] { flex: 2; min-width: 200px; } .filtre-bar select { flex: 1; min-width: 150px; width: auto; } .varyant-etiket { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; background: rgba(34,211,238,0.12); color: var(--renk-cyan); border: 1px solid rgba(34,211,238,0.3); margin-top: 4px; white-space: normal; } .urun-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--kenarlik); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .urun-thumb-bos { color: var(--metin-soluk); background: var(--bg-panel-2); font-size: 0.8rem; } .urun-thumb-buyuk { width: 96px; height: 96px; } .inline-num { width: 90px; min-height: auto; padding: 6px 8px; font-size: 0.9rem; } .inline-fiyat { width: 110px; } @keyframes kayit-ok-anim { 0% { box-shadow: 0 0 0 3px rgba(34,197,94,0.6); } 100% { box-shadow: none; } } @keyframes kayit-hata-anim { 0% { box-shadow: 0 0 0 3px rgba(239,68,68,0.7); } 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.5); } } .kayit-ok { animation: kayit-ok-anim 1.2s ease-out; } .kayit-hata { animation: kayit-hata-anim 0.4s ease-out forwards; border-color: var(--tehlike) !important; } .toplu-bar { gap: 8px; flex-wrap: wrap; align-items: center; border: 1px solid rgba(34,211,238,0.4); } .toplu-bar select { width: auto; min-width: 130px; } /* ------------------ Boyutlanabilir tablo sütunları ------------------ */ /* class="boyutlanabilir" verilen tablolarda başlık kenarından sürükleyerek sütun genişliği ayarlanır (static/tablo-boyutlandir.js). Daraltılan sütunda içerik satır atlasın diye nowrap kaldırılır. */ table.boyutlanabilir thead th { position: relative; } table.boyutlanabilir th, table.boyutlanabilir td { white-space: normal; overflow-wrap: break-word; } .sutun-tutamac { position: absolute; top: 0; right: -5px; width: 11px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 2; } .sutun-tutamac::after { content: ''; position: absolute; top: 15%; bottom: 15%; right: 5px; width: 1px; background: var(--kenarlik); } .sutun-tutamac:hover::after, .sutun-tutamac.aktif::after { background: var(--renk-cyan); width: 2px; } /* ===================================================================== GRAFİKLER — includes/grafik.php SVG çıktıları + static/grafik.js tooltip ===================================================================== */ .grafik-kaydir { overflow-x: auto; } .grafik { display: block; width: 100%; min-width: 520px; height: auto; } .grafik-kilavuz { stroke: var(--kenarlik); stroke-width: 1; opacity: 0.55; } .grafik-eksen { fill: var(--metin-soluk); font-size: 11px; font-family: inherit; } .grafik-deger { fill: var(--metin); font-size: 11.5px; font-weight: 700; font-family: inherit; } .grafik-hedef { cursor: crosshair; } .grafik-bos { color: var(--metin-soluk); text-align: center; padding: 48px 16px; border: 1px dashed var(--kenarlik); border-radius: var(--radius); } .grafik-tooltip { position: absolute; display: none; z-index: 200; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: 8px; padding: 7px 11px; font-size: 0.82rem; color: var(--metin); box-shadow: var(--golge); pointer-events: none; white-space: pre-line; max-width: 260px; } .grafik-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; } .grafik-sekme { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; } .grafik-sekme.aktif { color: var(--metin); border-color: var(--renk-cyan); background: rgba(6,182,212,0.12); } /* ===================================================================== PANEL (giriş yapılmış ana sayfa) ===================================================================== */ .panel-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .panel-baslik h1 { margin: 8px 0 2px; } .panel-tarih { color: var(--metin-soluk); font-size: 0.9rem; } .stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 16px 0; } @media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-kart { background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); padding: 16px 18px; min-width: 0; } .stat-kart .stat-etiket { color: var(--metin-soluk); font-size: 0.8rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .stat-kart .stat-deger { font-size: clamp(1.35rem, 4vw, 1.8rem); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; } .stat-kart .stat-alt { font-size: 0.78rem; color: var(--metin-soluk); margin-top: 6px; } .stat-kart .stat-alt .yukari { color: var(--basari); } .stat-kart .stat-alt .asagi { color: var(--tehlike); } .stat-vurgu { border-color: rgba(6,182,212,0.5); background: linear-gradient(160deg, rgba(6,182,212,0.10), var(--bg-panel) 55%); } .kisayol-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .kisayol-grid { grid-template-columns: repeat(4, 1fr); } } .kisayol-kart { display: flex; flex-direction: column; gap: 4px; background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); padding: 16px 18px; text-decoration: none; color: var(--metin); transition: border-color 0.15s ease, transform 0.15s ease; min-width: 0; } .kisayol-kart:hover { border-color: var(--renk-cyan); text-decoration: none; transform: translateY(-2px); } .kisayol-kart .kisayol-ikon { font-size: 1.4rem; line-height: 1; } .kisayol-kart strong { font-size: 0.98rem; } .kisayol-kart span { color: var(--metin-soluk); font-size: 0.82rem; } .panel-iki-kolon { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1024px) { .panel-iki-kolon { grid-template-columns: 2fr 1fr; } } .panel-iki-kolon > .kart { min-width: 0; margin-bottom: 0; } .panel-liste { margin: 0; padding: 0; list-style: none; } .panel-liste li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--kenarlik); font-size: 0.9rem; min-width: 0; } .panel-liste li:last-child { border-bottom: none; } .panel-liste .liste-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .panel-liste .liste-deger { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } /* ===================================================================== TANITIM SAYFASI (giriş yapılmamış index) ===================================================================== */ .hero-eyebrow { display: inline-block; color: var(--renk-cyan); border: 1px solid rgba(6,182,212,0.4); background: rgba(6,182,212,0.08); border-radius: 999px; padding: 5px 14px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 18px; } .hero-aksiyonlar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-aksiyonlar .btn { width: auto; } .hero-not { color: var(--metin-soluk); font-size: 0.85rem; margin-top: 14px; } /* Hero barkod animasyonu — markanın imzası: taranan bir barkod */ .hero-barkod { max-width: 420px; margin: 36px auto 0; position: relative; } .hero-barkod svg { display: block; width: 100%; height: auto; } .hero-barkod .barkod-cizgi { fill: var(--metin); opacity: 0.85; } .hero-barkod .barkod-tarayici { position: absolute; left: 4%; right: 4%; height: 2px; top: 12%; background: linear-gradient(90deg, transparent, var(--renk-cyan) 18%, var(--renk-cyan) 82%, transparent); box-shadow: 0 0 14px 2px rgba(6,182,212,0.65); animation: barkod-tara 2.6s ease-in-out infinite; } @keyframes barkod-tara { 0%, 100% { top: 10%; } 50% { top: 82%; } } @media (prefers-reduced-motion: reduce) { .hero-barkod .barkod-tarayici { animation: none; top: 45%; } } .ozellik-bolum { max-width: 1080px; margin: 24px auto 0; padding: 0 4px; } .ozellik-bolum > h2 { text-align: center; font-size: 1.5rem; margin: 40px 0 6px; } .ozellik-bolum > .bolum-aciklama { text-align: center; color: var(--metin-soluk); max-width: 640px; margin: 0 auto 24px; } .ozellik-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .ozellik-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ozellik-grid { grid-template-columns: repeat(3, 1fr); } } .ozellik-kart { background: var(--bg-panel); border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); padding: 20px; min-width: 0; } .ozellik-kart .ozellik-ikon { font-size: 1.5rem; line-height: 1; margin-bottom: 10px; } .ozellik-kart h3 { margin: 0 0 6px; font-size: 1.05rem; } .ozellik-kart p { margin: 0; color: var(--metin-soluk); font-size: 0.9rem; } .eklenti-kart { border-color: rgba(245,158,11,0.35); background: linear-gradient(160deg, rgba(245,158,11,0.06), var(--bg-panel) 60%); } .eklenti-rozet { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--uyari); border: 1px solid rgba(245,158,11,0.45); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; } .fiyat-ozellik-listesi { list-style: none; margin: 18px 0; padding: 0; text-align: left; } .fiyat-ozellik-listesi li { padding: 7px 0 7px 26px; position: relative; color: var(--metin-soluk); font-size: 0.92rem; } .fiyat-ozellik-listesi li::before { content: '✓'; position: absolute; left: 2px; color: var(--basari); font-weight: 700; } .cta-bolum { text-align: center; margin: 56px auto 24px; max-width: 720px; padding: 40px 24px; border: 1px solid var(--kenarlik); border-radius: var(--radius-buyuk); background: linear-gradient(160deg, rgba(79,70,229,0.14), var(--bg-panel) 70%); } .cta-bolum h2 { margin: 0 0 10px; } .cta-bolum p { color: var(--metin-soluk); margin: 0 0 22px; } .destek-thread { display: flex; flex-direction: column; gap: 14px; } .destek-mesaj { border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 12px 14px; min-width: 0; } .destek-mesaj-destek { background: var(--basari-arkaplan); border-color: var(--basari); } .destek-mesaj-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .destek-mesaj-tarih { color: var(--metin-soluk); font-size: 0.8rem; margin-left: auto; } .destek-mesaj-govde { word-break: break-word; } .cta-bolum .btn { width: auto; } .wiki-sarici { display: flex; gap: 20px; align-items: flex-start; } .wiki-icindekiler { flex: 0 0 220px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; } .wiki-icindekiler strong { margin-bottom: 6px; } .wiki-icindekiler a { color: var(--metin-soluk); padding: 4px 0; } .wiki-icindekiler a:hover { color: var(--metin); } .wiki-icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .wiki-bolum h2 { margin-top: 0; } .wiki-bolum p { color: var(--metin-soluk); } .wiki-sss { border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 10px 14px; margin-top: 8px; } .wiki-sss summary { cursor: pointer; font-weight: 600; } .wiki-sss p { margin: 10px 0 0; } @media (max-width: 767.98px) { .wiki-sarici { flex-direction: column; } .wiki-icindekiler { position: static; flex: 1 1 auto; width: 100%; } } /* ===================================================================== VARYANTLI ÜRÜN EKLE — mod seçici, özellik seçici, kombinasyon tablosu ===================================================================== */ .segment-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .segment-btn { background: var(--bg-panel-2); border: 1px solid var(--kenarlik); color: var(--metin-soluk); border-radius: 999px; padding: 9px 18px; font-size: 0.88rem; font-weight: 600; cursor: pointer; min-height: 40px; } .segment-btn.aktif { color: white; border-color: transparent; background: var(--gradient); } .ozellik-secici { border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 12px; background: var(--bg-panel-2); } .ozellik-secici label { margin-top: 0; } .ozellik-secici-satir { display: flex; gap: 8px; } .ozellik-secici-satir input { flex: 1; } .toplu-duzenle-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--bg-panel-2); border: 1px solid var(--kenarlik); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; } .toplu-duzenle-bar label { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; font-size: 0.85rem; color: var(--metin); white-space: nowrap; } .toplu-duzenle-bar input[type="checkbox"] { width: auto; min-height: auto; } .toplu-duzenle-bar input, .toplu-duzenle-bar select { width: auto; min-height: 38px; padding: 6px 10px; font-size: 0.85rem; } .varyant-tablosu input[type="checkbox"] { width: auto; min-height: auto; } .varyant-tablosu input, .varyant-tablosu select { min-height: 38px; padding: 6px 10px; font-size: 0.88rem; width: auto; } .varyant-tablosu input.vt-barkod { width: 150px; } .varyant-tablosu input.vt-ozellik { width: 110px; } .varyant-tablosu input[type="number"] { width: 90px; } .varyant-tablosu select.vt-birim { width: 95px; } .varyant-tablosu .vt-barkod-hucre { display: flex; gap: 6px; align-items: center; } .varyant-tablosu .vt-sil-btn { background: none; border: 1px solid var(--kenarlik); color: var(--tehlike); border-radius: var(--radius); min-height: 36px; padding: 6px 10px; cursor: pointer; font-size: 0.85rem; } /* --------------------------- Çerez Onay Banner'ı --------------------------- */ .cerez-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--bg-panel); border-top: 1px solid var(--kenarlik); box-shadow: var(--golge); padding: 16px; } .cerez-banner-metin { flex: 1 1 260px; font-size: 0.85rem; color: var(--metin-soluk); margin: 0; } .cerez-banner-metin a { color: var(--renk-cyan); } .cerez-banner-aksiyonlar { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; } .cerez-banner-reddet { background: none; border: 1px solid var(--kenarlik); color: var(--metin); border-radius: var(--radius); padding: 10px 16px; font-size: 0.85rem; cursor: pointer; min-height: 40px; } .cerez-banner-kabul { background: var(--gradient); color: white; border: none; border-radius: var(--radius); padding: 10px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; } @media (max-width: 480px) { .cerez-banner-aksiyonlar { width: 100%; margin-left: 0; } .cerez-banner-reddet, .cerez-banner-kabul { flex: 1; } }