/* Kart stilleri alt bileşenden geliyor. Alt bileşen styles.css'i tek başına
   derlemeye girmiyor ama bir bileşenin kendi styles.css'inden @import
   edilirse giriyor — ProductSlider'da test edilip doğrulandı. */
/* Imported from: ../TrustBadge/styles.css */
/* ═══════════════════════════════════════════════════════════════
   Güven kartı — TrustStrip içinde

   ÖLÇÜLER "Sofranın Her Anına" (FeatureCard) İLE BİREBİR AYNI:
     kart    radius 28px (30px masaüstü),
             padding 22px 18px 24px (26px 20px 28px masaüstü)
     görsel  200×200 (230×230 masaüstü), object-fit: contain
     başlık  20px/800 (21px masaüstü)
     metin   15px/1.45/500
   İki bölüm arasındaki TEK fark kart zemini: burası pastel, orası beyaz
   (ve orada ızgara çerçeveli bir panelin içinde). Böylece iki bölüm aynı
   ritimde okunuyor, tema hiyerarşisi bozulmuyor.

   Pastel zemin üst bölümden `--tb-bg` ile iner — CSS bileşen başına
   kapsandığı için üst bölüm buradaki sınıfları hedefleyemez, ama özel
   özellikler DOM'da kalıtımla iner.
   ═══════════════════════════════════════════════════════════════ */

.cc_vf4ft4MdSc_daj86gXLJV .trust-badge {
  display: flex;
  /* Ölçüler değişkenle: kompakt şerit bunları üst bölümden kalıtımla eziyor
     (CSS kapsaması yüzünden sınıf seçicisiyle değil). */
  flex-direction: var(--tb-dir, column);
  align-items: var(--tb-ai, center);
  text-align: var(--tb-ta, center);
  /* Genişlik BURADA veriliyor: IkasComponentRenderer çocuğu
     `display: contents` bir div'e sarıyor, bu yüzden üst bölümdeki
     `.trust-strip-item > * { width: 100% }` kuralı o sarmalayıcıya
     çarpıyor ve etkisiz kalıyor. Ölçüldü: sütun 314.5px iken kart
     270px'te kalıyordu. */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--tb-pad, 22px 18px 24px);
  border-radius: var(--tb-rad, 28px);
  background: var(--tb-bg, var(--color-surface-alt));
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-badge-icon {
  width: var(--tb-ikon, 200px);
  height: var(--tb-ikon, 200px);
  max-width: 100%;
  flex: none;
  object-fit: contain;
  display: block;
  margin-bottom: var(--tb-ikon-alt, 14px); margin-right: var(--tb-ikon-sag, 0);
  -webkit-user-drag: none;
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-badge-body {
  display: flex;
  flex-direction: column;
  align-items: var(--tb-body-ai, center);
  gap: var(--tb-body-gap, 6px);
  min-width: 0;
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-badge-title {
  font-family: var(--font-body);
  font-size: var(--tb-baslik-fs, 20px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--tb-title-c, var(--color-accent-dark));
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-badge-subtitle {
  font-family: var(--font-body);
  font-size: var(--tb-alt-fs, 15px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Dar telefonda sütun ~175px: 200px görsel ve 20px başlık sığmıyor. */
@media (max-width: 639px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge { padding: var(--tb-pad, 16px 12px 18px); border-radius: var(--tb-rad, 20px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge-icon { width: var(--tb-ikon, 104px); height: var(--tb-ikon, 104px); margin-bottom: var(--tb-ikon-alt, 10px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge-title { font-size: var(--tb-baslik-fs, 15px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge-subtitle { font-size: var(--tb-alt-fs, 13px); line-height: 1.4; }
}

@media (min-width: 1180px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge { padding: var(--tb-pad, 26px 20px 28px); border-radius: var(--tb-rad, 30px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge-icon { width: var(--tb-ikon, 230px); height: var(--tb-ikon, 230px); margin-bottom: var(--tb-ikon-alt, 16px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-badge-title { font-size: var(--tb-baslik-fs, 21px); }
}

/* End import: ../TrustBadge/styles.css */

/* ═══════════════════════════════════════════════════════════════
   Güven Bölümü ("Neden Atabarı?")

   ÖLÇÜLER "Sofranın Her Anına" (FeatureCards) İLE BİREBİR AYNI:
   bölüm dolgusu, ızgara kırılımları (1 / 2 ≥640 / 4 ≥1180), boşluklar,
   kart ölçüleri ve tipografi. İki bölüm aynı ritimde okunsun diye.

   HERO'NUN ÜSTÜNE BİNME VE ÜST KÖŞE YARIÇAPI KALDIRILDI.
   Tam Öğün'de bölüm negatif margin (-24/-40px) ve büyük üst yarıçapla
   hero'nun üstüne biniyor; bizde hero'nun altında oklar ve nokta
   göstergesi var (oklar alt kenardan 23px, nokta kabı 36px yukarıda
   bitiyor — ölçüldü) ve binme bunları örtüyordu. Artık binme yok.

   İki bölüm arasındaki tek görsel fark: burada kartlar pastel ve panel
   yok; orada kartlar beyaz ve ızgara çerçeveli bir panelin içinde.
   ═══════════════════════════════════════════════════════════════ */

/* Genişlik sistemi sayfadaki DİĞER bölümlerle aynı: max 1600px ve
   clamp(16px, 4vw, 48px) yan boşluk. Önce 1500px + 34px içten çekme
   vardı ve kategoriler/ürün slider'a göre her yandan 10px içeride
   kalıyordu (ölçüldü: 1324 vs 1344, kenar 58 vs 48). */
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip {
  width: 100%;
  padding: 28px clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* ─── Zemin ─── */

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--white { background: var(--color-bg); }
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--soft { background: var(--color-accent-light); }
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--dark { background: var(--color-accent-dark); }

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ─── Izgara: mobil 1, tablet 2, masaüstü 4 ─── */

/* Mobilde 2 sütun: 1 sütunda kart 200px görselle çok uzuyor ve dört kart
   uzun bir kaydırma yaratıyordu. Kart ölçüleri 640px altında bu dar sütuna
   göre küçültülüyor (aşağıda). */
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid { gap: 18px; }
}

@media (min-width: 1180px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-strip { padding: 36px clamp(16px, 4vw, 48px); }
  .cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-item { display: flex; min-width: 0; }

/* IkasComponentRenderer çocuğu `display: contents` bir div'e sarıyor;
   yükseklik/genişlik zinciri orada kopmasın diye. */
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-item > div, .cc_vf4ft4MdSc_daj86gXLJV .trust-strip-item > * { width: 100%; }

/* ─── Kartların pastel zeminleri ───
   Tam Öğün'de yeşil #eef4e3, mavi #e9f1f7, sarı #f8f3df, pembe #fbeceb.
   Buradakiler Atabarı'nın yeşiline komşu seçildi — mavi/pembe yerine
   yeşil, krem, adaçayı ve toprak; marka rengiyle kavga etmesinler.
   Başlık renkleri de "Sofranın Her Anına" ile aynı dizilim.
   Değişkenler ITEM'a yazılıyor, çocuğa kalıtımla iniyor. */

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid .trust-strip-item:nth-child(4n + 1) { --tb-bg: #EEF5E6; --tb-title-c: #37601F; }
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid .trust-strip-item:nth-child(4n + 2) { --tb-bg: #F5F1E2; --tb-title-c: #8A6B1F; }
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid .trust-strip-item:nth-child(4n + 3) { --tb-bg: #E9F0EC; --tb-title-c: #477A2E; }
.cc_vf4ft4MdSc_daj86gXLJV .trust-strip-grid .trust-strip-item:nth-child(4n + 4) { --tb-bg: #F7EEE6; --tb-title-c: #A6532A; }

/* ─── KOMPAKT MOD ───
   Hicret'in hero-altı şeridi: ince bant, öğe içinde ikon SOLDA.
   Çocuğun ölçüleri kalıtımla inen değişkenlerle eziliyor; pastel kart
   zeminleri ve nth-child başlık renkleri kompaktta devre dışı. */

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--compact {
  padding: 10px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--color-border);
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--compact .trust-strip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}

@media (min-width: 900px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-strip--compact .trust-strip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

.cc_vf4ft4MdSc_daj86gXLJV .trust-strip--compact .trust-strip-grid .trust-strip-item {
  --tb-bg: transparent;
  --tb-title-c: var(--color-text-primary);
  --tb-dir: row;
  --tb-ai: center;
  --tb-ta: left;
  --tb-pad: 8px 6px;
  --tb-rad: 0;
  --tb-ikon: 40px;
  --tb-ikon-alt: 0;
  --tb-ikon-sag: 10px;
  --tb-baslik-fs: 13px;
  --tb-alt-fs: 12px;
  --tb-body-ai: flex-start;
  --tb-body-gap: 1px;
}

@media (max-width: 639px) {
  .cc_vf4ft4MdSc_daj86gXLJV .trust-strip--compact .trust-strip-grid .trust-strip-item {
    --tb-ikon: 34px;
    --tb-ikon-sag: 8px;
    --tb-baslik-fs: 12px;
    --tb-alt-fs: 11px;
  }
}