/* ========================================================================== QR MENÜ — TASARIM SİSTEMİ Tek stil dosyası. Tema ile değişir. Kaynak değişken: index.php içindeki $temaTuru (0 = koyu, 1 = açık) ========================================================================== */ /* -------------------------------------------------------------- 1. YEREL FONTLAR -------------------------------------------------------------- */ @font-face{font-family:"Mona Sans";src:url("../fonts/mona/MonaSans-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Mona Sans";src:url("../fonts/mona/MonaSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Mona Sans";src:url("../fonts/mona/MonaSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Mona Sans";src:url("../fonts/mona/MonaSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Mona Sans";src:url("../fonts/mona/MonaSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} /* -------------------------------------------------------------- 2. ORTAK DEĞİŞKENLER -------------------------------------------------------------- */ :root{ --f-baslik:"Fraunces",Georgia,"Times New Roman",serif; --f-govde:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-tam:999px; --kenar:clamp(14px,4.5vw,32px); --sayfa:1120px; --gecis:200ms cubic-bezier(.4,0,.2,1); } /* ---------- KOYU TEMA · $temaTuru = 0 ---------- */ [data-tema="koyu"]{ --zemin:#131110; --zemin-cam:rgba(19,17,16,.86); --isik:radial-gradient(1100px 560px at 50% -12%,rgba(220,165,74,.14),transparent 68%); --yuzey:#1c1917; --yuzey-2:#242020; --yuzey-ust:#2e2825; --cizgi:#332c28; --cizgi-2:#4a3f38; --metin:#f5efe8; --metin-2:#b7a99b; --metin-3:#8a7c6f; --vurgu:#dca54a; --vurgu-2:#f0c579; --vurgu-uzeri:#191410; --vurgu-soft:rgba(220,165,74,.13); --golge:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -10px rgba(0,0,0,.65); --golge-sm:0 1px 3px rgba(0,0,0,.45); --basari:#68c47f; --basari-soft:rgba(104,196,127,.14); --hata:#e8836a; --hata-soft:rgba(232,131,106,.14); color-scheme:dark; } /* ---------- AÇIK TEMA · $temaTuru = 1 ---------- */ [data-tema="acik"]{ --zemin:#faf6f0; --zemin-cam:rgba(250,246,240,.88); --isik:radial-gradient(1100px 560px at 50% -12%,rgba(150,88,31,.10),transparent 68%); --yuzey:#ffffff; --yuzey-2:#f5eee4; --yuzey-ust:#efe4d6; --cizgi:#e8ddce; --cizgi-2:#d2c2ac; --metin:#231c16; --metin-2:#6d5f53; --metin-3:#9c8c7d; --vurgu:#96581f; --vurgu-2:#7c4814; --vurgu-uzeri:#fffaf3; --vurgu-soft:rgba(150,88,31,.09); --golge:0 1px 2px rgba(66,44,22,.06), 0 12px 32px -12px rgba(66,44,22,.20); --golge-sm:0 1px 3px rgba(66,44,22,.09); --basari:#2d7a4d; --basari-soft:rgba(45,122,77,.10); --hata:#ad3f27; --hata-soft:rgba(173,63,39,.09); color-scheme:light; } /* -------------------------------------------------------------- 3. TEMEL / RESET -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; min-height:100vh; min-height:100svh; background-color:var(--zemin); background-image:var(--isik); background-repeat:no-repeat; background-attachment:fixed; color:var(--metin); font-family:var(--f-govde); font-size:16px; font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ul,ol{list-style:none;margin:0;padding:0} h1,h2,h3,h4{margin:0;font-family:var(--f-baslik);font-weight:600;line-height:1.18;letter-spacing:-.01em} p{margin:0} /* ---------- UZUN METİN GÜVENLİĞİ (her yerde geçerli) ---------- */ h1,h2,h3,h4,p,li,span,a,div,td,th{ overflow-wrap:break-word; word-break:normal; } .kirilabilir{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto} /* Flex/grid çocuklarının taşmasını engelle */ .esnek-min{min-width:0} :focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:var(--r-xs)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* -------------------------------------------------------------- 4. YERLEŞİM -------------------------------------------------------------- */ .kabuk{ width:100%; max-width:var(--sayfa); margin-inline:auto; padding-inline:var(--kenar); } .sayfa{ display:flex; flex-direction:column; min-height:100vh; min-height:100svh; } .sayfa > main{flex:1 1 auto} .gorsel-gizli{ position:absolute!important;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* -------------------------------------------------------------- 5. ÜST BAR (yapışkan) -------------------------------------------------------------- */ .ust-bar{ position:sticky; top:0; z-index:60; background:var(--zemin-cam); border-bottom:1px solid var(--cizgi); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); } .ust-bar-ic{ display:flex; align-items:center; gap:12px; min-height:62px; padding-block:10px; } .ust-bar-logo{ flex:0 0 auto; margin-inline:auto; display:block; } .ust-bar-logo img{width:auto;height:38px;object-fit:contain} /* Geri butonu */ .geri{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px 8px 11px; border-radius:var(--r-tam); border:1px solid var(--cizgi); background:var(--yuzey); color:var(--metin-2); font-size:14px; font-weight:500; transition:var(--gecis); transition-property:color,border-color,background-color,transform; } .geri svg{width:16px;height:16px;flex:0 0 auto;transition:transform var(--gecis)} .geri:hover{color:var(--metin);border-color:var(--cizgi-2);background:var(--yuzey-2)} .geri:hover svg{transform:translateX(-3px)} .geri:active{transform:scale(.97)} /* Logoyu ortada tutan görünmez denge bloğu */ .geri-denge{flex:0 0 auto;visibility:hidden;pointer-events:none} @media (max-width:520px){ .geri span{display:none} .geri{padding:9px 11px} } /* -------------------------------------------------------------- 6. BÖLÜM BAŞLIĞI + SÜSLEME -------------------------------------------------------------- */ .bolum-basi{ text-align:center; padding-block:clamp(26px,7vw,48px) clamp(20px,5vw,32px); } .ust-etiket{ display:block; font-family:var(--f-govde); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--vurgu); margin-bottom:12px; } .bolum-basi h1, .bolum-basi h2{ font-size:clamp(26px,6vw,40px); font-variation-settings:"SOFT" 30,"WONK" 1; text-wrap:balance; max-width:22ch; margin-inline:auto; } .bolum-basi p{ margin-top:12px; color:var(--metin-2); font-size:15px; max-width:52ch; margin-inline:auto; text-wrap:pretty; } /* İnce ayraç: —— ◆ —— */ .susleme{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; color:var(--vurgu); } .susleme::before, .susleme::after{ content:""; height:1px; width:clamp(34px,12vw,72px); background:linear-gradient(to right,transparent,var(--cizgi-2)); } .susleme::after{background:linear-gradient(to left,transparent,var(--cizgi-2))} .susleme i{ width:6px;height:6px; background:currentColor; transform:rotate(45deg); border-radius:1px; flex:0 0 auto; } /* -------------------------------------------------------------- 7. KARŞILAMA EKRANI -------------------------------------------------------------- */ .karsilama{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(26px,6vw,44px); min-height:100vh; min-height:100svh; padding-block:clamp(36px,9vw,72px); text-align:center; } .karsilama-marka{display:flex;flex-direction:column;align-items:center} .karsilama-logo{ width:clamp(150px,44vw,208px); margin-bottom:clamp(18px,4vw,26px); } .karsilama-logo img{width:100%} .karsilama-marka h1{ font-size:clamp(24px,6.5vw,38px); font-variation-settings:"SOFT" 40,"WONK" 1; text-wrap:balance; max-width:18ch; } .karsilama-marka p{ margin-top:12px; color:var(--metin-2); font-size:clamp(14px,3.6vw,16px); max-width:38ch; text-wrap:pretty; } .masa-rozeti{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:7px 15px; border-radius:var(--r-tam); border:1px solid var(--cizgi); background:var(--vurgu-soft); color:var(--vurgu); font-size:13px; font-weight:600; letter-spacing:.02em; max-width:100%; } .masa-rozeti svg{width:14px;height:14px;flex:0 0 auto} .masa-rozeti span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Giriş kartları */ .giris-izgara{ display:grid; grid-template-columns:1fr; gap:14px; width:100%; max-width:660px; } @media (min-width:640px){ .giris-izgara.ikili{grid-template-columns:1fr 1fr} } .giris-kart{ display:flex; align-items:center; gap:16px; padding:20px; text-align:start; border-radius:var(--r-lg); border:1px solid var(--cizgi); background:var(--yuzey); box-shadow:var(--golge-sm); transition:var(--gecis); transition-property:transform,border-color,box-shadow,background-color; } .giris-kart:hover{ transform:translateY(-3px); border-color:var(--vurgu); box-shadow:var(--golge); } .giris-kart:active{transform:translateY(-1px) scale(.99)} .giris-kart-ikon{ flex:0 0 auto; display:grid; place-items:center; width:52px;height:52px; border-radius:var(--r); background:var(--vurgu-soft); color:var(--vurgu); } .giris-kart-ikon svg{width:25px;height:25px} .giris-kart-yazi{min-width:0;flex:1 1 auto} .giris-kart-yazi strong{ display:block; font-family:var(--f-baslik); font-size:19px; font-weight:600; letter-spacing:-.01em; } .giris-kart-yazi span{ display:block; margin-top:3px; color:var(--metin-3); font-size:13.5px; line-height:1.45; } .giris-kart-ok{ flex:0 0 auto; color:var(--metin-3); transition:transform var(--gecis),color var(--gecis); } .giris-kart-ok svg{width:18px;height:18px} .giris-kart:hover .giris-kart-ok{transform:translateX(4px);color:var(--vurgu)} /* -------------------------------------------------------------- 8. KATEGORİ IZGARASI -------------------------------------------------------------- */ .kategori-izgara{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:clamp(10px,2.6vw,20px); padding-bottom:clamp(30px,8vw,56px); } @media (min-width:900px){ .kategori-izgara{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} } .kategori-kart{ display:flex; flex-direction:column; height:100%; border-radius:var(--r-lg); border:1px solid var(--cizgi); background:var(--yuzey); box-shadow:var(--golge-sm); overflow:hidden; transition:var(--gecis); transition-property:transform,border-color,box-shadow; } .kategori-kart:hover{ transform:translateY(-4px); border-color:var(--vurgu); box-shadow:var(--golge); } .kategori-kart:active{transform:translateY(-1px)} .kategori-gorsel{ position:relative; aspect-ratio:1/1; background:var(--yuzey-2); padding:10px; flex:0 0 auto; } .kategori-gorsel img{ width:100%;height:100%; object-fit:contain; transition:transform 420ms cubic-bezier(.4,0,.2,1); } .kategori-kart:hover .kategori-gorsel img{transform:scale(1.07)} /* Görseli olmayan kategori: logo damgası */ .kategori-gorsel.bos img{ object-fit:contain; padding:16%; opacity:.32; filter:grayscale(1); } .kategori-ad{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; padding:13px 12px 15px; font-family:var(--f-baslik); font-size:15px; font-weight:600; line-height:1.28; letter-spacing:-.005em; text-wrap:balance; min-width:0; } @media (min-width:900px){ .kategori-ad{font-size:17px;padding:15px 14px 18px} } /* -------------------------------------------------------------- 9. ÜRÜN LİSTESİ (uzun başlık/açıklamaya dayanıklı) -------------------------------------------------------------- */ .urun-liste{ display:grid; grid-template-columns:1fr; gap:4px; padding-bottom:clamp(30px,8vw,56px); } @media (min-width:860px){ .urun-liste{grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px)} } .urun{ display:flex; align-items:flex-start; gap:14px; padding:15px 12px; border-radius:var(--r); border-bottom:1px solid var(--cizgi); transition:background-color var(--gecis); } .urun:hover{background:var(--yuzey-2)} .urun-gorsel{ flex:0 0 auto; width:64px; aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden; background:var(--yuzey-2); border:1px solid var(--cizgi); } .urun-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 420ms cubic-bezier(.4,0,.2,1)} .urun-gorsel:hover img{transform:scale(1.08)} .urun-govde{flex:1 1 auto;min-width:0} /* Ad — noktalı çizgi — fiyat */ .urun-satir{ display:flex; align-items:baseline; gap:8px; width:100%; } .urun-ad{ flex:0 1 auto; min-width:0; font-family:var(--f-baslik); font-size:16.5px; font-weight:600; line-height:1.3; letter-spacing:-.005em; overflow-wrap:anywhere; } .urun-nokta{ flex:1 1 auto; min-width:14px; align-self:baseline; height:0; border-bottom:1px dotted var(--cizgi-2); /* Boş esnek öğenin taban çizgisi üst kenarıdır; bu sayede nokta dizisi yazı puntosundan bağımsız olarak her zaman satır tabanına oturur. */ transform:translateY(1px); } .urun-fiyat{ flex:0 0 auto; white-space:nowrap; font-size:15.5px; font-weight:600; color:var(--vurgu); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .urun-fiyat small{font-size:.82em;font-weight:500;margin-inline-start:1px} .urun-aciklama{ margin-top:5px; color:var(--metin-3); font-size:13.5px; line-height:1.5; text-wrap:pretty; overflow-wrap:anywhere; } /* “Yeni” rozeti */ .rozet{ display:inline-block; vertical-align:middle; margin-inline-start:8px; padding:2px 8px; border-radius:var(--r-tam); background:var(--basari-soft); color:var(--basari); font-family:var(--f-govde); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } /* Boş durum */ .bos-durum{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:clamp(40px,12vw,80px) 20px; text-align:center; color:var(--metin-3); } .bos-durum svg{width:38px;height:38px;color:var(--cizgi-2)} .bos-durum p{font-size:14.5px;max-width:34ch} /* -------------------------------------------------------------- 10. YÜZEN GÖRÜŞ BUTONU -------------------------------------------------------------- */ .yuzen-btn{ position:fixed; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:70; display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:var(--r-tam); border:1px solid var(--cizgi); background:var(--yuzey); color:var(--metin-2); font-size:14px; font-weight:500; box-shadow:var(--golge); transition:var(--gecis); transition-property:transform,color,border-color,background-color; } .yuzen-btn svg{width:16px;height:16px;flex:0 0 auto;color:var(--vurgu)} .yuzen-btn:hover{color:var(--metin);border-color:var(--vurgu);transform:translateY(-2px)} .yuzen-btn:active{transform:translateY(0) scale(.97)} @media (max-width:420px){ .yuzen-btn span{display:none} .yuzen-btn{padding:13px} .yuzen-btn svg{width:18px;height:18px} } /* -------------------------------------------------------------- 11. MODAL -------------------------------------------------------------- */ .modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity var(--gecis),visibility var(--gecis); } .modal.acik{opacity:1;visibility:visible} .modal-kutu{ position:relative; width:100%; max-width:460px; max-height:calc(100vh - 40px); max-height:calc(100svh - 40px); overflow-y:auto; padding:clamp(22px,5vw,30px); border-radius:var(--r-lg); border:1px solid var(--cizgi); background:var(--yuzey); box-shadow:0 24px 60px -12px rgba(0,0,0,.4); transform:translateY(14px) scale(.98); transition:transform 260ms cubic-bezier(.4,0,.2,1); } .modal.acik .modal-kutu{transform:none} .modal-kapat{ position:absolute; inset-block-start:12px; inset-inline-end:12px; display:grid; place-items:center; width:34px;height:34px; border-radius:var(--r-tam); color:var(--metin-3); transition:var(--gecis); transition-property:color,background-color; } .modal-kapat:hover{color:var(--metin);background:var(--yuzey-2)} .modal-kapat svg{width:17px;height:17px} .modal-kutu h2{ font-size:21px; padding-inline-end:38px; text-wrap:balance; } .modal-kutu > p{ margin-top:8px; color:var(--metin-3); font-size:13.5px; line-height:1.5; text-wrap:pretty; } /* -------------------------------------------------------------- 12. FORM -------------------------------------------------------------- */ .alan{margin-top:18px} .alan label{ display:block; margin-bottom:7px; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--metin-2); } .alan textarea, .alan input{ display:block; width:100%; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--cizgi); background:var(--zemin); color:var(--metin); font-family:var(--f-govde); font-size:15px; line-height:1.5; resize:vertical; transition:border-color var(--gecis),box-shadow var(--gecis); } .alan textarea{min-height:130px} .alan textarea::placeholder, .alan input::placeholder{color:var(--metin-3)} .alan textarea:focus, .alan input:focus{ outline:none; border-color:var(--vurgu); box-shadow:0 0 0 3px var(--vurgu-soft); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--r-tam); font-size:14.5px; font-weight:600; letter-spacing:.01em; transition:var(--gecis); transition-property:transform,filter,background-color,border-color,color; } .btn svg{width:16px;height:16px;flex:0 0 auto} .btn-dolu{background:var(--vurgu);color:var(--vurgu-uzeri)} .btn-dolu:hover{filter:brightness(1.08)} .btn-cizgi{border:1px solid var(--cizgi);background:var(--yuzey);color:var(--metin-2)} .btn-cizgi:hover{border-color:var(--cizgi-2);color:var(--metin)} .btn:active{transform:scale(.97)} .btn-tam{width:100%} /* -------------------------------------------------------------- 13. BİLDİRİM (toast) -------------------------------------------------------------- */ .bildirim{ position:fixed; z-index:120; inset-block-start:max(14px,env(safe-area-inset-top)); inset-inline:14px; margin-inline:auto; width:fit-content; max-width:min(440px,calc(100% - 28px)); display:flex; align-items:flex-start; gap:10px; padding:13px 17px; border-radius:var(--r-tam); border:1px solid var(--cizgi); background:var(--yuzey); color:var(--metin); font-size:14px; line-height:1.45; box-shadow:var(--golge); animation:bildirim-gir 420ms cubic-bezier(.2,.9,.3,1) both; } .bildirim svg{width:17px;height:17px;flex:0 0 auto;color:var(--basari);margin-top:1px} .bildirim.gizle{animation:bildirim-cik 320ms cubic-bezier(.4,0,1,1) forwards} @keyframes bildirim-gir{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}} @keyframes bildirim-cik{to{opacity:0;transform:translateY(-16px)}} /* -------------------------------------------------------------- 14. DURUM KARTI (garson çağır sonucu) -------------------------------------------------------------- */ .durum{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px,5vw,32px); min-height:100vh; min-height:100svh; padding-block:clamp(36px,9vw,64px); text-align:center; } .durum-ikon{ display:grid; place-items:center; width:clamp(96px,26vw,124px); aspect-ratio:1/1; border-radius:var(--r-tam); border:1px solid var(--cizgi); } .durum-ikon svg{width:56%;height:56%;overflow:visible} .durum.olumlu .durum-ikon{background:var(--basari-soft);color:var(--basari)} .durum.olumsuz .durum-ikon{background:var(--hata-soft);color:var(--hata)} .durum-yazi{max-width:40ch} .durum-yazi h1{font-size:clamp(23px,6vw,32px);text-wrap:balance} .durum-yazi p{ margin-top:12px; color:var(--metin-2); font-size:15px; line-height:1.6; text-wrap:pretty; } .durum-logo{width:clamp(112px,30vw,144px);opacity:.72} /* Çizim animasyonları */ .ciz{ stroke-dasharray:340; stroke-dashoffset:340; animation:ciz-tamamla 900ms cubic-bezier(.65,0,.35,1) forwards; } .ciz.gecikme{animation-delay:260ms} @keyframes ciz-tamamla{to{stroke-dashoffset:0}} /* -------------------------------------------------------------- 15. ALT BİLGİ -------------------------------------------------------------- */ .alt-bilgi{ border-top:1px solid var(--cizgi); padding-block:26px; padding-bottom:calc(26px + env(safe-area-inset-bottom)); margin-top:auto; text-align:center; } .alt-bilgi-baglanti{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 20px; margin-bottom:14px; } .alt-bilgi-baglanti a{ display:inline-flex; align-items:center; gap:7px; color:var(--metin-2); font-size:14px; transition:color var(--gecis); max-width:100%; overflow-wrap:anywhere; } .alt-bilgi-baglanti a:hover{color:var(--vurgu)} .alt-bilgi-baglanti svg{width:15px;height:15px;flex:0 0 auto} .alt-bilgi small{ display:block; color:var(--metin-3); font-size:12px; line-height:1.6; } /* -------------------------------------------------------------- 16. DİKEY ORTALAYAN ANA ALAN (karşılama / durum sayfaları) -------------------------------------------------------------- */ .ana-orta{display:flex;flex-direction:column;justify-content:center} .ana-orta .karsilama, .ana-orta .durum{min-height:0;flex:1 1 auto} /* -------------------------------------------------------------- 17. YÜZEN DÜĞME VARYANTLARI (sol: görüş · sağ: garson çağır) -------------------------------------------------------------- */ .yuzen-sag{ left:auto; right:max(16px,env(safe-area-inset-right)); } .yuzen-vurgu{ background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-uzeri); font-weight:600; } .yuzen-vurgu svg{color:var(--vurgu-uzeri)} .yuzen-vurgu:hover{ color:var(--vurgu-uzeri); border-color:var(--vurgu); filter:brightness(1.07); } /* Düğme üzerindeki masa adı */ .yuzen-masa{ flex:0 0 auto; max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 8px; border-radius:var(--r-tam); background:rgba(0,0,0,.16); font-size:11.5px; font-style:normal; font-weight:600; letter-spacing:.02em; } @media (max-width:560px){ .yuzen-masa{display:none} } @media (max-width:420px){ .yuzen-sag span{display:none} .yuzen-sag{padding:13px} .yuzen-sag svg{width:18px;height:18px} } /* Yüzen düğmeler içeriğin ya da alt bilginin üstünü kapatmasın */ .sayfa-menu main{padding-bottom:clamp(24px,5vw,36px)} .sayfa-menu .alt-bilgi{ padding-bottom:calc(clamp(78px,17vw,98px) + env(safe-area-inset-bottom)); } /* -------------------------------------------------------------- 18. TIKLANABİLİR ÜRÜN SATIRI -------------------------------------------------------------- */ .urun{position:relative} /* Satırın tamamını kaplayan görünmez düğme: başlık/paragraf etiketleri bozulmadan tüm satır tıklanabilir ve klavyeyle erişilebilir olur. */ .urun-ac{ position:absolute; inset:0; width:100%; border-radius:var(--r); cursor:pointer; background:none; } .urun-ac:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px} .urun:active{background:var(--yuzey-ust)} .urun-ok{ flex:0 0 auto; align-self:center; color:var(--metin-3); opacity:.55; transition:transform var(--gecis),opacity var(--gecis),color var(--gecis); } .urun-ok svg{width:16px;height:16px;display:block} .urun:hover .urun-ok{opacity:1;color:var(--vurgu);transform:translateX(3px)} /* -------------------------------------------------------------- 19. ÜRÜN DETAY PENCERESİ -------------------------------------------------------------- */ .urun-modal{ padding:0; max-width:520px; overflow:hidden; /* görselin üst köşeleri kutuya otursun */ display:flex; flex-direction:column; } .urun-modal .modal-kapat{ background:var(--zemin-cam); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--cizgi); z-index:2; } .urun-modal-gorsel{ position:relative; flex:0 0 auto; aspect-ratio:16/10; overflow:hidden; background:var(--yuzey-2); border-bottom:1px solid var(--cizgi); } /* Görsel mutlak konumlanır; aksi hâlde kendi yüksekliğiyle kutunun en-boy oranını bozar. */ .urun-modal-gorsel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Görseli olmayan ürün: logo, sığdırılarak ve soluk gösterilir */ .urun-modal-gorsel.bos{aspect-ratio:16/7} .urun-modal-gorsel.bos img{ object-fit:contain; padding:8% 22%; opacity:.3; filter:grayscale(1); } .urun-modal-govde{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:clamp(20px,5vw,28px); -webkit-overflow-scrolling:touch; } .urun-modal-govde .ust-etiket{margin-bottom:8px} .urun-modal-govde h2{ font-size:clamp(20px,5.4vw,26px); line-height:1.22; text-wrap:balance; overflow-wrap:anywhere; } .urun-modal-fiyat{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:clamp(19px,5vw,23px); font-weight:700; color:var(--vurgu); font-variant-numeric:tabular-nums; letter-spacing:-.015em; } .urun-modal-fiyat small{font-size:.78em;font-weight:600} .urun-modal-aciklama{ margin-top:14px; padding-top:16px; border-top:1px solid var(--cizgi); color:var(--metin-2); font-size:14.5px; line-height:1.65; text-wrap:pretty; overflow-wrap:anywhere; white-space:pre-line; } .urun-modal-aciklama:empty, .urun-modal-fiyat:empty{display:none} /* Alçak ekranlarda (yatay telefon) görsel yer kaplamasın */ @media (max-height:520px){ .urun-modal-gorsel{display:none} } /* -------------------------------------------------------------- 20. YENİLENMİŞ SAYFA Garson çağır yalnızca karekod okutulup gelindiğinde geçerlidir. Misafir sayfayı yenilerse bağlam düşer; ilgili ögeler daha ilk boyamada gizlenir (bkz. parts/head.php içindeki satır içi betik). -------------------------------------------------------------- */ .sayfa-yenilendi .garson-ogesi{display:none !important} /* Tek kart kalınca ızgara iki sütun gibi durmasın */ .sayfa-yenilendi .giris-izgara.ikili{grid-template-columns:1fr} /* -------------------------------------------------------------- 21. GÖRÜNÜM ANAHTARI (liste / kart) -------------------------------------------------------------- */ .gorunum-secici{ display:flex; width:fit-content; margin:0 0 16px auto; /* blok kapsayıcıda sağa yaslar */ padding:4px; border-radius:var(--r-tam); border:1px solid var(--cizgi); background:var(--yuzey); } .gorunum-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--r-tam); color:var(--metin-3); font-size:13.5px; font-weight:600; white-space:nowrap; transition:var(--gecis); transition-property:color,background-color; } .gorunum-btn svg{width:16px;height:16px;flex:0 0 auto} .gorunum-btn:hover{color:var(--metin)} .gorunum-btn[aria-pressed="true"]{ background:var(--vurgu); color:var(--vurgu-uzeri); } @media (max-width:400px){ .gorunum-btn{padding:8px 12px} .gorunum-btn span{display:none} } /* -------------------------------------------------------------- 22. KART GÖRÜNÜMÜ Kök öge üzerindeki .gorunum-kart sınıfı ile açılır; sınıf ilk boyamadan önce eklendiği için görünüm değişimi göze çarpmaz. -------------------------------------------------------------- */ .gorunum-kart .urun-liste{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(10px,2.6vw,20px); } @media (min-width:900px){ .gorunum-kart .urun-liste{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} } .gorunum-kart .urun{ flex-direction:column; align-items:stretch; gap:0; padding:0; height:100%; border:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi); border-radius:var(--r-lg); background:var(--yuzey); box-shadow:var(--golge-sm); overflow:hidden; transition:var(--gecis); transition-property:transform,border-color,box-shadow; } .gorunum-kart .urun:hover{ transform:translateY(-4px); border-color:var(--vurgu); box-shadow:var(--golge); background:var(--yuzey); } .gorunum-kart .urun-gorsel{ display:block; width:100%; aspect-ratio:1/1; border:0; border-bottom:1px solid var(--cizgi); border-radius:0; background:var(--yuzey-2); } .gorunum-kart .urun:hover .urun-gorsel img{transform:scale(1.07)} /* Fotoğrafı olmayan ürün: logo damgası */ .gorunum-kart .urun-gorsel.bos img{ object-fit:contain; padding:20%; opacity:1; filter:grayscale(1); } .gorunum-kart .urun-govde{padding:12px 14px 15px} .gorunum-kart .urun-satir{ flex-direction:column; align-items:flex-start; gap:7px; } .gorunum-kart .urun-ad{ font-size:15px; line-height:1.3; text-wrap:balance; } .gorunum-kart .urun-nokta{display:none} .gorunum-kart .urun-aciklama{display:none} /* açıklama detay penceresinde */ .gorunum-kart .urun-ok{display:none} .gorunum-kart .urun-ac{border-radius:var(--r-lg)} /* Liste görünümünde logo yedeği yer kaplamasın. Yalnızca kart görünümü kapalıyken geçerli — aksi hâlde eşit özgüllük nedeniyle kart görünümündeki görseli de gizlerdi. */ html:not(.gorunum-kart) .urun-gorsel.bos{display:none}