/* Lycianescapes override – Short breaks mobil, en sonda yüklendiği için tüm stilleri geçer */

/* ============================================ */
/* Lycian Escapes - Hero Banner Overrides      */
/* Mobile: Dönen yazı + doğal görsel boyutu    */
/* Desktop: Akıcı ülke ismi geçişleri          */
/* v11 - Mobile fix                            */
/* ============================================ */

/* ============================================ */
/* BASE BANNER STYLES                          */
/* ============================================ */
body .Banner.Banner-home {
  position: relative !important;
  z-index: 0 !important;
}

/* ============================================ */
/* DESKTOP STYLES (> 768px)                    */
/* Akıcı / smooth ülke ismi geçişleri          */
/* ============================================ */
@media (min-width: 769px) {
  body .Banner.Banner-home .Banner-home-text-spin .words {
    overflow: hidden !important;
    height: 48px !important;
    display: inline-block !important;
    vertical-align: bottom !important;
  }

  body .Banner.Banner-home .Banner-home-text-spin .words-inner {
    height: 336px !important;
    animation: spin_words_desktop 21s ease-in-out infinite !important;
    will-change: transform !important;
  }

  body .Banner.Banner-home .Banner-home-text-spin .words span {
    display: block !important;
    height: 48px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
  }
}

/* Desktop animasyon - smooth easing */
@keyframes spin_words_desktop {
  0%, 11% { transform: translateY(0); }
  14%, 25% { transform: translateY(-48px); }
  28%, 39% { transform: translateY(-96px); }
  42%, 53% { transform: translateY(-144px); }
  56%, 67% { transform: translateY(-192px); }
  70%, 81% { transform: translateY(-240px); }
  84%, 95% { transform: translateY(-288px); }
  98%, 100% { transform: translateY(0); }
}

/* ============================================ */
/* MOBILE STYLES (≤ 768px)                     */
/* ============================================ */
@media (max-width: 768px) {
  /* Banner container */
  body .Banner.Banner-home {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    background-image: none !important;
    overflow: visible !important;
  }

  /* Mobile image - natural size */
  body .Banner.Banner-home img.mobile,
  body .Banner.Banner-home > img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    vertical-align: top !important;
    z-index: 0 !important;
  }

  /* Container overlay */
  body .Banner.Banner-home .container,
  body .Banner.Banner-home .Banner-home-in {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1 !important;
    padding: 30px 20px !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* Text block */
  body .Banner.Banner-home .Banner-home-text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Spin container - CRITICAL: must show h1 and words inline */
  body .Banner.Banner-home .Banner-home-text-spin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* H1 - inline with words */
  body .Banner.Banner-home .Banner-home-text-spin h1 {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  /* Words wrapper - CRITICAL: must be visible and have correct height */
  body .Banner.Banner-home .Banner-home-text-spin .words {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    height: 32px !important;
    vertical-align: bottom !important;
    margin-left: 0 !important;
    position: relative !important;
  }

  /* Words inner - animated element - CRITICAL */
  body .Banner.Banner-home .Banner-home-text-spin .words-inner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 224px !important; /* 7 spans x 32px */
    animation: spin_words_mobile 17.5s ease-in-out infinite !important;
    will-change: transform !important;
    transform: translateY(0) !important;
  }

  /* Each word span - CRITICAL: must be visible */
  body .Banner.Banner-home .Banner-home-text-spin .words-inner span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #4a5568 !important;
  }

  /* H2 */
  body .Banner.Banner-home .Banner-home-text h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 10px 0 !important;
    line-height: 1.3 !important;
  }

  /* Paragraph - CRITICAL: must be visible */
  body .Banner.Banner-home .Banner-home-text p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    color: #4a5568 !important;
    margin: 10px 0 0 0 !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }
}

/* Mobile animasyon */
@keyframes spin_words_mobile {
  0%, 11% { transform: translateY(0); }
  14%, 25% { transform: translateY(-32px); }
  28%, 39% { transform: translateY(-64px); }
  42%, 53% { transform: translateY(-96px); }
  56%, 67% { transform: translateY(-128px); }
  70%, 81% { transform: translateY(-160px); }
  84%, 95% { transform: translateY(-192px); }
  98%, 100% { transform: translateY(0); }
}

/* ============================================ */
/* EXTRA SMALL MOBILE (≤ 480px)                */
/* ============================================ */
@media (max-width: 480px) {
  body .Banner.Banner-home .container,
  body .Banner.Banner-home .Banner-home-in {
    padding: 20px 15px !important;
  }

  body .Banner.Banner-home .Banner-home-text-spin h1 {
    font-size: 18px !important;
  }

  body .Banner.Banner-home .Banner-home-text-spin .words {
    height: 28px !important;
  }

  body .Banner.Banner-home .Banner-home-text-spin .words-inner {
    height: 196px !important; /* 7 spans x 28px */
  }

  body .Banner.Banner-home .Banner-home-text-spin .words-inner span {
    height: 28px !important;
    line-height: 28px !important;
    font-size: 18px !important;
  }

  body .Banner.Banner-home .Banner-home-text h2 {
    font-size: 16px !important;
  }

  body .Banner.Banner-home .Banner-home-text p {
    font-size: 13px !important;
  }
}

/* ============================================ */
/* REDUCED MOTION PREFERENCE                   */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
  body .Banner.Banner-home .Banner-home-text-spin .words-inner {
    animation: none !important;
    transform: translateY(0) !important;
  }
}

/* Short breaks – mobil/tablet (max-width: 991px) – body ile ezme garantisi */
@media (max-width: 991px) {
  body .Opportunity-slider {
    padding: 28px 0 40px !important;
    min-height: unset !important;
  }
  body .Opportunity-slider .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }
  body .Opportunity-slider .Opportunity-in {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  .Opportunity-slider .Opportunity-left {
    width: 100% !important;
    text-align: center;
  }
  .Opportunity-slider .Opportunity-left .icon-opportunity {
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
  .Opportunity-slider .Opportunity-left-head h3 {
    font-size: 22px !important;
    max-width: none;
  }
  .Opportunity-slider .Opportunity-left p {
    font-size: 14px !important;
    margin-top: 8px;
  }
  .Opportunity-slider .Opportunity-right {
    width: 100% !important;
  }
  .Opportunity-slider .Opportunity-right .nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin-bottom: 16px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .Opportunity-slider .Opportunity-right .nav-pills::-webkit-scrollbar {
    display: none;
  }
  .Opportunity-slider .Opportunity-right .nav-item {
    flex-shrink: 0;
  }
  .Opportunity-slider .Opportunity-right .nav-link {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  /* 2x2: 4 dikdörtgen, %15 homojen küçültülmüş (0.85) */
  body .Opportunity-slider .Opportunity-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    width: 100% !important;
  }
  body .Opportunity-slider .Opportunity-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 17px !important;
    min-height: 75px !important;
    max-height: none !important;
    height: auto !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .Opportunity-slider .Opportunity-list-item-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body .Opportunity-slider .Opportunity-list-item-content b {
    font-size: 32px !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    color: var(--bs-theme-first) !important;
  }
  body .Opportunity-slider .Opportunity-list-item-content-in {
    min-width: 0 !important;
    overflow: visible !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
  }
  body .Opportunity-slider .Opportunity-list-item-content-in span,
  body .Opportunity-slider .Opportunity-list-item-content-in p,
  body .Opportunity-slider .Opportunity-list-item-content-in small {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .Opportunity-slider .Opportunity-list-item-content-in span {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
  body .Opportunity-slider .Opportunity-list-item-content-in p {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: normal !important;
  }
  .Opportunity-slider .Opportunity-list-item-content-in small {
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
  body .Opportunity-slider .Opportunity-list-item-count {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: 77px !important;
    min-width: 77px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    border-radius: 3px !important;
  }
  body .Opportunity-slider .Opportunity-list-item-count span,
  body .Opportunity-slider .Opportunity-list-item .Opportunity-list-item-count span {
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  /* Villa Types – Short breaks ile temas etmesin, biraz aşağı */
  body .categories-section {
    margin-top: 24px !important;
    padding-top: 8px !important;
  }
  /* Villa Types – yan yana, alt alta değil */
  body .categories-section .section-caption .primary-title {
    white-space: nowrap !important;
  }
  body .categories-section .section-caption .primary-title span {
    display: inline !important;
  }
}

/* Güven kartı – iyzico logo kenarlara kadar dolsun, boşluk kalmasın */
.H_info-item-icon.H_info-item-icon--logo {
  padding: 4px !important;
}
.H_info-item-icon.H_info-item-icon--logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ============================================ */
/* Countries bölümü – swipe pagination noktaları (Vue gibi) */
/* ============================================ */
.country-section .country-slider-wrapper {
  padding-bottom: 36px;
}
.country-section .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
.country-section .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: var(--bs-theme-grey2, #cad4dd) !important;
  opacity: 1 !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.country-section .swiper-pagination-bullet-active {
  background: var(--bs-theme-first, #7A8C9F) !important;
  transform: scale(1.2);
}
.country-section .swiper-pagination-bullet:hover {
  background: var(--bs-theme-first-light, #94A5B6) !important;
}