/* OYPAR BALATA - Slider Styles
   Split from main.css for maintainability */
/* =============================================
   HERO / SLIDER — Reference Style
   Light bg · Product image LEFT · Text RIGHT
   ============================================= */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: #edf1f7;
  border-bottom: 1px solid var(--color-border);
}

.slider-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(130deg,#e4ecf5 0%,#f0f5fb 55%,#e8f0f8 100%);
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.06;
}

.slide-overlay { display: none; }

/* 2-column grid inside container */
.slide-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: stretch;
  min-height: 600px;
  gap: 0;
  width: 100%;
}

/* LEFT col — product image, bottom-anchored */
.slide-image-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 2rem;
  position: relative;
  overflow: visible;
}

.slide-product-image {
  width: auto;
  max-width: 100%;
  height: 400px;
  max-height: 95%;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s 0.3s ease;
  filter: drop-shadow(0 24px 48px rgba(15,52,96,0.18));
}
.slide.active .slide-product-image { opacity: 1; transform: translateX(0); }

.slide-product-placeholder {
  width: 88%;
  height: 300px;
  background: linear-gradient(135deg,rgba(15,52,96,0.04),rgba(15,52,96,0.10));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s 0.3s ease;
}
.slide.active .slide-product-placeholder { opacity: 1; transform: translateX(0); }
.slide-product-placeholder i { font-size: 5rem; color: var(--color-primary); opacity: 0.15; }

/* RIGHT col — text */
.slide-content {
  position: relative;
  z-index: 2;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.slide-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s 0.2s ease;
}
.slide.active .slide-eyebrow { opacity: 1; transform: translateY(0); }

.slide-title {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.6s 0.35s ease;
}
.slide.active .slide-title { opacity: 1; transform: translateY(0); }

.slide-subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s 0.5s ease;
}
.slide.active .slide-subtitle { opacity: 1; transform: translateY(0); }

.slide-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s 0.65s ease;
}
.slide.active .slide-actions { opacity: 1; transform: translateY(0); }

/* Dots — bottom right inside container */
.slider-controls {
  position: absolute;
  bottom: 1.25rem;
  right: calc((100% - var(--container-max)) / 2 + var(--container-pad));
  display: flex;
  gap: 0.45rem;
  z-index: 10;
}
@media (max-width: 1640px) { .slider-controls { right: var(--container-pad); } }

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(15,52,96,0.2);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.slider-dot.active { background: var(--color-primary); width: 22px; }

/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: white;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 10;
  box-shadow: 0 4px 16px rgba(15,52,96,0.10);
}
.slider-arrow:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); transform: translateY(-50%) scale(1.05); }
.slider-arrow.prev { left: 1.25rem; }
.slider-arrow.next { right: 1.25rem; }

/* ── TABLET (≤900px): stack vertically, keep card ── */
@media (max-width: 900px) {
  .slide-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
  }
  .slide-image-col {
    min-height: 200px;
    padding: 1.5rem 1rem 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .slide-product-image { height: 180px !important; max-width: 280px !important; object-position: center !important; }
  .slide-content { padding: 1rem 1.5rem 2rem !important; text-align: center !important; }
  .slide-actions { justify-content: center !important; }
}

/* ── MOBILE (≤640px): full-width, 350px, image top / text bottom ── */
@media (max-width: 640px) {

  /* Remove card margin/radius — full bleed */
  .hero-slider { padding: 0 !important; }
  .hero-slider .container { padding: 0 !important; max-width: 100% !important; }
  .slider-outer { padding: 0 !important; }
  .slider-card { border-radius: 0 !important; box-shadow: none !important; }

  /* Slide: exact 500px */
  .slide { height: 500px !important; min-height: 500px !important; }
  .slide-inner {
    grid-template-columns: 1fr !important;
    grid-template-rows: 220px 1fr !important;
    height: 500px !important;
    min-height: 500px !important;
    gap: 0 !important;
  }

  /* Image row: top 220px, centered */
  .slide-image-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem !important;
    height: 220px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .slide-product-image {
    height: 190px !important;
    max-width: 280px !important;
    object-position: center center !important;
  }

  /* Text row: fills remaining space, vertically centered */
  .slide-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.75rem 1.5rem 1.25rem !important;
    text-align: center !important;
  }
  .slide-title {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.03em !important;
  }
  .slide-title .title-small {
    font-size: 0.42em !important;
    margin-bottom: 0.2em !important;
    letter-spacing: 0.08em !important;
  }
  .slide-actions { justify-content: center !important; margin-top: 0.6rem !important; }
  .btn-slide-catalog { padding: 0.55rem 1.35rem !important; font-size: 0.85rem !important; }

  /* Full-bg slide: also 500px */
  .slide-fullbg-wrap {
    height: 500px !important;
    min-height: 500px !important;
    justify-content: center !important;
  }
  .slide-fullbg-content {
    width: 90% !important;
    padding: 1.5rem !important;
    text-align: center !important;
    align-items: center !important;
  }
  .slide-title-fullbg { font-size: 2rem !important; }

  /* Arrows: hidden on mobile */
  .slider-arrow { display: none !important; }

  /* Dots: keep visible */
  .slider-controls { bottom: 0.4rem !important; right: 50% !important; transform: translateX(50%) !important; }
}