/* ===================================================================== LikedWin — Ana Site Tasarım Sistemi Bu dosya tüm ana site sayfalarının (anasayfa + iç sayfalar) ortak temelidir. Renk/font/boşluk değişkenleri buradan yönetilir. ===================================================================== */ /* ---------- Tasarım Değişkenleri ---------- */ /* TEMA: renkler DAİMA aşağıdaki değişkenlerden okunur. Bileşen CSS'lerinde sabit renk (#fff, #f7f8fb ...) YAZMAYIN — koyu temada o kural sabit kalır. Koyu tema ile açılır (bkz. assets/js/theme.js); nitelik yoksa cihaz tercihi (prefers-color-scheme) geçerlidir. */ :root { color-scheme: light; /* Marka renkleri */ --brand: #2544d8; /* ana mavi (butonlar, vurgular) */ --brand-dark: #1c34a8; /* hover */ --brand-soft: #eef1fe; /* açık mavi zemin */ --brand-soft-2: #e2e8fb; /* açık mavi zemin (hover) */ --brand-line: #dfe4fb; /* açık mavi kenarlık */ --brand-line-2: #cdd6f7; /* açık mavi kenarlık (hover) */ --ink: #201e1f; /* logo & başlık siyahı */ --amber: #f5b301; /* "100 TL" vurgu sarısı */ /* Durum renkleri */ --success: #2fbd8e; /* yeşil aksan (ör. "veya Kayıt Ol") */ --danger: #ef4444; /* kırmızı (bildirim noktası) */ /* Durum rozetleri (yeşil/kırmızı/sarı/pembe çipler) Koyu temada zemin ŞEFFAF tint'e, yazı parlak tona döner — açık yeşil bir çip koyu kartın üstünde göz aldığı için. */ --ok-fg: #17916a; --ok-bg: #e4f7ef; --ok-line: #cdeee1; --err-fg: #b91c1c; --err-bg: #fef2f2; --err-line: #fbd5d5; --warn-fg: #a9760a; --warn-bg: #fff8e9; --warn-line: #f3e0b5; --pink-fg: #d6336c; --pink-bg: #fdeaf3; --hl-yellow-bg: linear-gradient(90deg, rgba(253, 224, 71, 0) 0%, rgba(253, 224, 71, 0) 30%, #fde68a 58%, #facc15 100%); --hl-yellow-fg: inherit; --hl-yellow-hover: #facc15; --pay-plate: transparent; --pay-pad: 0; --cat-fg: inherit; --solid-dark: var(--ink); /* beyaz yazılı koyu rozet zemini */ /* Platform gradyanı gibi TEMADAN BAĞIMSIZ açık zeminlerin üstündeki yazı. Oralarda --ink KULLANMAYIN: koyu temada beyaza döner ve Snapchat/Kick gibi açık yeşil/sarı zeminlerde yazı görünmez olur. Bu token bilerek koyu blokta yeniden tanımlanmaz — her temada aynı koyu kalır. */ --ink-on-light: #201e1f; --brand-tile: var(--bg-soft); /* marka ikonu karosu */ /* Ana çağrı butonu (hero "Ücretsiz Başlayın"). Koyu temada --brand açıldığı için beyaz yazıyla soluk kalıyor; bu yüzden ayrı token. */ --cta-bg: var(--brand); --cta-bg-hover: var(--brand-dark); --cta-fg: #ffffff; --cta-shadow: 0 12px 30px -10px rgba(37, 68, 216, .5); /* Metin */ --text: #1f2937; --muted: #6b7280; --muted-2: #9aa1ad; /* Zemin & çizgi --bg : sayfa zemini --bg-soft : dönüşümlü bölüm zemini --surface : KART zemini (açık temada beyaz; koyu temada bölümden BİR TON AÇIK) --surface-2 : kart İÇİNDEKİ gömülü kutu (input, mini istatistik ...) Sabit #fff yerine daima --surface kullanın; yoksa koyu temada kart beyaz kalır. */ --bg: #ffffff; --bg-soft: #f7f8fb; --surface: #ffffff; --surface-2: #f7f8fb; --line: #e9ebf1; --line-strong: #dfe2ea; /* Koyu temada görsellerin/logoların yumuşatılması için (açıkta etkisiz) */ --media-dim: none; --logo-filter: none; /* Ölçü & efekt */ --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 4px 14px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); --ease: .2s cubic-bezier(.4, 0, .2, 1); /* Düzen */ --container: 1200px; --header-h: 64px; --topbar-h: 44px; /* promo bar yüksekliği; JS gerçek değerle günceller */ } /* ===================================================================== KOYU TEMA --------------------------------------------------------------------- İki yoldan açılır: 1) → kullanıcının açık tercihi 2) cihaz gece modundaysa VE kullanıcı bir tercih kaydetmemişse ( üzerinde data-theme YOKKEN prefers-color-scheme geçerli) theme.js sayfa çizilmeden ÖNCE data-theme'i yazar (yanıp sönme olmaz). Renk skalası NÖTR gri, taban #111315: --bg #111315 → --bg-soft #171a1d → --surface #1d2125 → --surface-2 #252a2f Kart daima bölümden bir ton AÇIK olmalı, yoksa koyu zeminde kaybolur. Marka mavisi koyu zeminde okunmadığı için açılıyor (#2544d8 → #7b8dff). ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --brand: #7b8dff; --brand-dark: #9aa8ff; /* koyuda "hover" = daha PARLAK */ --brand-soft: #1b2238; --brand-soft-2: #242c46; --brand-line: #2e3752; --brand-line-2: #46527c; --ink: #f5f7f8; --amber: #ffc633; --success: #3ad6a2; --danger: #ff6b6b; --ok-fg: #4ade9f; --ok-bg: rgba(47, 189, 142, .15); --ok-line: rgba(47, 189, 142, .34); --err-fg: #ff8a8a; --err-bg: rgba(239, 68, 68, .15); --err-line: rgba(239, 68, 68, .34); --warn-fg: #f5c451; --warn-bg: rgba(245, 179, 1, .15); --warn-line: rgba(245, 179, 1, .34); --pink-fg: #ff86b3; --pink-bg: rgba(214, 51, 108, .18); --hl-yellow-bg: linear-gradient(90deg, rgba(255, 198, 51, 0) 0%, rgba(255, 198, 51, 0) 30%, rgba(255, 198, 51, .16) 58%, rgba(255, 198, 51, .26) 100%); --hl-yellow-fg: var(--amber); /* koyuda sarı YAZI + şeffaf sarı tint zemin */ --hl-yellow-hover: rgba(255, 198, 51, .26); --pay-plate: #ffffff; --pay-pad: 5px 9px; /* marka logoları koyuda kaybolmasın */ --cat-fg: var(--text); /* koyu markalar (X, TikTok) koyu zeminde kaybolmasın */ --solid-dark: #3b4249; /* koyuda --ink beyazlaşıyor; rozet zemini nötr koyu kalmalı */ --brand-tile: #e8eaed; /* koyu markalar (TikTok, X, Threads) kaybolmasın */ --cta-bg: linear-gradient(135deg, #3f5cff 0%, #7a4dff 100%); --cta-bg-hover: linear-gradient(135deg, #5570ff 0%, #8f66ff 100%); --cta-fg: #ffffff; --cta-shadow: 0 14px 34px -12px rgba(86, 96, 255, .7); --text: #e3e6e9; --muted: #a2a8ae; --muted-2: #7e858c; --bg: #111315; --bg-soft: #171a1d; --surface: #1d2125; --surface-2: #252a2f; --line: #2c3237; --line-strong: #3b4249; --media-dim: brightness(.9) contrast(1.03); --logo-filter: brightness(0) invert(1); /* Koyu zeminde ince gölge kaybolur; derinlik için sertleştiriyoruz */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6); } /* Kullanıcı tercih KAYDETMEDİYSE cihaz ayarını izle. (Aynı değerler; data-theme yazılınca yukarıdaki blok devralır.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --brand: #7b8dff; --brand-dark: #9aa8ff; --brand-soft: #1b2238; --brand-soft-2: #242c46; --brand-line: #2e3752; --brand-line-2: #46527c; --ink: #f5f7f8; --amber: #ffc633; --success: #3ad6a2; --danger: #ff6b6b; --ok-fg: #4ade9f; --ok-bg: rgba(47, 189, 142, .15); --ok-line: rgba(47, 189, 142, .34); --err-fg: #ff8a8a; --err-bg: rgba(239, 68, 68, .15); --err-line: rgba(239, 68, 68, .34); --warn-fg: #f5c451; --warn-bg: rgba(245, 179, 1, .15); --warn-line: rgba(245, 179, 1, .34); --pink-fg: #ff86b3; --pink-bg: rgba(214, 51, 108, .18); --hl-yellow-bg: linear-gradient(90deg, rgba(255, 198, 51, 0) 0%, rgba(255, 198, 51, 0) 30%, rgba(255, 198, 51, .16) 58%, rgba(255, 198, 51, .26) 100%); --hl-yellow-fg: var(--amber); /* koyuda sarı YAZI + şeffaf sarı tint zemin */ --hl-yellow-hover: rgba(255, 198, 51, .26); --pay-plate: #ffffff; --pay-pad: 5px 9px; --cat-fg: var(--text); --solid-dark: #3b4249; --brand-tile: #e8eaed; --cta-bg: linear-gradient(135deg, #3f5cff 0%, #7a4dff 100%); --cta-bg-hover: linear-gradient(135deg, #5570ff 0%, #8f66ff 100%); --cta-fg: #ffffff; --cta-shadow: 0 14px 34px -12px rgba(86, 96, 255, .7); --text: #e3e6e9; --muted: #a2a8ae; --muted-2: #7e858c; --bg: #111315; --bg-soft: #171a1d; --surface: #1d2125; --surface-2: #252a2f; --line: #2c3237; --line-strong: #3b4249; --media-dim: brightness(.9) contrast(1.03); --logo-filter: brightness(0) invert(1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6); } } /* Tema geçişi: renk değişimi ani olmasın (ilk boyamada kapalı — bkz. theme.js) */ :root.lw-theme-anim, :root.lw-theme-anim body, :root.lw-theme-anim .site-header, :root.lw-theme-anim .topbar, :root.lw-theme-anim .headbar { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } /* ---------- Minimal Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } /* LikedWin marka işareti — metin içinde currentColor ile bulunduğu yerin rengini alır */ .lw-mark { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.14em; fill: currentColor; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ===================================================================== HEADER ===================================================================== */ .site-header { position: sticky; top: calc(-1 * var(--topbar-h)); /* promo bar kadar yukarı kayar → topbar sayfayla gider, ana bar sabitlenir */ z-index: 100; background: var(--bg); transition: background .3s ease, box-shadow .3s ease; } /* ---------- 1) Üst Promo Bar ---------- */ .topbar { background: var(--bg); border-bottom: 1px solid var(--line); font-size: 14px; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; /* sol: duyuru · sağ: teslimat + gece modu */ gap: 16px; min-height: 44px; padding: 6px 20px; } .topbar__confetti { height: 26px; width: auto; flex: none; opacity: .95; } .topbar__confetti--flip { transform: scaleX(-1); } .topbar__promo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; min-width: 0; } .topbar__promo strong { font-weight: 800; color: var(--brand); } /* ---------- Topbar sağ blok ---------- */ .topbar__aside { display: flex; align-items: center; gap: 14px; flex: none; } /* Canlı teslimat akışı — çerçevesiz; en yeniden başlayarak sırayla döner */ .delivery { display: inline-flex; align-items: center; gap: 9px; padding: 4px 2px; border: 0; background: none; white-space: nowrap; } /* Canlı yeşil nokta — nabız halkalı */ .delivery__live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5fe0b0, var(--success)); box-shadow: 0 0 0 3px rgba(47, 189, 142, .16); } .delivery__live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--success); animation: deliveryPulse 2s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes deliveryPulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* Tek satırlık pencere — SABİT en/boy → alan hiç oynamaz (sağa-sola genişlemez). İçerik sola yaslı; uzun etiket … ile kısalır, diğer öğeler sabit. */ .delivery__viewport { position: relative; height: 30px; width: 360px; overflow: hidden; display: flex; align-items: center; } /* Akan öğe — tek satır; giriş/çıkış animasyonu (dikey ticker) */ .delivery__item { display: flex; align-items: center; gap: 7px; width: 100%; white-space: nowrap; will-change: transform, opacity; transition: opacity .34s ease, transform .34s cubic-bezier(.2, .9, .25, 1); } .delivery__item.is-out { opacity: 0; transform: translateY(-90%); } .delivery__item.is-in { animation: deliveryIn .42s cubic-bezier(.2, .9, .25, 1); } @keyframes deliveryIn { from { opacity: 0; transform: translateY(90%); } to { opacity: 1; transform: translateY(0); } } .delivery__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--pc, var(--brand)); color: #fff; font-size: 12px; /* Not: viewport ticker için overflow:hidden → box-shadow glow kesilir; o yüzden gölge yok */ } .delivery__label { flex: 1 1 auto; min-width: 0; /* büyür → durum/saat sağa sabitlenir; kısa etiketde araya boşluk */ font-size: 13px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .delivery__check { flex: none; color: var(--success); font-size: 11px; margin-left: 2px; } .delivery__status { flex: none; font-size: 12.5px; font-weight: 600; color: var(--success); } .delivery__sep { flex: none; color: var(--muted-2); } .delivery__time { flex: none; font-size: 12px; color: var(--muted-2); } @media (prefers-reduced-motion: reduce) { .delivery__live::after { animation: none; } .delivery__item { transition: none; } .delivery__item.is-in { animation: none; } } /* Gece modu */ .nightmode { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px 6px 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color var(--ease); } .nightmode:hover { color: var(--brand); } .nightmode i { font-size: 15px; } .topbar__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; white-space: nowrap; } .topbar__badge svg { width: 13px; height: 13px; } .topbar__chip { display: inline-block; padding: 2px 8px; margin: 0 2px; border-radius: 8px; background: #fff6d8; color: #8a5a00; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(245, 179, 1, .35); } .topbar__promo a { color: inherit; } .topbar__arrow { color: var(--brand); font-weight: 800; } /* ---------- 2) Ana Bar (logo + giriş) ---------- */ .headbar { border-bottom: 1px solid var(--line); } .headbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } /* Logo */ .brand { display: inline-flex; align-items: center; gap: 9px; } .brand__icon { height: 27px; width: 27px; flex: none; transition: transform 1s ease-in-out; /* canlı sitedeki gibi yavaş dönüş */ } .brand:hover .brand__icon { transform: rotate(360deg) scale(0.9); } .brand__text { height: 20px; width: auto; } .brand__badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--solid-dark); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; /* kayan yazıyı kırp */ transition: width .45s cubic-bezier(.65,0,.35,1), background-color .4s ease; } .brand__badge.is-claude { background: #d97757; } /* Claude turuncusu — ana sağlayıcı */ .brand__badge.is-gpt { background: #10a37f; } /* ChatGPT yeşili */ .brand__badge.is-main { background: #6d28d9; } /* Ana Sağlayıcı — mor */ .brand__badge-word { display: inline-block; line-height: 20px; will-change: transform, opacity; transition: transform .38s ease, opacity .38s ease; } .brand__badge-word.is-out { transform: translateY(-115%); opacity: 0; } .brand__badge-word.is-in { animation: brandBadgeIn .42s cubic-bezier(.2,.9,.25,1); } @keyframes brandBadgeIn { from { transform: translateY(115%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .brand__badge, .brand__badge-word { transition: none; } .brand__badge-word.is-in { animation: none; } } /* Sağ taraf: giriş / üye ol */ /* Arama çubuğu — logo ile giriş arasında, ortada esner */ .head-search { flex: 1; max-width: 380px; position: relative; display: flex; align-items: center; } .head-search__icon { position: absolute; left: 15px; font-size: 14px; color: var(--muted-2); pointer-events: none; transition: color var(--ease); } .head-search__input { width: 100%; height: 40px; padding: 0 16px 0 40px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 500; outline: none; transition: border-color var(--ease), box-shadow var(--ease); } .head-search__input::placeholder { color: var(--muted-2); } .head-search__input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .head-search:focus-within .head-search__icon { color: var(--brand); } .head-actions { display: flex; align-items: center; gap: 10px; } /* Üst bar ikon butonları — gece modu / bildirim / sepet (boyu hesap butonuyla eşit) */ .head-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); font-size: 17px; cursor: pointer; transition: border-color var(--ease), background var(--ease), color var(--ease); } .head-icon-btn:hover { border-color: var(--brand); color: var(--brand); } /* Sepet: BOŞKEN solundaki gece modu/bildirim ikonlarıyla aynı görünür (ayrı bir kural yok, .head-icon-btn temeli geçerli). Sepete ürün girince .is-filled ile marka rengine geçer — dolu sepet kullanıcının dikkatini çekmesi gereken tek ikon. */ .head-icon-btn--cart.is-filled { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); } .head-icon-btn--cart.is-filled:hover { background: var(--brand-soft-2); border-color: var(--brand-line-2); } /* Sepet sayaç rozeti */ .head-icon-btn__count { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; border: 2px solid var(--bg); } /* Sepet boşken rozet gizlenir; display:inline-flex UA'nın [hidden] kuralını ezdiği için burada açıkça geçersiz kılıyoruz. */ .head-icon-btn__count[hidden] { display: none; } /* Hesap butonu — giriş/kayıt birleşik kart */ .account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); } .account-btn:hover { border-color: var(--brand); } .account-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--brand-soft); color: var(--brand); } .account-btn__icon svg { width: 16px; height: 16px; } .account-btn__text { display: flex; flex-direction: column; line-height: 1.1; } .account-btn__title { font-size: 13px; font-weight: 800; color: var(--ink); } .account-btn__sub { font-size: 11px; font-weight: 600; color: var(--success); margin-top: 2px; } /* Giriş yapılmış hâli: avatar (foto/baş harfler) + isim + yeşil "Panele Geçiş Yap" */ .account-btn--user:hover { border-color: var(--success); } .account-btn__icon.account-avatar { border-radius: 50%; overflow: hidden; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; } .account-btn__icon.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .account-btn--user .account-btn__title { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-btn__sub--go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .account-btn__sub--go i { font-size: 9px; transition: transform var(--ease); } .account-btn--user:hover .account-btn__sub--go i { transform: translateX(2px); } /* Yeşil "Panele Geçiş Yap" butonu (drawer) */ .btn--panel { background: var(--success); color: #fff; box-shadow: 0 5px 14px rgba(47, 189, 142, .28); } .btn--panel:hover { background: #29a87d; } /* Mobil header: giriş yapılmışsa avatar + ad (panele gider) */ .mobile-user { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 3px 6px 3px 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--ease), border-color var(--ease); } .mobile-user__avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: -.02em; } .mobile-user__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-user__name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .mobile-user:active { opacity: .5; } .mobile-user__caret { font-size: 9px; color: var(--muted-2); transition: transform var(--ease), color var(--ease); } .mobile-user[aria-expanded="true"] { opacity: 1; } .mobile-user[aria-expanded="true"] .mobile-user__caret { transform: rotate(180deg); color: var(--brand); } .mobile-user[aria-expanded="true"] .mobile-user__name { color: var(--brand); } /* ---------- Mobil hesap menüsü (avatara dokununca açılır) ---------- Konum JS ile header'ın alt kenarına göre ayarlanır (--umenu-top). */ .lw-umenu[hidden], .lw-umenu-backdrop[hidden] { display: none !important; } /* Perde BULANIKLAŞTIRMAZ (blur kaldırıldı) — yalnız hafifçe karartır, böylece arkadaki sayfa net kalır ve panelin dışına dokunma alanı korunur. */ .lw-umenu-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(16, 24, 40, .22); opacity: 0; transition: opacity .22s ease; } .lw-umenu-backdrop.is-open { opacity: 1; } .lw-umenu { position: fixed; z-index: 1200; top: var(--umenu-top, 64px); right: 10px; width: 274px; max-width: calc(100vw - 20px); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 54px -18px rgba(16, 24, 40, .38), 0 6px 16px -10px rgba(16, 24, 40, .22); transform-origin: top right; opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .18s ease, transform .24s cubic-bezier(.22, .9, .3, 1.06); text-align: left; } .lw-umenu.is-open { opacity: 1; transform: translateY(0) scale(1); } /* Üst kimlik satırı */ .lw-umenu__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; } .lw-umenu__avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brand-line); } .lw-umenu__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .lw-umenu__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lw-umenu__name { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lw-umenu__mail { font-size: 11.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* iOS Safari / Chrome e-posta adresini kendiliğinden bağlantıya çevirip altını çiziyor ve mavi yapıyor; burada düz metin gibi görünsün. */ .lw-umenu__mail a, .lw-umenu__mail a[x-apple-data-detectors] { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-decoration: none !important; -webkit-text-decoration: none !important; pointer-events: none; } /* Bakiye şeridi */ .lw-umenu__balance { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 9px 11px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); text-decoration: none; transition: background var(--ease), border-color var(--ease); } .lw-umenu__balance:active { background: var(--brand-soft-2); } .lw-umenu__balance-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: -.01em; } .lw-umenu__balance-label i { font-size: 11px; opacity: .85; } /* Tutar ve + düğmesi sağda birlikte dursun (etiket solda kalır) */ .lw-umenu__balance-val { margin-left: auto; font-size: 13.5px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; } /* Çerçeveli + : satırın tıklanabilir (bakiye yükleme) olduğunu belli eder */ .lw-umenu__balance-add { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; border: 1px solid var(--brand-line-2); border-radius: 6px; background: var(--surface); color: var(--brand); font-size: 10px; transition: background var(--ease), border-color var(--ease); } .lw-umenu__balance:active .lw-umenu__balance-add { background: var(--brand); border-color: var(--brand); color: #fff; } /* Menü öğeleri */ .lw-umenu__list { display: flex; flex-direction: column; } .lw-umenu__sep { display: block; height: 1px; margin: 6px 6px; background: var(--line); } .lw-umenu__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background var(--ease); /* açılışta kademeli beliriş (--d: PHP'den gecikme) */ opacity: 0; transform: translateY(6px); } .lw-umenu.is-open .lw-umenu__item { opacity: 1; transform: none; transition: background var(--ease), opacity .22s ease var(--d, 0ms), transform .28s cubic-bezier(.22, .9, .3, 1.06) var(--d, 0ms); } .lw-umenu__item:active { background: var(--surface-2); } .lw-umenu__ico { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; background: var(--brand-soft); color: var(--brand); } .lw-umenu__ico--ok { background: var(--ok-bg); color: var(--ok-fg); } .lw-umenu__ico--warn { background: var(--warn-bg); color: var(--warn-fg); } .lw-umenu__ico--pink { background: var(--pink-bg); color: var(--pink-fg); } .lw-umenu__ico--out { background: var(--err-bg); color: var(--err-fg); } .lw-umenu__label { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lw-umenu__chev { font-size: 10px; color: var(--muted-2); flex: none; } .lw-umenu__item--out .lw-umenu__label { color: var(--err-fg); } .lw-umenu__item--out .lw-umenu__chev { color: var(--err-fg); opacity: .55; } @media (prefers-reduced-motion: reduce) { .lw-umenu, .lw-umenu-backdrop, .lw-umenu__item, .mobile-user__caret { transition: none; } .lw-umenu__item { opacity: 1; transform: none; } } /* Drawer üst kullanıcı satırı */ .drawer__user { display: flex; align-items: center; gap: 11px; padding: 0 2px 6px; } .drawer__user-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; } .drawer__user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .drawer__user-name { font-size: 15px; font-weight: 800; color: var(--ink); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius); font-size: 14px; font-weight: 700; border: 1px solid transparent; transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand); color: #fff; box-shadow: 0 5px 14px rgba(37, 68, 216, .25); } .btn--primary:hover { background: var(--brand-dark); } .btn--ghost { color: var(--text); padding: 0 6px; height: auto; } .btn--ghost:hover { color: var(--brand); } /* ---------- 3) Menü Barı (app tarzı: ikon + arka planlı pill + rozet) ---------- */ .menubar { border-bottom: 1px solid var(--line); background: var(--bg); } .menubar__inner { display: flex; align-items: stretch; /* sağ bloktaki dikey çizgiler tam boy olsun */ min-height: 58px; } .mainnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Sağ blok: sepet + sipariş takibi (en sağa yaslı) */ .menubar__aside { display: flex; align-items: stretch; gap: 14px; margin-left: auto; } /* Sipariş Takibi — iki yanında dikey çizgi + açılır ok */ .menu-order { display: inline-flex; align-items: center; gap: 8px; align-self: stretch; padding: 0 22px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color var(--ease), background var(--ease); } .menu-order:hover { color: var(--brand); background: rgba(37, 68, 216, .05); } .menu-order__caret { font-size: 11px; color: var(--muted-2); transition: color var(--ease), transform .25s ease; } .menu-order:hover .menu-order__caret { color: var(--brand); transform: translateY(1px); } /* Menü öğesi = pill (ikon + metin + rozet) — açılır menülü öğe