/* =====================================================================
   VV TABLO — TİCARET YÜZEYİ (30 Ağu 2026)

   Kullanıcı: "webde sepet kısmı tasarımı berbat ötesi onu düzelt,
   premium olsun" · "logo yok hiç bir şey yok".

   NEDEN AYRI DOSYA: assets/commerce.css BEŞ sayfada ortak
   (sepet, odeme, siparis-sorgula, siparis-tamam, hesabim/siparis-detayi).
   O dosyaya tek satır dokunulmadı; bu dosya yalnız DÖRT sayfaya
   bağlanıyor ve commerce.css'ten SONRA yükleniyor.

   NEDEN DÖRT SAYFA, YALNIZ SEPET DEĞİL: sepet ile ödeme aynı akışın
   iki adımı ve BİREBİR aynı işaretlemeyi kullanıyor (.vv-commerce-header,
   .vv-eyebrow, .vv-title, aside.vv-panel.vv-summary). Yalnız sepeti
   güzelleştirmek, müşteriyi "Ödemeye Geç"e bastığı anda — yani kart
   bilgisi girmeden hemen önce — görünür biçimde daha eski duran bir
   sayfaya düşürürdü. Aynı hata 28 Ağu'da odeme/index.html:9-13'te
   yazı tipi için tespit edilip kapatılmıştı; burada tekrarlanmıyor.

   İKİ KAPSAM SINIFI:
     .vv-ticaret  → dört sayfanın <body>'sinde. Kimlik katmanı:
                    tipografi, yüzey, yarıçap, düğme, odak, başlık.
                    Hiçbir kuralı DÜZEN değiştirmiyor.
     .vv-sepet    → yalnız sepet/index.html. Sepete özgü düzen:
                    kart ızgarası, adet, özet karar bloğu, boş sepet,
                    iskelet, kaydırarak silme.

   hesabim/siparis-detayi.html bu dosyayı YÜKLEMİYOR ve gövdesinde
   .vv-ticaret YOK → tek pikseli değişmiyor.
   ===================================================================== */

/* =====================================================================
   BÖLÜM 1 — JETONLAR (yalnız .vv-ticaret gövdesinde yaşar)
   :root KİRLETİLMİYOR: jetonlar body.vv-ticaret üzerinde tanımlı,
   böylece siparis-detayi.html'e miras kalmıyor.
   ===================================================================== */
body.vv-ticaret {
  /* Boşluk merdiveni — 4'ün katları. commerce.css'te 22 ayrı dolgu
     biçimi, 10 ayrı gap değeri vardı (ölçülen kusur 14). Bu dosyadaki
     her dolgu/gap yalnız bu dokuz basamaktan seçilir. */
  --tk-1: 4px;  --tk-2: 8px;  --tk-3: 12px; --tk-4: 16px; --tk-5: 20px;
  --tk-6: 24px; --tk-7: 32px; --tk-8: 40px; --tk-9: 56px;

  /* Yarıçap — hesabim/assets/account.css:66-68'de "kanonik" diye
     ilan edilen ölçeğin birebir aynısı. Yeni bir dil icat edilmedi. */
  --tk-r-kart: 14px;
  --tk-r-ic: 8px;
  --tk-r-btn: 10px;

  /* Geçiş eğrisi. commerce.css bu değişkeni HİÇ tanımlamamış, tüm
     geçişleri düz `ease` ile yazmıştı; sitenin geri kalanı
     (account.css:53, artwork-page.css:16, collection-page.css,
     index.html) istisnasız bu eğriyi kullanıyor. */
  --tk-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Gölge: GEOMETRİ account.css:69-70'ten (6/18/.06 ve 10/28/.10),
     RENK AİLESİ commerce lacivertinden rgba(8,17,29). account.css'in
     rgba(7,30,26) yeşilimsi tonu bilinçli olarak taşınmadı —
     mobil uygulamanın yeşil-altın kimliği web'e geçmez. */
  --tk-golge-sakin: 0 6px 18px rgba(8, 17, 29, .06);
  --tk-golge-kalkik: 0 10px 28px rgba(8, 17, 29, .10);

  /* Çizgi: account.css:47'nin --line değeri. YENİ HEX DEĞİL. */
  --tk-cizgi: #dedad1;

  /* Eser matı — kart içi küçük görselin zemini. commerce.css'in
     .vv-cart-media zemini #e8e3da idi; bir ton sıcaklaştırıldı. */
  --tk-mat: #efe9e0;

  /* Devre dışı düğme: opacity:.47 → zemin #878a8d, yazı 3,33 kontrast
     (AA altı, sayfanın açılışta gösterdiği İLK şey okunmayan bir
     düğmeydi). Zemin --vv-line, yazı --vv-muted: 7,06:1. Yeni hex yok. */

  /* Gövde tipografisi: commerce.css 400/15px/1.55 konuşuyor; site
     geneli (index.html, collection-page.css, artwork-page.css,
     account.css) istisnasız 300/16px/1.6. `body` ELEMAN seçicisine
     dokunulmuyor — sınıfla eziliyor ki siparis-detayi.html'in
     tabanı korunsun. */
  font-size: 16px; font-weight: 300; line-height: 1.6;
}

/* =====================================================================
   BÖLÜM 1.5 — [hidden] HER ZAMAN KAZANIR (dört sayfa)

   ÖLÇÜLDÜ, ticaret.css devre dışı bırakılarak DOĞRULANDI: bu hata
   ticaret.css’ten ÖNCE de vardı, yeni değil.

   commerce.css:112 `.vv-field{display:grid}` ve `.vv-fields{
   display:grid}` — tarayıcının `[hidden]{display:none}` varsayılanı
   bir SINIF kadar zayıf olduğu için bu kurallar onu eziyor.

   SONUÇ (odeme/index.html): checkout.js YEDİ yerde `hidden`
   niteliğiyle alan gizliyor —
     :46  billingFields.hidden = !separate      (ayrı fatura adresi)
     :50  wrapper.hidden = !corporate           (kurumsal sarmal)
     :65  field.closest(.vv-field).hidden       (şirket ünvanı,
                                                 vergi dairesi,
                                                 vergi numarası)
     :104 guestFields.hidden = false            (misafir alanları)
   — ve HİÇBİRİ gizlenmiyordu. "Bireysel" fatura seçen müşteri
   kurumsal alanları görmeye devam ediyordu.

   Aynı tuzak 30 Ağu’da hesap bölümünde de bulunmuştu (beş yer);
   orada account.css’e aynı kural konmuştu.

   !important ŞART: kaynak sırası yetmez, `.vv-field` (0,1,0) ile
   `[hidden]` (0,1,0) eşit özgüllükte ve commerce.css bu dosyadan
   ÖNCE yüklense de aradaki fark tek bir kural değil.
   `.vv-ticaret [hidden]` (0,2,0) zaten kazanırdı; !important,
   ileride commerce.css’e eklenecek bir kuralın da bunu bozmasını
   engelliyor.

   KAPSAM: yalnız .vv-ticaret gövdesinde. hesabim/siparis-detayi.html
   ve ana sayfa etkilenmiyor.
   ===================================================================== */
.vv-ticaret [hidden] { display: none !important; }

/* =====================================================================
   BÖLÜM 2 — ODAK HALKASI (dört sayfa)
   commerce.css:89-90: 3px %60 saydam bronz. Sıcak beyaz üstünde
   kontrast 1,59 — grafik nesne için gereken 3,0'ın çok altında,
   yani odak halkası pratikte GÖRÜNMÜYORDU.

   Site kanonu (index.html:836) 2px düz --bronze kullanıyor, ama
   ölçtüm: #B7A17E / #f7f5f1 = 2,29:1 — o da geçmiyor. Bronz
   ÜÇÜNCÜ bir tona kaydırılmadı (üç öneri de bunu yapıp dördüncü
   bir bronz icat ediyordu); halka mürekkebe alındı: 17,5:1.
   Bronz, DEKORATİF vurgu olarak eyebrow çizgisinde ve panel
   saç telinde kalıyor.
   ===================================================================== */
.vv-ticaret a:focus-visible,
.vv-ticaret button:focus-visible,
.vv-ticaret input:focus-visible,
.vv-ticaret select:focus-visible,
.vv-ticaret textarea:focus-visible,
.vv-ticaret .vv-btn:focus-visible {
  outline: 2px solid var(--vv-ink);
  outline-offset: 2px;
  border-radius: 2px;
}
.vv-ticaret .vv-skip {
  left: var(--tk-4); padding: var(--tk-3) var(--tk-4);
  border: 1px solid var(--tk-cizgi); border-radius: var(--tk-r-btn);
  box-shadow: var(--tk-golge-kalkik);
  font-size: 12px; letter-spacing: .06em; text-decoration: none;
}

/* =====================================================================
   BÖLÜM 3 — BAŞLIK (dört sayfa)

   ÖLÇÜLEN KUSUR (a): .vv-back / .vv-account süslenmemiş satır-içi
   <a>; 12px × 1,55 = 18,6px yükseklik — WCAG 2.5.8'in 24px
   asgarisinin bile altında. Ayrıca commerce.css'te text-decoration
   hiç yazılmadığı için ikisi de TARAYICI VARSAYILANIYLA ALTI ÇİZİLİ.
   759px altında font-size:0 metni siliyor ve ::after ile ikinci bir
   ok basıyor → müşteri çıplak, altı çizili bir "←" görüyor.

   ÖLÇÜLDÜ: 320px'te başlık 1fr auto 1fr; logo 33px yükseklik ×
   (720/396) = 60px genişlik, yan dolgu 2×12px → her yan sütuna
   (320−24−60)/2 = 118px. En uzun geri metni "← Koleksiyonlar"
   11px/.04em Inter'de ≈ 99px + 8px dolgu = 107px. Sığıyor;
   numaraya hiç gerek yoktu. 360px altında 10,5px'e iniyor.

   ÖLÇÜLEN KUSUR (b) — LOGO: commerce.css:60 zaten
   `height:42px; filter:brightness(0)` ve :169 mobilde 33px.
   Bu, site standardıyla birebir aynı (collection-page.css,
   artwork-page.css, account.css:99). LOGOYA DOKUNULMUYOR.
   ===================================================================== */
.vv-ticaret .vv-commerce-header { padding: 0 var(--tk-6); }
.vv-ticaret .vv-commerce-header a { text-decoration: none; }
.vv-ticaret .vv-commerce-header .vv-back,
.vv-ticaret .vv-commerce-header .vv-account {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--tk-2);
  font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  color: var(--vv-muted);
  transition: color .3s var(--tk-ease);
}
.vv-ticaret .vv-commerce-header .vv-back { justify-self: start; margin-left: calc(-1 * var(--tk-2)); }
.vv-ticaret .vv-commerce-header .vv-account { justify-self: end; margin-right: calc(-1 * var(--tk-2)); }
.vv-ticaret .vv-commerce-header .vv-back:hover,
.vv-ticaret .vv-commerce-header .vv-account:hover { color: var(--vv-ink); }

@media (max-width: 767.98px) {
  .vv-ticaret .vv-commerce-header { padding: 0 var(--tk-3); }
  /* commerce.css:170-172'nin font-size:0 + ::after numarası iptal.
     Özgüllük: bizim (0,3,0) > commerce'in (0,2,0). */
  .vv-ticaret .vv-commerce-header .vv-back,
  .vv-ticaret .vv-commerce-header .vv-account { font-size: 11px; letter-spacing: .04em; }
  .vv-ticaret .vv-commerce-header .vv-back::after,
  .vv-ticaret .vv-commerce-header .vv-account::after { content: none; }
}
@media (max-width: 359px) {
  .vv-ticaret .vv-commerce-header .vv-back,
  .vv-ticaret .vv-commerce-header .vv-account { font-size: 10.5px; letter-spacing: .02em; }
}

/* =====================================================================
   BÖLÜM 4 — SAYFA GÖVDESİ VE BAŞLIK BLOĞU (dört sayfa)
   ===================================================================== */
.vv-ticaret .vv-commerce-main {
  /* Yan boşluk 16/12px'ti — sitedeki en dar değer. Site kanonu
     .wrap: 24px (mobil) / 40px (≥768). */
  width: min(1180px, calc(100% - 48px));
  padding: var(--tk-9) 0 96px;
}
@media (min-width: 768px) {
  .vv-ticaret .vv-commerce-main { width: min(1180px, calc(100% - 80px)); }
}
@media (max-width: 767.98px) {
  .vv-ticaret .vv-commerce-main {
    width: min(100% - var(--tk-8), 620px);
    padding: var(--tk-7) 0 var(--tk-9);
  }
}

/* Eyebrow: #8c744f / #f7f5f1 = 4,08:1, 10px 600 için AA altı.
   DÖRDÜNCÜ bir bronz icat etmek yerine metin --vv-muted'a (8,23:1)
   alınıyor; bronz vurgu, yanına konan 18px'lik kanonik
   --vv-bronze saç teliyle GÖRÜNÜR kalıyor (index.html .hserit-ust
   ve artwork-page .vv-eyebrow kalıbı). */
.vv-ticaret .vv-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  color: var(--vv-muted);
}
.vv-ticaret .vv-eyebrow::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 1px;
  background: var(--vv-bronze);
}

/* 72px, sitede YALNIZ tam ekran KOYU hero'lara ait bir ölçek.
   Açık zeminde sitenin maksimumu artwork-page.css .vv-title: 46px. */
.vv-ticaret .vv-title {
  margin: 10px 0 var(--tk-3);
  font: 300 clamp(2.15rem, 4.6vw, 2.875rem)/1.06 Fraunces, Georgia, serif;
  letter-spacing: -.02em;
}
.vv-ticaret .vv-lead { max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--vv-muted); }
.vv-ticaret .vv-commerce-grid { margin-top: var(--tk-7); gap: clamp(24px, 3vw, 36px); }

/* =====================================================================
   BÖLÜM 5 — YÜZEYLER: PANEL, KART, FORM (dört sayfa)
   ÖLÇÜLEN KUSUR 1: .vv-panel zemini rgba(255,253,249,.88) → gerçek
   renk #fefcf8, sayfa zemini #f7f5f1 ile kontrast 1,063:1; gölge
   %4,5 alfa. Panel bir kart gibi değil, sayfaya serpilmiş metin
   gibi duruyordu. "Berbat" hissinin en büyük tek kaynağı bu.

   ÖLÇÜLEN KUSUR 13: dosyadaki tüm ana yüzeyler 0 yarıçaplı; site
   14/8/10'a göçmüş (account.css:66-68, index.html ×6,
   collection-page.css:360, hesap-mobil.css:265).
   ===================================================================== */
.vv-ticaret .vv-panel {
  background: var(--vv-paper);
  border-color: var(--tk-cizgi);
  border-radius: var(--tk-r-kart);
  box-shadow: var(--tk-golge-kalkik);
}
.vv-ticaret .vv-panel-inner { padding: clamp(22px, 3vw, 30px); }
/* .vv-section-title BU KURALDAN AYRI TUTULDU: commerce.css:73 iki
   seçiciyi tek kuralda topluyor, ama .vv-section-title sepette YOK
   ve siparis-detayi.html'de yaşıyor (o sayfa bu dosyayı yüklemiyor). */
.vv-ticaret .vv-summary h2 {
  margin: 0 0 var(--tk-2);
  font: 300 1.35rem/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em;
}
.vv-ticaret .vv-summary h2::after {
  content: ''; display: block; width: 30px; height: 1px;
  margin: var(--tk-4) 0 var(--tk-5); background: var(--vv-bronze);
}
.vv-ticaret .vv-summary-row { padding: 10px 0; font-size: 13.5px; align-items: baseline; }
.vv-ticaret .vv-summary-row strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.vv-ticaret .vv-summary-total {
  margin-top: var(--tk-3); padding-top: var(--tk-5);
  border-top-color: var(--tk-cizgi); font-size: 14px;
}
/* commerce.css:77 `font:` KISAYOLU font-variant-numeric'i normal'e
   resetliyordu; depoda 16 yerde tabular-nums var, site kuralı bu.
   Adet değişince tutar sütunu zıplamasın diye geri yazılıyor. */
.vv-ticaret .vv-summary-total strong {
  font: 400 clamp(1.5rem, 2.2vw, 1.75rem)/1 Fraunces, Georgia, serif;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Form yüzeyleri — YALNIZ köşe. Düzen, dolgu ve renk aynen kalıyor;
   ödeme akışının davranışına dokunulmuyor. */
.vv-ticaret .vv-form-section,
.vv-ticaret .vv-choice,
.vv-ticaret .vv-error-summary,
.vv-ticaret .vv-success-card { border-radius: var(--tk-r-kart); }
.vv-ticaret .vv-steps { border-radius: var(--tk-r-kart); overflow: hidden; }
.vv-ticaret .vv-field input,
.vv-ticaret .vv-field select,
.vv-ticaret .vv-field textarea { border-radius: var(--tk-r-ic); }
.vv-ticaret .vv-legal-dialog { border-radius: var(--tk-r-kart); }
/* 9px punto (ölçülen kusur 15) */
.vv-ticaret .vv-detail-grid small { font-size: 10px; }

/* ÖLÇÜLEN KUSUR 12 — iki ayrı hata dili: .vv-alert sol 3px vurgulu,
   .vv-error-summary tam çerçeveli. Tek deyime çekiliyor:
   sol 3px vurgu + tonlu zemin + 8px yarıçap. Yeni hex kullanılmadı. */
.vv-ticaret .vv-alert { border-radius: var(--tk-r-ic); }
.vv-ticaret .vv-error-summary {
  border-left: 3px solid var(--vv-danger); border-radius: var(--tk-r-ic);
}

/* =====================================================================
   BÖLÜM 6 — DÜĞMELER (dört sayfa)

   ÖLÇÜLEN KUSUR 2. Üç şey birden:
   (i) etiket 11px/.075em üçüncü bir değerdi (account .btn 13px/.06em,
       artwork .vv-cta 14px/.06em) → 13px/.06em;
   (ii) devre dışı opacity:.47 → 3,33 kontrast → opak yüzey, 7,06:1;
   (iii) hover'ın tek efekti translateY(-1px)'ti.

   *** KRİTİK TASARIM KARARI — HOVER'DA ZEMİN RENGİ DEĞİŞTİRİLMİYOR ***
   Üç önerinin ÜÇÜ de `.vv-btn:hover { background: #0d1c2e }` yazıyordu.
   O kural (0,3,0) özgüllükle commerce.css:86'nın
   `.vv-btn-secondary { background:transparent; color:var(--vv-navy) }`
   (0,1,0) kuralının zeminini eziyor ama RENGİ ezmiyor → lacivert
   zemin üstünde lacivert yazı, kontrast ~1,06: düğme METNİ HOVER'DA
   KAYBOLUYOR. Bu, cart.js:243'ün ürettiği "Yeni fiyatları kabul et"
   düğmesi — cart.js:237'ye göre uyarı varken "Ödemeye Geç" DEVRE DIŞI,
   yani müşterinin sepetten çıkmak için basmak ZORUNDA olduğu tek
   düğme. Aynı hata odeme/index.html:109'daki "Yazdır" düğmesini de
   vururdu.

   ÇÖZÜM: birincil düğmeye hover zemini HİÇ yazılmıyor (kalkma +
   gölge yeterli geri bildirim), ikincil düğme hover'da lacivert
   DOLUYOR ve metni beyaza dönüyor. Sorun yapısal olarak imkânsız.
   ===================================================================== */
.vv-ticaret .vv-btn {
  border-radius: var(--tk-r-btn);
  font-size: 13px; letter-spacing: .06em;
  transition: transform .25s var(--tk-ease), box-shadow .25s var(--tk-ease),
              background-color .25s var(--tk-ease), color .25s var(--tk-ease);
}
.vv-ticaret .vv-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(8, 17, 29, .20);
}
.vv-ticaret .vv-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.vv-ticaret .vv-btn:disabled {
  opacity: 1;
  background: var(--vv-line); border-color: var(--vv-line); color: var(--vv-muted);
  box-shadow: none; transform: none;
}
/* İkincil düğme hover'da dolar — kontrast 15,9:1. */
.vv-ticaret .vv-btn-secondary:hover:not(:disabled) {
  background: var(--vv-navy); color: #fff;
}
/* Metin düğmesi (Kaldır) .vv-btn sınıfını da taşıyor; zıplamamalı. */
.vv-ticaret .vv-btn-text { border-radius: var(--tk-r-btn); }
.vv-ticaret .vv-btn-text:hover { transform: none; box-shadow: none; }

/* =====================================================================
   BÖLÜM 7 — SEPETE ÖZGÜ (yalnız .vv-sepet)
   Buradan aşağısı sepet/index.html dışında HİÇBİR yerde uygulanmaz.
   ===================================================================== */

/* ---- 7.1 SAYFA ÜSTÜ UYARI (#cartAlert) ---------------------------
   TUZAK: cart.js:37 announce() alert.className'i TAMAMEN yeniden
   yazıyor → HTML'e eklenecek her tasarım sınıfı ilk mesajda silinir.
   Bu yüzden stil KİMLİĞE veriliyor.

   İKİNCİ TUZAK — ÖNERİLERİN ÜÇÜ DE DÜŞMÜŞTÜ: #cartAlert'e
   `display:flex` yazmak (1,0,0) tarayıcının [hidden] kuralını (0,1,0)
   ezer ve boş uyarı kutusu HER sayfada görünür kalır. Burada
   display'e HİÇ dokunulmuyor; "Yeni fiyatları kabul et" düğmesi
   satır-içi öge olarak hizalanıyor. [hidden] hiç riske girmiyor.  */
.vv-sepet #cartAlert {
  margin: var(--tk-6) 0 0; padding: var(--tk-4) var(--tk-5);
  font-size: 13.5px; line-height: 1.5;
}
/* ÖLÇÜLEN KUSUR 10: .vv-btn width:100% olduğu için kabul düğmesi
   masaüstünde 1180px eninde bir blok oluyordu. */
.vv-sepet #cartAlert .vv-btn {
  display: inline-flex; width: auto; vertical-align: middle;
  min-height: 44px; margin-top: 10px; padding: 0 var(--tk-5);
  font-size: 12px;
}

/* ---- 7.2 IZGARA --------------------------------------------------
   TEK KIRILIM NOKTASI: 768 / 767.98. commerce.css dört ayrı değer
   kullanıyor (768 / 760 / 759) ve alt-menu.js 767.98; 760–767,98
   arasında iki sütunlu masaüstü düzeni ile sabit mobil alt menü
   AYNI ANDA görünüyordu (ölçülen kusur 4). Bizim kurallarımız
   (0,2,0) commerce'in (0,1,0) kurallarını medya sorgusundan
   bağımsız eziyor. */
@media (min-width: 768px) {
  .vv-sepet .vv-commerce-grid {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 360px);
  }
  .vv-sepet .vv-summary { position: sticky; top: 100px; }  /* 76px başlık + 24px */
}
@media (max-width: 767.98px) {
  .vv-sepet .vv-commerce-grid { grid-template-columns: minmax(0, 1fr); gap: var(--tk-5); margin-top: var(--tk-6); }
  .vv-sepet .vv-summary { position: static; }
}

/* ---- 7.3 KALEM KARTI ---------------------------------------------
   GÖLGE SARMALDA DA VAR: cart.js:173 kaydırarak-silme sarmalına
   overflow:hidden veriyor; karta konan gölge kırpılırdı. Sarmal
   YALNIZ dokunmatikte kuruluyor (cart.js:167-168, DOKUNMATIK
   sabiti), bu yüzden iki seçici de gerekli — masaüstünde kart
   listenin doğrudan çocuğu, dokunmatikte sarmalın çocuğu. */
.vv-sepet .vv-cart-list { gap: var(--tk-5); }
.vv-sepet .vv-swipe-sarmal,
.vv-sepet .vv-cart-list > .vv-cart-item {
  border-radius: var(--tk-r-kart);
  box-shadow: var(--tk-golge-sakin);
  transition: box-shadow .3s var(--tk-ease);
}
.vv-sepet .vv-cart-item {
  align-items: start;
  grid-template-columns: clamp(88px, 11vw, 140px) minmax(0, 1fr);
  gap: clamp(14px, 1.7vw, 22px);
  padding: clamp(16px, 1.7vw, 22px);
  border-color: var(--tk-cizgi);
  border-radius: var(--tk-r-kart);
  background: var(--vv-paper);   /* OPAK KALMALI — kaydırma tepsisi buna dayanıyor */
}
@media (hover: hover) and (pointer: fine) {
  .vv-sepet .vv-cart-list > .vv-cart-item:hover { box-shadow: var(--tk-golge-kalkik); }
}

/* MEDYA — ÖLÇÜLEN KUSUR 11 ZATEN KAPANDI, DOĞRULANDI.
   cart.js:106-107 her kart için `media.style.aspectRatio` SATIR İÇİ
   yazıyor (size_label'daki "70 × 50 cm" iki sayısından). Satır içi
   stil her CSS kuralını ezer; bu yüzden üç önerinin de savunduğu
   "kare paspartu + object-fit:contain" burada UYGULANMIYOR:
     (a) etkisiz olurdu — kutu zaten eserin gerçek oranında,
     (b) etkili olsaydı bile eseri masaüstünde %55, mobilde %60
         küçültürdü; sanat satan bir sitede yanlış takas.
   object-fit:cover korunuyor: kutu oranı = eser oranı olduğu için
   kırpma YOK. size_label okunamayan kalemlerde (FOTO BASKI) CSS'in
   3/4 varsayılanı devrede kalır. */
.vv-sepet .vv-cart-media {
  border-radius: var(--tk-r-ic);
  background: var(--tk-mat);
  border: 1px solid rgba(8, 17, 29, .06);
}
/* cart.js:91-93 image_path boşsa src="" atıyor → kırık görsel
   simgesi yerine boş mat görünsün. */
.vv-sepet .vv-cart-media img[src=""] { display: none; }

/* Gövde sütunu. cart.js:108 bu div'i SINIFSIZ üretiyor; JS'e
   dokunmamak için doğrudan-çocuk seçicisiyle hedefleniyor
   (cart.js:134 `article.append(media, body)` — başka çocuk yok). */
.vv-sepet .vv-cart-item > div { min-width: 0; }

.vv-sepet .vv-cart-item h2 {
  font: 300 clamp(1.15rem, 1.5vw, 1.3rem)/1.25 Fraunces, Georgia, serif;
  letter-spacing: -.01em;
}
/* commerce.css'te text-decoration hiç yazılmadığı için 21,6px'lik
   Fraunces başlık TARAYICI VARSAYILANIYLA ALTI ÇİZİLİYDİ. Alt çizgi
   kaldırılmıyor, SAYDAMLAŞTIRILIYOR: bağlantı göstergesi hover ve
   odakta geri geliyor, dinlenmede sayfa sakin kalıyor. */
.vv-sepet .vv-cart-item h2 a {
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .25s var(--tk-ease);
}
.vv-sepet .vv-cart-item h2 a:hover,
.vv-sepet .vv-cart-item h2 a:focus-visible { text-decoration-color: currentColor; }
.vv-sepet .vv-cart-meta { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }

/* Eylem satırı: bilgi bloğundan saç teli bir çizgiyle ayrılıyor.
   Kartı "dizilmiş" değil "tasarlanmış" gösteren tek detay bu;
   index.html'in başlık ipliği (0 1px 0 rgba(17,17,16,.06)) ile
   aynı deyim. */
.vv-sepet .vv-cart-line {
  margin-top: var(--tk-5); padding-top: var(--tk-4);
  border-top: 1px solid var(--vv-line);
  justify-content: flex-start; gap: var(--tk-3);
}
/* space-between YERİNE margin-left:auto — ÖLÇÜLEN KUSUR 7. Satır
   sarınca space-between işlevsizleşiyor ve hizalama rastgele
   görünüyordu; auto marj, düştüğünde de tutarı SAĞA yaslar. */
.vv-sepet .vv-money {
  margin-left: auto;
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.1 Fraunces, Georgia, serif;
  font-variant-numeric: tabular-nums;   /* `font:` kısayolu bunu siler */
  letter-spacing: -.01em; color: var(--vv-ink);
}

/* ADET — overflow:hidden BİLEREK KULLANILMADI: ata ögedeki
   overflow:hidden, alt ögelerin outline'ını kırpar ve +2px offsetli
   odak halkası tamamen görünmez olurdu (sepetin en çok kullanılan
   iki denetimi). Köşe taşması, uç düğmelere kendi yarıçapları
   verilerek çözülüyor. */
.vv-sepet .vv-quantity {
  border-color: var(--tk-cizgi); border-radius: var(--tk-r-btn);
  background: var(--vv-paper);
}
.vv-sepet .vv-quantity button {
  min-height: 44px; font-size: 18px; color: var(--vv-ink);
  transition: background-color .2s var(--tk-ease);
}
.vv-sepet .vv-quantity button:first-child { border-radius: var(--tk-r-btn) 0 0 var(--tk-r-btn); }
.vv-sepet .vv-quantity button:last-child { border-radius: 0 var(--tk-r-btn) var(--tk-r-btn) 0; }
.vv-sepet .vv-quantity button:hover:not(:disabled) { background: #f2efe9; }
.vv-sepet .vv-quantity button:disabled { color: #a9a49b; cursor: not-allowed; }
.vv-sepet .vv-quantity output { font-size: 15px; font-weight: 500; }

/* KALDIR — ÖLÇÜLEN KUSUR 8: commerce.css:87 .vv-btn-text
   text-transform ve letter-spacing'i sıfırlıyor ama font-size'ı
   SIFIRLAMIYOR → :82'den gelen 11px yürürlükte kalıyordu (gövde
   16px iken). Aynı işi yapan kaydırma düğmesi 13,5px'ti; ikisi de
   13px'e çekiliyor. Ayrıca .vv-btn-danger yüzünden düğme
   DİNLENMEDE kırmızıydı: yıkıcı eylem sessiz durur, niyet
   gösterilince kırmızıya döner. */
.vv-sepet .vv-cart-item .vv-btn-text {
  align-self: flex-start; margin-top: 10px; padding: 10px 0;
  font-size: 13px; color: var(--vv-muted);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .25s var(--tk-ease), text-decoration-color .25s var(--tk-ease);
}
.vv-sepet .vv-cart-item .vv-btn-danger:hover,
.vv-sepet .vv-cart-item .vv-btn-danger:focus-visible {
  color: var(--vv-danger); text-decoration-color: currentColor;
}

/* KART İÇİ DURUM SATIRLARI — ÖLÇÜLEN KUSUR 12'nin ikinci yarısı:
   sayfa ölçeğinde tasarlanmış .vv-alert (padding 14/16, margin 16 0)
   226px'lik gövde sütununa basılıyordu. Kart ölçeğine küçültülüyor. */
.vv-sepet .vv-cart-item .vv-alert {
  margin: var(--tk-3) 0 0; padding: 9px var(--tk-3);
  border-left-width: 2px; font-size: 12.5px; line-height: 1.45;
}
.vv-sepet .vv-cart-item > div > .vv-muted { margin: 10px 0 0; font-size: 12.5px; }

/* KAYDIRARAK SİL — cart.js:177 zemini ham #B23B3B ile yazıyor,
   jeton değil ve --vv-danger (#8f342d) ile uyuşmuyor. JS'e
   dokunmadan özgüllükle düzeltiliyor: bizim (0,2,0) > enjekte
   edilen (0,1,0). GENİŞLİĞE DOKUNULMUYOR — cart.js:152'deki
   SWIPE_ACIK_PX=96 sabitiyle senkron. */
.vv-sepet .vv-swipe-sil {
  background: var(--vv-danger);
  font: 500 13px Inter, system-ui, sans-serif; letter-spacing: .04em;
}

/* ---- 7.4 ÖZET PANELİ VE KARAR HİYERARŞİSİ ------------------------
   ÖLÇÜLEN KUSUR 2'nin ilk yarısı: "Ödemeye Geç" ile "Desteğe ulaşın"
   birebir aynı kutuydu (ikisi de .vv-btn, min-height:50, width:100%).
   Destek bağlantısı §3.1'de panelden çıkarılıp sayfanın dibine,
   sessiz bir metin satırına taşındı. Panelde tek eylem kaldı. */
.vv-sepet #checkoutButton { margin-top: var(--tk-6); min-height: 54px; }
.vv-sepet .vv-summary .vv-muted { margin: var(--tk-3) 0 0; font-size: 12px; line-height: 1.55; }

.vv-sepet .vv-sepet-destek {
  margin: var(--tk-8) 0 0; text-align: center; font-size: 13px;
  color: var(--vv-muted);
}
.vv-sepet .vv-sepet-destek a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--tk-2);
  color: var(--vv-muted);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(76, 73, 68, .35);
  transition: color .25s var(--tk-ease), text-decoration-color .25s var(--tk-ease);
}
.vv-sepet .vv-sepet-destek a:hover { color: var(--vv-ink); text-decoration-color: currentColor; }

/* ---- 7.5 BOŞ SEPET VE HATA DURUMU --------------------------------
   ÖLÇÜLEN KUSUR 5: cart.js:40-49 empty() yalnız #cartList'i
   değiştiriyor; sağda "0,00 TL" yazan ölü bir panel ve sönük bir
   düğme kalıyordu. :has ile panel kaldırılıyor — JS'e dokunmadan.
   Destek bağlantısı artık panelin İÇİNDE OLMADIĞI için boş sepette
   de görünmeye devam ediyor (brief'in korunacak işlev listesindeki
   "destek bağlantısı" maddesi).

   HATA: cart.js:260 `list.replaceChildren()` listeyi TAMAMEN
   boşaltıyor. CSS'e sabit bir hata cümlesi GÖMÜLMEDİ — cart.js:261
   aynı anda gerçek hata mesajını #cartAlert'e yazıyor, iki farklı
   cümle çelişirdi. Onun yerine boş liste kutusu ızgaradan
   kaldırılıyor: hata anında ekranda tek ve net bir mesaj kalıyor. */
.vv-sepet #cartList:empty { display: none; }
.vv-sepet .vv-commerce-grid:has(.vv-empty),
.vv-sepet .vv-commerce-grid:has(#cartList:empty) { grid-template-columns: minmax(0, 1fr); }
.vv-sepet .vv-commerce-grid:has(.vv-empty) .vv-summary,
.vv-sepet .vv-commerce-grid:has(#cartList:empty) .vv-summary { display: none; }
/* :has desteklenmeyen tarayıcıda bugünkü davranış kalır — GERİLEME YOK. */

.vv-sepet .vv-empty {
  max-width: 620px; margin: 0 auto; padding: 64px var(--tk-7);
  border-color: var(--tk-cizgi); border-radius: var(--tk-r-kart);
  background: var(--vv-paper); box-shadow: var(--tk-golge-sakin);
}
.vv-sepet .vv-empty::before {
  content: ''; display: block; width: 34px; height: 1px;
  margin: 0 auto var(--tk-7); background: var(--vv-bronze);
}
/* commerce.css:107'de margin yazılmadığı için tarayıcı varsayılanı
   (0.83em = 35,9px) devredeydi; 43,2px başlığın hemen altında
   12px açıklama vardı, arada hiç kademe yoktu. */
.vv-sepet .vv-empty h2 {
  max-width: 20ch; margin: 0 auto var(--tk-4);
  font: 300 clamp(1.5rem, 3.4vw, 2rem)/1.25 Fraunces, Georgia, serif;
}
.vv-sepet .vv-empty .vv-muted { max-width: 40ch; margin: 0 auto; font-size: 14px; line-height: 1.6; }
.vv-sepet .vv-empty .vv-btn { max-width: 280px; margin: var(--tk-7) auto 0; }

/* ---- 7.6 İSKELET -------------------------------------------------
   ÖLÇÜLEN KUSUR 6: tek 160px blok; #eee8df / sayfa zemini kontrastı
   1,12 (görünmüyordu); gerçek kart ~231px → ~70px düzen sıçraması;
   `animation: vv-shimmer 1.3s infinite` zamanlama fonksiyonu
   yazılmadığı için varsayılan `ease` ile her turda duraksıyordu.
   Kapsam #cartList: .vv-skeleton siparis-tamam'da da kullanılıyor. */
.vv-sepet #cartList .vv-skeleton {
  min-height: 0; background: var(--vv-paper); animation: none;
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 140px) minmax(0, 1fr);
  gap: clamp(14px, 1.7vw, 22px); padding: clamp(16px, 1.7vw, 22px);
  border: 1px solid var(--tk-cizgi); border-radius: var(--tk-r-kart);
  box-shadow: var(--tk-golge-sakin);
}
.vv-sepet #cartList .vv-skeleton::before {
  content: ''; aspect-ratio: 3/4; border-radius: var(--tk-r-ic);
  background: linear-gradient(90deg, #e6dfd3 25%, #f3efe8 50%, #e6dfd3 75%);
  background-size: 200% 100%;
  animation: vv-shimmer 1.3s linear infinite;   /* düz `ease` duraksıyordu */
}
.vv-sepet #cartList .vv-skeleton::after {
  content: ''; align-self: start; height: 120px; margin-top: 4px;
  background:
    linear-gradient(#e6dfd3, #e6dfd3) 0 0    / 56% 22px no-repeat,
    linear-gradient(#ece7de, #ece7de) 0 36px / 86% 12px no-repeat,
    linear-gradient(#ece7de, #ece7de) 0 74px / 100% 1px no-repeat,
    linear-gradient(#e6dfd3, #e6dfd3) 0 90px / 138px 30px no-repeat;
}

/* ---- 7.7 MOBİL (≤767.98px) ---------------------------------------
   ALT PAY HESABI (ölçülen kusur 4): alt-menu.js:56 body'ye
   `padding-bottom: calc(76px + safe-area)` veriyor; çubuk 64px,
   ortadaki "Oluştur" dairesi top:-24px ile 24px taşıyor → gerçek
   görsel şerit 88px. commerce.css:63'ün 90px alt dolgusu ile
   76px'lik gövde dolgusu üst üste binip 166px ölü boşluk yapıyordu.
   Yeni: 32 + 76 = 108px pay, şerit 88px → 20px temiz nefes. */
@media (max-width: 767.98px) {
  /* Alt menü (alt-menu.js) gövdeye zaten 76px dolgu ekliyor;
     buraya 32px daha koymak alta gereksiz boşluk bırakıyordu. */
  .vv-sepet .vv-commerce-main { padding-bottom: var(--tk-5); }
  .vv-sepet .vv-cart-list { gap: var(--tk-4); }
  /* MEDYA 80 → 72 (30 Ağu, ölçülerek). Aşağıdaki satırın hesabı
     tutmuyordu: 390px ekranda gövde sütunu 225px kalıyor, adet
     denetimi 121px + 12px boşluk = 133px, geriye tutara 92px
     kalıyor. "3.450,00 TL" 88px sığıyor ama "11.800,00 TL" 95px
     ve "99.999,00 TL" 98px — tutar ALT SATIRA düşüyordu.
     Sepette dört haneli bir eser sığarken beş haneli olan kayıyor,
     yani hizalama kalemden kaleme rastgele değişiyordu.
     Küçük görselden 8px, satır boşluğundan 2px alındı; adet
     denetimine DOKUNULMADI (44px dokunma yüksekliği korunuyor).
     Yeni bütçe: 233 - 121 - 10 = 102px ≥ 98px. */
  .vv-sepet .vv-cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--tk-3); padding: var(--tk-4);
  }
  /* 44+48+44+2 = 138px sabit genişlik, gövde sütunu 226px:
     tutar HER ZAMAN alt satıra düşüyordu (ölçülen kusur 7).
     40px genişlik WCAG 2.5.8'in 24px asgarisini fazlasıyla geçer,
     yükseklik 44px'te kalıyor. */
  .vv-sepet .vv-quantity { grid-template-columns: 40px 40px 40px; }
  .vv-sepet .vv-cart-line { margin-top: var(--tk-4); padding-top: var(--tk-3); gap: 10px; }
  .vv-sepet .vv-cart-item .vv-btn-text { margin-top: var(--tk-2); }

  /* Panel, sayfanın kapanış bloğu: tam genişliğe taşar, yan
     çerçeveleri kalkar, üst köşeleri yuvarlak kalır. */
  .vv-sepet .vv-summary {
    margin: 0 calc(-1 * var(--tk-5)); border-left: 0; border-right: 0;
    border-radius: var(--tk-r-kart) var(--tk-r-kart) 0 0;
  }
  .vv-sepet .vv-panel-inner { padding: var(--tk-6) var(--tk-5); }
  .vv-sepet .vv-empty { padding: 48px var(--tk-5); }
  .vv-sepet .vv-empty .vv-btn { max-width: none; }
  .vv-sepet #cartList .vv-skeleton {
    grid-template-columns: 80px minmax(0, 1fr); gap: var(--tk-3); padding: var(--tk-4);
  }
  .vv-sepet #cartList .vv-skeleton::after { height: 108px; }
  .vv-sepet #cartAlert { padding: var(--tk-4); font-size: 13px; }
  .vv-sepet #cartAlert .vv-btn { width: 100%; }
  .vv-sepet .vv-sepet-destek { margin-top: var(--tk-7); }
}

@media print {
  .vv-ticaret .vv-panel,
  .vv-sepet .vv-swipe-sarmal,
  .vv-sepet .vv-cart-list > .vv-cart-item { box-shadow: none; }
}