/* ============================================================ BAKLAVACI MESUT — MAĞAZA KATMANI Ürün detay modalı · sepet çekmecesi · bildirimler ------------------------------------------------------------ Sitenin mevcut CSS'ine DOKUNMAZ. Hepsi `bm-` önekli. Renkler index.html'deki :root değişkenlerinden okunur; sadece daha koyu lüks tonlar burada eklenir. ============================================================ */ :root{ --bm-ink:#1A100C; /* en koyu kahve — modal/çekmece zemini */ --bm-ink-soft:#221610; --bm-bronze:#C5A059; /* mat bronz */ --bm-gold:#D4AF37; /* parlak altın — vurgu */ --bm-line:rgba(197,160,89,.22); --bm-shadow:0 24px 70px rgba(20,10,5,.45); --bm-z:4000; } .bm-lock{overflow:hidden !important} /* ============================================================ 1 · SEPET BUTONU (masaüstü navbar + mobil sabit) ============================================================ */ .bm-sepet-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border:1px solid var(--bm-line);border-radius:50%; background:transparent;color:var(--brown);cursor:pointer; transition:background .25s,color .25s,border-color .25s,transform .25s; } .bm-sepet-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6} .bm-sepet-btn:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)} .bm-sepet-btn:focus-visible{outline:2px solid var(--bm-gold);outline-offset:3px} .bm-sepet-rozet{ position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px; border-radius:10px;background:var(--bm-gold);color:var(--bm-ink); font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:600;line-height:20px; text-align:center;transform:scale(0);transition:transform .28s cubic-bezier(.34,1.56,.64,1); } .bm-sepet-rozet.dolu{transform:scale(1)} /* sepete eklendi → ikon sallanır */ @keyframes bmSalla{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(-14deg)} 30%{transform:rotate(11deg)} 45%{transform:rotate(-8deg)} 60%{transform:rotate(6deg)} 75%{transform:rotate(-3deg)} } .bm-sepet-btn.bm-salla{animation:bmSalla .7s ease} /* mobilde sağ altta sabit — mevcut sabit butonların üstünde durur */ .bm-sepet-sabit{ position:fixed;right:16px;bottom:16px;z-index:120; width:56px;height:56px;border-radius:50%; background:var(--brown);color:var(--cream);border:none; box-shadow:0 10px 26px rgba(20,10,5,.34); } .bm-sepet-sabit svg{width:24px;height:24px} .bm-sepet-sabit:hover{background:var(--bm-ink);color:var(--cream)} @media (min-width:900px){ .bm-sepet-sabit{display:none} } @media (max-width:899px){ .bm-sepet-navbar{display:none} } /* ============================================================ 2 · ORTAK PERDE (backdrop) ============================================================ */ .bm-perde{ position:fixed;inset:0;z-index:var(--bm-z); background:rgba(15,8,4,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s; } .bm-perde.acik{opacity:1;visibility:visible} /* ============================================================ 3 · SEPET ÇEKMECESİ ============================================================ */ .bm-cekmece{ position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--bm-z) + 10); width:min(420px,100%);display:flex;flex-direction:column; background:var(--cream-light);box-shadow:var(--bm-shadow); transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1); visibility:hidden; } .bm-cekmece.acik{transform:none;visibility:visible} .bm-cekmece-ust{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.15rem 1.35rem;background:var(--bm-ink);color:var(--cream); } .bm-cekmece-baslik{ font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:600;color:var(--cream); } .bm-cekmece-baslik span{color:var(--bm-bronze);font-size:.85rem;font-weight:400} .bm-kapat{ width:34px;height:34px;display:flex;align-items:center;justify-content:center; border:none;background:transparent;color:inherit;font-size:26px;line-height:1; cursor:pointer;border-radius:50%;transition:background .25s; } .bm-kapat:hover{background:rgba(255,255,255,.12)} .bm-kapat:focus-visible{outline:2px solid var(--bm-gold);outline-offset:2px} .bm-cekmece-govde{flex:1;overflow-y:auto;padding:1.1rem 1.35rem;-webkit-overflow-scrolling:touch} .bm-bos{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.9rem;height:100%;text-align:center;color:var(--text-mid); } .bm-bos svg{width:52px;height:52px;fill:none;stroke:var(--bm-bronze);stroke-width:1.2;opacity:.7} .bm-bos p{font-size:1rem} /* sepet satırı */ .bm-satir{ display:grid;grid-template-columns:72px 1fr auto;gap:.9rem;align-items:start; padding:.95rem 0;border-bottom:1px solid rgba(62,42,20,.1); } .bm-satir-gorsel{ width:72px;aspect-ratio:4/3;border-radius:4px;background-size:cover;background-position:center; background-color:#efe4d3; } .bm-satir-ad{ font-family:'Playfair Display',serif;font-size:.98rem;font-weight:600;color:var(--brown); line-height:1.3; } .bm-satir-paket{ font-family:'Josefin Sans',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--bm-bronze);margin-top:.3rem; } .bm-satir-fiyat{font-size:.95rem;color:var(--text-mid);margin-top:.35rem} .bm-satir-sag{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem} .bm-satir-tutar{font-weight:600;color:var(--brown);white-space:nowrap} /* adet kutusu */ .bm-adet{display:inline-flex;align-items:center;border:1px solid rgba(62,42,20,.2);border-radius:2px} .bm-adet button{ width:30px;height:30px;border:none;background:transparent;color:var(--brown); font-size:17px;line-height:1;cursor:pointer;transition:background .2s; } .bm-adet button:hover{background:rgba(62,42,20,.08)} .bm-adet button:disabled{opacity:.3;cursor:not-allowed} .bm-adet button:focus-visible{outline:2px solid var(--bm-gold);outline-offset:-2px} .bm-adet input{ width:38px;height:30px;border:none;border-left:1px solid rgba(62,42,20,.15); border-right:1px solid rgba(62,42,20,.15);background:transparent;text-align:center; font-family:'Josefin Sans',sans-serif;font-size:.85rem;color:var(--brown); -moz-appearance:textfield; } .bm-adet input::-webkit-outer-spin-button, .bm-adet input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .bm-sil{ border:none;background:transparent;color:var(--text-mid);cursor:pointer; font-family:'Josefin Sans',sans-serif;font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;padding:2px 0;text-decoration:underline;text-underline-offset:3px; transition:color .2s; } .bm-sil:hover{color:#a4402c} /* çekmece alt bölüm — form + toplam + buton */ .bm-cekmece-alt{ border-top:1px solid rgba(62,42,20,.14);background:var(--cream); padding:1.1rem 1.35rem 1.35rem; } .bm-alan{margin-bottom:.7rem} .bm-alan label{ display:block;font-family:'Josefin Sans',sans-serif;font-size:.64rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--text-mid);margin-bottom:.3rem; } .bm-alan label .bm-ops{color:var(--bm-bronze);letter-spacing:.08em} .bm-alan input,.bm-alan textarea{ width:100%;padding:.6rem .7rem;border:1px solid rgba(62,42,20,.22);border-radius:2px; background:var(--white);font-family:'Cormorant Garamond',serif;font-size:1rem; color:var(--text-dark);transition:border-color .2s,box-shadow .2s; } .bm-alan textarea{resize:vertical;min-height:56px} .bm-alan input:focus,.bm-alan textarea:focus{ outline:none;border-color:var(--bm-bronze);box-shadow:0 0 0 3px rgba(197,160,89,.16); } .bm-alan input.bm-hata,.bm-alan textarea.bm-hata{border-color:#b4472f;box-shadow:0 0 0 3px rgba(180,71,47,.12)} .bm-hata-yazi{display:none;margin-top:.25rem;font-size:.85rem;color:#a4402c} .bm-alan.bm-hatali .bm-hata-yazi{display:block} .bm-toplam{ display:flex;align-items:baseline;justify-content:space-between; margin:.9rem 0 .85rem;padding-top:.85rem;border-top:1px solid rgba(62,42,20,.14); } .bm-toplam-etiket{ font-family:'Josefin Sans',sans-serif;font-size:.68rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid); } .bm-toplam-tutar{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--brown)} .bm-not{font-size:.88rem;color:var(--text-mid);margin-top:.6rem;line-height:1.5;text-align:center} /* ============================================================ 4 · BUTONLAR ============================================================ */ .bm-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%; padding:.95rem 1.4rem;border:1px solid transparent;border-radius:2px;cursor:pointer; font-family:'Josefin Sans',sans-serif;font-size:.72rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;text-decoration:none; transition:background .28s,color .28s,border-color .28s,transform .18s; } .bm-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .bm-btn svg[fill='currentColor']{fill:currentColor;stroke:none} .bm-btn:active{transform:translateY(1px)} .bm-btn:focus-visible{outline:2px solid var(--bm-gold);outline-offset:3px} .bm-btn:disabled{opacity:.45;cursor:not-allowed} .bm-btn-altin{background:var(--gold);color:var(--white)} .bm-btn-altin:hover:not(:disabled){background:var(--brown)} .bm-btn-wa{background:#25d366;color:#fff} .bm-btn-wa:hover:not(:disabled){background:#1da851} .bm-btn-cizgi{background:transparent;color:var(--brown);border-color:var(--brown)} .bm-btn-cizgi:hover:not(:disabled){background:var(--brown);color:var(--cream)} /* ============================================================ 5 · ÜRÜN DETAY MODALI ============================================================ */ .bm-modal{ position:fixed;inset:0;z-index:calc(var(--bm-z) + 20); display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem; opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; } .bm-modal.acik{opacity:1;visibility:visible} .bm-modal-panel{ position:relative;width:min(1060px,100%);max-height:calc(100vh - 4rem); display:grid;grid-template-columns:1.05fr 1fr; background:var(--cream-light);box-shadow:var(--bm-shadow);overflow:hidden; transform:translateY(26px) scale(.985);transition:transform .38s cubic-bezier(.22,1,.36,1); } .bm-modal.acik .bm-modal-panel{transform:none} .bm-modal-kapat{ position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px; display:flex;align-items:center;justify-content:center;border:none;border-radius:50%; background:rgba(26,16,12,.62);color:#fff;font-size:24px;line-height:1;cursor:pointer; backdrop-filter:blur(4px);transition:background .25s; } .bm-modal-kapat:hover{background:var(--bm-ink)} .bm-modal-kapat:focus-visible{outline:2px solid var(--bm-gold);outline-offset:2px} /* galeri */ .bm-galeri{background:var(--bm-ink);display:flex;flex-direction:column} .bm-galeri-buyuk{ flex:1;min-height:320px;background-size:cover;background-position:center; background-color:var(--bm-ink-soft);transition:background-image .3s; } .bm-galeri-kucukler{display:flex;gap:.5rem;padding:.7rem;background:var(--bm-ink-soft)} .bm-galeri-kucuk{ width:56px;aspect-ratio:4/3;border:1px solid transparent;border-radius:2px;padding:0; background-size:cover;background-position:center;cursor:pointer;opacity:.55; transition:opacity .25s,border-color .25s; } .bm-galeri-kucuk.secili,.bm-galeri-kucuk:hover{opacity:1;border-color:var(--bm-bronze)} /* bilgi sütunu */ .bm-modal-bilgi{padding:2rem 2.1rem;overflow-y:auto;-webkit-overflow-scrolling:touch} .bm-modal-rozet{ display:inline-block;padding:.28rem .7rem;margin-bottom:.75rem; background:var(--gold);color:var(--white); font-family:'Josefin Sans',sans-serif;font-size:.58rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase; } .bm-modal-kat{ font-family:'Josefin Sans',sans-serif;font-size:.6rem;letter-spacing:.32em; text-transform:uppercase;color:var(--bm-bronze); } .bm-modal-ad{ font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.15rem);font-weight:700; color:var(--brown);line-height:1.15;margin:.5rem 0 .7rem; } .bm-modal-ozet{font-size:1.05rem;font-weight:300;color:var(--text-mid);line-height:1.75} .bm-modal-fiyat{ font-family:'Playfair Display',serif;font-size:1.85rem;font-weight:700;color:var(--brown); margin:1.1rem 0 .2rem; } .bm-modal-fiyat small{ font-family:'Josefin Sans',sans-serif;font-size:.62rem;font-weight:400;letter-spacing:.18em; text-transform:uppercase;color:var(--bm-bronze);margin-left:.45rem; } /* paket seçimi */ .bm-blok{margin-top:1.3rem} .bm-blok-baslik{ font-family:'Josefin Sans',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--text-mid);margin-bottom:.6rem; } .bm-paketler{display:flex;flex-wrap:wrap;gap:.5rem} .bm-paket{ padding:.6rem .95rem;border:1px solid rgba(62,42,20,.24);border-radius:2px; background:transparent;cursor:pointer;text-align:left; font-family:'Cormorant Garamond',serif;font-size:.98rem;color:var(--text-dark); transition:border-color .25s,background .25s,color .25s; } .bm-paket b{display:block;font-family:'Josefin Sans',sans-serif;font-size:.62rem; font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.15rem} .bm-paket:hover{border-color:var(--bm-bronze)} .bm-paket.secili{background:var(--brown);border-color:var(--brown);color:var(--cream)} .bm-paket:focus-visible{outline:2px solid var(--bm-gold);outline-offset:2px} .bm-adet-satir{display:flex;align-items:center;gap:1rem;margin-top:1.3rem;flex-wrap:wrap} .bm-modal-aksiyon{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem} /* sekmeler */ .bm-sekmeler{display:flex;gap:1.4rem;margin-top:1.8rem;border-bottom:1px solid rgba(62,42,20,.14)} .bm-sekme{ padding:0 0 .6rem;border:none;background:none;cursor:pointer;position:relative; font-family:'Josefin Sans',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--text-mid);transition:color .25s; } .bm-sekme::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .28s; } .bm-sekme.secili{color:var(--brown)} .bm-sekme.secili::after{transform:scaleX(1)} .bm-sekme:focus-visible{outline:2px solid var(--bm-gold);outline-offset:2px} .bm-sekme-icerik{padding-top:1rem;font-size:1rem;color:var(--text-mid);line-height:1.8} .bm-sekme-icerik[hidden]{display:none} .bm-etiketler{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem} .bm-etiket{ padding:.28rem .65rem;border:1px solid var(--bm-line);border-radius:100px; background:rgba(197,160,89,.09);font-size:.9rem;color:var(--text-mid); } .bm-etiket.bm-uyari{border-color:rgba(180,71,47,.3);background:rgba(180,71,47,.07);color:#8d3a26} .bm-kucuk-not{margin-top:.8rem;font-size:.86rem;color:var(--bm-bronze);line-height:1.6} /* ============================================================ 6 · BİLDİRİM (toast) + konfeti ============================================================ */ .bm-toast-kutu{ position:fixed;left:50%;bottom:26px;z-index:calc(var(--bm-z) + 60); transform:translateX(-50%);display:flex;flex-direction:column;gap:.5rem; pointer-events:none;width:max-content;max-width:calc(100vw - 32px); } .bm-toast{ display:flex;align-items:center;gap:.7rem;padding:.75rem 1.15rem; background:var(--bm-ink);color:var(--cream);box-shadow:0 12px 34px rgba(20,10,5,.4); font-size:.98rem;border-left:3px solid var(--bm-gold); animation:bmToastGir .32s cubic-bezier(.22,1,.36,1); } .bm-toast svg{width:18px;height:18px;flex:none;stroke:var(--bm-gold);fill:none;stroke-width:2} .bm-toast.bm-cikis{animation:bmToastCik .28s forwards} @keyframes bmToastGir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes bmToastCik{to{opacity:0;transform:translateY(10px)}} .bm-konfeti{position:fixed;inset:0;z-index:calc(var(--bm-z) + 50);pointer-events:none;overflow:hidden} .bm-konfeti i{ position:absolute;width:8px;height:12px;border-radius:1px;opacity:0; animation:bmKonfeti 1.1s cubic-bezier(.18,.7,.4,1) forwards; } @keyframes bmKonfeti{ 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(var(--bm-x),var(--bm-y)) rotate(var(--bm-r))} } /* ============================================================ 7 · KARTLAR — tıklanabilir olduğu belli olsun ============================================================ */ .product-card,.pasta-card{cursor:pointer} .product-card:focus-visible,.pasta-card:focus-visible{ outline:2px solid var(--gold);outline-offset:3px; } .bm-kart-ipucu{ position:absolute;inset:auto 0 0 0;padding:.5rem; background:linear-gradient(to top,rgba(26,16,12,.82),transparent); color:var(--cream);text-align:center;opacity:0;transition:opacity .3s; font-family:'Josefin Sans',sans-serif;font-size:.6rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;pointer-events:none; } .product-card:hover .bm-kart-ipucu,.pasta-card:hover .bm-kart-ipucu, .product-card:focus-visible .bm-kart-ipucu,.pasta-card:focus-visible .bm-kart-ipucu{opacity:1} /* ============================================================ 8 · MOBİL ============================================================ */ @media (max-width:899px){ .bm-modal{padding:0;align-items:flex-end} .bm-modal-panel{ grid-template-columns:1fr;width:100%;max-height:94vh; border-radius:14px 14px 0 0;transform:translateY(100%); } .bm-galeri-buyuk{min-height:0;aspect-ratio:4/3} .bm-modal-bilgi{padding:1.4rem 1.25rem 1.9rem} .bm-modal-panel{overflow-y:auto} .bm-galeri{position:relative} .bm-cekmece{width:100%} .bm-toast-kutu{bottom:88px} } @media (prefers-reduced-motion:reduce){ .bm-perde,.bm-cekmece,.bm-modal,.bm-modal-panel,.bm-toast{transition-duration:.01ms !important} .bm-konfeti{display:none} .bm-sepet-btn.bm-salla{animation:none} .bm-toast{animation:none} } /* ============================================================ 9 · NAVBAR UYUMU Navbar açılışta şeffaf (koyu hero üstünde) → beyaz ikon; aşağı kayınca krem zemine oturuyor → kahve ikon. ============================================================ */ nav .bm-sepet-btn{color:var(--white);border-color:rgba(255,255,255,.32)} nav .bm-sepet-btn:hover{background:var(--white);color:var(--brown);border-color:var(--white)} nav.scrolled .bm-sepet-btn{color:var(--brown);border-color:var(--bm-line)} nav.scrolled .bm-sepet-btn:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)} nav .bm-sepet-btn{margin-left:.9rem} /* ============================================================ 10 · KART ÜSTÜ "SEPETE EKLE" BUTONU Mevcut .product-order / .pasta-order stilini bozmaz; sadece eklendi onayı için renk verir. ============================================================ */ .product-order.bm-eklendi, .pasta-order.bm-eklendi{ color:#1f8a4c;border-color:#1f8a4c; } /* ============================================================ 11 · MOBİL NAVBAR — logo ortada, hamburger sağda ------------------------------------------------------------ Sorun: index.html'de mobilde logo ortalıydı ama hamburger gizliydi (mobil menü erişilemiyordu); pastalar.html'de hamburger vardı ama logo sola kayıyordu. İki sayfa da farklı görünüyordu. Çözüm: logo mutlak konumla tam ortaya alınır, hamburger sağda kalır. Böylece başlık her sayfada ortalı DURUR ve mobil menü iki sayfada da açılır. NOT: bu dosya sayfa içi