/* ═══════════════════════════════════════════════════════════ Hızlı Satış POS — Premium Design System v3 Light/Dark theme via [data-theme="dark"] on ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0b0f1a; --bg-mesh: radial-gradient(ellipse 80% 60% at 10% -10%, rgba(99,102,241,.12), transparent 50%), radial-gradient(ellipse 60% 50% at 90% 0%, rgba(168,85,247,.08), transparent 50%), #0b0f1a; --surface: #131825; --surface-2: #1a2035; --text: #f1f5f9; --muted: #94a3b8; --border: rgba(148,163,184,.12); --shadow-card: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.35); } [data-theme="dark"] .topbar { background: rgba(19,24,37,.85); } [data-theme="dark"] .card { background: var(--surface); } [data-theme="dark"] .card-header { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); } [data-theme="dark"] .table th { background: rgba(255,255,255,.04); } [data-theme="dark"] .filter-bar { background: var(--surface); } [data-theme="dark"] .form-control, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface-2); color: var(--text); border-color: var(--border); } .theme-toggle { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: .2s; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } /* ── Dashboard Mega Banner ── */ .dashboard-banner { position: relative; border-radius: 24px; padding: 2rem 2.25rem; margin-bottom: 1.75rem; overflow: hidden; background: linear-gradient(135deg, #1e1b4b 0%, #312e81 35%, #581c87 70%, #4c1d95 100%); color: #fff; box-shadow: 0 24px 60px rgba(49,46,129,.4), inset 0 1px 0 rgba(255,255,255,.12); min-height: 200px; } .dashboard-banner__mesh { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 50%, rgba(167,139,250,.35) 0%, transparent 45%), radial-gradient(circle at 85% 20%, rgba(96,165,250,.25) 0%, transparent 40%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .dashboard-banner__illustration { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); width: 180px; height: 180px; opacity: .9; pointer-events: none; } @media (max-width: 900px) { .dashboard-banner__illustration { display: none; } } .dashboard-banner__inner { position: relative; z-index: 2; max-width: 62%; } @media (max-width: 900px) { .dashboard-banner__inner { max-width: 100%; } } .dashboard-banner__badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .85rem; backdrop-filter: blur(8px); } .dashboard-banner__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-bottom: .5rem; } .dashboard-banner__desc { color: rgba(255,255,255,.75); font-size: .95rem; max-width: 480px; line-height: 1.6; margin-bottom: 1.25rem; } .dashboard-banner__chips { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.25rem; } .glass-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; backdrop-filter: blur(12px); font-size: .82rem; } .glass-chip svg, .glass-chip i { width: 16px; height: 16px; opacity: .9; } .glass-chip strong { font-weight: 800; font-size: .95rem; display: block; line-height: 1.2; } .glass-chip span { opacity: .8; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .glass-chip--warn { background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.35); } .glass-chip--ok { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.35); } .dashboard-banner__actions { display: flex; gap: .65rem; flex-wrap: wrap; } /* ── Module Hero ── */ .module-hero { position: relative; border-radius: 22px; padding: 1.75rem 2rem 1.25rem; margin-bottom: 1.5rem; overflow: hidden; color: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.15); } .module-hero--indigo { background: linear-gradient(135deg, #312e81, #4338ca, #6366f1); } .module-hero--violet { background: linear-gradient(135deg, #4c1d95, #6d28d9, #8b5cf6); } .module-hero--emerald { background: linear-gradient(135deg, #064e3b, #047857, #10b981); } .module-hero--amber { background: linear-gradient(135deg, #78350f, #b45309, #f59e0b); } .module-hero--rose { background: linear-gradient(135deg, #881337, #be123c, #f43f5e); } .module-hero--cyan { background: linear-gradient(135deg, #164e63, #0e7490, #06b6d4); } .module-hero--slate { background: linear-gradient(135deg, #0f172a, #1e293b, #334155); } .module-hero__pattern { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .module-hero__glow { position: absolute; top: -40%; right: -5%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%); pointer-events: none; } .module-hero__inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.25rem; } .module-hero__content { display: flex; gap: 1.15rem; align-items: flex-start; } .module-hero__icon-wrap { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.15); } .module-hero__icon-wrap svg { width: 26px; height: 26px; } .module-hero__title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } .module-hero__subtitle { color: rgba(255,255,255,.8); font-size: .92rem; margin-top: .35rem; max-width: 520px; line-height: 1.55; } .module-hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .module-hero__stats { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.15); } .module-hero__stat { min-width: 140px; } .module-hero__stat-icon { width: 18px; height: 18px; opacity: .85; } /* ── Empty State ── */ .empty-state { text-align: center; padding: 3rem 1.5rem; } .empty-state__illustration { position: relative; width: 120px; height: 120px; margin: 0 auto 1.5rem; } .empty-state__circle { position: absolute; border-radius: 50%; border: 2px dashed var(--border); } .empty-state__circle--1 { inset: 0; animation: spinSlow 20s linear infinite; } .empty-state__circle--2 { inset: 15px; animation: spinSlow 15s linear infinite reverse; opacity: .5; } @keyframes spinSlow { to { transform: rotate(360deg); } } .empty-state__icon-wrap { position: absolute; inset: 25px; border-radius: 20px; background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08)); border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); box-shadow: var(--shadow-card); } .empty-state__icon-wrap svg { width: 32px; height: 32px; } .empty-state h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; } .empty-state p { color: var(--muted); font-size: .9rem; max-width: 360px; margin: 0 auto 1rem; } .empty-state__actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } /* ── Glass Card enhancement ── */ .glass-card { background: rgba(255,255,255,.72); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } [data-theme="dark"] .glass-card { background: rgba(19,24,37,.8); } /* ── POS Premium ── */ .pos-banner { position: relative; padding: 1.15rem 1.5rem; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); border-bottom: 1px solid rgba(129,140,248,.2); overflow: hidden; } .pos-banner__mesh { position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(99,102,241,.25), transparent 50%); pointer-events: none; } .pos-banner__row { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .pos-banner__brand { display: flex; align-items: center; gap: .85rem; color: #fff; } .pos-banner__logo { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #6366f1, #a855f7); display: grid; place-items: center; font-weight: 800; font-size: .85rem; box-shadow: 0 8px 24px rgba(99,102,241,.4); } .pos-banner__brand strong { display: block; font-size: 1.05rem; letter-spacing: -.02em; } .pos-banner__brand small { color: rgba(255,255,255,.6); font-size: .78rem; } .pos-banner__meta { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; } .pos-toolbar { display: flex; gap: .75rem; align-items: center; padding: .85rem 1.25rem; background: rgba(15,23,42,.95); border-bottom: 1px solid rgba(51,65,85,.8); flex-wrap: wrap; } .pos-search-wrap { flex: 1; min-width: 240px; position: relative; } .pos-search-wrap .pos-search { width: 100%; } /* Payment type buttons */ .pay-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .85rem; } .pay-type-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .5rem; border-radius: 14px; border: 2px solid transparent; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .78rem; transition: all .2s cubic-bezier(.4,0,.2,1); background: #f8fafc; color: #475569; } .pay-type-btn svg { width: 22px; height: 22px; } .pay-type-btn--cash { background: linear-gradient(145deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #a7f3d0; } .pay-type-btn--card { background: linear-gradient(145deg, #eff6ff, #dbeafe); color: #1e40af; border-color: #93c5fd; } .pay-type-btn--credit { background: linear-gradient(145deg, #fff7ed, #ffedd5); color: #9a3412; border-color: #fdba74; } .pay-type-btn.active { transform: scale(1.04); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .pay-type-btn--cash.active { border-color: #10b981; box-shadow: 0 8px 24px rgba(16,185,129,.3); } .pay-type-btn--card.active { border-color: #3b82f6; box-shadow: 0 8px 24px rgba(59,130,246,.3); } .pay-type-btn--credit.active { border-color: #f97316; box-shadow: 0 8px 24px rgba(249,115,22,.3); } /* POS cart premium */ .pos-cart-panel { background: linear-gradient(180deg, #fafbff 0%, #fff 120px); } .pos-cart-header { padding: 1rem 1.25rem; background: linear-gradient(135deg, #1e1b4b, #4338ca); color: #fff; } .pos-cart-header h3 { font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .pos-cart-header p { font-size: .78rem; opacity: .75; margin-top: 2px; } .pos-cart-total-display { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin-top: .35rem; } .btn-complete-sale { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none; border-radius: 16px; padding: 1rem; font-size: 1.05rem; font-weight: 800; width: 100%; cursor: pointer; box-shadow: 0 8px 28px rgba(16,185,129,.4); transition: .2s; font-family: inherit; letter-spacing: -.01em; } .btn-complete-sale:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(16,185,129,.5); filter: brightness(1.05); } .btn-suspend-sale { background: rgba(99,102,241,.1); color: #4f46e5; border: 1.5px solid #c7d2fe; border-radius: 14px; padding: .75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: .2s; } .btn-suspend-sale:hover { background: #eef2ff; } /* Visual product cards POS */ .pos-grid--groups { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .pos-grid--products { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); } .group-card .card-label, .product-card .card-label { background: linear-gradient(180deg, transparent, rgba(0,0,0,.4)); position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem .85rem .75rem !important; } .group-card, .product-card { position: relative; } .product-card .price { display: inline-block; margin-top: .35rem; padding: .2rem .55rem; background: rgba(99,102,241,.25); border-radius: 8px; backdrop-filter: blur(4px); } @media (max-width: 768px) { .module-hero { padding: 1.35rem 1.25rem 1rem; } .module-hero__title { font-size: 1.25rem; } .module-hero__content { flex-direction: column; gap: .75rem; } .pay-type-grid { grid-template-columns: 1fr; } }