/* =========================================================
   CORP SLIDER (Home Hero)
========================================================= */

/* Slider'ın dış kapsayıcısı: Home'daki .home-container ile
   birebir aynı dış genişlik ve responsive margin'lere sahip.
   Böylece slider, duyuru / şehit / hızlı erişim bölümleri ile
   her ekran boyutunda aynı hizada (aynı sol/sağ boşlukta) durur. */
.corp-slider-shell {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.corp-slider {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .14);
  width: 100%;
  margin: 0;
}

.corp-media {
  position: relative;
  overflow: hidden;
  /* PERFORMANS: Sabit 16:6 oranı. Görseller inmeden de tarayıcı
     kutu yüksekliğini biliyor -> CLS (Cumulative Layout Shift) = 0.
     Bu sayede sayfa "zıplama" yapmadan açılır. */
  aspect-ratio: 16 / 6;
  background: #0a0a0a; /* görsel inmeden önce görünen zemin */
}

  /* Görsel üzerinde hafif vinyet */
  .corp-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, .25) 100%);
    pointer-events: none;
  }

.corp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(1.04);
}

/* PERFORMANS: Aktif olmayan carousel-item'lar viewport dışındaki
   görselleri render etme yükünden kurtulsun.
   (İlk yüklemede sadece active item render edilir.) */
.corp-slider .carousel-item:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* Tüm slider animasyonları kapalı (ken-burns, fade, slide) */
.corp-slider .carousel-item,
.corp-slider .carousel-item.active,
.corp-slider .carousel-item-next,
.corp-slider .carousel-item-prev,
.corp-slider .carousel-item-start,
.corp-slider .carousel-item-end,
.corp-slider .corp-img {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* ---------- Mehter Bar ---------- */
.corp-bar {
  position: relative;
  background: var(--msb-bordo);
  color: #fff;
}

.corp-bar-topline {
  height: 4px;
  background: var(--msb-beyaz);
}

.corp-bar-inner {
  display: block;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.corp-title {
  color: #fff;
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .2px;
}

.corp-desc {
  margin: 0;
  opacity: .88;
  font-size: .98rem;
}

.corp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.corp-btn-gold {
  background: var(--msb-beyaz);
  border: 1px solid var(--msb-beyaz);
  color: #2a1a12;
  font-weight: 700;
}

  .corp-btn-gold:hover {
    background: #b88f37;
    border-color: #b88f37;
    color: #2a1a12;
  }

.corp-btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .75);
  color: #fff;
  font-weight: 600;
}

  .corp-btn-outline:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
  }

/* ---------- Carousel kontrolleri ---------- */
.corp-slider .carousel-control-prev,
.corp-slider .carousel-control-next {
  width: 64px;
  background: transparent !important;
  opacity: 1 !important;
  border: none;
}

.corp-slider .carousel-control-prev-icon,
.corp-slider .carousel-control-next-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .35);
  background-size: 18px 18px;
  transition: background-color .25s ease, transform .25s ease;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

.corp-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.corp-slider .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--msb-bordo);
  transform: scale(1.05);
}

.corp-slider .carousel-control-prev:hover,
.corp-slider .carousel-control-next:hover {
  background: transparent !important;
}

/* Indicators */
.corp-slider .carousel-indicators [data-bs-target] {
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: none;
  opacity: 1;
  transition: background-color .25s ease, width .25s ease;
  /* Progress dolumu için pozisyon ve clip */
  position: relative;
  overflow: hidden;
}

.corp-slider .carousel-indicators .active {
  /* Aktif zemin: yarı saydam beyaz; üzerine bordo "dolum" akacak */
  background: rgba(255, 255, 255, .35);
  width: 44px;
}

/* Aktif gösterge üzerindeki ilerleme dolumu.
   - .is-progress class'ı JS tarafından eklenip kaldırılarak animasyon restart edilir.
   - Süre, container'a tanımlanan --corp-indicator-duration custom property'sinden gelir
     (data-bs-interval ile aynı değeri Razor'dan veriyoruz). */
.corp-slider .carousel-indicators .active.is-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--msb-bordo);
  transform-origin: left center;
  transform: scaleX(0);
  animation: corp-indicator-progress var(--corp-indicator-duration, 5000ms) linear forwards;
  will-change: transform;
}

/* Slider üzerine hover edildiğinde Bootstrap carousel duruyor (pause="hover" default).
   Progress dolumunu da onunla senkron olarak duraklatıyoruz. */
.corp-slider:hover .carousel-indicators .active.is-progress::after {
  animation-play-state: paused;
}

@keyframes corp-indicator-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* .home-container ile birebir aynı dış margin'ler:
   1199px ↓ 16px, 992px ↓ 14px, 768px ↓ 12px, 576px ↓ 10px */
@media (max-width: 1199px) {
  .corp-slider-shell {
    max-width: 100%;
    margin: 0 16px;
    width: auto;
  }
}

@media (max-width: 992px) {
  .corp-slider-shell {
    margin: 0 14px;
  }

  .corp-media {
    /* Tablet: orijinal görsel oranını koru, kırpma yapma */
    aspect-ratio: auto;
    max-height: 520px;
  }

  .corp-img {
    height: auto;
    max-height: 520px;
    object-fit: contain;
    background: #000;
  }

  .corp-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .corp-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .corp-slider-shell {
    margin: 0 12px;
  }

  .corp-slider {
    border-radius: 14px;
  }

  .corp-media {
    aspect-ratio: auto;
  }

  .corp-img {
    /* Mobil: tam görseli göster (üzerindeki yazılar/figürler kaybolmasın) */
    height: auto;
    max-height: none;
    object-fit: contain;
    background: #000;
    filter: none; /* Küçük ekranda fazladan filtre uygulamayalım */
  }

  /* Vinyet mobilde görsel üzerine bindiğinde bandlı görseli koyulaştırır;
       contain modunda gereksizleşir, kapatalım. */
  .corp-media::after {
    display: none;
  }

  .corp-bar-inner {
    padding: 14px 14px;
  }

  .corp-title {
    font-size: 1.1rem;
  }

  .corp-desc {
    font-size: .9rem;
  }

  .corp-actions {
    width: 100%;
    margin-top: 10px;
  }

    .corp-actions .btn {
      flex: 1 1 auto;
      font-size: .88rem;
      padding: 8px 12px;
    }

  /* Prev/Next butonları mobilde resmin üstünde daha az yer kaplasın */
  .corp-slider .carousel-control-prev,
  .corp-slider .carousel-control-next {
    width: 40px;
    align-items: center;
  }

  .corp-slider .carousel-control-prev-icon,
  .corp-slider .carousel-control-next-icon {
    width: 34px;
    height: 34px;
    background-size: 14px 14px;
  }

  /* Indicators görselin alt çizgisinden bir parça yukarıya gelsin */
  .corp-slider .carousel-indicators {
    margin-bottom: .5rem;
  }
}

@media (max-width: 576px) {
  .corp-slider-shell {
    margin: 0 10px;
  }

  .corp-slider {
    border-radius: 12px;
  }

  .corp-img {
    height: auto;
    object-fit: contain;
  }

  .corp-bar-inner {
    padding: 14px;
  }

  .corp-desc {
    font-size: .88rem;
  }

  .corp-slider .carousel-indicators [data-bs-target] {
    width: 24px;
  }

  .corp-slider .carousel-indicators .active {
    width: 32px;
  }

  /* Çok küçük ekranlarda kontrolleri biraz daha sıkıştır */
  .corp-slider .carousel-control-prev,
  .corp-slider .carousel-control-next {
    width: 34px;
  }

  .corp-slider .carousel-control-prev-icon,
  .corp-slider .carousel-control-next-icon {
    width: 30px;
    height: 30px;
    background-size: 12px 12px;
  }
}

@media (max-width: 480px) {
  .corp-img {
    height: auto;
    object-fit: contain;
  }

  .corp-title {
    font-size: 1rem;
  }

  .corp-desc {
    font-size: .82rem;
  }

  .corp-actions {
    flex-direction: column;
  }

    .corp-actions .btn {
      width: 100%;
    }
}