/* * Tasarım dili — iki mod, tek iskelet. * * kagit (varsayılan) Basılı menü disiplini. Kâğıt grisi, nar kırmızısı. * aksam Loş salon. Espresso zemin, kehribar vurgu. * * Mod işletmenin seçimidir, müşterinin telefon ayarı değil — basılı bir menü * de okuyanın tercihine göre renk değiştirmez. Bu yüzden prefers-color-scheme * kullanılmaz; sunucu tarafında yazılır. * * Yazı ailesi iki modda da aynı (Fraunces + Karla): tutarlılık ve hız. * Akşam modunda serif ağırlığı düşer — koyu zeminde kalın serif kabarır. * * Satırlar kutuyla değil saç teli çizgiyle ayrılır; her ürünü ayrı kutuya * koymak menüyü kalabalık gösteriyor. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Karla:wght@400;500;600;700&display=swap'); /* ---------- kagit: varsayılan ---------- */ :root, :root[data-tema="kagit"] { color-scheme: light; --kagit: #f2f0ea; --yuzey: #f8f7f3; --murekkep: #23201b; --soluk: #7d766a; --cizgi: #ddd8cc; --cizgi-koyu: #c9c2b2; --vurgu: #8e2a3b; /* nar kırmızısı, ölçülü kullanılır */ --vurgu-acik: #f6ecee; --vurgu-metin:#ffffff; --iyi: #2f6b41; --iyi-acik: #e9f1eb; --kotu: #9c2a2a; --ad-agirlik: 600; --fiyat-agirlik: 600; --gorsel-yuvarlak: 4px; } /* ---------- aksam ---------- */ :root[data-tema="aksam"] { color-scheme: dark; --kagit: #16120f; --yuzey: #1e1915; --murekkep: #ede6dc; --soluk: #9c9086; --cizgi: #2e2721; --cizgi-koyu: #453b32; --vurgu: #d89b4a; /* kehribar */ --vurgu-acik: #2a2119; --vurgu-metin:#16120f; --iyi: #7fb891; --iyi-acik: #16241a; --kotu: #e08a8a; /* Koyu zeminde kalın serif kabarıyor; ağırlık düşürülür. */ --ad-agirlik: 500; --fiyat-agirlik: 400; --gorsel-yuvarlak: 9px; } :root { --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:24px; --b6:32px; --b7:48px; --b8:64px; --yuvarlak: 8px; --yuvarlak-s: 4px; --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* * `hidden` özniteliği HER ZAMAN gizlesin. * * Tarayıcının kendi kuralı `[hidden] { display: none }` çok zayıf: sınıfa * `display: grid` veren tek bir satır onu yener ve eleman gizlenmez. * Sahada görüldü: sistem ekranında yetkisi olmayan kullanıcıya sıfırlarla * dolu özet şeridi görünüyordu. Bileşen bileşen yama yerine tek kural. */ [hidden] { display: none !important; } body { margin: 0; background: var(--kagit); color: var(--murekkep); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } .sayfa { max-width: 540px; margin-inline: auto; padding: var(--b6) var(--b5) calc(var(--b7) + env(safe-area-inset-bottom)); } .dar { max-width: 400px; } h1 { font: 600 28px/1.2 var(--serif); margin: 0 0 var(--b2); letter-spacing: -.01em; text-wrap: balance; } h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 var(--b3); } p { margin: 0 0 var(--b4); } .giris { color: var(--soluk); font-size: 15px; margin: 0 0 var(--b6); } .soluk { color: var(--soluk); } .kucuk { font-size: 13.5px; } /* --- form --- */ .alan { margin-bottom: var(--b5); } label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: var(--b2); } label .yardim { display: block; font-weight: 400; color: var(--soluk); font-size: 13.5px; line-height: 1.5; margin-top: 3px; } input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { width: 100%; padding: 13px var(--b4); font: 400 16px/1.4 var(--sans); /* iOS 16px altında yakınlaştırır */ color: var(--murekkep); background: var(--yuzey); border: 1px solid var(--cizgi-koyu); border-radius: var(--yuvarlak-s); transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); } input::placeholder { color: var(--soluk); opacity: .65; } /* --- düğmeler --- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--b2); padding: 14px var(--b5); font: 600 16px/1.2 var(--sans); border: 1px solid var(--vurgu); border-radius: var(--yuvarlak-s); background: var(--vurgu); color: var(--vurgu-metin); text-decoration: none; cursor: pointer; } .dugme:disabled { opacity: .45; cursor: default; } .dugme.genis { width: 100%; } .dugme.sade { background: transparent; color: var(--murekkep); border-color: var(--cizgi-koyu); } .dugme.metin { background: transparent; color: var(--vurgu); border-color: transparent; padding-inline: 0; } /* --- menü satırı: görsel | ad ....... fiyat --- */ .liste { list-style: none; margin: 0; padding: 0; } .satir { display: grid; grid-template-columns: 62px 1fr auto; gap: var(--b4); align-items: start; padding: var(--b5) 0; border-bottom: 1px solid var(--cizgi); } .satir:last-child { border-bottom: 0; } /* Görsel yuvası satır sınıfından BAĞIMSIZ. Menü satırı (.satir), yönetim satırı (.u-satir) ve kategori satırı (.kat-satir) aynı yuvayı kullanıyor; kuralı satıra bağlamak her yeni satır türünde sessizce bozuluyordu. */ .gorsel { width: 62px; height: 62px; border-radius: var(--gorsel-yuvarlak); object-fit: cover; background: var(--cizgi); display: block; flex: 0 0 auto; } .gorsel.yok { display: grid; place-items: center; background: transparent; border: 1px dashed var(--cizgi-koyu); color: var(--soluk); font-size: 11px; text-align: center; line-height: 1.25; padding: 2px; } .gorsel.iri { width: 76px; height: 76px; } .satir .ad { font: var(--ad-agirlik) 17px/1.3 var(--serif); margin: 0 0 3px; } /* Açıklama her satır türünde aynı; satıra bağlanmaz. */ .aciklama { font-size: 13.5px; color: var(--soluk); margin: 0; } .satir .fiyat { font: var(--fiyat-agirlik) 16.5px/1.4 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 3B düğmesi kendi satırında: ad ve fiyatla yarışmaz */ .satir .uc-boyut { grid-column: 2 / -1; margin-top: var(--b3); } .uc-boyut a, .uc-boyut button { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.2 var(--sans); letter-spacing: .015em; color: var(--vurgu); background: transparent; text-decoration: none; border: 1px solid var(--vurgu); border-radius: 3px; padding: 7px 13px; cursor: pointer; } /* Akşamda çerçeve yerine dolu düğme: koyu zeminde ince çizgi kayboluyor */ :root[data-tema="aksam"] .uc-boyut a, :root[data-tema="aksam"] .uc-boyut button { background: var(--vurgu); color: var(--vurgu-metin); border-color: var(--vurgu); border-radius: 999px; padding: 8px 15px; } .uc-boyut svg { width: 14px; height: 14px; fill: currentColor; } /* --- durum rozeti (yönetim) --- */ .rozet { display: inline-block; font: 600 12px/1.4 var(--sans); padding: 3px 8px; border-radius: 3px; letter-spacing: .02em; } .rozet.bekliyor { background: var(--vurgu-acik); color: var(--vurgu); } .rozet.hazir { background: var(--iyi-acik); color: var(--iyi); } .rozet.yok { background: transparent; color: var(--soluk); border: 1px solid var(--cizgi-koyu); } /* --- kart --- */ .kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: var(--b5); } /* --- bildirim --- */ .bildirim { padding: var(--b3) var(--b4); border-radius: var(--yuvarlak-s); font-size: 14.5px; margin-bottom: var(--b4); } .bildirim.hata { background: var(--vurgu-acik); color: var(--kotu); } .bildirim.iyi { background: var(--iyi-acik); color: var(--iyi); } .bildirim[hidden] { display: none; } /* --- boş durum --- */ .bos { text-align: center; padding: var(--b7) var(--b4); color: var(--soluk); } .bos h2 { color: var(--murekkep); } /* --- üst çubuk --- */ .ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b5); margin-bottom: var(--b6); padding-bottom: var(--b3); border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; } .ust .marka { font: 600 16px/1.2 var(--serif); } /* * Gezinti: bağlantılar arası boşluk cömert ve tıklanabilirlik belli. * Önceki sürümde nokta ile ayrılmış soluk metinlerdi; tıklanacak bir şey * olduğu anlaşılmıyordu. Şimdi alt çizgi yuvası hep ayrılmış (saydam), * etkin olan vurgu rengiyle doluyor -- üzerine gelince de beliriyor. */ .gezinti { display: flex; align-items: center; gap: var(--b5); } .gezinti a { color: var(--soluk); font: 600 14.5px/1.2 var(--sans); text-decoration: none; padding: 6px 1px 7px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .gezinti a:hover { color: var(--murekkep); border-bottom-color: var(--cizgi-koyu); } .gezinti a.etkin { color: var(--murekkep); border-bottom-color: var(--vurgu); } .gezinti a.cikis { color: var(--soluk); font-weight: 400; } .gezinti a.cikis:hover { color: var(--kotu); border-bottom-color: transparent; } @media (max-width: 400px) { .gezinti { gap: var(--b4); } .gezinti a { font-size: 13.5px; } } /* --- menü başlığı (müşteri) --- */ .menu-bas { text-align: center; padding: var(--b6) 0 var(--b5); border-bottom: 1px solid var(--cizgi); margin-bottom: var(--b2); } .menu-bas h1 { font-size: 30px; margin: 0; } /* --- mod seçici (yönetim) --- */ .mod-secim { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); } .mod-secim label { display: block; margin: 0; cursor: pointer; border: 1px solid var(--cizgi-koyu); border-radius: var(--yuvarlak); padding: var(--b4); text-align: center; font-weight: 600; } .mod-secim input { position: absolute; opacity: 0; pointer-events: none; } .mod-secim input:checked + .ornek { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); } .mod-secim .ornek { border: 1px solid var(--cizgi-koyu); border-radius: var(--yuvarlak); padding: var(--b4); text-align: center; transition: border-color .15s; } .mod-secim .ornek .ad-ornek { font: 600 17px/1.3 var(--serif); } .mod-secim .ornek .fiyat-ornek { font: 600 15px/1.4 var(--serif); font-variant-numeric: tabular-nums; } .mod-secim .ornek.kagit { background: #f2f0ea; color: #23201b; border-color: #ddd8cc; } .mod-secim .ornek.kagit .fiyat-ornek { color: #8e2a3b; } .mod-secim .ornek.aksam { background: #16120f; color: #ede6dc; border-color: #2e2721; } .mod-secim .ornek.aksam .fiyat-ornek { color: #d89b4a; } .mod-secim .ad-mod { display: block; margin-top: var(--b2); font: 600 14px/1.3 var(--sans); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }