/* ====================================================================== features/payment-term.css — Ödeme koşulu (K1–K4) sunum stilleri ---------------------------------------------------------------------- Kapsam: 1) Kompakt merdiven — Components/PaymentTermLadder (Simple şablonu) 2) "En avantajlı ödeme" rozeti — ürün görselinin sol üstü 3) Ödeme koşulları sekmesi — özet şeridi + tablo 4) Fark modalı — sepet/OPC sipariş toplamlarının yanındaki düğme 5) Sepet satıcı grupları + satır bazlı fark notu ---------------------------------------------------------------------- features/* dosyaları esbuild tarafından bundle DIŞI tutulur (purge'a girmez) ve NopHtml.AppendCssFileParts ile linklenir (bkz. features/ payment.css deseni). İçerik birden çok ürün şablonunda + sepette + OPC'de render edildiği için tek bir route bundle'ına bağlanamaz — standalone olması bu yüzden zorunlu. ⚠️ Bu dosya Partvendo ve Points temalarında BAYT-AYNI tutulur. Renk, ölçü ve tipografi tamamen --pv-* token'larından gelir: aynı markup Partvendo'da turuncu/yeşil, Points'te mavi/yeşil görünür. Sabit hex yazmak Points'te yanlış marka rengi demektir. Vade farkı yönü için --pv-green (indirim) ve --pv-color-error (ilave) kullanılır. Eskiden var(--pv-success, #1a7f4b) / var(--pv-danger, #b4232a) yazıyordu; o iki token HİÇBİR temada tanımlı değil, yani renk her zaman hardcode fallback'ten geliyordu ve Points'in yeşilini hiç almıyordu. ====================================================================== */ /* ⚠️ KATMAN SIRASI — SİLME. Bu dosya NopHtml.AppendCssFileParts ile eklenir ve o yol dosyayı 'in EN BAŞINA koyar: tema bundle'ından (tokens/_layers.css dahil) önce parse edilir. @layer sırası, isimlerin İLK görüldüğü yere göre belirlenir; aşağıdaki blok ilk kez "features" katmanını açtığı için, bu ifade olmadan features en başa (yani EN ALT önceliğe) kayıt oluyor ve _normalize.css'teki `* { padding: 0 }` (katman: base) buradaki tüm padding/margin/border kurallarını eziyor. Belirti sinsi: renk, font, gap, grid-template uygulanır ama padding hiç uygulanmaz. Aynı koruma features/yq.min.css'in ilk satırında da var. Sıra tokens/_layers.css ile BİREBİR aynı tutulmalı. */ @layer tokens, base, vendor, nop, forms, layout, primitives, components, pages, features, utilities; @layer features { /* ══════════════════════════════════════════════════════════════════════ 1) Kompakt merdiven — sekme yapısı olmayan şablonlar (Simple) ══════════════════════════════════════════════════════════════════════ */ .pv-term-ladder { margin-top: var(--pv-space-4); padding-top: var(--pv-space-3); border-top: 1px solid var(--pv-line); } .pv-term-ladder-rows { list-style: none; margin: var(--pv-space-2) 0 0; padding: 0; display: grid; gap: 2px; } .pv-term-ladder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--pv-space-3); padding: var(--pv-space-2) 0; font-size: var(--pv-text-sm); } .pv-term-ladder-row + .pv-term-ladder-row { border-top: 1px dashed var(--pv-line-2, var(--pv-line)); } /* Katalog fiyatının kendisi — merdivenin çapası, hafif vurgulanır. */ .pv-term-ladder-row--current { font-weight: 600; } .pv-term-ladder-label { color: var(--pv-text); display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .pv-term-ladder-note { display: inline-flex; color: var(--pv-muted); cursor: help; } .pv-term-ladder-price { color: var(--pv-text); text-align: right; white-space: nowrap; } .pv-term-ladder-diff { font-size: var(--pv-text-xs); text-align: right; white-space: nowrap; min-width: 4.5rem; } .pv-term-ladder-diff--down { color: var(--pv-green); } .pv-term-ladder-diff--up { color: var(--pv-color-error); } .pv-term-ladder-diff--none { color: var(--pv-muted); } .pv-term-ladder-footnote { margin: var(--pv-space-2) 0 0; font-size: var(--pv-text-xs); color: var(--pv-muted); line-height: 1.45; } /* AJAX tazeleme sırasında (DOT değişimi) kısa bir soluklaşma — içerik yer değiştirmediği için layout shift üretmez. */ .pv-term-ladder[data-loading="1"] .pv-term-ladder-rows { opacity: .45; transition: opacity .12s var(--pv-ease-out, ease-out); } @media (max-width: 575.98px) { .pv-term-ladder-row { grid-template-columns: minmax(0, 1fr) auto; } /* Mobilde fark sütunu fiyatın altına iner. */ .pv-term-ladder-diff { grid-column: 2; min-width: 0; } } /* ══════════════════════════════════════════════════════════════════════ 2) "En avantajlı ödeme" rozeti — ürün görselinin sol üstü ──────────────────────────────────────────────────────────────────── Tint zemin + ince kenarlık + koyu yeşil metin. Dolu yeşil bir pill, beyaz galeri kabında fazla baskındı ve ürün görselinden dikkat çekiyordu. İkon: yüzde. Önce info ikonu vardı ve bir UYARI işareti gibi okunuyordu; rozet bir fırsat duyurusu. Slot her zaman basılır (AJAX tazelemesinde hedef gerekiyor); içi boşken :empty ile görünmez olur, yer kaplamaz. ══════════════════════════════════════════════════════════════════════ */ .pv-term-badge-slot { position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none; /* galeri tıklamalarını engellemesin */ } .pv-term-badge-slot:empty { display: none; } .pv-term-badge { display: inline-flex; align-items: center; gap: 7px; /* Soldaki padding daha dar: ikon kendi içinde boşluk taşıyor. */ padding: 7px 13px 7px 10px; /* Kenarlık yeşilin şeffaf hâli. color-mix desteklenmezse önceki satırdaki tint kenarlık geçerli kalır (görünür ama silik) — shorthand'i tek satırda color-mix ile yazmak, desteklenmediğinde kenarlığı tamamen düşürürdü. */ border: 1px solid var(--pv-green-tint); border-color: color-mix(in srgb, var(--pv-green) 22%, transparent); border-radius: var(--r-pill, 999px); background: var(--pv-green-tint); color: var(--pv-green); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); } .pv-term-badge svg { flex: none; } @media (max-width: 575.98px) { .pv-term-badge-slot { top: 10px; left: 10px; } .pv-term-badge { font-size: 11px; padding: 6px 11px 6px 9px; gap: 6px; } } /* ══════════════════════════════════════════════════════════════════════ 3) Ödeme koşulları SEKMESİ — özet şeridi + tablo ──────────────────────────────────────────────────────────────────── Özet şeridi tablonun üstünde iki kart: müşteriye en çok kazandıran koşul ve rafta gördüğü liste fiyatı. Tabloyu okumadan "en iyi ne, şu an ne" sorusunu cevaplar. Tablonun görsel dili "Özellikler" sekmesindekiyle aynı: dış kenarlık + radius + satır ayraçları. Sütun genişlikleri SABİT (auto değil) — auto'da yöntem sütunu tüm alanı yiyip fiyat/fark/oran sağ kenara yapışıyordu. ══════════════════════════════════════════════════════════════════════ */ /* ── Özet şeridi ────────────────────────────────────────────────────── */ .pv-term-sum { display: grid; /* auto-fit: tek kart kaldığında (indirimli koşul yoksa) yarım kart görünmesin, satırı doldursun. */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; } .pv-term-sum-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--pv-line); border-radius: 14px; background: var(--pv-cream); } .pv-term-sum-card--best { border-color: color-mix(in srgb, var(--pv-green) 22%, transparent); background: var(--pv-green-tint); } .pv-term-sum-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pv-cream-2); color: var(--pv-muted); flex: none; } .pv-term-sum-card--best .pv-term-sum-ico { background: var(--pv-green); color: var(--pv-color-white, #fff); } .pv-term-sum-text { min-width: 0; } .pv-term-sum-eyebrow { display: block; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted-2); } .pv-term-sum-card--best .pv-term-sum-eyebrow { color: var(--pv-green); } .pv-term-sum-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 3px; } .pv-term-sum-price { font-size: 17px; font-weight: 700; color: var(--pv-text); font-variant-numeric: tabular-nums; } .pv-term-sum-note { font-size: 12.5px; color: var(--pv-muted); } .pv-term-sum-card--best .pv-term-sum-note { color: var(--pv-green); font-weight: 600; } /* ── Tablo ──────────────────────────────────────────────────────────── */ .pv-term-table { border: 1px solid var(--pv-line); border-radius: 14px; overflow: hidden; } .pv-term-table-grid { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 7rem 7.5rem; align-items: center; gap: 16px; padding: 14px 20px; font-size: 14px; } .pv-term-table-head { padding: 11px 20px; border-bottom: 1px solid var(--pv-line); background: var(--pv-cream); font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted-2); } /* İlk sütun dışındaki her hücre sağa dayalı — hem başlıkta hem satırlarda. ⚠️ Bu iş view'daki .pv-u-right sınıfıyla yapılıyordu ama o sınıf HİÇBİR temada tanımlı değil (aynı şekilde global bir .mono da yok), yani sayı sütunları sola dayalı ve gövde fontuyla basılıyordu. Hizalama artık burada, grid'in kendi yapısından. */ .pv-term-table-grid > :not(:first-child) { text-align: right; } .pv-term-table-row + .pv-term-table-row { border-top: 1px solid var(--pv-line-2, var(--pv-line)); } /* Müşteriye en çok kazandıran satır. Soldaki şerit inset box-shadow ile: border-left kullanılsaydı satır içeriği 3px kayar ve diğer satırlarla hizası bozulurdu. */ .pv-term-table-row.is-best { background: var(--pv-green-tint); box-shadow: inset 3px 0 0 var(--pv-green); } /* Katalog fiyatının kendisi — tedarikçinin fiyat verdiği kaynak koşul. */ .pv-term-table-row.is-current { background: rgb(0 0 0 / .022); } .pv-term-table-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--pv-text); } /* .d-badge--success tint zemin veriyor; "en avantajlı" pill'i mockup'ta DOLU yeşil. Tipografi (mono/700/uppercase/letter-spacing/radius) ve ölçü .d-badge'den geliyor, burada yalnız iki renk eziliyor. */ .pv-term-pill-best { background: var(--pv-green); color: var(--pv-color-white, #fff); } .pv-term-table-price { color: var(--pv-text); font-family: var(--f-mono); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-term-table-diff, .pv-term-table-rate { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-term-table-diff--down, .pv-term-table-rate--down { color: var(--pv-green); } .pv-term-table-diff--up, .pv-term-table-rate--up { color: var(--pv-color-error); } .pv-term-table-diff--none, .pv-term-table-rate--none { color: var(--pv-muted-2); } .pv-term-table-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 20px; border-top: 1px solid var(--pv-line); background: var(--pv-cream); font-size: 13px; color: var(--pv-text); line-height: 1.55; } .pv-term-table-note svg { flex: none; margin-top: 3px; color: var(--pv-muted-2); } .pv-term-table-footnote { margin: 12px 2px 0; font-size: 12px; color: var(--pv-muted); line-height: 1.5; } /* DOT değişimindeki AJAX tazelemesi — bkz. merdivendeki aynı desen. Hedef partial'ın KÖKÜ ([data-payment-term-table]); özet şeridi de tazeleniyor, o yüzden soluklaşma tabloyla birlikte onu da kapsar. */ [data-payment-term-table][data-loading="1"] .pv-term-sum, [data-payment-term-table][data-loading="1"] .pv-term-table-row { opacity: .45; transition: opacity .12s var(--pv-ease-out, ease-out); } @media (max-width: 767.98px) { /* Dar ekranda "Oran" sütunu düşer — fark tutarı aynı bilgiyi taşıyor. */ .pv-term-table-grid { grid-template-columns: minmax(0, 1fr) 7rem 6.5rem; gap: 10px; padding: 12px 14px; } .pv-term-table-head { padding: 10px 14px; } .pv-term-table-grid > :nth-child(4) { display: none; } .pv-term-table-note { padding: 12px 14px; } } @media (max-width: 479.98px) { /* Çok dar ekranda yalnız yöntem + fiyat kalır. */ .pv-term-table-grid { grid-template-columns: minmax(0, 1fr) auto; } .pv-term-table-grid > :nth-child(3) { display: none; } .pv-term-sum { grid-template-columns: minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════════ 4) Fark MODALI — sepet/OPC toplamlarının yanındaki düğme ──────────────────────────────────────────────────────────────────── Kabuk base .d-dialog (components/dialog.css, core bundle). Buradaki kurallar yalnız içeriğe ve panelin ölçüsüne ait. ⚠️ Önce hover ile açılan bir kutucuktu ve position:FIXED + JS konumlandırma gerektiriyordu; sebebi absolute denendiğinde sipariş özeti kartının overflow'unun paneli KIRPMASIYDI. .d-dialog zaten fixed + inset:0 olduğu için o hata yapısal olarak imkânsız ve konumlandırma kodu tamamen kalktı. Absolute konumlu bir panele geri dönülürse aynı kırpma geri gelir. ══════════════════════════════════════════════════════════════════════ */ /* ── Tetikleyici (Genel Toplam satırının yanında) ───────────────────── */ .pv-term-pop { display: inline-flex; vertical-align: middle; margin-left: 6px; } .pv-term-pop-trigger { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-pill, 999px); background: var(--pv-cream-2); color: var(--pv-muted); cursor: pointer; transition: color .12s var(--pv-ease-out, ease-out), background-color .12s var(--pv-ease-out, ease-out); } .pv-term-pop-trigger:hover, .pv-term-pop-trigger:focus-visible { background: var(--pv-orange-tint); color: var(--pv-orange-700, var(--pv-orange)); } /* ── Panel ──────────────────────────────────────────────────────────── */ /* --md 520px; üç sütunlu tablo için 460 yeterli ve daha derli toplu. --sm (400px) toplam sütununu sıkıştırıyordu. */ .pv-term-dialog .d-dialog__panel { max-width: 460px; } .pv-term-dialog .d-dialog__body { padding: 14px 18px 18px; } .pv-term-fee-grid { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(5.25rem, auto) minmax(5.75rem, auto); align-items: center; gap: 12px; } /* Tabloda olduğu gibi: ilk sütun dışındaki hücreler sağa dayalı. */ .pv-term-fee-grid > :not(:first-child) { text-align: right; } /* Sepet toplamı belirlenemediğinde (kargo bilinmiyor) toplam sütunu hiç basılmaz — grid de iki sütuna iner. */ .pv-term-fee--no-total .pv-term-fee-grid { grid-template-columns: minmax(120px, 1fr) minmax(5.25rem, auto); } .pv-term-fee-head { padding: 0 12px 8px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted-2); } .pv-term-fee-row { padding: 11px 12px; border-radius: 12px; } .pv-term-fee-row.is-best { background: var(--pv-green-tint); box-shadow: inset 3px 0 0 var(--pv-green); } .pv-term-fee-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 14px; color: var(--pv-text); } .pv-term-fee-rate { font-size: 11px; color: var(--pv-muted); } .pv-term-fee-fee { font-family: var(--f-mono); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-term-fee-fee--down { color: var(--pv-green); } .pv-term-fee-fee--up { color: var(--pv-color-error); } .pv-term-fee-total { font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--pv-text); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Not şeridi — .d-dialog__footer sağa hizalı AKSİYON alanı olduğu için kullanılmadı (justify-content + background'ı ezmek gerekirdi). */ .pv-term-fee-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--pv-line); background: var(--pv-cream); font-size: 12px; color: var(--pv-muted); line-height: 1.55; } .pv-term-fee-note svg { flex: none; margin-top: 2px; color: var(--pv-muted-2); } @media (max-width: 479.98px) { .pv-term-fee-grid { gap: 8px; } .pv-term-fee-row { padding: 10px; } .pv-term-dialog .d-dialog__body { padding: 12px 14px 14px; } .pv-term-fee-note { padding: 12px 14px; } } /* ══════════════════════════════════════════════════════════════════════ 5) Sepet: satıcı grupları + satır bazlı vade farkı notu ══════════════════════════════════════════════════════════════════════ */ .pv-cart-vendor-group + .pv-cart-vendor-group { margin-top: 20px; } .pv-cart-vendor-head { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--pv-text); } .pv-cart-vendor-head:first-child { margin-top: 0; } .pv-cart-vendor-head-count { font-weight: 400; font-size: 12px; color: var(--pv-muted); } /* Satır bazlı fark — YALNIZ sepette birden fazla oran seti varken basılır. */ .pv-cart-line-term { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--pv-muted); } .pv-cart-line-term-item { white-space: nowrap; } .pv-cart-line-term-fee--down { color: var(--pv-green); font-weight: 600; } .pv-cart-line-term-fee--up { color: var(--pv-color-error); font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════ 6) Sipariş tamamlandı — vade farkı özeti ──────────────────────────────────────────────────────────────────── O sayfada başka hiçbir tutar yok; fark tek başına neyin üzerinden olduğu belirsiz kaldığı için genel toplam da aynı kutuda. ══════════════════════════════════════════════════════════════════════ */ .pv-term-order-fee { max-width: 26rem; margin: 18px auto 0; padding: 4px 16px; border: 1px solid var(--pv-line); border-radius: 14px; background: var(--pv-cream); text-align: left; } .pv-term-order-fee-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13px; } .pv-term-order-fee-row + .pv-term-order-fee-row { border-top: 1px solid var(--pv-line-2, var(--pv-line)); } .pv-term-order-fee-label { color: var(--pv-muted); } .pv-term-order-fee-value { color: var(--pv-text); font-weight: 600; white-space: nowrap; } /* Mono yalnız tutarlarda — ödeme yöntemi adı metin. */ .pv-term-order-fee-fee--down, .pv-term-order-fee-fee--up, .pv-term-order-fee-total { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .pv-term-order-fee-fee--down { color: var(--pv-green); } .pv-term-order-fee-fee--up { color: var(--pv-color-error); } .pv-term-order-fee-row--total .pv-term-order-fee-value { font-size: 15px; } /* ── Sipariş detayı: ürün satırındaki vade farkı metriği ───────────── Kap ve etiket stilini satırın kendi .pv-order-product-metric'inden alır; burada yalnız tutarın rengi/fontu tanımlanır. */ .pv-term-line-fee { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .pv-term-line-fee--down { color: var(--pv-green); } .pv-term-line-fee--up { color: var(--pv-color-error); } }