/* ═══════════════════════════════════════════════════════════════
   Kategori Karuseli

   Masaüstü ve mobil için düzen (grid / kaydırmalı) ve sütun sayısı
   BAĞIMSIZ seçilir. Bu yüzden modifier sınıfları kırılıma göre ayrı:
     .catcar--m-grid / .catcar--m-slider   → mobil (temel)
     .catcar--d-grid / .catcar--d-slider   → ≥1024px

   Sütun sayısı ve peek katsayısı index.tsx'ten CSS değişkeni olarak gelir:
     --cc-m-cols, --cc-d-cols, --cc-peek
   ═══════════════════════════════════════════════════════════════ */

.cc_vf4ft4MdSc_wirLiQC2uD .catcar {
  --cc-gap: 12px;
  position: relative;
  width: 100%;
  /* Üst boşluk bilinçli olarak alttan az: bölüm hero'nun hemen devamı gibi
     okunsun. Eskiden üst-alt eşit 64px'ti ve hero'dan kopuk duruyordu. */
  padding: var(--space-md, 24px) 0 var(--space-xl, 64px);
  background: var(--color-bg);
}


/* ─── Genişlik sınırı ───
   NOT: `.atabari-container` sınıfı bu temada HİÇBİR YERDE tanımlı değil
   (global.css'te karşılığı yok), yani tek başına bir şey yapmıyor.
   Sınır bu yüzden burada, açıkça veriliyor. Hero bilinçli olarak dışarıda:
   tam genişlik kalması gerekiyor. */
.cc_vf4ft4MdSc_wirLiQC2uD .catcar-inner {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* ─── Viewport (okların konumlandığı kutu) ─── */

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-viewport {
  position: relative;
}

/* ─── Track ───────────────────────────────────────────────
   MOBİL = temel durum. Grid varsayılan; kaydırmalı seçilirse flex'e döner. */

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-track {
  display: grid;
  grid-template-columns: repeat(var(--cc-m-cols-grid, 2), minmax(0, 1fr));
  gap: var(--cc-gap);
}

.cc_vf4ft4MdSc_wirLiQC2uD .catcar--m-slider .catcar-track {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Kendi kaydırma hissimizi veriyoruz; tarayıcı çubuğu gizli. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.cc_vf4ft4MdSc_wirLiQC2uD .catcar--m-slider .catcar-track::-webkit-scrollbar { display: none; }
.cc_vf4ft4MdSc_wirLiQC2uD .catcar--m-slider .catcar-track:active { cursor: grabbing; }

.cc_vf4ft4MdSc_wirLiQC2uD .catcar--m-slider .catcar-item {
  /* Sütun payı × peek katsayısı — peek açıkken sonraki karttan parça görünür */
  flex: 0 0 calc(
    (100% - (var(--cc-m-cols, 2) - 1) * var(--cc-gap)) / var(--cc-m-cols, 2)
    * var(--cc-peek, 1)
  );
}

/* ─── Masaüstü (≥1024px) ───────────────────────────────── */

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar { --cc-gap: 16px; }

  /* Grid: mobil kaydırmalı olsa bile burada ızgaraya döner */
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-grid .catcar-track {
    display: grid;
    grid-template-columns: repeat(var(--cc-d-cols-grid, 5), minmax(0, 1fr));
    overflow: visible;
    cursor: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-grid .catcar-item { flex: initial; }

  /* Kaydırmalı: mobil grid olsa bile burada şeride döner */
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-slider .catcar-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }

  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-slider .catcar-track::-webkit-scrollbar { display: none; }
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-slider .catcar-track:active { cursor: grabbing; }

  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-slider .catcar-item {
    flex: 0 0 calc(
      (100% - (var(--cc-d-cols, 5) - 1) * var(--cc-gap)) / var(--cc-d-cols, 5)
      * var(--cc-peek, 1)
    );
  }
}

/* ─── Oklar (yalnızca masaüstü kaydırmalı modda basılır) ─── */

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow:hover:not(:disabled) {
  background: var(--color-surface-alt);
  border-color: var(--color-accent);
}

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Kaydırılacak yer kalmadıysa ok soluklaşır ve tıklanamaz olur */
.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow--prev { left: -14px; }
.cc_vf4ft4MdSc_wirLiQC2uD .catcar-arrow--next { right: -14px; }

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar--d-slider .catcar-arrow { display: inline-flex; }
}

/* ─── Dar telefon ─── */

@media (max-width: 380px) {
  /* Üst boşluk burada da alttan az kalsın (yukarıdaki asimetriyi ezmesin) */
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar { --cc-gap: 8px; padding: 16px 0 var(--space-lg, 40px); }
  .cc_vf4ft4MdSc_wirLiQC2uD .catcar-inner { padding-left: 16px; padding-right: 16px; }
}