/* ========================================================================== Kurye Yönetim Sistemi — Tasarım belirteçleri (design tokens) ve temel katman -------------------------------------------------------------------------- Görsel dil: Trendyol / Yemeksepeti — canlı turuncu, yuvarlak kartlar, büyük dokunmatik hedefler, mobil öncelikli. Tema: açık varsayılan. Koyu tema iki yoldan gelir — 1) İşletim sistemi tercihi (prefers-color-scheme) 2) (kullanıcının açık seçimi; localStorage'da tutulur) Kullanıcının seçimi her zaman sistem tercihini ezer. ========================================================================== */ :root { /* --- Marka --- */ --marka: #FF6000; --marka-koyu: #E85400; --marka-acik: #FF8534; --marka-sis: #FFF1E8; /* çok açık turuncu zemin */ --marka-yazi: #FFFFFF; /* marka zemin üzerindeki yazı */ --vurgu: #FA0050; /* --- Durum renkleri --- */ --basari: #00B96B; --basari-sis: #E4F8EF; --uyari: #FFB020; --uyari-sis: #FFF6E5; --hata: #E5303A; --hata-sis: #FDEAEB; --bilgi: #2F80ED; --bilgi-sis: #EAF2FD; /* --- Yüzeyler --- */ --zemin: #F5F6F8; /* sayfa arka planı */ --yuzey: #FFFFFF; /* kart, panel */ --yuzey-2: #FAFBFC; /* iç içe kart, tablo başlığı */ --yuzey-vurgu: #F0F2F5; /* hover */ --kenar: #E4E7EC; --kenar-koyu: #D0D5DD; /* --- Yazı --- */ --yazi: #16191F; --yazi-2: #545C6B; /* ikincil */ --yazi-3: #8A919E; /* soluk, ipucu */ --yazi-ters: #FFFFFF; /* --- Yuvarlaklık --- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 16px; /* kart standardı */ --r-xl: 22px; --r-tam: 999px; /* --- Gölge --- */ --golge-1: 0 1px 2px rgba(16, 24, 40, .05); --golge-2: 0 2px 8px rgba(16, 24, 40, .08); --golge-3: 0 8px 24px rgba(16, 24, 40, .10); --golge-4: 0 18px 44px rgba(16, 24, 40, .16); --golge-marka: 0 6px 18px rgba(255, 96, 0, .28); /* --- Aralık --- */ --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 24px; --a7: 32px; --a8: 40px; --a9: 56px; /* --- Tipografi --- */ --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; --font-sayi: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --y-xs: 11px; --y-sm: 13px; --y-md: 14px; --y-lg: 16px; --y-xl: 20px; --y-2xl: 26px; --y-3xl: 34px; /* --- Ölçüler --- */ --dokunma: 48px; /* asgari dokunmatik hedef */ --girdi-boy: 46px; --ust-bar: 60px; --yan-menu: 252px; --alt-bar: 64px; /* kurye panelindeki alt sekme çubuğu */ /* --- Hareket --- */ --gecis: 160ms cubic-bezier(.4, 0, .2, 1); --z-yapisik: 100; --z-ortu: 900; --z-modal: 1000; --z-toast: 1100; color-scheme: light; } /* Koyu tema — sistem tercihi. data-tema="acik" varsa devre dışı kalır. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --marka-sis: #3A1F0E; --zemin: #0F1115; --yuzey: #171A21; --yuzey-2: #1E222A; --yuzey-vurgu: #252A33; --kenar: #2A2F39; --kenar-koyu: #3A414D; --yazi: #ECEFF4; --yazi-2: #A5AEBD; --yazi-3: #737D8C; --basari-sis: #0E2A1E; --uyari-sis: #33270B; --hata-sis: #331416; --bilgi-sis: #10233D; --golge-1: 0 1px 2px rgba(0, 0, 0, .40); --golge-2: 0 2px 8px rgba(0, 0, 0, .45); --golge-3: 0 8px 24px rgba(0, 0, 0, .50); --golge-4: 0 18px 44px rgba(0, 0, 0, .60); color-scheme: dark; } } /* Koyu tema — kullanıcının açık seçimi. Sistem tercihini ezer. */ :root[data-tema="koyu"] { --marka-sis: #3A1F0E; --zemin: #0F1115; --yuzey: #171A21; --yuzey-2: #1E222A; --yuzey-vurgu: #252A33; --kenar: #2A2F39; --kenar-koyu: #3A414D; --yazi: #ECEFF4; --yazi-2: #A5AEBD; --yazi-3: #737D8C; --basari-sis: #0E2A1E; --uyari-sis: #33270B; --hata-sis: #331416; --bilgi-sis: #10233D; --golge-1: 0 1px 2px rgba(0, 0, 0, .40); --golge-2: 0 2px 8px rgba(0, 0, 0, .45); --golge-3: 0 8px 24px rgba(0, 0, 0, .50); --golge-4: 0 18px 44px rgba(0, 0, 0, .60); color-scheme: dark; } /* ========================================================================== Sipariş durumu renkleri Durum makinesi: yeni → atandi → kabul → restorana_yolda → restoranda → teslim_alindi → teslimata_gidiyor → adreste → teslim_edildi Yan dallar: iptal, teslim_edilemedi Renkler akış boyunca gri-mavi → mor/mavi → turuncu → yeşil diye ilerler; operasyoncu listeye bakınca siparişin ne kadar ilerlediğini renkten okur. ========================================================================== */ :root { --d-yeni: #64748B; --d-atandi: #7C4DFF; --d-kabul: #2F80ED; --d-restorana_yolda: #00A3C4; --d-restoranda: #0EA5A5; --d-teslim_alindi: #FF8534; --d-teslimata_gidiyor: #FF6000; --d-adreste: #F59E0B; --d-teslim_edildi: #00B96B; --d-iptal: #94A3B8; --d-teslim_edilemedi: #E5303A; } /* ========================================================================== Sıfırlama ve temel ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /** * `hidden` niteliği her zaman kazanmalı. * * Tarayıcının varsayılan `[hidden] { display: none }` kuralı, sınıf seçicili * herhangi bir `display` bildiriminden daha zayıftır. `.bildirim-panel { display:flex }` * gibi bir kural yüzünden JS `hidden = true` yapsa bile öğe ekranda kalıyordu. * Bu kural, `hidden` kullanan tüm bileşenleri (bildirim paneli, açılır menü, * menü örtüsü, gizli formlar) tek noktadan güvenceye alır. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--y-md); line-height: 1.55; color: var(--yazi); background: var(--zemin); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5 { margin: 0 0 var(--a3); font-weight: 700; line-height: 1.25; color: var(--yazi); } h1 { font-size: var(--y-2xl); } h2 { font-size: var(--y-xl); } h3 { font-size: var(--y-lg); } h4 { font-size: var(--y-md); } p { margin: 0 0 var(--a3); } a { color: var(--marka); text-decoration: none; } a:hover { text-decoration: underline; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--kenar); margin: var(--a5) 0; } code, kbd, .sayi { font-family: var(--font-sayi); font-variant-numeric: tabular-nums; } /* Klavye ile gezinen kullanıcı için görünür odak; fare tıklamasında gösterilmez. */ :focus-visible { outline: 3px solid color-mix(in srgb, var(--marka) 45%, transparent); outline-offset: 2px; border-radius: var(--r-xs); } /* Hareket duyarlılığı olan kullanıcılar için animasyonları kes. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Yardımcı sınıflar ========================================================================== */ .gizle { display: none !important; } .gorunmez { visibility: hidden; } /* Ekran okuyucuya görünür, gözle görünmez. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .satir { display: flex; align-items: center; gap: var(--a3); } .satir-ara { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); } .sutun { display: flex; flex-direction: column; gap: var(--a3); } .sar { flex-wrap: wrap; } .buyu { flex: 1 1 auto; min-width: 0; } .orta { text-align: center; } .sag { text-align: right; } .sol { text-align: left; } .k-yazi { color: var(--yazi); } .k-yazi2 { color: var(--yazi-2); } .k-yazi3 { color: var(--yazi-3); } .k-marka { color: var(--marka); } .k-basari { color: var(--basari); } .k-uyari { color: var(--uyari); } .k-hata { color: var(--hata); } .k-bilgi { color: var(--bilgi); } .y-xs { font-size: var(--y-xs); } .y-sm { font-size: var(--y-sm); } .y-lg { font-size: var(--y-lg); } .y-xl { font-size: var(--y-xl); } .kalin { font-weight: 700; } .yari-kalin { font-weight: 600; } .tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iki-satir { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bosluk-yok { margin: 0 !important; } .ust-1 { margin-top: var(--a1); } .ust-2 { margin-top: var(--a2); } .ust-3 { margin-top: var(--a3); } .ust-4 { margin-top: var(--a4); } .ust-5 { margin-top: var(--a5); } .ust-6 { margin-top: var(--a6); } .alt-2 { margin-bottom: var(--a2); } .alt-3 { margin-bottom: var(--a3); } .alt-4 { margin-bottom: var(--a4); } .alt-6 { margin-bottom: var(--a6); } /* Sadece mobilde / sadece masaüstünde göster. */ @media (max-width: 767px) { .mobil-gizle { display: none !important; } } @media (min-width: 768px) { .masaustu-gizle { display: none !important; } } /* Yazdırma: gezinme ve eylemler kâğıda basılmaz (PDF çıktısı bu yolla alınır). */ @media print { body { background: #fff; color: #000; } .ust-bar, .yan-menu, .alt-bar, .yazdirma-gizle, .buton, .toast-kutu { display: none !important; } .kart { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } a { color: #000; text-decoration: none; } }