/* index.css — sadece ana sayfa (hero + kategori kartları) stilleri */

/* -------- Hero video -------- */
.hero-section {
  position: relative;
  height: 65vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* -------- Soldaki dikey kartlar -------- */
.hero-cards-left {
  position: absolute;
  top: clamp(10px,5%,20px);
  left: clamp(10px,5%,20px);
  width: clamp(180px,20%,280px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: transparent;
  backdrop-filter: blur(4px);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
  z-index: 4;
}
.hero-cards-left .hero-card-link { display: block; color: inherit; text-decoration: none; }
.hero-cards-left .hero-card-item {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  border-radius: .25rem;
  height: 110px;
  cursor: pointer;
}
.hero-cards-left .hero-card-item img {
  flex: 0 0 30%;
  max-width: 30%;
  height: 100%;
  object-fit: cover;
}
.hero-cards-left .hero-card-body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
}
.hero-cards-left .hero-card-body h6 { margin: 0; font-size: .9rem; text-align: center; line-height: 1.2; }
.hero-cards-left .hero-card-item.card-glow::before {
  content: "";
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border-radius: inherit;
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
  background-size: 300% 300%;
  z-index: 0;
}
.hero-cards-left .hero-card-item.card-glow:hover::before { opacity: 1; }

/* -------- Login kutusu -------- */
.hero-login {
  position: absolute;
  top: clamp(10px,5%,20px);
  right: clamp(10px,5%,20px);
  width: clamp(180px,20%,300px);
  padding: 20px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
  z-index: 4;
}
@media (max-width: 576px) {
  .hero-login, .hero-cards-left { display: none !important; }
}

/* ======== Kategori kartları ======== */
.hero-categories-grid {
  position: relative;
  margin-top: -11%;
  padding-top: 10%;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 5;
}
.hero-categories-grid .card {
  transform: scale(1.05);
  border: 2px solid rgba(255,255,255,0.8);
  background: #fff;
}
.hero-category-image {
  height: 120px;
  width: 100%;
  object-fit: contain;    /* resmi kırpma */
  background-color: #fff; /* boşluklar beyaz olsun */
  padding: 5px;           /* logolar nefes alsın */
  border-radius: 4px;
}
.card-img-square { position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
.card-img-square .card-img-top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Responsive */
@media (max-width:1599px) { .hero-categories-grid .col-lg-2 { flex: 0 0 25%; max-width:25%; } }
@media (max-width:1199px) { .hero-categories-grid .col-md-4 { flex: 0 0 33.333%; max-width:33.333%; } }
@media (max-width:991px)  { .hero-categories-grid .col-6    { flex: 0 0 50%; max-width:50%; } }

/* ============================================
   Kart görselleri override - tüm kırpmaları engelle
   ============================================ */
/* .card-img-top,
.hero-category-image,
.card-img-square img,
.user-product-card .card-img-top,
.category-card .card-img-top {
  object-fit: contain !important;
  background-color: #fff;
  padding: 5px;
  border-radius: 4px;
} */

/* Kart görselleri override - kırpma engelli, tema uyumlu */
.card-img-top,
.hero-category-image,
.card-img-square img,
.user-product-card .card-img-top,
.category-card .card-img-top {
  object-fit: contain !important;
  background-color: var(--card-bg, #f9f9f9); /* varsayılan açık gri */
  padding: 5px;
  border-radius: 4px;
}

/* Dark mod uyumu */
[data-theme="dark"] .card-img-top,
[data-theme="dark"] .hero-category-image,
[data-theme="dark"] .card-img-square img,
[data-theme="dark"] .user-product-card .card-img-top,
[data-theme="dark"] .category-card .card-img-top {
  background-color: var(--dark-bg, #1e1e1e); /* dark mod için */
}