/* ==========================================================
   CLUB AYDINOGLU - HERO (Fullscreen) + HERO SLIDER
   - iOS Safari vh fix (100svh)
   - Responsive typography (clamp)
   - Single control offsets (header height + content offset)
========================================================== */

/* ---- Global vars ---- */
:root{
  --header-h: 90px;          /* header yüksekliği: 80-100 arası ayarla */
  --hero-top-offset: 70px;   /* yazıları aşağı çek (desktop) */
}

/* ---- HERO: container ---- */
.hero-fs{
  position: relative;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
}

/* Fallback: svh desteklemeyen tarayıcılar */
@supports not (height: 100svh){
  .hero-fs{ min-height: calc(100vh - var(--header-h)); }
}

/* ---- HERO: background image (cover) ---- */
.hero-fs__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-fs__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* gerekirse cihaz bazlı override ederiz */
  display: block;
}

/* ---- HERO: overlay (readability) ---- */
.hero-fs__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.20) 55%,
    rgba(0,0,0,.05) 100%
  );
}

/* ---- HERO: content ---- */
.hero-fs__content{
  position: relative;
  z-index: 3;

  /* içeriği dikey ortala */
  min-height: inherit;
  display: flex;
  align-items: center;

  /* genel padding (çok abartmadan) */
  padding: 32px 0;

  /* yazıları aşağı çek */
  transform: translateY(var(--hero-top-offset));
}

/* ---- HERO: typography ---- */
.hero-kicker{
  color: rgba(255,255,255,.75);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .6px;
}

.hero-title{
  color: #fff;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(32px, 4.6vw, 68px);
}

.hero-desc{
  color: rgba(255,255,255,.85);
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 680px;
}

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

/* Tablet / iPad dikey (senin ölçün 820px bu aralıkta) */
@media (min-width: 768px) and (max-width: 991px){
  :root{ --hero-top-offset: 55px; }
  .hero-fs__content{ padding: 22px 0; }
  .hero-title{
    font-size: clamp(30px, 4.0vw, 52px);
    line-height: 1.08;
  }
  .hero-desc{
    font-size: 18px;
    max-width: 620px;
  }
}

/* iPad yatay 1024px gibi durumlar (istersen aktif kalsın) */
@media (min-width: 992px) and (max-width: 1199px){
  :root{ --hero-top-offset: 60px; }
}

/* Mobil */
@media (max-width: 575px){
  :root{ --hero-top-offset: 35px; }

  .hero-fs__content{ padding: 18px 0; }
  .hero-title{ font-size: clamp(28px, 8vw, 40px); }
  .hero-desc{ font-size: 15px; }

  /* Mobilde okunurluk için overlay yönünü değiştir */
  .hero-fs__overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,.15) 100%
    );
  }
}

/* 360px gibi küçük telefonlar */
@media (max-width: 390px){
  .hero-fs__content{ padding: 14px 0; }

  .hero-title{
    font-size: 34px;
    line-height: 1.08;
  }

  .hero-desc{
    font-size: 15px;
    line-height: 1.55;
    max-width: 320px;
  }

  .hero-kicker{ font-size: 12px; }
}

/* ==========================================================
   HERO SLIDER (2+ slide: fade + dots + arrows)
========================================================== */
.hero-slider{ position: relative; }

.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}

.hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Dots */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
  cursor: pointer;
}

.hero-dot.is-active{ background: rgba(255,255,255,.95); }

/* Arrows */
.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.hero-prev{ left: 14px; }
.hero-next{ right: 14px; }

@media (max-width: 575px){
  .hero-arrow{ display: none; } /* mobilde okları kapat */
}


/* Slider alanı yuvarlak köşe */
.hero-slider{
  border-radius: 22px;     /* köşe yuvarlaklığı */
  overflow: hidden;        /* taşan bg ve overlay'i kırp */
}

/* Opsiyonel: hafif gölge (premium görünür) */
.hero-slider{
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* Mobilde daha az yuvarlak (daha doğal) */
@media (max-width: 575px){
  .hero-slider{ border-radius: 16px; }
}


/* ==========================================================
   FIX: Tablet'te ortalama + biraz daha aşağı alma
========================================================== */

/* Row'un tam genişlik almasını sağla (flex container içinde kayma olmaması için) */
.hero-fs__content .row{
  width: 100%;
}

/* Tablet ve altında metinleri kesin ortala (bazı temalarda override olabiliyor) */
@media (max-width: 991px){
  .hero-fs .hero-kicker,
  .hero-fs .hero-title,
  .hero-fs .hero-desc{
    text-align: center !important;
  }

  /* max-width yüzünden ortada durması için */
  .hero-desc{
    margin-left: auto;
    margin-right: auto;
  }
}

/* ✅ Daha aşağı alalım: Desktop + Tablet */
:root{
  --hero-top-offset: 85px;   /* PC: 70 yerine 85 (gerekirse 95) */
}

@media (min-width: 768px) and (max-width: 991px){
  :root{ --hero-top-offset: 75px; }  /* Tablet: 55 yerine 75 */
}

/* Mobil aynı kalsın istersen */
@media (max-width: 575px){
  :root{ --hero-top-offset: 40px; }  /* 35 -> 40 (isteğe bağlı) */
}



/* Header menü tek satır kalsın */
@media (min-width: 992px){
  #mainNav{
    flex-wrap: nowrap;
    gap: 10px;
  }
  #mainNav > li > a{
    white-space: nowrap;
  }
}


/* Menü linkleri satır atmasın */
#mainNav > li > a { white-space: nowrap; }

/* Biraz daha sıkı dursun (isteğe bağlı) */
#mainNav { gap: 6px; }


.feature-box-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.feature-box-icon .p-absolute {
  left: 0;
  top: 0;
}

.feature-box-icon i {
  position: relative;
  z-index: 1;
}


.feature-box-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;  /* ikon blob’un tam ortasına gelsin */
    width: 80px;
    height: 80px;
}

.feature-box-icon .p-absolute {
    left: 0;
    top: 0;
}

.feature-box-icon i {
    position: relative;
    z-index: 1;
    font-size: 32px;          /* ikon boyutu */
}






.pool-gallery-slider .pool-slide {
    border-radius: 18px;
    overflow: hidden;
    background: #f4f4f4;
}

.pool-gallery-slider .pool-slide img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

/* Tablet */
@media (max-width: 991.98px) {
    .pool-gallery-slider .pool-slide img {
        height: 320px;
    }
}

/* Mobil */
@media (max-width: 575.98px) {
    .pool-gallery-slider .pool-slide img {
        height: 210px;
    }

    .pool-gallery-slider .owl-nav button.owl-prev,
    .pool-gallery-slider .owl-nav button.owl-next {
        width: 38px;
        height: 38px;
        line-height: 38px;
    }
}




/* Sidebar üyelik kutusu - mobil düzenleme */
@media (max-width: 575.98px) {
  .membership-box {
    padding: 1.25rem !important;
  }

  .membership-box .m-3 {
    margin: 0 !important;
  }

  .membership-box h4 {
    font-size: 1.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .membership-box p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.25rem !important;
  }

  .membership-box .feature-box {
    align-items: center !important;
  }

  .membership-box .feature-box-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  .membership-box .feature-box-icon img,
  .membership-box .feature-box-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .membership-box .feature-box-info strong {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }

  .membership-box .feature-box-info a {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .membership-box .pt-4 {
    padding-top: 1rem !important;
  }

  .membership-box .mb-4 {
    margin-bottom: 1rem !important;
  }
}


.membership-box .membership-contact-item {
    margin-bottom: 1.5rem;
}

.membership-box .membership-contact-item:last-child {
    margin-bottom: 0;
}



.weekly-schedule .col-xl {
    flex: 1 0 0%;
}

.schedule-day-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
}

.schedule-day-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.07);
}

.schedule-day-header {
    background: #f7f7f7;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    border-bottom: 1px solid #ececec;
}

.schedule-day-body {
    padding: 16px;
}

.schedule-class-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.schedule-class-item:last-child {
    border-bottom: 0;
}

.schedule-time {
    min-width: 62px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #0d6efd;
    background: rgba(13,110,253,0.08);
    border-radius: 10px;
    text-align: center;
    padding: 10px 8px;
}

.schedule-content h5 {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px 0;
}

.schedule-content span {
    display: block;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .schedule-day-header {
        font-size: 17px;
        padding: 14px 16px;
    }

    .schedule-day-body {
        padding: 14px;
    }

    .schedule-class-item {
        gap: 10px;
        padding: 10px 0;
    }

    .schedule-time {
        min-width: 58px;
        font-size: 13px;
        padding: 9px 6px;
    }

    .schedule-content h5 {
        font-size: 15px;
    }

    .schedule-content span {
        font-size: 12px;
    }
}