/* HeroSlideView — HeroBanner (tek banner) ve HeroSlide (slayt) ortak görünümü.
   Kaynak: INDEX #01 videoblok-1 (brief/INDEX-01-videoblok-1.md §6); stiller HeroBanner/styles.css'ten taşındı. */

.cc_ois9tmeu_PiSNQaNyGB .hsv, .cc_ois9tmeu_fehIwpaGWU .hsv {
  --vh-white: #ffffff; /* c2: hero üstü metin rengi (tema beyaz-arkaplan token'ına bağlanmadı) */
  position: relative; /* .vh__desc slayta göre konumlanır */
  text-align: center;
}

/* .bannerVideoWrapper — s81 */
.cc_ois9tmeu_PiSNQaNyGB .vh__media, .cc_ois9tmeu_fehIwpaGWU .vh__media {
  min-width: auto;
  min-height: auto;
}

/* .blokResimLink — s137 */
.cc_ois9tmeu_PiSNQaNyGB .vh__media-link, .cc_ois9tmeu_fehIwpaGWU .vh__media-link {
  display: block;
  color: var(--su-text);
  transition-property: background, color;
  transition-duration: 0.1s, 0.1s;
  transition-timing-function: ease-in-out, ease-in-out;
  cursor: pointer;
}

/* <video> — s262; kutu 1440×780 (24:13) oranını her genişlikte korur */
.cc_ois9tmeu_PiSNQaNyGB .vh__video, .cc_ois9tmeu_fehIwpaGWU .vh__video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1440 / 780;
  object-fit: cover;
  object-position: left center; /* merwishop banner'larında metin solda; dar kırpmada sol kenar korunur */
}
/* Görsel hizası (HeroSlide "Görsel hizası"): kutudan geniş görsel cover ile kırpılırken korunacak kenar */
.cc_ois9tmeu_PiSNQaNyGB .hsv--center .vh__video, .cc_ois9tmeu_fehIwpaGWU .hsv--center .vh__video {
  object-position: center center;
}
.cc_ois9tmeu_PiSNQaNyGB .hsv--right .vh__video, .cc_ois9tmeu_fehIwpaGWU .hsv--right .vh__video {
  object-position: right center;
}
.cc_ois9tmeu_PiSNQaNyGB .vh__pic, .cc_ois9tmeu_fehIwpaGWU .vh__pic {
  display: block;
  width: 100%;
}
/* Görsel modu: kutu kaynaktaki video kutusuyla aynı 24:13 (1440→780, 1024→555, 768→408); görsel cover ile
   kırpılır (1900×850 banner: sağdan ~%17, soldaki gömülü yazı korunur). Önceden doğal oran (1440→644) kullanılıyor,
   karolar kaynaktan 136px yukarıda başlıyordu.
   Bilinçli sapma: ≤767'de AYRI mobil görsel (3:4) verilmişse doğal oranı korunur (360→480; kaynak 195) —
   dikey görseli 24:13'e kırpmak modeli/gömülü yazıyı keser. Mobil görsel boş bırakılırsa mobil de 24:13 olur. */
.cc_ois9tmeu_PiSNQaNyGB .vh__video--img, .cc_ois9tmeu_fehIwpaGWU .vh__video--img {
  height: auto;
}
@media (max-width: 767px) {
  .cc_ois9tmeu_PiSNQaNyGB .vh__pic--mobile .vh__video--img, .cc_ois9tmeu_fehIwpaGWU .vh__pic--mobile .vh__video--img {
    aspect-ratio: auto;
    /* 481–767 arası dikey görsel ekranı aşmasın (767'de 1002px oluyordu); 360×780'de etkisiz (480 < 780) */
    max-height: 100vh;
    max-height: 100svh;
    object-position: center top;
  }
}
.cc_ois9tmeu_PiSNQaNyGB .vh__video--empty, .cc_ois9tmeu_fehIwpaGWU .vh__video--empty {
  background-color: var(--su-bg-gray);
}

/* .bannerDescriptionWrapper — s264..s267 (textBottomAlign: bottom:0, yükseklik içerikten) */
.cc_ois9tmeu_PiSNQaNyGB .vh__desc, .cc_ois9tmeu_fehIwpaGWU .vh__desc {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding: 40px 20px;
  pointer-events: none;
}

/* .bannerTitle — s268..s270 */
.cc_ois9tmeu_PiSNQaNyGB .vh__title, .cc_ois9tmeu_fehIwpaGWU .vh__title {
  min-width: auto;
  min-height: auto;
  margin-bottom: 5px;
  color: var(--vh-white);
  font-size: 26px;
  font-weight: 300;
  line-height: 32px; /* kaynak kutu 381.9×32 (Helvetica Neue normal); Roboto normal 30px kalıyor */
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* .bannerSubTitle — s271/s272 */
.cc_ois9tmeu_PiSNQaNyGB .vh__subtitle, .cc_ois9tmeu_fehIwpaGWU .vh__subtitle {
  min-width: auto;
  min-height: auto;
  color: var(--vh-white);
  font-size: 13px;
  font-weight: 300;
  line-height: 16px; /* kaynak kutu 356.1×16 (w360: 2 satır = 32) */
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* .bannerButtonWrapper — s273 */
.cc_ois9tmeu_PiSNQaNyGB .vh__actions, .cc_ois9tmeu_fehIwpaGWU .vh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: auto;
  min-height: auto;
}

/* .bannerButton — s274/s275 (+ ::after s276/s277: 1px'lik çizgi, kaynakta arka plansız) */
.cc_ois9tmeu_PiSNQaNyGB .vh__btn, .cc_ois9tmeu_fehIwpaGWU .vh__btn {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  min-width: auto;
  min-height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 2px;
  border-radius: 5px;
  color: var(--vh-white);
  font-size: 11px;
  font-weight: 300;
  line-height: 13px; /* 13 + padding-bottom 2 = kaynak kutu 95.6×15 */
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.5s;
  cursor: pointer;
}
.cc_ois9tmeu_PiSNQaNyGB .vh__btn::after, .cc_ois9tmeu_fehIwpaGWU .vh__btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 1px;
}


/* --- tablet: ≤1024 (w1024 → s434 / s260) */
@media (max-width: 1024px) {
  .cc_ois9tmeu_PiSNQaNyGB .vh__desc, .cc_ois9tmeu_fehIwpaGWU .vh__desc {
    padding: 20px;
  }
  .cc_ois9tmeu_PiSNQaNyGB .vh__title, .cc_ois9tmeu_fehIwpaGWU .vh__title {
    font-size: 25px;
    line-height: 30px; /* kaynak 367.2×30 */
  }
}

/* --- küçük mobil: ≤480 (w360 → s264 / s268 / s274) */
@media (max-width: 480px) {
  .cc_ois9tmeu_PiSNQaNyGB .vh__desc, .cc_ois9tmeu_fehIwpaGWU .vh__desc {
    padding: 40px 25px;
  }
  .cc_ois9tmeu_PiSNQaNyGB .vh__title, .cc_ois9tmeu_fehIwpaGWU .vh__title {
    font-size: 18px;
    line-height: 22px; /* kaynak 264.4×22 */
  }
  .cc_ois9tmeu_PiSNQaNyGB .vh__btn, .cc_ois9tmeu_fehIwpaGWU .vh__btn {
    font-size: 10px;
    line-height: 12px; /* 12 + 2 = kaynak 86.9×14 */
  }
  .cc_ois9tmeu_PiSNQaNyGB .vh__btn::after, .cc_ois9tmeu_fehIwpaGWU .vh__btn::after {
    top: 13px;
  }
}