/* ==========================================================
   Güven Rozetleri — sabit gösterim yerleri (ürün detay + sepet)
   _yerlesim.php basar; sayfa düzeni modüllerinden bağımsızdır.
   Her tasarımın kendi sade karşılığı vardır (gvn_yer_stili):
     1 kutu · 2 kart · 3 ince · 4 satir · 5 hap · 6 daire · 7 tasan
     8 bant · 9 panel · 10 mozaik · 11 kayan · 12 odeme · 13 adim · 14 yazi
   Aynı yapı ürün detayda (gvn-yer--urun, yatay/kompakt) ve sepette
   (gvn-yer--sepet, dikey) farklı yerleşir.
   Ek sınıflar: gvn-yer-kutulu + gvn-yer-kt--{kart stili},
   gvn-yer-ik--{ikon stili}.
   Mobile-first; masaüstü kuralları ürün/sepet sayfalarıyla aynı
   geçiş noktasında (769px) başlar. Renkler --wv-* token, yazı
   boyutları ürün sayfasıyla aynı birimde (px).
   ========================================================== */

.gvn-yer {
    --gvn-yer-a: var(--gvn-yer-vurgu, var(--wv-primary, #111827));
    --gvn-yer-a-soft: var(--gvn-yer-vurgu-soft, var(--wv-primary-soft, #f3f4f6));
    --gvn-yer-a-yazi: var(--wv-primary-fg, #ffffff);
    --gvn-yer-beyaz: var(--wv-white, #ffffff);
    --gvn-yer-cizgi: var(--wv-gray-200, #e5e7eb);
    --gvn-yer-metin: var(--wv-gray-900, #111827);
    --gvn-yer-ikincil: var(--wv-gray-700, #374151);
    --gvn-yer-soluk: var(--wv-gray-500, #6b7280);
    --gvn-yer-yumusak: var(--wv-gray-50, #f9fafb);
    --gvn-yer-onay: var(--wv-success, #16a34a);
    --gvn-yer-ayrac: rgba(127, 127, 127, 0.3);
    color: var(--gvn-yer-metin);
}
.gvn-yer + .gvn-yer { margin-top: 8px; }
.gvn-yer ul { list-style: none; margin: 0; padding: 0; }
.gvn-yer a { text-decoration: none; color: inherit; }
.gvn-yer a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Tema genel ikon rengini ezer: ikon kabının rengini alır */
.gvn-yer .fas,
.gvn-yer .fab { color: inherit; }

/* Ortak öge yapısı */
.gvn-yer-govde { min-width: 0; }
.gvn-yer-oge { display: flex; align-items: center; gap: 8px; color: inherit; box-sizing: border-box; }
.gvn-yer-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    box-sizing: border-box;
}
.gvn-yer-metin { display: flex; flex-direction: column; min-width: 0; }
.gvn-yer-baslik { font-size: 13px; font-weight: 600; line-height: 1.3; }
.gvn-yer-aciklama { display: none; font-size: 12px; line-height: 1.35; color: var(--gvn-yer-soluk); }

/* Yüklenen görsel/logo ikonun yerini alır */
.gvn-yer .gvn-yer-ikon.gvn-ikon-resim { width: auto; height: 26px; background: none; border: none; border-radius: 0; box-shadow: none; }
.gvn-yer .gvn-ikon-resim img { display: block; width: auto; height: 100%; max-width: 72px; object-fit: contain; }

/* Panel / ödeme üst satırı */
.gvn-yer-ust { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.gvn-yer-kilit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gvn-yer-a);
    color: var(--gvn-yer-a-yazi);
    font-size: 13px;
}

/* ---------- Kutulu stiller: kart stili ayarı (ürün + sepet) ---------- */
.gvn-yer-kutulu .gvn-yer-oge {
    height: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gvn-yer-cizgi);
    border-radius: 10px;
    background: var(--gvn-yer-beyaz);
}
.gvn-yer-kutulu a.gvn-yer-oge:hover { border-color: var(--gvn-yer-a); }
.gvn-yer-kt--dolgu .gvn-yer-oge { border-color: transparent; background: var(--gvn-yer-yumusak); }
.gvn-yer-kt--golge .gvn-yer-oge { border-color: transparent; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08); }
.gvn-yer-kt--gradyan .gvn-yer-oge { border-color: transparent; background: linear-gradient(135deg, var(--gvn-yer-a-soft), var(--gvn-yer-beyaz)); }
.gvn-yer-kt--serit .gvn-yer-oge { border-left: 3px solid var(--gvn-yer-a); }
.gvn-yer-kt--ust .gvn-yer-oge { border-top: 3px solid var(--gvn-yer-a); }
.gvn-yer-kt--kesik .gvn-yer-oge { border-style: dashed; }
.gvn-yer-kt--yok .gvn-yer-oge { border-color: transparent; background: none; }

/* ---------- Yumuşak zeminli ikon (kutu, kart, panel, mozaik) + ikon stili ---------- */
.gvn-yer-s--kutu .gvn-yer-ikon,
.gvn-yer-s--kart .gvn-yer-ikon,
.gvn-yer-s--panel .gvn-yer-ikon,
.gvn-yer-s--mozaik .gvn-yer-ikon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gvn-yer-a-soft);
    color: var(--gvn-yer-a);
    font-size: 14px;
}
.gvn-yer-ik--kare .gvn-yer-ikon { border-radius: 8px; }
.gvn-yer-ik--duz .gvn-yer-ikon { background: none; font-size: 17px; }

/* ---------- Kutu stilleri (ürün + sepet) ---------- */
/* Ortalı kutular: ikon üstte, başlık altta */
.gvn-yer-s--kutu .gvn-yer-liste,
.gvn-yer-s--tasan .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gvn-yer-s--kutu .gvn-yer-oge,
.gvn-yer-s--tasan .gvn-yer-oge { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 8px; text-align: center; }
.gvn-yer-s--kutu .gvn-yer-ikon { width: 36px; height: 36px; }
/* Taşan ikon: ikon kutunun üst kenarından taşar */
.gvn-yer-s--tasan .gvn-yer-liste { row-gap: 26px; padding-top: 18px; }
.gvn-yer-s--tasan .gvn-yer-oge { position: relative; padding-top: 26px; }
.gvn-yer-s--tasan .gvn-yer-ikon {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    background: var(--gvn-yer-a);
    color: var(--gvn-yer-a-yazi);
    box-shadow: 0 0 0 3px var(--gvn-yer-beyaz);
    font-size: 14px;
}
.gvn-yer-s--tasan .gvn-yer-ikon.gvn-ikon-resim { top: -14px; left: 0; right: 0; width: auto; margin: 0 auto; }

/* Renkli şerit / kutu (Vurgu Bant): zemin yoksa site ana rengi */
.gvn-yer.gvn-yer-s--bant {
    padding: 6px 4px;
    border: none;
    border-radius: 10px;
    background: var(--gvn-yer-zemin, var(--wv-primary, #111827));
    color: var(--gvn-yer-zemin-yazi, var(--gvn-yer-a-yazi));
}
.gvn-yer.gvn-yer-s--bant .gvn-yer-oge { min-height: 44px; padding: 4px 10px; color: inherit; }
.gvn-yer-s--bant .gvn-yer-ikon { width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; }

/* Ayraçlı ince şerit / liste (Ayraçlı İnce Bant): beyaz + çerçeve, zemin seçilirse o renk */
.gvn-yer.gvn-yer-s--ince {
    border: 1px solid var(--gvn-yer-zemin, var(--gvn-yer-cizgi));
    border-radius: 8px;
    background: var(--gvn-yer-zemin, var(--gvn-yer-beyaz));
    color: var(--gvn-yer-zemin-yazi, var(--gvn-yer-metin));
}
.gvn-yer.gvn-yer-s--ince .gvn-yer-oge { color: inherit; }
.gvn-yer-s--ince .gvn-yer-ikon { color: var(--gvn-yer-a); font-size: 14px; }
.gvn-yer-s--ince .gvn-yer-baslik { font-size: 12px; }

/* Başlıklı panel (Görselli Panel) */
.gvn-yer.gvn-yer-s--panel {
    padding: 12px;
    border: 1px solid var(--gvn-yer-cizgi);
    border-radius: 10px;
    background: var(--gvn-yer-yumusak);
}
.gvn-yer-s--panel .gvn-yer-ust { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gvn-yer-cizgi); }
.gvn-yer-s--panel .gvn-yer-ikon { width: 28px; height: 28px; font-size: 12px; }
.gvn-yer.gvn-yer-s--panel .gvn-yer-oge { color: inherit; }

/* Kayan şerit (Kayan Bant): iki kopya liste yan yana, bir liste boyu kayar */
.gvn-yer.gvn-yer-s--kayan {
    /* İç liste max-content genişlikte: kapsayıcı esnek (flex) bir sütunsa onu
       şişirmesin, genişlik içerikten değil yerleştiği alandan gelsin */
    contain: inline-size;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--gvn-yer-zemin, var(--gvn-yer-cizgi));
    border-radius: 8px;
    background: var(--gvn-yer-zemin, var(--gvn-yer-beyaz));
    color: var(--gvn-yer-zemin-yazi, var(--gvn-yer-metin));
}
.gvn-yer-s--kayan .gvn-yer-govde {
    display: flex;
    width: max-content;
    animation: gvn-yer-kay var(--gvn-yer-tur, 16s) linear infinite;
}
.gvn-yer-s--kayan:hover .gvn-yer-govde { animation-play-state: paused; }
.gvn-yer-s--kayan .gvn-yer-liste { display: flex; flex: none; }
.gvn-yer-s--kayan li { flex: none; }
.gvn-yer.gvn-yer-s--kayan .gvn-yer-oge { min-height: 44px; padding: 0 18px; white-space: nowrap; color: inherit; }
.gvn-yer-s--kayan .gvn-yer-ikon { color: var(--gvn-yer-a); font-size: 14px; }
.gvn-yer-s--kayan .gvn-yer-baslik { font-size: 12px; }
/* 3'ten az rozet: kaydırma yok, ortalı tek satır (satır kırılabilir) */
.gvn-yer-s--kayan.gvn-yer-sabit .gvn-yer-govde { width: auto; animation: none; }
.gvn-yer-s--kayan.gvn-yer-sabit .gvn-yer-liste { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; }
.gvn-yer-s--kayan.gvn-yer-sabit .gvn-yer-oge { white-space: normal; }
@keyframes gvn-yer-kay {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* Hareket azaltma tercihinde kaymaz; tek liste satır kırarak dizilir */
@media (prefers-reduced-motion: reduce) {
    .gvn-yer-s--kayan .gvn-yer-govde { width: auto; animation: none; }
    .gvn-yer-s--kayan .gvn-yer-liste { flex-wrap: wrap; flex: 1 1 auto; }
    .gvn-yer-s--kayan .gvn-yer-liste[aria-hidden="true"] { display: none; }
}

/* Kilitli logo satırı (Ödeme Güvenliği Bandı): rozetler logo kutucuğu, metin ekran okuyucuya */
.gvn-yer.gvn-yer-s--odeme {
    padding: 10px 12px;
    border: 1px solid var(--gvn-yer-zemin, var(--gvn-yer-cizgi));
    border-radius: 10px;
    background: var(--gvn-yer-zemin, var(--gvn-yer-beyaz));
    color: var(--gvn-yer-zemin-yazi, var(--gvn-yer-metin));
}
.gvn-yer-s--odeme .gvn-yer-ust { margin-bottom: 8px; }
.gvn-yer.gvn-yer-s--odeme .gvn-yer-liste { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.gvn-yer.gvn-yer-s--odeme .gvn-yer-oge {
    justify-content: center;
    min-width: 52px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--gvn-yer-cizgi);
    border-radius: 6px;
    background: var(--gvn-yer-beyaz);
    color: var(--gvn-yer-a);
}
.gvn-yer-s--odeme .gvn-yer-ikon { font-size: 20px; }
.gvn-yer-s--odeme .gvn-yer-ikon.gvn-ikon-resim { height: 22px; }
/* İkon/görseli olan rozette metin görünmez ama okunur kalır */
.gvn-yer-s--odeme .gvn-yer-ikon + .gvn-yer-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gvn-yer-s--odeme .gvn-yer-baslik { font-size: 12px; color: var(--gvn-yer-metin); }
/* Sepette (dar sütun) yazı ikon rozetlerinde görünür: logo kendini anlatır ama düz ikon
   (kamyon, kalkan) yazısız anlamsız kalıyordu. Görsel logolu rozetler değişmez. */
.gvn-yer--sepet.gvn-yer-s--odeme .gvn-yer-ikon:not(.gvn-ikon-resim) + .gvn-yer-metin {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
/* Yazılı rozet içeren sepet bandı: kutucuklar yan yana sarınca dengesiz kırılıyordu (2 + 1);
   tam genişlikte alt alta dizilir, ikon ve yazı sola hizalı. Yalnız logolu bant yan yana kalır.
   :has() desteklemeyen tarayıcıda eski yan yana dizilim geçerli kalır. */
.gvn-yer.gvn-yer--sepet.gvn-yer-s--odeme .gvn-yer-liste:has(.gvn-yer-ikon:not(.gvn-ikon-resim)) {
    flex-direction: column;
    flex-wrap: nowrap;
}
.gvn-yer.gvn-yer--sepet.gvn-yer-s--odeme .gvn-yer-liste:has(.gvn-yer-ikon:not(.gvn-ikon-resim)) .gvn-yer-oge {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 40px;
}
.gvn-yer--sepet.gvn-yer-s--odeme .gvn-yer-ikon:not(.gvn-ikon-resim) {
    width: 22px;
    font-size: 16px;
}

/* Adım ikonu (ürün + sepet) */
.gvn-yer-s--adim .gvn-yer-ikon {
    width: 36px;
    height: 36px;
    border: 2px solid var(--gvn-yer-a);
    border-radius: 50%;
    background: var(--gvn-yer-beyaz);
    color: var(--gvn-yer-a);
    font-size: 14px;
}
.gvn-yer-s--adim .gvn-yer-no { font-weight: 700; font-size: 14px; }

/* Ortalı sade satır (Ortalı Satır): kartsız, ortalı, boşlukla ayrılır
   (nokta ayraç satır kırılınca yeni satırın başına düşüyordu) */
.gvn-yer-s--satir .gvn-yer-liste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; }
.gvn-yer.gvn-yer-s--satir .gvn-yer-oge { gap: 6px; min-height: 32px; color: var(--gvn-yer-ikincil); }
.gvn-yer-s--satir .gvn-yer-ikon { color: var(--gvn-yer-a); font-size: 13px; }
.gvn-yer-s--satir .gvn-yer-baslik { font-weight: 500; }

/* Başlık önünde kısa vurgu çizgisi (Minimal; ürün + sepet) */
.gvn-yer-s--yazi .gvn-yer-baslik::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 2px;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--gvn-yer-a);
}

/* =================== ÜRÜN DETAY (Sepete Ekle altı) =================== */
/* Sütun sayısı sayfa değil rozet alanının genişliğine göre (bilgi kartı temaya ve
   ekrana göre 300-600px arası değişir); destek yoksa 2 sütunda kalır */
.gvn-yer--urun { margin-top: 12px; container-type: inline-size; }

/* --- Hap rozetler: mobilde tek satır yana kaydırılır --- */
.gvn-yer--urun.gvn-yer-s--hap .gvn-yer-liste {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.gvn-yer--urun.gvn-yer-s--hap .gvn-yer-liste::-webkit-scrollbar { display: none; }
.gvn-yer--urun.gvn-yer-s--hap li { flex: 0 0 auto; scroll-snap-align: start; }
.gvn-yer--urun.gvn-yer-s--hap .gvn-yer-oge {
    gap: 7px;
    min-height: 44px;
    padding: 4px 14px 4px 5px;
    border: 1.5px solid var(--gvn-yer-cizgi);
    border-radius: 999px;
    background: var(--gvn-yer-beyaz);
    white-space: nowrap;
}
.gvn-yer--urun.gvn-yer-s--hap a.gvn-yer-oge:hover { border-color: var(--gvn-yer-a); }
.gvn-yer--urun.gvn-yer-s--hap .gvn-yer-ikon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gvn-yer-a-soft);
    color: var(--gvn-yer-a);
    font-size: 13px;
}

/* --- Ayraçlı ince şerit: 2 sütunlu çizgili tablo (ayraçlar satır kırılınca da hizalı kalır) --- */
.gvn-yer--urun.gvn-yer-s--ince .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gvn-yer--urun.gvn-yer-s--ince li:nth-child(2n) { box-shadow: -1px 0 0 0 var(--gvn-yer-ayrac); }
.gvn-yer--urun.gvn-yer-s--ince li:nth-child(n+3) { border-top: 1px solid var(--gvn-yer-ayrac); }
.gvn-yer--urun.gvn-yer-s--ince .gvn-yer-oge { justify-content: center; gap: 6px; min-height: 40px; padding: 4px 10px; text-align: center; }

/* --- Yatay mini kartlar / vurgulu ilk kart: 2 sütun --- */
.gvn-yer--urun.gvn-yer-s--kart .gvn-yer-liste,
.gvn-yer--urun.gvn-yer-s--mozaik .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Mozaik: ilk rozetin altındaki küçük kartlar kalan sayı kadar sütun (en fazla 3), tek kalan olmasın */
.gvn-yer--urun.gvn-yer-s--mozaik .gvn-yer-liste { grid-template-columns: repeat(var(--gvn-yer-kalan-sutun, 2), minmax(0, 1fr)); }
.gvn-yer--urun.gvn-yer-s--kart .gvn-yer-oge,
.gvn-yer--urun.gvn-yer-s--mozaik .gvn-yer-oge { min-height: 52px; }
.gvn-yer--urun.gvn-yer-s--kart .gvn-yer-aciklama,
.gvn-yer--urun.gvn-yer-s--mozaik .gvn-yer-aciklama {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Mozaik: ilk rozet tam satır, vurgulu */
.gvn-yer--urun.gvn-yer-s--mozaik li:first-child { grid-column: 1 / -1; }
.gvn-yer--urun.gvn-yer-s--mozaik li:first-child .gvn-yer-oge { gap: 12px; padding: 12px 14px; border-color: transparent; background: var(--gvn-yer-a-soft); }
.gvn-yer--urun.gvn-yer-s--mozaik li:first-child .gvn-yer-ikon { width: 40px; height: 40px; background: var(--gvn-yer-a); color: var(--gvn-yer-a-yazi); font-size: 16px; }
.gvn-yer--urun.gvn-yer-s--mozaik li:first-child .gvn-yer-baslik { font-size: 14px; }
/* Küçük kartlar sıkışmasın: açıklama yalnız vurgulu ilk rozette */
.gvn-yer--urun.gvn-yer-s--mozaik li:not(:first-child) .gvn-yer-aciklama { display: none; }
.gvn-yer--urun.gvn-yer-s--mozaik li:not(:first-child) .gvn-yer-oge { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center; }

/* --- Daire ikonlar: kartsız, büyük daire ikon üstte --- */
.gvn-yer--urun.gvn-yer-s--daire .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 6px; }
.gvn-yer--urun.gvn-yer-s--daire .gvn-yer-oge { flex-direction: column; gap: 6px; text-align: center; }
.gvn-yer--urun.gvn-yer-s--daire .gvn-yer-ikon { width: 46px; height: 46px; border-radius: 50%; background: var(--gvn-yer-a-soft); color: var(--gvn-yer-a); font-size: 17px; }
.gvn-yer--urun.gvn-yer-s--daire .gvn-yer-baslik { font-size: 12px; }

/* --- Renkli şerit: 2 sütun, ayraçlı --- */
.gvn-yer--urun.gvn-yer-s--bant .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gvn-yer--urun.gvn-yer-s--bant li:nth-child(2n) { box-shadow: -1px 0 0 0 var(--gvn-yer-ayrac); }

/* --- Başlıklı panel: 2 sütun satırlar --- */
.gvn-yer--urun.gvn-yer-s--panel .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }

/* --- Adım çizgisi: ikon daireleri bir çizgiyle bağlı, başlık altta --- */
.gvn-yer--urun.gvn-yer-s--adim .gvn-yer-liste {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}
.gvn-yer--urun.gvn-yer-s--adim .gvn-yer-liste::-webkit-scrollbar { display: none; }
.gvn-yer--urun.gvn-yer-s--adim li { position: relative; flex: 1 0 84px; }
.gvn-yer--urun.gvn-yer-s--adim li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--gvn-yer-cizgi);
}
.gvn-yer--urun.gvn-yer-s--adim .gvn-yer-oge { flex-direction: column; gap: 6px; padding: 0 4px; text-align: center; }
.gvn-yer--urun.gvn-yer-s--adim .gvn-yer-baslik { font-size: 12px; }

/* --- Sade yazı: ikonsuz, ince çizgiler arasında --- */
.gvn-yer--urun.gvn-yer-s--yazi {
    border-top: 1px solid var(--gvn-yer-cizgi);
    border-bottom: 1px solid var(--gvn-yer-cizgi);
}
.gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-oge { min-height: 44px; padding: 6px 0; }
.gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-baslik {
    /* Kırılan satır vurgu çizgisinin altına değil metin hizasına girer */
    padding-left: 16px;
    text-indent: -16px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ======================== SEPET (dikey) ======================== */
/* Mobil: ürün listesinin altında ayrı kart. Kendi kutusu olan stiller
   (bant, ince, panel, kayan, odeme) iki sınıflı kurallarla bunu ezer. */
.gvn-yer--sepet {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--gvn-yer-cizgi);
    border-radius: 10px;
    background: var(--gvn-yer-beyaz);
}
.gvn-yer--sepet .gvn-yer-liste { display: flex; flex-direction: column; gap: 6px; }
.gvn-yer--sepet .gvn-yer-oge { gap: 10px; min-height: 32px; font-size: 13px; color: var(--gvn-yer-ikincil); }
.gvn-yer--sepet .gvn-yer-baslik { font-weight: 500; }

/* --- Onay listesi --- */
.gvn-yer--sepet.gvn-yer-s--hap .gvn-yer-ikon { width: 20px; color: var(--gvn-yer-vurgu, var(--gvn-yer-onay)); font-size: 14px; }

/* --- İkonlu liste / vurgulu ilk satır / dolu daire: başlık + açıklama --- */
.gvn-yer--sepet.gvn-yer-s--kart .gvn-yer-liste,
.gvn-yer--sepet.gvn-yer-s--mozaik .gvn-yer-liste,
.gvn-yer--sepet.gvn-yer-s--daire .gvn-yer-liste { gap: 10px; }
.gvn-yer--sepet.gvn-yer-s--kart .gvn-yer-baslik,
.gvn-yer--sepet.gvn-yer-s--mozaik .gvn-yer-baslik,
.gvn-yer--sepet.gvn-yer-s--daire .gvn-yer-baslik,
.gvn-yer--sepet.gvn-yer-s--panel .gvn-yer-baslik { font-weight: 600; color: var(--gvn-yer-metin); }
.gvn-yer--sepet.gvn-yer-s--kart .gvn-yer-aciklama,
.gvn-yer--sepet.gvn-yer-s--mozaik .gvn-yer-aciklama,
.gvn-yer--sepet.gvn-yer-s--daire .gvn-yer-aciklama { display: block; }
.gvn-yer--sepet.gvn-yer-s--mozaik li:first-child .gvn-yer-oge { padding: 10px 12px; border-radius: 10px; background: var(--gvn-yer-a-soft); }
.gvn-yer--sepet.gvn-yer-s--mozaik li:first-child .gvn-yer-ikon { background: var(--gvn-yer-a); color: var(--gvn-yer-a-yazi); }
.gvn-yer--sepet.gvn-yer-s--daire .gvn-yer-ikon { width: 34px; height: 34px; border-radius: 50%; background: var(--gvn-yer-a); color: var(--gvn-yer-a-yazi); font-size: 14px; }

/* --- Ortalı kutular / taşan ikonlu kutular --- */
.gvn-yer--sepet.gvn-yer-s--kutu .gvn-yer-liste,
.gvn-yer--sepet.gvn-yer-s--tasan .gvn-yer-liste { display: grid; gap: 8px; }
.gvn-yer--sepet.gvn-yer-s--tasan .gvn-yer-liste { row-gap: 26px; }
.gvn-yer--sepet.gvn-yer-s--kutu .gvn-yer-baslik,
.gvn-yer--sepet.gvn-yer-s--tasan .gvn-yer-baslik { font-weight: 600; color: var(--gvn-yer-metin); }

/* --- Ayraçlı liste: satırlar arasında çizgi --- */
.gvn-yer.gvn-yer--sepet.gvn-yer-s--ince { padding: 4px 14px; }
.gvn-yer--sepet.gvn-yer-s--ince .gvn-yer-liste { gap: 0; }
.gvn-yer--sepet.gvn-yer-s--ince li + li { border-top: 1px solid var(--gvn-yer-ayrac); }
.gvn-yer--sepet.gvn-yer-s--ince .gvn-yer-oge { min-height: 40px; }

/* --- Renkli kutu --- */
.gvn-yer.gvn-yer--sepet.gvn-yer-s--bant { padding: 10px 12px; }
.gvn-yer--sepet.gvn-yer-s--bant .gvn-yer-liste { gap: 2px; }
.gvn-yer--sepet.gvn-yer-s--bant .gvn-yer-oge { min-height: 36px; padding: 2px 0; }

/* --- Kayan şerit sepette de tek satır --- */
.gvn-yer--sepet.gvn-yer-s--kayan .gvn-yer-liste { flex-direction: row; gap: 0; }

/* --- Ortalı sade satır --- */
.gvn-yer--sepet.gvn-yer-s--satir .gvn-yer-liste { flex-direction: row; gap: 2px 18px; }

/* --- Adım listesi: dikey zaman çizgisi --- */
.gvn-yer--sepet.gvn-yer-s--adim .gvn-yer-liste { gap: 0; }
.gvn-yer--sepet.gvn-yer-s--adim li { position: relative; padding-bottom: 12px; }
.gvn-yer--sepet.gvn-yer-s--adim li:last-child { padding-bottom: 0; }
.gvn-yer--sepet.gvn-yer-s--adim li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 2px;
    left: 17px;
    width: 2px;
    background: var(--gvn-yer-cizgi);
}
.gvn-yer--sepet.gvn-yer-s--adim .gvn-yer-oge { align-items: flex-start; }
.gvn-yer--sepet.gvn-yer-s--adim .gvn-yer-metin { padding-top: 2px; }
.gvn-yer--sepet.gvn-yer-s--adim .gvn-yer-baslik { font-weight: 600; color: var(--gvn-yer-metin); }
.gvn-yer--sepet.gvn-yer-s--adim .gvn-yer-aciklama { display: block; }

/* --- Çizgili liste: ikonsuz, kesikli ayraçlı satırlar --- */
.gvn-yer--sepet.gvn-yer-s--yazi .gvn-yer-liste { gap: 0; }
.gvn-yer--sepet.gvn-yer-s--yazi li + li { border-top: 1px dashed var(--gvn-yer-cizgi); }
.gvn-yer--sepet.gvn-yer-s--yazi .gvn-yer-oge { padding: 7px 0; }
.gvn-yer--sepet.gvn-yer-s--yazi .gvn-yer-baslik { font-weight: 600; color: var(--gvn-yer-metin); }
.gvn-yer--sepet.gvn-yer-s--yazi .gvn-yer-aciklama { display: block; padding-left: 16px; }

/* Sepet yerleşimi: masaüstü kopyası mobilde, mobil kopyası masaüstünde gizli */
.gvn-yer--sepet-masaustu { display: none; }

@media (min-width: 769px) {
    /* Ürün detay hap: satır kırılarak dizilir, kaydırma yok */
    .gvn-yer--urun.gvn-yer-s--hap .gvn-yer-liste { flex-wrap: wrap; overflow: visible; }
    /* Ürün detay şerit/yazı: her rozet metni kadar yer alır (eşit sütunda uzun başlık
       satır kırıp hizayı bozuyordu); sığmayan rozet bütün olarak alt satıra geçer */
    .gvn-yer--urun.gvn-yer-s--bant .gvn-yer-liste,
    .gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-liste { display: flex; flex-wrap: wrap; column-gap: 0; }
    .gvn-yer--urun.gvn-yer-s--bant li,
    .gvn-yer--urun.gvn-yer-s--yazi li { flex: 1 1 auto; max-width: 100%; }
    .gvn-yer--urun.gvn-yer-s--bant .gvn-yer-baslik,
    .gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-baslik { white-space: nowrap; }
    .gvn-yer--urun.gvn-yer-s--yazi .gvn-yer-oge { padding-right: 14px; }
    .gvn-yer--urun.gvn-yer-s--bant li:nth-child(2n) { box-shadow: none; }
    .gvn-yer--urun.gvn-yer-s--bant li + li { box-shadow: -1px 0 0 0 var(--gvn-yer-ayrac); }
    /* Kilitli logo satırı: başlık solda, logolar sağda */
    .gvn-yer--urun.gvn-yer-s--odeme { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
    .gvn-yer--urun.gvn-yer-s--odeme .gvn-yer-ust { margin-bottom: 0; }

    .gvn-yer--sepet-mobil { display: none; }
    /* Sepet özet kutusunda: kartsız, kesikli ayraçla Sepeti Onayla'nın altında
       (kendi kutusu olan stiller iki sınıflı kurallarla kutulu kalır) */
    .gvn-yer--sepet-masaustu {
        display: block;
        margin-top: 14px;
        padding: 12px 0 0;
        border: none;
        border-top: 1px dashed var(--gvn-yer-cizgi);
        border-radius: 0;
        background: none;
    }
}

/* Ürün detay geniş rozet alanı (bkz. container-type): dosyanın sonunda, mobil kuralları ezer */
@container (min-width: 440px) {
    /* Ortalı kutular / taşan / daire: rozet sayısından gelen sütun (tek kalan kutu olmaz) */
    .gvn-yer--urun.gvn-yer-s--kutu .gvn-yer-liste,
    .gvn-yer--urun.gvn-yer-s--tasan .gvn-yer-liste,
    .gvn-yer--urun.gvn-yer-s--daire .gvn-yer-liste { grid-template-columns: repeat(var(--gvn-yer-sutun, 2), minmax(0, 1fr)); }
}