/* cart.css — her sayfada sağ altta duran yüzen sepet butonu ve açılır sepet paneli (js/cart.js). Sayfa iskeletine dokunmaz: bileşen kendi DOM'unu sonuna ekler, bu yüzden HTML dosyalarında karşılığı olan bir işaretleme YOKTUR. Yön: buton ve panel `inset-inline-end` ile konumlanır — RTL'de kendiliğinden sola geçer (bkz. RTL_CHECKLIST.md). */ /* ---------- Yüzen buton ---------- */ .cart-fab { position: fixed; inset-block-end: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--sand); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease; } .cart-fab:hover, .cart-fab:focus-visible { transform: translateY(-3px); } /* ---------- Dokunmatikte sahte hover ---------- Telefon, parmakla dokunulduğunda `:hover`ı da tetikler ve kullanıcı başka bir yere dokunana kadar o durum ÜZERİNDE KALIR: kart havada asılı kalmış gibi görünür. Emil Kowalski'nin motion standardı bunu açıkça yasaklıyor ("touch fires false hovers on tap") — aynı hatayı yorum bandında da bulmuştuk (bkz. js/reviews.js). Sadece YER DEĞİŞTİRME kapatılıyor; renk/kenarlık değişimi kalıyor, o dokunma anında geri bildirim olarak işe yarıyor. `:focus-visible` ETKİLENMEZ — o klavye odağı ve her cihazda doğru davranış. */ @media (hover: none) { .cart-fab:hover { transform: none; } } /* Dolu sepet dikkat çekmeli — boşken sessiz kalır, doluyken aksan rengine döner. Böylece "sepetimde bir şey var" bilgisi tek bakışta okunur. */ .cart-fab.is-filled { background: var(--accent, var(--brass)); border-color: var(--accent, var(--brass)); color: var(--on-accent, #FBF8F3); } .cart-fab__icon { width: 24px; height: 24px; } /* Boş sepette rozet GİZLİ: aşağıdaki display:grid, tarayıcının [hidden]{display:none} kuralını eziyordu ve rozet sürekli "0" gösteriyordu (kullanıcı geri bildirimi) — sayaç hapındaki hatanın aynısı, aynı ilaç: author katmanında açık bastırma. */ .cart-fab__count[hidden] { display: none; } .cart-fab__count { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 23px; height: 23px; padding-inline: 5px; border-radius: 999px; background: var(--warm); color: #fff; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--paper); /* Rakam RTL'de de LTR okunmalı */ direction: ltr; } /* Sepete ekleme anında kısa bir nabız — panel kapalıyken kullanıcı eklemenin gerçekleştiğini başka türlü göremezdi. */ .cart-fab.is-pulsing { animation: cart-pulse 0.5s ease; } @keyframes cart-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cart-fab.is-pulsing { animation: none; } } /* ---------- Karartma katmanı ---------- */ .cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(44, 42, 38, 0.4); opacity: 0; transition: opacity 0.3s ease; } .cart-root.is-open .cart-scrim { opacity: 1; } .cart-scrim[hidden] { display: none; } /* ---------- Açılır panel ---------- */ .cart-panel { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 80; width: min(420px, 100vw); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; box-shadow: var(--shadow-float); /* RTL'de panel sola yaslandığı için kapalı konum da ters yöne kaymalı; `translate` fiziksel olduğundan yön ayrı ayrı tanımlanıyor. */ transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.3, 0.8, 0.3, 1); } [dir="rtl"] .cart-panel { transform: translateX(-100%); } .cart-root.is-open .cart-panel, [dir="rtl"] .cart-root.is-open .cart-panel { transform: none; } .cart-panel[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { /* Panelin KAYMASI kalkar — yer değiştirme, azaltılmış hareket tercihinde rahatsız eden şeyin ta kendisi. */ .cart-panel { transition: none; } /* Perdenin opaklığı KALIR: panelin nereden geldiğini anlatan tek ipucu bu ve opaklık bir konum değişikliği değil. Kapatınca da sepetin gerçekten kapandığını görünür kılar. */ .cart-scrim { transition: opacity 0.2s ease; } } .cart-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-block-end: 1px solid var(--sand); } .cart-panel__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; } :lang(ar) .cart-panel__title { font-family: var(--font-arabic); } .cart-panel__count { font-size: 0.85rem; color: var(--ink-soft); margin-block-start: 2px; } .cart-panel__close { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border: none; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 50%; transition: background 0.2s ease, color 0.2s ease; } .cart-panel__close svg { width: 20px; height: 20px; } .cart-panel__close:hover, .cart-panel__close:focus-visible { background: var(--stone); color: var(--ink); } .cart-panel__body { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-4); /* iOS'ta panel içi kaydırma sayfayı da sürüklemesin */ overscroll-behavior: contain; } .cart-panel__foot { border-block-start: 1px solid var(--sand); padding: var(--sp-3) var(--sp-4); background: var(--stone); } .cart-panel__foot:empty { display: none; } /* ---------- Satırlar ---------- */ .cart-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-2); } .cart-line + .cart-line { border-block-start: 1px solid var(--sand); } .cart-line__main { min-width: 0; } .cart-line__name { font-family: var(--font-body); font-size: 1rem; font-weight: 600; } :lang(ar) .cart-line__name { font-family: var(--font-arabic); } /* Seçilen varyasyonlar — "Yoğun · Çift Başlıklı". Aynı ürünün farklı seçenekli hâli ayrı satır olduğu için bu satır ürünü ayırt eden asıl bilgidir, gizlenmemeli. */ .cart-line__opts { font-size: 0.82rem; color: var(--ink-soft); margin-block-start: 2px; } /* Boy/porsiyon fiyat farkı — "400 ₺ + 400 ₺". Bilinçli olarak satırın en sessiz öğesi: kullanıcı zaten sağdaki toplamı okuyor, bu sadece toplamın nereden geldiğini soranlar için. Opsiyon satırından bir tık daha küçük ve soluk, kendi başına bir "uyarı" gibi durmasın. */ .cart-line__calc { margin: 2px 0 0; font-size: 0.72rem; color: var(--ink-soft); opacity: 0.75; font-variant-numeric: tabular-nums; } .cart-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .cart-qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--sand); border-radius: 999px; background: var(--paper); } .cart-qty__btn { width: 30px; height: 30px; display: grid; place-items: center; border: none; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; } .cart-qty__btn svg { width: 14px; height: 14px; } .cart-qty__btn:hover, .cart-qty__btn:focus-visible { background: var(--accent, var(--brass)); color: var(--on-accent, #FBF8F3); } .cart-qty__value { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.92rem; } .cart-line__price { font-weight: 700; font-size: 0.92rem; color: var(--accent-deep, var(--brass-deep)); } .cart-line__remove { border: none; background: none; padding: 2px; color: var(--ink-soft); cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease, color 0.2s ease; } .cart-line__remove svg { width: 16px; height: 16px; } .cart-line__remove:hover, .cart-line__remove:focus-visible { opacity: 1; color: var(--warm-deep); } /* ---------- Boş durum ---------- */ .cart-empty { text-align: center; padding: var(--sp-8) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); color: var(--ink-soft); } .cart-empty__icon { width: 42px; height: 42px; color: var(--sand); } /* ---------- Toplam ve eylemler ---------- */ .cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-2); font-size: 0.9rem; color: var(--ink-soft); } /* Rakam sarmasın ve kenardan taşmasın — dar panelde "1.200 ₺"nin ₺'si kesiliyordu. */ .cart-total strong { white-space: nowrap; } .cart-total strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); } .cart-send { display: block; text-align: center; width: 100%; } .cart-clear { display: block; margin: var(--sp-2) auto 0; background: none; border: none; padding: 0 0 2px; cursor: pointer; color: var(--ink-soft); font-family: var(--font-body); font-size: 0.82rem; border-block-end: 1px solid var(--sand); transition: color 0.2s ease, border-color 0.2s ease; } .cart-clear:hover, .cart-clear:focus-visible { color: var(--warm-deep); border-block-end-color: var(--warm); } @media (max-width: 720px) { .cart-fab { width: 52px; height: 52px; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); } .cart-panel { /* Telefonda tam ekran yerine üstten pay bırakıyoruz: arkadaki sayfanın bir kısmı görünür kalınca panel "ayrı bir sayfa" değil, üste açılmış bir katman gibi okunuyor ve kapatma refleksi doğuyor. */ inset-block-start: var(--sp-6); width: 100vw; border-start-start-radius: 12px; border-start-end-radius: 12px; } } /* ETKİNLİK MODU: planlayıcı ya da "menüden ekle" akışı sürerken yüzen sepet TAMAMEN gizli (kullanıcı kararı: "sepet gözükmemeli, sayı hapta artmalı"). Depo çalışmaya devam eder; geri bildirim menüde "Etkinliğe Dön" hapının sayacı, düzenleme etkinlik özetindeki sipariş kutusu. */ body.event-mode .cart-root { display: none; }