/* ============================================================================= assets/css/sepet.css Sepet (inc/sepetim.php) + Sipariş tamamlama (inc/siparis-tamamla.php) ----------------------------------------------------------------------------- YÜKLEME SIRASI: hm-sayfa.css'ten SONRA gelmeli. Aynı adlı bir sınıf hm-sayfa.css'te de varsa buradaki kazanır; iki sayfanın görünümü tek dosyadan yönetilsin diye böyle. ========================================================================== */ /* ----------------------------------------------------------------------------- 0. TEMA SIFIRLAMA theme.css / main.css sarmalayıcıları kendi çerçeve, radius ve gölgelerini basıyor; kutu-içinde-kutu görüntüsü buradan çıkıyor. Tek tek kovalamak yerine toptan sıfırlanıyor. -------------------------------------------------------------------------- */ .hm-sf .product-detail, .hm-sf .product-info, .hm-sf .accordion-detail, .hm-sf .tab-content, .hm-sf .tab-pane, .hm-sf .single-content, .hm-sf .card, .hm-sf .cart-totals, .hm-sf .shopping-summery { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } .hm-sf .attr-detail, .hm-sf .detail-qty, .hm-sf .product-extra-link2 { float: none !important; } .hm-sf, .hm-sf * { box-sizing: border-box; } /* ----------------------------------------------------------------------------- 1. YERLEŞİM -------------------------------------------------------------------------- */ .hm-sepet__govde, .hm-sf__govde { max-width: 1320px; margin: 0 auto; padding: var(--s3, 24px) var(--s2, 16px) var(--s7, 56px); color: var(--c-text, #3A4A56); font-family: var(--font, 'Manrope', system-ui, sans-serif); } .hm-sepet__bas { display: flex; align-items: baseline; gap: var(--s2, 16px); flex-wrap: wrap; margin: 0 0 var(--s3, 24px); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--c-slate, #253D4E); letter-spacing: -.02em; } .hm-sepet__adet { font-size: 14px; font-weight: 600; color: var(--c-muted, #7A8894); } .hm-sepet__bas2 { margin: var(--s6, 48px) 0 var(--s3, 24px); font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; color: var(--c-slate, #253D4E); letter-spacing: -.015em; } .hm-sepet__duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s4, 32px); align-items: start; } @media (max-width: 991px) { .hm-sepet__duzen { grid-template-columns: minmax(0, 1fr); } } /* ----------------------------------------------------------------------------- 2. ÜRÜN SATIRLARI -------------------------------------------------------------------------- */ .hm-sepet__liste { border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-lg, 16px); overflow: hidden; background: #fff; } .hm-sepet__satir { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 32px; gap: var(--s2, 16px); align-items: center; padding: var(--s2, 16px); border-bottom: 1px solid var(--c-border, #E5E8EB); } .hm-sepet__satir:last-child { border-bottom: 0; } .hm-sepet__gorsel { display: block; width: 96px; height: 96px; border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-md, 12px); overflow: hidden; background: #F7F9FA; } .hm-sepet__gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; } .hm-sepet__gorselyok { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: #9AA4AE; } .hm-sepet__bilgi { min-width: 0; } .hm-sepet__ad { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; } .hm-sepet__ad a { color: var(--c-slate, #253D4E); text-decoration: none; } .hm-sepet__ad a:hover { color: var(--c-orange, #FD5722); } .hm-sepet__varyant { font-size: 12.5px; line-height: 1.6; color: var(--c-muted, #7A8894); } .hm-sepet__vad { font-weight: 700; color: var(--c-text, #3A4A56); } .hm-sepet__birim { margin-top: 4px; font-size: 12.5px; color: var(--c-muted, #7A8894); } .hm-sepet__adetkutu { display: inline-flex; align-items: center; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-pill, 999px); overflow: hidden; background: #fff; } .hm-sepet__adetbtn { width: 34px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: 700; line-height: 1; color: var(--c-slate, #253D4E); transition: background .15s ease; } .hm-sepet__adetbtn:hover { background: #F2F5F7; } .hm-sepet__adetinp { width: 44px; height: 36px; padding: 0; border: 0; border-left: 1.5px solid var(--c-border, #E5E8EB); border-right: 1.5px solid var(--c-border, #E5E8EB); text-align: center; font-size: 14px; font-weight: 700; color: var(--c-slate, #253D4E); background: #fff; } .hm-sepet__adetinp:focus { outline: 2px solid var(--c-orange, #FD5722); outline-offset: -2px; } .hm-sepet__tutar { text-align: right; white-space: nowrap; } .hm-sepet__tutar strong { display: block; font-size: 16px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sepet__tutar small { font-size: 11px; color: var(--c-muted, #7A8894); } .hm-sepet__sil { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #9AA4AE; transition: background .15s ease, color .15s ease; } .hm-sepet__sil:hover { background: #FDECE7; color: var(--c-orange, #FD5722); } .hm-sepet__sil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } @media (max-width: 575px) { .hm-sepet__satir { grid-template-columns: 72px minmax(0, 1fr) 32px; grid-template-areas: "gorsel bilgi sil" "gorsel adet tutar"; row-gap: var(--s1, 8px); } .hm-sepet__gorsel { grid-area: gorsel; width: 72px; height: 72px; } .hm-sepet__bilgi { grid-area: bilgi; } .hm-sepet__adetkutu { grid-area: adet; justify-self: start; } .hm-sepet__tutar { grid-area: tutar; } .hm-sepet__sil { grid-area: sil; } } .hm-sepet__devam { margin-top: var(--s2, 16px); font-size: 14px; font-weight: 600; } .hm-sepet__devam a { color: var(--c-slate, #253D4E); text-decoration: none; } .hm-sepet__devam a:hover { color: var(--c-orange, #FD5722); } /* ----------------------------------------------------------------------------- 3. BOŞ SEPET -------------------------------------------------------------------------- */ .hm-sepet__bos { max-width: 480px; margin: var(--s6, 48px) auto; text-align: center; padding: var(--s5, 40px) var(--s3, 24px); border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-lg, 16px); background: #fff; } .hm-sepet__bos h1 { margin: var(--s2, 16px) 0 var(--s1, 8px); font-size: 21px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sepet__bos p { margin: 0 0 var(--s3, 24px); font-size: 14px; color: var(--c-muted, #7A8894); } .hm-sepet__bos-ara { display: flex; gap: 8px; margin-bottom: var(--s3, 24px); } .hm-sepet__bos-ara input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-sm, 8px); font-size: 14px; } .hm-sepet__bos-ara button { flex: 0 0 auto; white-space: nowrap; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-sm, 8px); background: var(--c-slate, #253D4E); color: #fff; font-weight: 700; cursor: pointer; } /* ----------------------------------------------------------------------------- 4. ÖZET KUTUSU -------------------------------------------------------------------------- */ .hm-sepet__ozet { position: sticky; top: 96px; padding: var(--s3, 24px); border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-lg, 16px); background: #fff; box-shadow: 0 2px 14px rgba(37, 61, 78, .05); } @media (max-width: 991px) { .hm-sepet__ozet { position: static; } } .hm-sepet__ozetbas { margin: 0 0 var(--s2, 16px); font-size: 16px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sepet__kupon { display: flex; gap: 8px; margin-bottom: var(--s2, 16px); } .hm-sepet__kupon input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-sm, 8px); font-size: 13.5px; font-family: inherit; } .hm-sepet__kupon input:focus { outline: none; border-color: var(--c-orange, #FD5722); } .hm-sepet__kupon button { height: 42px; padding: 0 16px; border: 1.5px solid var(--c-slate, #253D4E); border-radius: var(--r-sm, 8px); background: var(--c-slate, #253D4E); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .hm-sepet__kupon button:hover { background: #1b2d3a; } .hm-sepet__kuponok { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--s2, 16px); font-size: 13px; } .hm-sepet__kuponok a { color: inherit; text-decoration: underline; font-weight: 700; } .hm-sepet__ipucu { margin-bottom: var(--s2, 16px); padding: 12px 14px; background: #E8F6F1; border: 1px solid #BFE5DB; border-radius: var(--r-sm, 8px); font-size: 12.5px; line-height: 1.55; } .hm-sepet__ipucu a { color: var(--c-wa, #2F9E8B); font-weight: 700; } .hm-sf__ozet-t { width: 100%; border-collapse: collapse; margin: 0 0 var(--s2, 16px); } .hm-sf__ozet-t td { padding: 9px 0; font-size: 14px; border: 0; } .hm-sf__ozet-t td:last-child { text-align: right; font-weight: 700; color: var(--c-slate, #253D4E); } .hm-sf__ozet-t tr + tr td { border-top: 1px solid var(--c-border, #E5E8EB); } .hm-sepet__indirim td:last-child { color: var(--c-wa, #2F9E8B); } .hm-sf__ozet-son td { padding-top: 14px !important; border-top: 2px solid var(--c-slate, #253D4E) !important; font-size: 15px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sf__ozet-son td:last-child { font-size: 19px; color: var(--c-orange, #FD5722); } .hm-sf__kargonot { margin: 0 0 var(--s2, 16px); font-size: 12px; line-height: 1.55; color: var(--c-muted, #7A8894); } .hm-sepet__ilerle { width: 100%; } /* ----------------------------------------------------------------------------- 5. FORM -------------------------------------------------------------------------- */ .hm-sepet__adim2[hidden] { display: none; } .hm-sepet__form { display: grid; gap: var(--s3, 24px); } .hm-sf__kutu { margin: 0; padding: var(--s3, 24px); border: 1px solid var(--c-border, #E5E8EB) !important; border-radius: var(--r-lg, 16px) !important; background: #fff !important; } .hm-sf__kutu > legend { float: none; width: auto; padding: 0 8px; margin-left: -8px; font-size: 14px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2, 16px); margin-top: var(--s2, 16px); } .hm-sf__grid[hidden] { display: none; } .hm-sf__alan--tam { grid-column: 1 / -1; } @media (max-width: 575px) { .hm-sf__grid { grid-template-columns: minmax(0, 1fr); } } .hm-sf__alan { display: block; } .hm-sf__alan[hidden] { display: none; } .hm-sf__alan > span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-slate, #253D4E); } .hm-sf__alan input, .hm-sf__alan textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-sm, 8px); font-family: inherit; font-size: 14px; color: var(--c-text, #3A4A56); background: #fff; transition: border-color .15s ease; } .hm-sf__alan textarea { resize: vertical; min-height: 84px; } .hm-sf__alan input:focus, .hm-sf__alan textarea:focus { outline: none; border-color: var(--c-orange, #FD5722); } .hm-sf__alan input:user-invalid, .hm-sf__alan textarea:user-invalid { border-color: #D64545; } .hm-sf__alan > small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--c-muted, #7A8894); } /* --- radyo kartları --- */ .hm-sf__secim { display: grid; gap: 10px; margin-top: var(--s2, 16px); } .hm-sf__secim-k { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; cursor: pointer; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-md, 12px); transition: border-color .15s ease, background .15s ease; } .hm-sf__secim-k:hover { border-color: #C4CBD2; } .hm-sf__secim-k input { margin-top: 3px; accent-color: var(--c-orange, #FD5722); flex: 0 0 auto; } .hm-sf__secim-k:has(input:checked) { border-color: var(--c-orange, #FD5722); background: #FFF6F3; } .hm-sf__secim-k strong { display: block; font-size: 14px; font-weight: 700; color: var(--c-slate, #253D4E); } .hm-sf__secim-k small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--c-muted, #7A8894); } /* --- fatura tipi sekmesi --- */ .hm-sf__sekme { display: inline-flex; margin-top: var(--s2, 16px); padding: 4px; background: #F2F5F7; border-radius: var(--r-pill, 999px); } .hm-sf__sekme-b { position: relative; cursor: pointer; } .hm-sf__sekme-b input { position: absolute; opacity: 0; width: 0; height: 0; } .hm-sf__sekme-b span { display: block; padding: 9px 22px; border-radius: var(--r-pill, 999px); font-size: 13.5px; font-weight: 700; color: var(--c-muted, #7A8894); transition: background .15s ease, color .15s ease; } .hm-sf__sekme-b input:checked + span { background: #fff; color: var(--c-slate, #253D4E); box-shadow: 0 1px 4px rgba(37, 61, 78, .12); } .hm-sf__sekme-b input:focus-visible + span { outline: 2px solid var(--c-orange, #FD5722); outline-offset: 2px; } /* --- onay kutuları --- */ .hm-sf__onay { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; cursor: pointer; font-size: 13px; line-height: 1.55; } .hm-sf__onay input { margin-top: 2px; accent-color: var(--c-orange, #FD5722); flex: 0 0 auto; } .hm-sf__onay a { color: var(--c-orange, #FD5722); font-weight: 700; text-decoration: underline; } #kayit-sozlesme-kutu[hidden] { display: none; } /* --- gönder --- */ .hm-sepet__gonder { display: grid; gap: 12px; justify-items: stretch; padding: var(--s3, 24px); border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-lg, 16px); background: #FAFBFC; } .hm-sepet__gonderozet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--c-border, #E5E8EB); } .hm-sepet__gonderozet span { font-size: 14px; font-weight: 700; color: var(--c-slate, #253D4E); } .hm-sepet__gonderozet strong{ font-size: 24px; font-weight: 800; color: var(--c-orange, #FD5722); margin-left: auto; } .hm-sepet__gonderozet small { flex: 1 0 100%; font-size: 12px; color: var(--c-muted, #7A8894); text-align: right; } /* ----------------------------------------------------------------------------- 6. BUTONLAR -------------------------------------------------------------------------- */ .hm-sf__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 1.5px solid transparent; border-radius: var(--r-sm, 8px); font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none !important; text-align: center; cursor: pointer; transition: background .16s ease, border-color .16s ease; } .hm-sf__btn--ana { background: var(--c-orange, #FD5722); border-color: var(--c-orange, #FD5722); color: #fff !important; } .hm-sf__btn--ana:hover { background: #E14A17; border-color: #E14A17; } .hm-sf__btn--pas { background: #fff; border-color: var(--c-border, #E5E8EB); color: var(--c-slate, #253D4E) !important; } .hm-sf__btn--pas:hover { border-color: #C4CBD2; } .hm-sf__btn--buyuk { padding: 16px 28px; font-size: 15.5px; } /* ----------------------------------------------------------------------------- 7. UYARI KUTULARI -------------------------------------------------------------------------- */ .hm-sf__uyari { padding: 14px 16px; border: 1px solid; border-radius: var(--r-md, 12px); font-size: 13.5px; line-height: 1.6; } .hm-sf__uyari--hata { background: #FDF1F1; border-color: #F2C9C9; color: #A32E2E; } .hm-sf__uyari--bilgi { background: #F1F6FA; border-color: #CFE0EC; color: #2B4C63; } .hm-sf__uyari--ok { background: #E8F6F1; border-color: #BFE5DB; color: #1F7565; } .hm-sf__uyari p:last-child { margin-bottom: 0; } .hm-sf__uyari-bas { margin: 0 0 8px; font-size: 17px; font-weight: 800; } .hm-sf__uyari-liste { margin: 0 0 10px; padding-left: 20px; } .hm-sf__uyari-liste li { margin-bottom: 5px; } .hm-sf__uyari-not { margin: 10px 0 14px; font-size: 12.5px; opacity: .9; } .hm-sf__uyari-not a { color: inherit; font-weight: 700; text-decoration: underline; } .hm-sepet__kargobilgi { margin-top: var(--s2, 16px); } /* ----------------------------------------------------------------------------- 8. SİPARİŞ TAMAMLAMA EKRANI -------------------------------------------------------------------------- */ .hm-sf__ok { text-align: center; padding: var(--s5, 40px) 0 var(--s3, 24px); } .hm-sf__ok-ik { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: var(--s2, 16px); background: #E8F6F1; border-radius: 50%; } .hm-sf__ok-ik svg { width: 30px; height: 30px; fill: none; stroke: var(--c-wa, #2F9E8B); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .hm-sf__ok-bas { margin: 0 0 8px; font-size: clamp(21px, 3vw, 28px); font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sf__ok-alt { margin: 0; font-size: 15px; color: var(--c-muted, #7A8894); } .hm-sf__ozet { max-width: 520px; margin: 0 auto var(--s4, 32px); } .hm-sf__ozet .hm-sf__ozet-t { background: #fff; } .hm-sf__odeme { max-width: 640px; margin: var(--s3, 24px) auto 0; } .hm-sf__banka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s2, 16px); margin: var(--s3, 24px) 0; } .hm-sf__banka-k { padding: var(--s3, 24px); text-align: center; border: 1px solid var(--c-border, #E5E8EB); border-radius: var(--r-lg, 16px); background: #fff; } .hm-sf__banka-k img { max-width: 150px; height: auto; margin-bottom: 12px; } .hm-sf__banka-k h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sf__banka-a { font-size: 13px; line-height: 1.65; color: var(--c-text, #3A4A56); word-break: break-word; } .hm-sf__uyeol { max-width: 520px; margin: var(--s4, 32px) auto 0; padding: var(--s3, 24px); border: 1.5px dashed var(--c-orange, #FD5722); border-radius: var(--r-lg, 16px); background: #FFF9F7; } .hm-sf__uyeol h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--c-slate, #253D4E); } .hm-sf__uyeol p { margin: 0 0 var(--s2, 16px); font-size: 13px; line-height: 1.6; color: var(--c-text, #3A4A56); } .hm-sf__uyeol-f { display: flex; gap: 8px; flex-wrap: wrap; } .hm-sf__uyeol-f input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--c-border, #E5E8EB); border-radius: var(--r-sm, 8px); font-family: inherit; font-size: 14px; } .hm-sf__uyeol-f input:focus { outline: none; border-color: var(--c-orange, #FD5722); } /* ----------------------------------------------------------------------------- 9. YAZDIRMA -------------------------------------------------------------------------- */ @media print { .hm-sepet__adetkutu, .hm-sepet__sil, .hm-sepet__ilerle, .hm-sepet__kupon, .hm-sf__btn { display: none !important; } } /* ----------------------------------------------------------------------------- 10. TEMA DÜZELTMESİ — radyo, onay kutusu ve adet girişi main.css / theme.css bütün input'lara width:100% ve sabit yükseklik basıyor. Radyo ve checkbox bundan payını alıp dev daireye dönüşüyor, metin kenara sıkışıyor. Tek tek kovalamak yerine tip bazında sıfırlanıyor. -------------------------------------------------------------------------- */ .hm-sf input[type="radio"], .hm-sf input[type="checkbox"]{ flex: 0 0 auto !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; appearance: auto !important; -webkit-appearance: auto !important; accent-color: var(--c-orange, #FD5722); } .hm-sf__secim-k input[type="radio"], .hm-sf__onay input[type="checkbox"]{ margin: 2px 0 0 !important; } .hm-sf__secim-k > span{ flex: 1 1 auto; min-width: 0; } /* Kurumsal / Bireysel sekmesi — radyo tamamen gizli kalmalı */ .hm-sf__sekme-b input[type="radio"]{ position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0 !important; margin: 0 !important; pointer-events: none; } /* Adet girişi de width:100% yiyordu */ .hm-sepet__adetinp{ width: 44px !important; min-width: 44px !important; } .hm-sepet__adetbtn{ width: 34px !important; min-width: 34px !important; flex: 0 0 auto; } /* ============================================================================= BU BLOĞU assets/css/sepet.css DOSYASININ EN SONUNA EKLE. Dosyada başka hiçbir yeri değiştirme. ============================================================================= */ /* ----------------------------------------------------------------------------- 11. UZLAŞTIRMA — hm-sayfa.css ile çakışan sınıflar (28.08.2026) ----------------------------------------------------------------------------- SORUN hm-sayfa.css ve sepet.css aynı `hm-sf__*` adlarını iki farklı anlamda tanımlıyordu. sepet.css sonra yüklendiği için her seferinde o kazanıyor ve hm-sayfa.css'e dayanan sayfaları (giris-yap, kayit-ol, sifremi-unuttum, favorilerim, hesabim) bozuyordu. Bugün sitede görünen sonuçları: - Giriş sayfasındaki "Üye olun" kutusu ÇERÇEVESİZ görünüyor (.hm-sf__secim hm-sayfa'da kart, sepet.css'te düz grid) - hm_uyari() kutularında ikon metnin ALTINA düşüyor (.hm-sf__uyari hm-sayfa'da flex, sepet.css'te blok) - Form kutuları tasarım sisteminden kısa ve köşeli çıkıyor (48px/12px yerine ~40px/8px) - Butonlar sayfadan sayfaya farklı boy ve köşe yarıçapında YÖNTEM Çakışan sınıfları silmek yerine KAPSAMLIYORUZ: sepet.css'in sürümü artık sadece kendi işaretlemesine uyan yapıda devreye giriyor (:has ile), diğer sayfalarda hm-sayfa.css'in sürümü geçerli kalıyor. Böylece test edilmiş sepet ve ödeme akışının işaretlemesine hiç dokunulmuyor. YÜKLENDİKTEN SONRA GÖZDEN GEÇİRİLECEK: sepetim, siparis-tamamla, giris-yap, hesabim. Buton yüksekliği ve form kutusu boyu biraz büyüyecek — theme.css'teki token değerlerine döndüğü için beklenen davranış budur. -------------------------------------------------------------------------- */ /* --- 11.1 SEÇİM KUTUSU ------------------------------------------------------- sepet.css'te .hm-sf__secim = kartların KAPSAYICISI (içinde .hm-sf__secim-k). hm-sayfa.css'te .hm-sf__secim = kartın KENDİSİ. Kapsayıcı davranışı yalnızca gerçekten kart içerdiğinde uygulansın. */ .hm-sf__secim { display: block; gap: 0; margin-top: 0; } .hm-sf__secim:has(> .hm-sf__secim-k) { display: grid; gap: 10px; margin-top: var(--s2, 16px); } /* --- 11.2 BANKA --------------------------------------------------------------- Aynı durum: sepet.css'te kapsayıcı, hm-sayfa.css'te kart. */ .hm-sf__banka:has(> .hm-sf__banka-k) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s2, 16px); margin: var(--s3, 24px) 0; padding: 0; border: 0; background: none; } /* --- 11.3 UYARI KUTUSU -------------------------------------------------------- hm_uyari() ikonlu üretiyor ( +
), st_hata_ekrani() ikonsuz (

+