/* OTOMATİK ÜRETİM — elle düzenleme! Kaynaklar: surface-system, product-card, ios-polish, mobile-app, mobile-shell. * Yeniden üretim: node anzelha/tools/build-css-packs.mjs */ /* ==================== surface-system.css ==================== */ /* ============================================================ Anzelha · Merkezî Yüzey Sistemi — TAM CAM (Liquid Glass) ------------------------------------------------------------ TEK otorite bu dosyadır ve sayfaya özel stillerden sonra yüklenir. Eski liquid-glass-2026 / liquid-glass-ios26 katmanları frontend'e yüklenmez; bu dosya başka bir cam sistemini bastıran yama değildir. 19 Tem 2026 (7.29.0) — kullanıcı talimatı: "görseldeki gibi %100 cam yap". Önceki hibrit denge (%75 Luminous Blur içerik + %25 Liquid Glass vurgu) KALDIRILDI: artık TÜM yüzeyler tek bir cam malzemeden gelir. İki kademe kaldı, ikisi de CAM — fark yalnız yoğunluk: --lb-… = içerik camı (biraz daha opak, uzun metin/tablo/form okunur kalsın) --lg-… = vurgu camı (daha şeffaf; navigasyon, hero, kart, panel, dock) Okunabilirlik cam görünümünün önüne geçmez ama yine de garanti altındadır: koyu/açık ayrı token, @supports opak yedeği, prefers-reduced-transparency ve prefers-contrast geçişleri korunur (ANZELHA-GELISTIRME-STANDARDI Bölüm 1). ============================================================ */ /* ============================================================ ANZELHA TEMA SİSTEMİ (7.33.0) — İKİ AYRI RENK DÜNYASI ------------------------------------------------------------ TEŞHİS — "tema düğmesi sadece ikonu değiştiriyor": Kök neden 7.31.0'da BENİM eklediğim bloktu. Ana sayfaya koyu sıcak kimliği `body.home` kapsamında ZORLA uygulamıştım: body.home -> --lb-… / --lg-… / --red hepsi koyu sıcak body.home, [data-theme="dark"] body.home { background: … !important } JS tarafı doğru çalışıyordu (data-theme değişiyor, localStorage'a yazılıyor) ama CSS `data-theme`'i dinlemediği için ana sayfa her iki temada da aynı görünüyordu — değişen tek şey ikon kalıyordu. ÇÖZÜM: zorlama kaldırıldı. Sıcak kahve/altın kimliği artık KOYU TEMANIN kimliği; açık tema da kendi TAM paletine sahip (sıcak taş beyazı + koyu okunur metin + altın vurgu). Her iki tema tüm yüzeyleri (body, header, hero, kartlar, cam, footer, input, modal, dropdown, buton, ikon, divider, gölge, hover) aynı token setinden okur. Sürücü: . main.js ayrıca body'ye .light/.dark sınıfını da yazar (talimattaki body.light/body.dark seçicileri çalışsın). ============================================================ */ /* ============================================================ KOYU MOD MERKEZÎ PALET (Final Koyu Mod Talimatı, 2026-07-26) ------------------------------------------------------------ Koyu modun TEK renk kaynağı bu bloktur. Bütün sayfalarda aynı sistem geçerlidir: ana zemin #0B0D0E, renksiz Liquid Glass yüzeyler, turkuaz #14C4CF aksan. Sayfa dosyaları sabit koyu renk YAZMAZ; koyu tema tokenları (--anz-*, --lb-*, --lg-*, bundle tokenları) bu değişkenlerden beslenir. Açık tema dokunulmadan kalır. WhatsApp resmî yeşili ve orijinal marka logoları bu paletin istisnasıdır. ============================================================ */ :root[data-theme="dark"], [data-theme="dark"], body.dark, body.dark-mode { color-scheme: dark; /* ---------- NÖTRLER — tek hue ailesi (Renk Sistemi Talimatı §2.3) ---------- Önce zemin 210°, kart/cam 220-225° (maviye çalıyordu) → hepsi 190-200° ailesine çekildi. Parlaklık DEĞİŞMEDİ, yalnız hue düzeltildi. */ /* Ana zemin */ --dark-bg: #0B0D0E; /* Liquid Glass yüzeyler */ --dark-glass: rgba(22, 25, 26, 0.72); --dark-glass-strong: rgba(26, 30, 31, 0.88); --dark-input: #141718; /* Çizgiler */ --dark-border: rgba(255, 255, 255, 0.14); --dark-border-soft: rgba(255, 255, 255, 0.08); --dark-divider: rgba(255, 255, 255, 0.10); /* Yazılar */ --dark-text: #F5F7F8; --dark-text-secondary: #AEB4B8; --dark-text-muted: #7E858A; --dark-placeholder: #747B80; /* ---------- Ana turkuaz renk ---------- TEMA KİMLİĞİ (değişmez): açık mod aksanı KIRMIZI + beyaz metin, koyu mod aksanı TURKUAZ. 2026-08-04 tarihli Renk Sistemi Talimatı'nın "koyu modda da kırmızı" maddesi UYGULANMADI — kullanıcı kararı. */ --dark-accent: #14C4CF; --dark-accent-hover: #29D0DA; --dark-accent-pressed: #0EA6B0; --dark-accent-text: #061012; --dark-focus-ring: rgba(20, 196, 207, 0.38); /* Durum renkleri */ --dark-success: #32D583; --dark-error: #FF5D5D; --dark-warning: #F4B740; /* Diğer */ --dark-overlay: rgba(0, 0, 0, 0.68); --dark-shadow: rgba(0, 0, 0, 0.42); } :root, body.light { /* ---- AÇIK TEMA ---- */ --anz-bg: #f8f6f3; --anz-bg-soft: #f2eee8; --anz-glass: rgba(255, 255, 255, .72); --anz-glass-strong: rgba(255, 255, 255, .84); --anz-glass-border: rgba(145, 91, 29, .16); --anz-text: #171717; --anz-text-soft: #666666; --anz-text-muted: rgba(23, 23, 23, .52); --anz-shadow: rgba(60, 42, 24, .16); --anz-hover: rgba(145, 91, 29, .08); /* Zemin: sıcak taş beyazı + çok hafif altın ışık. */ --az-bg: var(--anz-bg); --az-glow-warm: rgba(210, 143, 45, .1); --az-bg-glow: radial-gradient(900px 520px at 80% 8%, var(--az-glow-warm), transparent 40%), radial-gradient(720px 480px at 12% 70%, rgba(214, 197, 162, .26), transparent 58%); /* FINAL MASTER DESIGN (2026-07-20) — ATMOSPHERE ENGINE taban değerleri (= ÖĞLE, doğal gün ışığı; JS yoksa bu görünür). Statik, animasyonsuz, global blur'suz. Önceki md.3 turkuaz destek ışığı bilinçli KALDIRILDI (güncel talimat üstündür: yeşil/yeşilimsi ton yalnız "Şu an Açık" göstergesinde). Üçüncü katman artık atmosfer destek ışığıdır — rengi güne göre aşağıdaki bloklardan gelir. */ --az-home-light-soft: rgba(255, 255, 255, .4); --az-home-light-warm: rgba(201, 130, 34, .12); --az-home-light-cool: rgba(255, 252, 246, .03); /* Cam kademeleri — açık temada cam DAHA YÜKSEK alfa ister (7.29.0 bulgusu) */ --lb-blur: 18px; --lb-bg: rgba(255, 255, 255, .84); --lb-border: rgba(145, 91, 29, .14); --lb-shadow: 0 14px 38px var(--anz-shadow); --lb-inner: inset 0 1px 0 rgba(255, 255, 255, .9); --lb-ink: var(--anz-text); --lb-muted: var(--anz-text-soft); --lg-blur: 22px; --lg-bg: var(--anz-glass); --lg-border: rgba(145, 91, 29, .16); --lg-shadow: 0 18px 50px var(--anz-shadow); --lg-shine: inset 0 1px 0 rgba(255, 255, 255, .95); /* 7.73.0: --anz-hero-overlay/--anz-hero-surface KALDIRILDI — sinematik hero'da tema perdesi yok (beyaz sis yasak, düzeltme talimatı md.8). */ } [data-theme="dark"], body.dark { /* ---- KOYU TEMA (Final Koyu Mod Talimatı 2026-07-26: sıcak kahve kimlik KALDIRILDI — tüm değerler merkezî --dark-* paletinden) ---- */ --anz-bg: var(--dark-bg, #0B0C0D); --anz-bg-soft: var(--dark-input, #121416); --anz-glass: var(--dark-glass, rgba(24, 26, 28, .72)); --anz-glass-strong: var(--dark-glass-strong, rgba(28, 30, 32, .88)); --anz-glass-border: var(--dark-border, rgba(255, 255, 255, .14)); --anz-text: var(--dark-text, #F5F7F8); --anz-text-soft: var(--dark-text-secondary, #AEB4B8); --anz-text-muted: var(--dark-text-muted, #7E858A); --anz-shadow: var(--dark-shadow, rgba(0, 0, 0, .42)); --anz-hover: rgba(255, 255, 255, .07); --az-bg: var(--anz-bg); /* Koyu modda sıcak/altın zemin ışığı YOK — zemin tek renk #0B0C0D kalır; ayrım boşluk + ince çizgi + renksiz cam ile sağlanır (talimat md.2-3). */ --az-glow-warm: rgba(255, 255, 255, .02); --az-bg-glow: none; --az-home-light-soft: rgba(255, 255, 255, .02); --az-home-light-warm: rgba(255, 255, 255, .015); --az-home-light-cool: rgba(255, 255, 255, .01); --lb-blur: 22px; --lb-bg: var(--anz-glass-strong); --lb-border: var(--anz-glass-border); --lb-shadow: 0 18px 52px var(--anz-shadow); --lb-inner: inset 0 1px 0 rgba(255, 255, 255, .13); --lb-ink: var(--anz-text); --lb-muted: var(--anz-text-soft); --lg-blur: 24px; --lg-bg: var(--anz-glass); --lg-border: var(--anz-glass-border); --lg-shadow: 0 18px 52px var(--anz-shadow); --lg-shine: inset 0 1px 0 rgba(255, 255, 255, .13); } /* Vurgu: 7.309.5 — açıkta kırmızı, koyuda merkezî turkuaz. Token adları geriye uyumluluk için korunur; yalnız değerler tema paletine bağlanır. */ :root, body.light { --anz-gold: #E3262E; --anz-gold-light: #EF4148; --anz-gold-dark: #B51C24; } [data-theme="dark"], body.dark { --anz-gold: var(--dark-accent, #14C4CF); --anz-gold-light: var(--dark-accent-hover, #29D0DA); --anz-gold-dark: var(--dark-accent-pressed, #0EA6B0); } :root, body.light, [data-theme="dark"], body.dark { --red: var(--anz-gold); --red-deep: var(--anz-gold-dark); --red-soft: rgba(227, 38, 46, .14); --az-gold: var(--anz-gold-light); --az-muted: var(--anz-text-soft); } [data-theme="dark"], body.dark { --red-soft: rgba(20, 196, 207, .14); } /* ============================================================ ATMOSPHERE ENGINE — FINAL MASTER DESIGN (2026-07-20) Site günün saatine göre atmosfer değiştirir; FOTOĞRAFLAR DEĞİŞMEZ, yalnız zemin ışık tonları değişir. main.js 'e data-atmosphere yazar: morning (05-11) / noon (11-17) / evening (17-21) / night (21-05). ÖĞLE = taban değerler (yukarıda) — JS yoksa doğal gün ışığı görünür. Kurallar: yalnız token override; animasyon yok, geçiş yok, blur yok; alfalar eşik-altı kalır — metin kontrastına ve cam yüzeylere dokunmaz. NOT: body.light/body.dark token yazdığı için override'lar body seçicileriyle de tekrarlanır (aksi halde body tanımı kazanır). ============================================================ */ /* SABAH — soğuk beyaz ışık */ [data-atmosphere="morning"], [data-atmosphere="morning"] body.light { --az-home-light-soft: rgba(242, 247, 255, .48); --az-home-light-warm: rgba(201, 130, 34, .08); --az-home-light-cool: rgba(214, 228, 246, .05); --az-glow-warm: rgba(196, 150, 80, .08); } /* AKŞAM — şampanya tonları */ [data-atmosphere="evening"], [data-atmosphere="evening"] body.light { --az-home-light-soft: rgba(255, 244, 226, .46); --az-home-light-warm: rgba(216, 154, 56, .16); --az-home-light-cool: rgba(240, 200, 124, .055); --az-glow-warm: rgba(219, 158, 60, .13); } /* GECE — bakır, kömür, sıcak ışık */ [data-atmosphere="night"], [data-atmosphere="night"] body.light { --az-home-light-soft: rgba(255, 236, 212, .3); --az-home-light-warm: rgba(186, 102, 42, .15); --az-home-light-cool: rgba(166, 88, 40, .05); --az-glow-warm: rgba(186, 102, 42, .13); } /* Koyu tema varyantları — Final Koyu Mod Talimatı (2026-07-26) md.2: koyu zemin HER saatte tek renk #0B0C0D kalır; sıcak/bakır atmosfer ışıkları koyu modda kapatıldı (açık tema varyantları aynen sürer). */ [data-atmosphere="morning"][data-theme="dark"], [data-atmosphere="morning"] body.dark, [data-atmosphere="evening"][data-theme="dark"], [data-atmosphere="evening"] body.dark, [data-atmosphere="night"][data-theme="dark"], [data-atmosphere="night"] body.dark { --az-home-light-soft: rgba(255, 255, 255, .02); --az-home-light-warm: rgba(255, 255, 255, .015); --az-home-light-cool: rgba(255, 255, 255, .01); --az-glow-warm: rgba(255, 255, 255, .02); } /* Yüksek kontrast isteğinde atmosfer destek katmanı tamamen sadeleşir. (body seçicileri şart: token'ı body.light/body.dark da yazıyor.) */ @media (prefers-contrast: more) { [data-atmosphere], [data-atmosphere] body.light, [data-atmosphere] body.dark { --az-home-light-cool: transparent; } } /* ---- Tema geçiş animasyonu (talimat 5): 250-350ms ---- NOT: header'da `design-system.css:1138` → `transition: none !important` var; bu, SCROLL sırasındaki titremeyi önlemek için bilinçli konmuştu. Kaldırmıyoruz. Bunun yerine geçiş yalnız TEMA DEĞİŞİRKEN açılır: main.js 'e 350ms boyunca `.theme-switching` ekler. Böylece hem yumuşak tema geçişi olur hem scroll titremesi geri gelmez. */ @media (prefers-reduced-motion: no-preference) { .theme-switching body,.theme-switching .az-header__inner,.theme-switching .az-home--ios27 .az-hero27__statusbar,.theme-switching .az-home--ios27 .az-cat-card,.theme-switching .az-home--ios27 .az-branch27,.theme-switching .az-home--ios27 .az-trust__grid article,.theme-switching .az-promo,.theme-switching .glass-card,.theme-switching .site-footer,.theme-switching .anzelha-menu-panel__surface,.theme-switching .az-nav-drop,.theme-switching .az-sheet__panel,.theme-switching .az-mobile-tabs,.theme-switching .az-empty-state,.theme-switching .az-to-top,.theme-switching input,.theme-switching select,.theme-switching textarea { /* Final Koyu Mod Talimatı md.9: tema geçişi 180-220ms bandında. */ transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; } } /* ---- Ana sayfa zemini ---- 7.73.0: buradaki !important'sız body.home kompozisyonu KALDIRILDI — dosya sonundaki FINAL PREMIUM "3) ZEMİN" kuralı (!important) zaten otoriteydi ve bu blok ona hiçbir zaman geçemiyordu (gizli ölü kod). Atmosfer ışık katmanları artık doğrudan o otorite kuralın içindedir. */ body.home::before { display: none; } /* Logo: koyu temada beyaz logo dosyası (CSS filtresi DEĞİL). */ [data-theme="dark"] .az-brand .anzelha-brand-mark, [data-theme="dark"] .az-footer-logo .anzelha-footer-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0"); } /* Header: iki temada da kendi camı. */ .az-header .az-header__inner { background-color: var(--lg-bg); border-color: var(--lg-border); box-shadow: var(--lg-shadow), var(--lg-shine); color: var(--anz-text); } .az-nav-trigger, .az-header__actions .anzelha-icon-button { color: var(--anz-text); } .az-nav-trigger:hover, .az-nav-trigger[aria-expanded="true"], .az-header__actions .anzelha-icon-button:hover { color: var(--anz-gold-light); } /* Sipariş Ver: tema aksanı. Geometri, radius ve boşluklar değişmez. */ .az-header__actions .az-order-button, .az-button--primary { background: var(--red, #E3262E); border: 1px solid color-mix(in srgb, var(--red, #E3262E) 68%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--red, #E3262E) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28); color: #fff; } .az-header__actions .az-order-button:hover, .az-button--primary:hover { background: var(--red-deep, #B51C24) !important; } [data-theme="dark"] .az-header__actions .az-order-button, [data-theme="dark"] .az-button--primary { color: var(--dark-accent-text, #061012); } /* SİNEMATİK HERO (2026-07-20 düzeltme talimatı): fotoğraf üstü yüzeyler iki temada da AYNI — zemin gerçek fotoğraftır, tema perdesi yok (eski --anz-hero-surface/--anz-hero-overlay sistemi kaldırıldı; beyaz sis yasak). Pill fotoğraf üstünde koyu cam. */ .az-home--ios27 .az-hero27--cinema .az-hero27__pill { background: rgba(16, 18, 20, .44); border-color: rgba(255, 255, 255, .24); color: var(--anz-gold-light); -webkit-backdrop-filter: blur(var(--az-blur-sm, 8px)) saturate(140%); backdrop-filter: blur(var(--az-blur-sm, 8px)) saturate(140%); } /* Anzelha Puan WALLET paneli — fotoğraf üstünde güçlü koyu cam (md.2: fazla şeffaf olmamalı, metin kontrastı güçlü); iki temada aynı. 7.84.0 (md.4) — kart hero BAŞLIĞIYLA rekabet edecek kadar ağır görünüyordu: arka plan opaklığı çok az düşürüldü (.68/.60 → .60/.52), iç/dış gölge ve koyu kahve yoğunluğu hafifletildi (.34 → .26; inset .16 → .14). Cam blur (16px) AYNEN korunur, yazı rengi (#fff9f2) DEĞİŞMEZ → kontrast düşmez. Böylece görsel hiyerarşide hero başlığı birinci, puan kartı ikinci seviyede kalır. */ .az-home--ios27 .az-hero27__wallet { background: linear-gradient(160deg, rgba(24, 26, 28, .60), rgba(11, 12, 13, .52)); border-color: rgba(255, 255, 255, .3); color: #fff9f2; /* 7.91.0 (iOS App Master Planı md.7 — yalnız YÜZEY cilası, renk/yerleşim/tipografi yapısı DEĞİŞMEZ): Apple Wallet kartındaki "üstten ışık" — üst kenar highlight'ı .14 → .24 keskinleştirildi + üstten yumuşak iç parıltı katmanı (inset -28px) eklendi. Kart daha "ışık tutan cam" okunur; dış gölge/blur/palet aynı. */ box-shadow: 0 14px 40px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 26px 44px -30px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(var(--az-blur-lg, 16px)) saturate(140%); backdrop-filter: blur(var(--az-blur-lg, 16px)) saturate(140%); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .az-home--ios27 .az-hero27__wallet { background: linear-gradient(160deg, rgba(24, 26, 28, .94), rgba(11, 12, 13, .92)); } } @media (prefers-reduced-transparency: reduce) { .az-home--ios27 .az-hero27__wallet { background: #1c1611; -webkit-backdrop-filter: none; backdrop-filter: none; } } .az-home--ios27 .az-hero27__wallet-value { text-wrap: nowrap; white-space: nowrap; } /* ---------- Anzelha Puan wallet: AÇIK MODDA AÇIK KART (7.110.0, FINAL Talimatı §11) ---------- Kılavuz açık modda Puan kartını AÇIK/krem gösterir. Yukarıdaki KOYU cam kurallar koyu modda kalır; açık modda (html:not([data-theme="dark"])) krem cam + koyu metin + altın vurgu ile override edilir. Altın madalyonlar (medal / medal--card / award) İKİ temada da altın — dokunulmaz. */ html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet { background: linear-gradient(160deg, rgba(255, 252, 247, .87), rgba(247, 241, 231, .77)); border-color: rgba(90, 70, 45, .18); color: #2a231d; box-shadow: 0 16px 40px rgba(28, 30, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .6); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-head { color: rgba(42, 35, 29, .74); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-head .anzelha-icon { color: var(--anz-gold, #b07e2e); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-next { color: rgba(42, 35, 29, .72); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-level { color: var(--anz-gold, #b07e2e); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-expiry { background: rgba(90, 70, 45, .06); border-color: rgba(90, 70, 45, .16); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-expiry .anzelha-icon { color: var(--anz-gold, #b07e2e); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-expiry small { color: rgba(42, 35, 29, .68); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-bar { background: rgba(90, 70, 45, .14); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-cta { border-color: rgba(90, 70, 45, .26); background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: #2a231d; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-link { color: rgba(42, 35, 29, .74); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-link:hover { color: var(--anz-gold, #b07e2e); } @media (hover: hover) and (pointer: fine) { html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet-cta:hover { background: rgba(255, 255, 255, .8); } } /* ---------- Guest puan kartı TAÇ ROZETİ (7.114.0, referans görsele birebir) ---------- Referans (oturum KAPALI) kartında: "ANZELHA PUAN" satırının sağında değil, kartın SAĞ-ÜST köşesinde YUVARLAK beyaz taç rozeti + küçük parıltılar; "Puan Kazan" yanında altın madalyon YOK. Kod ise küçük satır-içi taç + başlık yanında award madalyonu basıyordu. Artık guest'te (`--guest`, front-page.php) baş taç, mutlak konumla köşe rozetine dönüşür; award madalyonu markup'tan kaldırıldı. Yalnız guest; oturum açık kartın üyelik madalyonu (`wallet-medal--card`) DEĞİŞMEZ. İki temada da geçerli (koyu-mod rozet zemini aşağıda override). Rozet `.wallet-head` içine konumlanır → ≤1023 statik wallet'ta da doğru çalışır (head her zaman akıştadır). */ .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head { position: relative; } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head .anzelha-icon { position: absolute; top: -6px; right: -2px; width: 56px; height: 56px; padding: 15px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--anz-gold, #b07e2e); box-shadow: 0 12px 26px rgba(28, 30, 32, .18), inset 0 1px 0 rgba(255, 255, 255, .9); } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head::after { content: ""; position: absolute; top: -9px; right: -2px; width: 22px; height: 22px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c99a45'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z'/%3E%3Cpath d='M18.6 15l.6 1.8 1.8 .6-1.8 .6-.6 1.8-.6-1.8-1.8-.6 1.8-.6Z'/%3E%3C/svg%3E") no-repeat center / contain; opacity: .92; } /* Guest başlık "Puan Kazan" tek satır (award madalyonu gitti) — sola dayalı grid satırı. */ .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-headline { justify-self: start; } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head .anzelha-icon { background: rgba(255, 255, 255, .14); color: var(--dark-accent-hover, #29D0DA); box-shadow: 0 12px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .28); } /* Fotoğraf kartlarının metin perdesi */ .az-home--ios27 .az-promo__shade { background: linear-gradient(90deg, rgba(248, 246, 243, .94) 0%, rgba(248, 246, 243, .74) 40%, rgba(248, 246, 243, .14) 78%, transparent 100%); } [data-theme="dark"] .az-home--ios27 .az-promo__shade { background: linear-gradient(90deg, rgba(11, 12, 13, .92) 0%, rgba(11, 12, 13, .72) 40%, rgba(11, 12, 13, .14) 78%, transparent 100%); } /* ------------------------------------------------------------ Koyu/açık zeminde okunabilirlik: aşağıdaki gruplar rengini token'dan DEĞİL sabit değerden alıyordu (computed style ile tespit edildi) — token'a bağlandılar. ------------------------------------------------------------ */ .az-button--light { background: var(--lg-bg); border: 1px solid var(--anz-glass-border); color: var(--anz-text); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(150%); backdrop-filter: blur(var(--lg-blur)) saturate(150%); } .az-button--light:hover { background: var(--anz-hover); color: var(--anz-gold-light); } [data-theme="dark"] .az-button--light:hover { color: var(--anz-gold-light); } .az-home--ios27 .az-text-action { color: var(--anz-gold-text); } [data-theme="dark"] .az-home--ios27 .az-text-action { color: var(--anz-gold-light); } .az-home--ios27 .az-promo__body--light .az-text-action { color: #fff; } .az-home--ios27 .az-eyebrow, .az-home--ios27 .az-section-head span { color: var(--anz-text-muted); } .az-home--ios27 .az-section-head h2 { color: var(--anz-text); } .az-home--ios27 .az-hero27__statusbar strong, .az-home--ios27 .az-cat-card__bar > span, .az-home--ios27 .az-branch27__meta h3, .az-home--ios27 .az-trust__grid strong, .az-home--ios27 .az-promo--puan h3, .az-home--ios27 .az-promo__card strong { color: var(--anz-text); } .az-home--ios27 .az-hero27__statusbar small, .az-home--ios27 .az-branch27__meta small, .az-home--ios27 .az-trust__grid small, .az-home--ios27 .az-promo--puan p, .az-home--ios27 .az-promo__card small { color: var(--anz-text-soft); } .az-home--ios27 .az-cat-card__bar > .anzelha-icon { color: var(--anz-text-soft); opacity: .8; } /* Form yüzeyleri de temayla döner (talimat 1: input dahil). */ input, select, textarea { background-color: var(--lb-bg); border-color: var(--lb-border); color: var(--anz-text); } input::placeholder, textarea::placeholder { color: var(--anz-text-muted); } /* ESKİ TOKEN BLOĞU KALDIRILDI (7.33.0): yukarıdaki iki-temalı sistemle aynı değişkenleri ikinci kez tanımlıyor ve DOSYADA SONRA GELDİĞİ İÇİN onu eziyordu (--lb-muted eski değerde kalıyordu). Tek tanım yukarıda. */ /* ---------- Ana arka plan ---------- */ body { position: relative; isolation: isolate; background-color: var(--az-bg); background-image: none; } body::before { position: fixed; z-index: -1; inset: 0; background: var(--az-bg-glow); content: ""; pointer-events: none; } /* Bildirim/uyarı renk kimliği korunur, yalnızca yüzey sakinleştirilir. */ .az-pp-allergen-card { background-color: rgba(240, 185, 70, .12); } .anzelha-toast { color: inherit; } /* Kart içi ikincil metinler güçlü kontrastta kalır. */ .glass-card p,.az-sira-card__body p { color: var(--lb-muted); } /* Header kapsülü: %100 cam talimatıyla (7.29.0) artık paylaşılan cam değerlerini kullanır — eskiden hero fotoğrafının parlaklığına karşı %90 opak sabitlenmişti. Okunabilirlik, blur'un yükseltilmesi (22px) ve metin kontrastının --lb-ink'e bağlanmasıyla korunur; altından kayan içeriğe karşı ince bir koyu kenar + specular vurgu katman ayrımı verir. */ .az-header .az-header__inner { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%); background-color: var(--lg-bg); background-image: none; border-color: var(--lg-border); box-shadow: var(--lg-shadow), var(--lg-shine); color: var(--lb-ink); } /* ============================================================ 2) VURGU CAMI — en şeffaf kademe Üst menü, mobil alt bar, hero panelleri, kartlar, tema seçici, hızlı işlem kartları, rezervasyon türü seçici, sabit sepet/ödeme çubukları, ödeme başarı ekranı. ============================================================ */ .az-mobile-tabs, .az-theme-menu, .az-cart-bar, .az-pp-bar, .az-rez-tabs, .az-search-sheet__panel, .woocommerce-account.logged-in .woocommerce-MyAccount-navigation, .az-home--ios27 .az-hero27__statusbar, .az-home--ios27 .az-promo--puan, .woocommerce-order-received .woocommerce-order, .az-home--ios27 .az-cat-card, /* .az-branch27 — Şubelerimiz yeniden tasarımı (7.115.0): şube kartı artık birleşik cam reçetesinde DEĞİL; sıcak editoryal krem yüzeyi home-ios27.css verir. Diğer kartlar (cat/trust/ikram/product) camda kalır. */ .az-home--ios27 .az-trust__grid article,.az-home--ios27 .az-ikram27__card,.az-empty-state,.az-to-top { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%); background-color: var(--lg-bg); background-image: none; border-color: var(--lg-border); box-shadow: var(--lg-shadow), var(--lg-shine); color: var(--lb-ink); } /* ------------------------------------------------------------ OKUNABİLİRLİK ŞARTI (%100 cam'ın bedeli değil, ön koşulu): Cam yüzey daha şeffaf oldukça altındaki fotoğraf/gradient metne karışır. Bu yüzden cam üstündeki TÜM metin, temaya duyarlı --lb-ink / --lb-muted'e bağlanır — sabit gri tonlar (--az-muted gibi tek temaya göre seçilmiş değerler) cam üstünde kullanılmaz. AA kontrastı iki temada da bu kuralla korunur. ------------------------------------------------------------ */ .az-home--ios27 .az-hero27__statusbar strong, .az-home--ios27 .az-cat-card__bar > span, .az-home--ios27 .az-branch27__meta h3, .az-home--ios27 .az-trust__grid strong, .az-home--ios27 .az-promo--puan h3, .az-home--ios27 .az-promo__card strong { color: var(--lb-ink); } .az-home--ios27 .az-hero27__statusbar small, .az-home--ios27 .az-branch27__meta small, .az-home--ios27 .az-trust__grid small, .az-home--ios27 .az-promo--puan p, .az-home--ios27 .az-promo__card small { color: var(--lb-muted); } /* Ok/yardımcı ikonlar da cam üstünde silikleşmez. */ .az-home--ios27 .az-cat-card__bar > .anzelha-icon { color: var(--lb-muted); opacity: .8; } /* Header dış kapsayıcısı cam DEĞİLDİR; cam yalnızca yuvarlatılmış iç kapsüldedir. Aksi hâlde kapsül köşelerinin arkasında kare cam blok görünür. */ .az-header, .az-header.glass-navigation { top: max(12px, env(safe-area-inset-top)); -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border: 0; box-shadow: none; } /* Bundle'ın ::before parlama katmanı dış kapsayıcıda kare bant çizer; kapatılır. */ .az-header::before, .az-header.glass-navigation::before, .az-header::after, .az-header.glass-navigation::after { content: none; display: none; } /* ============================================================ SABİT HEADER GEOMETRİSİ — TEK KAYNAK (7.32.0) ------------------------------------------------------------ Seçilen yöntem: **A) fixed header + içerikte üst boşluk** (sticky'ye geçilmedi: cam kapsül ekranın kenarlarından boşluklu "ada" olarak duruyor; sticky'de wrapper dolgusu sayfa akışında görünür bir bant bırakıyordu.) Üç değişken tüm hesabı yönetir; başka dosyada sabit piksel yok: --az-header-h → GERÇEK kapsül yüksekliği (main.js ResizeObserver ile ölçer; aşağıdaki değer yalnız ilk boyama için fallback). Kök neden buydu: CSS 72px varsayıyordu, gerçek kapsül 76px'ti. --az-header-gap → kapsülün üstten boşluğu --az-admin-bar-h → WP yönetici çubuğu (girişli/girişsiz fark) ============================================================ */ :root { --az-header-gap: max(12px, env(safe-area-inset-top)); --az-admin-bar-h: 0px; } body.admin-bar { --az-admin-bar-h: 32px; } @media (max-width: 782px) { body.admin-bar { --az-admin-bar-h: 46px; } } .az-header, .az-header.glass-navigation { top: calc(var(--az-admin-bar-h) + var(--az-header-gap)); } .admin-bar .az-header { top: calc(var(--az-admin-bar-h) + var(--az-header-gap)); } /* Anchor hedefleri: header + boşluk + nefes payı kadar aşağıdan açılır. */ html { scroll-padding-top: calc(var(--az-admin-bar-h) + var(--az-header-gap) + var(--az-header-h, 76px) + 24px); } .az-section[id] { scroll-margin-top: calc(var(--az-admin-bar-h) + var(--az-header-gap) + var(--az-header-h, 76px) + 24px); } /* 7.75.0 (md.5): masaüstünde header HERO'NUN ÜZERİNE alındı. Artık hero fotoğrafı header yüksekliği kadar AŞAĞI itilmez (eski "kopuk beyaz üst boşluk" bu itmeydi); fotoğraf sayfanın tepesinden başlar, cam header üzerine biner. Hero metni dikeyde ortalı olduğundan üstteki header'ın altında kalmaz (stage min-height header'ı da karşılar). 7.107.0 (FINAL Görsel Talimatı §11 "üstte hiçbir boşluk"): eski küçük "nefes payı" (--az-header-gap) KALDIRILDI — fotoğraf ekranın en üst noktasından başlar. 7.111.0 (ÇİFT OFFSET DÜZELTMESİ): padding-top ARTIK 0. Neden: WordPress giriş yapılınca `html { margin-top: 32px }` (mobilde 46px) ekleyip TÜM akışı admin bar kadar aşağı iter; hero AKIŞTA olduğu için bu itme onu zaten admin bar altına alır. Ek olarak `var(--az-admin-bar-h)` padding vermek ÇİFT offset yapıp foto ile admin bar arasında 32px boş bant bırakıyordu (Safari'de görüldü). Sabit (fixed) header hâlâ `--az-admin-bar-h` ile ofsetlenir (fixed öğe html margin'inden etkilenmez) — o kural değişmedi. */ .az-home--ios27.az-home--board .az-hero27 { padding-top: 0; } /* Board dışı (eski) ana sayfa varyantı için önceki davranış korunur. */ .az-home--ios27:not(.az-home--board) .az-hero27 { padding-top: calc(var(--az-admin-bar-h) + var(--az-header-gap) + var(--az-header-h, 76px) + var(--sp-6, 24px)); } /* Ana sayfa dışındaki sayfaların ilk bölümü de aynı boşluğu alır. */ body:not(.home) .site-content > *:first-child, body:not(.home) #primary > *:first-child { scroll-margin-top: calc(var(--az-admin-bar-h) + var(--az-header-gap) + var(--az-header-h, 76px) + 24px); } @media (max-width: 782px) { :root { --az-header-gap: max(10px, env(safe-area-inset-top)); } } /* Kart etkileşimleri yalnızca kompozitlenebilir özellikleri değiştirir. */ .glass-card { transition: transform 180ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease; } @media (hover: hover) and (pointer: fine) { .glass-card:hover { transform: translateY(-2px); box-shadow: var(--lb-shadow), var(--lb-inner); } } /* Hero dışındaki uzun ana sayfa bölümleri ilk çizimi engellemez. */ @supports (content-visibility: auto) { body.home .az-section { content-visibility: auto; contain-intrinsic-size: auto 800px; } } /* Ödeme başarı ekranı vurgusu */ .woocommerce-order-received .woocommerce-thankyou-order-received { padding: 18px 24px; border-radius: 20px; font-weight: 700; } /* ============================================================ 3) PERFORMANS VE UYUMLULUK KADEMELERİ ============================================================ */ /* backdrop-filter desteklenmeyen tarayıcılar: opak yüzey yedeği. %100 cam talimatı görsel bir karardır; cam DESTEKLENMEYEN tarayıcıda yüzeyi şeffaf bırakmak metni okunaksız yapardı — yedek zorunlu kalır. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --lb-bg: rgba(255, 255, 255, .95); --lg-bg: rgba(255, 255, 255, .9); } [data-theme="dark"] { --lb-bg: rgba(24, 26, 28, .95); --lg-bg: rgba(24, 26, 28, .9); } } /* Reduced motion: yüzey kartı geçişleri tamamen kapalı. */ @media (prefers-reduced-motion: reduce) { .glass-card { transition: none; } } /* Şeffaflık azaltma (iOS/macOS "Reduce Transparency"): kullanıcının işletim sistemi düzeyindeki erişilebilirlik tercihi cam görünümünün üstündedir. */ @media (prefers-reduced-transparency: reduce) { :root { --lb-bg: rgba(255, 255, 255, .97); --lg-bg: rgba(255, 255, 255, .94); } [data-theme="dark"] { --lb-bg: rgba(24, 26, 28, .97); --lg-bg: rgba(24, 26, 28, .94); } * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* Kontrast artırma: cam korunur, kenar ve metin kontrastı yükselir. */ @media (prefers-contrast: more) { :root { --lb-bg: rgba(255, 255, 255, .82); --lg-bg: rgba(255, 255, 255, .72); --lb-border: rgba(20, 18, 14, .38); --lg-border: rgba(20, 18, 14, .3); } [data-theme="dark"] { --lb-bg: rgba(24, 26, 28, .84); --lg-bg: rgba(24, 26, 28, .74); --lb-border: rgba(255, 255, 255, .42); --lg-border: rgba(255, 255, 255, .34); } } /* Düşük bellekli cihazlar (main.js data-reduced-effects işaretler): blur kapatılır. */ .effects-reduced *, [data-reduced-effects="true"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .effects-reduced, [data-reduced-effects="true"] { --lb-bg: rgba(255, 255, 255, .95); --lg-bg: rgba(255, 255, 255, .9); } .effects-reduced[data-theme="dark"], [data-theme="dark"].effects-reduced, [data-reduced-effects="true"][data-theme="dark"], [data-theme="dark"][data-reduced-effects="true"] { --lb-bg: rgba(24, 26, 28, .95); --lg-bg: rgba(24, 26, 28, .9); } /* Mobil: cam KORUNUR (%100 cam talimatı), yalnız blur yarıçapı düşer — aynı anda çok sayıda geniş yarıçaplı blur GPU'yu zorluyordu. Görünüm camdır, maliyet değil (akıcılık kuralı: [[anzelha-ios-fluidity]]). */ @media (max-width: 900px) { :root { --lb-blur: 12px; --lg-blur: 14px; } /* Zemin ışığı mobilde de kalır: cam yüzeylerin arkasında kıracak bir şey olmalı. */ } /* Ürün sayfası zeminleri: aynı vurgu camı (misafir/QR görünümü). */ .single-product .az-pp-disclosure, .single-product .az-pp-description, .single-product .az-pp-allergen-card { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%); background-color: var(--lg-bg); background-image: none; border-color: var(--lg-border); box-shadow: var(--lg-shadow), var(--lg-shine); } /* ============================================================ FOTOĞRAF DOLGULU KARTLAR (sofra / sıra / kültür bandı) Fotoğraf kartın KENDİ zeminidir; üstüne cam bir çerçeve + kenar verilir ki tek malzeme dilinden kopmasınlar (%100 cam, 7.29.0). ============================================================ */ .az-home--ios27 .az-promo--sofra, .az-home--ios27 .az-promo--sira, .az-home--ios27 .az-promo--subeler, .az-home--ios27 .az-wideband__card { border: 1px solid var(--lg-border); background-color: transparent; box-shadow: var(--lg-shadow), var(--lg-shine); } /* ============================================================ HARİTA PANELİ: %100 cam talimatıyla cam malzemede. (Hero kartı girişi kaldırıldı — sinematik hero'nun zemini artık fotoğrafın kendisidir.) ============================================================ */ .az-home--ios27 .az-branches27__map { -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(180%); backdrop-filter: blur(var(--lg-blur)) saturate(180%); background: var(--lg-bg) !important; border-color: var(--lg-border) !important; box-shadow: var(--lg-shadow), var(--lg-shine) !important; } /* Harita iframe'i camın arkasında değil üstünde: kendi zemini opak kalmalı. */ .az-home--ios27 .az-branches27__map iframe { position: relative; z-index: 1; } /* ============================================================ ZEMİN: cam kartların arkasında kırılacak ışık katmanları. Düz tek renk yasak; background-attachment: fixed KULLANILMAZ. ============================================================ */ body { background: radial-gradient(900px 560px at 50% -6%, rgba(206, 228, 250, .6), transparent 62%), radial-gradient(700px 460px at 88% 12%, rgba(201, 130, 34, .12), transparent 58%), radial-gradient(760px 500px at 12% 62%, rgba(214, 197, 162, .3), transparent 58%), linear-gradient(180deg, #f7f5f0 0%, #efece4 100%); } /* Final Koyu Mod Talimatı md.2: koyu zemin TEK renk #0B0C0D — mavi/altın ışık katmanları koyu modda kullanılmaz. */ [data-theme="dark"] body { background: var(--dark-bg, #0B0C0D); } /* Bölümler kendi düz zeminini çizmez; tek akışkan zemin bütün sayfada sürer. */ main .az-section, .az-home .az-section { background: transparent !important; } /* Zemin ambiyansı hiçbir kapsayıcı tarafından örtülmez. */ main, #primary, .site-content, .az-home, .woocommerce, .site-main { background: transparent !important; } /* ============================================================ FOOTER (7.34.0) — SICAK SİYAH ZEMİN + iOS CAM PANEL ------------------------------------------------------------ Geçmiş teşhis (7.33.0): yeşilin tek kaynağı 7.27.0'da eklediğim `.site-footer { background: linear-gradient(180deg,#17311d,#10231a) !important }` kuralıydı. Başka kaynak yoktu; kaldırıldı, geri getirilmeyecek. 7.34.0: footer artık düz koyu blok değil — içerik ayrı bir cam panelde (`.footer-inner`) ve ana sayfanın cam sisteminin devamı gibi okunuyor. Alt bar (telif/yasal) panelin DIŞINDA şeffaf kalır. ============================================================ */ /* 7.56.0: 7.34 dönemi footer zarfı/cam paneli/grid/tipografi/güven-alt bant kuralları KALDIRILDI — hepsi dosya sonundaki TEK FOOTER OTORİTESİ bloğunda ve 7.38 cam malzemesi kurallarında yaşıyor. Aynı seçicinin dosya içinde üç kez ezilmesi 1201-1340px aralığında İletişim sütununun kesilmesinin kök nedenlerindendi. */ /* ---- Koyu temada beyaz + TURKUAZ logo (7.108.0 kullanıcı talimatı) ---- Kullanıcı: "açık modda siyah logo, koyu modda beyaz logoyu kullan" ve gösterdiği koyu logo TURKUAZ rozetli (`anzelha-logo-dark.png`). Eski 7.34.0 altın-rozet varyantı (`anzelha-logo-dark-gold.png`) bırakıldı → koyu mod artık turkuaz logo (koyu-mod vurgu rengi turkuazla ve gösterilen logoyla birebir). Dosya silinmedi. CSS filter YOK — doğru dosya doğrudan yüklenir. Açık mod = siyah logo (base). */ [data-theme="dark"] .az-footer-logo .anzelha-footer-mark, [data-theme="dark"] .az-brand .anzelha-brand-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0"); } /* 7.40.0: yukarı çık butonunun 7.34 kuralları kaldırıldı — :root:not() özgüllüğü sondaki token tabanlı kuralı eziyordu. Otorite: 7.40 bloğu. */ /* ---- Talimat 3: footerdan önceki bölümün alt boşluğu şişmesin ---- */ body.home .az-trust { padding-bottom: clamp(24px, 3vw, 40px); } /* Eko kategori kartı: aynı cam zemin; yalnız yeşil kenar + rozetle ayrışır. */ .az-home--ios27 .az-cat-card--eko { border-color: rgba(216, 154, 56, .5) !important; } [data-theme="dark"] .az-home--ios27 .az-cat-card--eko { border-color: rgba(50, 213, 131, .6) !important; } /* Başlık/gövde metni de token'dan (talimat 9: sabit renk bırakma). design-system.css'te #f5f5f7 / #171717 sabitleri kalmıştı. */ body, h1, h2, h3, h4 { color: var(--anz-text); } .az-home--ios27 .az-hero27__copy h1 { color: var(--anz-text); } .az-home--ios27 .az-hero27__copy h1 em { color: var(--anz-gold-light); } /* ============================================================ 7.35.0 — YERLEŞİM SERTLEŞTİRME (hizalama / eşit yükseklik / fallback / print). Talimattaki maddelerin KOD TARAFINDA karşılığı olanlar. Metin birleşmesi ve boş beyaz kutular PDF çıktısı artefaktıydı (HTML'de gerçek boşluklar var, inline bölünme yok) — çözümü 16. madde: print CSS. ============================================================ */ /* --- 1) Tek container: tüm bölümler aynı eksende --- */ .az-home--ios27 .az-shell, .site-footer .wrap { width: min(100% - 40px, var(--az-w-content, 1560px)); margin-inline: auto; } /* --- 2) Ortak dikey ritim; dev boşluk yok --- */ /* 7.143.0 (§4.1) — ÖLÜ KURAL KALDIRILDI: `.az-home--ios27 .az-section { padding-block: clamp(48px,6vw,96px) }` hiçbir zaman kazanmıyordu; ~satır 1916'daki !important kural (clamp(48,6.5vw,96)) onu daima eziyordu. Headless ölçümle doğrulandı (çıktı-nötr). */ .az-home--ios27 .az-hero27 { padding-bottom: clamp(24px, 3vw, 40px); } /* --- 3) Uzun metinler: birleşme/taşma koruması --- */ .az-home--ios27 p, .az-home--ios27 small, .az-home--ios27 .az-section-head__text { white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: none; } /* 7.56.0: footer metin sarma kuralları tek otorite bloğuna taşındı. */ /* --- 4) Hero ritmi --- */ /* 7.78.0 (md.3) — dikey boşluklar küçültüldü (metin daha kompakt, yukarıda). 7.112.2 — pill↔başlık boşluğu 16px → 34px. 7.112.3 — kullanıcı geri bildirimi: boşluk 34px → 22px. 7.113.0 — YENİ referans görseli talimatı (md.15 "kritik görsel düzeltme"): etiket başlığa YAKLAŞTIRILIR ama YAPIŞMAZ; hedef 28–38px → 32px (referans oranıyla eşleşir, 7.112.3'teki 22px artık çok sıkıydı). Bu kural home-ios27.css'teki h1 margin'ini EZER (yükleme sırasında sonra); tek otorite. */ .az-home--ios27 .az-hero27__copy h1 { margin-block: 32px 12px; } .az-home--ios27 .az-hero27__buttons { margin-top: 20px; } /* --- 8) Kategori kartları: eşit oran, içerik alta sabit --- */ .az-home--ios27 .az-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .az-home--ios27 .az-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .az-home--ios27 .az-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .az-home--ios27 .az-cat-card { min-height: 240px; } .az-home--ios27 .az-cat-card__figure { aspect-ratio: 4 / 3; } .az-home--ios27 .az-cat-card__bar { margin-top: auto; } /* --- 9) Şube kartları: orantılı, dev blok değil --- */ .az-home--ios27 .az-branches27__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } @media (max-width: 1100px) { .az-home--ios27 .az-branches27__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .az-home--ios27 .az-branches27__cards { grid-template-columns: 1fr; } } .az-home--ios27 .az-branch27 { min-height: 320px; max-height: 420px; } .az-home--ios27 .az-branch27__figure { flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; } .az-home--ios27 .az-branch27__body { margin-top: auto; } /* --- 10) Kültür kartı: metin okunur, dikey ortalı --- */ .az-home--ios27 .az-wideband__shade--dark { background: linear-gradient(90deg, rgba(12, 9, 7, .92) 0%, rgba(12, 9, 7, .7) 52%, rgba(12, 9, 7, .18) 100%); } .az-home--ios27 .az-wideband__copy { max-width: 560px; align-content: center; } .az-home--ios27 .az-wideband__credit { opacity: .62; font-size: 11px; } /* --- 11) Avantaj kartları: eşit yükseklik ve taban --- */ .az-home--ios27 .az-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } @media (min-width: 1400px) { .az-home--ios27 .az-trust__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 767px) { .az-home--ios27 .az-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 430px) { .az-home--ios27 .az-trust__grid { grid-template-columns: 1fr; } } .az-home--ios27 .az-trust__grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-content: start; height: 100%; padding: 20px; } .az-home--ios27 .az-trust__grid article > b { align-self: start; } /* 7.56.0 — Eski 12/13. maddeler (footer kolonları + alt bar) kaldırıldı; tek otorite dosya sonundaki footer bloğu. */ /* --- 15) Görsel yüklenmezse: beyaz kutu değil, sıcak fallback --- */ .az-home--ios27 .az-cat-card__figure, .az-home--ios27 .az-branch27__figure, .az-home--ios27 .az-promo__photo, .az-home--ios27 .az-wideband__photo { background: linear-gradient(135deg, rgba(90, 62, 34, .55), rgba(26, 20, 15, .75)); } :root:not([data-theme="dark"]) .az-home--ios27 .az-cat-card__figure, :root:not([data-theme="dark"]) .az-home--ios27 .az-branch27__figure { background: linear-gradient(135deg, rgba(214, 197, 162, .5), rgba(180, 150, 110, .35)); } .az-home--ios27 .az-editorial-picture__image, .az-home--ios27 .az-cat-card__media { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- 16) PRINT / PDF: 7.60.0'da dosya sonundaki TEK PRINT KATMANI'na taşındı. --- */ /* 430px'te bir avantaj kartı 24px daha uzundu (iki satırlık başlık). Başlık satır kutusu sabitlenerek tabanlar eşitlendi. */ @media (max-width: 767px) { .az-home--ios27 .az-trust__grid article { align-content: start; } .az-home--ios27 .az-trust__grid strong { display: block; min-height: 2.6em; line-height: 1.3; } } /* 320px: kart içindeki uzun kelimeler kutuyu genişletiyordu. */ @media (max-width: 340px) { .az-home--ios27 .az-cat-card, .az-home--ios27 .az-branch27, .az-home--ios27 .az-trust__grid article, .az-home--ios27 .az-hero27__status-cell { overflow: hidden; } .az-home--ios27 .az-cat-card__bar > span, .az-home--ios27 .az-branch27__meta h3, .az-home--ios27 .az-trust__grid strong, .az-home--ios27 .az-hero27__statusbar strong { overflow-wrap: anywhere; } } /* ============================================================ 7.56.0: 7.36.0 FOOTER KOMPAKTLAŞTIRMA bloğu tamamen kaldırıldı — zarf/panel dolguları, grid, sosyal, güven ve alt bant kuralları dosya sonundaki TEK FOOTER OTORİTESİ bloğunda yaşıyor. Buradaki .anzelha-whatsapp konum ezmesi de silindi (eklenti CSS'i !important ile zaten kazanıyordu; etkisiz/ölü kuraldı — WhatsApp değişmedi). ============================================================ */ /* ============================================================ 7.38.0 — DESIGN SYSTEM REFACTOR ------------------------------------------------------------ Geri bildirim: "her bölüm kendi içinde güzel ama bütünlük yok; referansın başarısı renklerden çok TASARIM SİSTEMİNDEYDİ." Bu blok tek otorite katmanıdır: renk, cam, blur, gölge, yarıçap, boşluk, hover, geçiş ve ikon kalınlığı TEK yerden tanımlanır ve hero / menü / kartlar / kategori / şube / puan / footer'a AYNI kurallarla uygulanır. Bileşene özel tek tek değer verilmez. Palet kullanıcı tarafından birebir belirtildi. ============================================================ */ /* SIRA ÖNEMLİ: :root ve [data-theme="dark"] aynı özgüllükte (0,1,0). Koyu blok SONRA gelmeli, yoksa html üzerinde açık tema kazanır ve JS body.dark sınıfını yazamazsa (JS kapalı) koyu tema bozulur. */ /* ---------- TOKENLAR — AÇIK (aynı sıcaklık, ışıklı taraf) ---------- */ :root, body.light { /* 7.310.3 — Tema genelinde tek dekoratif/etkileşimli aksan kaynağı. Bileşenlerin tarihsel red/gold adları aşağıda bu kaynağa bağlanır. Semantik başarı, hata, uyarı, çalışma durumu ve WhatsApp ayrıdır. */ --theme-accent: var(--action, #D93036); --theme-accent-hover: var(--action-hover, #C0272D); --theme-accent-pressed: var(--action-pressed, #A91F25); --theme-accent-contrast:var(--on-action, #FFFFFF); --theme-accent-soft: var(--action-soft, rgb(217 48 54 / .13)); --theme-accent-rgb: var(--action-rgb, 217 48 54); --anz-bg: #F7F9F9; --anz-bg-2: #F1F4F4; --anz-card: #ffffff; --anz-glass: rgba(255, 255, 255, .58); /* 7.309.5 — açık tema aksanı. Tarihsel --anz-gold adı bileşen sözleşmesini bozmamak için korunur; değer kırmızı palettir. */ --anz-gold: var(--theme-accent); --anz-gold-hover:var(--theme-accent-hover); --anz-gold-dark: var(--theme-accent-pressed); --anz-gold-text: var(--theme-accent-pressed); --anz-text: #15191A; --anz-text-2: #667174; --anz-border: #E0E6E7; --anz-edge: rgba(255, 255, 255, .85); --anz-sheen: rgba(255, 255, 255, .75); --anz-shadow-1: 0 10px 28px rgba(54, 36, 18, .1); --anz-shadow-2: 0 20px 56px rgba(54, 36, 18, .12); --anz-shadow-3: 0 28px 80px rgba(54, 36, 18, .14); } /* ---------- 1) TOKENLAR — KOYU (Final Koyu Mod Talimatı 2026-07-26) ---------- Sıcak kahve referans kimliği KALDIRILDI; koyu modun tek kaynağı dosya başındaki merkezî --dark-* paletidir: zemin #0B0C0D, renksiz cam, turkuaz #14C4CF aksan. AÇIK tema tokenlarına dokunulmadı. */ [data-theme="dark"], body.dark { --theme-accent: var(--action, #D93036); --theme-accent-hover: var(--action-hover, #C0272D); --theme-accent-pressed: var(--action-pressed, #A91F25); --theme-accent-contrast:var(--on-action, #FFFFFF); --theme-accent-soft: var(--action-soft, rgb(217 48 54 / .13)); --theme-accent-rgb: var(--action-rgb, 217 48 54); --anz-bg: #0B0D0E; --anz-bg-2: #111516; --anz-card: var(--dark-input, #121416); --anz-glass: var(--dark-glass, rgba(24, 26, 28, .72)); /* Koyu mod aksanı merkezî turkuaz (7.102.0 teal → 2026-07-26 #14C4CF). Token adı tarihsel `--anz-gold` ama değer turkuazdır; koyu modda --az-gold/--red/--red-deep/--anz-gold-light hepsi bundan akar. */ --anz-gold: var(--theme-accent); --anz-gold-hover:var(--theme-accent-hover); --anz-gold-dark: var(--theme-accent-pressed); --anz-gold-text: var(--theme-accent); /* koyu zeminde turkuaz erişilebilir */ --anz-text: var(--dark-text, #F5F7F8); --anz-text-2: var(--dark-text-secondary, #AEB4B8); --anz-border: var(--dark-border, rgba(255, 255, 255, .14)); --anz-edge: var(--dark-border, rgba(255, 255, 255, .14)); /* ince beyaz kenar */ --anz-sheen: var(--dark-divider, rgba(255, 255, 255, .10)); /* ışık yansıması */ --anz-shadow-1: 0 10px 28px rgba(0, 0, 0, .34); --anz-shadow-2: 0 20px 56px var(--dark-shadow, rgba(0, 0, 0, .42)); --anz-shadow-3: 0 28px 80px rgba(0, 0, 0, .5); } /* ---------- 2) GEOMETRİ VE HAREKET — tek ölçek, iki temada ortak ---------- */ :root, body.light, [data-theme="dark"], body.dark { --anz-r-sm: 14px; --anz-r-md: 20px; --anz-r-lg: 26px; --anz-r-xl: 32px; --anz-blur: 26px; --anz-sat: 140%; --anz-dur: 220ms; --anz-ease: cubic-bezier(.16, 1, .3, 1); /* Mevcut token akışları yeni sisteme BAĞLANIR — böylece eski kuralları tek tek ezmeye gerek kalmaz. */ --anz-text-soft: var(--anz-text-2); --anz-text-muted: var(--anz-text-2); --anz-glass-border: var(--anz-border); --anz-gold-light: var(--anz-gold-hover); --anz-shadow: var(--anz-shadow-2); --lb-bg: var(--anz-glass); --lg-bg: var(--anz-glass); --lb-border: var(--anz-border); --lg-border: var(--anz-border); --lb-ink: var(--anz-text); --lb-muted: var(--anz-text-2); --lb-blur: var(--anz-blur); --lg-blur: var(--anz-blur); --lb-shadow: var(--anz-shadow-1); --lg-shadow: var(--anz-shadow-2); --lb-inner: inset 0 1px 0 var(--anz-sheen); --lg-shine: inset 0 1px 0 var(--anz-sheen); --red: var(--anz-gold); --red-deep: var(--anz-gold-dark); --az-gold: var(--anz-gold); --az-muted: var(--anz-text-2); } /* ---------- 3) ZEMİN ---------- 7.73.0: ATMOSPHERE ENGINE buraya bağlandı. Bu !important'lı kural dosyanın zemin OTORİTESİdir; ışık katmanları artık --az-home-light-* tokenlarından gelir (güne göre değişir, dosya başındaki atmosfer blokları). Önceki sabit rgba değerleri tokenların öğle tabanıyla aynı karakterdedir. */ body, body.home { background: radial-gradient(900px circle at 18% 8%, var(--az-home-light-soft), transparent 62%), radial-gradient(circle at 82% 8%, var(--az-home-light-warm), transparent 38%), radial-gradient(680px circle at 42% 78%, var(--az-home-light-cool), transparent 68%), linear-gradient(180deg, var(--anz-bg-2) 0%, var(--anz-bg) 55%, var(--anz-bg) 100%) !important; color: var(--anz-text); } /* Final Koyu Mod Talimatı md.2: koyu zemin bütün sayfalarda TEK renk #0B0C0D — kahve degrade ve sıcak ışık katmanları kaldırıldı. */ [data-theme="dark"] body, [data-theme="dark"] body.home { background: var(--dark-bg, #0B0C0D) !important; } /* Mobilde sade iki katman (7.69.0 kararı korunur): destek katmanı yok. */ @media (max-width: 767px) { body, body.home { background: radial-gradient(600px circle at 20% 5%, var(--az-home-light-soft), transparent 64%), radial-gradient(circle at 82% 8%, var(--az-home-light-warm), transparent 38%), linear-gradient(180deg, var(--anz-bg-2) 0%, var(--anz-bg) 55%, var(--anz-bg) 100%) !important; } [data-theme="dark"] body, [data-theme="dark"] body.home { background: var(--dark-bg, #0B0C0D) !important; } } /* ========================================================================== 7.201.0 — Bağımsız sağ-alt yukarı çık Liquid Glass kontrolü WhatsApp ile ortak kutu yoktur; yalnız sağ eksen ve 16px aralık paylaşılır. ========================================================================== */ .az-to-top[data-az-top] { position: fixed !important; z-index: var(--z-fab) !important; right: max(clamp(16px, 2vw, 28px), env(safe-area-inset-right)) !important; /* 7.463.0: WhatsApp fırlatıcısı (58px, sağ-alt 24px) ile ÇAKIŞIYORDU — yukarı-çık artık WA kürsüsünün 16px üstünde durur (58+16=74). */ bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--wa-footer-clearance, 0px) + 74px) !important; left: auto !important; display: grid !important; place-items: center; width: 52px !important; min-width: 52px !important; height: 52px !important; min-height: 52px !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .42) !important; border-radius: 50% !important; background: rgba(28, 30, 32, .56) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; backdrop-filter: blur(18px) saturate(120%) !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.96); transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, visibility 0s linear 180ms !important; } .az-to-top[data-az-top][hidden] { display: none !important; } .az-to-top[data-az-top].is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s !important; } .az-to-top[data-az-top] svg, .az-to-top[data-az-top] .anzelha-icon { width: 20px !important; height: 20px !important; fill: none; stroke: currentColor; stroke-width: 2; } @media (hover: hover) and (pointer: fine) { .az-to-top[data-az-top].is-visible:hover { transform: translateY(-2px) scale(1.04); background: rgba(34, 36, 38, .64) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .34) !important; } } .az-to-top[data-az-top].is-visible:active { transform: scale(.96); } .az-to-top[data-az-top]:focus-visible { outline: 3px solid rgba(255, 255, 255, .88) !important; outline-offset: 3px; } [data-theme="dark"] .az-to-top[data-az-top] { border-color: rgba(255, 255, 255, .28) !important; background: rgba(28, 30, 32, .66) !important; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .az-to-top[data-az-top] { background: rgba(28, 30, 32, .94) !important; } } @media (max-width: 767px) { .az-to-top[data-az-top] { right: max(16px, env(safe-area-inset-right)) !important; bottom: calc(88px + env(safe-area-inset-bottom)) !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; } } @media (prefers-reduced-motion: reduce) { .az-to-top[data-az-top], .az-to-top[data-az-top].is-visible:hover, .az-to-top[data-az-top].is-visible:active { transform: none !important; transition: none !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .az-header .az-header__inner, .az-home--ios27 .az-cat-card, .az-home--ios27 .az-hero27__statusbar, .site-footer .az-footer-card { background-color: var(--anz-card) !important; } } /* ---------- 5) YARIÇAP ÖLÇEĞİ — tek sistem ---------- */ /* 7.77.0 (md.1/md.3): hero__stage yarıçap kuralı KALDIRILDI — hero artık tam taşan (full-bleed) yüzeydir, yarıçapı yoktur; tek otorite home-ios27.css. */ .az-header .az-header__inner { border-radius: var(--anz-r-lg) !important; } .az-home--ios27 .az-hero27__statusbar, .az-home--ios27 .az-hero27__wallet, .az-home--ios27 .az-promo, .az-home--ios27 .az-wideband__card, .az-home--ios27 .az-branches27__map, .site-footer .az-footer-card { border-radius: var(--anz-r-lg) !important; } .az-home--ios27 .az-cat-card,/* .az-branch27 kendi yarıçapını home-ios27.css'te alır (7.115.0). */ .az-home--ios27 .az-trust__grid article { border-radius: var(--anz-r-md) !important; } .az-button, .az-order-button { border-radius: var(--anz-r-sm) !important; } /* ---------- 6) HOVER VE GEÇİŞ — tek davranış ---------- */ @media (hover: hover) and (pointer: fine) { .az-home--ios27 .az-cat-card,/* .az-branch27 hover'ı 7.115.0'da home-ios27.css'e taşındı (editoryal krem). */ .az-home--ios27 .az-promo,.az-home--ios27 .az-trust__grid article { transition: transform var(--anz-dur) var(--anz-ease), box-shadow var(--anz-dur) var(--anz-ease), border-color var(--anz-dur) var(--anz-ease); } /* Kalkış değeri TEK KAYNAK: 2px (7.48.0 FINAL PREMIUM sınırı). Eski -4px burada tanımlanıp aşağıda (bölüm 8.5 civarı) -2px ile eziliyordu — ölü override zinciri temizlendi (final talimat 2026-07-20 md.10). */ .az-home--ios27 .az-cat-card:hover,.az-home--ios27 .az-promo:hover,.az-home--ios27 .az-trust__grid article:hover { transform: translateY(-2px); border-color: rgba(215, 161, 75, .34) !important; box-shadow: var(--anz-shadow-3), inset 0 1px 0 var(--anz-sheen) !important; } .site-footer a:hover, .az-nav-trigger:hover { color: var(--anz-gold-hover) !important; } } @media (prefers-reduced-motion: reduce) { .az-home--ios27 .az-cat-card,.az-home--ios27 .az-promo,.az-home--ios27 .az-trust__grid article { transition: none; } } /* ---------- 7) İKONLAR — Apple tarzı biraz daha dolgun ---------- 7.49.0 — Header aksiyon ikonları bu gruptan çıktı: talimat standardı 22px / stroke 1.8 (design-system.css tek otorite). İçerik ikonları (ana sayfa/footer) dolgun kalır. */ .az-home--ios27 .anzelha-icon, .site-footer .anzelha-icon { stroke-width: 2.2; } .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon, .az-home--ios27 .az-trust__grid article > b .anzelha-icon { stroke-width: 2.4; } .az-home--ios27 .az-hero27__status-cell > b, .az-home--ios27 .az-trust__grid article > b { background: rgba(215, 161, 75, .14) !important; color: var(--anz-gold) !important; border-radius: var(--anz-r-sm); } .site-footer .az-footer-row__icon .anzelha-icon, .site-footer .az-footer-capsule__ssl .anzelha-icon { color: var(--anz-gold); } /* ---------- 8) BÖLÜM BOŞLUKLARI — tek ritim (40/70 karışıklığı biter) ---------- */ /* 7.143.0 (§4.1) — ÖLÜ KURAL KALDIRILDI: `.az-home--ios27 .az-section { padding-block: clamp(56px,5.5vw,88px) }` ~satır 1916'daki !important kuralca daima eziliyordu. Headless ölçümle doğrulandı (çıktı-nötr). Kalan tek otorite: 1916 (masaüstü !important) + mobile-app:341 (≤767 !important) + 2629 (print) + design-system:868 (padding-inline:0). */ .az-home--ios27 .az-hero27 { padding-bottom: clamp(28px, 3vw, 44px) !important; } .az-home--ios27 .az-section-head { margin-bottom: clamp(20px, 2.4vw, 32px); } /* ---------- 9) HERO ATMOSFERİ (7.73.0 sinematik) ---------- Eski "sol kenardan sis" (--anz-hero-overlay) KALDIRILDI — düzeltme talimatı md.8: fotoğrafı soluklaştıran perde yasak. Kalanlar: hafif vignette (kadraj hissi) + fotoğraf sıcaklık filtresi. Okunabilirlik degradesi tek kaynaktır: home-ios27.css'teki .az-hero27__scrim. */ .az-home--ios27 .az-hero27__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, transparent 58%, rgba(20, 14, 10, .3) 100%); } .az-home--ios27 .az-hero27__bg img { filter: saturate(1.06) contrast(1.03); } /* ---------- 10) FOOTER — koyu kahve → bronz geçiş, üstte parlama ---------- */ .site-footer { background: radial-gradient(circle at 85% 10%, rgba(215, 161, 75, .1), transparent 36%), linear-gradient(180deg, var(--anz-bg-2) 0%, var(--anz-bg) 48%, #191310 100%); border-top: 1px solid var(--anz-border); color: var(--anz-text); } :root:not([data-theme="dark"]) .site-footer { background: radial-gradient(circle at 85% 10%, rgba(199, 146, 63, .08), transparent 36%), linear-gradient(180deg, var(--anz-bg-2) 0%, #ece4d9 100%); } /* Üst kenarda ince bronz parlama */ .site-footer::before { content: ""; display: block; height: 1px; margin-bottom: clamp(48px, 5vw, 64px); background: linear-gradient(90deg, transparent, rgba(215, 161, 75, .42), transparent); } .site-footer h2 { color: var(--anz-text); } .site-footer a, .site-footer p { color: var(--anz-text-2); } /* ---------- 11) METİN HİYERARŞİSİ — tek kaynak ---------- */ body, h1, h2, h3, h4, .az-home--ios27 .az-section-head h2, .az-home--ios27 .az-cat-card__bar > span, .az-home--ios27 .az-branch27__meta h3, .az-home--ios27 .az-trust__grid strong, .az-home--ios27 .az-hero27__statusbar strong { color: var(--anz-text); } .az-home--ios27 p, .az-home--ios27 small, .az-home--ios27 .az-eyebrow, .az-home--ios27 .az-section-head span, .az-home--ios27 .az-section-head__text, .az-home--ios27 .az-hero27__statusbar small, .az-home--ios27 .az-trust__grid small, .az-home--ios27 .az-branch27__meta small { color: var(--anz-text-2); } .az-home--ios27 .az-text-action { color: var(--anz-gold-text); } /* 7.106.0 — AA erişilebilir metin altını */ .az-home--ios27 .az-text-action:hover { color: var(--anz-gold-hover); } /* ---------- Sinematik hero metni: TEMA-DUYARLI (FINAL Görsel Talimatı §11) ---------- 7.108.0 — AÇIK mod = parlak GÜNDÜZ görseli → KOYU başlık (#2A231D, kılavuz "Başlık Metin") + altın vurgu + solda AÇIK/sıcak scrim (gündüz ferahlığı korunur, karartma yok). KOYU mod = GECE görseli → mevcut BEYAZ metin + koyu scrim (değişmedi). Pill ve durum şeridi İKİ TEMADA da koyu cam kalır (kılavuzun açık modundaki koyu kapsüllerle birebir). Scrim home-ios27.css'te tanımlı; surface-system SONRA yüklendiği için tema-duyarlı override tek yerde burada. */ .az-home--ios27 .az-hero27--cinema .az-hero27__copy h1 { color: #2a231d; text-shadow: 0 1px 10px rgba(255, 253, 248, .6); } .az-home--ios27 .az-hero27--cinema .az-hero27__copy h1 em { color: var(--anz-gold, #b07e2e); } .az-home--ios27 .az-hero27--cinema .az-hero27__copy > p { color: rgba(42, 35, 29, .9); text-shadow: none; } .az-home--ios27 .az-hero27--cinema .az-hero27__scrim { background: linear-gradient(90deg, rgba(249, 244, 235, .84) 0%, rgba(249, 244, 235, .54) 30%, rgba(249, 244, 235, .13) 58%, transparent 100%), linear-gradient(180deg, transparent 62%, rgba(249, 244, 235, .22) 100%); } [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__copy h1 { color: var(--dark-text, #F5F7F8); text-shadow: 0 2px 24px rgba(11, 12, 13, .35); } [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__copy h1 em { color: var(--dark-accent-hover, #29D0DA); } [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__copy > p { color: rgba(245, 247, 248, .88); } [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__scrim { background: linear-gradient(90deg, rgba(11, 12, 13, .78) 0%, rgba(11, 12, 13, .48) 38%, rgba(11, 12, 13, .1) 70%, rgba(11, 12, 13, .2) 100%), linear-gradient(180deg, rgba(11, 12, 13, .18) 0%, transparent 26%, transparent 64%, rgba(11, 12, 13, .34) 100%); } /* ============================================================ 7.78.0 (md.5) — DURUM ŞERİDİ: FOTOĞRAF ÜSTÜNDE KOYU CAM (İKİ TEMADA DA) Şerit hero fotoğrafının üzerinde durur; birleşik açık cam reçetesi (bölüm 3/4) burada AÇIK GRİ/BEYAZ büyük kutu görünümüne yol açıyordu (kullanıcı raporu). Wallet paneli gibi güçlü koyu cam + açık metin uygulanır. Bu blok tüm önceki statusbar kurallarından SONRA gelir → kaynak sırasıyla kazanır; arka plan !important 4. bölümün !important'ını yener. Yalnız .az-hero27 içindeki şerit etkilenir (diğer cam yüzeyler değişmez). ------------------------------------ */ .az-home--ios27 .az-hero27__statusbar { background-color: transparent !important; background-image: linear-gradient(160deg, rgba(14, 17, 15, .74), rgba(8, 10, 10, .66)) !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12) !important; -webkit-backdrop-filter: blur(var(--az-blur-lg, 16px)) saturate(140%); backdrop-filter: blur(var(--az-blur-lg, 16px)) saturate(140%); color: #fff9f2; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .az-home--ios27 .az-hero27__statusbar { background-color: rgba(16, 19, 17, .92) !important; } } @media (prefers-reduced-transparency: reduce) { .az-home--ios27 .az-hero27__statusbar { background-image: none !important; background-color: #14110d !important; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Hücre ayıracı ve metin — koyu cam üstünde açık, AA kontrast. */ .az-home--ios27 .az-hero27__status-cell + .az-hero27__status-cell { border-left-color: rgba(255, 255, 255, .14); } .az-home--ios27 .az-hero27__statusbar strong, .az-home--ios27 .az-hero27__status-text { color: #fff9f2; } .az-home--ios27 .az-hero27__statusbar small { color: rgba(255, 249, 242, .74); } .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon { color: #f2cf8e; } /* 7.112.4 — Program rozeti köşe durum noktasının halkası koyu şerit yüzeyine göre. */ [data-theme="dark"] .az-home--ios27 .az-hero27__status-cell--schedule .az-hero27__status-dot { border-color: rgba(18, 20, 22, .95); } .az-home--ios27 .az-hero27__status-pick { border-color: rgba(255, 255, 255, .34); color: #fff9f2; } @media (hover: hover) and (pointer: fine) { .az-home--ios27 a.az-hero27__status-cell:hover { background-color: rgba(255, 255, 255, .08); } } /* ---------- DURUM ŞERİDİ + PILL: AÇIK MODDA AÇIK/BEYAZ KART (7.112.0, referans görsele birebir) ---------- Yukarıdaki KOYU cam durum şeridi ve koyu pill GECE kimliğidir → KOYU modda kalır (koyu mod turkuaz aksanı 7.102.0 talimatı korunur). AÇIK modda referans görseldeki gibi BEYAZ/krem opak kart + KOYU metin + ALTIN ikon uygulanır; wallet'ın açık-mod reçetesiyle (yukarıda 7.110.0) birebir aynı palet. Kapsam yalnız .az-hero27 içi; diğer cam yüzeyler değişmez. Override html:not([data-theme="dark"]) ile daha yüksek özgüllükte + kaynak sırasında SONRA gelir → koyu-cam !important bloğunu güvenle yener. */ html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar { background-color: transparent !important; background-image: linear-gradient(160deg, rgba(255, 253, 250, .92), rgba(249, 244, 236, .86)) !important; border: 1px solid rgba(90, 70, 45, .16) !important; box-shadow: 0 16px 40px rgba(28, 30, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .7) !important; color: #2a231d; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__status-cell + .az-hero27__status-cell { border-left-color: rgba(90, 70, 45, .14); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar strong, html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__status-text { color: #2a231d; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar small { color: rgba(42, 35, 29, .66); } /* İkon kabı: referanstaki gibi dairesel altın-tonlu rozet (yalnız telefon/şube hücrelerinde var; program hücresinde yeşil nokta korunur). */ html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__status-cell > b { background: rgba(176, 126, 46, .1); border-radius: 50%; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon { color: var(--anz-gold, #b07e2e); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__status-pick { border-color: rgba(90, 70, 45, .3); color: #2a231d; } @media (hover: hover) and (pointer: fine) { html:not([data-theme="dark"]) .az-home--ios27 a.az-hero27__status-cell:hover { background-color: rgba(90, 70, 45, .06); } } /* Pill: açık modda AÇIK translucent çip + KOYU metin + altın pin (koyu modda koyu cam kalır). */ html:not([data-theme="dark"]) .az-home--ios27 .az-hero27--cinema .az-hero27__pill { background: rgba(255, 253, 250, .72); border-color: rgba(90, 70, 45, .18); color: #2a231d; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27--cinema .az-hero27__pill .anzelha-icon { color: var(--anz-gold, #b07e2e); } /* Altın butonlar tek reçete */ .az-header__actions .az-order-button, .az-button--primary { background: linear-gradient(135deg, var(--anz-gold-hover) 0%, var(--anz-gold) 52%, #a9762c 100%) !important; border: 1px solid rgba(231, 180, 93, .5); box-shadow: 0 12px 30px rgba(169, 118, 44, .3), inset 0 1px 0 rgba(255, 255, 255, .3); color: #2a1b06 !important; } .az-button--light { background: var(--anz-glass) !important; border: 1px solid var(--anz-edge) !important; color: var(--anz-text) !important; } /* 7.82.0 (md.8) — HERO "Rezervasyon Yap": hedef görselde AÇIK KREM zemin + KOYU yazı/ikon (translucent cam değil, koyu kahve/siyah değil). Yalnız ana sayfa hero CTA'sına; genel .az-button--light (iç sayfalar) dokunulmaz. */ .az-home--ios27 .az-hero27__buttons .az-button--light { background: #f6efe2 !important; border: 1px solid rgba(255, 255, 255, .72) !important; color: #2a1b06 !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .6) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .az-home--ios27 .az-hero27__buttons .az-button--light .anzelha-icon { color: #2a1b06; } .az-home--ios27 .az-hero27__buttons .az-button--light:hover { background: #fffaf0 !important; color: #2a1b06 !important; } /* ============================================================ 7.130.0 — FOOTER: İKİ KARTLI İLETİŞİM DÜZENİ (TEK YERLEŞİM OTORİTESİ) ------------------------------------------------------------ Referans görsel (2026-07-23): İKİ Liquid Glass kart yan yana — 1) Marka kartı (ortalanmış logo + açıklama + yaprak ayraç + resmî sosyal daireler) 2) Bize Ulaşın kartı (sohbet rozetli başlık + dört iletişim satırı) — altında tek ince güvenlik/ödeme/yasal kapsülü. Eski dört katmanlı Bento'daki karşılama CTA kartı ve "Hızlı Erişim" kartı (7.63.0) referansta bulunmadığından KALDIRILDI; bağlantıları header mega menüsü + mobil panel + yasal kapsül üzerinden erişilebilir kaldığından işlev kaybı yoktur. Ölü CTA/Hızlı Erişim/akordeon kuralları da bu turda temizlendi (kaynak = markup; ölü seçici bırakılmaz). - Cam malzeme 7.38 tek cam kuralından gelir (.az-footer-card); blur yalnız iki ana kartta — kapsül, satırlar ve rozetler blur'suz. - Aksan tema-duyarlı: açık modda altın, koyu modda turkuaz (--anz-gold tokenından; footer'da ayrı ham renk verilmez). Yeşil yalnız WhatsApp. - Sabit yükseklik / viewport birimi YOK; yükseklik = içerik. ============================================================ */ /* ---- Token köprüsü: --anz-* temayla döndüğü için ayrı koyu blok GEREKMEZ. .az-to-top footer kardeşi olduğundan kapsamdadır. ---- */ .site-footer, .az-to-top { --footer-dur: 160ms; --footer-ease: cubic-bezier(.22, 1, .36, 1); --footer-text: var(--anz-text); --footer-muted: var(--anz-text-2); --footer-soft: var(--anz-text-2); --footer-gold: var(--anz-gold); --footer-gold-light: var(--anz-gold-hover); --footer-border: var(--anz-border); --footer-glass: var(--anz-glass); --footer-opaque: var(--anz-card); --footer-shadow-1: var(--anz-shadow-1); --footer-shadow-2: var(--anz-shadow-2); --footer-focus: var(--anz-gold); --footer-hover-border: rgba(215, 161, 75, .34); /* Satır yüzeyi: kart camının üstünde "çok hafif yüzey farkı". */ --footer-row-bg: rgba(255, 255, 255, .045); --footer-row-icon-bg: rgba(215, 161, 75, .13); } :root:not([data-theme="dark"]) .site-footer, :root:not([data-theme="dark"]) .az-to-top { --footer-row-bg: rgba(64, 43, 27, .05); --footer-row-icon-bg: rgba(199, 146, 63, .14); } /* Koyu modda satır ikon zemini turkuaz aksanla eşlenir (aksan --anz-gold koyuda #14C4CF'dir; ham değer değil, tokenla türetilir). */ [data-theme="dark"] .site-footer, [data-theme="dark"] .az-to-top { --footer-row-icon-bg: color-mix(in srgb, var(--anz-gold) 16%, transparent); } /* ---- Zarf: yükseklik = içerik. Sabit/viewport yükseklik YOK. ---- */ .site-footer { padding: 0; height: auto; min-height: 0; color: var(--footer-text); } .site-footer::before { margin-bottom: 0; } /* ---- Katman yığını: calc(100% - 48px), max 1840px, margin-block 18px 24px, grid gap 16px. Footer sonrası boşluk yok. ---- */ .site-footer .footer-shell { display: grid; gap: 16px; width: calc(100% - 48px); max-width: 1840px; margin-inline: auto; margin-block: 18px 24px; } /* ---- Ortak Liquid Glass kart: malzeme (cam zemin/kenar/gölge/blur) 7.38 tek cam kuralından miras; burada yarıçap, dolgu ve üst altın yansıma. ---- */ .site-footer .az-footer-card { position: relative; border-radius: 28px !important; padding: 32px clamp(24px, 2.6vw, 40px); overflow: clip; } /* Kart üst kenarında çok hafif altın/turkuaz yansıma (neon yok). */ .site-footer .az-footer-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(239, 198, 117, .35) 50%, transparent 92%); pointer-events: none; } [data-theme="dark"] .site-footer .az-footer-card::after { background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--anz-gold) 55%, transparent) 50%, transparent 92%); } @media (prefers-reduced-transparency: reduce) { .site-footer .az-footer-card, .site-footer .az-footer-capsule { background: var(--footer-opaque) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (prefers-contrast: more) { .site-footer .az-footer-card, .site-footer .az-footer-capsule { border-color: var(--footer-text) !important; } } /* ---- İki kartlı Bento: Marka + Bize Ulaşın (eşit yükseklik) ---- */ .site-footer .az-footer-bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: stretch; } .site-footer .az-footer-bento > * { min-width: 0; } /* ---- Marka kartı: ortalanmış kompozisyon (referans) ---- */ .site-footer .az-footer-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .site-footer .az-footer-logo { display: block; max-width: none; } .site-footer .az-footer-logo .anzelha-footer-mark { width: clamp(160px, 13vw, 200px); height: auto; aspect-ratio: 176 / 59; } .site-footer .az-footer-brand p { max-width: 400px; margin: 20px auto 0; font-size: 15px; line-height: 1.7; color: var(--footer-soft); white-space: normal; word-break: normal; overflow-wrap: break-word; text-wrap: pretty; } /* Yaprak ayraç: iki yana solan ince çizgi + ortada yaprak glyph'i. */ .site-footer .az-footer-brand__divider { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(300px, 82%); margin: 24px auto 22px; color: var(--footer-gold); } .site-footer .az-footer-brand__divider::before, .site-footer .az-footer-brand__divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--footer-border) 45%, var(--footer-border) 55%, transparent); } .site-footer .az-footer-brand__divider .anzelha-icon { width: 20px; height: 20px; stroke-width: 1.5; flex: 0 0 auto; } /* Dekoratif yaprak: tıklanamaz, faint sağ filigran; ayrı görsel yok. */ .site-footer .az-footer-leaf { position: absolute; right: 14px; bottom: 14px; color: var(--footer-gold); opacity: .18; pointer-events: none; } .site-footer .az-footer-leaf .anzelha-icon { width: 92px; height: 92px; stroke-width: 1.2; } /* Sosyal medya: 4 eşit cam daire, ortalı tek satır. Marka renkleri design-system.css'ten (facebook/instagram/x-social/youtube) gelir; X ikonu tek logomark glifidir. */ .site-footer .footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; max-width: none; list-style: none; } .site-footer .footer-social .footer-social__link { display: grid; place-items: center; width: 50px; height: 50px; min-height: 50px; /* dokunma hedefi ≥44px */ padding: 0; border-radius: 50%; background: var(--footer-glass) !important; border: 1px solid var(--footer-border) !important; box-shadow: var(--footer-shadow-1); color: var(--footer-text) !important; text-decoration: none; /* Panel zaten blur'lu; iç içe ikinci blur katmanı yok. */ -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform var(--footer-dur) var(--footer-ease), background-color var(--footer-dur) var(--footer-ease), box-shadow var(--footer-dur) var(--footer-ease), border-color var(--footer-dur) var(--footer-ease), color var(--footer-dur) var(--footer-ease); } .site-footer .footer-social .footer-social__link .anzelha-icon { width: 20px; height: 20px; } /* ---- Bize Ulaşın kartı: sohbet rozetli başlık ---- */ .site-footer .az-footer-reach__title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 20px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; text-transform: none; color: var(--footer-text); } .site-footer .az-footer-reach__badge { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: var(--footer-row-icon-bg); color: var(--footer-gold); } .site-footer .az-footer-reach__badge .anzelha-icon { width: 21px; height: 21px; } /* ---- Uygulama benzeri iletişim satırı ---- */ .site-footer .az-footer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 5px 14px; border-radius: 13px; border: 1px solid var(--footer-border); background: var(--footer-row-bg); color: var(--footer-text); text-decoration: none; transition: transform var(--footer-dur) var(--footer-ease), border-color var(--footer-dur) var(--footer-ease), background-color var(--footer-dur) var(--footer-ease); } .site-footer .az-footer-row__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--footer-row-icon-bg); color: var(--footer-gold); } .site-footer .az-footer-row__icon .anzelha-icon { width: 18px; height: 18px; stroke-width: 2; } .site-footer .az-footer-row__label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--footer-text); white-space: normal; word-break: normal; overflow-wrap: break-word; transition: color var(--footer-dur) ease; } .site-footer .az-footer-row__arrow { color: var(--footer-muted); display: grid; place-items: center; transition: transform var(--footer-dur) var(--footer-ease), color var(--footer-dur) ease; } .site-footer .az-footer-row__arrow .anzelha-icon { width: 16px; height: 16px; } .site-footer .az-footer-row:active { transform: scale(.985); } /* ---- Bize Ulaşın satır listesi: ferah dokunma hedefleri (≥56px) ---- */ .site-footer .az-footer-reach__list { display: flex; flex-direction: column; gap: 12px; margin: 0; font-style: normal; /*
italik varsayılanı sıfırlanır */ } .site-footer .az-footer-row--reach { min-height: 60px; border-radius: 16px; padding: 8px 16px; gap: 14px; } .site-footer .az-footer-row--reach .az-footer-row__icon { width: 44px; height: 44px; border-radius: 13px; } .site-footer .az-footer-row--reach .az-footer-row__label { font-size: 15.5px; font-weight: 650; } /* WhatsApp satırı: resmî WhatsApp yeşili YALNIZ burada (footer genelinde başka yeşil vurgu yok — her aksan altın/turkuaz tokenıdır). Gerçek WhatsApp glyph'i: açık yeşil cam kapsül, dolgulu 22×22 glyph. */ .site-footer .az-footer-row--wa .az-footer-row__icon { color: #25d366; background: rgba(37, 211, 102, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } .site-footer .az-footer-row--wa .az-footer-row__icon .anzelha-icon--whatsapp { width: 22px; height: 22px; color: #25d366; fill: currentColor; stroke: none; stroke-width: 0; } /* ---- Güvenlik + yasal kapsül: tek ince hap; blur YOK ---- */ .site-footer .az-footer-capsule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--footer-border); background: var(--footer-glass); box-shadow: var(--footer-shadow-1); color: var(--footer-muted); font-size: 13.5px; } .site-footer .az-footer-capsule__trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .site-footer .az-footer-capsule__ssl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--footer-text); white-space: nowrap; } .site-footer .az-footer-capsule__ssl .anzelha-icon { width: 18px; height: 18px; color: var(--footer-gold); } .site-footer .az-footer-paybadges { display: inline-flex; flex-wrap: wrap; gap: 8px; } .site-footer .az-footer-paybadge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--footer-border); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--footer-muted); white-space: nowrap; } .site-footer .az-footer-capsule__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } .site-footer .az-footer-copy { white-space: nowrap; } .site-footer .az-footer-capsule__links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; } .site-footer .az-footer-capsule__links a { display: inline-flex; align-items: center; min-height: 44px; /* dokunma hedefi */ color: var(--footer-muted); text-decoration: none; transition: color var(--footer-dur) ease; } .site-footer .az-footer-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--footer-gold); text-decoration: none; } .site-footer .az-footer-top .anzelha-icon { width: 16px; height: 16px; } /* Arama/sepet/sheet gibi TAM EKRAN overlay açıkken WhatsApp yüzen katmanları HER genişlikte gizlenir (mobil kopyası mobile-app.css'te). */ body.az-overlay-open .anzelha-whatsapp, body.az-overlay-open .wa-greet, body.az-overlay-open .wa-tip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ---- Odak halkaları: yalnız renk değişimine güvenilmez ---- */ .site-footer .az-footer-row:focus-visible, .site-footer .az-footer-capsule__links a:focus-visible, .site-footer .az-footer-top:focus-visible, .site-footer .footer-social .footer-social__link:focus-visible, .site-footer .az-footer-logo:focus-visible, .az-to-top:focus-visible { outline: 2px solid var(--footer-focus); outline-offset: 3px; } /* ---- Hover: en fazla 1px kalkma + hafif kenar/parlaklık ---- */ @media (hover: hover) and (pointer: fine) { .site-footer .az-footer-row:hover { transform: translateY(-1px); border-color: var(--footer-hover-border); background: var(--footer-opaque); } .site-footer .az-footer-row:hover .az-footer-row__label { color: var(--footer-gold-light); } /* Referans md.5: iletişim satırı hover'da hafif SAĞA kayar, ok da sağa. */ .site-footer .az-footer-row--reach:hover { transform: translateX(3px); } .site-footer .az-footer-row--reach:hover .az-footer-row__arrow { color: var(--footer-gold-light); transform: translateX(2px); } .site-footer .footer-social .footer-social__link:hover { transform: translateY(-1px); background: var(--footer-opaque) !important; border-color: var(--footer-hover-border) !important; box-shadow: var(--footer-shadow-2); } .site-footer .footer-social .footer-social__link:active { transform: scale(.97); } .site-footer .az-footer-capsule__links a:hover { color: var(--footer-gold-light); } .site-footer .az-footer-top:hover { color: var(--footer-gold-light); } } /* ---- Yukarı çık (sabit ikiz): footer görünürken main.js gizler — kapsüldeki akış içi "Yukarı Dön" devralır. ---- */ .az-to-top { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--footer-glass); border: 1px solid var(--footer-border); box-shadow: var(--footer-shadow-1); color: var(--footer-text); -webkit-backdrop-filter: blur(var(--anz-blur)) saturate(var(--anz-sat)); backdrop-filter: blur(var(--anz-blur)) saturate(var(--anz-sat)); transition: transform var(--footer-dur) ease, background-color var(--footer-dur) ease, color var(--footer-dur) ease, box-shadow var(--footer-dur) ease; } .az-to-top[hidden] { display: none; } .az-to-top:active { transform: scale(.94); } @media (hover: hover) and (pointer: fine) { .az-to-top:hover { transform: translateY(-2px); background: var(--footer-opaque); border-color: var(--footer-hover-border); color: var(--footer-gold-light); box-shadow: var(--footer-shadow-2); } } @supports not ((backdrop-filter: blur(var(--az-blur-xl, 20px))) or (-webkit-backdrop-filter: blur(var(--az-blur-xl, 20px)))) { .az-to-top { background: var(--footer-opaque); } } /* ---- Kırılımlar ---- */ /* ≤899px: iki kart tek sütuna iner. */ @media (max-width: 899px) { .site-footer .az-footer-bento { grid-template-columns: 1fr; } } /* WhatsApp başlatıcısı kapsülün sağındaki güvenli boşlukta durur; yasal bağlantılar ve "Yukarı Dön" hiç örtülmez. */ @media (min-width: 600px) and (max-width: 2047px) { .site-footer .az-footer-capsule { padding-right: calc(96px + env(safe-area-inset-right)); } } /* ≤599px: mobil web — 12px dış boşluk, daha küçük yarıçap, kapsül ortalı. */ @media (max-width: 599px) { .site-footer .footer-shell { width: calc(100% - 24px); gap: 12px; margin-block: 14px 18px; } .site-footer .az-footer-card { border-radius: 23px !important; padding: 26px 20px; } .site-footer .az-footer-capsule { border-radius: 24px; padding: 14px 18px; justify-content: center; text-align: center; } .site-footer .az-footer-capsule__trust, .site-footer .az-footer-capsule__legal { justify-content: center; } } /* ≤479px: dekoratif yaprak filigranı gizlenir (aria-hidden dekor). */ @media (max-width: 479px) { .site-footer .az-footer-leaf { display: none; } } /* ---- Hareket tercihi: geçiş/transform kapanır; bilgi kaybı yok ---- */ @media (prefers-reduced-motion: reduce) { .site-footer .az-footer-row, .site-footer .az-footer-row__arrow, .site-footer .footer-social .footer-social__link, .site-footer .az-footer-capsule__links a, .az-to-top { transition: none; } .site-footer .az-footer-row:hover, .site-footer .az-footer-row:active, .site-footer .az-footer-row--reach:hover, .site-footer .az-footer-row--reach:hover .az-footer-row__arrow, .site-footer .footer-social .footer-social__link:hover, .site-footer .footer-social .footer-social__link:active, .az-to-top:hover, .az-to-top:active { transform: none; } } /* ============================================================ 7.41.0 — AKICILIK: KADEMELİ BLUR + EKRAN DIŞI RENDER KESİNTİSİ ------------------------------------------------------------ Talimat: "iOS gibi akıcı; ağırlaştıran ne varsa kalksın." - Blur, kompozitördeki en pahalı katmandır. main.js zaten cihazı üç kademeye ayırıyor (full/balanced/reduced) ama CSS yalnız reduced'ı kullanıyordu. Orta kademe (mobil viewport VEYA düşük çekirdek) artık 16px blur alır — cam görünümü kalır, kompozitör yükü belirgin düşer. reduced'da blur zaten tamamen kapalı. - Footer, her sayfada ekran dışında doğup ilk boyamada bedava değildi; content-visibility ile görünene dek render edilmez. contain-intrinsic-size kaydırma çubuğu zıplamasını önler (CLS 0). ============================================================ */ /* body.light/body.dark kendi --anz-blur tanımını taşıdığı için (7.38 §2) kademe hem kökte hem body'de ezilmeli; yoksa gövde altındaki yüzeyler 26px'te kalır (önizlemede ölçülüp yakalandı). */ .effects-balanced, .effects-balanced body, .effects-balanced body.light, .effects-balanced body.dark { --anz-blur: 16px; } /* reduced kademede footer camı da kapanır — 7.40'taki blur !important, genel `.effects-reduced *` kuralını özgüllükle geçiyordu. */ .effects-reduced .site-footer .az-footer-card, [data-reduced-effects="true"] .site-footer .az-footer-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--footer-opaque) !important; background-image: none !important; } .site-footer { content-visibility: auto; contain-intrinsic-size: auto 760px; } /* Yazdırma kuralı dosya sonundaki TEK PRINT KATMANI'nda. */ /* ============================================================ 7.42.0 — ANA SAYFA RAFİNE TURU (son tasarım + akıcılık talimatı) ------------------------------------------------------------ Yeniden tasarım DEĞİL: mevcut düzen korunur, yalnız incelik/ uyum/akıcılık. Kırılganlık dersleri uygulanır: blok dosya SONUNDA, eski :root:not() kuralı YOK, kademeli blur korunur. ============================================================ */ /* ---- Boşluk ölçeği (talimat 8) — belge + tüketim tek yerden ---- */ :root { --space-1: 8px; --space-2: 16px;} /* 7.204.0 — Ana sayfa bölüm ritminin tek otoritesi. Dolgu komşu iki bölümde birleştiğinde --az-home-section-gap kadar karttan-karta mesafe üretir. */ .az-home--ios27 .az-section { padding-block: calc(var(--az-home-section-gap, 40px) / 2) !important; } /* ---- 1/3) Header: ince taban (72→64) + scroll'da kompakt (→56) ---- design-system'daki `transition: none !important` eski zemin-titremesi dönemindendi; zemin artık sabit tek cam olduğundan yükseklik geçişi güvenli. Mobil (≤700px) 62px sabit kalır — dokunma alanı küçülmez. */ .az-header .az-header__inner { height: 64px; transition: height 180ms ease, box-shadow 180ms ease !important; } .az-header.scrolled .az-header__inner { height: 56px; } /* 7.78.0 (md.2) — MASAÜSTÜ header daha ince: hedef ~56-62px. Mobil (≤1023) dokunma alanı 64px korunur; yalnız ≥1024'te taban 60px'e iner. */ @media (min-width: 1024px) { .az-header .az-header__inner { height: 60px; } } .az-brand .anzelha-brand-mark { transition: transform 180ms ease; transform-origin: left center; } .az-header.scrolled .az-brand .anzelha-brand-mark { transform: scale(.88); } @media (hover: hover) and (pointer: fine) { .az-header__actions .az-order-button { transition: height 180ms ease, padding 180ms ease, background-color 180ms ease, transform 160ms ease; } .az-header.scrolled .az-header__actions .az-order-button { height: 38px; padding-inline: 14px; } } @media (max-width: 767px) { /* 7.60.0: değer mobile-app ile AYNI (64px) — eski 62px, en son yüklenen mobile-app'in 64px kuralına yenik düşen ölü değerdi. Mobilde scrolled küçülmesi yok; dokunma alanı sabit kalır. */ .az-header .az-header__inner, .az-header.scrolled .az-header__inner { height: 64px; transition: none !important; } .az-header.scrolled .az-brand .anzelha-brand-mark { transform: none; } } /* ---- 2) Header camı: sıcak, hafif seçilebilir zemin (talimat reçetesi). Blur `min(var(--anz-blur), 22px)`: kademe sistemi (balanced 16px) bozulmaz, tam kademede 22px'e yumuşar. Kompaktta blur DEĞİŞMEZ — scroll sırasında blur animasyonu yasak (talimat 13); yalnız gölge bir kademe belirginleşir. ---- */ .az-header .az-header__inner { background-color: rgba(255, 252, 247, .78) !important; background-image: linear-gradient(160deg, var(--anz-sheen) 0%, transparent 46%) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 12px 30px rgba(53, 39, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .75) !important; -webkit-backdrop-filter: blur(min(var(--anz-blur), 22px)) saturate(145%); backdrop-filter: blur(min(var(--anz-blur), 22px)) saturate(145%); } .az-header.scrolled .az-header__inner { box-shadow: 0 16px 36px rgba(53, 39, 24, .12), inset 0 1px 0 rgba(255, 255, 255, .75) !important; } /* 7.96.0 KÖK NEDEN — koyu tema tam-genişlik header şeridi hatası: bu koyu yüzey kuralları `[data-theme="dark"]` attribute'u yüzünden (0,3,0)/(0,4,0) specificity taşır ve dosya sonundaki overlay iptalini (`.az-header--overlay .az-header__inner`, 0,2,0 !important) YENER → overlay header'ın ŞEFFAF dış kabuğuna koyu modda tam-genişlik cam biner (logo/nav/aksiyonların arkasında ikinci katman). Açık modda taban kuralı (0,2,0) overlay iptaliyle eşit specificity → kaynak sırasıyla overlay kazanır, o yüzden AÇIK doğruydu. Kaynak temizliği (::before ile aynı desen): koyu yüzeyi `:not(.az-header --overlay)` ile iç/klasik header'lara sınırla; overlay'de üç bağımsız cam yüzey zaten kendi zeminini verir. YENİ !important yaması EKLENMEDİ. */ [data-theme="dark"] .az-header:not(.az-header--overlay) .az-header__inner { background-color: var(--anz-glass) !important; border: 1px solid var(--anz-edge) !important; box-shadow: var(--anz-shadow-2), inset 0 1px 0 var(--anz-sheen) !important; } [data-theme="dark"] .az-header.scrolled:not(.az-header--overlay) .az-header__inner { box-shadow: var(--anz-shadow-3), inset 0 1px 0 var(--anz-sheen) !important; } @supports not ((backdrop-filter: blur(var(--az-blur-xl, 20px))) or (-webkit-backdrop-filter: blur(var(--az-blur-xl, 20px)))) { .az-header .az-header__inner { background: rgba(255, 252, 247, .96) !important; } [data-theme="dark"] .az-header:not(.az-header--overlay) .az-header__inner { background: var(--anz-card) !important; } } /* 7.96.0 — aynı kök neden: bu yedekler `.effects-reduced`/`[data-reduced-effects]` ile (0,3,0)/(0,4,0)'a çıkıp overlay iptalini (0,2,0) yener; overlay header `:not(.az-header--overlay)` ile HARİÇ tutulur (overlay'in kendi opak yedeği §3242 bloğunda tek tek yüzeye uygulanır). */ .effects-reduced .az-header:not(.az-header--overlay) .az-header__inner, [data-reduced-effects="true"] .az-header:not(.az-header--overlay) .az-header__inner { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 252, 247, .97) !important; background-image: none !important; } [data-theme="dark"].effects-reduced .az-header:not(.az-header--overlay) .az-header__inner, [data-theme="dark"][data-reduced-effects="true"] .az-header:not(.az-header--overlay) .az-header__inner { background: var(--anz-card) !important; } /* ============================================================ 7.76.0/7.80.0 — MASAÜSTÜ ANA SAYFA HEADER kompozisyonu (üç bağımsız yüzey) TEK OTORİTE olarak dosya sonundaki "ANZELHA HOME DESKTOP HEADER — FINAL AUTHORITY" bloğuna taşındı. Aynı seçicileri iki ayrı yerde override etmemek için eski 7.76.0 overlay bloğu buradan kaldırıldı; bkz. dosya sonu. ::before cam katmanı da yukarıda `:not(.az-header--overlay)` ile iç sayfalara sınırlandı. ============================================================ */ /* ---- 5) (7.73.0) Eski hero perde ince ayarı kaldırıldı — perde sistemi yok. ---- */ /* ---- 6) Hero CTA mikro etkileşimleri (160ms, iOS eğrisi). rgba(215,161,75,…) = --anz-gold'un alfa türevi (tek palet). ---- */ .az-button { transition: transform 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease; } @media (hover: hover) and (pointer: fine) { .az-button--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(169, 118, 44, .36), inset 0 1px 0 rgba(255, 255, 255, .4); } .az-button--light:hover { border-color: rgba(215, 161, 75, .5) !important; background: rgba(215, 161, 75, .1) !important; color: var(--anz-text) !important; } } .az-button:active { transform: translateY(0) scale(.98); } /* ---- 7/9) Kart hover'ları: kalkış 4px → 3px (talimat: en fazla 2-3px); kategori ikonun %5 büyümesi, okun 3px kayması; şube fotoğrafında %2.5 doğal yakınlaşma. Hepsi transform/opacity — layout kaymaz. ---- */ .az-home--ios27 .az-cat-card__bar b, .az-home--ios27 .az-cat-card__bar > .anzelha-icon--arrow-right { transition: transform 180ms cubic-bezier(.2, .8, .2, 1); } .az-home--ios27 .az-branch27__figure { overflow: hidden; } .az-home--ios27 .az-branch27__figure .az-editorial-picture__image { transition: transform 220ms var(--anz-ease); } @media (hover: hover) and (pointer: fine) { /* 7.48.0 — FINAL PREMIUM talimatı: kart kalkışı en fazla 2px. Kalkış kuralı artık yalnız 6) HOVER bloğunda (tek kaynak; duplicate silindi). */ .az-home--ios27 .az-cat-card:hover .az-cat-card__bar b { transform: scale(1.05); } .az-home--ios27 .az-cat-card:hover .az-cat-card__bar > .anzelha-icon--arrow-right { transform: translateX(3px); } .az-home--ios27 .az-branch27:hover .az-editorial-picture__image { transform: scale(1.025); } } /* ---- 12) İkon tutarlılığı: 2.4 istisnası kalkar, her yerde 2.2 ---- */ .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon, .az-home--ios27 .az-trust__grid article > b .anzelha-icon { stroke-width: 2.2; } /* ---- 14) Bu bloğun tüm geçişleri hareket azaltmada kapanır ---- */ @media (prefers-reduced-motion: reduce) { .az-header .az-header__inner, .az-brand .anzelha-brand-mark, .az-header__actions .az-order-button, .az-button, .az-home--ios27 .az-cat-card__bar b, .az-home--ios27 .az-cat-card__bar > .anzelha-icon--arrow-right, .az-home--ios27 .az-branch27__figure .az-editorial-picture__image { transition: none; } .az-header.scrolled .az-brand .anzelha-brand-mark { transform: none; } } /* ============================================================ 7.43.0 — FINAL UI/UX REVIEW (4 bileşen): footer alt menü, yukarı dön, menü açılır paneli, şubeler açılır paneli. Yalnız düzen/görsel kalite; işlev ve bağlantılar aynı. ============================================================ */ /* 7.56.0: 1) footer alt menü ve 2) yukarı dön kuralları TEK FOOTER OTORİTESİ bloğuna taşındı (tekrar ezme bitti). */ /* ---- 3/4) Açılır paneller: ortak zemin (Header cam diliyle aynı; 7.38 tek cam kuralı .az-nav-drop'u zaten kapsıyor — burada yalnız iç düzen). ---- */ .az-nav-drop { padding: 12px; border-radius: var(--anz-r-md, 20px); } .az-nav-drop a { transition: background-color 160ms ease; } .az-nav-drop a:hover, .az-nav-drop a:focus-visible { background: var(--anz-bg-2) !important; } .az-nav-drop__group { margin: 16px 6px 6px; color: var(--anz-text-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .az-nav-drop__group:first-child { margin-top: 4px; } /* Mega — 7.265.0 REFERANS DİZİLİM: sol "Menü Kategorileri" KART ızgarası (3 kolon; dönemsel sayfa kategorileri altta geniş kart), sağ "Hızlı Erişim" kartları, altta yıldızlı not + altın CTA şeridi. Panel geniş olduğundan tetikleyicinin sol kenarına hizalı kalır (8.5'teki mevcut `.az-header .az-nav-drop--mega { left:0; transform:none }` otoritesi). */ /* 7.267.0 — kompakt mega menü (kullanıcı talimatı: "çok büyük, küçült"): panel 1020px→760px, kart/dolgu/ikon ölçüleri sıkılaştırıldı; dizilim aynı. */ /* 7.363.0 — mega menü referans genişliği: 820px panel referanstaki geniş/ferah kompozisyona göre dar kalıyordu ("dar/sola yapışık" geri bildirimi). Panel 1040px'e çıkarıldı (viewport'a clamp'li; base .az-nav-drop max-width taşmayı kesiyor). Sol kenar hizası (left:0) ve dizilim aynı; yalnız genişlik büyüdü. */ .az-nav-drop--mega { min-width: min(1040px, calc(100vw - 48px)); padding: 16px 16px 10px; } .az-nav-drop--mega .az-mega { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 24px; } .az-nav-drop--mega .az-mega__col { gap: 0; } .az-nav-drop--mega .az-nav-drop__group { margin: 0 2px 10px; } /* Kategori kartları: 6 kolonluk ızgara — normal kart 2 kolon (satırda 3 kart), geniş dönemsel kart 3 kolon (satırda 2 kart) kaplar. */ .az-mega__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-content: start; } /* Özgüllük notu: bundle'daki `.az-nav-drop a` (0,1,1) gap/padding'i eziyordu — `.az-nav-drop` öncülüyle (0,2,0) geçilir (ölçülüp yakalandı). */ .az-nav-drop .az-mega__tile { display: flex; flex-direction: row; align-items: center; gap: 8px; grid-column: span 2; min-height: 44px; padding: 0 10px; border: 1px solid var(--anz-border); border-radius: 12px; background: rgba(255, 255, 255, .55); white-space: nowrap; } .az-nav-drop .az-mega__tile--wide { grid-column: span 3; } .az-nav-drop .az-mega__tile .anzelha-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--anz-gold); } .az-nav-drop .az-mega__tile strong { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; } /* Hızlı Erişim kartları: daire ikon + iki satır metin + ince sağ ok. */ .az-nav-drop .az-mega__quick { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border: 1px solid var(--anz-border); border-radius: 13px; background: rgba(255, 255, 255, .55); } .az-nav-drop .az-mega__quick + .az-mega__quick { margin-top: 8px; } .az-mega__quick-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--anz-border); border-radius: 50%; background: var(--anz-bg-2); color: var(--anz-text); font-style: normal; } .az-mega__quick-icon .anzelha-icon { width: 16px; height: 16px; } .az-mega__quick-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; } .az-mega__quick-text strong { color: var(--anz-text); font-size: 13px; font-weight: 700; } .az-mega__quick-text small { color: var(--anz-text-2); font-size: 11.5px; line-height: 1.35; } .az-nav-drop .az-mega__quick > .anzelha-icon:last-child { width: 16px; height: 16px; flex: 0 0 auto; color: var(--anz-text-2); } /* Alt şerit: yıldızlı davet notu solda, altın CTA sağda. */ .az-mega__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 7px 7px 7px 12px; border-radius: 12px; background: var(--anz-bg-2); } .az-mega__note { display: inline-flex; align-items: center; gap: 8px; color: var(--anz-text-2); font-size: 12.5px; } .az-mega__note .anzelha-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--anz-gold); } .az-mega__footer .az-nav-drop__all { margin-top: 0; flex: 0 0 auto; width: auto; padding: 8px 14px !important; } /* Koyu tema: kart yüzeyleri panel camının üstünde hafif beyaz cam. */ [data-theme="dark"] .az-nav-drop .az-mega__tile, [data-theme="dark"] .az-nav-drop .az-mega__quick { background: rgba(255, 255, 255, .04); } [data-theme="dark"] .az-mega__quick-icon { background: rgba(255, 255, 255, .06); } /* Şubeler: iki marka, tek kompakt ve erişilebilir panel. */ .az-nav-drop--branches { width: 390px; max-height: min(76vh, 650px); overflow-y: auto; } .az-branch-menu-group + .az-branch-menu-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--anz-border); } .az-branch-menu-group__header { display: flex; align-items: center; min-height: 32px; padding: 0 12px 6px; color: var(--anz-text-2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .az-branch-menu-group__header img { display: block; width: auto; max-width: 168px; height: 28px; object-fit: contain; object-position: left center; } /* 7.288.0 (kullanıcı talimatı): Lahmacun yatay logosu koyu yeşildir, koyu zeminde okunmaz — koyu modda logo gizlenir, yerine grup etiketi YAZI ile (mevcut başlık tipografisiyle) gösterilir. Açık modda logo kalır, yazı gizli. Aynı desen mobil şube sheet'i için mobile-app.css'te. */ .az-branch-brand-text { display: none; } [data-theme="dark"] .az-branch-menu-group__header img { display: none; } [data-theme="dark"] .az-branch-menu-group__header .az-branch-brand-text { display: block; } .az-nav-drop .az-branch-menu-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px 12px; border-radius: 14px; } .az-branch-menu-row > span { display: grid; gap: 3px; min-width: 0; } .az-branch-menu-row > .anzelha-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--anz-gold); } .az-nav-drop--branches .az-branch-menu-row strong { color: var(--anz-text); font-size: 15px; font-weight: 700; } .az-nav-drop--branches .az-branch-menu-row small { color: var(--anz-text-2); font-size: 12px; line-height: 1.45; white-space: normal; } @media (hover: hover) and (pointer: fine) { .az-branch-menu-row { transition: background-color 160ms ease, transform 160ms ease; } .az-branch-menu-row:hover { transform: translateY(-1px); } } /* Tek güçlü CTA: altın hap (butonlarla aynı reçete) */ .az-nav-drop__all { justify-content: center; gap: 8px; margin-top: 12px; padding: 12px 16px !important; border-top: 0; border-radius: 12px; background: linear-gradient(135deg, var(--anz-gold-hover) 0%, var(--anz-gold) 52%, #a9762c 100%) !important; color: #2a1b06 !important; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(169, 118, 44, .28), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform 160ms ease, box-shadow 160ms ease; } .az-nav-drop__all svg { width: 16px; height: 16px; } @media (hover: hover) and (pointer: fine) { .az-nav-drop__all:hover { background: linear-gradient(135deg, var(--anz-gold-hover) 0%, var(--anz-gold-hover) 52%, var(--anz-gold) 100%) !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(169, 118, 44, .34), inset 0 1px 0 rgba(255, 255, 255, .3); } } @media (prefers-reduced-motion: reduce) { .az-nav-drop a, .az-nav-drop__all, .az-branch-menu-row { transition: none; transform: none !important; } } /* ============================================================ 7.44.0 — FINAL POLISH: AÇILIR PANELLER = HEADER MALZEMESİ ------------------------------------------------------------ Talimat 5: paneller Header'ın DOĞAL UZANTISI gibi okunmalı. 7.42 header reçetesinin birebir aynısı: zemin, kenar, yarıçap, gölge (kompakt kademe — panel yüzer), blur min(kademe, 22px). ============================================================ */ .az-nav-drop { background-color: rgba(255, 252, 247, .96) !important; background-image: linear-gradient(160deg, var(--anz-sheen) 0%, transparent 46%) !important; border: 1px solid rgba(255, 255, 255, .72) !important; border-radius: var(--anz-r-lg, 26px) !important; box-shadow: 0 18px 42px rgba(53, 39, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: blur(min(var(--anz-blur), 22px)) saturate(145%) !important; backdrop-filter: blur(min(var(--anz-blur), 22px)) saturate(145%) !important; } [data-theme="dark"] .az-nav-drop { background-color: rgba(24, 26, 28, .96) !important; border: 1px solid var(--anz-edge) !important; box-shadow: var(--anz-shadow-3), inset 0 1px 0 var(--anz-sheen) !important; } @supports not ((backdrop-filter: blur(var(--az-blur-xl, 20px))) or (-webkit-backdrop-filter: blur(var(--az-blur-xl, 20px)))) { .az-nav-drop { background: rgba(255, 252, 247, .97) !important; } [data-theme="dark"] .az-nav-drop { background: var(--anz-card) !important; } } .effects-reduced .az-nav-drop, [data-reduced-effects="true"] .az-nav-drop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 252, 247, .97) !important; background-image: none !important; } [data-theme="dark"].effects-reduced .az-nav-drop, [data-theme="dark"][data-reduced-effects="true"] .az-nav-drop { background: var(--anz-card) !important; } /* ============================================================ 7.50.0 — AÇILIR PANEL KONUM GARANTİSİ (kritik hata düzeltmesi) Kök neden: imleç ışığı JS'i panele .az-plight veriyordu ve .az-plight{position:relative} (bu dosya, geç yüklenir) bundle'ın position:absolute'unu ezip paneli akışa sokuyordu — header büyüyor, logo/bağlantılar/ikonlar aşağı kayıyordu. Panel artık ışık/manyetik hedefi DEĞİL (JS'te kaynaktan çıkarıldı) ve aşağıdaki (0,2,0) özgüllüklü kurallar tek sınıflı hiçbir geç kuralın konumu bozamamasını garanti eder. Header/nav kapsayıcı ölçüleri panel açıkken DEĞİŞMEZ (ölçülerek doğrulandı). ============================================================ */ .az-header .az-nav-item { position: relative; overflow: visible; } .az-header .az-nav-drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: var(--az-layer-dropdown); } /* Güvenli hover köprüsü (talimat 12): bağlantı ile panel arasındaki 10px boşluk panelin dokunma alanına dahil — imleç geçerken panel kapanmaz (JS'teki 150ms zarafet süresiyle birlikte çalışır). */ .az-header .az-nav-drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* Talimat 2: şube blokları daha ferah — adres sıkışmaz. */ .az-nav-drop--branches > a:not(.az-nav-drop__all) small { line-height: 1.5; } .az-nav-drop--branches > a:not(.az-nav-drop__all) + a:not(.az-nav-drop__all) { margin-top: 10px; } .az-nav-drop--branches > a:not(.az-nav-drop__all) + a:not(.az-nav-drop__all)::before { top: -5px; } /* ============================================================ 7.45.0 — FINAL POLISH EK: DURUM NOKTASI + iOS İMLEÇ ETKİLEŞİMİ ------------------------------------------------------------ Talimat 7-10. Efektler yalnız fare+hassas işaretleyicide ve effects-full kademesinde (JS kapı); mobil/düşük cihazda yok. Sistem imleci DEĞİŞMEZ; global mousemove YOK. ============================================================ */ /* ---- 7) "Şu an Açık": nefes alan premium durum noktası ---- Rozet cam kartın ÜSTÜNDE durduğundan backdrop-filter bilinçli verilmedi (7.41: iç içe blur katmanı yasak); yarı opak zemin aynı görünümü tek katmanda verir. */ .az-branch-card__status { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(44, 145, 82, .16); background: rgba(255, 255, 255, .72); } [data-theme="dark"] .az-branch-card__status { background: rgba(24, 26, 28, .72); } .az-branch-card__status .az-status__dot { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; } .az-branch-card__status.is-open .az-status__dot { background: #30a45f; box-shadow: 0 0 0 4px rgba(48, 164, 95, .1); } .az-branch-card__status.is-open .az-status__dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(48, 164, 95, .34); border-radius: inherit; animation: az-open-pulse 2.2s ease-out infinite; } @keyframes az-open-pulse { 0% { opacity: 0; transform: scale(.65); } 28% { opacity: .55; } 70%, 100% { opacity: 0; transform: scale(1.45); } } /* Kapalı/yakında: animasyon yok; durum renk + metinle anlatılır (metin zaten basılıyor). */ .az-branch-card__status.is-closed .az-status__dot { background: #8b8177; box-shadow: none; } .az-branch-card__status.is-soon .az-status__dot { background: #c7923f; box-shadow: 0 0 0 4px rgba(199, 146, 63, .12); } .az-branch-card__status.is-closed .az-status__dot::after, .az-branch-card__status.is-soon .az-status__dot::after { content: none; } @media (prefers-reduced-motion: reduce) { .az-branch-card__status.is-open .az-status__dot::after { animation: none; opacity: .35; transform: none; } } .effects-reduced .az-branch-card__status.is-open .az-status__dot::after { animation: none; } /* ---- 8.1) Cam yüzeyde imleç ışığı (.az-plight sınıfını JS ekler; JS yoksa/kapıdan geçemezse efekt hiç oluşmaz) ---- */ @media (hover: hover) and (pointer: fine) { .az-plight { position: relative; --az-px: 50%; --az-py: 50%; } .az-plight::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(240px circle at var(--az-px) var(--az-py), rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 34%, transparent 66%); transition: opacity 180ms ease; } .az-plight:hover::after { opacity: 1; } [data-theme="dark"] .az-plight::after { background: radial-gradient(240px circle at var(--az-px) var(--az-py), rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 34%, transparent 66%); } } @media (prefers-reduced-motion: reduce) { .az-plight::after { display: none; } } .effects-reduced .az-plight::after, .effects-balanced .az-plight::after { display: none; } /* ---- 8.3) Manyetik hareket: JS yalnız --az-m* değişkenlerini yazar, transform CSS'te kalır (hover kalkışıyla ÇAKIŞMAZ, üstüne biner). Sınırlar talimattan: ±2px, ±0.4deg. ---- */ @media (hover: hover) and (pointer: fine) { .az-hero27__buttons .az-button--primary:hover, .az-hero27__buttons .az-button--light:hover { transform: translateY(-2px) scale(1.01) translate3d(var(--az-mx, 0px), var(--az-my, 0px), 0) rotateX(var(--az-mrx, 0deg)) rotateY(var(--az-mry, 0deg)); } /* 7.48.0 — Talimat listesi: header telefon ikonu + şube kartı telefon/yön ikonları da manyetik; hover scale(1.01) tüm manyetik hedeflerde. */ .az-header__actions .az-order-button:hover, .az-header__actions .az-phone-action:hover, .az-branch27__actions .anzelha-icon-button:hover { transform: scale(1.01) translate3d(var(--az-mx, 0px), var(--az-my, 0px), 0) rotateX(var(--az-mrx, 0deg)) rotateY(var(--az-mry, 0deg)); } /* Anzelha Puan kartları (hero wallet + promo). */ .az-home--ios27 .az-hero27__wallet:hover, .az-home--ios27 .az-promo--puan:hover { transform: translateY(-2px) scale(1.01) translate3d(var(--az-mx, 0px), var(--az-my, 0px), 0) rotateX(var(--az-mrx, 0deg)) rotateY(var(--az-mry, 0deg)); } /* Final talimat (2026-07-20) md.7: şube kartının TAMAMI yeniden manyetik — fx.js bu kart için değişkenleri yarı ölçekle (±1px, ±0.2deg) yazar; 2px kalkış korunur, scale eklenmez (görünüm değişmez). */ .az-home--ios27 .az-branch27:hover { transform: translateY(-2px) translate3d(var(--az-mx, 0px), var(--az-my, 0px), 0) rotateX(var(--az-mrx, 0deg)) rotateY(var(--az-mry, 0deg)); } } /* ---- 8.4) Basma hissi: iOS active tepkisi tek reçete (7.48.0 — talimat değeri scale(.97); Puan kartları da kapsama girdi) ---- */ .az-button, .az-order-button, .az-nav-drop__all, .anzelha-icon-button, .az-icon-action, .az-hero27__wallet-cta, .az-promo--puan { transition-property: transform, box-shadow, background-color, border-color, color; } .az-button:active, .az-order-button:active, .az-nav-drop__all:active, .anzelha-icon-button:active, .az-icon-action:active, .az-hero27__wallet-cta:active, .az-promo--puan:active { transform: scale(.97); transition-duration: 80ms; } @media (prefers-reduced-motion: reduce) { .az-button:active, .az-order-button:active, .az-nav-drop__all:active, .anzelha-icon-button:active, .az-icon-action:active, .az-hero27__wallet-cta:active, .az-promo--puan:active { transform: none; } } /* ============================================================ 8.5) 7.48.0 — FINAL PREMIUM MICRO INTERACTIONS (talimat) Işıklı kartlarda hover'da: çok hafif iç kenar parlaması (border opaklığı artışı hissi) + çok hafif gölge güçlenmesi (ikisi de ::after üzerinde, yalnız opacity ile açılır) ve kendi kalkışı olmayan kartlarda 1px yükselme. Yalnız transform/opacity; dokunmatikte ve reduced-motion'da kapalı. ============================================================ */ @media (hover: hover) and (pointer: fine) { .az-plight::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 22px rgba(31, 26, 22, .1); } [data-theme="dark"] .az-plight::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 22px rgba(0, 0, 0, .28); } .az-home--ios27 .az-trust__grid article, .footer-social .footer-social__link { transition-property: transform, box-shadow, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(.16, 1, .3, 1); } .az-home--ios27 .az-trust__grid article:hover, .footer-social .footer-social__link:hover { transform: translateY(-1px); } /* Basma hissi kalkıştan güçlü kalsın (design-system'deki reçete korunur). */ .footer-social .footer-social__link:active { transform: scale(.97); } } @media (prefers-reduced-motion: reduce) { .az-home--ios27 .az-trust__grid article:hover, .footer-social .footer-social__link:hover { transform: none; } } .effects-reduced .az-trust__grid article:hover { transform: none; } /* ============================================================ 7.47.0 — HEADER: NAV ↔ AKSİYON GRUBU AYRIMI İki grup tek bütün gibi değil, iki ayrı bölüm gibi okunmalı. Grid gap'e ek 16px sol pay (talimat aralığı 12-20px) yalnız masaüstü nav'ın göründüğü genişlikte; mobil düzen (hamburger, 4px gap, 44px hedefler) hiç etkilenmez. ============================================================ */ @media (min-width: 1025px) { .az-header .az-header__actions { margin-left: 16px; } } /* ============================================================ 7.51.0 — TARAYICILAR ARASI HEADER DÜZELTMELERİ ------------------------------------------------------------ 1) Chrome iç içe backdrop-filter sınırlaması: kapsülün (.az-header__inner) kendi backdrop-filter'ı, İÇİNDEKİ açılır panellerin (.az-nav-drop) blur'unu Chrome'da devre dışı bırakıyordu (panel şeffaf/bulanıksız görünüyor, hero metni panelin arkasından okunuyordu; Safari doğruydu). Çözüm: kapsülün blur'u öğeden alınıp z-index:-1 ::before katmanına taşındı — kapsül görünümü birebir aynı kalır, paneller artık her iki motorda da kendi camını üretir. 2) Panel içi hizalama garantisi: design-system'deki üst bar kuralı artık panele sızmıyor (kapsam düzeltmesi orada); burada panel içi salt-sol hizalama ve mega ürün satırı (görsel + ad/fiyat yan yana) tek otoriteye bağlanır. ============================================================ */ .az-header .az-header__inner { position: relative; isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; } /* 7.80.0 KÖK NEDEN — Bu ::before, `.az-header__inner`'ın TAMAMINI kaplayan tek büyük cam yüzey üretir. Ana sayfa overlay header'ında üç parçalı hedef kompozisyonu (çıplak logo + ayrı nav pill + bağımsız daireler) örtüp "tek uzun kapsül" görüntüsüne yol açıyordu. Bu yüzden seçici artık YALNIZ iç sayfa header'ına (`:not(.az-header--overlay)`) bağlanır; overlay'de pseudo-element dosya sonundaki FINAL AUTHORITY bloğunda tamamen kapatılır. Genel `.az-header .az-header__inner::before` seçicisi bilinçle bırakılmadı. */ .az-header:not(.az-header--overlay) .az-header__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; -webkit-backdrop-filter: blur(var(--anz-blur, 16px)) saturate(var(--anz-sat, 145%)); backdrop-filter: blur(var(--anz-blur, 16px)) saturate(var(--anz-sat, 145%)); } /* Blur'suz kademeler: yedek zaten opak zemin verir, katman kapatılır. (Genel `* { backdrop-filter:none }` kuralları pseudo-elementi yakalamaz — bu yüzden burada açıkça kapatılır.) */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .az-header:not(.az-header--overlay) .az-header__inner::before { display: none; } } @media (prefers-reduced-transparency: reduce) { .az-header:not(.az-header--overlay) .az-header__inner::before { display: none; } } .effects-reduced .az-header:not(.az-header--overlay) .az-header__inner::before, [data-reduced-effects="true"] .az-header:not(.az-header--overlay) .az-header__inner::before { display: none; } /* Panel içeriği: metin solda başlar, satırlar sarabilir (üst barın nowrap'ı kalıtımla panele inmesin). */ .az-header .az-nav-drop a { align-items: flex-start; text-align: left; white-space: normal; } .az-header .az-nav-drop a strong { text-align: left; } /* Tek satır kalması İSTENEN öğeler: mega kategori kartı, Hızlı Erişim kartı ve altın CTA — üstteki (0,2,1) genel kural bunları ezmesin diye aynı .az-header öncülüyle (0,3,0) yazılır. 7.265.0: eski .az-mega__link / "Öne Çıkanlar" .az-mega__product kuralları yeni dizilimle kaldırıldı. */ .az-header .az-nav-drop .az-mega__tile { align-items: center; white-space: nowrap; } .az-header .az-nav-drop .az-mega__quick { align-items: center; white-space: nowrap; } .az-header .az-nav-drop .az-nav-drop__all { align-items: center; white-space: nowrap; } /* Mega panel tetikleyiciye ORTALANMAZ: 560px panel 1280-1366px'te sol viewport kenarından taşıyordu (ölçüldü: 1280'de -30px). Panel, Apple menüleri gibi tetikleyicinin SOL kenarına hizalanır — hiçbir masaüstü genişlikte taşmaz. Dar Şubeler paneli ortalı kalabilir (taşmıyor). */ .az-header .az-nav-drop--mega { left: 0; transform: none; } .az-header .az-nav-drop { max-width: calc(100vw - 32px); } /* ============================================================ 8.6) 7.52.0 — TELEFON İKONU SİNYAL ANİMASYONU (talimat) ------------------------------------------------------------ Yalnız hover / focus-visible / (dokunmatikte JS'in verdiği tek seferlik .is-signal) tetikler; sonsuz döngü YOK — animasyon tek koşuda iki dalga yapar (~%40'ta sönüş, ~%58'de hafif tekrar) ve doğal duruşta biter. Kullanıcı ayrılıp geri gelince CSS animasyonu kendiliğinden yeniden başlar (özellik kalkıp geri gelir). Yalnız transform/opacity; boyut/konum özellikleri ANİME EDİLMEZ — header geometrisi değişmez. tel: bağlantısına dokunulmadı. ============================================================ */ /* 7.53.0 — Görünürlük kalibrasyonu: dış yayın kutusu ~8px olduğundan eski scale(1.12) yalnız ~1px üretiyordu ve 22px ikonda algılanmıyordu. Yeni eğri: yaylar sıfırdan belirip scale 1.24'e açılır (dış yayda ~1.9px, talimat sınırı ≤2px), aralarda 0'a yakın söner — iki dalga net okunur. */ @keyframes az-phone-wave { 0% { opacity: 0; transform: scale(.68); } 16% { opacity: 1; transform: scale(1.24); } /* 1. dalga: dışa ~1.9px (≤2px) */ 36% { opacity: .08; transform: scale(.82); } /* belirgin sönüş */ 54% { opacity: 1; transform: scale(1.14); } /* 2. dalga: daha hafif */ 78%, 100% { opacity: 1; transform: scale(1); } /* ilk hâle dönüş */ } @keyframes az-phone-body { 0%, 100% { transform: rotate(0deg); } 24% { transform: rotate(1deg); } /* talimat üst sınırı: 1° */ 56% { transform: rotate(.5deg); } } /* 7.55.0 — SÜREKLİ ZARİF NABIZ (güncel talimat: "fare gelmediğinde de hareket etsin çizgiler" — önceki "sürekli çalışmayacak" maddesini bilinçli geçersiz kılar). Boşta: ~2.8sn'de bir yumuşak tek sinyal (yaylar hafifçe söner, ~1.2px dışa açılıp doğal hâle döner; iç yay önde, dış yay 140ms fazla farkıyla). Hover/odak/dokunuş bu kuralı ÖZGÜLLÜKLE ezer ve güçlü iki dalgalı patlamayı oynatır; ayrılınca nabız kendiliğinden devam eder. Reduced-motion'da ikisi de kapalı. */ @keyframes az-phone-wave-idle { 0%, 58%, 100% { opacity: 1; transform: scale(1); } 9% { opacity: .3; transform: scale(.92); } 24% { opacity: 1; transform: scale(1.16); } /* ~1.2px dışa (≤2px) */ 42% { opacity: .9; transform: scale(1); } } /* Yaylar kendi kutusunun sol-alt köşesinden (yayılma merkezi) ölçeklenir. fill-box tüm modern motorlarda ortak — tarayıcıya özel kural YOK. */ .az-phone-action .az-phone-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: az-phone-wave-idle 2800ms ease-in-out infinite both; } .az-phone-action .az-phone-wave--outer { animation-delay: 140ms; } .az-phone-action .az-phone-body { transform-box: fill-box; transform-origin: 50% 50%; } /* Fare hover'ı yalnız gerçek imleçli cihazlarda (dokunmatikteki yapay hover'a takılmaz); klavye odağı ve dokunmatik tek-seferlik .is-signal (main.js pointerdown'da verir, animationend'de siler) her cihazda. */ @media (hover: hover) and (pointer: fine) { .az-phone-action:hover .az-phone-wave { animation: az-phone-wave 780ms cubic-bezier(.3, .7, .4, 1) 1 both; } .az-phone-action:hover .az-phone-wave--outer { animation-delay: 110ms; } .az-phone-action:hover .az-phone-body { animation: az-phone-body 780ms ease-in-out 1 both; } } .az-phone-action:focus-visible .az-phone-wave, .az-phone-action.is-signal .az-phone-wave { animation: az-phone-wave 780ms cubic-bezier(.3, .7, .4, 1) 1 both; } /* İçten dışa sıra: iç yay önce, dış yay ~100ms sonra (backwards: gecikme sırasında 0% karesi uygulanır → dış yay beklerken görünmez, "belirir"). */ .az-phone-action:focus-visible .az-phone-wave--outer, .az-phone-action.is-signal .az-phone-wave--outer { animation-delay: 110ms; } .az-phone-action:focus-visible .az-phone-body, .az-phone-action.is-signal .az-phone-body { animation: az-phone-body 780ms ease-in-out 1 both; } @media (prefers-reduced-motion: reduce) { .az-phone-action .az-phone-wave, .az-phone-action .az-phone-body { animation: none !important; } } .effects-reduced .az-phone-action .az-phone-wave, .effects-reduced .az-phone-action .az-phone-body { animation: none !important; } /* ============================================================ 7.60.0 — TEK PRINT/PDF KATMANI (Ana Düzeltme md.11) ------------------------------------------------------------ Dağınık print kuralları (design-system yasal bloğu, 7.35 print bloğu, content-visibility tek satırı) burada birleşti; başka dosyada @media print KALMADI. Boş hero/görsel, dev boşluk ve kayıp footer sorunlarının kök nedenleri: - content-visibility:auto baskıda boyanmıyordu → visible. - Eski yasal blok .site-footer'ı gizliyordu → footer kalır. - Kartlar sayfa ortasında bölünüyordu → kart bazında avoid. JS tarafı (main.js md.11): beforeprint'te lazy görseller eager, Yazdır düğmesinde fonts.ready + görsel yükleme + 2×rAF beklenir. ============================================================ */ @media print { /* 1) Ekran kabuğu gizlenir; footer ve yasal bilgiler KALIR. */ .az-header, .az-header.glass-navigation, .az-mobile-tabs, .az-to-top, .anzelha-whatsapp, .wa-greet, .wa-tip, .wa-chat, .az-sheet, .anzelha-menu-panel, .az-search-sheet, .az-minicart, .az-branch-sheet, .az-theme-menu, .skip-link, .az-legal-print, .page-hero .az-button, .az-text-action { display: none !important; } /* 2) Tembel render kapanır: tüm bölümler her koşulda boyanır. */ body.home .az-section, .site-footer { content-visibility: visible !important; contain-intrinsic-size: none !important; } /* 3) Reveal/geçiş artıkları sıfırlanır — yarım animasyon, boş kutu kalmaz. */ [data-az-reveal], .az-section, .az-promo, .az-cat-card, .az-branch27 { opacity: 1 !important; transform: none !important; transition: none !important; } /* 4) Akış: sabit öğe boşluğu ve dev dolgu yok. */ html { scroll-padding-top: 0 !important; } body { padding-bottom: 0 !important; } .az-home--ios27 .az-hero27 { padding-top: 0 !important; } .az-home--ios27 .az-section { padding-block: 18px !important; } .az-home--ios27 .az-section, .az-home--ios27 .az-hero27__stage, .az-home--ios27 .az-branch27, .site-footer { min-height: auto !important; max-height: none !important; height: auto !important; } /* Yatay şeritler baskıda tek sütuna açılır (kesik kart kalmaz). */ .az-home--ios27 .az-branches27__cards { display: block !important; overflow: visible !important; } .az-home--ios27 .az-branch27 { max-width: 100% !important; margin-bottom: 12pt; } /* 12 Çeşit İkram (7.62.0): ekrandaki kart-başına-ekran şerit baskıda sayfa-başına-tek-kart üretiyordu (A4 içerik genişliği mobil kırılımı tetikler + 4/3 foto + break-inside:avoid). Baskıda foto kapanır, şerit 3 sütunlu kompakt ad+not ızgarasına iner; kartlar yine bölünmez. */ .az-ikram27__strip { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6pt !important; overflow: visible !important; padding-bottom: 0 !important; } .az-ikram27__card { max-width: 100% !important; margin: 0 !important; border: 1pt solid #d8cfc2 !important; border-radius: 6pt !important; background: #fff !important; } .az-ikram27__media { display: none !important; } .az-ikram27__open { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; } .az-ikram27__label { display: flex !important; flex-direction: column !important; gap: 1pt !important; padding: 5pt 7pt !important; min-height: 0 !important; } .az-ikram27__label strong { font-size: 9.5pt !important; line-height: 1.25 !important; color: #171717 !important; } .az-ikram27__label small { font-size: 8pt !important; line-height: 1.3 !important; color: #444 !important; } .az-ikram27__dots { display: none !important; } section, .footer-shell { break-inside: auto; } .site-footer { break-before: auto; page-break-before: auto; } /* 6) Cam yerine opak, okunaklı zemin; gerçek görseller boyanır. */ * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* 7.63.0: koyu temada `[data-theme="dark"] body` (0,1,1) buradaki `body` (0,0,1) kuralını özgüllükle eziyordu — koyu modda baskı zemini koyu kalıyordu (kök neden). html + temalı gövde seçicileri kapsandı. */ html, body, [data-theme="dark"] body, body.dark, body.light, .site-footer { background: #fff !important; color: #171717 !important; } /* 7.130.0 iki kartlı footer: kartlar ve kapsül sade, opak, ince kenarlı basılır; cam/gölge/degrade yok. Rozet ve dekoratif yaprak baskıya girmez. */ .site-footer .az-footer-card, .site-footer .az-footer-capsule { background: #f5f2ee !important; border: 1pt solid #d8cfc2 !important; border-radius: 8pt !important; } .site-footer .az-footer-card::after { display: none !important; } .site-footer h2, .site-footer a, .site-footer p, .site-footer .az-footer-row__label, .site-footer .az-footer-capsule__ssl, .site-footer .az-footer-copy, .site-footer .az-footer-capsule, .site-footer .az-footer-paybadge { color: #171717 !important; } .site-footer .az-footer-leaf, .site-footer .az-footer-reach__badge { display: none !important; } .site-footer .az-footer-row { border: 0 !important; background: none !important; min-height: 0 !important; padding: 2pt 0 !important; } .site-footer .az-footer-row__icon, .site-footer .az-footer-row__arrow { display: none !important; } .site-footer .az-footer-capsule { break-inside: avoid; } .az-home--ios27 .az-cat-card__figure, .az-home--ios27 .az-branch27__figure, .az-home--ios27 .az-promo__photo, .az-home--ios27 .az-wideband__photo, .anzelha-brand-mark, .anzelha-footer-mark { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* 7) Etkileşimli harita baskıya girmez; yerine erişilebilir şube listesi (adres + durum + yol tarifi) basılır (7.125.0 şube haritası). */ .az-branchmap__stage { display: none !important; } .az-has-branchmap .az-branchmap__list { position: static !important; width: auto !important; height: auto !important; margin: 12px 0 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } .az-branchmap__list a::after { content: " — " attr(href); font-size: 9pt; color: #444; word-break: break-all; } /* 9) Yasal belgeler: tek okuma sütunu, saf siyah metin. */ .az-legal-doc { max-width: 100% !important; font-size: 12pt; color: #000; } .az-legal-doc p { color: #000; } .az-legal-toc a { text-decoration: none; color: #000; } } /* ============================================================================ ANZELHA ÜST MENÜ — KADEMELİ GENİŞLİK BÜTÇESİ SİSTEMİ (7.81.0) ---------------------------------------------------------------------------- Masaüstü/overlay header yerleşiminin TEK otoritesi. 7.80.0'daki grid + `width:max-content` overlay bloğunu değiştirir. KÖK NEDEN (7.80.0): `grid-template-columns: auto minmax(0,1fr) auto` + nav `width:max-content` gerçek bir genişlik BÜTÇESİ kurmuyordu. Logo + nav + aksiyon + boşlukların toplamı header'ı geçtiğinde orta kolon daralsa bile nav max-content kaldığı için gruplar birbirine biniyor, "Sıra Gecesi" kesiliyor, farklı font metriklerinde (Safari/Chrome/Windows) sonuç değişiyordu. ÇÖZÜM: dış kabuk = ÖLÇÜLEBİLİR üç gruplu flex (logo | ortalı nav pill | aksiyonlar); her grup net bir flex davranışı taşır. Kademeler header'ın GERÇEK genişliğine göre öğe içi ölçüleri küçültür — negatif margin, transform:scale veya body overflow-x gizleme YOK. Kademeler (header genişliği = min(100% - 40px, 1540px) olduğundan viewport @media == header container genişliği; container query burada birebir aynı sonucu verir ve BİLİNÇLİ olarak tekrarlanmamıştır — tek otorite/tek kaynak, bkz. CHANGELOG 7.81.0): 0. Header ekseni + nav görünürlük kırılımı (tüm header'lar) 1. Base overlay yerleşimi (üç gruplu flex, ≥1024) 2. Tam masaüstü ≥1280px (ortalı cam nav pill) 3. Kompakt masaüstü 1280-1439px 4. Tablet / dar 1024-1279px (tam nav → hamburger çekmece) 5. Mobil devir ≤1023px (kompozisyon otoritesi mobile-app.css) 6. Tarayıcı yedekleri (@supports / reduced-transparency / effects-reduced) Kapsam: nav görünürlük kırılımı TÜM header'lara (.az-header) uygulanır; koyu cam yüzeyler yalnız overlay'e (.az-header--overlay = ana sayfa hero). Mobil app bar (≤767) mobile-app.css otoritesinde kalır — buradan dokunulmaz. ============================================================ */ /* ---- 0. Header ekseni (§3): 100vw yerine 100% (sabit öğede scrollbar taşması yaratmaz, bkz. §11/§20); 40px yan nefes; 1540 üst sınır. -------- */ @media (min-width: 1024px) { /* İki sınıflı seçici (0,2,0): design-system'in `.az-header.glass-navigation {padding:0 24px}` (0,2,0 !important) kuralını yener; overlay'de yan dolgu SIFIRLANIR (genişlik zaten 20px içe alıyor) → tam nav pill için ~48px daha kullanılabilir eksen. */ .az-header.az-header--overlay { left: 0 !important; right: 0 !important; width: min(calc(100% - 40px), 1540px) !important; max-width: 1540px !important; margin-inline: auto !important; padding: 0 !important; } } /* ---- 0b. Masaüstü nav pill YALNIZ ≥1280px. 1024-1279 bandında tam nav hamburger çekmecesine taşınır (§2 eşikleri, §8). Bu, design-system.css'in "nav ≥1024 görünür" kuralını bilinçle geçersiz kılar; panel ≥1024'te kart olarak açılır (bkz. mobile sheet sözleşmesi). Tüm header'lara uygulanır. */ @media (min-width: 1024px) and (max-width: 1279px) { .az-header .az-desktop-nav { display: none !important; } .az-header__actions .az-menu-toggle { display: grid !important; order: 8; } /* §8 çekirdek aksiyonlar: telefon + çalışma durumu bu bantta GÖRÜNÜR (nav gittiği için yer var; design-system bunları eski dar-nav bandında gizliyordu). */ .az-header__actions .az-phone-action, .az-header__actions .az-clock-action { display: inline-flex !important; } } /* ============================================================================ 1. BASE OVERLAY YERLEŞİMİ — üç gruplu flex (≥1024, yalnız ana sayfa hero) ============================================================================ */ @media (min-width: 1024px) { /* "Tek uzun kapsül"ün kökü olan dış cam katmanı (::before/::after) overlay'de TAMAMEN oluşturulmaz (saydam yapmak Chrome'da yetmez, blur kutusu kalır). */ .az-header--overlay .az-header__inner::before, .az-header--overlay .az-header__inner::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Dış kabuk = GÖRÜNMEZ hizalama sistemi (panel değil). §4 flex bütçesi. */ .az-header--overlay .az-header__inner { display: flex; align-items: center; width: 100%; min-width: 0; gap: clamp(16px, 1.6vw, 30px); padding: 0; overflow: visible; isolation: auto; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #f7f1e8 !important; } /* 7.84.0 (ÇİFT NAVİGASYON DÜZELTMESİ md.1) — KÖK NEDEN: yukarıdaki `.az-header.scrolled .az-header__inner { box-shadow: … !important }` kuralı (specificity 0,3,0) overlay'in `box-shadow:none` iptalini (0,2,0) YENER; bu yüzden şeffaf, tam genişlikteki overlay inner'a scroll'da (y>72 → .scrolled) TAM GENİŞLİKTE gölge + `inset 0 1px 0` beyaz çizgi biner. Bu bant, ortadaki nav pill ile sağ aksiyon dairelerinin ARKASINDA "ikinci bir header katmanı" gibi okunur — bildirilen "çift navigasyon / hayalet öğe" hatası budur. Çözüm: overlay scrolled inner'da yüzey üretimini burada (0,3,0 + !important; dosyada DAHA SONRA geldiği için scrolled kuralını kesin yener) tamamen kapat. Overlay'de dış kabuk DAİMA görünmez hizalama sistemidir; arka planı yalnız üç bağımsız cam yüzey (logo yok · nav pill · aksiyon daireleri) verir. Scroll sadece header yüksekliğini kompaktlar (56px), asla ikinci bir zemin çizmez. */ .az-header--overlay.scrolled .az-header__inner { background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Üç ölçülebilir grup: logo sabit | nav ortalı+esner | aksiyonlar sabit. nav'ın margin-inline:auto'su kalan boşluğu iki yana EŞİT dağıtır → pill gerçekten ORTALANIR; aksiyonlar sağ kenara yaslanır (auto marj tüm artı boşluğu nav'ın iki marjına verir, aksiyon öğesi sağ kenarda biter). */ .az-header--overlay .az-brand { flex: 0 0 auto; min-width: 0; justify-self: start; } /* nav ESNEMEZ (flex-shrink:0): daralınca içeriğinin altına inip "Sıra Gecesi"yi KIRPMAZ. Yer yetmezse gerçek taşma olur → kademeler bunu engeller (harness ile doğrulanır). margin-inline:auto pill'i ortalar (auto marj flex-grow/shrink'ten bağımsız çalışır). */ .az-header--overlay .az-desktop-nav { flex: 0 0 auto; min-width: 0; margin-inline: auto; } .az-header--overlay .az-header__actions { flex: 0 0 auto; min-width: 0; margin-left: 0; display: flex; align-items: center; gap: 8px; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Logo bağımsız (arkasında yüzey yok). */ .az-header--overlay .az-brand, .az-header--overlay .anzelha-logo-surface { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; } /* 7.108.0 — Hero artık TEMA-VARYANT (açık = parlak GÜNDÜZ / koyu = GECE): overlay header logosu tema-duyarlı. AÇIK mod → SİYAH logo (parlak gündüz görselinde okunur), KOYU mod → BEYAZ + turkuaz logo. Eski "iki temada da beyaz" kuralı hero iki temada KOYUYKEN geçerliydi; artık açık modda siyah logo şart. CSS filter yok, doğru dosya. 7.309.4: kare/boşluklu assets/brand varyantları kaldırıldı; sonraki katman yüklenemese bile bu ana yüzey katmanı doğru yatay dosyayı gösterir. */ .az-header--overlay .az-brand .anzelha-brand-mark { /* md.7 — hedef logo genişliği 130-145px (base 128-158 üst sınırı hedefi aşıyordu). */ width: clamp(132px, 10vw, 145px) !important; background-image: url("../images/brand/anzelha-logo.png?v=7.379.0") !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important; } [data-theme="dark"] .az-header--overlay .az-brand .anzelha-brand-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0") !important; } /* Bağımsız cam daireler (§5): her ikon kendi 42px dairesi. Sipariş Ver ve hamburger hariç. */ .az-header--overlay .az-header__actions > .az-icon-action, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle) { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: 50%; background: rgba(15, 31, 48, .38); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); color: #f7f1e8 !important; } /* Metinli compact aksiyonlar (giriş yapılınca hesap adı + puan): daire değil, aynı cam reçeteli kompakt hap (içerik metin — kırpılmaz). */ .az-header--overlay .az-header__actions > .az-compact-action { height: 42px; padding: 0 12px; border-radius: 999px; background: rgba(15, 31, 48, .38); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); color: #f7f1e8 !important; } .az-header--overlay .az-header__actions > .az-icon-action:hover, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle):hover, .az-header--overlay .az-header__actions > .az-compact-action:hover { background: rgba(28, 46, 64, .56); } /* §6 — "Sipariş Ver" ayrı altın kapsül (daire değil). */ .az-header--overlay .az-header__actions > .az-order-button { width: auto; min-width: 108px; height: 42px; padding-inline: 18px; border-radius: 999px; box-shadow: 0 12px 28px rgba(120, 82, 20, .40); } /* §7 — dil seçici ayrı küçük cam yüzey (en sağda). 7.84.0 (md.2) — "Sipariş Ver" altın kapsülü ile dil seçici birbirine yapışık duruyordu; aralarına flex `gap:8px` üstüne +5px ek nefes eklendi (toplam ~13px). Grup büyütülmez, ikon ölçüsü değişmez, taşma yaratmaz. */ .az-header--overlay .az-header__actions .az-language-switch--header { margin-left: 5px; min-width: 50px; height: 42px; border-radius: 999px; background: rgba(15, 31, 48, .38); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); color: #f7f1e8; } /* 7.82.0 (md.4) — HEDEF "TR ˅": masaüstü overlay dil seçicide dünya (globe) ikonu GİZLİ; yalnız dil kodu + küçük aşağı caret gösterilir. İç sayfa/çekmece dil seçicisi dokunulmaz (globe orada kalır). */ .az-header--overlay .az-language-switch--header .anzelha-icon--globe { display: none !important; } .az-header--overlay .az-language-switch--header > a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; padding: 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: inherit; } .az-header--overlay .az-language-switch--header > a::after { content: ""; /* 7.112.3 — KRİTİK: design-system.css `.az-language-switch a::after` bu SAME pseudo-öğeyi 44px dokunma-hedefi olarak kuruyor (position:absolute; left:0; right:0; top:50%; min-height:44px). O kural burada caret olarak yeniden kullanılırken bu özellikler SIZIYOR → caret 7×7 ˅ yerine mutlak konumlu, tam-genişlik, 44px, 45° döndürülmüş uzun diyagonal çizgi olarak pilin altına sarkıyordu. Sızan özellikler sıfırlanır; caret normal inline akışa döner (EN'in hemen sağında, dikey ortalı). */ position: static; inset: auto; min-height: 0; width: 7px; height: 7px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .78; flex: 0 0 auto; } /* 7.85.0 — DİL SEÇİCİ HOVER KONTRAST DÜZELTMESİ (kullanıcı geri bildirimi): overlay dil pili koyu lacivert CAM yüzeydedir (bg rgba(15,31,48,.38), metin #f7f1e8). language.css'in genel `.az-language-switch a:hover` kuralı iç bağlantıya BEYAZ zemin (--glass-strong ≈ rgba(255,255,255,.8)) veriyordu → açık krem "EN" metni ve caret kayboluyor, buton "boş beyaz kapsül" gibi görünüyordu. Overlay bağlamında (yalnız burada) hover/focus zemini daha koyu lacivert cam kalır, metin/caret açık ve okunur; kapsül şekli (999px), yükseklik, genişlik ve hizalama DEĞİŞMEZ. Yumuşak geçiş base `a` kuralındaki `background-color 180ms` ile korunur. İç sayfa/çekmece dil seçicisi ve diğer navigasyon öğeleri dokunulmaz. */ .az-header--overlay .az-language-switch--header > a:hover, .az-header--overlay .az-language-switch--header > a:focus-visible, .az-header--overlay .az-language-switch--header > a[aria-expanded="true"] { border-radius: 999px; background: rgba(20, 38, 58, .82); border-color: rgba(255, 255, 255, .32); color: #ffffff; } /* §12 — çalışma durumu dairesi nötr cam zeminlidir; durum rengi YALNIZ ikon/halka/nokta üzerindedir (design-system `.az-status--*` otoritesi). */ .az-header--overlay .az-header__actions > .az-clock-action { background: rgba(15, 31, 48, .38); } } /* ---- 1b. Aksiyon genişlik disiplini (§7 önceliği: "gerekirse ikincil aksiyonu ertele"). İkincil METİNLER yalnız gerçekten yer olduğunda görünür: Puan etiketi ≥1600px, hesap adı ≥1720px (design-system'in ≥1720 kapısı korunur), ad KAPAKLI (uzun ad taşma yaratmaz). Böylece tam nav pill ≥1440 tam kademesinde giriş yapılmış durumda da sığar. Tüm header'lara. */ @media (max-width: 1599px) { .az-header__actions .header-points-label { display: none; } } /* Hesap ADI header'ın kalabalık üst barında hiç açılmaz: tam nav pill + puan pill ile 1540 üst sınırına sığmaz. Ad hesap sayfasında ve hamburger çekmecesinde görünür; header'da hesap daima sade ikon aksiyonu kalır. */ .az-header__actions .az-account-name .header-user-name { display: none !important; } /* ---- 1c. HEDEF GÖRSEL İKON SETİ — 7.82.0 REVİZYON (ANA SAYFA FİNAL EKSİKLER md.3+6): Hedef sağ küme sırası: Arama · Telefon · Çalışma durumu · Kullanıcı · Sepet (+ altın Sipariş Ver + dil). ARAMA ≥1280'de GERİ GETİRİLDİ (md.3: "arama ikonu masaüstünde kaybolmamalı" — 7.81.1'in gizleme kararı latest-wins ile kalktı). TEMA (🌙) hedefte yok → yalnız o ≥1280'de gizli kalır (işlev çekmece prefs'inde ve tablet/mobil drawer'da korunur; ≥1280'de hamburger yok, tema sistem temasına uyar). 1024-1279 ve ≤767 bantlarında arama/tema DOKUNULMAZ. */ @media (min-width: 1280px) { /* FİNAL TEMA SEÇİCİ TALİMATI (latest-wins): masaüstünde tema düğmesi GÖRÜNÜR olmalı — önceki 7.82.0 "yer bütçesi" gizleme kararı bu talimatla kalktı. Sıra: Sipariş Ver → Tema → EN. Not: 1280-1499 dar bandında sığma canlı-testte doğrulanmalı (spec md.10). */ .az-header__actions .az-theme-toggle { display: inline-flex !important; } } /* ============================================================================ 2. NAV PILL YÜZEYİ ≥1280px — ortalı bağımsız cam nav pill (tam ölçüler ≥1500; 1280-1499 bandında Bölüm 3 kompaktı geçerli olur). Tam nav (5 öğe) + giriş yapılmış aksiyon grubu ancak ≥1500'de tam ölçüde sığar; 1280-1499 kompakt ölçüyle sığar (harness doğrulaması). 1024-1279 nav hamburger'dedir. ============================================================================ */ @media (min-width: 1280px) { .az-header--overlay .az-desktop-nav { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; max-width: 100%; min-height: 48px; padding: 4px 10px; gap: clamp(2px, .3vw, 6px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(15, 31, 48, .38); box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); } .az-header--overlay .az-desktop-nav > a, .az-header--overlay .az-desktop-nav .az-nav-item, .az-header--overlay .az-desktop-nav .az-nav-item > .az-nav-trigger { flex: 0 0 auto; min-width: 0; white-space: nowrap; } /* Tam kademe nav link ölçüsü (§6): okunur, kesilmez. 7.84.0 (md.5) — kapsül "gereğinden geniş" görünüyordu: menü öğelerinin yatay iç boşluğu 10px → 8px'e indirildi (−2px/öğe). Yazı boyutu, sıra, cam yüzey ve köşe yarıçapı DEĞİŞMEZ; nowrap korunduğundan metin alt satıra düşmez. */ .az-header--overlay .az-desktop-nav > a, .az-header--overlay .az-desktop-nav .az-nav-item > .az-nav-trigger { font-size: 13px; padding-inline: 8px; } /* 7.82.0 — NAV AYIRICI ÇİZGİLERİ (hedef referans): komşu üst menü öğeleri arasında ince, kısa, ortalanmış dikey çizgi. Beş bağlantı tek kesintisiz yazı grubu gibi görünmez. Kapsam yalnız overlay masaüstü nav pill'in DOĞRUDAN çocuklarıdır (`> * + *`); ilk öğede çizgi yok, son öğenin sağında çizgi yok. Açılır panel bağlantıları (.az-nav-drop içindekiler) ve sağdaki aksiyon ikonları (.az-header__actions) seçici kapsamı dışında kalır. Çakışma yok: doğrudan nav çocuklarında başka ::before bulunmaz. */ .az-header--overlay .az-desktop-nav > * { position: relative; } .az-header--overlay .az-desktop-nav > * + *::before { content: ""; position: absolute; left: -3px; top: 50%; width: 1px; height: 20px; transform: translateY(-50%); background: rgba(255, 255, 255, .20); pointer-events: none; } } /* ============================================================================ 3. KOMPAKT MASAÜSTÜ 1280-1499px (§7) — hedef kompozisyon korunur, kontrollü küçülür. Öncelik: boşluk → link padding → ikon 42→38 → logo → Sipariş Ver. 1440/1366 gibi yaygın dizüstü genişlikleri bu kademededir (giriş yapılmış durumda tam nav pill'i güvenle sığdırır). ============================================================================ */ @media (min-width: 1280px) and (max-width: 1499px) { .az-header--overlay .az-header__inner { gap: clamp(14px, 1.1vw, 18px); } .az-header--overlay .az-brand .anzelha-brand-mark { width: clamp(118px, 9vw, 132px); } .az-header--overlay .az-desktop-nav { padding: 3px 6px; min-height: 44px; gap: 2px; } .az-header--overlay .az-desktop-nav > a, .az-header--overlay .az-desktop-nav .az-nav-item > .az-nav-trigger { font-size: 12px; padding-inline: 7px; } /* 7.82.0 — kompakt kademe ayırıcı: daha kısa, daha düşük opaklık, dar gap'e uyarlı sol konum; metne değmez. */ .az-header--overlay .az-desktop-nav > * + *::before { height: 17px; left: -1px; background: rgba(255, 255, 255, .16); } .az-header--overlay .az-header__actions { gap: 6px; } .az-header--overlay .az-header__actions > .az-icon-action, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--overlay .az-header__actions > .az-clock-action { width: 38px; min-width: 38px; height: 38px; } .az-header--overlay .az-header__actions > .az-compact-action { height: 38px; padding: 0 10px; } .az-header--overlay .az-header__actions > .az-order-button { min-width: 96px; height: 40px; padding-inline: 14px; } .az-header--overlay .az-header__actions .az-language-switch--header { min-width: 44px; height: 38px; } } /* ============================================================================ 3b. 7.85.0 — DAR MASAÜSTÜ 1240-1279px (Safari / borderline dizüstü): TAM masaüstü nav bu bantta da görünür; header tablet/hamburger düzenine DÜŞMEZ. KÖK NEDEN (bkz. [[anzelha-safari-nav-breakpoint]]): Safari sayfa zoom'u veya macOS ekran ölçeklemesi efektif CSS genişliğini <1280'e düşürünce niyetli 1024-1279 tablet bandı devreye giriyor ve orta menü kayboluyordu (tarayıcı sniffing YOK — her motorda aynı, yalnız Safari efektif genişliği erken düşürüyor). KANIT: gerçek CSS zinciriyle headless fit testi — nav pill + GİRİŞ YAPILMIŞ tam aksiyon grubu (arama·telefon·durum·hesap·puan·sepet·Sipariş Ver·tema·dil) 1240px'e kadar KIRPILMADAN sığar; 1240 tam alt sınırdır (1200/1220'de dil seçici kırpılıyordu → 1240 altı bant bilinçle hamburger'da bırakıldı). TASARIM: EKLEMELİ + GERİ ALINABİLİR. Paylaşılan 1024-1279 tablet kuralları (§0b/§4, satır ~2762/2792) ve iç sayfa eşiği (1280) DEĞİŞTİRİLMEDİ; bu blok YALNIZ overlay'de (ana sayfa) ve YALNIZ 1240-1279'da onları override eder (eşit/yüksek specificity + dosyada daha sonra → kesin kazanır). Ölçüler 1280-1499 kompakt kademesiyle birebir aynıdır. Bloğu silmek davranışı 7.84.0'a döndürür. ============================================================================ */ @media (min-width: 1240px) and (max-width: 1279px) { /* nav pill GÖRÜNÜR — paylaşılan `.az-header .az-desktop-nav{display:none}` (eşit specificity, dosyada daha sonra) yenilir + kompakt pill görünümü. */ .az-header--overlay .az-desktop-nav { display: flex !important; align-items: center; width: -moz-fit-content; width: fit-content; max-width: 100%; min-width: 0; margin-inline: auto; padding: 3px 6px; min-height: 44px; gap: 2px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(15, 31, 48, .38); box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); } .az-header--overlay .az-desktop-nav > a, .az-header--overlay .az-desktop-nav .az-nav-item, .az-header--overlay .az-desktop-nav .az-nav-item > .az-nav-trigger { flex: 0 0 auto; min-width: 0; white-space: nowrap; } .az-header--overlay .az-desktop-nav > a, .az-header--overlay .az-desktop-nav .az-nav-item > .az-nav-trigger { font-size: 12px; padding-inline: 7px; } /* Nav ayırıcı çizgileri (kompakt kademeyle aynı). */ .az-header--overlay .az-desktop-nav > * { position: relative; } .az-header--overlay .az-desktop-nav > * + *::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 17px; transform: translateY(-50%); background: rgba(255, 255, 255, .16); pointer-events: none; } /* Hamburger GİZLİ — paylaşılan tablet kuralı + bundle.css'in max-width:1280 kuralını yener (overlay-scoped 0,3,x specificity → kazanır). */ .az-header--overlay .az-header__actions > .az-menu-toggle, .az-header--overlay .az-header__actions .az-menu-toggle { display: none !important; } /* FİNAL TEMA SEÇİCİ TALİMATI (latest-wins): overlay (ana sayfa hero) header'da da tema düğmesi GÖRÜNÜR. */ .az-header--overlay .az-header__actions .az-theme-toggle { display: inline-flex !important; } /* Kompakt kademe ÖLÇÜLERİ (1280-1499 ile birebir) — sığma bütçesi. */ .az-header--overlay .az-header__inner { gap: clamp(14px, 1.1vw, 18px); } .az-header--overlay .az-brand .anzelha-brand-mark { width: clamp(118px, 9vw, 132px); } .az-header--overlay .az-header__actions { gap: 6px; margin-left: 0; } .az-header--overlay .az-header__actions > .az-icon-action, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--overlay .az-header__actions > .az-clock-action { width: 38px; min-width: 38px; height: 38px; } .az-header--overlay .az-header__actions > .az-compact-action { height: 38px; padding: 0 10px; } .az-header--overlay .az-header__actions > .az-order-button { min-width: 96px; height: 40px; padding-inline: 14px; } .az-header--overlay .az-header__actions .az-language-switch--header { min-width: 44px; height: 38px; } /* Telefon + çalışma durumu görünür kalır (nav pill + bu aksiyonlar 1240'a kadar sığar — headless doğrulandı). */ .az-header--overlay .az-header__actions > .az-phone-action, .az-header--overlay .az-header__actions > .az-clock-action { display: inline-flex !important; } } /* ============================================================================ 4. TABLET / DAR MASAÜSTÜ 1024-1279px (§8) — logo + çekirdek aksiyonlar + hamburger; tam nav çekmecede. Tek satır, çakışma yok. ============================================================================ */ @media (min-width: 1024px) and (max-width: 1279px) { /* Aksiyonlar sağa yaslanır (nav gittiği için auto marj kalmadı). */ .az-header--overlay .az-header__actions { margin-left: auto; } /* Hamburger de aynı bağımsız cam daire. */ .az-header--overlay .az-header__actions > .az-menu-toggle { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: 50%; background: rgba(15, 31, 48, .38); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%); color: #f7f1e8 !important; } .az-header--overlay .az-header__actions > .az-menu-toggle:hover { background: rgba(28, 46, 64, .56); } } /* ============================================================================ 6. TARAYICI YEDEKLERİ — okunabilir opak yüzey (dev-standardı zorunluluğu). backdrop-filter devre dışı olduğunda öğelerin çapı/konumu DEĞİŞMEZ (§10). ============================================================================ */ @media (min-width: 1024px) { @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .az-header--overlay .az-desktop-nav, .az-header--overlay .az-header__actions > .az-icon-action, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--overlay .az-header__actions > .az-compact-action, .az-header--overlay .az-header__actions .az-language-switch--header, .az-header--overlay .az-header__actions > .az-clock-action { background: rgba(12, 24, 38, .90); } } } @media (min-width: 1024px) and (prefers-reduced-transparency: reduce) { .az-header--overlay .az-desktop-nav, .az-header--overlay .az-header__actions > .az-icon-action, .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--overlay .az-header__actions > .az-compact-action, .az-header--overlay .az-header__actions .az-language-switch--header, .az-header--overlay .az-header__actions > .az-clock-action { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 24, 38, .92); } } .effects-reduced .az-header--overlay .az-desktop-nav, [data-reduced-effects="true"] .az-header--overlay .az-desktop-nav, .effects-reduced .az-header--overlay .az-header__actions > .az-icon-action, [data-reduced-effects="true"] .az-header--overlay .az-header__actions > .az-icon-action, .effects-reduced .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), [data-reduced-effects="true"] .az-header--overlay .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .effects-reduced .az-header--overlay .az-header__actions .az-language-switch--header, [data-reduced-effects="true"] .az-header--overlay .az-header__actions .az-language-switch--header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 24, 38, .92); } /* ============================================================================ 7.93.0 — TEK NAVİGASYON / İÇ SAYFA HEADER AÇIK TEMA UYARLAMASI (TEK OTORİTE) ---------------------------------------------------------------------------- header.php artık TÜM sayfalara `.az-header--overlay` kompozisyonunu (üç bağımsız koyu cam yüzey) basar; iç sayfalar ayrıca `.az-header--dark` alır. Bu bloğun ÜZERİNDEKİ tüm `--overlay` kuralları (kompozisyon, ölçüler, kırılımlar, koyu tema renkleri, tarayıcı yedekleri) iç sayfalarda da AYNEN geçerlidir — çünkü surface-system.css HER sayfada yüklenir. İki bağlamsal fark vardır ve YALNIZCA burada giderilir: 1) home-ios27.css SADECE ana sayfada yüklenir → iç sayfada nav BAĞLANTI metni koyu (design-system `--az-ink`) kalırdı. Koyu pill üstünde görünmez olurdu → açık metne çevrilir. 2) Ana sayfada koyu yüzeyler koyu hero fotoğrafının üstünde durduğundan yarı saydam (`.38`) yeterlidir. İç sayfada arka plan AÇIK zemindir → aynı `.38` lacivert, açık krem metni okunmaz yapar (ölçüldü ~1.9:1). Bu yüzden açık temada yüzeyler koyulaştırılır ve logo, açık zeminde okunan KOYU varyanta çevrilir. KAPSAM: yalnız `html:not([data-theme="dark"])` + `@media (min-width:1024px)`. → Koyu temada ve ≤1023 mobilde bu blok HİÇ devreye girmez; iç sayfa header'ı ana sayfayla birebir aynı kalır (mobil app bar mobile-app.css otoritesinde). Sipariş Ver altın kapsülü ve dropdown panelleri her iki bağlamda da aynıdır. ============================================================================ */ @media (min-width: 1024px) { /* Logo: açık zeminde okunan koyu (orijinal) logo. Overlay'in `logo-dark.png` (açık renkli) dosyasını YALNIZ açık temada geri alır; koyu temada overlay'in açık logosu doğru kaldığı için burada dokunulmaz. */ html:not([data-theme="dark"]) .az-header--dark .az-brand .anzelha-brand-mark { background-image: url("../images/brand/anzelha-logo.png?v=7.379.0") !important; } /* Nav BAĞLANTI metni + tetikleyici: koyu pill üstünde açık. (home-ios27 iç sayfada yüklenmediği için burada verilir.) İkon ve chevron currentColor'dan beslenir → ayrıca renklendirmeye gerek yok. */ html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav > a, html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav .az-nav-item > .az-nav-trigger { color: #f6efe6; } html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav > a:hover, html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav .az-nav-item > .az-nav-trigger:hover { background: rgba(255, 255, 255, .12); } /* Aktif "Menü" durumu (mağaza/kategori/ürün → header.php aria-current="page"): koyu tint yerine açık tint, koyu pill üstünde görünür. */ html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav > a[aria-current="page"], html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav .az-nav-item > .az-nav-trigger[aria-current="page"] { background: rgba(255, 255, 255, .16); } /* Bağımsız cam yüzeyleri açık zemin için koyulaştır (aksiyon daireleri, metinli kompakt haplar, dil pili, çalışma durumu dairesi). Hue ana sayfayla AYNI lacivert; yalnız alfa .38 → .90 (açık krem metin net okunur). Kenar/blur/ölçü DEĞİŞMEZ. Overlay'in `:not()` seçicileriyle özgüllük eşitlenir + !important. */ html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-icon-action, html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-compact-action, html:not([data-theme="dark"]) .az-header--dark .az-header__actions .az-language-switch--header, html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-clock-action { background: rgba(15, 31, 48, .90) !important; } html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-icon-action:hover, html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle):hover, html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-compact-action:hover { background: rgba(28, 46, 64, .95) !important; } html:not([data-theme="dark"]) .az-header--dark .az-language-switch--header > a:hover, html:not([data-theme="dark"]) .az-header--dark .az-language-switch--header > a:focus-visible, html:not([data-theme="dark"]) .az-header--dark .az-language-switch--header > a[aria-expanded="true"] { background: rgba(20, 38, 58, .95) !important; } } /* Nav pill YALNIZ ≥1280'de görünür (§2) — açık temada onu da koyulaştır. */ @media (min-width: 1280px) { html:not([data-theme="dark"]) .az-header--dark .az-desktop-nav { background: rgba(15, 31, 48, .90) !important; } } /* Tablet/dar masaüstü (1024-1279): nav çekmecededir, hamburger dairesi görünür — açık temada onu da koyulaştır. */ @media (min-width: 1024px) and (max-width: 1279px) { html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-menu-toggle { background: rgba(15, 31, 48, .90) !important; } html:not([data-theme="dark"]) .az-header--dark .az-header__actions > .az-menu-toggle:hover { background: rgba(28, 46, 64, .95) !important; } } /* ============================================================================ 7.117.0 — REFERANS NAVİGASYON ÖLÇEĞİ VE HİZALAMASI ---------------------------------------------------------------------------- Yalnız masaüstü header geometrisini cilalar. İşaretleme, bağlantılar, dropdown kancaları ve kontrol sırası değişmez; hero içeriği bu bloğun kapsamı dışındadır. 1440–1799 aralığı aynı tek satırlı kompozisyonu orantılı küçültür, ≥1800 ise referanstaki tam ölçeği kullanır. ≤1023 mobil/tablet otoritesi değişmez. ============================================================================ */ @media (min-width: 1440px) { :root { --az-header-gap: clamp(28px, 1.65vw, 32px); } .az-header.az-header--home { width: calc(100% - clamp(96px, 6.25vw, 128px)) !important; max-width: none !important; } .az-header--home .az-header__inner { height: clamp(60px, 3.75vw, 68px); gap: clamp(18px, 1.65vw, 32px); } .az-header--home.scrolled .az-header__inner { height: clamp(58px, 3.45vw, 64px); } .az-header--home .az-brand { width: clamp(150px, 10.5vw, 205px); margin-left: 0; } .az-header--home .az-brand .anzelha-brand-mark { width: clamp(150px, 10.5vw, 205px) !important; max-width: none; height: clamp(54px, 3.7vw, 64px); } .az-header--home .az-desktop-nav { min-height: clamp(56px, 3.75vw, 68px); padding: 0 clamp(14px, 1.35vw, 26px); gap: 0; border-radius: clamp(28px, 1.9vw, 34px); background: rgba(105, 108, 108, .58); border-color: rgba(255, 255, 255, .30); box-shadow: 0 10px 24px rgba(24, 26, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-desktop-nav > a, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger { min-height: clamp(48px, 3.2vw, 58px); padding-inline: clamp(8px, .65vw, 12px); gap: clamp(6px, .42vw, 8px); font-size: clamp(12px, .78vw, 15px); } .az-header--home .az-desktop-nav > a > .anzelha-icon:first-child, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger > .anzelha-icon:first-child { width: clamp(17px, 1.05vw, 20px); height: clamp(17px, 1.05vw, 20px); } .az-header--home .az-desktop-nav .anzelha-icon--chevron-down { width: clamp(13px, .78vw, 15px); height: clamp(13px, .78vw, 15px); } .az-header--home .az-desktop-nav > * + *::before { left: 0; height: clamp(20px, 1.35vw, 26px); background: rgba(255, 255, 255, .24); } .az-header--home .az-header__actions { gap: clamp(8px, .58vw, 12px); } .az-header--home .az-header__actions > .az-icon-action, .az-header--home .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--home .az-header__actions > .az-clock-action { width: clamp(44px, 3vw, 60px); min-width: clamp(44px, 3vw, 60px); height: clamp(44px, 3vw, 60px); border-color: rgba(255, 255, 255, .30); background: rgba(105, 108, 108, .58); box-shadow: 0 9px 22px rgba(24, 26, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-header__actions .anzelha-icon { width: clamp(21px, 1.35vw, 27px); height: clamp(21px, 1.35vw, 27px); flex-basis: clamp(21px, 1.35vw, 27px); stroke-width: 1.8; } .az-header--home .az-header__actions > .az-order-button, .az-header--home.scrolled .az-header__actions > .az-order-button { min-width: clamp(120px, 7.9vw, 160px); height: clamp(46px, 3vw, 60px); padding-inline: clamp(20px, 1.35vw, 28px); border-radius: clamp(23px, 1.5vw, 30px) !important; background: var(--red, #d89a38); font-size: clamp(13px, .8vw, 16px); box-shadow: 0 10px 24px rgba(162, 103, 17, .30); } .az-header--home .az-header__actions .az-language-switch--header { margin-left: 0; min-width: clamp(60px, 4.7vw, 96px); height: clamp(44px, 3vw, 60px); border-color: rgba(255, 255, 255, .30); background: rgba(145, 99, 57, .68); box-shadow: 0 9px 22px rgba(24, 26, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-language-switch--header > a { padding-inline: clamp(12px, .9vw, 18px); font-size: clamp(13px, .8vw, 16px); } } @media (min-width: 1800px) { .az-header--home .az-brand { width: clamp(180px, 9.8vw, 205px); } .az-header--home .az-brand .anzelha-brand-mark { width: clamp(180px, 9.8vw, 205px) !important; } .az-header--home .az-desktop-nav { min-height: 68px; padding-inline: clamp(24px, 1.35vw, 28px); } .az-header--home .az-header__actions > .az-icon-action, .az-header--home .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--home .az-header__actions > .az-clock-action { width: clamp(56px, 2.9vw, 60px); min-width: clamp(56px, 2.9vw, 60px); height: clamp(56px, 2.9vw, 60px); } .az-header--home .az-header__actions > .az-order-button, .az-header--home.scrolled .az-header__actions > .az-order-button { min-width: clamp(150px, 7.8vw, 160px); height: clamp(56px, 2.9vw, 60px); } .az-header--home .az-header__actions .az-language-switch--header { min-width: clamp(88px, 4.6vw, 96px); height: clamp(56px, 2.9vw, 60px); } } /* ============================================================================ 7.120.0 — RETINA / DAR MASAÜSTÜ REFERANS KADEMESİ ---------------------------------------------------------------------------- Safari ve Retina ekranlarda 2560 fiziksel piksel yaklaşık 1280 CSS pikseli olarak raporlanabilir. 7.117.0 referans geometrisi 1440px'te başladığı için bu yaygın görünüm eski 38px kompakt ölçülerde kalıyordu. Yalnız ana sayfada, mevcut 1240px masaüstü-nav alt sınırından 1439px'e kadar aynı kompozisyonu sığan bir ara ölçekle uygular. Hero ve <=1239px mobil/tablet davranışı yoktur. ============================================================================ */ @media (min-width: 1240px) and (max-width: 1439px) { :root { --az-header-gap: clamp(22px, 1.9vw, 27px); } .az-header.az-header--home { width: calc(100% - clamp(40px, 3.35vw, 48px)) !important; max-width: none !important; } .az-header--home .az-header__inner { height: clamp(54px, 4.35vw, 60px); gap: clamp(11px, 1vw, 15px); } .az-header--home.scrolled .az-header__inner { height: clamp(52px, 4.15vw, 58px); } .az-header--home .az-brand { width: clamp(136px, 11vw, 154px); } .az-header--home .az-brand .anzelha-brand-mark { width: clamp(136px, 11vw, 154px) !important; max-width: none; height: clamp(50px, 4.1vw, 58px); } .az-header--home .az-desktop-nav { min-height: clamp(50px, 4vw, 56px); padding: 0 clamp(8px, .85vw, 12px); gap: 0; border-radius: 999px; background: rgba(105, 108, 108, .58); border-color: rgba(255, 255, 255, .30); box-shadow: 0 9px 22px rgba(24, 26, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-desktop-nav > a, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger { min-height: clamp(44px, 3.55vw, 50px); padding-inline: clamp(6px, .52vw, 8px); gap: clamp(4px, .42vw, 6px); font-size: clamp(12px, .9vw, 13px); } .az-header--home .az-desktop-nav > a > .anzelha-icon:first-child, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger > .anzelha-icon:first-child { width: clamp(16px, 1.3vw, 18px); height: clamp(16px, 1.3vw, 18px); } .az-header--home .az-desktop-nav .anzelha-icon--chevron-down { width: 13px; height: 13px; } .az-header--home .az-desktop-nav > * + *::before { left: 0; height: clamp(18px, 1.55vw, 22px); background: rgba(255, 255, 255, .22); } .az-header--home .az-header__actions { gap: clamp(5px, .48vw, 7px); } .az-header--home .az-header__actions > .az-icon-action, .az-header--home .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--home .az-header__actions > .az-clock-action { width: clamp(40px, 3.1vw, 44px); min-width: clamp(40px, 3.1vw, 44px); height: clamp(40px, 3.1vw, 44px); border-color: rgba(255, 255, 255, .30); background: rgba(105, 108, 108, .58); box-shadow: 0 8px 20px rgba(24, 26, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-header__actions .anzelha-icon { width: clamp(20px, 1.6vw, 23px); height: clamp(20px, 1.6vw, 23px); flex-basis: clamp(20px, 1.6vw, 23px); stroke-width: 1.8; } .az-header--home .az-header__actions > .az-order-button, .az-header--home.scrolled .az-header__actions > .az-order-button { min-width: clamp(104px, 8.6vw, 122px); height: clamp(42px, 3.35vw, 48px); padding-inline: clamp(14px, 1.2vw, 18px); border-radius: 999px !important; font-size: clamp(12px, .92vw, 14px); box-shadow: 0 9px 22px rgba(162, 103, 17, .28); } .az-header--home .az-header__actions .az-language-switch--header { margin-left: 0; min-width: clamp(52px, 4.35vw, 64px); height: clamp(40px, 3.1vw, 44px); border-color: rgba(255, 255, 255, .30); background: rgba(145, 99, 57, .68); box-shadow: 0 8px 20px rgba(24, 26, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } .az-header--home .az-language-switch--header > a { padding-inline: clamp(9px, .85vw, 12px); font-size: clamp(12px, .92vw, 14px); } } /* Referansın altın Sipariş Ver rengi tema modundan bağımsızdır. Tasarım sistemindeki koyu tema vurgu tokenı turkuaza döndüğü için burada ortak masaüstü header'ında sabit marka altını kullanılır. */ @media (min-width: 1240px) { .az-header--home .az-header__actions > .az-order-button, .az-header--home.scrolled .az-header__actions > .az-order-button { border-color: #b07e2e !important; background: #b07e2e !important; color: #fffaf2 !important; } .az-header--home .az-header__actions > .az-order-button:hover, .az-header--home .az-header__actions > .az-order-button:focus-visible { border-color: #c68f3a !important; background: #c68f3a !important; } } /* ============================================================================ 7.192.0 — ANA SAYFA ÜST MENÜSÜ TÜM SAYFALARDA ---------------------------------------------------------------------------- `header.php` her bağlamda aynı `az-header--home` kompozisyonunu basar. Ana sayfada ayrıca yüklenen home-ios27.css nav metnini açık renge çeviriyordu; iç sayfalarda o dosya yüklenmediği için aynı renk burada, site-geneli CSS zincirinde tanımlanır. Geometri, kırılma noktaları, logo ve aksiyon ölçüleri yukarıdaki kanonik `az-header--home` kurallarından gelir. ============================================================================ */ @media (min-width: 1024px) { .az-header--home .az-desktop-nav > a, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger, .az-header--home .az-brand, .az-header--home .az-header__actions .az-icon-action, .az-header--home .az-header__actions .anzelha-icon-button, .az-header--home .az-header__actions .az-compact-action { color: #f6efe6; } } /* ============================================================================ 7.121.0 — 22 TEMMUZ REFERANS HERO · AÇIK ALTIN / KOYU TURKUAZ ---------------------------------------------------------------------------- Bu blok ana sayfanın ilk ekranı için son otoritedir. Aynı işaretleme ve tüm gerçek bağlantılar iki modda aynı geometriyi paylaşır; yalnız görsel atmosfer ve vurgu rengi değişir. İç sayfalar kapsam dışıdır. ============================================================================ */ @media (min-width: 1024px) { .az-home--ios27 .az-hero27 { padding-bottom: 0 !important; } .az-home--ios27 .az-hero27__stage { min-height: 680px; /* §5.4 — svh yoksa px taban */ min-height: clamp(680px, 100svh, 920px); align-items: center; background: #f4eee5; } .az-home--ios27 .az-hero27__stage::after { background: radial-gradient(120% 105% at 56% 48%, transparent 64%, rgba(88, 58, 24, .13) 100%); } .az-home--ios27 .az-hero27__bg img { object-position: 50% 50%; filter: saturate(1.08) contrast(1.02) brightness(1.02); } .az-home--ios27 .az-hero27__copy { max-width: min(680px, 92%); margin-inline-start: clamp(48px, 3.35vw, 68px); padding-block: clamp(54px, 7vh, 72px) clamp(28px, 4vh, 42px); padding-inline-end: 0; } .az-home--ios27 .az-hero27__pill { min-height: 46px; padding-inline: 22px; gap: 10px; font-size: 13px; letter-spacing: .11em; } .az-home--ios27 .az-hero27__pill .anzelha-icon { width: 19px; height: 19px; } .az-home--ios27 .az-hero27__copy h1 { margin-block: 18px 16px; font-size: clamp(64px, 4vw, 82px); line-height: .94; letter-spacing: -.04em; } .az-home--ios27 .az-hero27__copy > p { max-width: 520px; font-size: clamp(17px, 1.08vw, 21px); line-height: 1.72; } .az-home--ios27 .az-hero27__buttons { gap: clamp(14px, 1.1vw, 22px); margin-top: 22px; } .az-home--ios27 .az-hero27__buttons .az-button { min-height: clamp(54px, 3.05vw, 62px); padding-inline: clamp(24px, 1.6vw, 32px); border-radius: 12px; font-size: clamp(15px, .9vw, 18px); } .az-home--ios27 .az-hero27__buttons .az-button--primary { min-width: clamp(190px, 12vw, 245px); } .az-home--ios27 .az-hero27__buttons .az-button--light { min-width: clamp(210px, 14vw, 290px); } .az-home--ios27 .az-hero27__buttons .anzelha-icon { width: 22px; height: 22px; } .az-home--ios27 .az-hero27__statusbar { /* 7.132.0 (kırpma düzeltmesi) — sabit `1.12fr 1fr .94fr` sütunları ve `clamp(540px,33vw,680px)` genişliği KALDIRILDI; bunlar masaüstünde de son çipi (özellikle EN "Our Branches") kesiyordu. Taban içeriğe-göre daralan kayan şerit (fit-content + overflow-x:auto) devralınır — burada yalnız masaüstü dış boşluk + köşe ayarlanır. */ margin-top: 32px; border-radius: 14px; } .az-home--ios27 .az-hero27__status-cell { min-height: clamp(72px, 4vw, 82px); padding: 10px 18px; gap: 12px; } .az-home--ios27 .az-hero27__status-cell > b { width: 44px; height: 44px; border-radius: 50%; } .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon { width: 23px; height: 23px; } .az-home--ios27 .az-hero27__status-cell strong { font-size: clamp(13px, .82vw, 16px); } .az-home--ios27 .az-hero27__status-cell small { font-size: clamp(12px, .72vw, 14px); } .az-home--ios27.az-home--board .az-hero27__wallet { top: clamp(170px, 28vh, 220px); right: clamp(48px, 5.5vw, 112px); width: clamp(360px, 23vw, 468px); min-height: clamp(300px, 17vw, 350px); padding: clamp(26px, 1.8vw, 36px); gap: clamp(13px, 1vw, 18px); border-radius: 24px; } .az-home--ios27 .az-hero27__wallet-head { font-size: clamp(13px, .85vw, 17px); } .az-home--ios27 .az-hero27__wallet-value { font-size: clamp(42px, 3vw, 58px); } .az-home--ios27 .az-hero27__wallet-value--text { font-size: clamp(25px, 1.8vw, 34px); } .az-home--ios27 .az-hero27__wallet-next { font-size: clamp(12px, .78vw, 15px); } .az-home--ios27 .az-hero27__wallet-cta { min-height: clamp(50px, 2.8vw, 58px); padding-inline: 18px; border-radius: 10px; font-size: clamp(14px, .9vw, 17px); } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head .anzelha-icon { width: 64px; height: 64px; padding: 17px; } .az-home--ios27.az-home--board .az-board { margin-top: 0 !important; } } /* 1280px Retina masaüstünde referansın dikey ölçeği belirgin kalır; genişlik bütçesi korunarak öğeler yalnız yatay yönde kompakt tutulur. */ @media (min-width: 1280px) and (max-width: 1439px) { .az-header.az-header--home { width: calc(100% - 32px) !important; } .az-header--home .az-header__inner { height: 60px; gap: 10px; } .az-header--home .az-brand { width: 148px; } .az-header--home .az-brand .anzelha-brand-mark { width: 148px !important; height: 58px; } .az-header--home .az-desktop-nav { min-height: 58px; padding-inline: 8px; } .az-header--home .az-desktop-nav > a, .az-header--home .az-desktop-nav .az-nav-item > .az-nav-trigger { min-height: 52px; } .az-header--home .az-header__actions { gap: 5px; } .az-header--home .az-header__actions > .az-icon-action, .az-header--home .az-header__actions > .anzelha-icon-button:not(.az-order-button):not(.az-menu-toggle), .az-header--home .az-header__actions > .az-clock-action { width: 44px; min-width: 44px; height: 44px; } .az-header--home .az-header__actions > .az-order-button, .az-header--home.scrolled .az-header__actions > .az-order-button { min-width: 112px; height: 48px; } .az-header--home .az-header__actions .az-language-switch--header { width: 44px; min-width: 44px; max-width: 44px; height: 44px; } .az-header--home .az-language-switch--header > a { padding-inline: 6px; } } /* 7.186.0 — Chrome Retina'da ekran 1280 CSS px olarak raporlandığında tam nav ve sekiz aksiyonun toplamı header'ı yaklaşık 15px aşıyor; EN kapsülü sağ kenarda yalnızca bir alt piksel payla kalıyordu. Sorun 1300px'te doğal olarak bitiyor. Yalnız 1280–1299px geçiş bandında iki ana grup aralığını 10→8px, aksiyon aralığını 5→3px sıkılaştır; hedefler 44px, metinler ve nav korunur. */ @media (min-width: 1280px) and (max-width: 1299px) { .az-header--home .az-header__inner { gap: 8px; } .az-header--home .az-header__actions { gap: 3px; } } /* Aynı Chrome alt-piksel riski geniş ölçeğin ilk pikselinde (1440px) yeniden oluşur: ölçekli aksiyon aralığı ~8.35px'e sıçrar ve EN'in sağ payı 1.55px'e düşer. Geometri 1520px'te doğal olarak toparlanana kadar aralığı 6px tutmak, EN'e en az 18px viewport payı verir; hedef ve içerik ölçüleri değişmez. */ @media (min-width: 1440px) and (max-width: 1519px) { .az-header--home .az-header__actions { gap: 6px; } } /* 7.178.0 — Navigasyon kompozisyonuna dokunmadan yalnız en sağdaki dil seçicinin geniş ekranlarda büyüyüp viewport dışına taşmasını engeller. */ @media (min-width: 1440px) { .az-header--home .az-header__actions .az-language-switch--header { width: clamp(52px, 3vw, 64px); min-width: clamp(52px, 3vw, 64px); } .az-header--home .az-language-switch--header > a { padding-inline: clamp(8px, .6vw, 12px); } } /* AÇIK MOD — referansın krem, koyu metin ve altın vurgu reçetesi. */ html:not([data-theme="dark"]) .az-home--ios27 .az-hero27--cinema .az-hero27__scrim { background: linear-gradient(90deg, rgba(249, 244, 235, .94) 0%, rgba(249, 244, 235, .75) 26%, rgba(249, 244, 235, .28) 47%, transparent 69%), linear-gradient(180deg, rgba(249, 244, 235, .14) 0%, transparent 68%, rgba(249, 244, 235, .18) 100%); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar { background-image: linear-gradient(160deg, rgba(255, 253, 250, .94), rgba(249, 244, 236, .9)) !important; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__wallet { background: linear-gradient(150deg, rgba(255, 252, 247, .93), rgba(247, 238, 224, .86)); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__buttons .az-button--primary { background: var(--action, #D93036) !important; color: var(--on-action, #FFFFFF) !important; } /* KOYU MOD — aynı geometri, gece fotoğrafı ve turkuaz marka vurgusu. */ [data-theme="dark"] .az-home--ios27 .az-hero27__bg img { filter: saturate(1.06) contrast(1.05) brightness(.82); } [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__copy h1 em, [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__pill, [data-theme="dark"] .az-home--ios27 .az-hero27--cinema .az-hero27__pill .anzelha-icon, [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-head .anzelha-icon, [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-level, [data-theme="dark"] .az-home--ios27 .az-hero27__status-cell > b .anzelha-icon, [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-link:hover { color: #14C4CF; } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-bar i { background: var(--dark-accent, #14C4CF); } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-medal, [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-medal--card { border-color: color-mix(in srgb, var(--brand, #3FC6C6) 30%, transparent); background: var(--brand-soft, rgb(63 198 198 / .13)); color: var(--brand, #3FC6C6); } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet, [data-theme="dark"] .az-home--ios27 .az-hero27__statusbar { border-color: rgba(20, 196, 207, .28) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(41, 208, 218, .16) !important; } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet-cta { border-color: rgba(20, 196, 207, .38); background: rgba(20, 196, 207, .12); } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head .anzelha-icon { color: #14C4CF; border: 1px solid rgba(41, 208, 218, .3); background: rgba(20, 196, 207, .14); } [data-theme="dark"] .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314C4CF'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z'/%3E%3Cpath d='M18.6 15l.6 1.8 1.8 .6-1.8 .6-.6 1.8-.6-1.8-1.8-.6 1.8-.6Z'/%3E%3C/svg%3E"); } [data-theme="dark"] .az-home--ios27 .az-hero27__buttons .az-button--primary, [data-theme="dark"] .az-header--home .az-header__actions > .az-order-button, [data-theme="dark"] .az-header--home.scrolled .az-header__actions > .az-order-button { border-color: rgb(var(--action-rgb, 217 48 54) / .62) !important; background: var(--action, #D93036) !important; color: var(--on-action, #FFFFFF) !important; box-shadow: 0 12px 30px rgb(var(--action-rgb, 217 48 54) / .28), inset 0 1px 0 rgba(255, 255, 255, .28) !important; } [data-theme="dark"] .az-home--ios27 .az-hero27__buttons .az-button--primary:hover, [data-theme="dark"] .az-header--home .az-header__actions > .az-order-button:hover, [data-theme="dark"] .az-header--home .az-header__actions > .az-order-button:focus-visible { background: var(--action-hover, #C0272D) !important; } /* Mobilde mevcut dikey sıra korunur; yeni palet ve yüzey dili taşar fakat tam ekran masaüstü ölçüleri telefona zorlanmaz. */ @media (max-width: 1023px) { .az-home--ios27 .az-hero27__stage { min-height: 520px; min-height: clamp(520px, 72svh, 680px); } /* §5.4 — svh yoksa px taban */ .az-home--ios27 .az-hero27__copy { padding-top: clamp(96px, 16vw, 132px); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27--cinema .az-hero27__scrim { background: linear-gradient(180deg, rgba(249, 244, 235, .42) 0%, rgba(249, 244, 235, .16) 36%, rgba(249, 244, 235, .82) 100%); } } /* ============================================================================ 7.168.0 — 24 TEMMUZ HERO DİKEY RİTİM VE DURUM HİZASI Referans kompozisyondaki daha alçak metin ekseni, başlık/açıklama/aksiyon yakınlığı ve saat ikonu–durum metni hizası. İçerik ve hedefler değişmez. ============================================================================ */ @media (min-width: 1024px) { .az-home--ios27 .az-hero27__copy { transform: translateY(clamp(28px, 4.2vh, 48px)); } .az-home--ios27 .az-hero27__copy h1 { margin-block: 20px 18px; } .az-home--ios27 .az-hero27__copy > p { line-height: 1.62; } .az-home--ios27 .az-hero27__buttons { margin-top: 20px; } .az-home--ios27 .az-hero27__statusbar { margin-top: 26px; } .az-home--ios27 .az-hero27__status-cell--schedule { align-items: center; gap: 14px; } .az-home--ios27 .az-hero27__status-cell--schedule .az-hero27__status-badge { display: grid; place-items: center; align-self: center; margin: 0; } .az-home--ios27 .az-hero27__status-text { display: grid; align-content: center; min-height: 44px; line-height: 1.25; } } @media (min-width: 1024px) and (max-height: 760px) { .az-home--ios27 .az-hero27__copy { transform: translateY(clamp(18px, 3vh, 28px)); } } @media (max-width: 1023px) { .az-home--ios27 .az-hero27__copy { transform: translateY(clamp(10px, 2.4vw, 22px)); } .az-home--ios27 .az-hero27__copy h1 { margin-block: 16px 14px; } .az-home--ios27 .az-hero27__copy > p { line-height: 1.58; } .az-home--ios27 .az-hero27__status-cell--schedule { align-items: center; } .az-home--ios27 .az-hero27__status-badge, .az-home--ios27 .az-hero27__status-text { margin-block: 0; } } @media (max-width: 640px) { .az-home--ios27 .az-hero27__copy { transform: translateY(8px); } .az-home--ios27.az-home--board .az-hero27__status-cell--schedule { gap: 8px; } } /* ============================================================================ 7.169.0 — REFERANS GÖRSEL DIŞINA ÇIKMADAN HERO EŞLEŞTİRMESİ Masaüstü: üst-sol metin, alt-sol 2×2 hızlı panel ve sağ cam puan kartı. Ayrı CTA satırı referansta bulunmadığı ve hedefleri hızlı panelde zaten korunduğu için gizlenir. Mobilde aynı sıra akış içinde korunur. ============================================================================ */ .az-home--ios27 .az-hero27__wallet-signup { color: rgba(42, 35, 29, .78); font-size: clamp(12px, .78vw, 15px); line-height: 1.45; } .az-home--ios27 .az-hero27__wallet-signup a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head::after { display: none; } @media (min-width: 1024px) { .az-home--ios27 .az-hero27__copy { position: absolute; top: clamp(64px, 7.5vh, 82px); left: max(clamp(42px, 3.4vw, 62px), calc(50vw - var(--az-home-max, 1600px) / 2)); width: min(680px, 47vw); max-width: none; margin: 0; padding: 0; transform: none; } .az-home--ios27 .az-hero27__copy h1 { margin-block: clamp(24px, 2.4vh, 30px) 24px; font-size: clamp(68px, 5.15vw, 96px); line-height: .94; } .az-home--ios27 .az-hero27__copy > p { max-width: 540px; font-size: clamp(17px, 1.1vw, 21px); line-height: 1.68; } .az-home--ios27 .az-hero27__buttons { display: none; } .az-home--ios27 .az-hero27__statusbar { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: clamp(560px, 39vw, 710px); margin-top: clamp(104px, 13vh, 132px); overflow: hidden; border-radius: 28px; } .az-home--ios27 .az-hero27__status-cell { min-width: 0; min-height: 92px; padding: 16px 28px; gap: 18px; } .az-home--ios27 .az-hero27__status-cell + .az-hero27__status-cell { border-left: 1px solid rgba(90, 70, 45, .14); } .az-home--ios27 .az-hero27__status-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .72); } .az-home--ios27 .az-hero27__status-cell:nth-child(3) { border-left: 0; } .az-home--ios27 .az-hero27__status-cell > b { width: 48px; height: 48px; } .az-home--ios27 .az-hero27__status-text { min-height: 48px; } .az-home--ios27.az-home--board .az-hero27__wallet { top: clamp(154px, 18vh, 184px); right: clamp(48px, 6vw, 116px); width: clamp(390px, 27vw, 505px); min-height: clamp(390px, 45vh, 470px); padding: clamp(32px, 2.25vw, 44px); align-content: start; gap: clamp(22px, 2.4vh, 30px); border-radius: 34px; } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-head .anzelha-icon { width: 78px; height: 78px; padding: 21px; } .az-home--ios27 .az-hero27__wallet--guest .az-hero27__wallet-next { max-width: 24ch; color: rgba(42, 35, 29, .88); font-size: clamp(16px, 1.05vw, 20px); } .az-home--ios27 .az-hero27__wallet-cta { min-height: 68px; border-radius: 14px; font-size: clamp(16px, 1.05vw, 20px); } } @media (min-width: 1024px) and (max-height: 760px) { .az-home--ios27 .az-hero27__copy { top: 58px; } .az-home--ios27 .az-hero27__copy h1 { font-size: clamp(62px, 4.7vw, 82px); margin-block: 18px; } .az-home--ios27 .az-hero27__statusbar { margin-top: 68px; } .az-home--ios27.az-home--board .az-hero27__wallet { top: 132px; min-height: 380px; } } @media (max-width: 1023px) { .az-home--ios27 .az-hero27__buttons { display: none; } .az-home--ios27 .az-hero27__copy { transform: none; } .az-home--ios27 .az-hero27__wallet-signup { color: var(--anz-text-muted, rgba(42, 35, 29, .72)); } } /* ========================================================================== 7.179.0 — iOS 27 KOMPAKT YUKARI ÇIK KONTROLÜ -------------------------------------------------------------------------- Büyük ve opak altın daire yerine 44px erişilebilir hedef içinde 16px ok, yarı saydam sıcak cam, ince iç parıltı ve daha hafif gölge kullanılır. Sabit konum, görünürlük davranışı ve WhatsApp mesafesi değişmez. ========================================================================== */ .az-to-top[data-az-top-always] { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .66); border-radius: 50%; background-color: rgba(250, 242, 231, .58); background-image: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 247, 234, .18)); color: var(--anz-gold, #b7812f); box-shadow: 0 8px 22px rgba(63, 43, 24, .15), inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(113, 78, 35, .08); -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%); transition: transform 180ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .az-to-top[data-az-top-always] svg, .az-to-top[data-az-top-always] .anzelha-icon { width: 16px; height: 16px; stroke-width: 2.15; } [data-theme="dark"] .az-to-top[data-az-top-always] { border-color: rgba(255, 255, 255, .2); background-color: rgba(24, 26, 28, .58); background-image: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(11, 12, 13, .24)); color: var(--anz-gold, #14C4CF); box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .16); } @media (hover: hover) and (pointer: fine) { .az-to-top[data-az-top-always]:hover { transform: translateY(-1px) scale(1.02); border-color: rgba(255, 255, 255, .82); background-color: rgba(255, 249, 240, .72); color: var(--anz-gold-hover, #c79442); box-shadow: 0 10px 26px rgba(63, 43, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .9); } [data-theme="dark"] .az-to-top[data-az-top-always]:hover { border-color: rgba(255, 255, 255, .3); background-color: rgba(28, 30, 32, .72); color: var(--anz-gold-hover, #29D0DA); box-shadow: 0 10px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .24); } } .az-to-top[data-az-top-always]:active { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .az-to-top[data-az-top-always] { transition: none; } .az-to-top[data-az-top-always]:hover, .az-to-top[data-az-top-always]:active { transform: none; } } /* ========================================================================== 7.232.0 — TEK PARÇA LIQUID GLASS İLETİŞİM + FOOTER -------------------------------------------------------------------------- Yalnız footer alanının yeni yerleşim otoritesidir. Üst navigasyon ve ana sayfanın önceki bölümleri bu seçicilerin kapsamı dışındadır. ========================================================================== */ .site-footer, .az-to-top { --footer-dur: 260ms; --footer-ease: cubic-bezier(.2, .8, .2, 1); --footer-panel-bg: rgba(255, 255, 255, .48); --footer-panel-border: rgba(255, 255, 255, .72); --footer-panel-shadow: 0 20px 50px rgba(44, 34, 20, .08), inset 0 1px 0 rgba(255, 255, 255, .88); --footer-divider: rgba(93, 74, 54, .13); --footer-action-bg: rgba(255, 255, 255, .27); --footer-action-hover: rgba(255, 255, 255, .52); --footer-action-border: rgba(107, 84, 58, .14); --footer-icon-bg: rgba(112, 87, 57, .07); } [data-theme="dark"] .site-footer, [data-theme="dark"] .az-to-top { --footer-panel-bg: rgba(24, 26, 28, .68); --footer-panel-border: rgba(255, 255, 255, .14); --footer-panel-shadow: 0 20px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .09); --footer-divider: rgba(255, 255, 255, .12); --footer-action-bg: rgba(255, 255, 255, .045); --footer-action-hover: rgba(255, 255, 255, .08); --footer-action-border: rgba(255, 255, 255, .12); --footer-icon-bg: rgba(255, 255, 255, .065); } .site-footer .footer-shell { width: calc(100% - 64px); max-width: 1480px; gap: 16px; margin: 24px auto; } .site-footer .az-footer-contact-glass { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 0; overflow: hidden; border: 1px solid var(--footer-panel-border); border-radius: 36px; background: var(--footer-panel-bg); box-shadow: var(--footer-panel-shadow); -webkit-backdrop-filter: blur(28px) saturate(115%); backdrop-filter: blur(28px) saturate(115%); } .site-footer .az-footer-contact-glass > * { min-width: 0; padding: clamp(30px, 3vw, 46px); } .site-footer .az-footer-brand { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; text-align: left; } .site-footer .az-footer-logo { display: block; max-width: 100%; } .site-footer .az-footer-logo .anzelha-footer-mark { width: clamp(164px, 13vw, 202px); height: clamp(63px, 5vw, 78px); aspect-ratio: auto; background-image: url("../images/brand/anzelha-logo.png?v=7.379.0"); } [data-theme="dark"] .site-footer .az-footer-logo .anzelha-footer-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0"); } .site-footer .az-footer-brand__title { margin: 20px 0 0; color: var(--footer-text); font-family: inherit; font-size: 14px; font-weight: 750; letter-spacing: .08em; line-height: 1.25; } .site-footer .az-footer-brand p { max-width: 440px; margin: 10px 0 0; color: var(--footer-soft); font-size: 15px; line-height: 1.65; text-align: left; text-wrap: pretty; } .site-footer .footer-social { justify-content: flex-start; gap: 10px; margin-top: 22px; } .site-footer .footer-social .footer-social__link { width: 46px; height: 46px; min-height: 46px; background: var(--footer-action-bg) !important; border-color: var(--footer-action-border) !important; box-shadow: 0 8px 20px rgba(44, 34, 20, .06); transition: transform var(--footer-dur) var(--footer-ease), background-color var(--footer-dur) ease, border-color var(--footer-dur) ease, box-shadow var(--footer-dur) ease; } .site-footer .az-footer-reach { border-left: 1px solid var(--footer-divider); } .site-footer .az-footer-reach__header { margin-bottom: 20px; } .site-footer .az-footer-reach__title { display: block; margin: 0; color: var(--footer-text); font-family: inherit; font-size: clamp(22px, 1.6vw, 28px); font-weight: 760; letter-spacing: -.025em; line-height: 1.15; } .site-footer .az-footer-reach__header p { margin: 7px 0 0; color: var(--footer-muted); font-size: 14px; line-height: 1.5; } .site-footer .az-footer-reach__list { gap: 10px; } .site-footer .az-footer-row--reach { width: 100%; min-height: 68px; padding: 8px 14px; gap: 14px; border: 1px solid var(--footer-action-border); border-radius: 18px; background: var(--footer-action-bg); color: var(--footer-text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(44, 34, 20, .035); transition: transform var(--footer-dur) var(--footer-ease), background-color var(--footer-dur) ease, border-color var(--footer-dur) ease, box-shadow var(--footer-dur) ease; } .site-footer .az-footer-row--reach .az-footer-row__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--footer-icon-bg); color: var(--footer-muted); } .site-footer .az-footer-row__content { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .site-footer .az-footer-row__eyebrow { color: var(--footer-muted); font-size: 11.5px; font-weight: 650; letter-spacing: .045em; line-height: 1.25; } .site-footer .az-footer-row--reach .az-footer-row__label { min-width: 0; color: var(--footer-text); font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .site-footer .az-footer-row--reach .az-footer-row__arrow { color: var(--footer-muted); } .site-footer .az-footer-row--wa .az-footer-row__icon { color: #25d366; background: rgba(37, 211, 102, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .site-footer .az-footer-capsule { display: flex; flex-wrap: nowrap; width: 100%; padding: 12px 18px; gap: 14px 22px; border: 1px solid var(--footer-panel-border); border-radius: 24px; background: var(--footer-panel-bg); box-shadow: 0 12px 32px rgba(44, 34, 20, .065), inset 0 1px 0 rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(20px) saturate(110%); backdrop-filter: blur(20px) saturate(110%); } .site-footer .az-footer-capsule__trust, .site-footer .az-footer-capsule__legal, .site-footer .az-footer-capsule__links { flex-wrap: nowrap; } .site-footer .az-footer-capsule__trust { min-width: 0; gap: 8px 12px; } .site-footer .az-footer-capsule__legal { min-width: max-content; gap: 8px 14px; } .site-footer .az-footer-capsule__links { gap: 4px 14px; } .site-footer .az-footer-paybadges { flex-wrap: nowrap; gap: 6px; } .site-footer .az-footer-paybadge { min-height: 28px; padding-inline: 9px; letter-spacing: .015em; } @media (hover: hover) and (pointer: fine) { .site-footer .az-footer-row--reach:hover { transform: translateY(-2px); border-color: var(--footer-hover-border); background: var(--footer-action-hover); box-shadow: 0 10px 24px rgba(44, 34, 20, .07); } .site-footer .az-footer-row--reach:hover .az-footer-row__label { color: var(--footer-text); } .site-footer .az-footer-row--reach:hover .az-footer-row__arrow { color: var(--footer-text); transform: translateX(3px); } .site-footer .footer-social .footer-social__link:hover { transform: translateY(-2px); background: var(--footer-action-hover) !important; box-shadow: 0 10px 24px rgba(44, 34, 20, .09); } } @media (max-width: 1080px) { .site-footer .footer-shell { width: calc(100% - 40px); } .site-footer .az-footer-capsule { flex-wrap: wrap; } .site-footer .az-footer-capsule__trust, .site-footer .az-footer-capsule__legal { width: 100%; justify-content: center; } } @media (max-width: 768px) { .site-footer .footer-shell { width: calc(100% - 24px); gap: 12px; margin-block: 16px calc(18px + env(safe-area-inset-bottom)); } .site-footer .az-footer-contact-glass { grid-template-columns: minmax(0, 1fr); border-radius: 28px; } .site-footer .az-footer-contact-glass > * { padding: 26px 22px; } .site-footer .az-footer-brand { align-items: center; text-align: center; } .site-footer .az-footer-brand__title, .site-footer .az-footer-brand p { text-align: center; } .site-footer .az-footer-brand p { max-width: 520px; font-size: 14px; line-height: 1.58; } .site-footer .footer-social { justify-content: center; margin-top: 18px; } .site-footer .az-footer-reach { border-top: 1px solid var(--footer-divider); border-left: 0; } .site-footer .az-footer-reach__header { margin-bottom: 16px; } .site-footer .az-footer-row--reach { min-height: 64px; } .site-footer .az-footer-capsule { padding: 10px 12px; gap: 4px; border-radius: 24px; text-align: center; } .site-footer .az-footer-capsule__trust { display: flex; flex-wrap: nowrap; gap: 5px; font-size: 9px; justify-content: center; } .site-footer .az-footer-capsule__ssl { gap: 3px; font-size: 9px; } .site-footer .az-footer-capsule__ssl .anzelha-icon { width: 13px; height: 13px; } .site-footer .az-footer-paybadges { flex-wrap: nowrap; gap: 3px; } .site-footer .az-footer-paybadge { min-height: 23px; padding-inline: 4px; font-size: 8.5px; letter-spacing: 0; } .site-footer .az-footer-capsule__legal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 0 7px; min-width: 0; font-size: 10px; } .site-footer .az-footer-capsule__links { flex-wrap: nowrap; gap: 5px; } .site-footer .az-footer-capsule__links a { min-height: 44px; font-size: 9.5px; white-space: nowrap; } .site-footer .az-footer-top { grid-column: 1 / -1; min-height: 44px; font-size: 10px; } } @media (max-width: 380px) { .site-footer .az-footer-contact-glass > * { padding-inline: 18px; } .site-footer .az-footer-row--reach { padding-inline: 10px; gap: 10px; } .site-footer .az-footer-row--reach .az-footer-row__icon { width: 42px; height: 42px; } .site-footer .az-footer-capsule__links { gap-inline: 10px; } } @media (prefers-reduced-transparency: reduce) { .site-footer .az-footer-contact-glass, .site-footer .az-footer-capsule { background: var(--footer-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .site-footer .az-footer-row--reach, .site-footer .az-footer-row--reach .az-footer-row__arrow, .site-footer .footer-social .footer-social__link { transition: none; } .site-footer .az-footer-row--reach:hover, .site-footer .az-footer-row--reach:active, .site-footer .az-footer-row--reach:hover .az-footer-row__arrow, .site-footer .footer-social .footer-social__link:hover, .site-footer .footer-social .footer-social__link:active { transform: none; } } /* ============================================================ KOYU MOD FİNAL BİLEŞEN KURALLARI (Final Koyu Mod Talimatı, 2026-07-26) ------------------------------------------------------------ Dosya sonu = son otorite. Koyu modda bütün sayfalarda aynı sistem: zemin #0B0C0D, renksiz Liquid Glass, turkuaz ana buton, #121416 form alanı, görünür odak halkası. Açık temaya hiçbir kural dokunmaz. ============================================================ */ /* ---- md.2: Bütün sitenin zemini tek renk ---- */ [data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .site, body.dark, body.dark-mode { background-color: var(--dark-bg, #0B0C0D); } /* main/section/footer kendi zeminini çizmez; tek akışkan #0B0C0D zemin (mevcut `background: transparent !important` kuralları bunu sağlar, burada yalnız güvence altına alınır). Ayrım boşluk + ince çizgi + renksiz cam iledir. */ /* ---- md.3: Renksiz Liquid Glass yardımcı sınıfı ---- */ [data-theme="dark"] .dark-glass, body.dark .dark-glass, body.dark-mode .dark-glass { background: var(--dark-glass, rgba(24, 26, 28, .72)); border: 1px solid var(--dark-border, rgba(255, 255, 255, .14)); box-shadow: 0 18px 50px var(--dark-shadow, rgba(0, 0, 0, .42)); -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%); border-radius: 28px; } /* ---- md.4: Ana işlem butonları her temada merkezî aksiyon kırmızısı ---- */ [data-theme="dark"] .button-primary, [data-theme="dark"] .btn-primary, [data-theme="dark"] .az-button--primary, [data-theme="dark"] .az-header__actions .az-order-button, [data-theme="dark"] .woocommerce a.checkout-button, [data-theme="dark"] .woocommerce button.button.alt, [data-theme="dark"] .woocommerce #place_order, [data-theme="dark"] .woocommerce .single_add_to_cart_button { background: var(--action, #D93036) !important; color: var(--on-action, #FFFFFF) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 12px 30px rgb(var(--action-rgb, 217 48 54) / .24), inset 0 1px 0 rgba(255, 255, 255, .2) !important; } @media (hover: hover) { [data-theme="dark"] .button-primary:hover, [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .az-button--primary:hover, [data-theme="dark"] .az-header__actions .az-order-button:hover, [data-theme="dark"] .woocommerce a.checkout-button:hover, [data-theme="dark"] .woocommerce button.button.alt:hover, [data-theme="dark"] .woocommerce #place_order:hover, [data-theme="dark"] .woocommerce .single_add_to_cart_button:hover:hover { background: var(--action-hover, #C0272D) !important; transform: translateY(-1px); } } [data-theme="dark"] .button-primary:active, [data-theme="dark"] .btn-primary:active, [data-theme="dark"] .az-button--primary:active, [data-theme="dark"] .az-header__actions .az-order-button:active, [data-theme="dark"] .woocommerce a.checkout-button:active, [data-theme="dark"] .woocommerce button.button.alt:active, [data-theme="dark"] .woocommerce #place_order:active, [data-theme="dark"] .woocommerce .single_add_to_cart_button:active:active { background: var(--action-pressed, #A91F25) !important; transform: scale(.985); } [data-theme="dark"] .button-primary:disabled, [data-theme="dark"] .btn-primary:disabled, [data-theme="dark"] .az-button--primary:disabled, [data-theme="dark"] .woocommerce button.button.alt:disabled, [data-theme="dark"] .woocommerce #place_order:disabled, [data-theme="dark"] .woocommerce .single_add_to_cart_button:disabled:disabled { background: var(--action-soft, rgb(217 48 54 / .13)) !important; color: var(--store-ink-2, #AAB4B6) !important; cursor: not-allowed; transform: none; } /* İkincil butonlar: renksiz cam. */ [data-theme="dark"] .button-secondary, [data-theme="dark"] .az-button--light, [data-theme="dark"] .az-button--ghost { background: rgba(255, 255, 255, 0.04) !important; color: var(--dark-text, #F5F7F8) !important; border: 1px solid var(--dark-border, rgba(255, 255, 255, .14)) !important; } /* ---- md.5: Form alanları ---- İstisnalar: onay kutusu/radyo/aralık kendi bileşen stilini korur; şube haritası arama girdisi açık kapsül üstünde koyu metinle kalır (branch-map.css !important kuralları kazanır). */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--dark-input, #121416); color: var(--dark-text, #F5F7F8); border: 1px solid var(--dark-border, rgba(255, 255, 255, .14)); border-radius: 16px; } /* :where() ile sıfır özgüllük: sayfa-özel kompakt kurallar (ör. üyelik kartının 44px alanları) bu tabanı ezebilir; genel formlar 48px kalır. */ [data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(.qty), select, textarea) { min-height: 48px; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dark-placeholder, #747B80); opacity: 1; } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--dark-accent, #14C4CF); box-shadow: 0 0 0 4px var(--dark-focus-ring, rgba(20, 196, 207, 0.38)); outline: none; } /* Hata ve başarı metinleri. */ [data-theme="dark"] .woocommerce-error, [data-theme="dark"] .az-field-error, [data-theme="dark"] .anzelha-form-error, [data-theme="dark"] .az-form-hint--error { color: var(--dark-error, #FF5D5D); } [data-theme="dark"] .woocommerce-message, [data-theme="dark"] .az-field-success, [data-theme="dark"] .az-form-hint--success { color: var(--dark-success, #32D583); } /* ---- md.5: Klavye odağı bütün buton ve bağlantılarda görünür ---- */ [data-theme="dark"] :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--dark-accent, #14C4CF); outline-offset: 3px; } /* ---- Perdeler: tek merkezî karartma ---- */ [data-theme="dark"] .anzelha-menu-panel__backdrop, [data-theme="dark"] .az-sheet__backdrop, [data-theme="dark"] .az-dialog__backdrop { background: var(--dark-overlay, rgba(0, 0, 0, 0.68)); } /* ========================================================================== 7.367.0 — MASAÜSTÜ PANORAMİK FOOTER REFERANS KİLİDİ -------------------------------------------------------------------------- Yalnız ≥1024px footer sunumunu yönetir. Mevcut mobil footer, üst menü, sayfa içeriği ve yüzen WhatsApp bileşeni bu kapsamın dışındadır. ========================================================================== */ @media (min-width: 1024px) { .site-footer { --footer-accent: #c7192d; --footer-accent-rgb: 199, 25, 45; --footer-copper: #c7192d; --footer-text: #17191c; --footer-soft: #4d5259; --footer-muted: #686e76; --footer-line: rgba(30, 34, 39, .15); --footer-glass: rgba(255, 255, 255, .78); --footer-glass-strong: rgba(255, 255, 255, .9); --footer-node: rgba(255, 255, 255, .62); --footer-node-border: rgba(199, 25, 45, .24); --footer-node-shadow: 0 16px 36px rgba(72, 32, 28, .1); --footer-opaque: #f8f7f5; position: relative; overflow: clip; padding: 112px 0 34px; background: #f8f7f5; color: var(--footer-text); } [data-theme="dark"] .site-footer { --footer-accent: #22c6d3; --footer-accent-rgb: 34, 198, 211; --footer-copper: #b8743c; --footer-text: #f5f7f8; --footer-soft: #b9bec3; --footer-muted: #90979f; --footer-line: rgba(255, 255, 255, .14); --footer-glass: rgba(13, 16, 18, .84); --footer-glass-strong: rgba(18, 22, 24, .94); --footer-node: rgba(255, 255, 255, .055); --footer-node-border: rgba(255, 255, 255, .23); --footer-node-shadow: 0 18px 42px rgba(0, 0, 0, .3); --footer-opaque: #0e1113; background: #050708; } .site-footer .footer-shell.anz-footer__deck { position: relative; display: block; width: calc(100% - 64px); max-width: 1480px; margin: 0 auto; border: 1px solid transparent; border-radius: 48px; background: linear-gradient(var(--footer-glass), var(--footer-glass)) padding-box, linear-gradient(118deg, rgba(var(--footer-accent-rgb), .9), rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, .16) 66%, var(--footer-copper)) border-box; box-shadow: 0 30px 80px rgba(41, 30, 19, .14), -8px 0 26px rgba(var(--footer-accent-rgb), .1), 8px 0 28px rgba(184, 116, 60, .14), inset 0 1px 0 rgba(255, 255, 255, .28); isolation: isolate; -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%); } [data-theme="dark"] .site-footer .footer-shell.anz-footer__deck { box-shadow: 0 34px 90px rgba(0, 0, 0, .48), -8px 0 28px rgba(34, 198, 211, .16), 8px 0 30px rgba(184, 116, 60, .17), inset 0 1px 0 rgba(255, 255, 255, .13); } .site-footer .footer-shell.anz-footer__deck::after { position: absolute; z-index: -1; inset: 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 36px; content: ""; pointer-events: none; } .site-footer .az-footer-contact-glass { position: static; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: 380px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-footer .az-footer-contact-glass > * { min-width: 0; } .site-footer .az-footer-brand { position: static; display: flex; align-items: flex-start; justify-content: center; padding: 92px 52px 42px; text-align: left; } .site-footer .az-footer-logo.anz-footer__logo-island { position: absolute; z-index: 3; top: -44px; left: clamp(150px, 12vw, 220px); display: grid; width: clamp(210px, 15vw, 285px); height: 96px; max-width: none; padding: 16px 26px; place-items: center; border: 1px solid transparent; border-radius: 34px; background: linear-gradient(var(--footer-glass-strong), var(--footer-glass-strong)) padding-box, linear-gradient(125deg, rgba(var(--footer-accent-rgb), .82), rgba(255, 255, 255, .56) 48%, var(--footer-copper)) border-box; box-shadow: 0 18px 42px rgba(28, 22, 18, .18), 0 0 0 7px rgba(var(--footer-accent-rgb), .035), inset 0 1px 0 rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%); } .site-footer .az-footer-logo.anz-footer__logo-island::after { position: absolute; top: calc(100% + 1px); left: 50%; width: 1px; height: 62px; background: linear-gradient(var(--footer-accent), rgba(var(--footer-accent-rgb), .18)); box-shadow: 0 0 12px rgba(var(--footer-accent-rgb), .4); content: ""; pointer-events: none; } .site-footer .az-footer-logo .anzelha-footer-mark { width: 100%; height: 64px; background-image: url("../images/brand/anzelha-logo.png?v=7.379.0"); background-position: center; background-size: contain; filter: none; } [data-theme="dark"] .site-footer .az-footer-logo .anzelha-footer-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0"); } .site-footer .az-footer-brand__title { margin: 0; color: var(--footer-text); font-size: 17px; font-weight: 780; letter-spacing: .09em; } .site-footer .az-footer-brand p { max-width: 390px; margin: 14px 0 0; color: var(--footer-soft); font-size: 15px; line-height: 1.72; text-align: left; } .site-footer .footer-social { justify-content: flex-start; gap: 14px; margin-top: 24px; } .site-footer .footer-social .footer-social__link { width: 54px; height: 54px; min-height: 54px; border-color: var(--footer-line) !important; background: var(--footer-node) !important; color: var(--footer-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); } .site-footer .az-footer-reach { position: relative; padding: 38px 52px 44px; border-top: 0; border-left: 1px solid var(--footer-line); } .site-footer .az-footer-reach__header { margin: 0; } .site-footer .az-footer-reach__title { color: var(--footer-text); font-size: clamp(23px, 1.7vw, 30px); font-weight: 780; } .site-footer .az-footer-reach__header p { margin-top: 6px; color: var(--footer-muted); font-size: 15px; } .site-footer .az-footer-reach__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); margin: 16px 0 0; padding-top: 76px; font-style: normal; } .site-footer .az-footer-reach__list::before { position: absolute; top: 30px; right: 3%; left: 3%; height: 1px; background: linear-gradient(90deg, transparent, var(--footer-accent) 9%, var(--footer-accent) 91%, transparent); box-shadow: 0 0 12px rgba(var(--footer-accent-rgb), .48); content: ""; pointer-events: none; } .site-footer .az-footer-row--reach { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; width: 100%; min-width: 0; min-height: 108px; padding: 27px 18px 17px; gap: 8px; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--footer-node), var(--footer-node)) padding-box, linear-gradient(135deg, rgba(var(--footer-accent-rgb), .48), rgba(255, 255, 255, .26), rgba(184, 116, 60, .42)) border-box; color: var(--footer-text); box-shadow: var(--footer-node-shadow), inset 0 1px 0 rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); } .site-footer .az-footer-row--reach::before { position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; border-top: 1px solid rgba(var(--footer-accent-rgb), .5); border-left: 1px solid rgba(var(--footer-accent-rgb), .5); background: var(--footer-glass-strong); content: ""; transform: translateX(-50%) rotate(45deg); } .site-footer .az-footer-row--reach .az-footer-row__icon { position: absolute; top: -75px; left: 50%; display: grid; width: 58px; height: 58px; border: 1px solid rgba(var(--footer-accent-rgb), .72); border-radius: 50%; background: var(--footer-glass-strong); color: var(--footer-accent); box-shadow: 0 0 0 6px rgba(var(--footer-accent-rgb), .045), 0 0 20px rgba(var(--footer-accent-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .25); transform: translateX(-50%); } .site-footer .az-footer-row--reach .az-footer-row__icon .anzelha-icon { width: 25px; height: 25px; } .site-footer .az-footer-row--wa .az-footer-row__icon { border-color: rgba(37, 211, 102, .78); background: var(--footer-glass-strong); color: #25d366; box-shadow: 0 0 0 6px rgba(37, 211, 102, .045), 0 0 20px rgba(37, 211, 102, .23), inset 0 1px 0 rgba(255, 255, 255, .25); } .site-footer .az-footer-row__content { min-width: 0; gap: 5px; } .site-footer .az-footer-row__eyebrow { color: var(--footer-muted); font-size: 13px; font-weight: 720; letter-spacing: .02em; } .site-footer .az-footer-row--reach .az-footer-row__label { min-width: 0; color: var(--footer-text); font-size: clamp(13px, 1vw, 16px); line-height: 1.35; overflow-wrap: anywhere; } .site-footer .az-footer-row--reach .az-footer-row__arrow { align-self: end; color: var(--footer-muted); } .site-footer .az-footer-capsule { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; width: 100%; min-height: 86px; margin: 0; padding: 18px max(132px, 9vw) 20px 42px; gap: 14px 28px; border: 0; border-top: 1px solid var(--footer-line); border-radius: 0 0 48px 48px; background: transparent; box-shadow: none; color: var(--footer-muted); -webkit-backdrop-filter: none; backdrop-filter: none; } .site-footer .az-footer-capsule__trust { display: inline-flex; flex-wrap: nowrap; gap: 10px 14px; } .site-footer .az-footer-capsule__ssl { color: var(--footer-text); white-space: nowrap; } .site-footer .az-footer-capsule__ssl .anzelha-icon { color: var(--footer-accent); } .site-footer .az-footer-paybadges { flex-wrap: nowrap; } .site-footer .az-footer-paybadge { min-height: 30px; border-color: var(--footer-line); background: var(--footer-node); color: var(--footer-soft); } .site-footer .az-footer-capsule__legal { min-width: 0; justify-content: flex-end; gap: 10px 18px; } .site-footer .az-footer-capsule__links { flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; } .site-footer .az-footer-capsule__links a, .site-footer .az-cookie__footer-link { min-height: 44px; color: var(--footer-muted); text-decoration: none; } .site-footer .az-cookie__footer-link { white-space: nowrap; } .site-footer .az-footer-top { min-height: 44px; color: var(--footer-accent); font-weight: 750; white-space: nowrap; } .site-footer :where(a, button):focus-visible { outline: 3px solid rgba(var(--footer-accent-rgb), .44); outline-offset: 4px; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .site-footer .az-footer-row--reach:hover, .site-footer .footer-social .footer-social__link:hover { transform: translateY(-2px); } .site-footer .az-footer-row--reach:hover { border-color: rgba(var(--footer-accent-rgb), .62); background: linear-gradient(var(--footer-node), var(--footer-node)) padding-box, linear-gradient(135deg, var(--footer-accent), rgba(255, 255, 255, .32), var(--footer-copper)) border-box; box-shadow: 0 22px 46px rgba(0, 0, 0, .18), 0 0 24px rgba(var(--footer-accent-rgb), .09); } .site-footer .az-footer-capsule__links a:hover, .site-footer .az-cookie__footer-link:hover, .site-footer .az-footer-top:hover { color: var(--footer-accent); } } @media (min-width: 1024px) and (max-width: 1399px) { .site-footer .az-footer-brand { padding-inline: 36px; } .site-footer .az-footer-reach { padding-inline: 36px; } .site-footer .az-footer-reach__list { gap: 14px; } .site-footer .az-footer-row--reach { padding-inline: 14px; } .site-footer .az-footer-capsule { grid-template-columns: 1fr; padding-right: max(132px, 13vw); } .site-footer .az-footer-capsule__legal { justify-content: flex-start; } .site-footer .az-footer-capsule__links { justify-content: flex-start; } } @media (min-width: 1024px) and (prefers-reduced-transparency: reduce) { .site-footer .footer-shell.anz-footer__deck, .site-footer .az-footer-logo.anz-footer__logo-island, .site-footer .az-footer-row--reach, .site-footer .az-footer-row--reach .az-footer-row__icon { background: var(--footer-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .site-footer *, .site-footer *::before, .site-footer *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .site-footer .az-footer-row--reach:hover, .site-footer .footer-social .footer-social__link:hover { transform: none; } } /* ========================================================================== 7.373.0 — FOOTER AÇIK / KOYU REFERANS SON KİLİDİ -------------------------------------------------------------------------- Aynı footer DOM'unu kullanır. Yalnız masaüstünde referanstaki tek parça, kompakt panoramik konsolu ve tema kontrastını kesinleştirir. ========================================================================== */ @media (min-width: 1024px) { .site-footer.anz-footer { --footer-accent: #c7192d; --footer-accent-rgb: 199, 25, 45; --footer-copper: #aa6b43; --footer-text: #17191c; --footer-soft: #50565e; --footer-muted: #686f78; --footer-line: rgba(22, 25, 29, .13); --footer-glass: rgba(255, 255, 255, .9); --footer-glass-strong: rgba(255, 255, 255, .97); --footer-node: rgba(255, 255, 255, .94); --footer-node-border: rgba(22, 25, 29, .14); --footer-opaque: #fbfaf8; padding: 88px 0 28px; background: #fbfaf8; color: var(--footer-text); } [data-theme="dark"] .site-footer.anz-footer { --footer-accent: #22c6d3; --footer-accent-rgb: 34, 198, 211; --footer-copper: #b8743c; --footer-text: #f5f7f8; --footer-soft: #b9bec3; --footer-muted: #9299a1; --footer-line: rgba(255, 255, 255, .13); --footer-glass: rgba(8, 11, 12, .9); --footer-glass-strong: rgba(12, 15, 16, .97); --footer-node: rgba(16, 19, 20, .92); --footer-node-border: rgba(255, 255, 255, .18); --footer-opaque: #0b0e0f; background: #050708; } .site-footer.anz-footer .footer-shell.anz-footer__deck { width: calc(100% - 64px); max-width: 1480px; border-radius: 44px; background: linear-gradient(var(--footer-glass), var(--footer-glass)) padding-box, linear-gradient( 118deg, rgba(var(--footer-accent-rgb), .88), rgba(255, 255, 255, .46) 32%, rgba(255, 255, 255, .14) 68%, rgba(170, 107, 67, .72) ) border-box; box-shadow: 0 26px 64px rgba(50, 35, 23, .13), -5px 0 20px rgba(var(--footer-accent-rgb), .08), 5px 0 20px rgba(170, 107, 67, .09), inset 0 1px 0 rgba(255, 255, 255, .38); } [data-theme="dark"] .site-footer.anz-footer .footer-shell.anz-footer__deck { box-shadow: 0 30px 72px rgba(0, 0, 0, .5), -6px 0 24px rgba(34, 198, 211, .14), 6px 0 24px rgba(184, 116, 60, .13), inset 0 1px 0 rgba(255, 255, 255, .1); } .site-footer.anz-footer .footer-shell.anz-footer__deck::after { inset: 12px; border-color: rgba(255, 255, 255, .13); border-radius: 34px; } .site-footer.anz-footer .az-footer-contact-glass { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: 338px; } .site-footer.anz-footer .az-footer-brand { justify-content: flex-start; padding: 74px 52px 30px; } .site-footer.anz-footer .az-footer-logo.anz-footer__logo-island { top: -39px; left: clamp(148px, 12vw, 218px); width: clamp(205px, 14vw, 262px); height: 86px; padding: 13px 24px; border-radius: 31px; background: linear-gradient(var(--footer-glass-strong), var(--footer-glass-strong)) padding-box, linear-gradient(125deg, rgba(var(--footer-accent-rgb), .84), rgba(255, 255, 255, .52) 48%, rgba(170, 107, 67, .72)) border-box; box-shadow: 0 16px 34px rgba(28, 22, 18, .17), 0 0 0 6px rgba(var(--footer-accent-rgb), .03), inset 0 1px 0 rgba(255, 255, 255, .32); opacity: 1; visibility: visible; } .site-footer.anz-footer .az-footer-logo.anz-footer__logo-island::after { height: 54px; } .site-footer.anz-footer .az-footer-logo .anzelha-footer-mark { display: block; width: 100%; height: 56px; min-height: 56px; background-color: transparent; background-image: url("../images/brand/anzelha-logo.png?v=7.379.0"); background-repeat: no-repeat; background-position: center; background-size: contain; filter: none; opacity: 1; visibility: visible; } [data-theme="dark"] .site-footer.anz-footer .az-footer-logo .anzelha-footer-mark { background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0"); } .site-footer.anz-footer .az-footer-brand__title { font-size: 16px; } .site-footer.anz-footer .az-footer-brand p { max-width: 388px; margin-top: 12px; font-size: 14px; line-height: 1.68; } .site-footer.anz-footer .footer-social { gap: 12px; margin-top: 20px; } .site-footer.anz-footer .footer-social .footer-social__link { width: 50px; height: 50px; min-height: 50px; background: var(--footer-node) !important; } .site-footer.anz-footer .az-footer-reach { padding: 34px 48px 30px; } .site-footer.anz-footer .az-footer-reach__title { font-size: clamp(22px, 1.55vw, 27px); } .site-footer.anz-footer .az-footer-reach__header p { margin-top: 4px; font-size: 14px; } .site-footer.anz-footer .az-footer-reach__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.55vw, 24px); margin-top: 12px; padding-top: 68px; } .site-footer.anz-footer .az-footer-reach__list::before { top: 27px; height: 2px; opacity: .76; } .site-footer.anz-footer .az-footer-row--reach { min-height: 96px; padding: 22px 17px 15px; border-color: transparent; border-radius: 22px; background: linear-gradient(var(--footer-node), var(--footer-node)) padding-box, linear-gradient( 135deg, rgba(var(--footer-accent-rgb), .32), var(--footer-node-border) 45%, rgba(170, 107, 67, .28) ) border-box; box-shadow: 0 14px 30px rgba(50, 35, 23, .08), inset 0 1px 0 rgba(255, 255, 255, .22); } [data-theme="dark"] .site-footer.anz-footer .az-footer-row--reach { background: linear-gradient(var(--footer-node), var(--footer-node)) padding-box, linear-gradient( 135deg, rgba(34, 198, 211, .34), var(--footer-node-border) 48%, rgba(184, 116, 60, .34) ) border-box; box-shadow: 0 16px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06); } .site-footer.anz-footer .az-footer-row--reach::before { background: var(--footer-glass-strong); } .site-footer.anz-footer .az-footer-row--reach .az-footer-row__icon { top: -65px; width: 54px; height: 54px; } .site-footer.anz-footer .az-footer-row--reach .az-footer-row__icon .anzelha-icon { width: 23px; height: 23px; } .site-footer.anz-footer .az-footer-row__eyebrow { font-size: 12px; } .site-footer.anz-footer .az-footer-row--reach .az-footer-row__label { font-size: clamp(13px, .96vw, 15px); overflow-wrap: normal; word-break: normal; } .site-footer.anz-footer .az-footer-capsule { grid-template-columns: minmax(0, auto) minmax(0, 1fr); min-height: 72px; padding: 12px max(118px, 8vw) 12px 34px; gap: 10px 22px; border-radius: 0 0 44px 44px; } .site-footer.anz-footer .az-footer-capsule__trust { gap: 8px 12px; } .site-footer.anz-footer .az-footer-paybadge { min-height: 28px; padding-inline: 10px; } .site-footer.anz-footer .az-footer-capsule__legal, .site-footer.anz-footer .az-footer-capsule__links { flex-wrap: nowrap; } .site-footer.anz-footer .az-footer-capsule__legal { gap: 8px 14px; } .site-footer.anz-footer .az-footer-capsule__links { gap: 4px 14px; } .site-footer.anz-footer .az-footer-capsule__links a, .site-footer.anz-footer .az-cookie__footer-link, .site-footer.anz-footer .az-footer-top { min-height: 40px; font-size: 13px; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .site-footer.anz-footer .footer-shell.anz-footer__deck, .site-footer.anz-footer .az-footer-logo.anz-footer__logo-island, .site-footer.anz-footer .az-footer-row--reach, .site-footer.anz-footer .az-footer-row--reach .az-footer-row__icon { background-color: var(--footer-opaque); } } } @media (min-width: 1024px) and (max-width: 1399px) { .site-footer.anz-footer .az-footer-brand { padding: 72px 32px 28px; } .site-footer.anz-footer .az-footer-reach { padding: 32px 32px 28px; } .site-footer.anz-footer .az-footer-reach__list { gap: 12px; } .site-footer.anz-footer .az-footer-row--reach { padding-inline: 13px; } .site-footer.anz-footer .az-footer-capsule { grid-template-columns: minmax(0, auto) minmax(0, 1fr); padding-right: max(108px, 9vw); gap: 8px 14px; } .site-footer.anz-footer .az-footer-capsule__legal { justify-content: flex-end; gap: 6px 10px; } .site-footer.anz-footer .az-footer-capsule__links { justify-content: flex-end; gap: 4px 10px; } .site-footer.anz-footer .az-footer-capsule__links a, .site-footer.anz-footer .az-cookie__footer-link, .site-footer.anz-footer .az-footer-copy, .site-footer.anz-footer .az-footer-top { font-size: 12px; } } @media (min-width: 1024px) and (max-width: 1180px) { .site-footer.anz-footer .footer-shell.anz-footer__deck { width: calc(100% - 40px); } .site-footer.anz-footer .az-footer-contact-glass { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); } .site-footer.anz-footer .az-footer-brand { padding-inline: 26px; } .site-footer.anz-footer .az-footer-reach { padding-inline: 26px; } .site-footer.anz-footer .az-footer-capsule { grid-template-columns: 1fr; padding-right: max(108px, 10vw); } .site-footer.anz-footer .az-footer-capsule__legal, .site-footer.anz-footer .az-footer-capsule__links { justify-content: flex-start; flex-wrap: wrap; } } /* 7.381.0 — Footer marka adasında logo gerçek PNG öğesidir. Bu son kural grubu eski background-image katmanlarının tamamından sonra gelir; açık/koyu özgün dosyalar aynı ayrılmış alanda tema ile seçilir. */ .site-footer.anz-footer .az-footer-logo .anzelha-footer-mark { display: grid; overflow: hidden; background-image: none !important; place-items: center; } .site-footer.anz-footer .anzelha-footer-mark__image { grid-area: 1 / 1; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; filter: none; opacity: 1; visibility: visible; } .site-footer.anz-footer .anzelha-footer-mark__image--dark { display: none; } [data-theme="dark"] .site-footer.anz-footer .anzelha-footer-mark__image--light { display: none; } [data-theme="dark"] .site-footer.anz-footer .anzelha-footer-mark__image--dark { display: block; } /* ==================== product-card.css ==================== */ /* ============================================================ ANZELHA · Evrensel Wallet ürün kartı · 7.409.0 ------------------------------------------------------------ Mağaza, kategori, arama, favoriler ve öneri listelerindeki bütün ürünler bu tek bileşeni kullanır. Kategori sınıfları yalnız veri kancasıdır; kart geometrisini veya yüzeyini değiştirmez. Markup: functions.php → anzelha_render_product_card(). GÖRSEL ALANI SÖZLEŞMESİ (7.409.0; 7.470.0 vitrin talimatı): fotoğraf kapsayıcısı masaüstünde SABİT 4:3 ORANLIDIR (--pc-media-ratio — talimat §7 "kesin 4:3"; 7.467'nin 13:9 kısaltması süpersede). Sabit piksel yüksekliği YASAKTIR — yükseklik daima sütun genişliğinden türer. İstisna (7.557.0, İncele talimatı §4): ≤639px liste satırında görsel bilinçli 120×120 KARE kutudur; odak noktası (--pc-focus-*) kırpmayı yönetir. Aksiyon satırı (7.557.0, İncele talimatı §2-3): fiyat KENDİ satırında, altında İncele (dolgusuz, ikincil) + Sepete Ekle (TEK dolgulu aksiyon). Başlık ve açıklama satıra KİLİTLİDİR (line-clamp + rezerve yükseklik) → bütün kartlar aynı boyda biter, alt kenarlar hizalanır. Hızlı bakış (.az-qv) sunum otoritesi de bu dosyadadır (dosyanın sonu). ============================================================ */ :root { --pc-media-ratio: 4 / 3; /* 7.470.0 talimat §7: kesin 4:3 — cutout yüzdeleri orandan bağımsız */ --pc-media-inset: 6%; --pc-radius: 24px; --pc-media-radius: 18px; /* talimat §7: görsel köşeleri 16-18px */ --pc-pocket-radius: 16px; --pc-body-pad: 16px; --pc-grid-gap: clamp(16px, 1.3vw, 20px); --pc-grid-inset: clamp(24px, 3.5vw, 64px); --pc-card-bg: var(--store-surface, #FFFFFF); --pc-card-line: var(--store-line, #E0E6E7); --pc-card-shadow: 0 10px 28px rgba(20, 27, 38, .065); --pc-card-shadow-hover: 0 14px 34px rgba(20, 27, 38, .09); --pc-ink: var(--store-ink, #15191A); --pc-muted: var(--store-ink-2, #667174); --pc-media-bg: var(--store-bg-2, #F1F4F4); --pc-layer-one: #e9e8e4; --pc-layer-two: #faf8f4; --pc-media-line: rgba(255, 255, 255, .72); --pc-pocket-bg: #f7f7f6; --pc-pocket-line: rgba(28, 32, 38, .10); --pc-divider: rgba(28, 32, 38, .12); --pc-secondary-bg: #ffffff; --pc-secondary-line: rgba(28, 32, 38, .52); --pc-primary: var(--action, #D93036); --pc-primary-hover: var(--action-hover, #C0272D); --pc-primary-text: var(--on-action, #FFFFFF); --pc-category: var(--brand-tx, #0D7473); --pc-category-bg: color-mix(in srgb, var(--pc-card-bg) 82%, transparent); --pc-category-line: color-mix(in srgb, var(--brand-tx, #0D7473) 34%, transparent); --pc-heart: var(--pc-primary); --pc-points-star: var(--brand-tx, #0D7473); --pc-points-bg: var(--brand-soft, rgb(63 198 198 / .13)); --pc-points-line: color-mix(in srgb, var(--brand-tx, #0D7473) 28%, transparent); --pc-points-ink: var(--brand-tx, #0D7473); /* 7.544.0 — "Yeni" rozeti marka renginde dolu yüzeydir (renk kuralı: tema paletini takip eder; açıkta çay yeşili, koyuda turkuaz). */ --pc-flag-new-bg: var(--brand-tx, #0D7473); --pc-flag-new-ink: #FFFFFF; } [data-theme="dark"] { --pc-card-bg: #16191A; --pc-card-line: rgba(255, 255, 255, .12); --pc-card-shadow: 0 12px 30px rgba(0, 0, 0, .22); --pc-card-shadow-hover: 0 16px 36px rgba(0, 0, 0, .28); --pc-ink: #f7f7f5; --pc-muted: #b2b5bb; --pc-media-bg: #1E2224; --pc-layer-one: #2E3234; --pc-layer-two: #212526; --pc-media-line: rgba(255, 255, 255, .16); --pc-pocket-bg: #1E2223; --pc-pocket-line: rgba(255, 255, 255, .11); --pc-divider: rgba(255, 255, 255, .14); --pc-secondary-bg: #232728; --pc-secondary-line: rgba(255, 255, 255, .34); --pc-primary: var(--action, #D93036); --pc-primary-hover: var(--action-hover, #C0272D); --pc-primary-text: var(--on-action, #FFFFFF); --pc-category: var(--brand, #3FC6C6); --pc-points-star: var(--brand, #3FC6C6); --pc-points-bg: var(--brand-soft, rgb(63 198 198 / .13)); --pc-points-line: color-mix(in srgb, var(--brand, #3FC6C6) 30%, transparent); --pc-points-ink: var(--brand, #3FC6C6); --pc-flag-new-bg: var(--brand, #3FC6C6); --pc-flag-new-ink: #0B0C0D; } /* ---------- Ortak ürün ızgarası: 4 / 3 / 2 / 1 ---------- */ .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--pc-grid-gap) !important; align-items: stretch; } .ios-product-grid > *, .az-product-grid > *, .az-showcase__grid > *, .az-empty-cart-list__grid > *, .az-drink-grid > * { min-width: 0; } @media (min-width: 1280px) { .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { box-sizing: border-box; width: calc(100% - var(--pc-grid-inset)) !important; margin-inline: auto !important; } } /* 7.460.0 — 4'lü bant 1100px'ten başlar. Eski 1280 eşiği, MacBook'ların yaygın mantıksal genişliklerinde (1280 "gibi görünür") ve Safari yakınlaştırmasında etkin genişliği 3'lü banda düşürüyordu: satırda 3 dev kart görünüyordu. Masaüstü sözleşmesi "satırda 4"tür. */ @media (min-width: 900px) and (max-width: 1099px) { .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 640px) and (max-width: 899px) { .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 639px) { .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { grid-template-columns: minmax(0, 1fr) !important; } } .product-card-wrap { display: flex; min-width: 0; height: 100%; } .product-card-wrap[hidden] { display: none !important; } .product-card-wrap > .az-product-card { width: 100%; } .woocommerce ul.products li.product.az-product-card-item, .woocommerce ul.products li.az-product-card-item { display: flex; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; list-style: none; } .woocommerce ul.products li.az-product-card-item > .az-product-card { width: 100%; } /* ---------- Ana kart ---------- */ .az-product-card, .az-product-card--eko, .az-product-card--kebap, .az-product-card--pide, .az-product-card--lahmacun, .az-product-card--tatli, .az-product-card--icecek, .az-product-card--ikram, .az-product-card--corba, .az-product-card--kahvalti, .az-product-card--arasicak { --pc-category-current: var(--pc-category); } .az-product-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--pc-card-line); border-radius: var(--pc-radius); background: var(--pc-card-bg); box-shadow: var(--pc-card-shadow); transition: translate 200ms cubic-bezier(.2, .8, .2, 1), border-color 200ms ease, box-shadow 200ms ease; } @media (hover: hover) and (pointer: fine) { .az-product-card:hover { z-index: 2; translate: 0 -2px; border-color: color-mix(in srgb, var(--pc-card-line) 65%, var(--pc-ink) 35%); box-shadow: var(--pc-card-shadow-hover); } } /* ---------- Wallet görsel alanı ---------- */ /* Kabuk yalnız cüzdan katmanlarını ve rozetleri taşır; yüksekliğini içindeki sabit oranlı fotoğraf çerçevesi belirler (10px üst + 8px alt nefes payı sabittir). */ .az-product-card .az-product-card__media { position: relative; isolation: isolate; flex: 0 0 auto; width: 100%; padding: 0; /* 7.473.0 referans: fotoğraf karta tam genişlik oturur */ } .az-product-card .az-product-card__media::before, .az-product-card .az-product-card__media::after { position: absolute; content: ""; pointer-events: none; border: 1px solid var(--pc-card-line); border-radius: var(--pc-media-radius); } .az-product-card .az-product-card__media::before { display: none; } .az-product-card .az-product-card__media::after { display: none; } .az-product-card .az-product-card__image { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: var(--pc-media-ratio); overflow: hidden; border: 0; border-radius: 0; /* kart köşesi kırpar (overflow hidden) */ background: var(--pc-media-bg); box-shadow: none; } /* Restoran sahneli (opak) fotoğraf alanı boydan boya doldurur: oran yüklemede tek piksel kırpılmaz, farklı orandaki dosya ise gerilmeden ölçeklenip yönetimdeki odak noktasına göre ortalanır. */ .az-product-card .az-product-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pc-focus-x, 50%) var(--pc-focus-y, 50%); transition: transform 200ms cubic-bezier(.2, .8, .2, 1); } /* Talimat §6: hover'da görsel en fazla 1.02 büyür (yalnız transform). */ @media (hover: hover) and (pointer: fine) { .az-product-card:hover .az-product-card__img:not(.is-cutout):not(.is-placeholder) { transform: scale(1.02); } } /* Şeffaf (arka planı kaldırılmış) ürün fotoğrafı kırpılmaz: alanın %88'ine ortalanır ve kalan pay kart yüzeyi olarak kalır — siyah bant oluşmaz. */ /* Ölçüler açıkça verilir: mutlak konumlu bir için `width: auto` ÖLÇÜLERİ KENDİ DOĞAL BOYUTUNDAN alır ve alanı taşırır. */ .az-product-card .az-product-card__img.is-cutout { position: absolute; inset: var(--pc-media-inset); width: calc(100% - 2 * var(--pc-media-inset)); height: calc(100% - 2 * var(--pc-media-inset)); object-fit: contain; object-position: center center; } .az-product-card .az-product-card__img.is-placeholder { padding: clamp(24px, 8%, 42px); object-fit: contain; object-position: center center; opacity: .72; } .az-product-card .az-product-card__category { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; min-height: 32px; max-width: calc(100% - 98px); padding: 6px 13px; overflow: hidden; border: 1px solid var(--pc-category-line); border-radius: 999px; background: var(--pc-category-bg); color: var(--pc-category-current); font-size: 12px; font-weight: 750; line-height: 18px; letter-spacing: .025em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } /* 7.544.0 (eksik denetimi md.2) — Vurgu rozeti görselin sol altında durur: sol üst kategoriye, sağ üst favoriye ayrılmıştır; üçü çakışmaz. */ .az-product-card .az-product-card__flag { position: absolute; z-index: 3; bottom: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); } .az-product-card .az-product-card__flag--bestseller { background: var(--pc-primary); color: var(--pc-primary-text); } .az-product-card .az-product-card__flag--new { background: var(--pc-flag-new-bg); color: var(--pc-flag-new-ink); } /* 7.470.0 talimat §7: 38-40px cam daire; kaba işaretçide (dokunmatik) erişilebilirlik için 44px'e büyür (§16 dokunma hedefi kuralı üstündür). */ .az-product-card .favorite-button { position: absolute; z-index: 4; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid rgba(24, 27, 32, .12); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--pc-heart); box-shadow: 0 5px 14px rgba(20, 24, 32, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; } @media (pointer: coarse) { .az-product-card .favorite-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } } .az-product-card .favorite-button .anzelha-icon { width: 19px; height: 19px; } .az-product-card .favorite-button.active, .az-product-card .favorite-button.is-active { color: var(--pc-heart); } .az-product-card .favorite-button.active .anzelha-icon, .az-product-card .favorite-button.is-active .anzelha-icon { fill: currentColor; stroke-width: var(--icon-stroke-active, 2.1); } /* 7.470.0 talimat §9: açık krem/cam zemin, 28-30px, yıldız + değer + etiket. */ .az-product-card .az-product-card__points { position: static; z-index: auto; align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: calc(100% - 40px); padding: 5px 11px; overflow: hidden; border: 1px solid var(--pc-points-line); border-radius: 999px; background: var(--pc-points-bg); color: var(--pc-points-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } .az-product-card .az-product-card__points-star { flex: 0 0 auto; color: var(--pc-points-star); font-size: 14px; line-height: 1; } .az-product-card .az-product-card__points b { color: var(--pc-points-ink); font-size: inherit; font-weight: 800; } .az-product-card .az-product-card__points small { overflow: hidden; color: var(--pc-points-ink); font-size: inherit; font-weight: 700; text-overflow: ellipsis; } .az-product-card .az-product-card__points--guest:hover { border-color: var(--pc-points-star); } .az-product-card .az-product-card__soldout { position: absolute; z-index: 3; top: 50%; left: 50%; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .36); border-radius: 999px; background: rgba(20, 23, 28, .76); color: #ffffff; font-size: 13px; font-weight: 750; letter-spacing: .035em; transform: translate(-50%, -50%); } .az-product-card.is-soldout .az-product-card__img { filter: grayscale(.38) brightness(.92); } /* ---------- İçerik ve sabit dikey ritim ---------- */ .az-product-card .az-product-card__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 10px var(--pc-body-pad) 12px; background: var(--pc-card-bg); /* 7.557.0 (İncele talimatı §3): aksiyon butonlarının gerçek genişlik kaynağı GÖVDEDİR (mobil liste satırında gövde, görselin yanındaki dar kolondur — kart genişliği yanıltır). Bu yüzden sorgu kabı gövdedir: içerik ≤240px'e düşünce İncele etiketi gizlenip 44px ikon butona iner; desteklemeyen tarayıcı etiketi üç noktayla kısaltmaya devam eder. */ container-type: inline-size; } /* 7.526.0: başlık tek, açıklama iki satır; gövde yoğunluğu azaltılır. */ .az-product-card .az-product-card__body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; min-height: 1.26em; max-height: none; margin: 0; overflow: hidden; overflow-wrap: anywhere; white-space: normal; color: var(--pc-ink); font-family: var(--body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important; font-size: 18px !important; font-weight: 740 !important; line-height: 1.26; letter-spacing: -.02em !important; } .az-product-card .az-product-card__body h3 a { color: inherit; text-decoration: none; } /* 7.544.0 (eksik denetimi md.1) — Görselin altında porsiyon · hazırlanma süresi mikro-bilgisi. Satır her kartta basılır (min-height rezerve): aynı sıradaki kartların başlık/fiyat hizası bozulmaz. */ .az-product-card .az-product-card__meta { min-height: 15px; margin: 0 0 4px; overflow: hidden; color: var(--pc-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .az-product-card .az-product-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(2 * 1.5em); max-height: none; margin: 5px 0 0; overflow: hidden; overflow-wrap: anywhere; color: var(--pc-muted); font-size: 13.5px; line-height: 1.5; } /* ---------- Alt Wallet işlem gözü ---------- 7.470.0 talimat §11: fiyat + iki Türkçe etiketli düğme tek satıra kesilmeden SIĞMAZ (ölçüldü: "Sepete Ekle" ikonlu ≥103px). 7.557.0 (İncele talimatı §3): düzen bu yüzden İKİ SATIRDIR — fiyat kendi satırında, altında İncele + Sepete Ekle ızgarası. margin-top:auto footer'ı kart tabanına sabitler; puan çipi basılmayan kartlarda da alt kenar hizası bozulmaz. */ .az-product-card .az-product-card__footer { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; margin-top: auto; padding: 12px 0 0; border: 0; background: none; } .az-product-card .az-product-card__price { display: flex; align-items: center; max-width: 100%; min-width: 0; margin-right: auto; overflow: hidden; } .az-product-card .az-product-card__price strong { display: block; min-width: 0; color: var(--pc-ink); font-size: 21px; /* talimat §10: 21-24px, ana metin rengi (kırmızı değil) */ font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; white-space: nowrap; } .az-product-card .az-product-card__price.is-long strong { font-size: 20px; letter-spacing: -.04em; } .az-product-card .az-product-card__price.is-extra-long strong { font-size: 18px; letter-spacing: -.035em; } .az-product-card .az-product-card__price strong .amount, .az-product-card .az-product-card__price strong ins { color: inherit; text-decoration: none; } .az-product-card .az-product-card__price strong del { display: none; } /* 7.544.0 (eksik denetimi md.3) — İndirimli üründe eski fiyat: üstü çizili, soluk, güncel fiyatın solunda. Yalnız gerçek indirimde basılır. */ .az-product-card .az-product-card__old-price { flex: 0 1 auto; min-width: 0; margin-right: 8px; overflow: hidden; color: var(--pc-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.08; letter-spacing: -.02em; text-decoration: line-through; text-overflow: ellipsis; white-space: nowrap; } .az-product-card .az-product-card__old-price .amount { color: inherit; } /* İki satırlı gözde dikey ayırıcıya yer yok; eleman DOM'da kalır (markup sözleşmesi), yalnız çizilmez. */ .az-product-card .az-product-card__divider { display: none; } /* 7.557.0 (İncele talimatı §3): İncele 1fr, Sepete Ekle 1.35fr — ağırlık farkı ölçüye de yansır. minmax(0, …) dar kartta taşma yerine üç nokta verir. */ .az-product-card .az-product-card__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; gap: 9px; min-width: 0; } .az-product-card .az-product-card__actions > * { width: 100%; min-width: 0; } .az-product-card .az-quick-view, .az-product-card .az-card-view, .az-product-card .az-add-cart { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 13px; font-size: 12.5px; font-weight: 720; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease; } .az-product-card .az-quick-view svg, .az-product-card .az-add-cart svg, .az-product-card .az-add-cart .anzelha-icon { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .az-product-card .az-quick-view { border: 1px solid var(--pc-secondary-line); background: var(--pc-secondary-bg); color: var(--pc-ink); } .az-product-card .az-quick-view:hover { border-color: var(--pc-ink); box-shadow: 0 3px 10px rgba(20, 24, 32, .07); } /* ---------- İncele (7.557.0, İncele talimatı §2-3) ---------- RENK KURALI — pazarlık yok: İncele ASLA dolgulu renk almaz; sitedeki tek dolgulu aksiyon .az-add-cart kalır. Aksi, 7.470'te kaldırılan "iki eşit güçte buton" sorununu geri getirir. Köşe/tipografi karttaki mevcut buton diliyle aynıdır (13px köşe, 12.5px/720) — kart içinde ikinci dil açılmaz. */ .az-product-card .az-card-view { gap: 7px; border: 1px solid var(--pc-secondary-line); background: transparent; color: var(--pc-ink); font: inherit; font-size: 12.5px; font-weight: 720; } .az-product-card .az-card-view .anzelha-icon { flex: 0 0 auto; width: 16px; height: 16px; } .az-product-card .az-card-view:hover { background: var(--pc-media-bg); border-color: var(--pc-muted); } .az-product-card .az-card-view:active { transform: scale(.97); } .az-product-card .az-card-view__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Dar gövde (≤240px içerik): etiket erişilebilir kalarak gizlenir (aria-label butonda), İncele 44px ikon kareye düşer, kalan genişlik Sepete Ekle'nindir. Eşik ölçülüdür: ikonlu "İncele" ~96px + boşluk 9px + ikonlu "Sepete Ekle" ~124px = ~229px; altında etiketler üç noktaya düşüyordu. Sorgu kabı gövde olduğundan kural mobil liste satırının dar kolonunda da doğru tetiklenir. İkram kartında İncele tek başına tam genişliktir; etiketi hep kalır. */ @container (max-width: 240px) { .az-product-card:not(.is-complimentary) .az-product-card__actions { grid-template-columns: 44px minmax(0, 1fr); } .az-product-card:not(.is-complimentary) .az-card-view { padding: 0; } .az-product-card:not(.is-complimentary) .az-card-view__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .az-product-card .az-add-cart { min-width: 116px; border: 1px solid var(--pc-primary); background: var(--pc-primary); color: var(--pc-primary-text) !important; } .az-product-card .az-add-cart:hover { border-color: var(--pc-primary-hover); background: var(--pc-primary-hover); } .az-product-card[role="link"]:focus-visible { outline: 3px solid var(--pc-primary); outline-offset: 3px; } .az-product-card .az-add-cart:active { opacity: .88; } .az-product-card .az-add-cart.is-loading { opacity: .65; pointer-events: none; } .az-product-card .az-add-cart.is-added { border-color: var(--anzelha-success, #18864b); background: var(--anzelha-success, #18864b); color: #ffffff !important; } .az-product-card .az-add-cart.is-disabled { border-color: var(--pc-pocket-line); background: var(--pc-divider); color: var(--pc-muted) !important; cursor: not-allowed; pointer-events: none; } .az-product-card .az-add-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---------- Kart adet seçicisi (7.544.0, eksik denetimi md.4) ---------- "Sepete Ekle" ile AYNI ayak izi (116×44, 13px köşe): buton ↔ kapsül dönüşümünde aksiyon satırı zıplamaz. JS `hidden` ile takas eder; sınıf kuralları display'i ezmesin diye [hidden] açıkça kapatılır. */ .az-product-card .az-add-cart[hidden], .az-product-card .az-card-stepper[hidden] { display: none !important; } .az-product-card .az-card-stepper { display: inline-flex; align-items: stretch; min-width: 116px; min-height: 44px; overflow: hidden; border: 1px solid var(--pc-primary); border-radius: 13px; background: color-mix(in srgb, var(--pc-primary) 8%, var(--pc-card-bg)); } .az-product-card .az-card-stepper__btn { display: grid; place-items: center; width: 40px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--pc-primary); font-size: 18px; font-weight: 750; line-height: 1; cursor: pointer; } .az-product-card .az-card-stepper__btn:hover { background: color-mix(in srgb, var(--pc-primary) 14%, transparent); } .az-product-card .az-card-stepper__qty { display: grid; flex: 1 1 auto; place-items: center; min-width: 30px; color: var(--pc-ink); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 800; } .az-product-card .az-card-stepper.is-busy { opacity: .6; pointer-events: none; } .az-product-card .az-quick-view:focus-visible, .az-product-card .az-card-view:focus-visible, .az-product-card .az-add-cart:focus-visible, .az-product-card .az-card-stepper__btn:focus-visible, .az-product-card .favorite-button:focus-visible, .az-product-card .az-product-card__points--guest:focus-visible { outline: 3px solid var(--pc-primary); outline-offset: 2px; } .az-product-card.is-complimentary .az-product-card__footer { grid-template-columns: 1fr; } .az-product-card.is-complimentary .az-product-card__price, .az-product-card.is-complimentary .az-product-card__divider { display: none; } /* İkram kartında satın alma yoktur; İncele tek başına tam genişlik kaplar. */ .az-product-card.is-complimentary .az-product-card__actions { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); } .az-product-card.is-complimentary .az-quick-view { width: 100%; } @media (max-width: 359px) { :root { --pc-body-pad: 12px; } .az-product-card .az-product-card__price strong { font-size: 19px; } .az-product-card .az-quick-view, .az-product-card .az-card-view, .az-product-card .az-add-cart { gap: 5px; padding-inline: 7px; font-size: 12.5px; } .az-product-card .az-quick-view svg, .az-product-card .az-add-cart svg, .az-product-card .az-add-cart .anzelha-icon { width: 15px; height: 15px; } } /* ---------- ≤639px: yatay liste satırı (7.544.0, eksik denetimi md.5) ---------- Tek kolonda tam boy 4:3 kart ekran başına ~1,7 ürün gösteriyordu. Kart küçük görselli satıra dönüşür. 7.557.0 (İncele talimatı §4): görsel 96×72 → 120×120 KARE kutuya büyür; talimat bunu bilinçli takas olarak ister (satır yükselir, ekran başına ürün azalır). Kare kutuda sahneli fotoğrafın kırpımını yönetimdeki odak noktası (--pc-focus-*) yönetir; cutout/placeholder contain kaldığı için kırpılmaz. */ @media (max-width: 639px) { .ios-product-grid, .az-product-grid, .az-showcase__grid, .az-empty-cart-list__grid, .az-drink-grid, .woocommerce ul.products { gap: 10px !important; } .az-product-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; padding: 12px; border-radius: 18px; column-gap: 11px; } /* Kalp karta göre konumlansın diye medya kabuğu statikleşir; Tükendi kaplaması ve rozet, görsel bağlantısının (position: relative + overflow: hidden) içinde kalır. */ .az-product-card .az-product-card__media { position: static; width: 120px; } /* Kare kutu: oran kilidi yalnız bu liste satırında açılır (dosya başındaki sözleşme istisnası); yükseklik sütun genişliğiyle aynıdır. */ .az-product-card .az-product-card__image { aspect-ratio: auto; height: 120px; border-radius: 14px; } .az-product-card .az-product-card__category { display: none; } .az-product-card .favorite-button { top: 6px; right: 6px; border-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Rozet görselin İÇİNDE sol altta durur (talimat §4). */ .az-product-card .az-product-card__flag { bottom: 8px; left: 8px; padding: 4px 8px; border-radius: 7px; font-size: 9.5px; } .az-product-card .az-product-card__soldout { padding: 4px 9px; font-size: 11px; } .az-product-card .az-product-card__body { padding: 2px 0 0; } /* 44px kalp kartın sağ üstündedir; mikro-bilgi ve başlık altına girmesin. */ .az-product-card .az-product-card__meta, .az-product-card .az-product-card__body h3 { padding-right: 40px; } .az-product-card .az-product-card__body h3 { font-size: 16px !important; } /* Liste satırı kompakt kalır: açıklama gizlenir, rezerve yüksekliğiyle gider. */ .az-product-card .az-product-card__desc { display: none; } .az-product-card .az-product-card__points { min-height: 24px; margin-top: 6px; padding: 3px 9px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 11px; } .az-product-card .az-product-card__footer { margin-top: 8px; padding-top: 0; gap: 8px; } .az-product-card .az-product-card__price strong { font-size: 18px; } .az-product-card .az-product-card__old-price { font-size: 12px; } .az-product-card .az-add-cart { min-width: 0; padding: 0 12px; font-size: 12px; } .az-product-card .az-card-stepper { min-width: 104px; } } @media (prefers-reduced-motion: reduce) { .az-product-card, .az-product-card:hover, .az-product-card .az-quick-view, .az-product-card .az-card-view, .az-product-card .az-card-view:active, .az-product-card .az-add-cart { translate: none; transform: none; animation: none !important; transition: none; } .az-product-card .az-product-card__img, .az-product-card:hover .az-product-card__img { transform: none; transition: none; } } /* ============================================================ HIZLI BAKIŞ PENCERESİ (.az-qv) — 7.560.0 yeniden tasarım ------------------------------------------------------------ Markup: footer.php (tek sefer). Sürücü: assets/js/quick-view.js. Panel karttaki veri niteliklerinden beslenir; ek AJAX yoktur. TASARIM (09.08 yeniden tasarım talimatı): premium iki kolonlu modal — solda temiz görsel alanı + favori, sağda kategori→ad→kısa açıklama→ fiyat/puan→porsiyon→adet+Sepete Ekle→puan kazanımı→açılır bilgiler. PALET pencereye özeldir (--qv-*): sıcak krem zemin, antrasit metin, vişne CTA, amber fiyat/vurgu, KONTROLLÜ turkuaz yalnız puan çipinde. Koyu tema aynı ailenin antrasit değerleriyle oturur. İKİ AYRI DAVRANIŞ (7.558.0 sözleşmesi): ≥768px ortada modal (X çerçevenin sağ üstünde, ≥44px); ≤767px alttan yaylı iOS kartı — görsel kompakt, adet+CTA çubuğu altta sabit, tutamaç/görselden sürüklenerek kapanır. Açılış/kapanış KEYFRAME DEĞİL `is-open` GEÇİŞİDİR: sürükleme inline transform'la aynı özellikte çalıştığı için keyframe'le yarışmaz. ============================================================ */ .az-qv { --qv-surface: #FBF6EC; --qv-surface-2: #EFE6D6; --qv-ink: #241F19; --qv-muted: #6F6455; --qv-line: rgba(36, 31, 25, .14); --qv-cherry: #7E2233; --qv-cherry-hover: #6A1B2B; --qv-cherry-ink: #FFFFFF; --qv-cherry-soft: rgba(126, 34, 51, .08); --qv-amber: #A9761F; --qv-amber-soft: rgba(169, 118, 31, .13); --qv-teal: #0D7473; --qv-teal-soft: rgba(13, 116, 115, .12); } [data-theme="dark"] .az-qv { --qv-surface: #221F1B; --qv-surface-2: #2B2722; --qv-ink: #F4EEE3; --qv-muted: #B8AE9F; --qv-line: rgba(244, 238, 227, .14); --qv-cherry: #93293C; --qv-cherry-hover: #A23148; --qv-cherry-ink: #FFFFFF; --qv-cherry-soft: rgba(147, 41, 60, .16); --qv-amber: #DCA74F; --qv-amber-soft: rgba(220, 167, 79, .15); --qv-teal: #3FC6C6; --qv-teal-soft: rgba(63, 198, 198, .14); } .az-qv[hidden] { display: none !important; } /* [hidden] + sınıf display tuzağına karşı alt-ağaç zırhı: çip/puan/uyarı/ porsiyon gibi display atayan sınıflar gizli düğümü geri getiremez. */ .az-qv [hidden] { display: none !important; } .az-qv { position: fixed; inset: 0; z-index: var(--z-modal, 700); /* Kapanış geçişi sürerken (is-open kalktı, hidden henüz gelmedi) arkadaki sayfaya tıklama sızmasın. */ pointer-events: none; } .az-qv.is-open { pointer-events: auto; } /* Arka plan koyu ve hafif bulanık: modal içerikten belirgin ayrılır. */ .az-qv__scrim { position: absolute; inset: 0; background: rgba(14, 11, 8, .56); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s ease; } .az-qv.is-open .az-qv__scrim { opacity: 1; transition: opacity .32s ease; } [data-theme="dark"] .az-qv__scrim { background: rgba(0, 0, 0, .68); } /* Masaüstü modal: dinlenme hâli hafif küçük ve saydamdır; is-open yumuşak yay eğrisiyle yerine oturtur, kapanış kısa geri akıştır. */ .az-qv__panel { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: row; box-sizing: border-box; width: min(840px, 92vw); max-height: 86vh; overflow: hidden; border: 1px solid var(--qv-line); border-radius: 24px; background: var(--qv-surface); box-shadow: 0 30px 70px -30px rgba(15, 10, 5, .6); opacity: 0; transform: translate(-50%, -47.4%) scale(.965); transition: transform .26s cubic-bezier(.4, .14, .3, 1), opacity .22s ease; } .az-qv.is-open .az-qv__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform .38s cubic-bezier(.22, .9, .26, 1), opacity .3s ease; } /* ---------- Sol kolon: görsel ---------- */ .az-qv__media { position: relative; flex: 0 0 45%; min-width: 0; min-height: 420px; overflow: hidden; background: var(--qv-surface-2); } .az-qv__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pc-focus-x, 50%) var(--pc-focus-y, 50%); /* Masaüstü açılış cilası: fotoğraf %4,5 içeriden gelip yerine oturur. */ transform: scale(1.045); transition: transform .55s cubic-bezier(.22, .9, .3, 1); } .az-qv.is-open .az-qv__media img { transform: scale(1); } /* Şeffaf (cutout) ve placeholder görseller kırpılmaz: krem sunum alanına ortalanır (görsel işleme hattının tuvaliyle aynı aile). */ .az-qv__media img.is-cutout, .az-qv__media img.is-placeholder { padding: clamp(24px, 9%, 52px); object-fit: contain; object-position: center center; } .az-qv__media img.is-placeholder { opacity: .72; } /* Favori görselin üzerinde durur; ana [data-favorite] delegasyonuna bağlıdır. */ .az-qv__fav { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(24, 27, 32, .12); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--qv-cherry); box-shadow: 0 5px 14px rgba(20, 24, 32, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; } .az-qv__fav .anzelha-icon { width: 20px; height: 20px; } .az-qv__fav.active .anzelha-icon, .az-qv__fav.is-active .anzelha-icon { fill: currentColor; } /* ---------- Kapat: ≥44px, çerçevenin sağ üstünde ---------- */ .az-qv__close { position: absolute; top: 14px; right: 14px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--qv-line); border-radius: 50%; background: var(--qv-surface); color: var(--qv-ink); cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; } .az-qv__close .anzelha-icon { width: 18px; height: 18px; } .az-qv__close:hover { border-color: var(--qv-muted); background: var(--qv-surface-2); } /* ---------- Sağ kolon: içerik ---------- */ .az-qv__side { display: flex; flex: 1 1 auto; box-sizing: border-box; min-width: 0; min-height: 0; } .az-qv__scroll { display: flex; flex: 1 1 auto; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 26px; overflow: auto; } /* Kaydırmalı esnek sütunda çocuklar RİJİTTİR: içerik kabı aşınca taşmayı kaydırma gösterir. Aksi hâlde flex küçülmesi, overflow:hidden taşıyan tek öğenin (kısa açıklama) otomatik min yüksekliğini 0 sayıp bütün açığı ona yıkıyor ve açıklama sıfır yükseklikte kayboluyordu (ölçüldü, Chrome 148). */ .az-qv__scroll > * { flex: 0 0 auto; } .az-qv__kicker { margin: 0 52px 8px 0; color: var(--qv-amber); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .az-qv__side h3 { margin: 0 52px 10px 0; color: var(--qv-ink); font-family: var(--body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 30px; font-weight: 830; letter-spacing: -.03em; line-height: 1.12; } /* Kısa açıklama 2 satırda kalır; tamamı "Ürün Açıklaması" bölümündedir. YALNIZ -webkit- üçlüsü: standart `line-clamp`, Chrome 148'de -webkit-box'ı flow-root'a çevirip esnek kapsayıcıdaki bu bloğu sıfır yüksekliğe indiriyor (ölçüldü); eski üçlü her yüzeyde kartlarla aynı davranır. */ .az-qv__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2 * 1.6em); margin: 0 0 14px; overflow: hidden; color: var(--qv-muted); font-size: 14px; line-height: 1.6; } .az-qv__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .az-qv__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; background: var(--qv-amber-soft); color: var(--qv-amber); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .az-qv__chip .anzelha-icon { width: 14px; height: 14px; } /* ---------- Fiyat + puan: en güçlü vurgu ---------- */ .az-qv__priceRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 16px; } .az-qv__price { color: var(--qv-amber); font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 830; letter-spacing: -.02em; line-height: 1; } .az-qv__points { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--qv-teal-soft); border-radius: 999px; background: var(--qv-teal-soft); color: var(--qv-teal); font-size: 12.5px; font-weight: 750; line-height: 1; white-space: nowrap; } /* ---------- Porsiyon seçimi ---------- */ .az-qv__portions { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; } .az-qv__label { display: block; margin: 0 0 8px; padding: 0; color: var(--qv-muted); font-size: 12.5px; font-weight: 750; } .az-qv__portionList { display: flex; gap: 10px; min-width: 0; } .az-qv__portion { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--qv-line); border-radius: 13px; background: transparent; color: var(--qv-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; } .az-qv__portion:hover { border-color: var(--qv-muted); } .az-qv__portion[aria-checked="true"] { border-color: var(--qv-cherry); background: var(--qv-cherry-soft); color: var(--qv-cherry); } .az-qv__portion[disabled] { opacity: .45; cursor: not-allowed; } /* ---------- Adet + Sepete Ekle ---------- */ .az-qv__buy { min-width: 0; margin: 0 0 4px; } .az-qv__buy[hidden] { display: none !important; } .az-qv__buyRow { display: flex; align-items: stretch; gap: 10px; min-width: 0; } .az-qv__stepper { display: flex; flex: none; align-items: center; gap: 2px; padding: 3px; border: 1.5px solid var(--qv-line); border-radius: 14px; background: var(--qv-surface); } .az-qv__stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--qv-ink); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 160ms ease; } .az-qv__stepper button:hover { background: var(--qv-surface-2); } .az-qv__stepper span { min-width: 30px; color: var(--qv-ink); font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; } /* CTA: penceredeki tek dolgulu aksiyon — vişne. Yükleniyor/eklendi durumları cart-experience'ın ortak sınıflarından gelir. */ .az-qv .az-add-cart { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid var(--qv-cherry); border-radius: 15px; background: var(--qv-cherry); color: var(--qv-cherry-ink); font: inherit; font-size: 15px; font-weight: 760; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease; } .az-qv .az-add-cart:hover { border-color: var(--qv-cherry-hover); background: var(--qv-cherry-hover); } .az-qv .az-add-cart:active { opacity: .9; } .az-qv .az-add-cart.is-loading { opacity: .65; pointer-events: none; } .az-qv .az-add-cart.is-added { border-color: var(--anzelha-success, #18864b); background: var(--anzelha-success, #18864b); } /* Porsiyon seçilmeden CTA yumuşak bekleme hâlindedir (menü paneli deseni). */ .az-qv .az-add-cart[aria-disabled="true"] { border-color: var(--qv-cherry-soft); background: var(--qv-cherry-soft); color: var(--qv-cherry); } .az-qv__warn { margin: 8px 0 0; color: var(--qv-cherry); font-size: 12.5px; font-weight: 650; } .az-qv__earn { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--qv-muted); font-size: 13px; } .az-qv__earn b { color: var(--qv-teal); font-weight: 800; } .az-qv__earnIcon { display: inline-flex; color: var(--qv-teal); } .az-qv__earnIcon .anzelha-icon { width: 16px; height: 16px; } .az-qv__soldout { margin: 0 0 4px; padding: 12px 14px; border: 1px solid var(--qv-line); border-radius: 13px; background: var(--qv-surface-2); color: var(--qv-muted); font-size: 13.5px; font-weight: 700; } /* ---------- Açılır bilgiler ---------- */ .az-qv__infos { margin: 14px 0 0; border-top: 1px solid var(--qv-line); } .az-qv__info { border-bottom: 1px solid var(--qv-line); } .az-qv__info summary { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; color: var(--qv-ink); font-size: 14px; font-weight: 650; list-style: none; cursor: pointer; } .az-qv__info summary::-webkit-details-marker { display: none; } .az-qv__info summary .anzelha-icon { width: 19px; height: 19px; color: var(--qv-muted); } .az-qv__info summary .anzelha-icon--chevron-down { width: 17px; height: 17px; transition: transform 200ms ease; } .az-qv__info[open] summary .anzelha-icon--chevron-down { transform: rotate(180deg); } .az-qv__info > p { margin: 0; padding: 0 2px 14px 34px; color: var(--qv-muted); font-size: 13.5px; line-height: 1.6; } .az-qv__link { align-self: center; margin: 14px 0 0; padding: 4px; color: var(--qv-muted); font-size: 12.5px; text-align: center; text-decoration: none; } .az-qv__link:hover { color: var(--qv-ink); text-decoration: underline; } .az-qv__handle { display: none; } .az-qv__close:focus-visible, .az-qv__fav:focus-visible, .az-qv__link:focus-visible, .az-qv__portion:focus-visible, .az-qv .az-add-cart:focus-visible, .az-qv__info summary:focus-visible, .az-qv__stepper button:focus-visible { outline: 3px solid var(--qv-cherry); outline-offset: 2px; } /* ---------- ≤767px (temanın mobil eşiği): iOS kartı ---------- Alttan yaylı sheet; görsel KOMPAKT (26dvh tavan), içerik kendi içinde kayar, adet+Sepete Ekle çubuğu altta SABİTTİR (yapışkan, tam genişlik, güvenli alan paylı). Tutamaç/görselden aşağı sürükleme quick-view.js'te. */ @media (max-width: 767px) { .az-qv__panel { top: auto; right: 0; bottom: 0; left: 0; flex-direction: column; width: 100%; max-height: 84vh; max-height: 84dvh; border: 0; border-radius: 24px 24px 0 0; opacity: 1; transform: translateY(102%); transition: transform .3s cubic-bezier(.5, 0, .75, 1); } .az-qv.is-open .az-qv__panel { opacity: 1; transform: translateY(0); transition: transform .46s cubic-bezier(.26, .9, .28, 1); } .az-qv__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; max-height: 26vh; max-height: 26dvh; } /* Sheet'te fotoğraf cilası kapalı: kart alttan gelirken içte ikinci bir hareket iOS dilinde yoktur. */ .az-qv__media img, .az-qv.is-open .az-qv__media img { transform: none; transition: none; } /* X görselin üstünde koyu cam (açık fotoğrafta nötr köşe kaybolur); favori sol üstte durur ki ikisi çakışmasın. */ .az-qv__close { top: 12px; right: 12px; border: 0; background: rgba(11, 13, 14, .55); color: #ffffff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .az-qv__close:hover { background: rgba(11, 13, 14, .7); } .az-qv__fav { top: 12px; right: auto; left: 12px; } .az-qv__scroll { padding: 16px 16px 0; } .az-qv__kicker { margin-right: 0; } .az-qv__side h3 { margin-right: 0; font-size: 23px; } .az-qv__desc { margin-bottom: 12px; } .az-qv__price { font-size: 26px; } /* Adet + CTA çubuğu ekranın altında sabit kalır: sıra sona alınır, yapışkan taban tam genişliğe taşar, içerik altından kayar. */ .az-qv__buy { position: sticky; bottom: 0; z-index: 5; order: 99; margin: 10px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--qv-line); background: var(--qv-surface); box-shadow: 0 -12px 24px -18px rgba(15, 10, 5, .35); } .az-qv__soldout { order: 98; margin: 10px 0 12px; } .az-qv__infos { margin-top: 6px; } .az-qv__link { margin: 12px 0 14px; } } @media (prefers-reduced-motion: reduce) { .az-qv__scrim, .az-qv__panel, .az-qv__media img, .az-qv__info summary .anzelha-icon--chevron-down { transition: none !important; } .az-qv__media img { transform: none; } } /* ==================== ios-polish.css ==================== */ /* ============================================================ Anzelha · iOS Akıcılık Paketi (ios-polish.css) Amaç: touch-action, scroll-snap, @starting-style, view-transitions, basma durumu ve overscroll ile iOS hissini tamamlamak. Mevcut tokenları kullanır (--motion-ease, --motion-base). En SON yüklenir. Not: Tüm hareket prefers-reduced-motion ile korunur. ============================================================ */ /* 1) Dokunma davranışı — tap gecikmesi ve istem dışı zoom biter */ a, button, .az-button, .az-icon-action, .anzelha-icon-button, .filter-chip, .favorite-button, [role="button"], input[type="submit"] { touch-action: manipulation; } /* Yatay kaydırılan şeritler: yön kilidi + hizalı durma. Not: orijinal listede .az-quick-grid ve [data-az-scroller] vardı ama kod tabanında hiçbir yerde kullanılmıyor (0 eşleşme) — dead selector olmasın diye çıkarıldı. Gerçekten var olan yatay şeritler bunlar. */ .filter-bar { touch-action: pan-x; scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; /* eski iOS momentum */ overscroll-behavior-x: contain; } .filter-bar > * { scroll-snap-align: start; } /* 2) Basma durumu (press-state) — kartlar da butonlar gibi tepki versin */ @media (hover: hover) { .az-product-card, .az-cat-card, .az-promo, .az-branch-card, .az-branch27 { transition: transform var(--motion-base, 240ms) var(--motion-ease, cubic-bezier(.16,1,.3,1)), box-shadow var(--motion-base, 240ms) var(--motion-ease, cubic-bezier(.16,1,.3,1)); } } .az-product-card:active, .az-cat-card:active, .az-promo:active, .az-branch-card:active, .az-branch27:active { transform: scale(.985); } /* 3) Panel/sheet/menü: arka plan kaymasını kes */ .az-sheet__panel, .anzelha-menu-panel__surface, .az-nav-drop, .az-minicart__panel, .az-branch-sheet__panel { overscroll-behavior: contain; } /* 4) Giriş animasyonları — @starting-style (JS'siz, GPU'da) */ @supports (transition-behavior: allow-discrete) { .az-sheet__panel, .anzelha-menu-panel__surface { transition: opacity var(--motion-base, 240ms) var(--motion-ease, cubic-bezier(.16,1,.3,1)), transform var(--motion-base, 240ms) var(--motion-ease, cubic-bezier(.16,1,.3,1)); } @starting-style { .az-sheet__panel, .anzelha-menu-panel__surface { opacity: 0; transform: translateY(10px); } } } /* 5) Sayfa geçişleri — 7.66.0 (Ana Dönüşüm md.11): buradaki GLOBAL ve kontrolsüz `@view-transition { navigation: auto }` kaldırıldı (talimat açıkça yasaklıyordu — masaüstü dahil her gezinmeye denetimsiz varsayılan çapraz-solma uyguluyordu). Tek otorite artık mobile-app.css'teki blok: yalnız ≤767px + prefers-reduced-motion: no-preference şartında, 160-190ms opacity + 8px hareketle etkinleşir. */ /* 6) Hareket azaltma tercihine tam saygı */ @media (prefers-reduced-motion: reduce) { .az-product-card, .az-cat-card, .az-promo, .az-branch-card, .az-branch27 { transition: none; } .az-product-card:active, .az-cat-card:active, .az-promo:active, .az-branch-card:active, .az-branch27:active { transform: none; } } /* ==================== mobile-app.css ==================== */ /* ============================================================ Anzelha · Mobil Uygulama Katmanı (mobile-app.css) ------------------------------------------------------------ MOBİL TASARIM İZOLASYONU — ANA KURAL (2026-07-27): Masaüstü/web tasarım değişiklikleri mobil geometriye, kartlara, tipografiye, navigasyona veya sayfa akışına taşınamaz. Mobil tarafa yalnız ortak marka renk tokenları ile güncel dinamik içerik/veriler yansır. Mobil görünüm ancak açık bir mobil tasarım talimatıyla değiştirilir. Ayrıntı: /MOBIL-TASARIM-ANA-KURALI.md ------------------------------------------------------------ Mobil Ana Sayfa talimatı (2026-07-19): 320-768px aralığında site, masaüstünün küçültülmüşü değil, iOS uygulaması gibi davranır. - Üst bar: logo + arama + sepet + menü (üçten fazla ana ikon yok) - Alt navigasyon (7.74.0 Nihai Talimat md.10 — sıra kesindir): Ana Sayfa · QR Menü · Sipariş Ver (vurgulu) · Puanım · Hesabım - Menü: sağdan açılan tam boy çekmece + tema/dil satırı - Ana sayfa: tek elle kullanım kompozisyonu (hero → 2x2 hızlı erişim → ikram şeridi → kategori şeridi → şube foto kartları → harita → kültür → 2 sütun güven kartları) Yüzey kimliği (blur/bg/gölge) surface-system.css tokenlarından akar; bu dosya kompozisyon ve mobil davranış katmanıdır, EN SON yüklenir. ============================================================ */ /* ---------- Her genişlikte geçerli temel kurallar ---------- */ /* Mobil ikram şeridi ve çekmece tercih satırı masaüstünde görünmez; masaüstü aynı içeriği sofra kartı ve üst bar kontrolleriyle sunar. */ .az-ikram27 { display: none; } .anzelha-menu-panel__prefs { display: none; } /* 7.73.0: az-status27 bölümü kaldırıldı — durum şeridi artık her ekranda hero içindedir (.az-hero27__statusbar, home-ios27.css). */ /* 7.57.0 (mobil liste md.7): WhatsApp sohbet paneli açıkken ana WhatsApp düğmesi (ve karşılama/ipucu baloncukları) gizlenir — panelle üst üste iki yeşil katman kalmaz. Eklenti JS'ine dokunulmadan CSS :has ile çözülür; :has desteklemeyen çok eski motorlarda davranış bugünkü gibi kalır (panel zaten launcher'ı örter). */ body:has(.wa-chat:not([hidden])) .anzelha-whatsapp, body:has(.wa-chat:not([hidden])) .wa-greet, body:has(.wa-chat:not([hidden])) .wa-tip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ============================================================ 7.166.0 — iOS Safari / standalone son otorite ============================================================ */ @media (max-width: 767px) { :root { --az-tabbar-height: 62px; --az-browser-tabbar-gap: 12px; } html, body { max-width: 100%; min-height: 100%; overflow-x: clip; } body.az-mobile-app { min-height: 100vh; min-height: 100dvh; padding-right: env(safe-area-inset-right); padding-bottom: calc(var(--az-tabs-clearance, 86px) + 28px); padding-left: env(safe-area-inset-left); } .az-header, .az-header.glass-navigation { top: calc(var(--az-admin-bar-h, 0px) + max(8px, env(safe-area-inset-top))); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); } .az-header__actions .az-search-action, .az-header__actions .az-cart-link, .az-header__actions .az-menu-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .mobile-cart-count { top: -2px; right: -2px; min-width: 18px; height: 18px; border: 2px solid var(--az-mobile-surface-solid, #fff); } .az-mobile-tabs { right: max(10px, env(safe-area-inset-right)); bottom: max(var(--az-browser-tabbar-gap), env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); min-height: var(--az-tabbar-height); padding: 4px; contain: layout paint; } .az-standalone .az-mobile-tabs { bottom: max(8px, env(safe-area-inset-bottom)); } .az-mobile-tabs a { min-width: 0; min-height: 52px; padding: 3px 1px; border-radius: 14px; font-size: clamp(10px, 2.8vw, 12px); } .az-mobile-tabs a[aria-current="page"] { background: transparent !important; box-shadow: inset 0 -2px 0 currentColor; } .az-mobile-tabs a[aria-current="page"]::after { display: none; } .az-mobile-tabs__primary b { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; } .az-mobile-tabs__primary span { font-weight: 700; } .az-home--ios27 .az-hero27__stage, .az-home--ios27 .az-hero27__copy { min-height: min(560px, calc(100dvh - 92px)); } .az-home--ios27 .az-hero27__copy::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 13, .08), rgba(10, 12, 13, .38) 58%, rgba(10, 12, 13, .68)); pointer-events: none; } .az-home--ios27 .az-hero27__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .az-home--ios27 .az-hero27__buttons .az-button { min-width: 0; padding-inline: 10px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { min-height: 82px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell > b { width: 44px; height: 44px; flex-basis: 44px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .az-a2hs-guide { position: fixed; z-index: 870; right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--az-tabs-clearance, 86px) + 18px); left: max(14px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 12px; max-width: 430px; min-height: 64px; margin-inline: auto; padding: 12px 10px 12px 14px; border: 1px solid var(--az-mobile-border, rgba(60, 60, 67, .16)); border-radius: 18px; background: rgba(248, 248, 250, .94); box-shadow: 0 12px 34px rgba(20, 20, 24, .16); color: #1c1c1e; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); } [data-theme="dark"] .az-a2hs-guide { background: rgba(24, 26, 28, .94); color: var(--dark-text, #F5F7F8); } .az-a2hs-guide span { display: grid; flex: 1; gap: 2px; } .az-a2hs-guide strong { font-size: 13px; } .az-a2hs-guide small { color: inherit; font-size: 11px; line-height: 1.35; opacity: .72; } .az-a2hs-guide button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; background: rgba(120, 120, 128, .12); color: inherit; font-size: 24px; } } @media (max-width: 359px) { .az-home--ios27 .az-hero27__buttons { grid-template-columns: 1fr; } .az-home--ios27 .az-hero27__statusbar.az-hero27__statusbar--quick { padding: 7px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { gap: 7px; padding: 8px; } } @media (prefers-reduced-motion: reduce) { .az-a2hs-guide, .az-mobile-tabs, .az-mobile-tabs a { animation: none !important; transition: none !important; } } /* 7.165.0 — Ana sayfa hero hızlı işlemleri: referanstaki kompakt 2×2 Liquid Glass panel. Yalnız --quick varyantını hedefler; hero, wallet, navigasyon ve pano yüzeylerine dokunmaz. */ .az-home--ios27 .az-hero27__statusbar.az-hero27__statusbar--quick { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(76px, 1fr)); gap: 1px; width: min(100%, 510px); max-width: 510px; margin-top: 18px; padding: 10px; overflow: visible; border: 1px solid rgba(255, 255, 255, .44); border-radius: 24px; background: rgba(250, 247, 241, .3) !important; box-shadow: 0 16px 40px rgba(16, 18, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .48); -webkit-backdrop-filter: blur(14px) saturate(112%); backdrop-filter: blur(14px) saturate(112%); } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { position: relative; display: flex; align-items: center; min-width: 0; min-height: 76px; gap: 12px; padding: 10px 12px; overflow: hidden; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .16); color: #17130f; text-align: left; text-decoration: none; transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell + .az-hero27__status-cell { border: 0; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell > b { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(255, 255, 255, .54); border-radius: 50%; background: rgba(255, 255, 255, .48); box-shadow: 0 5px 14px rgba(24, 26, 28, .09), inset 0 1px 0 rgba(255, 255, 255, .7); color: #a86613; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell > b .anzelha-icon { width: 23px; height: 23px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell > span, .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-text { min-width: 0; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell strong { display: block; color: #17130f; font-size: clamp(12px, .85vw, 14px); font-weight: 700; line-height: 1.22; white-space: normal; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell small { display: block; margin-top: 3px; color: rgba(18, 20, 22, .72); font-size: clamp(9px, .66vw, 11px); line-height: 1.35; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell--schedule { gap: 12px; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-text::after { position: absolute; inset: 0; content: ""; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-pick { position: relative; z-index: 2; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell--lahmacun > b img { display: block; width: 34px; height: 34px; object-fit: contain; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell--lahmacun > span { flex: 1 1 auto; padding-right: 20px; } .az-home--ios27 .az-hero27__external { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 22px; height: 22px; color: rgba(18, 20, 22, .7); } .az-home--ios27 .az-hero27__external .anzelha-icon { width: 15px; height: 15px; } @media (hover: hover) and (pointer: fine) { .az-home--ios27 .az-hero27__statusbar--quick a.az-hero27__status-cell:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .29); box-shadow: 0 8px 18px rgba(24, 26, 28, .1); } } .az-home--ios27 .az-hero27__statusbar--quick a.az-hero27__status-cell:active { transform: translateY(0) scale(.985); } .az-home--ios27 .az-hero27__statusbar--quick a:focus-visible { z-index: 3; outline: 3px solid #0a84ff; outline-offset: 2px; } [data-theme="dark"] .az-home--ios27 .az-hero27__statusbar.az-hero27__statusbar--quick { background: rgba(24, 26, 28, .42) !important; } [data-theme="dark"] .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { background: rgba(255, 255, 255, .07); } [data-theme="dark"] .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell strong { color: var(--dark-text, #F5F7F8); } [data-theme="dark"] .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell small, [data-theme="dark"] .az-home--ios27 .az-hero27__external { color: rgba(245, 247, 248, .72); } @media (max-width: 640px) { .az-home--ios27.az-home--board .az-hero27__statusbar.az-hero27__statusbar--quick { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(72px, 1fr)); width: 100%; max-width: none; gap: 1px; padding: 7px; border-radius: 20px; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell { flex-direction: row; justify-content: flex-start; min-height: 72px; gap: 8px; padding: 8px; text-align: left; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell > b { width: 40px; height: 40px; flex-basis: 40px; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell > b .anzelha-icon { width: 20px; height: 20px; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell strong { font-size: clamp(11px, 3.45vw, 13px); } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell small { display: block; font-size: clamp(8px, 2.45vw, 10px); } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell--lahmacun > span { padding-right: 12px; } .az-home--ios27 .az-hero27__external { top: 7px; right: 7px; } } @media (max-width: 360px) { .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell { gap: 6px; padding: 6px; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell > b { width: 36px; height: 36px; flex-basis: 36px; } .az-home--ios27.az-home--board .az-hero27__statusbar--quick .az-hero27__status-cell--lahmacun > b img { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { transition: none; } .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-dot { animation: none !important; } } /* Çekmecedeki tema düğmesi: header kapsülü dışında olduğundan ay/güneş görünürlüğü burada tanımlanır (design-system'daki kural .az-header__actions kapsamındadır ve bu düğmeye ulaşmaz). */ .anzelha-menu-panel__prefs .az-theme-toggle .anzelha-icon--sun { display: none; } [data-theme="dark"] .anzelha-menu-panel__prefs .az-theme-toggle .anzelha-icon--sun { display: block; } [data-theme="dark"] .anzelha-menu-panel__prefs .az-theme-toggle .anzelha-icon--moon { display: none; } /* ============================================================ MOBİL UYGULAMA KOMPOZİSYONU (≤767px) ------------------------------------------------------------ 7.66.0 (Ana Dönüşüm talimatı): kırılım sistemi netleşti — 0–767px Mobile App Shell · 768–1023px tablet · ≥1024px masaüstü. Eski ≤768 sınırı 768px'i mobile kabuğuna dahil edip tablet kurallarıyla çakışıyordu; artık 768 tam tablet başlangıcıdır. Kabuk eşlemesi (body.az-mobile-app altında): .az-header = .az-mobile-appbar · main#primary = .az-mobile-main · .az-mobile-tabs = .az-mobile-tabbar · yüzen WhatsApp/yukarı-çık = context actions. Tek kaydırma yüzeyi body'dir; overlay'ler kendi içinde kayar (overscroll-behavior: contain). ============================================================ */ @media (max-width: 767px) { /* ---------- 0) Dokunma davranışı (talimat 12): 300ms gecikmesiz, çift dokunuş zoom kazası olmadan anlık tepki. Metin alanları serbest kalır (pan/zoom kısıtlanmaz). ---------- */ a, button, summary, label, input[type="checkbox"], input[type="radio"], select { touch-action: manipulation; } /* Basma tepkisi: 80-120ms içinde hissedilir yüzey tepkisi (talimat 12). Yalnız transform/opacity; yerleşim değişmez. */ .az-button:active, .az-footer-row:active, .anzelha-menu-panel__link:active, .az-hero27__status-cell:active, .az-cat-card:active, .az-ikram27__open:active { transform: scale(.98); transition-duration: 90ms; } /* ---------- 0b) Formlar ve klavye (talimat 13): iOS otomatik zoom'u tetiklememek için tüm yazı girişleri en az 16px. ---------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); } /* ---------- 1) Üst bar: sabit, kompakt, üç ana ikon (talimat 2) ---------- */ :root { --az-header-h: 64px; } .az-header .az-header__inner { height: 64px; padding: 0 var(--sp-2, 8px) 0 var(--sp-3, 12px); } /* Arama mobilde geri gelir (≤1024 genel kuralı gizliyordu); sepet her mobil genişlikte kalır (eski ≤430 kuralı alt bardaki Sepet'e güveniyordu, yeni alt barda Sepet sekmesi yok). Kalan kontroller çekmecede: tema, dil, hesap ve Sipariş Ver üst bardan kalkar — üst bar kalabalıklaşmaz. */ .az-header__actions .az-search-action { display: inline-flex; } .az-header__actions .az-cart-link { display: flex; } /* iOS App Master Planı md.1/4: üst bar TAM OLARAK dört öğe — logo · arama · sepet · menü. Çalışma durumu (saat) da çekmeceye/hero durum şeridine taşındı ki bar kalabalıklaşmasın (hero zaten "Bugün Açık" hücresini gösterir; iç sayfalarda saat footer/menüde kalır). */ .az-header__actions .az-theme-toggle, .az-header__actions .az-language-switch, .az-header__actions .az-account-action, .az-header__actions .az-points-link, .az-header__actions .az-clock-action, .az-header__actions .header-order-button { display: none; } .az-header__actions { gap: var(--sp-1, 4px); } .az-header__actions .az-icon-action, .az-header__actions .az-menu-toggle { width: 44px; min-width: 44px; height: 44px; } /* ---------- 1a) iOS toolbar düğmeleri: GÖRÜNÜR cam çip + net ikon + aktif durum (md.2) ---------- Kök neden ("hamburger beyaz/pasif" şikayeti — headless 500px render ile doğrulandı): mobil header açık KREM cam yüzen kapsüldür (surface-system, glass-navigation koyu tabanını override eder); taban ikon çipi `rgba(24, 26, 28,.05)` + `.12` kenar bu açık kapsül üstünde neredeyse görünmez, ikon çizgileri "soluk/pasif" okunuyordu. Çözüm: çipi belirginleştir (daha koyu warm cam + net kenar) ve ikonu KESİN koyu yap. Overlay (ana sayfa) yalnızca masaüstünde şeffaf olduğundan mobilde açık kapsül geçerlidir — bu yüzden AÇIK ikon YOK; koyu ikon açık kapsülde okunur. */ .az-header__actions .az-icon-action, .az-header__actions .az-menu-toggle { border: 1px solid rgba(24, 26, 28, .2); background: rgba(24, 26, 28, .09); color: var(--anz-text, #1d1812); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: background var(--motion-fast, 160ms) var(--motion-ease, ease), border-color var(--motion-fast, 160ms) var(--motion-ease, ease), transform var(--motion-fast, 160ms) var(--motion-ease, ease); } .az-header__actions .az-icon-action .anzelha-icon, .az-header__actions .az-menu-toggle .anzelha-icon { stroke-width: 2.2; } [data-theme="dark"] .az-header__actions .az-icon-action, [data-theme="dark"] .az-header__actions .az-menu-toggle { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: var(--dark-text, #F5F7F8); } /* Basma/aktif tepkisi: hamburger menü açıkken altın-cam dolgu (md.2). */ .az-header__actions .az-icon-action:active, .az-header__actions .az-menu-toggle:active { transform: scale(.94); } .az-header__actions .az-menu-toggle[aria-expanded="true"] { background: var(--red-soft, rgba(216, 154, 56, .22)); border-color: var(--red, #d89a38); color: var(--red, #d89a38); } /* ---------- 1c) Logo görünürlüğü: sabit kolonlar kalkar (talimat md.11, 7.59.0) ---------- Kök neden (önizlemede ölçüldü, 375px): bundle'ın sabit `120px 1fr` grid şablonunda eylem satırının gerçek içeriği (4×44px düğme + boşluklar = 188px) 1fr kolonuna (169px) sığmıyor, sağa yaslı kutu SOLA taşıyor ve logonun son ~34px'i arama düğmesinin cam dairesi ALTINDA kalıyordu — açık temada siyah yazı yarı saydam beyaz daire altında "soluk/kayıp" görünüyordu. Görsel dosyaları doğruydu (açık: siyah yazılı orijinal, koyu: beyaz-altın türev; CSS filter yok). Çözüm: kolonlar gerçek içerikten — eylemler `auto` (asla taşmaz), marka kalan alanı alır ve logo `max-width:100%` + `background-size:contain` ile kırpılmadan küçülür. Logo sola yaslanır (bundle'daki `justify-content:center` kalabalık ekranda logoyu ikonlara doğru itiyordu). */ .az-header .az-header__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2, 8px); } .az-header .az-brand { /* %100: marka her koşulda kendi grid kolonunda kalır (justify-self içerik genişliğine düşürse bile) — logo asla ikon sütununa taşamaz. */ width: 100%; max-width: none; min-width: 0; height: 48px; justify-content: flex-start; overflow: visible; } .az-header .az-brand .anzelha-brand-logo { width: clamp(96px, 30vw, 136px); max-width: 100%; height: 44px; } .az-header__actions { min-width: 0; flex-wrap: nowrap; justify-content: flex-end; } /* ---------- 1b) Header aşağı kaydırmada gizlenir (7.57.0, mobil liste md.1) ---------- main.js .az-header--hidden sınıfını 7.42.0'dan beri yazıyordu ama CSS karşılığı HİÇBİR dosyada yoktu (kök neden) — header hep açık kalıp footer başlıklarını kapatıyordu. Gizleme yalnız transform (translateY); iç kapsüldeki `transition:none !important` (design-system) dış kapsayıcıyı etkilemez. Menü/arama/sohbet açıkken veya sayfa başındayken main.js sınıfı yazmaz. */ .az-header { transition: transform var(--motion-base, 260ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)); } .az-header.az-header--hidden { transform: translateY(calc(-100% - var(--az-admin-bar-h, 0px) - var(--az-header-gap, 12px) - 12px)); } /* ---------- 2) Alt navigasyon: iOS tab bar, 5 sekme (talimat 14) ---------- */ /* 7.66.0 (talimat 3): bar yüksekliği 72-78px bandına çekildi (eski 64px); safe-area zaten bottom ofsetinde. Her öğe eşit genişlikte (5×1fr). */ .az-mobile-tabs { position: fixed; z-index: var(--az-layer-tabbar, 200); /* G6 (H-117) */ right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(5, 1fr); /* md.8: "çok büyük/çok kalın" → daha ince Apple tab bar bandı (72→64px). */ min-height: 64px; padding: var(--sp-1, 4px) var(--sp-1, 4px) var(--sp-1, 4px); border: var(--border-1, 1px solid rgba(255, 255, 255, .55)); border-color: var(--lg-border, rgba(255, 255, 255, .55)); border-radius: var(--r-sheet, 26px); } .az-mobile-tabs a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 48px; border-radius: var(--r-card, 16px); color: var(--az-muted, #6e6e73); font-size: 12px; /* denetim §9: mobil alt navigasyon etiketi ≥11px (tercih 12) — eski 10.5px */ font-weight: var(--w-semibold, 650); letter-spacing: 0; text-decoration: none; transition: color var(--motion-fast, 160ms) var(--motion-ease, ease); } .az-mobile-tabs a b { display: grid; place-items: center; font-size: 0; } .az-mobile-tabs a .anzelha-icon { width: 23px; height: 23px; } /* Aktif sekme (7.57.0, mobil liste md.9): yalnız renk yetmez — hafif altın/cam zemin + kalınlaşan ikon + ikon altında küçük nokta işareti. aria-current="page" header.php'de zaten basılıyor. QR sekmesi kendi dairesini taşıdığından zemin ve nokta almaz. */ .az-mobile-tabs a[aria-current="page"] { border: 0; background: var(--red-soft, rgba(216, 154, 56, .16)); box-shadow: none; color: var(--red, #d89a38); transform: none; } .az-mobile-tabs a[aria-current="page"] .anzelha-icon { stroke-width: 2.6; } .az-mobile-tabs a[aria-current="page"]:not(.az-mobile-tabs__primary)::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; border-radius: var(--r-chip, 999px); background: currentColor; transform: translateX(-50%); } .az-mobile-tabs .az-mobile-tabs__primary[aria-current="page"] { background: none; } /* Ortadaki Sipariş Ver: DÜZ Apple tab bar (iOS App Master Planı md.8 — "Ortadaki büyük çıkıntı kaldırılacak"). Latest-instruction-wins gereği 7.66.0'ın yukarı taşan 56px dairesi (margin-top:-20) kaldırıldı; Sipariş Ver yine TEK altın vurgulu eylemdir ama artık barla AYNI hizada duran, taşmayan 40px altın-dolu yumuşak kare çip. Bar dengesi bozulmaz, içerik çakışması olmaz. */ .az-mobile-tabs__primary b { width: 40px; height: 40px; margin-top: 0; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--red, #d89a38), var(--red-deep, #9a6425)); color: #fff; box-shadow: 0 4px 14px rgba(195, 121, 28, .26); } .az-mobile-tabs__primary .anzelha-icon { width: 22px; height: 22px; } .az-mobile-tabs__primary span { color: var(--red, #d89a38); font-weight: var(--w-bold, 700); } [data-theme="dark"] .az-mobile-tabs__primary b { color: var(--dark-accent-text, #061012); } /* İçerik alt bara gizlenmez (7.57.0, mobil liste md.3): boşluk artık rastgele sabit değil — main.js alt barın GERÇEK kapladığı alanı (yükseklik + alt boşluk) ölçüp --az-tabs-clearance değişkenine yazar; içerik bunun +24px'ini alır. JS yoksa/henüz ölçmediyse eski güvenli sabit geçerli kalır. */ /* 7.60.0 (md.7): yedek zincir — ölçülen clearance yoksa bar yüksekliği (--mobile-nav-height) + safe-area kullanılır; o da yoksa 72px sabiti. */ body { padding-bottom: calc(var(--az-tabs-clearance, calc(var(--mobile-nav-height, 72px) + env(safe-area-inset-bottom) + 16px)) + var(--sp-6, 24px)); } /* ---------- 2c) Ödeme sayfası (talimat 13): checkout'ta alt navigasyon gizlenir — ödeme eylemi ve sipariş özeti (cart-experience'ın sabit eylem çubuğu) alt alanın tek sahibi olur; yanlış dokunma riski kalmaz. Gövde boşluğu güvenli küçük değere iner (sabit bar yok artık). ---------- */ /* !important şart: mobile-shell'in app-dock re-skini (0,3,2) özgüllükle bu gizlemeyi geçiyordu — ödemede çubuk geri beliriyordu (2026-08-03). */ body.woocommerce-checkout .az-mobile-tabs { display: none !important; } body.woocommerce-checkout { padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-6, 24px)); } /* ---------- 3) Yüzen kontroller alt navigasyonla çakışmaz (mobil liste md.7) ---------- WhatsApp sağda, yukarı çık solda; İKİSİ DE barın ölçülen üstünden 14px yukarıda aynı hizada durur. Footer sonunda güven satırlarını kapatmazlar (gövde boşluğu md.3'te ölçülü). Eklenti CSS'i !important kullandığından ezme !important kalır. */ .anzelha-whatsapp { right: max(var(--sp-4, 16px), env(safe-area-inset-right)) !important; left: auto !important; bottom: calc(var(--az-tabs-clearance, calc(72px + env(safe-area-inset-bottom))) + var(--sp-4, 16px)) !important; } .az-to-top { left: max(var(--sp-4, 16px), env(safe-area-inset-left)); right: auto; bottom: calc(var(--az-tabs-clearance, calc(72px + env(safe-area-inset-bottom))) + var(--sp-4, 16px)); } /* ---------- 4) Menü ---------- 7.70.0 (Modal Sheet Talimatı): eski "sağdan tam boy çekmece" kompozisyonu kaldırıldı. Menü artık iOS modal sheet'tir; TÜM kurallar bu dosyanın sonundaki "MOBİL MENÜ — iOS MODAL SHEET" bölümünde, ≤1023px kapsamında (768-1023 tablet de aynı sheet'i kullanır, md.22). */ /* ---------- 4b) Çekmece açıkken yüzen katmanlar çekilir (kapsam md.7, 7.58.0) ---------- main.js `body.anzelha-menu-open` sınıfını 7.30'dan beri yazıyordu ama CSS karşılığı hiçbir dosyada yoktu (kök neden): alt bar, WhatsApp başlatıcısı/karşılama-ipucu baloncukları ve yukarı çık düğmesi çekmece perdesinin altında görünüyor ve dokunma alabiliyordu. Şimdi menü açıkken üçü de görünmez + pointer-events almaz. display yerine visibility: katman ağacı bozulmaz, kapanınca ResizeObserver ölçümü (--az-tabs-clearance) kaldığı yerden sürer. Eklenti CSS'i !important kullandığından ezme !important kalır (wa-chat kuralıyla aynı gerekçe). */ /* 7.60.0 (Ana Düzeltme md.7): kural artık TÜM overlay'leri kapsar — Overlay Manager (main.js) hamburger/arama/sheet/minicart açıkken body.az-overlay-open yazar; klavye açıkken az-keyboard-open zaten var. */ body.anzelha-menu-open .az-mobile-tabs, body.anzelha-menu-open .anzelha-whatsapp, body.anzelha-menu-open .wa-greet, body.anzelha-menu-open .wa-tip, body.anzelha-menu-open .az-to-top, body.az-overlay-open .az-mobile-tabs, body.az-overlay-open .anzelha-whatsapp, body.az-overlay-open .wa-greet, body.az-overlay-open .wa-tip, body.az-overlay-open .az-to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Tema menüsü mobilde ekran altından taşmasın: main.js düğme hizasına göre inline top verir; mobilde menü güvenli alanda alta sabitlenir (tek açılma noktası çekmecedeki Görünüm düğmesidir). */ .az-theme-menu { z-index: var(--az-layer-popover, 400); top: auto !important; right: var(--sp-4, 16px) !important; bottom: calc(24px + env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 32px); } .anzelha-menu-panel > .az-theme-menu--mobile { z-index: 4; } /* ---------- 5) Bölüm başlıkları: başlık solda, eylem sağda ---------- */ .az-home--ios27 .az-section-head { flex-direction: row; align-items: center !important; justify-content: space-between; gap: var(--sp-3, 12px) !important; margin-bottom: var(--sp-4, 16px); } .az-home--ios27 .az-section-head h2 { font-size: clamp(22px, 5.8vw, 27px); letter-spacing: -.02em; } .az-home--ios27 .az-section-head > div > span, .az-home--ios27 .az-section-head .az-eyebrow { font-size: .62rem; } .az-home--ios27 .az-section-head .az-text-action { flex: 0 0 auto; white-space: nowrap; font-size: var(--text-sm, 13.5px); } /* 7.66.0: bölüm nefesi mobilde sabit 20px — surface-system'in masaüstü `clamp(48px…96px) !important` kuralı mobilde ~100px boşluk bırakıyordu (uygulama ekranı değil, uzun tanıtım sayfası hissi). Kaynak kural !important taşıdığından ezme de !important ister; dosya en son yüklenir. */ .az-home--ios27 .az-section { padding-block: 20px !important; } /* ---------- 6) Hero (7.73.0 sinematik yapı): mobil kabukta stage 62svh bandında, metin fotoğrafın üzerinde alta hizalı; durum şeridi ve wallet kartı stage'den SONRA akar (sıralama home-ios27.css ≤1023 bloğunda). Fotoğraf/scrim/copy stilleri de orada — burada yalnız kabuk ölçüleri. ---------- */ .az-home--ios27 .az-hero27 { padding-top: calc(var(--az-admin-bar-h, 0px) + var(--az-header-gap, 10px) + var(--az-header-h, 64px) + var(--sp-4, 16px)); } .az-home--ios27 .az-hero27__stage { min-height: 400px; min-height: clamp(400px, 54svh, 520px); } /* §5.4 — svh yoksa px taban */ /* Mobil scrim: üstten ve alttan koyulaşan sıcak degrade (dar ekranda metin altta durur; masaüstünün soldan-sağa degradesi dikeyleşir). */ .az-home--ios27 .az-hero27__scrim { background: linear-gradient(180deg, rgba(14, 10, 6, .5) 0%, rgba(14, 10, 6, .24) 38%, rgba(14, 10, 6, .3) 62%, rgba(14, 10, 6, .68) 100%); } .az-home--ios27 .az-hero27__copy { align-content: end; min-height: 400px; /* §5.4 — svh yoksa px taban */ min-height: clamp(400px, 54svh, 520px); padding: var(--sp-6, 24px) var(--sp-5, 20px) var(--sp-5, 20px); } /* 7.66.0 (talimat 4-5): başlık 32-42px bandında, en fazla 2-3 satır. 7.113.0: pill↔başlık üst boşluğu 16px → 24px (masaüstü 32px ritmiyle tutarlı, mobilde hâlâ kompakt; referans "etiket başlığa yakın" mobil şartını korur). Bu ≤767 kuralı surface-system'deki 32px otoritesini mobilde EZER — tek mobil değer. */ .az-home--ios27 .az-hero27__copy h1 { margin: var(--sp-6, 24px) 0 var(--sp-3, 12px); font-size: clamp(32px, 8.6vw, 42px); line-height: 1.08; } /* Açıklama 2-3 satırla sınırlı (talimat 4): fazlası kırpılır. */ .az-home--ios27 .az-hero27__copy > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; /* md.13: iOS gövde metni 17px bandında (eski 15px web hissi veriyordu). */ font-size: 17px; line-height: 1.5; } /* CTA'lar: TAM GENİŞLİK, ALT ALTA (iOS App Master Planı md.5 — "Yan yana iki büyük buton kullanılmamalı"). Birincil Sipariş Ver üstte, Rezervasyon altında; ikisi de tam genişlik + ≥54px dokunma. Eski yan-yana 2 sütun kaldırıldı. */ .az-home--ios27 .az-hero27__buttons { display: grid; grid-template-columns: 1fr; gap: var(--sp-3, 12px); width: 100%; margin-top: var(--sp-5, 20px); } .az-home--ios27 .az-hero27__buttons .az-button { flex: none; width: 100%; justify-content: center; gap: 8px; min-height: 54px; padding-inline: var(--sp-4, 16px); font-size: 16px; letter-spacing: -.01em; white-space: nowrap; } .az-home--ios27 .az-hero27__buttons .az-button .anzelha-icon { width: 18px; height: 18px; flex: 0 0 auto; } /* Wallet: hero sonrası tam genişlik ayrı kart (md.7 — display:none KALDIRILDI). md.12: mobilde iOS kart köşeleri daha yumuşak (22→26px); iç boşluk artırıldı (Apple Wallet kartı hissi — nefesli, ince cam). */ .az-home--ios27 .az-hero27__wallet { padding: var(--sp-5, 20px); border-radius: 26px; } .az-home--ios27 .az-hero27__wallet-value { font-size: 34px; } /* md.12: durum şeridi de aynı iOS köşe diliyle. */ .az-home--ios27 .az-hero27__statusbar { border-radius: 24px; } /* Durum şeridi hücreleri mobilde kompakt. */ .az-home--ios27 .az-hero27__status-cell { min-height: 60px; padding: var(--sp-3, 12px) var(--sp-4, 16px); } .az-home--ios27 .az-hero27__status-cell > b { width: 40px; height: 40px; } /* ---------- 7) (7.73.0) Hızlı erişim paneli kaldırıldı — işlevleri hero CTA'ları + durum şeridi + wallet taşıyor (düzeltme talimatı). ---------- */ /* ---------- 8) 12 Çeşit Sınırsız İkram: yatay görsel şerit (talimat 8) ---------- */ .az-ikram27 { display: block; } .az-ikram27__strip { display: flex; gap: var(--sp-3, 12px); overflow-x: auto; padding-bottom: var(--sp-2, 8px); scroll-snap-type: x mandatory; scroll-padding-inline: 2px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .az-ikram27__strip::-webkit-scrollbar { display: none; } /* 7.60.0 (Ana Düzeltme md.4): yan yana üç küçük resim düzeni kalktı — bir ana kart + sonraki karttan kontrollü parça görünür. Kart genişliği viewport'un ~%82'si; scroll-snap zaten şeritte. Kartta ad + kısa açıklama görünür, dokunuş ikram detay sheet'ini açar (button, erişilebilir). */ .az-ikram27__card { /* %88 (kapsayıcı) ≈ viewport'un ~%79-80'i — talimat bandı %78-86 (md.4). */ flex: 0 0 88%; max-width: none; margin: 0; overflow: hidden; border: 1px solid var(--lg-border, rgba(255, 255, 255, .6)); border-radius: var(--r-card, 18px); /* %100 cam (7.29.0): şerit kartları da cam çerçeve taşır. */ background: var(--lg-bg, rgba(255, 255, 255, .42)); box-shadow: var(--lg-shadow, 0 18px 50px rgba(30, 24, 16, .16)), var(--lg-shine, inset 0 1px 0 rgba(255, 255, 255, .8)); scroll-snap-align: start; } .az-ikram27__open { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .az-ikram27__media { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .az-ikram27__label { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3, 12px) var(--sp-4, 16px) var(--sp-4, 16px); min-height: 48px; } .az-ikram27__label strong { font-size: var(--text-md, 15px); font-weight: var(--w-semibold, 650); line-height: 1.3; } .az-ikram27__label small { font-size: var(--text-sm, 13px); line-height: 1.4; color: var(--anz-text-2, rgba(60, 52, 40, .75)); } .az-ikram27__card img, .az-ikram27__card .az-editorial-picture, .az-ikram27__card .az-editorial-picture__image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Nokta göstergesi: main.js doldurur; JS yoksa yer kaplamaz, şerit yine kayar. */ .az-ikram27__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--sp-3, 12px); } .az-ikram27__dots:empty { display: none; } .az-ikram27__dots > * { width: 6px; height: 6px; border-radius: var(--r-chip, 999px); background: var(--lb-border, rgba(20, 18, 14, .18)); transition: background-color var(--motion-fast, 160ms) var(--motion-ease, ease), transform var(--motion-fast, 160ms) var(--motion-ease, ease); } .az-ikram27__dots > .is-active { background: var(--red, #d89a38); transform: scaleX(2.4); } [data-theme="dark"] .az-ikram27__card { border-color: var(--lg-border, rgba(255, 255, 255, .2)); background: var(--lg-bg, rgba(24, 26, 28, .42)); } [data-theme="dark"] .az-ikram27__dots > * { background: rgba(255, 255, 255, .22); } [data-theme="dark"] .az-ikram27__dots > .is-active { background: var(--az-gold, var(--dark-accent, #14C4CF)); } /* 7.75.0 (md.16): eski az-promos bloğu KALDIRILDI — işlevleri artık hero (puan/durum), board (şubeler/ürünler/sıra) ve ikincil bölümlerde tek kez var. Mobil kompozisyon board bölümüyle akar (home-ios27.css). */ /* ---------- 9) Lezzet kategorileri: kaydırılabilir kart şeridi (talimat 9) ---------- */ .az-home--ios27 .az-cats__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 41%; gap: var(--sp-3, 12px); overflow-x: auto; padding-bottom: var(--sp-2, 8px); scroll-snap-type: x proximity; scroll-padding-inline: 2px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .az-home--ios27 .az-cats__grid::-webkit-scrollbar { display: none; } .az-home--ios27 .az-cat-card { scroll-snap-align: start; border-radius: var(--r-card, 18px); } .az-home--ios27 .az-cat-card__figure { aspect-ratio: 1 / 1; } .az-home--ios27 .az-cat-card__bar { min-height: 46px; } /* 7.66.0: kart adı kırpılmaz — dar rayda tek satır "Pidele…" oluyordu; etiket 2 satıra sarar, ok ikonu yer açmak için gizlenir (kartın tamamı zaten bağlantı; bilgi kaybı yok). */ .az-home--ios27 .az-cat-card__bar > span { flex: 1 1 auto; min-width: 0; overflow: visible; white-space: normal; text-overflow: clip; font-size: 13.5px; line-height: 1.25; overflow-wrap: break-word; } .az-home--ios27 .az-cat-card__bar > .anzelha-icon { display: none; } /* ---------- 10-11) Şubeler + harita (md.16) ---------- Board şube kartları (.az-board__branches) duyarlı kuralını home-ios27.css'te taşır; "Size En Yakın Anzelha" haritası artık kendi duyarlı kurallarını branch-map.css'te taşıyan Leaflet bileşenidir (7.125.0). */ /* ---------- 12) Kültür kartı (talimat 12) ---------- */ .az-home--ios27 .az-wideband__card { min-height: 300px; border-radius: var(--r-panel, 24px); } .az-home--ios27 .az-wideband__copy { padding: var(--sp-6, 24px) var(--sp-5, 20px); } .az-home--ios27 .az-wideband__copy h2 { font-size: clamp(26px, 7.4vw, 32px); } /* 7.126.0 — Anzelha'nın Hikâyesi teaser: mobilde metin alta yaslanır, dikey karartma (dar kartta yatay gradient sağı okunaksız bırakıyordu). */ .az-home--ios27 .az-origin__card { min-height: 440px; border-radius: var(--r-panel, 24px); align-items: flex-end; } .az-home--ios27 .az-origin__scrim { background: linear-gradient(180deg, rgba(14, 10, 6, .28) 0%, rgba(14, 10, 6, .22) 30%, rgba(14, 10, 6, .84) 100%); } .az-home--ios27 .az-origin__copy { max-width: none; padding: var(--sp-6, 24px) var(--sp-5, 20px); } .az-home--ios27 .az-origin__copy h2 { font-size: clamp(26px, 7vw, 34px); } /* 7.75.0 (md.13): eski az-trust 6'lı kart grid'i kompakt board avantaj şeridine (.az-board__perks) indirildi; mobil kuralları home-ios27.css'te. */ } /* 7.68.0 — Çalışma Saatleri ikonu üst bara eklendiği için telefon ikonunun gizlenme eşiği 374→413px'e çekildi (kalıcı kural: header öğeleri ezilmez, dar ekranda gizlenir; yatay taşma yasak). 5 düğme (arama+telefon+saat+sepet+ menü) logoyla ancak ≥414px'te sığar; 375–413px'te telefon gizlenir, saat ikonu kalır (md.7: mobil webde erişilebilir). Telefona footer, çekmece ve şube kartlarından hâlâ ulaşılır. */ @media (max-width: 413px) { .az-header__actions .az-phone-action { display: none; } } /* Çok dar ekran (320-359px): CTA'lar alt alta, şerit kartları daha geniş, üst barda logo sütunu daralır ve aksiyonlar 40px'e iner (bundle'daki min-height:44 ile oval olmasın diye min-height da 40'a eşitlenir; 40px, temanın ≤700px'te zaten kullandığı mevcut alt sınırdır). */ @media (max-width: 359px) { .az-home--ios27 .az-hero27__buttons { grid-template-columns: 1fr; } /* 7.66.0 (talimat 7): 320px ekranda %92 yasak — kart her genişlikte %84-88 bandında kalır, sonraki karttan parça hep görünür. */ .az-ikram27__card { flex-basis: 88%; } .az-home--ios27 .az-cats__grid { grid-auto-columns: 52%; } .az-mobile-tabs a { font-size: 11px; } /* denetim §9: dar ekranda dahi ≥11px taban — eski 9.5px */ .az-header .az-header__inner { grid-template-columns: 104px 1fr; padding: 0 6px 0 8px; } .az-header .az-brand { width: 104px; } .az-header .az-brand .anzelha-brand-logo { width: 100px; max-width: 100px; } .az-header__actions { gap: 2px; } .az-header__actions .az-icon-action, .az-header__actions .az-menu-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } } /* 7.70.0: Eski "sağdan kayma" giriş hareketi kaldırıldı — sheet'in giriş/çıkış hareketi sınıf tabanlıdır (.is-open, dosya sonundaki modal sheet bölümü): @starting-style yalnız girişi kapsıyordu, çıkış animasyonsuz kayboluyordu. */ /* ---------- Uygulama benzeri sayfa geçişi (talimat 11) ---------- Progressive enhancement: yalnız mobil kabuk (≤767px) + hareket tercihi engel değilken, aynı-origin MPA gezinmesinde 190ms opacity + 8px hareket. Global/koşulsuz @view-transition YASAK — blok iki medya şartının içindedir; desteklemeyen tarayıcı ve prefers-reduced-motion'da standart navigasyon aynen çalışır. bfcache geri/ileri dönüşlerinde tarayıcı geçişi zaten atlar — scroll konumu ve durum korunur. */ @media (max-width: 767px) and (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: az-vt-out 160ms cubic-bezier(.22, 1, .36, 1) both; } ::view-transition-new(root) { animation: az-vt-in 190ms cubic-bezier(.22, 1, .36, 1) both; } } @keyframes az-vt-out { to { opacity: 0; } } @keyframes az-vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Kademeler: uyumluluk ve erişilebilirlik ---------- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (max-width: 767px) { .az-mobile-tabs { background: rgba(255, 255, 255, .96); } [data-theme="dark"] .az-mobile-tabs { background: rgba(24, 26, 28, .97); } } } @media (prefers-reduced-transparency: reduce) { .az-mobile-tabs, .anzelha-menu-panel > .anzelha-menu-panel__surface { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--lb-bg, #fdfdfc) !important; } } @media (prefers-reduced-motion: reduce) { .az-mobile-tabs a, .az-ikram27__dots > *, .anzelha-menu-panel > .anzelha-menu-panel__surface { transition: none; } .az-ikram27__strip, .az-home--ios27 .az-cats__grid { scroll-behavior: auto; } } /* ============================================================ 7.70.0 — MOBİL MENÜ: iOS MODAL SHEET SİSTEMİ (Modal Sheet Talimatı) ------------------------------------------------------------ Menü, web sayfasının üstüne bindirilmiş şeffaf bir panel değil; kendi başlığı, kendi scroll alanı ve kendi sabit alt aksiyonları olan bağımsız bir iOS uygulama ekranıdır. Üç katman: 1) Backdrop (karartma + hafif blur — arka sayfa okunmaz), 2) Sheet (alt kenardan yükselen, %94-96 opak premium cam), 3) İçerik: sabit başlık / kayan liste / sabit alt aksiyonlar. - Kapsam ≤1023px: 768-1023 tablet de aynı sheet'i kullanır (md.22); masaüstü ≥1024 kompakt açılır kart design-system.css'te kalır. - Yüzey opaklığı BİLİNÇLİ olarak surface-system camından (%58 alfa) ayrılır (md.3): hero metni panel içinden okunuyordu. Cam hissi kenar + blur + iç parlaklıkla sürer; şeffaf perde görünümü yasak. - Arka sayfa kilidi Overlay Manager'dadır (main.js md.5-6): body position:fixed + html.az-scroll-locked + inert + odak tuzağı. - Animasyon yalnız transform/opacity (md.15/23); easing iOS sheet eğrisi cubic-bezier(.22,1,.36,1). Swipe-down kapatma main.js'te (md.16), yalnız başlık/tutamaç alanından başlar. ============================================================ */ @media (max-width: 1023px) { .anzelha-menu-panel { /* Sheet yüzey tokenları — açık tema (md.3: %92-96 opak bant). */ --az-sheet-bg-a: rgba(255, 255, 255, .96); --az-sheet-bg-b: rgba(250, 247, 242, .94); --az-sheet-solid: #fbf8f4; --az-sheet-edge: rgba(255, 255, 255, .82); --az-sheet-spec: rgba(255, 255, 255, .92); --az-sheet-shadow: 0 -24px 70px rgba(30, 24, 18, .18); --az-sheet-line: rgba(40, 32, 24, .08); --az-sheet-grab: rgba(35, 30, 25, .22); --az-sheet-btn-bg: rgba(248, 246, 242, .92); --az-sheet-btn-edge: rgba(45, 37, 30, .12); --az-sheet-row: rgba(255, 255, 255, .55); --az-sheet-row-edge: rgba(40, 32, 24, .05); position: fixed; z-index: var(--z-sheet, 9999); top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; inset: 0; width: auto !important; max-width: none !important; height: auto; margin: 0; } [data-theme="dark"] .anzelha-menu-panel { /* Koyu tema: tam siyah da değil, fazla şeffaf da değil (md.21). */ --az-sheet-bg-a: rgba(24, 26, 28, .97); --az-sheet-bg-b: rgba(16, 18, 20, .95); --az-sheet-solid: var(--dark-input, #121416); --az-sheet-edge: rgba(255, 255, 255, .10); --az-sheet-spec: rgba(255, 255, 255, .07); --az-sheet-shadow: 0 -24px 70px rgba(0, 0, 0, .5); --az-sheet-line: rgba(255, 255, 255, .09); --az-sheet-grab: rgba(255, 255, 255, .28); --az-sheet-btn-bg: rgba(28, 30, 32, .92); --az-sheet-btn-edge: rgba(255, 255, 255, .12); --az-sheet-row: rgba(255, 255, 255, .05); --az-sheet-row-edge: rgba(255, 255, 255, .06); } /* --- 1) Backdrop: arka sayfa sadeleşir, okunmaz, tıklanmaz (md.4) --- */ .anzelha-menu-panel__backdrop { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: rgba(20, 18, 16, .42); -webkit-backdrop-filter: blur(8px) saturate(85%); backdrop-filter: blur(8px) saturate(85%); opacity: 0; transition: opacity 220ms ease; touch-action: none; overscroll-behavior: contain; } .anzelha-menu-panel.is-open .anzelha-menu-panel__backdrop { opacity: 1; } /* --- 2) Sheet: alttan yükselir, tam ekran DEĞİL (md.6) --- */ .anzelha-menu-panel > .anzelha-menu-panel__surface { position: absolute; top: auto; right: 0; bottom: 0; left: 0; width: 100%; /* dvh yoksa vh'a düşer; Safari adres çubuğu değişiminde sıçramaz. */ height: 90vh; height: min(92dvh, calc(100dvh - env(safe-area-inset-top) - 12px)); max-height: none; display: grid; /* tutamaç / başlık / kayan liste / hızlı ayarlar / iletişim (md.2) */ grid-template-rows: auto auto minmax(0, 1fr) auto auto; overflow: hidden; padding: 0; border: 1px solid var(--az-sheet-edge) !important; border-bottom: 0 !important; border-radius: 32px 32px 0 0 !important; background-color: var(--az-sheet-bg-a) !important; background-image: linear-gradient(180deg, var(--az-sheet-bg-a), var(--az-sheet-bg-b)) !important; box-shadow: var(--az-sheet-shadow), inset 0 1px 0 var(--az-sheet-spec) !important; -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%); overscroll-behavior: contain; transform: translate3d(0, 100%, 0); transition: transform 320ms cubic-bezier(.22, 1, .36, 1); } .anzelha-menu-panel.is-open > .anzelha-menu-panel__surface { transform: translate3d(0, 0, 0); } /* Parmak sürüklerken inline transform komut verir; geçiş kapatılır (md.16). */ .anzelha-menu-panel.is-dragging > .anzelha-menu-panel__surface { transition: none; } /* --- 3) Tutamaç + sabit başlık (md.7): içerikle birlikte KAYMAZ --- */ .anzelha-menu-panel__handle { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 999px; background: var(--az-sheet-grab); touch-action: none; } .anzelha-menu-panel__header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px); padding: 10px 24px 14px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--az-sheet-line); touch-action: none; /* swipe-down başlangıç alanı (md.16) */ } /* Özgüllük bilinçli yüksek: bundle'ın koyu tema kuralları (html[data-theme="dark"] …) altın eyebrow'u ve kapatma yüzeyini ezmesin. */ .anzelha-menu-panel > .anzelha-menu-panel__surface .anzelha-menu-panel__header small { color: var(--red, #d89a38); font-size: 11px; font-weight: var(--w-bold, 750); letter-spacing: .14em; } .anzelha-menu-panel__header h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.15; } /* --- 4) Kapatma: ergonomik, header ile dengeli (md.8) --- */ .anzelha-menu-panel > .anzelha-menu-panel__surface .anzelha-menu-panel__close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--az-sheet-btn-edge); background: var(--az-sheet-btn-bg); box-shadow: 0 8px 24px rgba(35, 28, 22, .07), inset 0 1px 0 var(--az-sheet-spec); color: inherit; transition: transform 120ms ease; } .anzelha-menu-panel > .anzelha-menu-panel__surface .anzelha-menu-panel__close:active { transform: scale(.96); } /* --- 5) YALNIZ liste kayar (md.9): header/footer sabit, zincir kesik --- */ .anzelha-menu-panel__content { grid-template-columns: 1fr !important; row-gap: 4px !important; /* Liste kısaysa satırlar boşluğa YAYILMAZ — üstten akar (grid stretch kapalı). */ align-content: start; min-height: 0; padding: 12px 20px 24px !important; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } /* --- 6) Kategori satırları: net, okunur liste satırı (md.10) --- */ .anzelha-menu-panel .anzelha-menu-panel__link { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 60px; padding: 12px 14px !important; color: inherit; font-family: inherit; text-align: left; cursor: pointer; border-radius: 18px; /* Referans yerleşim: her satır yumuşak, ayrık bir kart olarak okunur. */ background: var(--az-sheet-row) !important; border: 1px solid var(--az-sheet-row-edge); font-size: 17.5px !important; font-weight: var(--w-semibold, 650) !important; transition: background-color 160ms ease, transform 120ms ease; } .anzelha-menu-panel .anzelha-menu-panel__link:active { background: var(--red-soft, rgba(216, 154, 56, .12)) !important; transform: scale(.985); } .anzelha-menu-panel__link .anzelha-icon { width: 18px; height: 18px; flex: 0 0 auto; } .anzelha-menu-panel__link .az-mega__badge { flex: 0 0 auto; } .anzelha-menu-panel__group { margin: 18px 14px 8px; } /* --- 7) Sabit alt aksiyon alanı (md.13): ayarlar + iletişim --- */ .anzelha-menu-panel__prefs { display: flex; align-items: center; gap: var(--sp-2, 8px); position: relative; z-index: 3; padding: 12px 20px 4px; border-top: 1px solid var(--az-sheet-line); box-shadow: 0 -12px 32px rgba(35, 28, 22, .05); } .anzelha-menu-panel__prefs .anzelha-menu-panel__pref { display: inline-flex; align-items: center; gap: var(--sp-2, 8px); flex: 1 1 auto; min-height: 48px; padding: 0 var(--sp-4, 16px); border: 1px solid var(--az-sheet-btn-edge); border-radius: var(--r-field, 14px); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm, 13.5px); font-weight: var(--w-semibold, 650); cursor: pointer; } .anzelha-menu-panel__prefs .anzelha-icon { width: 19px; height: 19px; } .anzelha-menu-panel__prefs .az-language-switch { flex: 1 1 auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .anzelha-menu-panel__prefs .az-language-switch a { width: 100%; justify-content: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--sp-4, 16px); border: 1px solid var(--az-sheet-btn-edge); border-radius: var(--r-field, 14px); color: inherit; font-size: var(--text-sm, 13.5px); font-weight: var(--w-semibold, 650); text-decoration: none; } /* --- 8) İletişim: metin değil, dokunulabilir kart (md.14) --- */ .anzelha-menu-panel__footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 3; margin: 0 !important; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)) !important; border-top: 0 !important; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .anzelha-menu-panel__footer a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 14px !important; border: 1px solid var(--az-sheet-btn-edge); border-radius: 16px; background: var(--az-sheet-btn-bg); box-shadow: inset 0 1px 0 var(--az-sheet-spec); transition: transform 120ms ease; } .anzelha-menu-panel__footer a:active { transform: scale(.985); } .anzelha-menu-panel__footer span { font-size: 12px; } .anzelha-menu-panel__footer strong { font-size: 16px; } /* --- 9) Erişilebilirlik ve uyumluluk kademeleri (standart md.1.6) --- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .anzelha-menu-panel > .anzelha-menu-panel__surface { background-color: var(--az-sheet-solid) !important; background-image: none !important; } .anzelha-menu-panel__backdrop { background: rgba(20, 18, 16, .56); } } @media (prefers-reduced-transparency: reduce) { .anzelha-menu-panel > .anzelha-menu-panel__surface { background-color: var(--az-sheet-solid) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .anzelha-menu-panel__backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (prefers-contrast: more) { .anzelha-menu-panel > .anzelha-menu-panel__surface { border-color: rgba(40, 32, 24, .4) !important; } [data-theme="dark"] .anzelha-menu-panel > .anzelha-menu-panel__surface { border-color: rgba(255, 255, 255, .4) !important; } } @media (prefers-reduced-motion: reduce) { .anzelha-menu-panel__backdrop, .anzelha-menu-panel > .anzelha-menu-panel__surface, .anzelha-menu-panel .anzelha-menu-panel__close, .anzelha-menu-panel .anzelha-menu-panel__link, .anzelha-menu-panel__footer a { transition: none !important; } .anzelha-menu-panel > .anzelha-menu-panel__surface { transform: none; } .anzelha-menu-panel__backdrop { opacity: 1; } } } /* ---------- §2 (7.140.0) — Bulanıklık (backdrop-filter) desteklenmeyen/kapalı tarayıcılarda mobil menü sheet zemini TAM OPAK olmalı; yarı saydam .96/.94 alfa alttaki sayfayı sızdırıyordu (denetim §2). Bu blok YALNIZ backdrop-filter yoksa uygulanır → modern iOS/Chrome cam görünümü birebir korunur. Opak değerler mevcut --az-sheet-solid tokenıyla aynı (#fbf8f4 / #1c1b19). ---------- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (max-width: 1023px) { .anzelha-menu-panel { --az-sheet-bg-a: #fbf8f4; --az-sheet-bg-b: #fbf8f4; } [data-theme="dark"] .anzelha-menu-panel { --az-sheet-bg-a: var(--dark-input, #121416); --az-sheet-bg-b: var(--dark-input, #121416); } } } /* ============================================================ 7.158.0 — MOBİL SAFARİ / iOS UYGULAMA KABUĞU ------------------------------------------------------------ Ekran görüntüsü denetiminde üst kapsül açık renkli büyük bir web header'ı gibi okunuyor, logo aksiyonlarla çakışıyor ve ana sayfa masaüstü kartlarını tek sütunda sıraladığı için gereksiz uzuyordu. Bu son-otorite bloğu yalnız telefon kabuğunu değiştirir: - koyu, kompakt üç aksiyonlu floating app bar, - daha sakin, ince tab bar ve temiz context katmanı, - tekrar eden hero puan kartının mobilde kaldırılması, - şube / kategori / avantaj içeriklerinin iOS collection rail'leri, - Sıra Gecesi, harita ve hikâye kartlarının kontrollü yüksekliği. İçerik ve hedefler korunur; yalnız mobil sunum yoğunluğu değişir. ============================================================ */ @media (max-width: 767px) { :root { --az-header-h: 56px; --az-header-gap: max(8px, env(safe-area-inset-top)); } /* Hamburger içeriği de üst barla aynı koyu uygulama yüzeyidir. Açık temada beyaz web sayfası çekmecesine dönmez; tema farkı içerikte korunur. */ .anzelha-menu-panel { --az-sheet-bg-a: rgba(28, 31, 33, .98); --az-sheet-bg-b: rgba(16, 19, 21, .97); --az-sheet-solid: #171a1c; --az-sheet-edge: rgba(255, 255, 255, .13); --az-sheet-spec: rgba(255, 255, 255, .08); --az-sheet-shadow: 0 -24px 70px rgba(0, 0, 0, .52); --az-sheet-line: rgba(255, 255, 255, .09); --az-sheet-grab: rgba(255, 255, 255, .3); --az-sheet-btn-bg: rgba(255, 255, 255, .07); --az-sheet-btn-edge: rgba(255, 255, 255, .13); --az-sheet-row: rgba(255, 255, 255, .055); --az-sheet-row-edge: rgba(255, 255, 255, .07); color: #f7f3ec; } .anzelha-menu-panel > .anzelha-menu-panel__surface { color: #f7f3ec; } .anzelha-menu-panel .anzelha-menu-panel__link, .anzelha-menu-panel__prefs a, .anzelha-menu-panel__prefs button, .anzelha-menu-panel__footer a { color: inherit; } /* Floating navigation bar: fotoğrafla bütünleşir; beyaz header bandı kalmaz. */ .az-header, .az-header.glass-navigation { right: 10px; left: 10px; width: auto; padding: 0 !important; } .az-header .az-header__inner, .az-header.scrolled .az-header__inner, .az-header--overlay .az-header__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; height: 56px; padding: 5px 6px 5px 12px; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 20px !important; background-color: rgba(13, 17, 20, .78) !important; background-image: linear-gradient(135deg, rgba(31, 38, 43, .82), rgba(10, 14, 17, .7)) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .16) !important; -webkit-backdrop-filter: blur(22px) saturate(155%); backdrop-filter: blur(22px) saturate(155%); color: #f8f4ec; } .az-header .az-brand { width: 100%; height: 44px; padding: 0; overflow: hidden; } .az-header .az-brand .anzelha-brand-mark { width: clamp(108px, 31vw, 128px) !important; height: 42px !important; background-image: url("../images/brand/anzelha-logo-dark.png?v=7.379.0") !important; background-position: left center; } .az-header__actions { gap: 3px; } /* Telefon menüde, şube kartlarında ve footer'da erişilebilir; app bar üç sık kullanılan eylemle sınırlı kalır: ara, sepet, menü. */ .az-header__actions .az-phone-action { display: none !important; } .az-header__actions .az-search-action, .az-header__actions .az-cart-link, .az-header__actions .az-menu-toggle { display: inline-grid; place-items: center; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .az-header__actions .az-search-action:active, .az-header__actions .az-cart-link:active, .az-header__actions .az-menu-toggle:active { background: rgba(41, 208, 218, .19); border-color: rgba(41, 208, 218, .55); color: #29D0DA; } /* Safari/PWA alt alanında tek gezinme katmanı. Yukarı dönüş telefonda gizli kalır; WhatsApp başlatıcısı tab barın üstündeki güvenli alanda görünür kalır. 7.255.0 (kullanıcı talimatı): KARŞILAMA KARTI ve GEZİNME BALONU artık MOBİLDE DE görünür — eski "bağımsız baloncuklar gizlenir" kararı kalktı; kart/balon alt sekme çubuğunun ÜSTÜNE konumlanır (içeriği ve tabbar'ı örtmez). */ .az-to-top { display: none !important; } .wa-greet, .wa-tip { bottom: calc(var(--az-tabs-clearance, calc(var(--mobile-nav-height, 72px) + env(safe-area-inset-bottom) + 16px)) + 8px); } .az-mobile-tabs { right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); min-height: 60px; padding: 3px; border-radius: 22px; background: rgba(24, 22, 20, .84) !important; border-color: rgba(255, 255, 255, .16) !important; box-shadow: 0 14px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } .az-mobile-tabs a { min-height: 50px; color: rgba(255, 255, 255, .7); font-size: 10.5px; } .az-mobile-tabs a[aria-current="page"] { background: rgba(41, 208, 218, .12); color: #29D0DA; } .az-mobile-tabs__primary b { width: 34px; height: 34px; border-radius: 11px; background: var(--action, #D93036); color: var(--on-action, #FFFFFF); box-shadow: 0 5px 14px rgb(var(--action-rgb, 217 48 54) / .25); } .az-mobile-tabs__primary span { color: #29D0DA; } /* İlk ekran: header ve hero tek kompozisyon; CTA'lar iki eşit iOS butonu. */ .az-home--ios27 .az-hero27 { padding-top: calc(var(--az-admin-bar-h, 0px) + var(--az-header-gap) + var(--az-header-h) + 10px); padding-bottom: 0; } .az-home--ios27 .az-hero27 > .az-shell { gap: 8px; } .az-home--ios27 .az-hero27__stage { min-height: clamp(430px, 61svh, 540px); border-radius: 0 0 28px 28px; } .az-home--ios27 .az-hero27__copy { min-height: clamp(430px, 61svh, 540px); max-width: none; padding: 20px; } .az-home--ios27 .az-hero27__copy h1 { font-size: clamp(36px, 10.2vw, 44px); line-height: .98; } .az-home--ios27 .az-hero27__copy > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.45; } .az-home--ios27 .az-hero27__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .az-home--ios27 .az-hero27__buttons .az-button { min-height: 52px; padding-inline: 10px; border-radius: 16px; font-size: 13px; white-space: nowrap; } .az-home--ios27.az-home--board .az-hero27__statusbar { border-radius: 20px; } /* Ana sayfada aşağıda tek, daha kompakt puan alanı var. Aynı mesajı hero altında ikinci kez göstermek hem akışı uzatıyor hem ana aksiyonu bölüyordu. */ .az-home--ios27.az-home--board .az-hero27__wallet { display: none; } .az-home--ios27.az-home--board .az-board { margin-top: 10px !important; } /* iOS collection rail: üç şube tek tek dikey yığılmaz. */ .az-home--ios27.az-home--board .az-board__panel { padding: 20px 16px 24px; border-radius: 28px; } .az-home--ios27.az-home--board .az-branches-reference { padding: 4px 0 22px; } .az-home--ios27.az-home--board .az-branches-reference .az-board__head { flex-direction: row; align-items: flex-end; gap: 10px; margin-bottom: 16px; } .az-home--ios27.az-home--board .az-branches-reference .az-board__head--branches h2 { font-size: clamp(27px, 8vw, 34px); } .az-home--ios27.az-home--board .az-board__subtitle { display: none; } .az-home--ios27.az-home--board .az-branches-reference .az-board__branches { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 310px); gap: 12px; overflow-x: auto; margin-inline: -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .az-home--ios27.az-home--board .az-branches-reference .az-board__branches::-webkit-scrollbar { display: none; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27 { scroll-snap-align: start; border-radius: 22px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__figure { min-height: 172px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__body { padding: 12px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__actions { grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__route, .az-home--ios27.az-home--board .az-branches-reference .az-branch27__call { min-height: 46px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__call { width: 46px; height: 46px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__order { grid-column: 1 / -1; min-height: 46px; } /* Sıra Gecesi tam ekran uzunluğunda ayrı foto+metin sayfası olmaz; tek odaklı promosyon kartına dönüşür. */ .az-home--ios27.az-home--board .az-sira-reference { margin-top: 20px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27 { display: grid; grid-template-columns: 1fr; grid-template-rows: 320px; min-height: 320px; border-radius: 24px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__photo, .az-home--ios27.az-home--board .az-sira-reference .az-sira27__copy { grid-column: 1; grid-row: 1; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__shade { inset: 0; width: auto; height: auto; background: linear-gradient(180deg, rgba(20, 14, 10, .08), rgba(20, 14, 10, .88)); } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__copy { justify-content: flex-end; padding: 22px; background: transparent; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__title { margin-top: 10px; font-size: 34px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__copy p { display: -webkit-box; overflow: hidden; max-width: 30ch; margin-top: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.4; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__cta { width: auto; min-height: 48px; margin-top: 14px; } /* Puan + avantajlar: bir kompakt üyelik kartı ve yatay küçük servis kartları. */ .az-home--ios27.az-home--board .az-rewards-bento { gap: 12px; margin-top: 22px; } .az-home--ios27.az-home--board .az-rewards-card { min-height: 230px; padding: 22px; border-radius: 22px; } .az-home--ios27.az-home--board .az-rewards-card__medal { width: 56px; height: 56px; } .az-home--ios27.az-home--board .az-rewards-card > p { max-width: 28ch; margin-top: 16px; font-size: 19px; line-height: 1.35; } .az-home--ios27.az-home--board .az-rewards-card > a { min-height: 48px; margin-top: 18px; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; grid-template-rows: 1fr; gap: 10px; overflow-x: auto; margin-inline: -16px; padding: 0 16px 6px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks::-webkit-scrollbar { display: none; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span, .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:nth-child(-n+3), .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:nth-child(n+4), .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:last-child { grid-column: auto; min-height: 136px; gap: 10px; padding: 14px; scroll-snap-align: start; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks b { width: 46px; height: 46px; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks small { display: none; } /* Lezzet kategorileri masaüstü 2/1 kolonundan gerçek mobil yatay koleksiyona. */ .az-home--ios27 .az-cats--reference { padding-block: 24px !important; } .az-home--ios27 .az-cats--reference .az-section-head { flex-direction: row; align-items: flex-end; margin-bottom: 16px; } .az-home--ios27 .az-cats--reference .az-section-head h2 { font-size: clamp(28px, 8.3vw, 36px); } .az-home--ios27 .az-cats--reference .az-cats__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72%, 270px); gap: 12px; overflow-x: auto; margin-inline: -12px; padding: 0 12px 8px; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .az-home--ios27 .az-cats--reference .az-cats__grid::-webkit-scrollbar { display: none; } .az-home--ios27 .az-cats--reference .az-cat-card { min-height: 228px; scroll-snap-align: start; } /* Harita ve hikâye değerini korur, tam bir ikinci/üçüncü ekran kadar uzamaz. */ .az-home--ios27 .az-branchmap { padding-block: 16px !important; } .az-home--ios27 .az-branchmap__lead { display: none; } .az-home--ios27 .az-branchmap__stage, .az-home--ios27 .az-branchmap__canvas { min-height: 360px; height: 360px; } .az-home--ios27 .az-origin { padding-block: 16px 28px !important; } .az-home--ios27 .az-origin__card { min-height: 340px; } .az-home--ios27 .az-origin__copy { padding: 22px 20px; } .az-home--ios27 .az-origin__copy h2 { font-size: 27px; } .az-home--ios27 .az-origin__copy p:not(.az-origin__accent) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .az-home--ios27 .az-origin__route { display: none; } } @media (max-width: 359px) { .az-header .az-brand .anzelha-brand-mark { width: 96px !important; } .az-header__actions .az-search-action, .az-header__actions .az-cart-link, .az-header__actions .az-menu-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } .az-home--ios27 .az-hero27__buttons { grid-template-columns: 1fr; } .az-home--ios27 .az-cats--reference .az-section-head { align-items: flex-start; flex-direction: column; } } /* ============================================================ 7.159.0 — iOS 27 MOBİL UYGULAMA DÜZELTME KATMANI ------------------------------------------------------------ 7.158 ekran görüntüsü denetiminin doğrudan karşılıkları: - açık mod artık koyu app bar / tab bar / sheet kullanmaz, - bölüm başlıkları tek ölçü sistemine bağlanır ve çakışmaz, - Puan ve Sınırsız İkram yalnız birer güçlü yüzeyde görünür, - WhatsApp eklentisinin daha güçlü display kuralı kesin geçersizlenir, - dikey yoğunluk bir tur daha azaltılır. ============================================================ */ @media (max-width: 767px) { :root { --az-header-h: 52px; --az-mobile-bg: #f2f2f7; --az-mobile-surface: rgba(255, 255, 255, .88); --az-mobile-surface-solid: #fff; --az-mobile-border: rgba(60, 60, 67, .16); --az-mobile-text: #1c1c1e; --az-mobile-muted: #6e6e73; --az-mobile-accent: #087f75; } /* Boyut ve güvenli alanlar: toolbar ve tabbar içerikten daha baskın olmaz. */ .az-header .az-header__inner, .az-header.scrolled .az-header__inner, .az-header--overlay .az-header__inner { height: 52px; padding: 4px 5px 4px 10px; border-radius: 18px !important; } .az-header .az-brand { height: 40px; } .az-header .az-brand .anzelha-brand-mark { width: clamp(102px, 29vw, 120px) !important; height: 38px !important; } .az-header__actions .az-search-action, .az-header__actions .az-cart-link, .az-header__actions .az-menu-toggle { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: 12px; } .az-mobile-tabs { min-height: 56px; padding: 3px; border-radius: 20px; background: rgba(24, 22, 20, .96) !important; } .az-mobile-tabs a { min-height: 48px; font-size: 10.5px; } .az-mobile-tabs a .anzelha-icon { width: 21px; height: 21px; } .az-mobile-tabs__primary b { width: 32px; height: 32px; border-radius: 10px; } /* Hero: tek uygulama açılış ekranı; metin ve eylemler aynı viewport'ta. */ .az-home--ios27 .az-hero27 { padding-top: calc(var(--az-admin-bar-h, 0px) + var(--az-header-gap) + var(--az-header-h) + 8px); } .az-home--ios27 .az-hero27__stage, .az-home--ios27 .az-hero27__copy { min-height: 405px; min-height: clamp(405px, 55svh, 480px); } .az-home--ios27 .az-hero27__copy { padding: 18px; } .az-home--ios27 .az-hero27__pill { min-height: 36px; padding-inline: 13px; font-size: 10.5px; } .az-home--ios27 .az-hero27__copy h1 { font-size: clamp(34px, 9.4vw, 41px); } .az-home--ios27 .az-hero27__copy > p { margin-block: 10px 14px; font-size: 14px; } .az-home--ios27 .az-hero27__buttons .az-button { min-height: 48px; font-size: 12.5px; } .az-home--ios27.az-home--board .az-hero27__status-cell { padding: 8px 5px; } /* Bölüm başlıkları: başlık/eylem aynı satırda güvenli sütunlara ayrılır. Yazı hiçbir genişlikte eylemin altına girmez. */ .az-home--ios27.az-home--board .az-branches-reference .az-board__head, .az-home--ios27 .az-ikram27 .az-section-head, .az-home--ios27 .az-cats--reference .az-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; width: 100%; } .az-home--ios27.az-home--board .az-branches-reference .az-board__head--branches h2 { gap: 7px; min-width: 0; font-size: clamp(22px, 6.4vw, 27px) !important; line-height: 1; letter-spacing: -.035em; white-space: nowrap; } .az-home--ios27.az-home--board .az-branches-reference .az-board__head--branches h2 b .anzelha-icon { width: 18px; height: 18px; } .az-home--ios27.az-home--board .az-branches-reference .az-board__more, .az-home--ios27 .az-ikram27 .az-text-action, .az-home--ios27 .az-cats--reference .az-text-action { min-height: 36px; gap: 4px; padding: 0; font-size: 12px; white-space: nowrap; } .az-home--ios27.az-home--board .az-branches-reference .az-board__more .anzelha-icon, .az-home--ios27 .az-ikram27 .az-text-action .anzelha-icon, .az-home--ios27 .az-cats--reference .az-text-action .anzelha-icon { width: 15px; height: 15px; } /* Şube koleksiyonu: gerçek uygulama kartı boyutu. */ .az-home--ios27.az-home--board .az-board__panel { padding: 16px 14px 20px; } .az-home--ios27.az-home--board .az-branches-reference { padding-bottom: 16px; } .az-home--ios27.az-home--board .az-branches-reference .az-board__head { margin-bottom: 12px; } .az-home--ios27.az-home--board .az-branches-reference .az-board__branches { grid-auto-columns: min(78%, 290px); margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__figure { min-height: 150px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__inspired { top: 12px; left: 12px; min-height: 30px; padding-inline: 10px; font-size: 11.5px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__title { right: 58px; bottom: 14px; left: 14px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__title h3 { font-size: 22px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__title small { font-size: 12px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__body { gap: 10px; padding: 10px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch-card__status { min-height: 40px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__order, .az-home--ios27.az-home--board .az-branches-reference .az-branch27__route, .az-home--ios27.az-home--board .az-branches-reference .az-branch27__call { min-height: 42px; } .az-home--ios27.az-home--board .az-branches-reference .az-branch27__call { width: 42px; height: 42px; } /* Sıra Gecesi ve puan yüzeyi ikinci bir tam sayfaya dönüşmez. */ .az-home--ios27.az-home--board .az-sira-reference .az-sira27 { grid-template-rows: 280px; min-height: 280px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__copy { padding: 18px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__title { font-size: 30px; } .az-home--ios27.az-home--board .az-sira-reference .az-sira27__cta { min-height: 44px; } .az-home--ios27.az-home--board .az-rewards-bento { margin-top: 18px; } .az-home--ios27.az-home--board .az-rewards-card { min-height: 196px; padding: 18px; } .az-home--ios27.az-home--board .az-rewards-card__medal { width: 48px; height: 48px; } .az-home--ios27.az-home--board .az-rewards-card__medal i { font-size: 26px; } .az-home--ios27.az-home--board .az-rewards-card__head > strong { font-size: 12px; letter-spacing: .13em; } .az-home--ios27.az-home--board .az-rewards-card > p { margin-top: 12px; font-size: 16px; } .az-home--ios27.az-home--board .az-rewards-card > a { min-height: 44px; margin-top: 14px; padding-inline: 18px; font-size: 13px; } /* Puan kartında tekrar edilen iki bilgi kartını kaldır: “12 Çeşit” aşağıdaki gerçek ikram koleksiyonunda, “Anzelha Puan” ana puan kartında görünür. */ .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:first-child, .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:last-child { display: none; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks { grid-auto-columns: 42%; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span, .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:nth-child(-n+3), .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span:nth-child(n+4) { min-height: 112px; padding: 12px; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks b { width: 40px; height: 40px; } .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks strong { font-size: 13px; } /* İkram başlığı ve kart metinleri açık/koyu modda her zaman okunur. */ .az-home--ios27 .az-ikram27 { padding-block: 20px !important; } .az-home--ios27 .az-ikram27 .az-section-head { margin-bottom: 12px; } .az-home--ios27 .az-ikram27 .az-section-head h2 { margin: 2px 0 0; font-size: clamp(22px, 6.4vw, 27px); line-height: 1.08; letter-spacing: -.025em; } .az-home--ios27 .az-ikram27__card { flex-basis: 76%; border-radius: 18px; } .az-home--ios27 .az-ikram27__media { aspect-ratio: 16 / 9; } .az-home--ios27 .az-ikram27__label { padding: 10px 12px 12px; } .az-home--ios27 .az-ikram27__label strong { font-size: 14px; } .az-home--ios27 .az-ikram27__label small { font-size: 12px; } /* Kategori / harita / hikâye yoğunluğu. */ .az-home--ios27 .az-cats--reference .az-section-head h2 { font-size: clamp(24px, 7vw, 30px); } .az-home--ios27 .az-cats--reference .az-cats__grid { grid-auto-columns: min(68%, 250px); } .az-home--ios27 .az-cats--reference .az-cat-card { min-height: 200px; } .az-home--ios27 .az-branchmap__stage, .az-home--ios27 .az-branchmap__canvas { min-height: 300px; height: 300px; } .az-home--ios27 .az-origin__card { min-height: 290px; } .az-home--ios27 .az-origin__copy h2 { font-size: 24px; } /* AÇIK MOD — gerçek iOS açık yüzeyi. Koyu modun renkleri bu bloğa girmez. */ html:not([data-theme="dark"]) body.az-mobile-app { background: var(--az-mobile-bg) !important; color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-home--ios27 { background: var(--az-mobile-bg); } html:not([data-theme="dark"]) .az-header .az-header__inner, html:not([data-theme="dark"]) .az-header.scrolled .az-header__inner, html:not([data-theme="dark"]) .az-header--overlay .az-header__inner { border-color: rgba(255, 255, 255, .72) !important; background-color: rgba(248, 248, 250, .82) !important; background-image: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(239, 239, 244, .76)) !important; box-shadow: 0 10px 28px rgba(20, 20, 24, .12), inset 0 1px 0 rgba(255, 255, 255, .95) !important; color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-header .az-brand .anzelha-brand-mark { background-image: url("../images/brand/anzelha-logo.png?v=7.379.0") !important; } html:not([data-theme="dark"]) .az-header__actions .az-search-action, html:not([data-theme="dark"]) .az-header__actions .az-cart-link, html:not([data-theme="dark"]) .az-header__actions .az-menu-toggle { border-color: rgba(60, 60, 67, .15); background: rgba(255, 255, 255, .62); color: var(--az-mobile-text); } html:not([data-theme="dark"]) .anzelha-menu-panel { --az-sheet-bg-a: rgba(250, 250, 252, .98); --az-sheet-bg-b: rgba(241, 241, 246, .97); --az-sheet-solid: #f7f7f9; --az-sheet-edge: rgba(255, 255, 255, .88); --az-sheet-spec: rgba(255, 255, 255, .96); --az-sheet-shadow: 0 -24px 70px rgba(20, 20, 24, .18); --az-sheet-line: rgba(60, 60, 67, .12); --az-sheet-grab: rgba(60, 60, 67, .28); --az-sheet-btn-bg: rgba(255, 255, 255, .72); --az-sheet-btn-edge: rgba(60, 60, 67, .13); --az-sheet-row: rgba(255, 255, 255, .7); --az-sheet-row-edge: rgba(60, 60, 67, .09); color: var(--az-mobile-text); } html:not([data-theme="dark"]) .anzelha-menu-panel > .anzelha-menu-panel__surface { color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-mobile-tabs { border-color: rgba(255, 255, 255, .78) !important; background: rgba(248, 248, 250, .96) !important; box-shadow: 0 12px 34px rgba(20, 20, 24, .16), inset 0 1px 0 rgba(255, 255, 255, .96) !important; } html:not([data-theme="dark"]) .az-mobile-tabs a { color: #6e6e73; } html:not([data-theme="dark"]) .az-mobile-tabs a[aria-current="page"] { background: rgba(8, 127, 117, .1); color: var(--az-mobile-accent); } html:not([data-theme="dark"]) .az-mobile-tabs__primary span { color: var(--az-mobile-accent); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-hero27__statusbar { border-color: rgba(255, 255, 255, .72) !important; background: rgba(248, 248, 250, .94) !important; background-image: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(242, 242, 247, .9)) !important; color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-hero27__status-cell strong { color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-board__panel { border-color: rgba(255, 255, 255, .9); background: #f7f7f9; box-shadow: 0 16px 42px rgba(20, 20, 24, .08), inset 0 1px 0 #fff; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-board__head--branches h2, html:not([data-theme="dark"]) .az-home--ios27 .az-ikram27 .az-section-head h2 { color: var(--az-mobile-text) !important; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-board__more, html:not([data-theme="dark"]) .az-home--ios27 .az-ikram27 .az-text-action { color: var(--az-mobile-accent); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card { border-color: rgba(8, 127, 117, .18); background: linear-gradient(145deg, #fff, #f2fbfa); color: var(--az-mobile-text); box-shadow: 0 14px 34px rgba(20, 20, 24, .08), inset 0 1px 0 #fff; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card::before, html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card::after { opacity: .22; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card__head > strong { color: var(--az-mobile-accent); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card__medal { border-color: rgba(8, 127, 117, .22); background: rgba(8, 127, 117, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); color: var(--az-mobile-accent); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card > p { color: #3a3a3c; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-card > a { border-color: rgba(8, 127, 117, .2); background: var(--brand-soft, rgb(63 198 198 / .13)); color: var(--brand-tx, #0D7473); box-shadow: none; } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks > span { border-color: var(--az-mobile-border); background: #fff; box-shadow: 0 8px 22px rgba(20, 20, 24, .06); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-rewards-bento .az-board__perks strong { color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-home--ios27 .az-ikram27__card { border-color: var(--az-mobile-border); background: #fff; box-shadow: 0 10px 26px rgba(20, 20, 24, .08); } html:not([data-theme="dark"]) .az-home--ios27 .az-ikram27__label strong { color: var(--az-mobile-text); } html:not([data-theme="dark"]) .az-home--ios27 .az-ikram27__label small { color: var(--az-mobile-muted); } /* KOYU MOD — görünürlük kontratları; metin koyu yüzeyde kaybolmaz. */ [data-theme="dark"] .az-home--ios27 .az-ikram27 .az-section-head h2, [data-theme="dark"] .az-home--ios27 .az-ikram27__label strong { color: var(--dark-text, #F5F7F8); } [data-theme="dark"] .az-home--ios27 .az-ikram27__label small { color: var(--dark-text-secondary, #AEB4B8); } } @media (max-width: 350px) { .az-home--ios27.az-home--board .az-branches-reference .az-board__head--branches h2 { font-size: 21px !important; } .az-home--ios27.az-home--board .az-branches-reference .az-board__more, .az-home--ios27 .az-ikram27 .az-text-action, .az-home--ios27 .az-cats--reference .az-text-action { font-size: 11px; } } /* 7.166.0 final cascade: Safari sekmesi ve standalone PWA için ölçüler. Bu kısa blok bilinçli olarak dosyanın en sonundadır. */ @media (max-width: 767px) { html, body { max-width: 100%; overflow-x: clip; } body.az-mobile-app { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--az-tabs-clearance, 86px) + 28px); } .az-header, .az-header.glass-navigation { top: calc(var(--az-admin-bar-h, 0px) + max(8px, env(safe-area-inset-top))); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); } .az-header__actions .az-search-action, .az-header__actions .az-cart-link, .az-header__actions .az-menu-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .az-mobile-tabs { right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); min-height: 62px; padding: 4px; contain: layout paint; } .az-standalone .az-mobile-tabs { bottom: max(8px, env(safe-area-inset-bottom)); } .az-mobile-tabs a { min-width: 0; min-height: 52px; padding: 3px 1px; font-size: clamp(10px, 2.8vw, 12px); } .az-mobile-tabs a[aria-current="page"] { background: transparent !important; box-shadow: inset 0 -2px 0 currentColor; } .az-mobile-tabs a[aria-current="page"]::after { display: none; } .az-mobile-tabs__primary b { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; } .az-home--ios27 .az-hero27__stage, .az-home--ios27 .az-hero27__copy { min-height: min(560px, calc(100dvh - 92px)); } } @media (max-width: 359px) { .az-home--ios27 .az-hero27__buttons { grid-template-columns: 1fr; } } /* ============================================================ 7.167.0 — AÇIK MOD iOS UYGULAMA GÖRSEL OTORİTESİ Fotoğrafı beyazlatan yüzeyler kaldırılır; okunabilirlik fotoğrafı öldürmeyen lokal koyu degrade ve gerçek iOS cam kartlarla sağlanır. ============================================================ */ @media (max-width: 767px) { html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__bg--light img { filter: saturate(1.13) contrast(1.1) brightness(.94); transform: scale(1.015); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__scrim { background: linear-gradient(180deg, rgba(7, 12, 13, .18) 0%, rgba(7, 12, 13, .08) 28%, rgba(7, 12, 13, .42) 62%, rgba(7, 12, 13, .82) 100%), linear-gradient(90deg, rgba(7, 12, 13, .25), transparent 74%); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__copy { color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .24); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__copy h1, html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__copy > p { color: #fff !important; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__copy h1 em { color: #65e2d5 !important; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__pill { border-color: rgba(255, 255, 255, .28); background: rgba(10, 19, 20, .34); color: #fff; -webkit-backdrop-filter: blur(12px) saturate(135%); backdrop-filter: blur(12px) saturate(135%); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__buttons .az-button--primary { border-color: rgba(255, 255, 255, .28); background: linear-gradient(135deg, #61ded1, #2fc1b2); color: #063f39; box-shadow: 0 10px 24px rgba(19, 120, 111, .3), inset 0 1px 0 rgba(255, 255, 255, .5); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__buttons .az-button--light { border-color: rgba(255, 255, 255, .34); background: rgba(18, 22, 22, .56); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-hero27__statusbar.az-hero27__statusbar--quick { gap: 1px; margin-top: 14px; padding: 6px; border-color: rgba(255, 255, 255, .26) !important; border-radius: 22px; background: rgba(14, 19, 20, .64) !important; background-image: linear-gradient(145deg, rgba(35, 42, 43, .62), rgba(8, 12, 13, .7)) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .15); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell { min-height: 72px; padding: 8px 9px; background: rgba(255, 255, 255, .055) !important; color: #fff; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell > b { width: 42px; height: 42px; flex-basis: 42px; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .12); color: #65e2d5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-hero27__status-cell strong { color: #fff !important; } html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-cell small, html:not([data-theme="dark"]) .az-home--ios27 .az-hero27__statusbar--quick .az-hero27__status-pick { color: rgba(255, 255, 255, .7) !important; } /* Şube kartları: açık modda gerçek fotoğraf yüzeyi ve düzenli koleksiyon. */ html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-board__panel { border-color: rgba(60, 60, 67, .11); background: #fff; box-shadow: 0 10px 30px rgba(20, 20, 24, .07); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-branches-reference .az-branch27 { border: 1px solid rgba(60, 60, 67, .14); background: #fff; box-shadow: 0 8px 22px rgba(20, 20, 24, .09); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-branches-reference .az-branch27__figure img { filter: saturate(1.08) contrast(1.06); } html:not([data-theme="dark"]) .az-home--ios27.az-home--board .az-branches-reference .az-branch27__figure::after { background: linear-gradient(180deg, rgba(8, 10, 10, .02) 30%, rgba(8, 10, 10, .76) 100%); } } @media (display-mode: standalone) and (max-width: 767px) { body.az-mobile-app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .az-header, .az-header.glass-navigation { top: calc(var(--az-admin-bar-h, 0px) + max(10px, env(safe-area-inset-top))); } .az-mobile-tabs { right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); } } /* 7.185.0 — Ana sayfada kompakt yukarı çık kontrolü telefon kabuğunda da görünür. Menü, arama, sohbet veya klavye katmanı açıkken mevcut güvenli gizleme davranışı aynen korunur. */ @media (max-width: 767px) { body.home:not(.anzelha-menu-open):not(.az-overlay-open):not(.az-keyboard-open) .az-to-top[data-az-top-always] { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ============================================================ 7.200.0 — Referansla eşlenmiş mobil tarayıcı uygulama kompozisyonu. Son otorite yalnız 0–767 px'tir; masaüstü katmanına sızmaz. ============================================================ */ /* 7.256.0 — Vitrin seçicileri listeden çıktı: "Tümünü Gör" ve favori düğmesi talimat gereği artık masaüstünde de görünür; mobil kısa başlık kaldırıldı. */ .az-mobile-home-hub, .az-hero27__mobile-copy, .az-mobile-more-grid, .az-menu-title-mobile, .az-mobile-whatsapp-action, .az-clock-mobile-label, .az-mobile-hours-sheet, .az-mobile-more-location { display: none; } @media (max-width: 767px) { :root { --az-m-page: #fff; --az-m-card: rgba(255,255,255,.86); --az-m-ink: #111113; --az-m-muted: #68686f; --az-m-line: rgba(60,60,67,.14); --az-m-gold: #c88117; --az-m-gold-soft: rgba(200,129,23,.12); } body.az-mobile-app .az-mobile-main { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.az-mobile-app .az-mobile-main :where(h1,h2,h3,h4,h5,h6,button,input) { font-family: inherit !important; } body.az-mobile-app .az-home--ios27 { background: var(--az-m-page) !important; } body.az-mobile-app { background: var(--az-m-page) !important; color: var(--az-m-ink); font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; } [data-theme="dark"] body.az-mobile-app { --az-m-page: var(--dark-bg, #0B0C0D); --az-m-card: var(--dark-glass-strong, rgba(28, 30, 32, .88)); --az-m-ink: var(--dark-text, #F5F7F8); --az-m-muted: var(--dark-text-secondary, #AEB4B8); --az-m-line: var(--dark-border, rgba(255,255,255,.14)); /* Final Koyu Mod Talimatı md.4: mobil kabuk aksanı koyu modda turkuaz — alt sekme/hızlı aksiyon altın kalmasın (canlıda ölçülen kaçak). */ --az-m-gold: var(--dark-accent, #14C4CF); --az-m-gold-soft: rgba(20, 196, 207, .12); } /* Logo · arama · WhatsApp · durum · sepet · diğer. */ body.az-mobile-app .az-header, body.az-mobile-app .az-header.glass-navigation { top: calc(var(--az-admin-bar-h,0px) + env(safe-area-inset-top)); right: 0; left: 0; width: 100%; border: 0 !important; border-radius: 0 !important; background: rgba(251,250,248,.91) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } [data-theme="dark"] body.az-mobile-app .az-header, [data-theme="dark"] body.az-mobile-app .az-header.glass-navigation { background: rgba(11, 12, 13,.9) !important; } body.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(62px,1fr) auto; gap: 6px; width: 100%; height: 76px; padding: 8px max(10px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); } body.az-mobile-app .az-header .az-brand { width: 100%; min-width: 0; height: 52px; justify-content: flex-start; } body.az-mobile-app .az-header .az-brand .anzelha-brand-logo { width: clamp(76px,22vw,102px); max-width: 100%; height: 42px; } html:not([data-theme="dark"]) body.az-mobile-app .az-header .az-brand .anzelha-brand-logo { filter: none; } body.az-mobile-app .az-header__actions { display: flex; align-items: center; gap: 3px; min-width: 0; } body.az-mobile-app .az-header__actions .az-search-action, body.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.az-mobile-app .az-header__actions .az-clock-action, body.az-mobile-app .az-header__actions .az-cart-link, body.az-mobile-app .az-header__actions .az-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--az-m-line) !important; border-radius: 50% !important; background: transparent !important; color: var(--az-m-ink) !important; box-shadow: none !important; } body.az-mobile-app .az-header__actions .az-phone-action, body.az-mobile-app .az-header__actions .az-theme-toggle, body.az-mobile-app .az-header__actions .az-language-switch, body.az-mobile-app .az-header__actions .az-account-action, body.az-mobile-app .az-header__actions .az-points-link, body.az-mobile-app .az-header__actions .header-order-button { display: none !important; } body.az-mobile-app .az-header__actions .az-clock-action { width: auto; min-width: 74px; gap: 5px; padding-inline: 10px; border-radius: 999px !important; } body.az-mobile-app .az-clock-mobile-label { display: inline; max-width: 76px; overflow: hidden; color: var(--az-m-ink); font-size: 12px; font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } body.az-mobile-app .az-clock-dot { position: static; width: 7px; height: 7px; flex: 0 0 7px; margin: 0; } body.az-mobile-app .az-clock-tip { display: none !important; } body.az-mobile-app .mobile-cart-count[hidden] { display: none !important; } /* Mobil hero için ayrı, kompakt kadraj ve kısa metin. */ body.az-mobile-app .az-home--ios27 .az-hero27 { padding: calc(76px + env(safe-area-inset-top)) 0 0 !important; margin: 0 !important; background: transparent !important; } body.az-mobile-app .az-home--ios27 .az-hero27 > .az-shell, body.az-mobile-app .az-mobile-home-hub > .az-shell, body.az-mobile-app .az-showcase > .az-shell { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 18px !important; } body.az-mobile-app .az-home--ios27 .az-hero27__frame { display: block; min-height: 0; } body.az-mobile-app .az-home--ios27 .az-hero27__stage { min-height: 0 !important; height: auto !important; aspect-ratio: 1.65/1; width: 100% !important; margin-inline: 0 !important; overflow: hidden; border: 0; border-radius: 20px; box-shadow: 0 10px 28px rgba(24, 26, 28,.11); } body.az-mobile-app .az-home--ios27 .az-hero27__bg img { width: 100%; height: 100%; object-fit: fill; object-position: 50% 50%; filter: none; } body.az-mobile-app .az-home--ios27 .az-hero27__scrim { background: linear-gradient(180deg,rgba(12,10,8,0) 28%,rgba(12,10,8,.58) 100%), linear-gradient(90deg,rgba(12,10,8,.24),rgba(12,10,8,0) 72%) !important; } body.az-mobile-app .az-home--ios27 .az-hero27__copy { display: flex; align-items: flex-end; min-height: 0 !important; height: 100%; padding: 18px !important; } body.az-mobile-app .az-home--ios27 .az-hero27__copy > .az-hero27__pill, body.az-mobile-app .az-home--ios27 .az-hero27__copy > h1, body.az-mobile-app .az-home--ios27 .az-hero27__copy > p, body.az-mobile-app .az-home--ios27 .az-hero27__statusbar, body.az-mobile-app .az-home--ios27 .az-hero27__wallet, body.az-mobile-app .az-home--ios27 .az-hero27__credit { display: none !important; } body.az-mobile-app .az-hero27__mobile-copy { display: block; width: min(100%,300px); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.3); } body.az-mobile-app .az-hero27__mobile-copy .az-hero27__mobile-title { max-width: 280px; margin: 0 0 7px; color: #fff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(27px,8.2vw,36px); font-weight: 760; line-height: .98; letter-spacing: -.045em; } body.az-mobile-app .az-hero27__mobile-copy p { margin: 0; color: rgba(255,255,255,.86) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(15px,4.4vw,19px); line-height: 1.25; } /* Hızlı işlemler, keşfet kartı ve dinamik kategori şeridi. */ body.az-mobile-app .az-mobile-home-hub { display: block; padding: 18px 0 4px; } body.az-mobile-app .az-mobile-quick-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 88px; overflow: hidden; border: 1px solid var(--az-m-line); border-radius: 20px; background: var(--az-m-card); box-shadow: 0 7px 24px rgba(18, 20, 22,.06); } body.az-mobile-app .az-mobile-quick-actions a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-width: 0; min-height: 86px; padding: 8px 4px; color: var(--az-m-ink); font-size: clamp(10.5px,3vw,13px); font-weight: 620; line-height: 1.1; text-align: center; text-decoration: none; } body.az-mobile-app .az-mobile-quick-actions a > span:last-child { display: block; max-width: 72px; overflow-wrap: normal; white-space: normal; } body.az-mobile-app .az-mobile-quick-actions a + a::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 0; width: 1px; background: var(--az-m-line); } body.az-mobile-app .az-mobile-quick-actions .anzelha-icon { width: 25px; height: 25px; stroke-width: 1.7; } body.az-mobile-app .az-mobile-quick-actions a.is-primary { color: var(--az-m-gold); } body.az-mobile-app .az-mobile-quick-actions a.is-primary .anzelha-icon { box-sizing: content-box; padding: 8px; border-radius: 50%; background: var(--az-m-gold); color: #fff; } body.az-mobile-app .az-mobile-lahmacun-card { display: grid; grid-template-columns: 64px minmax(0,1fr) 40px; align-items: center; gap: 14px; min-height: 94px; margin-top: 15px; padding: 14px 12px; border: 1px solid rgba(200,129,23,.18); border-radius: 21px; background: var(--az-m-card); color: var(--az-m-ink); text-decoration: none; } /* 7.290.0 (kullanıcı talimatı): koyu kutulu Z monogramı yerine resmî yuvarlak Anzelha Lahmacun rozeti; rozet kendi krem zeminini taşır. */ body.az-mobile-app .az-mobile-lahmacun-card > img { box-sizing: border-box; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; } body.az-mobile-app .az-mobile-lahmacun-card > span { display: grid; gap: 3px; min-width: 0; } body.az-mobile-app .az-mobile-lahmacun-card small { color: var(--az-m-gold); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; } body.az-mobile-app .az-mobile-lahmacun-card strong { overflow: hidden; font-size: clamp(15px,4.6vw,20px); line-height: 1.15; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; } body.az-mobile-app .az-mobile-lahmacun-card em { overflow: hidden; color: var(--az-m-muted); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } /* 7.290.0: yönlendirme oku dolu aksan diski (hızlı işlemlerdeki is-primary deseniyle aynı: açıkta altın, koyuda turkuaza otomatik döner). */ body.az-mobile-app .az-mobile-lahmacun-card > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--az-m-gold); color: #fff; } body.az-mobile-app .az-mobile-categories { margin-top: 22px; } body.az-mobile-app .az-mobile-categories > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 4px 12px; } body.az-mobile-app .az-mobile-categories h2 { margin: 0; color: var(--az-m-ink); font-size: 21px; font-weight: 750; letter-spacing: -.025em; } body.az-mobile-app .az-mobile-categories > header a { display: inline-flex; min-height: 44px; align-items: center; color: var(--az-m-gold); font-size: 14px; font-weight: 650; text-decoration: none; } body.az-mobile-app .az-mobile-categories > div { display: flex; gap: 6px; overflow-x: auto; margin-inline: -18px; padding: 0 18px 4px; scroll-padding-inline: 18px; scroll-snap-type: x proximity; scrollbar-width: none; } body.az-mobile-app .az-mobile-categories > div::-webkit-scrollbar { display: none; } body.az-mobile-app .az-mobile-categories > div > a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 7px 10px; border: 1px solid var(--az-m-line); border-radius: 17px; color: var(--az-m-ink); font-size: 10.5px; font-weight: 620; text-decoration: none; scroll-snap-align: start; white-space: nowrap; } body.az-mobile-app .az-mobile-categories .anzelha-icon { width: 29px; height: 29px; stroke-width: 1.6; } /* 7.256.0 — Günlük WooCommerce vitrini talimat gereği TEK SÜTUN karta geçti; kart görünümü, renkleri ve buton akışları home-ios27.css tek kaynağından gelir (eski yatay şerit override'ları kaldırıldı). Mobil kabukta yalnız bölümün dikey ritmi ayarlanır. */ body.az-mobile-app .az-showcase { padding: 20px 0 10px !important; } /* "Diğer" alt kartı: 2×3 işlem ve açılır dil/görünüm tercihleri. */ body.az-mobile-app .az-menu-title-desktop, body.az-mobile-app .anzelha-menu-panel__content, body.az-mobile-app .anzelha-menu-panel__footer { display: none !important; } body.az-mobile-app .az-menu-title-mobile { display: inline; } body.az-mobile-app .anzelha-menu-panel > .anzelha-menu-panel__surface { display: flex; flex-direction: column; height: min(59dvh,620px); max-height: min(59dvh,620px); overflow: hidden; padding-bottom: calc(18px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0 !important; background: rgba(251,250,248,.98) !important; } body.az-mobile-app .anzelha-menu-panel__backdrop { background: rgba(0,0,0,.52) !important; -webkit-backdrop-filter: blur(1.5px) !important; backdrop-filter: blur(1.5px) !important; } [data-theme="dark"] body.az-mobile-app .anzelha-menu-panel > .anzelha-menu-panel__surface { background: rgba(18, 20, 22,.98) !important; } body.az-mobile-app .anzelha-menu-panel__header { position: static; padding: 12px 24px 14px !important; border: 0 !important; background: transparent !important; } body.az-mobile-app .anzelha-menu-panel__header small { display: none; } body.az-mobile-app .anzelha-menu-panel__header h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 27px !important; font-weight: 760; letter-spacing: -.035em; } body.az-mobile-app .anzelha-menu-panel .anzelha-menu-panel__close { border-radius: 50% !important; } body.az-mobile-app .az-mobile-more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; overflow: visible; padding: 6px 22px 14px; } body.az-mobile-app .az-mobile-more-grid a, body.az-mobile-app .az-mobile-more-grid button { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 8px; min-height: 78px; padding: 12px; border: 1px solid var(--az-m-line); border-radius: 16px; background: rgba(255,255,255,.46); color: var(--az-m-ink); font: inherit; text-align: left; text-decoration: none; } [data-theme="dark"] body.az-mobile-app .az-mobile-more-grid a, [data-theme="dark"] body.az-mobile-app .az-mobile-more-grid button { background: rgba(255,255,255,.045); } body.az-mobile-app .az-mobile-more-grid a > span, body.az-mobile-app .az-mobile-more-grid button > span { display: grid; place-items: center; width: 42px; height: 42px; } body.az-mobile-app .az-mobile-more-grid strong { min-width: 0; font-size: clamp(11.5px,3vw,14px); line-height: 1.2; white-space: nowrap; } body.az-mobile-app .az-mobile-more-grid > * > .anzelha-icon:last-child { width: 17px; height: 17px; opacity: .6; } body.az-mobile-app .anzelha-menu-panel__prefs { display: flex; margin: 0 22px; padding: 12px; border: 1px solid var(--az-m-line); border-radius: 17px; } body.az-mobile-app .anzelha-menu-panel__prefs[hidden] { display: none !important; } body.az-mobile-app .az-mobile-more-location { display: block; margin: auto 0 0; padding: 12px 20px 0; color: var(--az-m-muted); font-size: 14px; font-weight: 450; text-align: center; } /* Ortak overlay yöneticisine bağlı çalışma saatleri bottom sheet'i. */ body.az-mobile-app .az-mobile-hours-sheet { position: fixed; z-index: var(--az-layer-modal, 800); inset: 0; } body.az-mobile-app .az-mobile-hours-sheet[hidden] { display: none !important; } body.az-mobile-app .az-mobile-hours-sheet:not([hidden]) { display: block; } body.az-mobile-app .az-mobile-hours-sheet__backdrop { position: absolute; inset: 0; border: 0; background: rgba(10,10,12,0); opacity: 1; /* 4-2: blur sabit, renk animasyonlu */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background-color 260ms ease; } body.az-mobile-app .az-mobile-hours-sheet__panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(84dvh,700px); padding: 0 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: rgba(251,250,248,.98); color: var(--az-m-ink); transform: translateY(102%); transition: transform 320ms cubic-bezier(.16,1,.3,1); } [data-theme="dark"] body.az-mobile-app .az-mobile-hours-sheet__panel { background: rgba(18, 20, 22,.98); } body.az-mobile-app .az-mobile-hours-sheet.is-open .az-mobile-hours-sheet__backdrop { background: rgba(10,10,12,.34); } body.az-mobile-app .az-mobile-hours-sheet.is-open .az-mobile-hours-sheet__panel { transform: translateY(0); } body.az-mobile-app .az-mobile-hours-sheet__handle { display: block; width: 42px; height: 5px; margin: 9px auto 10px; border-radius: 99px; background: rgba(120,120,128,.32); } body.az-mobile-app .az-mobile-hours-sheet__panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 14px; } body.az-mobile-app .az-mobile-hours-sheet__panel > header small { color: var(--az-m-gold); font-size: 10px; font-weight: 750; letter-spacing: .09em; } body.az-mobile-app .az-mobile-hours-sheet__panel > header h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.035em; } body.az-mobile-app .az-mobile-hours-sheet__scroll { overflow-y: auto; max-height: calc(84dvh - 94px - env(safe-area-inset-bottom)); overscroll-behavior: contain; } body.az-mobile-app .az-mobile-hours-sheet ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } body.az-mobile-app .az-mobile-hours-sheet li { padding: 14px; border: 1px solid var(--az-m-line); border-radius: 17px; } body.az-mobile-app .az-mobile-hours-sheet li > div { display: flex; align-items: center; gap: 10px; } body.az-mobile-app .az-mobile-hours-sheet li > div > i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #8e8e93; } body.az-mobile-app .az-mobile-hours-sheet li > div > i.is-open, body.az-mobile-app .az-mobile-hours-sheet li > div > i.is-closing_soon { background: #2e9b4b; } body.az-mobile-app .az-mobile-hours-sheet li span { display: grid; gap: 2px; min-width: 0; } body.az-mobile-app .az-mobile-hours-sheet li small { color: var(--az-m-muted); font-size: 12px; } body.az-mobile-app .az-mobile-hours-sheet li nav { display: flex; gap: 8px; margin-top: 12px; } body.az-mobile-app .az-mobile-hours-sheet li nav a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 13px; background: var(--az-m-gold-soft); color: var(--az-m-gold); font-size: 12px; font-weight: 650; text-decoration: none; } body.az-mobile-app .az-mobile-hours-sheet li nav .anzelha-icon { width: 17px; height: 17px; } body.az-mobile-app .az-mobile-hours-sheet__all { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-top: 12px; color: var(--az-m-gold); font-size: 14px; font-weight: 700; text-decoration: none; } /* Şube menüsü: masaüstündeki iki markalı tek veri kaynağının mobil sheet karşılığı. */ body.az-mobile-app .az-mobile-branches-sheet { position: fixed; z-index: var(--az-layer-modal, 800); inset: 0; } body.az-mobile-app .az-mobile-branches-sheet[hidden] { display: none !important; } body.az-mobile-app .az-mobile-branches-sheet:not([hidden]) { display: block; } body.az-mobile-app .az-mobile-branches-sheet__backdrop { position: absolute; inset: 0; border: 0; background: rgba(10,10,12,0); opacity: 1; /* 4-2 */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 260ms ease; } body.az-mobile-app .az-mobile-branches-sheet__panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(88dvh,760px); padding: 0 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: rgba(251,250,248,.98); color: var(--az-m-ink); transform: translateY(102%); transition: transform 320ms cubic-bezier(.16,1,.3,1); } [data-theme="dark"] body.az-mobile-app .az-mobile-branches-sheet__panel { background: rgba(18, 20, 22,.98); } body.az-mobile-app .az-mobile-branches-sheet.is-open .az-mobile-branches-sheet__backdrop { background: rgba(10,10,12,.38); } body.az-mobile-app .az-mobile-branches-sheet.is-open .az-mobile-branches-sheet__panel { transform: translateY(0); } body.az-mobile-app .az-mobile-branches-sheet__handle { display: block; width: 42px; height: 5px; margin: 9px auto 10px; border-radius: 99px; background: rgba(120,120,128,.32); } body.az-mobile-app .az-mobile-branches-sheet__panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 14px; } body.az-mobile-app .az-mobile-branches-sheet__panel > header small { color: var(--az-m-gold); font-size: 10px; font-weight: 750; letter-spacing: .09em; } body.az-mobile-app .az-mobile-branches-sheet__panel > header h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.035em; } body.az-mobile-app .az-mobile-branches-sheet__scroll { display: grid; gap: 12px; overflow-y: auto; max-height: calc(88dvh - 94px - env(safe-area-inset-bottom)); overscroll-behavior: contain; } body.az-mobile-app .az-mobile-branch-group { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--az-m-line); border-radius: 20px; background: var(--az-sheet-row); } body.az-mobile-app .az-mobile-branch-group > header { display: flex; align-items: center; min-height: 30px; padding: 0 3px; } body.az-mobile-app .az-mobile-branch-group > header strong { font-size: 13px; letter-spacing: .03em; } body.az-mobile-app .az-mobile-branch-group > header img { display: block; width: auto; max-width: 155px; height: 28px; object-fit: contain; object-position: left center; } /* 7.288.0: koyu modda Lahmacun logosu yerine grup etiketi yazıyla — masaüstü açılır menüdeki desenin sheet karşılığı (temel gizleme kuralı surface-system.css'te, .az-branch-brand-text). */ [data-theme="dark"] body.az-mobile-app .az-mobile-branch-group > header img { display: none; } [data-theme="dark"] body.az-mobile-app .az-mobile-branch-group > header .az-branch-brand-text { display: block; } body.az-mobile-app .az-mobile-branch-group > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 11px 12px; border: 1px solid var(--az-m-line); border-radius: 16px; color: inherit; text-decoration: none; } body.az-mobile-app .az-mobile-branch-group > a > span { display: grid; gap: 3px; min-width: 0; } body.az-mobile-app .az-mobile-branch-group > a strong { font-size: 15px; } body.az-mobile-app .az-mobile-branch-group > a small { color: var(--az-m-muted); font-size: 12px; line-height: 1.4; } body.az-mobile-app .az-mobile-branch-group > a > .anzelha-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--az-m-gold); } body.az-mobile-app .az-mobile-branches-sheet__all { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 15px; background: var(--az-m-gold); color: #201508; font-size: 14px; font-weight: 750; text-decoration: none; } /* Taşmayan, güvenli alanlı beş sekmeli iOS tab bar. */ body.az-mobile-app .az-mobile-tabs { right: 0; bottom: 0; left: 0; min-height: calc(66px + env(safe-area-inset-bottom)); padding: 6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left)); border: 0 !important; border-top: 1px solid var(--az-m-line) !important; border-radius: 26px 26px 0 0 !important; background: rgba(251,250,248,.91) !important; box-shadow: 0 -8px 30px rgba(18, 20, 22,.08) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); } [data-theme="dark"] body.az-mobile-app .az-mobile-tabs { background: rgba(18, 20, 22,.91) !important; } body.az-mobile-app .az-mobile-tabs a { min-height: 58px; color: var(--az-m-ink); font-size: 10.5px; font-weight: 560; } body.az-mobile-app .az-mobile-tabs a[aria-current="page"], body.az-mobile-app .az-mobile-tabs__primary, body.az-mobile-app .az-mobile-tabs__primary span { background: transparent !important; color: var(--az-m-gold) !important; box-shadow: none !important; } body.az-mobile-app .az-mobile-tabs__primary b { width: auto; height: auto; padding: 0; background: transparent !important; color: inherit !important; box-shadow: none; } body.az-mobile-app .az-mobile-tabs a[aria-current="page"]::after { display: none !important; } /* Sağ-alt kontroller mobil tab barın üstünde bağımsız iki daire olarak kalır. */ body.az-mobile-app .anzelha-whatsapp.whatsapp-trigger.mobile-1 { display: grid !important; } body.az-mobile-app .anzelha-whatsapp.whatsapp-trigger.mobile-0 { display: none !important; } body.az-mobile-app.wa-chat-open .anzelha-whatsapp.whatsapp-trigger.mobile-1, body.az-mobile-app.az-overlay-open .anzelha-whatsapp.whatsapp-trigger.mobile-1 { display: none !important; } body.az-mobile-app .az-to-top[data-az-top] { display: grid !important; } body.az-mobile-app .az-to-top[data-az-top][hidden] { display: none !important; } } @media (max-width: 359px) { body.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(58px,1fr) auto; gap: 2px; padding-inline: 7px; } body.az-mobile-app .az-header__actions { gap: 1px; } body.az-mobile-app .az-header__actions .az-clock-action { width: 44px; min-width: 44px; padding: 0; } body.az-mobile-app .az-clock-mobile-label { display: none; } body.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns: 54px minmax(0,1fr) 36px; gap: 10px; } body.az-mobile-app .az-mobile-lahmacun-card > img { width: 54px; height: 54px; } } @media (prefers-reduced-transparency: reduce) and (max-width: 767px) { body.az-mobile-app .az-header, body.az-mobile-app .az-mobile-tabs, body.az-mobile-app .anzelha-menu-panel > .anzelha-menu-panel__surface, body.az-mobile-app .az-mobile-hours-sheet__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--az-m-page) !important; } body.az-mobile-app .az-mobile-hours-sheet__backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.55); } body.az-mobile-app .az-mobile-branches-sheet__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--az-m-page) !important; } body.az-mobile-app .az-mobile-branches-sheet__backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.55); } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { body.az-mobile-app .az-mobile-hours-sheet__backdrop, body.az-mobile-app .az-mobile-hours-sheet__panel, body.az-mobile-app .az-mobile-branches-sheet__backdrop, body.az-mobile-app .az-mobile-branches-sheet__panel { transition: none !important; } } /* ============================================================ 7.205.0 — Mobil ana sayfa: tek viewport iOS uygulama kabuğu. ------------------------------------------------------------ Ana belge telefon ana sayfasında dikey kaymaz. İlk ekranda hero, dört ana işlem, konsept/kategori ve yeterli yükseklikte ürün vitrini bulunur; aşağıdaki masaüstü anlatı bölümlerinin karşılıkları mevcut "Diğer" sheet'i ve gerçek hedef sayfalardır. İç sayfalar bu sözleşmenin dışında kalır ve normal kaydırılmaya devam eder. ============================================================ */ @media (max-width: 767px) { html:has(body.home.az-mobile-app) { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } body.home.az-mobile-app, html:not([data-theme="dark"]) body.home.az-mobile-app { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 0 !important; padding-bottom: 0 !important; overflow: hidden; overscroll-behavior: none; } /* 7.256.0 — GÜNÜN SEÇKİSİ talimatı: 8 ürünlük tek sütun vitrin mobilde de tam gösterilir; ana akış artık kendi içinde DİKEY kaydırılır (yatay taşma yok, html/body kilidi ve sabit header/tab bar aynen korunur). */ body.home.az-mobile-app .az-mobile-main { box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Footer ve uzun masaüstü ana-sayfa bölümleri içerik olarak kaybolmaz: Hikâye/iletişim/yasal hedefler "Diğer", şube/menü/puan hedefleri üst işlemler ve tab bar üzerinden açılır. Yalnız bu ekrandaki tekrarları çizim ağacından çıkarıyoruz. */ body.home.az-mobile-app .az-showcase ~ *, body.home.az-mobile-app .site-footer, body.home.az-mobile-app .az-to-top { display: none !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top: calc(70px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27 > .az-shell, body.home.az-mobile-app .az-mobile-home-hub > .az-shell, body.home.az-mobile-app .az-showcase > .az-shell { padding-inline: clamp(12px, 4vw, 18px) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { max-height: 232px; padding: 0 !important; border-radius: 18px; } body.home.az-mobile-app .az-home--ios27 .az-hero27__copy { padding: clamp(13px, 4vw, 18px) !important; } body.home.az-mobile-app .az-hero27__mobile-copy .az-hero27__mobile-title { margin-bottom: 4px; font-size: clamp(24px, 7.6vw, 34px); } body.home.az-mobile-app .az-hero27__mobile-copy p { font-size: clamp(13px, 4vw, 17px); } body.home.az-mobile-app .az-mobile-home-hub { padding: 10px 0 0; } body.home.az-mobile-app .az-mobile-quick-actions { min-height: 72px; border-radius: 18px; } body.home.az-mobile-app .az-mobile-quick-actions a { min-height: 72px; gap: 5px; padding: 5px 3px; } body.home.az-mobile-app .az-mobile-quick-actions a + a::before { top: 12px; bottom: 12px; } body.home.az-mobile-app .az-mobile-quick-actions .anzelha-icon { width: 22px; height: 22px; } body.home.az-mobile-app .az-mobile-quick-actions a.is-primary .anzelha-icon { padding: 6px; } body.home.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns: 52px minmax(0,1fr) 36px; min-height: 68px; margin-top: 8px; padding: 7px 10px; gap: 10px; border-radius: 17px; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { width: 52px; height: 52px; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { width: 36px; height: 36px; } body.home.az-mobile-app .az-mobile-lahmacun-card strong { font-size: clamp(14px, 4.2vw, 18px); } body.home.az-mobile-app .az-mobile-categories { margin-top: 9px; } body.home.az-mobile-app .az-mobile-categories > header { margin-bottom: 4px; } body.home.az-mobile-app .az-mobile-categories h2 { font-size: 18px; } body.home.az-mobile-app .az-mobile-categories > header a { min-height: 34px; font-size: 13px; } body.home.az-mobile-app .az-mobile-categories > div > a { min-height: 38px; padding: 4px 9px; border-radius: 15px; } body.home.az-mobile-app .az-mobile-categories .anzelha-icon { width: 24px; height: 24px; } body.home.az-mobile-app .az-showcase { padding: 14px 0 10px !important; } /* "Diğer" kendi içinde taşabilir; ana belge hiçbir durumda kaymaz. */ body.home.az-mobile-app .anzelha-menu-panel > .anzelha-menu-panel__surface { height: min(620px, max(430px, 59dvh)); max-height: calc(100dvh - max(10px, env(safe-area-inset-top))); overscroll-behavior: contain; } body.home.az-mobile-app .az-mobile-more-grid { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* ============================================================ 7.216.0 — “Sınırsız İkramlar” mevcut kategori URL'si. Varsayılan gizlilik masaüstü işaretlemesini korur; görsel kompozisyonun bütün seçicileri yalnız 0–767 px içinde etkinleşir. ============================================================ */ .unlimited-treats { display: none; } @media (max-width: 767px) { .az-menu-prototype.is-unlimited-treats { min-height: 100svh; background: var(--az-m-page) !important; } .az-menu-prototype.is-unlimited-treats > .az-menu-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .az-menu-prototype.is-unlimited-treats .unlimited-treats { display: block; width: 100%; padding: calc(88px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom)); color: var(--az-m-ink); } body.az-unlimited-treats-page.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.az-unlimited-treats-page.az-mobile-app .az-header .az-brand .anzelha-brand-mark { background-position: center !important; background-size: 205% auto !important; } .az-menu-prototype.is-unlimited-treats > .az-menu-shell > .az-menu-categories, .az-menu-prototype.is-unlimited-treats > .az-menu-shell > .az-menu-master, .az-menu-prototype.is-unlimited-treats > .az-menu-shell > .az-allergen-note { display: none !important; } .unlimited-treats__back { display: inline-flex; align-items: center; gap: 7px; min-width: 44px; min-height: 44px; margin: 0 0 10px; color: var(--az-m-muted); font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none; } .unlimited-treats__back .anzelha-icon { width: 21px; height: 21px; color: var(--az-m-ink); stroke-width: 1.8; transform: rotate(180deg); } .unlimited-treats-hero { position: relative; width: 100%; aspect-ratio: 1.5 / 1; margin: 0; overflow: hidden; border-radius: 22px; background: #d7e5e7; box-shadow: 0 7px 22px rgba(25,28,30,.08); } .unlimited-treats-hero picture, .unlimited-treats-hero img { display: block; width: 100%; height: 100%; } .unlimited-treats-hero img { object-fit: cover; object-position: center; filter: none !important; } .unlimited-treats-hero figcaption { position: absolute; z-index: 1; right: 14px; bottom: 16px; left: 16px; color: #fff; text-align: left; } .unlimited-treats-hero figcaption::before { position: absolute; z-index: -1; bottom: -12px; left: -12px; width: min(92%, 420px); height: calc(100% + 30px); border-radius: 18px; background: radial-gradient(ellipse at 22% 76%, rgba(6,24,21,.46), rgba(6,24,21,0) 72%); content: ""; pointer-events: none; } .unlimited-treats-hero figcaption > span { display: block; margin-bottom: 5px; color: #f39419; font-size: clamp(11px,3.4vw,15px); font-weight: 780; letter-spacing: .12em; line-height: 1.1; } .unlimited-treats-hero #unlimited-treats-title { margin: 0; color: #fff; font-size: clamp(31px,10vw,45px); font-weight: 790; letter-spacing: -.047em; line-height: .98; text-shadow: 0 2px 10px rgba(0,0,0,.23); } .unlimited-treats-hero figcaption p { margin: 8px 0 0; color: rgba(255,255,255,.96); font-size: clamp(13px,4vw,18px); font-weight: 450; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,.28); } .unlimited-treats__heading { display: flex; align-items: center; gap: 10px; margin: 21px 4px 13px; } .unlimited-treats__heading h2 { margin: 0; color: var(--az-m-ink); font-size: clamp(21px,6.4vw,27px); font-weight: 760; letter-spacing: -.035em; line-height: 1.08; } .unlimited-treats__heading > span { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border: 1px solid var(--az-m-line); border-radius: 999px; background: rgba(255,255,255,.4); color: var(--az-m-ink); font-size: 13px; font-weight: 500; white-space: nowrap; } [data-theme="dark"] .unlimited-treats__heading > span { background: rgba(255,255,255,.045); } .unlimited-treats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; width: 100%; overflow: visible; } .unlimited-treats-card { display: grid; grid-template-rows: 48px minmax(28px,auto); place-items: center; align-content: center; gap: 5px; min-width: 0; min-height: 104px; margin: 0; padding: 8px 4px 7px; border: 1px solid var(--az-m-line); border-radius: 19px; background: rgba(255,255,255,.55); color: var(--az-m-ink); box-shadow: 0 5px 17px rgba(24, 26, 28,.045), inset 0 1px 0 rgba(255,255,255,.72); text-align: center; } [data-theme="dark"] .unlimited-treats-card { background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .unlimited-treats-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--az-m-line); border-radius: 14px; background: rgba(255,255,255,.34); color: var(--az-m-ink); } [data-theme="dark"] .unlimited-treats-card__icon { background: rgba(255,255,255,.035); } .unlimited-treats-card__icon .anzelha-icon { width: 31px; height: 31px; stroke-width: 1.65; } .unlimited-treats-card h3 { display: -webkit-box; width: 100%; margin: 0; overflow: hidden; color: inherit; font-size: clamp(10px,3.4vw,14px); font-weight: 650; letter-spacing: -.025em; line-height: 1.08; text-align: center; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } @media (max-width: 359px) { .az-menu-prototype.is-unlimited-treats .unlimited-treats { padding-top: calc(78px + env(safe-area-inset-top)); padding-inline: 10px; } .unlimited-treats__back { margin-bottom: 6px; } .unlimited-treats-hero { border-radius: 20px; } .unlimited-treats-hero figcaption { right: 10px; bottom: 12px; left: 12px; } .unlimited-treats-hero #unlimited-treats-title { font-size: 29px; } .unlimited-treats-hero figcaption p { margin-top: 5px; font-size: 12px; } .unlimited-treats__heading { gap: 7px; margin-inline: 2px; } .unlimited-treats__heading h2 { font-size: 20px; } .unlimited-treats__heading > span { padding-inline: 8px; font-size: 12px; } .unlimited-treats-grid { gap: 7px; } .unlimited-treats-card { min-height: 98px; border-radius: 17px; } .unlimited-treats-card__icon { width: 42px; height: 42px; } .unlimited-treats-card__icon .anzelha-icon { width: 28px; height: 28px; } body.page-template-page-menu.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(60px,1fr) auto; gap: 2px; height: 66px; padding-inline: 7px; } body.page-template-page-menu.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.page-template-page-menu.az-mobile-app .az-header .az-brand .anzelha-brand-mark { width: 68px !important; height: 40px; } body.page-template-page-menu.az-mobile-app .az-header__actions { gap: 1px; } body.page-template-page-menu.az-mobile-app .az-header__actions .az-search-action, body.page-template-page-menu.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.page-template-page-menu.az-mobile-app .az-header__actions .az-clock-action, body.page-template-page-menu.az-mobile-app .az-header__actions .az-cart-link, body.page-template-page-menu.az-mobile-app .az-header__actions .az-menu-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } body.page-template-page-menu.az-mobile-app .az-header__actions .az-clock-action { width: 40px; min-width: 40px; padding: 0; } body.page-template-page-menu.az-mobile-app .az-clock-mobile-label { display: none; } } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (max-width: 767px) { .unlimited-treats-card, .unlimited-treats__heading > span { -webkit-backdrop-filter: blur(10px) saturate(105%); backdrop-filter: blur(10px) saturate(105%); } } } @media (prefers-reduced-transparency: reduce) and (max-width: 767px) { .unlimited-treats-card, .unlimited-treats__heading > span { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--az-m-page) !important; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { .unlimited-treats *, .unlimited-treats *::before, .unlimited-treats *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } } /* 7.256.0 — Kısa telefonlardaki vitrin gizleme kuralı kaldırıldı: ana akış artık dikey kaydırıldığı için 8 ürünlük tek sütun vitrin her yükseklikte erişilebilir (GÜNÜN SEÇKİSİ talimatı md.3/md.5). */ @media (max-width: 767px) and (max-height: 620px) { body.home.az-mobile-app .az-header .az-header__inner { height: 64px; padding-block: 5px; } body.home.az-mobile-app .az-header .az-brand { height: 44px; } body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo { height: 36px; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top: calc(64px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { max-height: 178px; } body.home.az-mobile-app .az-mobile-home-hub { padding-top: 7px; } body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-quick-actions a { min-height: 66px; } body.home.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns: 46px minmax(0,1fr) 34px; min-height: 60px; margin-top: 6px; padding-block: 6px; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { width: 46px; height: 46px; padding: 8px; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { width: 34px; height: 34px; } body.home.az-mobile-app .az-mobile-lahmacun-card em { display: none; } body.home.az-mobile-app .az-mobile-categories { margin-top: 5px; } body.home.az-mobile-app .az-mobile-categories > div > a { min-height: 34px; } body.home.az-mobile-app .az-mobile-categories .anzelha-icon { width: 21px; height: 21px; } } /* ============================================================ 7.213.0 — Onaylanan mobil ana sayfa son otoritesi. Bu blok yalnız telefon görünümünü değiştirir; 768 px ve üzerindeki mevcut tablet/masaüstü yerleşimi, ölçüleri ve görsel hiyerarşisi korunur. ============================================================ */ @media (max-width: 767px) { :root { --az-mobile-home-gutter: clamp(12px, 4.2vw, 18px); --az-mobile-home-radius: 22px; --az-mobile-home-gap: 10px; --az-mobile-home-card-height: 104px; } html:has(body.home.az-mobile-app) { width: 100%; height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; } body.home.az-mobile-app { position: static; width: 100%; height: auto; min-height: 100vh !important; min-height: 100dvh !important; padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; } body.home.az-mobile-app .az-mobile-main { width: 100%; height: auto; min-height: 100dvh; padding-bottom: 0; overflow: visible; overscroll-behavior-y: auto; } /* Yüzen mobil üst menü; masaüstü header kurallarına dokunmaz. */ body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-header.glass-navigation { top: calc(var(--az-admin-bar-h, 0px) + max(8px, env(safe-area-inset-top))); right: max(6px, env(safe-area-inset-right)); left: max(6px, env(safe-area-inset-left)); width: auto; border: 1px solid rgba(255,255,255,.88) !important; border-radius: 28px !important; background: rgba(250,250,251,.86) !important; box-shadow: 0 8px 28px rgba(24, 26, 28,.07), inset 0 1px 0 rgba(255,255,255,.96) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } [data-theme="dark"] body.home.az-mobile-app .az-header, [data-theme="dark"] body.home.az-mobile-app .az-header.glass-navigation { border-color: rgba(255,255,255,.14) !important; background: rgba(24, 26, 28,.88) !important; } body.home.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(68px,1fr) auto; gap: 10px; height: 72px; padding: 8px 10px 8px 12px; } body.home.az-mobile-app .az-header .az-brand { width: 100%; min-width: 0; height: 52px; margin: 0; } body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.home.az-mobile-app .az-header .az-brand .anzelha-brand-mark { width: 100% !important; max-width: 100%; height: 46px; filter: none !important; background-size: 205% auto !important; background-position: center !important; } html:not([data-theme="dark"]) body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo { filter: none !important; } body.home.az-mobile-app .az-header__actions { gap: 3px; } body.home.az-mobile-app .az-header__actions .az-search-action, body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.home.az-mobile-app .az-header__actions .az-clock-action, body.home.az-mobile-app .az-header__actions .az-cart-link, body.home.az-mobile-app .az-header__actions .az-menu-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-color: var(--az-m-line) !important; background: rgba(255,255,255,.32) !important; } body.home.az-mobile-app .az-header__actions .az-clock-action { width: auto; min-width: 68px; padding-inline: 8px; } /* Mobil hero: ayrı art direction kaynağı, 1.55:1 kadraj ve filtresiz gün ışığı. */ body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding: calc(88px + env(safe-area-inset-top)) 0 0 !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27 > .az-shell, body.home.az-mobile-app .az-mobile-home-hub > .az-shell { width: auto !important; max-width: none !important; margin: 0 !important; padding-inline: var(--az-mobile-home-gutter) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none; aspect-ratio: 1.55 / 1; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0; border-radius: 23px; background: #dce9e8; box-shadow: 0 10px 28px rgba(24, 26, 28,.09); } body.home.az-mobile-app .az-home--ios27 .az-hero27__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 1; filter: none !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__scrim { display: none !important; background: none !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__copy { position: absolute !important; z-index: 2; inset: 0; display: flex !important; align-items: flex-end; width: 100%; height: 100%; min-height: 0 !important; padding: clamp(17px, 5.4vw, 24px) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__copy > .az-hero27__pill, body.home.az-mobile-app .az-home--ios27 .az-hero27__copy > h1, body.home.az-mobile-app .az-home--ios27 .az-hero27__copy > p, body.home.az-mobile-app .az-home--ios27 .az-hero27__copy > .az-hero27__lahmacun-card, body.home.az-mobile-app .az-home--ios27 .az-hero27__wallet, body.home.az-mobile-app .az-home--ios27 .az-hero27__credit { display: none !important; } body.home.az-mobile-app .az-hero27__mobile-copy { display: grid !important; gap: 5px; width: min(100%, 300px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.27); } body.home.az-mobile-app .az-hero27__mobile-copy .az-hero27__mobile-title { display: grid; gap: 0; margin: 0; color: #fff !important; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; font-size: clamp(28px, 8.6vw, 38px); font-weight: 780; line-height: .98; letter-spacing: -.05em; } body.home.az-mobile-app .az-hero27__mobile-copy p { margin: 0; color: rgba(255,255,255,.94) !important; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; font-size: clamp(14px, 4.3vw, 18px); line-height: 1.2; } body.home.az-mobile-app .az-mobile-home-hub { display: block; padding: 10px 0 0; } body.home.az-mobile-app .az-mobile-quick-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 76px; overflow: hidden; border: 1px solid var(--az-m-line); border-radius: 20px; background: var(--az-m-card); box-shadow: 0 7px 24px rgba(18, 20, 22,.055); } body.home.az-mobile-app .az-mobile-quick-actions a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-width: 0; min-height: 74px; padding: 5px 2px; color: var(--az-m-ink); font-size: clamp(10px, 2.9vw, 13px); font-weight: 650; line-height: 1.05; text-align: center; text-decoration: none; } body.home.az-mobile-app .az-mobile-quick-actions a > span:last-child { display: block; max-width: none; white-space: nowrap; } body.home.az-mobile-app .az-mobile-quick-actions a + a::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 1px; background: var(--az-m-line); } body.home.az-mobile-app .az-mobile-quick-actions .anzelha-icon { width: 22px; height: 22px; stroke-width: 1.8; } body.home.az-mobile-app .az-mobile-quick-actions a.is-primary { color: var(--az-m-gold); } body.home.az-mobile-app .az-mobile-quick-actions a.is-primary .anzelha-icon { box-sizing: content-box; padding: 6px; border-radius: 50%; background: var(--az-m-gold); color: #fff; } body.home.az-mobile-app .az-mobile-lahmacun-card { display: grid; grid-template-columns: 58px minmax(0,1fr) 40px; align-items: center; gap: 12px; min-height: 82px; margin-top: 10px; padding: 10px 11px; border: 1px solid rgba(200,129,23,.22); border-radius: 20px; background: var(--az-m-card); color: var(--az-m-ink); text-decoration: none; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { box-sizing: border-box; width: 58px; height: 58px; object-fit: cover; border-radius: 50%; } body.home.az-mobile-app .az-mobile-lahmacun-card > span { display: grid; gap: 2px; min-width: 0; } body.home.az-mobile-app .az-mobile-lahmacun-card small { color: var(--az-m-gold); font-size: 10px; font-weight: 800; letter-spacing: .09em; } body.home.az-mobile-app .az-mobile-lahmacun-card strong { overflow: hidden; font-size: clamp(15px, 4.5vw, 20px); line-height: 1.15; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; } body.home.az-mobile-app .az-mobile-lahmacun-card em { overflow: hidden; color: var(--az-m-muted); font-size: clamp(9.5px, 2.8vw, 12px); font-style: normal; text-overflow: ellipsis; white-space: nowrap; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--az-m-gold); color: #fff; } body.home.az-mobile-app .az-mobile-lahmacun-card > b .anzelha-icon { width: 20px; height: 20px; } /* İlk altı aktif kategori aynı yönetim verisinden 3×2 görünür; yatay şerit yoktur. */ body.home.az-mobile-app .az-mobile-categories { margin-top: 12px; } body.home.az-mobile-app .az-mobile-categories > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 8px; } body.home.az-mobile-app .az-mobile-categories h2 { margin: 0; color: var(--az-m-ink); font-size: 21px; font-weight: 770; letter-spacing: -.03em; } body.home.az-mobile-app .az-mobile-categories > header button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 86px; min-height: 44px; padding: 7px 9px; border: 1px solid var(--az-m-line); border-radius: 16px; background: var(--az-m-card); color: var(--az-m-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } body.home.az-mobile-app .az-mobile-categories > header button .anzelha-icon { width: 17px; height: 17px; } body.home.az-mobile-app .az-mobile-categories > header button .anzelha-icon--arrow-right { width: 14px; height: 14px; } body.home.az-mobile-app .az-mobile-categories > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--az-mobile-home-gap); margin: 0; padding: 0; overflow: visible; } body.home.az-mobile-app .az-mobile-categories > div > a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; min-width: 0; min-height: var(--az-mobile-home-card-height); padding: 8px 4px; border: 1px solid var(--az-m-line); border-radius: 20px; background: rgba(255,255,255,.55); color: var(--az-m-ink); box-shadow: 0 4px 16px rgba(24, 26, 28,.045), inset 0 1px 0 rgba(255,255,255,.76); text-align: center; text-decoration: none; } [data-theme="dark"] body.home.az-mobile-app .az-mobile-categories > div > a { background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } body.home.az-mobile-app .az-mobile-categories > div > a > span:first-child { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--az-m-line); border-radius: 14px; background: rgba(255,255,255,.38); } body.home.az-mobile-app .az-mobile-categories > div > a > span:last-child { width: 100%; color: inherit; font-size: clamp(9.5px, 3vw, 13px); font-weight: 680; line-height: 1.1; white-space: nowrap; } body.home.az-mobile-app .az-mobile-categories > div > a .anzelha-icon { width: 29px; height: 29px; stroke-width: 1.65; } body.home.az-mobile-app .az-mobile-categories > div > a.is-featured { border-color: rgba(210,126,14,.6); } body.home.az-mobile-app .az-mobile-categories > div > a.is-featured > span:first-child, body.home.az-mobile-app .az-mobile-categories > div > a.is-featured .anzelha-icon { border-color: rgba(210,126,14,.35); color: var(--az-m-gold); } /* Mobilde referansta olmayan uzun masaüstü ana-sayfa bölümleri çizilmez. */ /* 7.256.0 — GÜNÜN SEÇKİSİ talimatı: vitrinin KENDİSİ artık mobilde de çizilir (tek sütun, home-ios27 tek kaynağı); yalnız vitrin SONRASI masaüstü anlatı bölümleri mobil yüzeye taşınmamaya devam eder. */ body.home.az-mobile-app .az-showcase ~ *, body.home.az-mobile-app .site-footer, body.home.az-mobile-app .az-to-top { display: none !important; } /* “Tümü” iOS alt paneli; veri ilk altı kartla aynı WooCommerce dizisidir. */ body.home.az-mobile-app .az-mobile-category-sheet { z-index: var(--az-layer-modal, 800); display: grid; align-items: end; padding: 0; } body.home.az-mobile-app .az-mobile-category-sheet[hidden] { display: none; } body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__backdrop { background: rgba(15,15,17,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__panel { width: 100%; max-height: min(82dvh,760px); border-width: 1px 0 0; border-radius: 28px 28px 0 0; background: rgba(250,250,251,.96); transform: translateY(34px); } [data-theme="dark"] body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__panel { background: rgba(24, 26, 28,.97); } body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__handle { display: block; width: 42px; height: 5px; flex: 0 0 5px; margin: 9px auto 0; border-radius: 99px; background: rgba(60,60,67,.28); } body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__head { padding: 13px 18px 15px; } body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__head h2 { margin: 0; font-size: 26px; letter-spacing: -.035em; } body.home.az-mobile-app .az-mobile-category-sheet__list { display: grid; gap: 8px; padding: 14px 16px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.home.az-mobile-app .az-mobile-category-sheet__list a { display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; align-items: center; gap: 12px; min-height: 58px; padding: 7px 12px; border: 1px solid var(--az-m-line); border-radius: 17px; background: rgba(255,255,255,.58); color: var(--az-m-ink); text-decoration: none; } [data-theme="dark"] body.home.az-mobile-app .az-mobile-category-sheet__list a { background: rgba(255,255,255,.045); } body.home.az-mobile-app .az-mobile-category-sheet__list a > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--az-m-gold-soft); color: var(--az-m-gold); } body.home.az-mobile-app .az-mobile-category-sheet__list a .anzelha-icon { width: 22px; height: 22px; } body.home.az-mobile-app .az-mobile-category-sheet__list a > .anzelha-icon { width: 18px; height: 18px; color: var(--az-m-muted); } body.home.az-mobile-app .az-mobile-tabs { right: 0; bottom: 0; left: 0; min-height: calc(70px + env(safe-area-inset-bottom)); padding: 6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left)); border: 0 !important; border-top: 1px solid var(--az-m-line) !important; border-radius: 26px 26px 0 0 !important; background: rgba(251,250,248,.92) !important; box-shadow: 0 -8px 30px rgba(18, 20, 22,.08) !important; } [data-theme="dark"] body.home.az-mobile-app .az-mobile-tabs { background: rgba(18, 20, 22,.92) !important; } body.home.az-mobile-app .az-mobile-tabs a { min-height: 58px; color: var(--az-m-ink); font-size: clamp(9.5px,2.7vw,11px); font-weight: 580; } body.home.az-mobile-app .az-mobile-tabs a[aria-current="page"], body.home.az-mobile-app .az-mobile-tabs__primary, body.home.az-mobile-app .az-mobile-tabs__primary span { background: transparent !important; color: var(--az-m-gold) !important; box-shadow: none !important; } body.home.az-mobile-app .az-mobile-tabs__primary b { width: auto; height: auto; padding: 0; background: transparent !important; color: inherit !important; box-shadow: none; } body.home.az-mobile-app .az-mobile-tabs a[aria-current="page"]::after { display: none !important; } } @media (min-width: 360px) and (max-width: 379px) { body.home.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(60px,1fr) auto; gap: 10px; height: 66px; padding-inline: 7px; } body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.home.az-mobile-app .az-header .az-brand .anzelha-brand-mark { width: min(100%,96px) !important; height: 40px; } body.home.az-mobile-app .az-header__actions { gap: 1px; } body.home.az-mobile-app .az-header__actions .az-search-action, body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.home.az-mobile-app .az-header__actions .az-clock-action, body.home.az-mobile-app .az-header__actions .az-cart-link, body.home.az-mobile-app .az-header__actions .az-menu-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } body.home.az-mobile-app .az-header__actions .az-clock-action { width: 40px; min-width: 40px; padding: 0; } body.home.az-mobile-app .az-clock-mobile-label { display: none; } } @media (max-width: 359px) { :root { --az-mobile-home-gutter: 10px; --az-mobile-home-gap: 7px; --az-mobile-home-card-height: 98px; } body.home.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(60px,1fr) auto; gap: 10px; height: 66px; padding-inline: 7px; } body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.home.az-mobile-app .az-header .az-brand .anzelha-brand-mark { width: min(100%,96px) !important; height: 40px; } body.home.az-mobile-app .az-header__actions { gap: 1px; } body.home.az-mobile-app .az-header__actions .az-search-action, body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.home.az-mobile-app .az-header__actions .az-clock-action, body.home.az-mobile-app .az-header__actions .az-cart-link, body.home.az-mobile-app .az-header__actions .az-menu-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } body.home.az-mobile-app .az-header__actions .az-clock-action { width: 40px; min-width: 40px; padding: 0; } body.home.az-mobile-app .az-clock-mobile-label { display: none; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top: calc(80px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns: 50px minmax(0,1fr) 36px; gap: 8px; padding-inline: 8px; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { width: 50px; height: 50px; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { width: 36px; height: 36px; } } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (max-width: 767px) { body.home.az-mobile-app .az-mobile-categories > div > a { -webkit-backdrop-filter: blur(10px) saturate(110%); backdrop-filter: blur(10px) saturate(110%); } } } @media (prefers-reduced-transparency: reduce) and (max-width: 767px) { body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-lahmacun-card, body.home.az-mobile-app .az-mobile-categories > div > a, body.home.az-mobile-app .az-mobile-tabs, body.home.az-mobile-app .az-mobile-category-sheet .az-experience-modal__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--az-m-page) !important; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { body.home.az-mobile-app .az-mobile-category-sheet *, body.home.az-mobile-app .az-mobile-lahmacun-card, body.home.az-mobile-app .az-mobile-categories a { animation: none !important; transition: none !important; } } /* ============================================================ 7.222.0 — Mobil tarayıcıda gerçek uygulama kabuğu son otoritesi. ------------------------------------------------------------ Üst appbar ve alt tabbar viewport'a sabitlenir. Ana belge kaymaz; yalnız aradaki main yüzeyi kontrollü kaydırılır. Kurallar sadece telefon ana sayfasına aittir; 768 px ve üzeri tasarıma sızmaz. ============================================================ */ @media (max-width: 767px) { html:has(body.home.az-mobile-app) { width: 100%; height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; } body.home.az-mobile-app { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 0 !important; padding: 0 !important; overflow: hidden; background: var(--az-m-page); overscroll-behavior: none; } /* Ana sayfadaki tek kaydırma yüzeyi. Appbar ve tabbar bu düğümün dışında ve fixed kaldığı için Safari çubukları değişirken belge boyu zıplamaz. */ body.home.az-mobile-app .az-mobile-main { position: relative; box-sizing: border-box; width: min(100%, 430px); height: 100vh; height: 100dvh; min-height: 0; margin-inline: auto; padding: 0 0 calc(76px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; background: var(--az-m-page); overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; } body.home.az-mobile-app .az-mobile-main::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Referansta olmayan masaüstü devam bölümleri mobil uygulama yüzeyine taşınmaz. İçerik hedefleri gerçek appbar/tabbar ve "Diğer" panelindeki mevcut bağlantılarda korunur. */ /* 7.256.0 — GÜNÜN SEÇKİSİ talimatı: vitrinin KENDİSİ artık mobilde de çizilir (tek sütun, home-ios27 tek kaynağı); yalnız vitrin SONRASI masaüstü anlatı bölümleri mobil yüzeye taşınmamaya devam eder. */ body.home.az-mobile-app .az-showcase ~ *, body.home.az-mobile-app .site-footer, body.home.az-mobile-app .az-to-top { display: none !important; } body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-header.glass-navigation { position: fixed !important; top: calc(var(--az-admin-bar-h, 0px) + max(4px, env(safe-area-inset-top))); right: auto; left: 50%; width: calc(100% - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 430px; transform: translateX(-50%); } body.home.az-mobile-app .az-header .az-header__inner { grid-template-columns: minmax(58px, 1fr) auto; gap: 2px; height: 68px; padding: 6px 4px 6px 8px; } body.home.az-mobile-app .az-header .az-brand { min-width: 0; height: 48px; } body.home.az-mobile-app .az-header .az-brand .anzelha-brand-logo, body.home.az-mobile-app .az-header .az-brand .anzelha-brand-mark { height: 42px; } body.home.az-mobile-app .az-header__actions { gap: 1px; } body.home.az-mobile-app .az-header__actions .az-phone-action, body.home.az-mobile-app .az-header__actions .az-account-action, body.home.az-mobile-app .az-header__actions .header-order-button, body.home.az-mobile-app .az-header__actions .az-language-switch--header, body.home.az-mobile-app .az-header__actions .az-theme-toggle { display: none !important; } body.home.az-mobile-app .az-header__actions .az-search-action, body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.home.az-mobile-app .az-header__actions .az-clock-action, body.home.az-mobile-app .az-header__actions .az-cart-link, body.home.az-mobile-app .az-header__actions .az-menu-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top: calc(80px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-mobile-tabs { position: fixed !important; right: auto; bottom: 0; left: 50%; width: min(100%, 430px); max-width: 100%; transform: translateX(-50%); } } @media (max-width: 379px) { body.home.az-mobile-app .az-header__actions .az-clock-action { width: 44px; min-width: 44px; padding-inline: 0; } body.home.az-mobile-app .az-clock-mobile-label { display: none; } } @media (min-width: 380px) and (max-width: 767px) { body.home.az-mobile-app .az-header__actions .az-clock-action { width: auto; min-width: 68px; padding-inline: 8px; } } @media (max-width: 767px) and (max-height: 740px) { body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { aspect-ratio: 1.7 / 1; } body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-quick-actions a { min-height: 68px; } body.home.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns: 48px minmax(0, 1fr) 36px; min-height: 64px; margin-top: 7px; padding-block: 7px; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { width: 48px; height: 48px; padding: 8px; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { width: 36px; height: 36px; } body.home.az-mobile-app .az-mobile-categories { margin-top: 8px; } body.home.az-mobile-app .az-mobile-categories > div > a { min-height: 90px; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { body.home.az-mobile-app .az-mobile-main { scroll-behavior: auto; } } /* ============================================================ 7.223.0 — Açık/koyu mobil tasarım sözleşmesi son otoritesi. ------------------------------------------------------------ Onaylı iOS iskeleti değişmez; iki tema aynı geometriyi kullanır. Bu merkezî tokenlar yalnız mobil ana sayfaya aittir ve 768 px+ masaüstü/tablet görünümüne hiçbir kural taşımaz. ============================================================ */ @media (max-width: 767px) { body.home.az-mobile-app, html:not([data-theme="dark"]) body.home.az-mobile-app { color-scheme: light; --app-bg: var(--anz-bg,#f7f3ee); --app-surface: var(--anz-glass,rgba(255,255,255,.58)); --app-surface-solid: var(--anz-card,#fff); --app-surface-raised: var(--anz-glass,rgba(255,255,255,.84)); --app-text: var(--anz-text,#2a211c); --app-text-secondary: var(--anz-text-2,#6b5c4e); --app-border: var(--anz-border,rgba(212,186,150,.3)); --app-separator: var(--anz-border,rgba(212,186,150,.3)); --app-accent: var(--anz-gold,#b07e2e); --app-accent-soft: color-mix(in srgb,var(--anz-gold,#b07e2e) 12%,transparent); --app-success: var(--anzelha-success,#315d3c); --app-shadow: var(--anz-shadow-1,0 10px 28px rgba(54,36,18,.1)); --app-glass-blur: var(--anz-blur,20px); --az-m-page: var(--app-bg); --az-m-card: var(--app-surface); --az-m-ink: var(--app-text); --az-m-muted: var(--app-text-secondary); --az-m-line: var(--app-border); --az-m-gold: var(--app-accent); --az-m-gold-soft: var(--app-accent-soft); --az-mobile-home-gutter: clamp(10px,3vw,13px); --az-mobile-home-card-height: 68px; background: var(--app-bg) !important; color: var(--app-text); } [data-theme="dark"] body.home.az-mobile-app { color-scheme: dark; --app-bg: var(--anz-bg,#0B0C0D); --app-surface: var(--anz-glass,rgba(24,26,28,.72)); --app-surface-solid: var(--anz-card,#121416); --app-surface-raised: var(--anz-glass,rgba(24,26,28,.72)); --app-text: var(--anz-text,#F5F7F8); --app-text-secondary: var(--anz-text-2,#AEB4B8); --app-border: var(--anz-border,rgba(255,255,255,.14)); --app-separator: var(--anz-border,rgba(255,255,255,.14)); --app-accent: var(--anz-gold,#14C4CF); --app-accent-soft: color-mix(in srgb,var(--anz-gold,#14C4CF) 12%,transparent); --app-success: var(--anzelha-success,#32D583); --app-shadow: var(--anz-shadow-1,0 10px 28px rgba(0,0,0,.34)); } body.home.az-mobile-app .az-mobile-main, body.home.az-mobile-app .az-home--ios27 { background: var(--app-bg) !important; color: var(--app-text); } body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-header.glass-navigation { top: calc(var(--az-admin-bar-h,0px) + max(8px,env(safe-area-inset-top))); width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); border: 1px solid var(--app-border) !important; border-radius: 26px !important; background: var(--app-surface-raised) !important; box-shadow: var(--app-shadow) !important; -webkit-backdrop-filter: blur(var(--app-glass-blur)) saturate(120%); backdrop-filter: blur(var(--app-glass-blur)) saturate(120%); } [data-theme="dark"] body.home.az-mobile-app .az-header, [data-theme="dark"] body.home.az-mobile-app .az-header.glass-navigation { background: var(--app-surface-raised) !important; } body.home.az-mobile-app .az-header .az-header__inner { height: 58px; } body.home.az-mobile-app .az-header__actions .az-search-action, body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action, body.home.az-mobile-app .az-header__actions .az-clock-action, body.home.az-mobile-app .az-header__actions .az-cart-link, body.home.az-mobile-app .az-header__actions .az-menu-toggle { border-color: var(--app-border) !important; background: var(--app-surface) !important; color: var(--app-text) !important; box-shadow: none !important; } body.home.az-mobile-app .az-header__actions .az-mobile-whatsapp-action .anzelha-icon { color: var(--app-success); } body.home.az-mobile-app .az-whatsapp-status, body.home.az-mobile-app .az-clock-dot { background: var(--app-success) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top: calc(74px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { height: clamp(180px,27dvh,235px) !important; min-height: 0 !important; max-height: 235px; aspect-ratio: auto; border-radius: 22px; } body.home.az-mobile-app .az-home--ios27 .az-hero27__bg img { object-fit: cover; object-position: center; } body.home.az-mobile-app .az-home--ios27 .az-hero27__scrim { display: block !important; background: linear-gradient(180deg,transparent 42%,rgba(7,10,12,.34) 100%) !important; } body.home.az-mobile-app .az-mobile-home-hub { padding-top: 10px; } body.home.az-mobile-app .az-mobile-quick-actions { min-height: 62px; border-color: var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow); } body.home.az-mobile-app .az-mobile-quick-actions a { min-height: 60px; color: var(--app-text); transition: transform 180ms ease,opacity 180ms ease; } body.home.az-mobile-app .az-mobile-quick-actions a + a::before { background: var(--app-separator); } body.home.az-mobile-app .az-mobile-lahmacun-card { min-height: 66px; border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow); transition: transform 180ms ease,opacity 180ms ease; } body.home.az-mobile-app .az-mobile-lahmacun-card em { color: var(--app-text-secondary); } body.home.az-mobile-app .az-mobile-lahmacun-card > b { border-color: var(--app-border); } body.home.az-mobile-app .az-mobile-categories { margin-top: 8px; } body.home.az-mobile-app .az-mobile-categories > header { margin-bottom: 5px; } body.home.az-mobile-app .az-mobile-categories > header button { border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); } body.home.az-mobile-app .az-mobile-categories > div > a { gap: 4px; min-height: var(--az-mobile-home-card-height); padding: 7px 3px; border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow); transition: transform 180ms ease,opacity 180ms ease,border-color 180ms ease; } [data-theme="dark"] body.home.az-mobile-app .az-mobile-categories > div > a { background: var(--app-surface); box-shadow: var(--app-shadow); } body.home.az-mobile-app .az-mobile-categories > div > a > span:first-child { width: 38px; height: 38px; border-color: var(--app-border); background: transparent; } body.home.az-mobile-app .az-mobile-categories > div > a > span:last-child { font-size: clamp(10px,3vw,13px); } body.home.az-mobile-app .az-mobile-categories > div > a .anzelha-icon { width: 25px; height: 25px; } body.home.az-mobile-app .az-mobile-categories > div > a.is-featured { border-color: var(--app-accent); } body.home.az-mobile-app .az-mobile-categories > div > a.is-featured > span:first-child, body.home.az-mobile-app .az-mobile-categories > div > a.is-featured .anzelha-icon { border-color: transparent; color: var(--app-accent); } body.home.az-mobile-app .az-mobile-tabs { right: auto; bottom: max(8px,env(safe-area-inset-bottom)); left: 50%; width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 430px; min-height: 66px; padding: 4px 6px; border: 1px solid var(--app-border) !important; border-radius: 28px !important; background: var(--app-surface-raised) !important; box-shadow: var(--app-shadow) !important; -webkit-backdrop-filter: blur(var(--app-glass-blur)) saturate(120%); backdrop-filter: blur(var(--app-glass-blur)) saturate(120%); } [data-theme="dark"] body.home.az-mobile-app .az-mobile-tabs { background: var(--app-surface-raised) !important; } body.home.az-mobile-app .az-mobile-tabs a { min-height: 56px; color: var(--app-text) !important; transition: transform 180ms ease,opacity 180ms ease,color 180ms ease; } body.home.az-mobile-app .az-mobile-tabs__primary, body.home.az-mobile-app .az-mobile-tabs__primary span { color: var(--app-text) !important; } body.home.az-mobile-app .az-mobile-tabs__primary b { color: var(--app-accent) !important; } body.home.az-mobile-app .az-mobile-tabs a[aria-current="page"], body.home.az-mobile-app .az-mobile-tabs a[aria-current="page"] span, body.home.az-mobile-app .az-mobile-tabs a[aria-current="page"] b { color: var(--app-accent) !important; } body.home.az-mobile-app .az-mobile-main { padding-bottom: calc(81px + env(safe-area-inset-bottom)); } body.home.az-mobile-app :is( .az-mobile-quick-actions a, .az-mobile-lahmacun-card, .az-mobile-categories > div > a, .az-mobile-tabs a ):active { opacity: .78; transform: scale(.97); } } @media (max-width: 359px) { body.home.az-mobile-app { --az-mobile-home-card-height: 66px; } body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-header.glass-navigation, body.home.az-mobile-app .az-mobile-tabs { width: calc(100% - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)); } } @media (prefers-reduced-transparency: reduce) and (max-width: 767px) { body.home.az-mobile-app .az-header, body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-lahmacun-card, body.home.az-mobile-app .az-mobile-categories > div > a, body.home.az-mobile-app .az-mobile-tabs { background: var(--app-surface-solid) !important; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { body.home.az-mobile-app :is( .az-mobile-quick-actions a, .az-mobile-lahmacun-card, .az-mobile-categories > div > a, .az-mobile-tabs a ) { transition: none !important; } } /* ============================================================ 7.228.0 — İç sayfa mobil marka ve tema tutarlılığı. ------------------------------------------------------------ Orijinal logo dosyası değişmez; dosyadaki güvenli boşluğu ana sayfada kullanılan aynı orantılı arka plan ölçeğiyle telafi eder. Kural yalnız 0–767 px iç sayfalara aittir. Tema modu çözülmüş data-theme üzerinden okunur; sistem/açık/koyu geometrisi aynı kalır. ============================================================ */ @media (max-width:767px) { body.az-mobile-app:not(.home) .az-header .az-brand { width:100%; min-width:0; height:48px; overflow:hidden; } body.az-mobile-app:not(.home) .az-header .az-brand .anzelha-brand-logo, body.az-mobile-app:not(.home) .az-header .az-brand .anzelha-brand-mark { width:min(100%,112px) !important; height:44px !important; max-width:100%; background-position:center !important; /* 7.499.0 — LOGO KIRPILMASI DÜZELTİLDİ. `background-size:205% auto` logoyu kutunun İKİ KATI çiziyordu; `.az-brand` `overflow:hidden` olduğu için kelime markasının iki yanı kesiliyor ve ekranda "nzelh" görünüyordu (gerçek cihazda bildirildi, canlıda ölçüldü: marka kutusu 390px'te yalnız 62px, logo 205% ile ~127px çiziliyordu). `contain` logonun TAMAMINI kutuya sığdırır; kırpma olmaz. NOT: asıl darboğaz kutunun 62px'e sıkışmasıdır — üst bardaki 5 aksiyon düğmesi 366px'lik satırın 275px'ini alıyor. Bu bir GENİŞLİK BÜTÇESİ sorunudur ve ayrı bir karar gerektirir; burada yalnız kırpma kapatıldı. */ background-size:contain !important; background-repeat:no-repeat !important; filter:none !important; } } /* ============================================================ 7.307.0 — ANZELHA MOBILE APP SHELL / IMMUTABLE FINAL AUTHORITY ------------------------------------------------------------ Telefon belgesi hiçbir sayfada kaymaz. Ana sayfa tek viewport'tur; uzun iş akışları yalnız appbar ile tabbar arasındaki kendi ekranında kayar. Canlı veri kaynakları ve açık/koyu web tema tokenları korunur. Bu blok dosyanın sonunda kalmalı ve yalnız 0–767 px'i etkilemelidir. ============================================================ */ @media (max-width:767px) { html:has(body.az-mobile-app) { width:100%; height:100%; min-height:100%; overflow:hidden !important; overscroll-behavior:none; } body.az-mobile-app { --az-appbar-top:calc(var(--az-admin-bar-h,0px) + max(8px,env(safe-area-inset-top))); --az-appbar-space:calc(var(--az-appbar-top) + 62px); --az-tabbar-space:calc(78px + env(safe-area-inset-bottom)); position:fixed !important; inset:0; width:100%; height:100vh; height:100dvh; min-height:0 !important; padding:0 !important; overflow:hidden !important; overscroll-behavior:none; background:var(--app-bg,var(--az-m-page,#f7f5f1)) !important; } body.az-mobile-app .az-header, body.az-mobile-app .az-header.glass-navigation { position:fixed !important; top:var(--az-appbar-top) !important; right:auto !important; left:50% !important; width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important; max-width:430px; transform:translateX(-50%) !important; } body.az-mobile-app .az-mobile-tabs { position:fixed !important; right:auto !important; bottom:max(8px,env(safe-area-inset-bottom)) !important; left:50% !important; width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important; max-width:430px; min-height:66px; transform:translateX(-50%) !important; } /* İç sayfalarda belge değil yalnız bu uygulama ekranı kayar. */ body.az-mobile-app:not(.home) .az-mobile-main { position:fixed !important; top:var(--az-appbar-space) !important; right:auto !important; bottom:var(--az-tabbar-space) !important; left:50% !important; box-sizing:border-box; width:min(100%,430px) !important; max-width:430px !important; height:auto !important; min-height:0 !important; margin:0 !important; padding-top:2px !important; padding-bottom:18px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-y; transform:translateX(-50%); } body.az-mobile-app:not(.home) .az-mobile-main::-webkit-scrollbar { display:none; width:0; height:0; } body.az-mobile-app.woocommerce-checkout { --az-tabbar-space:max(8px,env(safe-area-inset-bottom)); } /* Ana ekran tek viewport: ikinci bir kaydırma yüzeyi oluşturulamaz. */ body.home.az-mobile-app .az-mobile-main { position:fixed !important; inset:0 auto 0 50% !important; box-sizing:border-box; width:min(100%,430px) !important; max-width:430px !important; height:100vh !important; height:100dvh !important; min-height:0 !important; margin:0 !important; padding:0 0 var(--az-tabbar-space) !important; overflow:hidden !important; overscroll-behavior:none; touch-action:manipulation; transform:translateX(-50%); } body.home.az-mobile-app .az-showcase, body.home.az-mobile-app .az-showcase ~ *, body.home.az-mobile-app .site-footer, body.home.az-mobile-app .az-to-top { display:none !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27 { padding-top:calc(74px + env(safe-area-inset-top)) !important; } body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { height:clamp(150px,22dvh,190px) !important; min-height:0 !important; max-height:190px !important; aspect-ratio:auto !important; } body.home.az-mobile-app .az-mobile-home-hub { padding:6px 0 0 !important; } body.home.az-mobile-app .az-mobile-home-hub > .az-shell { padding-inline:var(--az-mobile-home-gutter,12px) !important; } body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-quick-actions a { min-height:54px !important; } body.home.az-mobile-app .az-mobile-quick-actions a { gap:3px !important; padding:4px 2px !important; } body.home.az-mobile-app .az-mobile-quick-actions .anzelha-icon { width:21px; height:21px; } body.home.az-mobile-app .az-mobile-quick-actions a.is-primary .anzelha-icon { padding:5px; } body.home.az-mobile-app .az-mobile-lahmacun-card { grid-template-columns:44px minmax(0,1fr) 44px !important; gap:8px !important; min-height:56px !important; margin-top:6px !important; padding:5px 8px !important; } body.home.az-mobile-app .az-mobile-lahmacun-card > img { width:44px !important; height:44px !important; padding:0 !important; } body.home.az-mobile-app .az-mobile-lahmacun-card > b { width:44px !important; height:44px !important; } body.home.az-mobile-app .az-mobile-lahmacun-card small { font-size:9px; } body.home.az-mobile-app .az-mobile-lahmacun-card strong { font-size:clamp(13px,4vw,17px); } body.home.az-mobile-app .az-mobile-lahmacun-card em { font-size:10.5px; } body.home.az-mobile-app .az-mobile-categories { margin-top:6px !important; } body.home.az-mobile-app .az-mobile-categories > header { min-height:44px; margin:0 2px 2px !important; } body.home.az-mobile-app .az-mobile-categories h2 { font-size:clamp(17px,5vw,20px) !important; } body.home.az-mobile-app .az-mobile-categories > header button { min-width:76px; min-height:44px !important; padding:4px 8px !important; } body.home.az-mobile-app .az-mobile-categories > div { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; overflow:visible !important; margin:0 !important; padding:0 !important; scroll-snap-type:none !important; } body.home.az-mobile-app .az-mobile-categories > div > a { display:grid !important; grid-template-rows:26px minmax(0,auto); place-items:center; gap:2px !important; width:auto !important; min-width:0 !important; min-height:56px !important; height:56px !important; padding:3px 2px !important; white-space:normal !important; } body.home.az-mobile-app .az-mobile-categories > div > a > span:first-child { width:26px !important; height:26px !important; } body.home.az-mobile-app .az-mobile-categories > div > a .anzelha-icon { width:20px !important; height:20px !important; } body.home.az-mobile-app .az-mobile-categories > div > a > span:last-child { font-size:clamp(9px,2.7vw,11.5px) !important; line-height:1.05; text-align:center; } html.az-app-route-leaving body.az-mobile-app .az-mobile-main { opacity:.48; } body.az-mobile-app .az-mobile-main { transition:opacity 110ms ease; } } @media (max-width:767px) and (max-height:700px) { body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { height:126px !important; } body.home.az-mobile-app .az-mobile-home-hub { padding-top:4px !important; } body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-quick-actions a { min-height:48px !important; } body.home.az-mobile-app .az-mobile-lahmacun-card { min-height:50px !important; margin-top:4px !important; padding-block:3px !important; } body.home.az-mobile-app .az-mobile-categories { margin-top:4px !important; } body.home.az-mobile-app .az-mobile-categories > div > a { min-height:46px !important; height:46px !important; } } @media (max-width:767px) and (max-height:600px) { body.home.az-mobile-app .az-home--ios27 .az-hero27__stage { height:104px !important; } body.home.az-mobile-app .az-mobile-quick-actions, body.home.az-mobile-app .az-mobile-quick-actions a { min-height:44px !important; } body.home.az-mobile-app .az-mobile-lahmacun-card { min-height:46px !important; } body.home.az-mobile-app .az-mobile-categories > div > a { min-height:44px !important; height:44px !important; } } @media (prefers-reduced-motion:reduce) and (max-width:767px) { body.az-mobile-app .az-mobile-main { transition:none !important; } } /* ==================== mobile-shell.css ==================== */ /** * Anzelha — GLOBAL MOBİL KABUK (≤767px, TÜM sayfalar) * --------------------------------------------------------------------------- * KESİN KURAL (kullanıcı, 2026-07-26): Mobil her zaman UYGULAMA FORMATINDA * açılır. Bu dosya, ana ekran uygulama görünümünü ALT SAYFALARA da taşır: alt * navigasyon her sayfada ana ekrandaki 4 sekmeli tasarımla (Ana Sayfa/Menü/ * Rezervasyon/Hesabım) AYNI görünür. Web tasarımı değişse bile bu kabuğun * YERLEŞİMİ değişmez; yalnız renk modu ve bilgi güncellenir. * * Konumlandırma/route/içerik boşluğu için `.az-mobile-tabs .az-mobile-tabbar` * sınıfları KORUNUR (mobile-app.css sabitler). Bu dosya YALNIZ görünümü * (.az-appnav) eşitler. Tema renk kuralları `html:not([data-theme="dark"]) …` * gibi tema-önekli ve `!important` olduğundan, buradaki seçiciler `html body` * önekiyle bilinçli olarak DAHA YÜKSEK özgüllüğe çıkarılır (aksi halde eski * altın/cam görünüm renk kurallarımızı yener). Ana sayfada global tabbar zaten * gizli (mobile-home-app.css) — appscreen kendi sekmesini gösterir. * * =========================================================================== * 7.492.0 — Tarayıcı Mobil Uygulama Talimatı v2, ADIM 1 (jetonlar + alt nav) * --------------------------------------------------------------------------- * İKİ BİLİNÇLİ SAPMA (talimat §3 "Sapma gerekiyorsa gerekçesi raporlanır"): * * 1. JETON ADLARI ÖNEKLİ (`--azm-*`), talimat §2'deki çıplak adlar DEĞİL. * Gerekçe: `--surface`, `--ink` ve `--muted` bu temada ZATEN `core.css` ve * `design-system.css` içinde `:root` seviyesinde tanımlı ve tüm siteyi * (masaüstü dâhil) süren canlı jetonlardır. Talimattaki gibi `:root`'a * yeniden tanımlamak masaüstünü boyardı; bu, aynı talimatın §0 ("masaüstünde * tek satır CSS değişmez") ve §1.1 (mobil izolasyonu) kurallarına ve üstün * olan MOBIL-TASARIM-ANA-KURALI'na aykırıdır. Tek kaynak ilkesi (§1.2) * korunur: bileşenlerde çıplak #hex yoktur, her değer buradan okunur. * Eşleme — §2 adı → bu dosya: * --bg → --azm-bg | --surface → --azm-surface * --surface2 → --azm-surface2 | --line → --azm-line * --line2 → --azm-line2 | --ink → --azm-ink * --muted → --azm-muted | --brand → --azm-brand * --brand-ink → --azm-brand-ink | --tint → --azm-tint * --nav-bg → --azm-nav-bg | --r-lg/--r-md/--r-sm → --azm-r-lg/md/sm * --press → --azm-press * * 2. TEMA SEÇİCİSİ `html[data-theme="dark"]`, talimat §2'deki `html.az-dark` * DEĞİL. Gerekçe: bu temada kullanıcı tercihi `anzelha_theme` anahtarıyla * `data-theme` özniteliğine yazılır (ANZELHA-MOBILE-DESIGN-CONTRACT §Tema); * `az-dark`/`az-light` sınıfları bu kod tabanında hiç üretilmez ve ölü CSS * olurdu. Üç tekrar (varsayılan açık / data-theme=dark / prefers-color-scheme) * talimatın istediği gibi kullanıcı tercihinin cihaz ayarını ezmesini sağlar. * * KAPSAM NOTU: Adım 1 jetonları TANIMLAR ve YALNIZ alt navigasyona uygular. * Sayfa zeminleri/kartlar hâlâ eski `--az-mobile-*` paletini kullanır; onların * göçü talimat §7'deki 2-6. adımlardır (her biri ayrı sürüm + ayrı test raporu). * =========================================================================== */ @media (max-width: 767px) { /* * Onaylı tarayıcı-mobil renk sistemi (2026-07-30) * ------------------------------------------------- * Ana ekran ile Menü, Rezervasyon ve Hesabım gibi alt sayfalar aynı iOS * cam paletini paylaşır. Yerleşim bu katmanda değiştirilmez. */ html body.az-mobile-app { --az-mobile-bg: #f7f1e9; --az-mobile-surface: rgba(255, 255, 255, 0.64); --az-mobile-surface-solid: #fbf8f2; --az-mobile-border: rgba(255, 255, 255, 0.9); --az-mobile-text: #17191c; --az-mobile-muted: #5d6268; --az-mobile-accent: #10b9c5; --az-mobile-copper: #b46b35; --az-m-page: var(--az-mobile-bg); --az-m-card: var(--az-mobile-surface); --az-m-ink: var(--az-mobile-text); --az-m-muted: var(--az-mobile-muted); --az-m-line: rgba(60, 60, 67, 0.15); --az-m-gold: var(--az-mobile-accent); --az-m-gold-soft: rgba(16, 185, 197, 0.12); background: var(--az-mobile-bg) !important; color: var(--az-mobile-text); color-scheme: light; } html[data-theme="dark"] body.az-mobile-app { --az-mobile-bg: #07090a; --az-mobile-surface: rgba(20, 23, 24, 0.68); --az-mobile-surface-solid: #111415; --az-mobile-border: rgba(255, 255, 255, 0.19); --az-mobile-text: #f5f7f8; --az-mobile-muted: #a7adb2; --az-mobile-accent: #16c5d0; --az-mobile-copper: #d08a4c; --az-m-page: var(--az-mobile-bg); --az-m-card: var(--az-mobile-surface); --az-m-ink: var(--az-mobile-text); --az-m-muted: var(--az-mobile-muted); --az-m-line: rgba(255, 255, 255, 0.14); --az-m-gold: var(--az-mobile-accent); --az-m-gold-soft: rgba(22, 197, 208, 0.14); background: var(--az-mobile-bg) !important; color: var(--az-mobile-text); color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) body.az-mobile-app { --az-mobile-bg: #07090a; --az-mobile-surface: rgba(20, 23, 24, 0.68); --az-mobile-surface-solid: #111415; --az-mobile-border: rgba(255, 255, 255, 0.19); --az-mobile-text: #f5f7f8; --az-mobile-muted: #a7adb2; --az-mobile-accent: #16c5d0; --az-mobile-copper: #d08a4c; --az-m-page: var(--az-mobile-bg); --az-m-card: var(--az-mobile-surface); --az-m-ink: var(--az-mobile-text); --az-m-muted: var(--az-mobile-muted); --az-m-line: rgba(255, 255, 255, 0.14); --az-m-gold: var(--az-mobile-accent); --az-m-gold-soft: rgba(22, 197, 208, 0.14); background: var(--az-mobile-bg) !important; color: var(--az-mobile-text); color-scheme: dark; } } /* ===================================================================== * v2 TASARIM JETONLARI (talimat §2) — TEK KAYNAK * --------------------------------------------------------------------- * Renk, yarıçap ve hareket eğrileri YALNIZ buradan okunur; v2 bileşenleri * içinde çıplak #hex yasaktır (§1.2). Ön ek gerekçesi için dosya başlığı. * Mobil izolasyonu (§1.1): tamamı `max-width: 767px` içinde ve mobil kabuk * köküne (`body.az-mobile-app`) kapsanmıştır — masaüstüne sızmaz. * ===================================================================== */ html body.az-mobile-app { --azm-bg: #f2f2f4; --azm-surface: #ffffff; --azm-surface2: #ffffff; --azm-line: rgba(0, 0, 0, 0.085); --azm-line2: rgba(0, 0, 0, 0.13); --azm-ink: #16181c; --azm-muted: #6e7278; --azm-brand: #e11d24; --azm-brand-ink: #ffffff; --azm-tint: rgba(225, 29, 36, 0.1); --azm-nav-bg: rgba(255, 255, 255, 0.92); /* Yarıçaplar (§2): hero / kart / kategori-buton. */ --azm-r-lg: 20px; --azm-r-md: 16px; --azm-r-sm: 13px; /* Hareket eğrileri (§2): basma / kayma-geçiş. */ --azm-press: cubic-bezier(0.34, 1.56, 0.64, 1); --azm-glide: cubic-bezier(0.22, 1, 0.28, 1); /* KOYU CAM MOD (7.500.0, kullanıcı kararı) — açık modda cam YOKTUR; v2 §2'nin beyaz yüzeyleri aynen kalır. Bileşenler bu jetonu koşulsuz okur, açık modda `none` olduğu için hiçbir etkisi olmaz. */ --azm-glass: none; /* --------------------------------------------------------------- KAPSÜL MALZEMESİ (7.508.0) — ÜST ÇUBUK ile ALT ÇUBUK AYNI DİL --------------------------------------------------------------- Kullanıcı kararı (2026-08-04): "üst bar bilgileriyle sadece tasarım olarak alt bar gibi olsun". Yani üst çubuğun İÇERİĞİ (logo · arama · saat · sepet · menü) aynen kalır, YALNIZ kabuğu alt çubuğun diline geçer. Değerler alt çubuğun (.az-appnav) canlıda ölçülmüş halidir. Üç yüzey de (üst kabuk `.az-header__inner`, uygulama ekranı `.az-appbar__*` hapları, alt çubuk) YALNIZ buradan okur — sabit değer kopyalanmaz, böylece ayrışmaları MÜMKÜN DEĞİL. 7.514.0 — RENK TEMAYI TAKİP EDER, TASARIM ETMEZ (kullanıcı kararı 2026-08-04): "koyu ve açık mod renk kendini ayarlasın ama tasarım böyle olsun". 7.508–7.510 arası kapsül iki temada da koyuydu; bu karar onu süperseder. DEĞİŞMEYEN: biçim (999px kapsül), yüzen yerleşim, blur, kenarlık kalınlığı, ölçüler, dizilim. DEĞİŞEN: yalnız zemin/kenarlık/gölge/mürekkep değerleri. Aşağısı AÇIK MOD; koyu karşılıkları `[data-theme="dark"]` ve `prefers-color-scheme: dark` bloklarında. Bileşenler tema dalı YAZMAZ, hepsi bu jetonlardan okur — böylece bir modda düzeltilen şey diğerinde ayrışamaz (7.510.0'da bu tam olarak kaçmıştı). Blur sabit kopya DEĞİL: alt çubuğun gerçek malzemesi 7.506.0'da canlıda ölçüldüğünde ios-system-components.css'ten geliyordu (kaynak 26px yazıyor, ekranda 30px). Jetonu izliyoruz ki tek yerden değişsin; yedek değer o ölçümün aynısıdır. */ --azm-cap-bg: rgba(255, 255, 255, 0.82); /* .10 → .20 (7.514.0): mağaza gibi ZEMİNİ SAF BEYAZ sayfalarda kapsülün yüzeyi sayfadan hiç ayrışmıyor (ölçüldü: 1,0:1) — orada kenarlık tek sınır işaretidir ve .10'da 1,23:1 ile görünmezdi. */ --azm-cap-line: rgba(23, 25, 28, 0.2); --azm-cap-blur: var(--ios-material-regular, saturate(180%) blur(30px)); /* Açık modda ayrımı GÖLGE taşır (koyuda kenarlık taşıyor): beyaz kapsül krem zeminden renkle ayrışamaz, yükseklikle ayrışır. */ --azm-cap-shadow: 0 10px 30px rgba(40, 30, 21, 0.14), 0 2px 8px rgba(40, 30, 21, 0.08); --azm-cap-ink: rgba(23, 25, 28, 0.88); --azm-cap-ink-on: #17191c; /* Kapsül İÇİNDEKİ ikincil yüzey (üst çubuktaki saat çipi gibi etiketli öğeleri gruplar). Alt çubuğun aktif göstergesi .20'dir; bu bilerek daha düşük — "gruplanmış" demeli, "seçili" DEMEMELİ. */ --azm-cap-chip: rgba(23, 25, 28, 0.06); /* AKTİF sekme vurgusu (alt çubuğun kayan göstergesi + ana ekran dock'unun durağan karşılığı). Çipten GÜÇLÜ olmalı: bu "seçili" demektir. */ --azm-cap-active: rgba(23, 25, 28, 0.1); /* Saydamlık azaltıldığında kullanılan OPAK karşılık. */ --azm-cap-opaque: #fbfaf8; /* --------------------------------------------------------------- DOLGU ROLÜ (7.516.0) — 7.513.0 renk sisteminin eksik kalan ayağı --------------------------------------------------------------- 7.513.0 rolleri ayırdı: DOLGU (buton/rozet/sekme) daima kırmızı `--theme-accent`; turkuaz `--brand` ise YALNIZ metin/ikon rolü ("ham marka turkuazı — yalnız koyu zeminde metin", surface-system.css). Gerekçe: kırmızı koyu cam üstünde METİN olarak 3,95:1 verip AA'yı geçmiyor, o yüzden metin turkuaz kalır. Ama mobil v2 katmanı bu göçe HİÇ girmedi: `--azm-brand` tek başına hem dolgu hem metin için kullanılıyordu ve koyu modda turkuaz (#16b6d4). Sonuç: koyu modda DOLGULU birincil buton turkuaz çıkıyordu — 7.513.0'ın kendi kuralının ("turkuaz hiçbir yerde dolgulu buton zemini olmayacak") ihlali. `--azm-brand` metin/ikon rolünde AYNEN KALIR (hero başlığı, kategori ikonları, puan yazısı koyuda turkuaz kalmalı — kasıtlı). Dolgu kullanımları bu jeton çiftine geçer. Tema dalı YOK: `--theme-accent` iki temada da kırmızıdır. */ --azm-fill: var(--theme-accent, #e3262e); --azm-fill-ink: #ffffff; } html[data-theme="dark"] body.az-mobile-app { --azm-bg: #0a0c0e; --azm-surface: rgba(255, 255, 255, 0.06); --azm-surface2: rgba(255, 255, 255, 0.09); --azm-line: rgba(255, 255, 255, 0.12); --azm-line2: rgba(255, 255, 255, 0.18); --azm-glass: blur(20px) saturate(160%); --azm-ink: #f2f5f7; --azm-muted: #9aa1a8; --azm-brand: #16b6d4; --azm-brand-ink: #04222b; --azm-tint: rgba(22, 182, 212, 0.14); --azm-nav-bg: rgba(16, 21, 26, 0.94); /* KAPSÜL — KOYU MOD (7.510.0) -------------------------------------- Tasarım DEĞİŞMİYOR: kapsül iki modda da koyu kalır. Buradaki değerler aynı ALGIYI korumak içindir — `backdrop-filter` yüzünden yüzey arkasını kısmen geçirdiğinden, aynı renk krem zeminde ve siyah zeminde çok farklı çıkıyor. Canlıda ölçüldü (7.509.0): kapsülün sayfadan ayrışması açık modda 9,6:1 iken koyu modda **1,25:1** — yüzey zemine gömülüyordu, onu ayakta tutan tek şey 1px kenarlıktı. Yazı kontrastı sorunlu değildi (13,2:1); sorun yüzeyin kendisiydi. Etkin renk artık iki modda da ~rgb(62): kapsül aynı fiziksel nesne, yalnız zeminle ilişkisi değişiyor. Kenarlık koyuda daha belirgin (.12 → .22) çünkü ayrımı asıl o taşıyor. ÖNEMLİ: bu değerler JETON olarak yazılır, `.az-appnav`e özel kural olarak DEĞİL. 7.508.0'da koyu mod yalnız alt çubuğa sabit değer veriyordu; üst bar jetondan okuduğu için ikisi koyu modda AYRIŞIYORDU. Tek kaynak kuralının delindiği yer burasıydı. */ --azm-cap-bg: rgba(74, 74, 80, 0.84); --azm-cap-line: rgba(255, 255, 255, 0.22); --azm-cap-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); --azm-cap-ink: rgba(255, 255, 255, 0.88); --azm-cap-ink-on: #ffffff; --azm-cap-chip: rgba(255, 255, 255, 0.12); --azm-cap-active: rgba(255, 255, 255, 0.2); --azm-cap-opaque: #2a2a2e; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) body.az-mobile-app { --azm-bg: #0a0c0e; --azm-surface: rgba(255, 255, 255, 0.06); --azm-surface2: rgba(255, 255, 255, 0.09); --azm-line: rgba(255, 255, 255, 0.12); --azm-line2: rgba(255, 255, 255, 0.18); --azm-glass: blur(20px) saturate(160%); --azm-ink: #f2f5f7; --azm-muted: #9aa1a8; --azm-brand: #16b6d4; --azm-brand-ink: #04222b; --azm-tint: rgba(22, 182, 212, 0.14); --azm-nav-bg: rgba(16, 21, 26, 0.94); /* Sistem koyu modu — yukarıdaki `[data-theme="dark"]` bloğuyla AYNI kapsül değerleri; gerekçe orada. */ --azm-cap-bg: rgba(74, 74, 80, 0.84); --azm-cap-line: rgba(255, 255, 255, 0.22); --azm-cap-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); --azm-cap-ink: rgba(255, 255, 255, 0.88); --azm-cap-ink-on: #ffffff; --azm-cap-chip: rgba(255, 255, 255, 0.12); --azm-cap-active: rgba(255, 255, 255, 0.2); --azm-cap-opaque: #2a2a2e; } } /* KESİN HATA DÜZELTMESİ (2026-07-26): Site footer'ı (İletişim/Bize Ulaşın bölümü, `az-footer-*` cam kartlar) mobil uygulama kabuğunda YALNIZ ana sayfada gizleniyordu; MENÜ/MAĞAZA ve diğer alt sayfalarda footer, sabit içerik konteynerinin (`.az-mobile-main`) ÜSTÜNÜ kaplayıp menüyü/ürünleri görünmez yapıyordu — kullanıcı "kategoriye tıklayınca boş, footer çıkıyor" diye bildirdi. Canlıda elementFromPoint ile doğrulandı: ürün bölgesinde en üstteki element `FOOTER.site-footer`. Footer artık TÜM mobil uygulama kabuğu sayfalarında gizlenir (ana sayfayla tutarlı); iletişim/yasal bağlantılar üst menü ve "Diğer" panelinden erişilebilir kalır. */ html body.az-mobile-app .site-footer { display: none !important; } /* ===================================================================== * ALT NAVİGASYON — YÜZEN KAPSÜL (Mobil Alt Menü Codex Talimatı §4) * --------------------------------------------------------------------- * Bu blok, 7.492.0'daki DÜZ ETİKETLİ tasarımı (v2 §3.6) SÜPERSEDE eder. * Alt menü talimatı §0: "Hedef görünüm A — yüzen kapsüldür" ve o belge * alt menü konusunda üstündür. Etiketler DOM'da KALIR, yalnız görsel * olarak gizlenir (§3 + §6: ekran okuyucu ve B'ye dönüş için). * * `display` BİLEREK `!important` DEĞİL (§1.2 + 7.477.0 üretim arızası): * ana sayfa, WhatsApp sohbeti ve ödeme sayfası çubuğu gizler; zorlama o * istisnaları ezer ve ÇİFT ALT ÇUBUK oluşur. * * KONUM ve TRANSFORM'da `!important` ZORUNLU (talimat §4 snippet'inde yok, * bilinçli sapma): mobile-app.css'teki eski yüzen kapsül bloğu hem * `left:50%` hem `transform:translateX(-50%) !important` yazıyor. 7.492.0'da * canlı ölçüldü — !important'suz yazılınca çubuk kendi genişliğinin YARISI * kadar sola kayıyor (390px'te x=-195, iki sekme ekran dışında). * ===================================================================== */ html body .az-mobile-tabs.az-mobile-tabbar.az-appnav { display: grid; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; align-items: stretch !important; position: fixed !important; right: 12px !important; bottom: calc(env(safe-area-inset-bottom) + 10px) !important; left: 12px !important; width: auto !important; max-width: 440px !important; margin: 0 auto !important; min-height: 58px !important; padding: 6px !important; /* 7.508.0: malzeme artık ORTAK kapsül jetonlarından okunur (bkz. §2 token bloğu). Değerler birebir aynıdır — bu satırların amacı görsel değişiklik değil, üst çubukla ayrışmayı yapısal olarak imkânsız kılmaktır. */ border: 1px solid var(--azm-cap-line) !important; border-radius: 999px !important; background: var(--azm-cap-bg) !important; background-image: none !important; -webkit-backdrop-filter: var(--azm-cap-blur) !important; backdrop-filter: var(--azm-cap-blur) !important; box-shadow: var(--azm-cap-shadow) !important; color: var(--azm-cap-ink) !important; /* `opacity` tabanı BİLEREK yazılmaz: overlay/hamburger gizlemesi `opacity:0 !important` ile çalışıyor, taban değer onu ezip menü açıkken çubuğu geri getirirdi (7.492.0 dersi). */ transform: translate3d(0, 0, 0) !important; transition: transform 0.55s cubic-bezier(0.22, 1, 0.28, 1), opacity 0.3s ease; } /* Kaydırınca in-çık (§4 + §5). `display` ile DEĞİL transform ile. */ html body .az-mobile-tabs.az-mobile-tabbar.az-appnav.is-hidden { transform: translate3d(0, calc(100% + 34px), 0) scale(0.92) !important; opacity: 0; } /* Kayan aktif vurgu — süslemedir, `aria-hidden` işaretlidir. */ html body .az-appnav .az-appnav__ind { position: absolute; z-index: 0; top: 6px; right: auto; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: var(--azm-cap-active); transform: translate3d(0, 0, 0); transform-origin: center; pointer-events: none; will-change: transform, width; transition: transform 0.52s cubic-bezier(0.22, 1, 0.28, 1), width 0.52s cubic-bezier(0.22, 1, 0.28, 1); } html body .az-appnav .az-appnav__ind.az-noanim { transition: none !important; } html body .az-appnav a, html body .az-appnav button { position: relative; z-index: 1; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: none !important; background-image: none !important; box-shadow: none !important; color: inherit !important; font: inherit; text-decoration: none !important; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; transition: color 0.25s ease; } html body .az-appnav a b, html body .az-appnav button b { display: grid !important; place-items: center; width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; color: currentcolor !important; transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } html body .az-appnav a b svg, html body .az-appnav button b svg { display: block; width: 26px; height: 26px; color: currentcolor !important; } /* §3.1 İKON NORMALİZASYONU — beş ikon 24×24 çerçevede ~20.5 birim görsel yer kaplar. Diğer dördü çizgi ikonudur ve zaten bu bandın içindedir; WhatsApp MARKA GLYPH'i ise çerçeveyi 0→24 tamamen doldurduğu için `scale(.854)` ile küçültülür (24 × .854 ≈ 20.5). Talimat bunu `` ile öneriyor; burada CSS ile yapılıyor (bilinçli sapma) çünkü ikon `anzelha_ui_icon()` kayıt defterinden TEK KAYNAK olarak geliyor — path'i kopyalayıp içine eklemek o tek kaynağı çoğaltırdı. Görsel sonuç birebir aynıdır. Glyph `fill`li olduğu için çizgi kalınlığı devralmaz; renk yine `currentColor` — marka yeşili KULLANILMAZ. */ html body .az-appnav .az-appnav__wa b svg { transform: scale(0.854); transform-box: fill-box; transform-origin: center; } /* Hesabım ikonu §3.1 bandının ALTINDA doğuyor: bbox 15 + çizgi 1.8 = 16.8 (band 18.2–20.5). Formül `s = 20.5 / (bbox + çizgi)` → 1.22. Diğer üç çizgi ikonu 18.8–19.8 ile zaten banda uyduğu için dokunulmadı. Seçici konumsaldır çünkü §3 işaretlemesi sekmelere ayrı sınıf vermiyor; sekme SIRASI o belgede sabit olduğundan (Ana Sayfa · Menü · WhatsApp · Rezervasyon · Hesabım) son `` daima Hesabım'dır — WhatsApp `