/* ============================================================ ORTAK TASARIM SİSTEMİ — 3 SEÇİLEBİLİR TEMA ile tema değiştirilir. Tüm sayfalar aynı değişken adlarını kullandığı için tema değişimi otomatik olarak her ekrana yansır. Tipografi: Fraunces (karakterli başlık) + Plus Jakarta Sans (gövde). ============================================================ */ /* TEMA 1 — "Sıcak & Samimi" (varsayılan): kahve/karamel/fıstık yeşili */ :root, [data-theme="sicak"] { --kazan: #2b1810; --kazan-2: #3d241a; --krema: #fbf3e7; --krema-2: #f3e6d3; --karamel: #d9a441; --karamel-koyu: #b9832e; --fistik: #7f9457; --fistik-koyu: #616f40; --visne: #c1443c; --visne-koyu: #9c332c; --mürekkep: #241a14; --ink-soft: #6b5c4f; --cizgi: #e6d7c0; } /* TEMA 2 — "Modern & Koyu Lacivert": teknoloji/kurumsal, her sektöre nötr */ [data-theme="modern"] { --kazan: #0f172a; --kazan-2: #1e293b; --krema: #f8fafc; --krema-2: #eef2f7; --karamel: #0ea5e9; --karamel-koyu: #0284c7; --fistik: #10b981; --fistik-koyu: #059669; --visne: #ef4444; --visne-koyu: #dc2626; --mürekkep: #0f172a; --ink-soft: #64748b; --cizgi: #e2e8f0; } /* TEMA 3 — "Sade & Şık": monokrom + amber vurgu, minimalist */ [data-theme="sade"] { --kazan: #18181b; --kazan-2: #27272a; --krema: #fafafa; --krema-2: #f0f0f0; --karamel: #f59e0b; --karamel-koyu: #d97706; --fistik: #22c55e; --fistik-koyu: #16a34a; --visne: #ef4444; --visne-koyu: #dc2626; --mürekkep: #18181b; --ink-soft: #71717a; --cizgi: #e4e4e7; } .font-display { font-family: 'Fraunces', 'Georgia', serif; font-optical-sizing: auto; } .font-body { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; } body { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* İmza öğesi: "erimiş damla" ayırıcı — kazan zemininden krem zemine geçişte kullanılır */ .drip-divider { position: relative; height: 22px; background: var(--krema); } .drip-divider svg { display: block; width: 100%; height: 100%; } /* İmza öğesi: fiş/makbuz kenarı — kasa ve sipariş özetlerinde */ .receipt-edge { -webkit-mask-image: radial-gradient(circle at 8px 0, transparent 8px, black 8.5px); -webkit-mask-size: 16px 16px; -webkit-mask-repeat: repeat-x; -webkit-mask-position: bottom; mask-image: radial-gradient(circle at 8px 0, transparent 8px, black 8.5px); mask-size: 16px 16px; mask-repeat: repeat-x; mask-position: bottom; padding-bottom: 14px; } .view-hidden { display: none; } .view-active { animation: fadeIn 0.25s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pop-in { animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .ring-pulse { animation: ringPulse 1.6s infinite; } @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(193,68,60,0.55);} 70% { box-shadow: 0 0 0 14px rgba(193,68,60,0);} 100% { box-shadow: 0 0 0 0 rgba(193,68,60,0);} } .bottom-sheet-enter { transform: translateY(100%); } .bottom-sheet-active { transform: translateY(0); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); } /* Yaşlı/az deneyimli kullanıcılar için: dokunma hedeflerini büyük ve net tut */ button, .tap-target { min-height: 44px; } ::selection { background: var(--karamel); color: var(--kazan); }