/* ===============================
   EROL BABA AKADEMİ — Fitness UI
   (Harici CSS; resimler HTML'de inline)
   =============================== */

/* ---- Temel Değerler (masaüstü) ---- */
:root{
  --hero-h:   clamp(720px, 100vh, 1300px); /* slider (masaüstü) */
  --header-h: clamp(480px, 72vh, 980px);   /* header (masaüstü) */
  --cta-h:    clamp(520px, 78vh, 960px);   /* CTA (masaüstü) */

  --navy-1: #0e234f;    /* koyu lacivert */
  --navy-2: #0b1738;    /* daha koyu lacivert */
  --ink:    #000000;
  --light:  #f5f7fb;    /* açık zemin */
  --text:   #0b1230;
  --accent: #7ab8ff;    /* ikon/madde vurgusu */
  --accent-2:#9ecbff;
}

/* küçük reset */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
img{ max-width:100%; display:block; }

/* ================= HERO SLIDER ================= */
.hero-slider{
  position:relative; width:100%; margin:0; padding:0; overflow:hidden; background:#000;
}
.hero-slider .slider-track{
  display:flex; width:100%; height:var(--hero-h);
  transition: transform .6s ease;
}
.hero-slider .slide{
  min-width:100%; height:var(--hero-h); position:relative;
  filter: contrast(1.03) saturate(1.02);
}
/* inline <img>; cover */
.hero-slider .slide img{
  width:100%; height:100%; object-fit:cover;
}

/* Slider kontrolleri */
.hero-slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.55); color:#fff; border:none;
  width:44px; height:44px; border-radius:999px; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.hero-slider .nav:hover{ background: rgba(0,0,0,.7); }
.hero-slider .prev{ left:12px; }
.hero-slider .next{ right:12px; }

.hero-slider .dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:4;
}
.hero-slider .dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.15); cursor:pointer;
}
.hero-slider .dot.active{ background:#fff; }

/* ================= HEADER BLOKLARI ================= */
/* Lacivert ➜ siyah zemin */
header.main-header{
  height: var(--header-h);
  padding: 32px 0;
  background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--ink) 100%);
  color:#fff; position:relative;
  box-shadow: inset 0 -50px 100px rgba(0,0,0,.08);
}

/* İç düzen: grid 1fr 1fr — eşit genişlik & aynı yükseklik (masaüstü) */
header.main-header .container{ padding-left:0; padding-right:0; margin:0 auto; }
header.main-header .row-wrapper{
  height: calc(var(--header-h) - 64px); /* padding düşüldü */
  display:grid; grid-template-columns: 1fr 1fr; gap:24px;
  align-items: stretch;
}

/* Kutular */
.main-header .info-box,
.main-header .image-box{ min-width:0; height:100%; margin:0; }

/* Info-box: lacivert gradient + içte scroll (masaüstü) */
.main-header .info-box{
  display:flex; flex-direction:column;
  background: linear-gradient(140deg, var(--navy-1) 0%, var(--navy-2) 45%, var(--ink) 100%);
  color:#fff; padding:24px; border-radius:16px;
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
  overflow:auto; /* uzun metin kutu içinde kayar */
}
.main-header .info-box h2,
.main-header .info-box h4,
.main-header .info-box p,
.main-header .info-box li{ color:#fff; margin:0 0 .75rem; }
.main-header .info-box :last-child{ margin-bottom:0; }

.icon-wrapper{ font-size:48px; margin-bottom:12px; color: var(--accent-2); }
.benefits{ list-style:none; padding:0; margin:10px 0 0; }
.benefits li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.benefits li i{ color: var(--accent); margin-top:3px; }

/* Image: cover + eşit yükseklik */
.main-header .image-box img{
  width:100%; height:100%; object-fit:cover;
  border-radius:16px;
  box-shadow: 0 22px 52px rgba(0,0,0,.28);
}

/* ================= SECTION ZEMİNLER — AÇIK ================= */
section{ background: var(--light); color: var(--text); }
section.hero-slider{ background: transparent; }

/* ================= CTA ================= */
.cta-section{ margin:0; padding:0; }
.cta-section h2{
  margin:0; padding:14px 10px; text-align:center; letter-spacing:.5px;
  text-transform:uppercase; font-weight:800; color:#fff;
  background: linear-gradient(90deg, #0b1224, #000814);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.cta-cover-wrap{ width:100%; margin:0; padding:0; }
.cta-cover{
  width:100%; height: var(--cta-h);
  object-fit:cover; display:block;
  box-shadow: 0 22px 52px rgba(0,0,0,.28);
}

/* ================= ÜRÜN KARTLARI ================= */
.products-section{ background: transparent; padding: 40px; margin:0; }
.product-offer{
  text-align:center; margin: 20px auto; background: #ffffff;
  padding: 24px; border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
  border: 1px solid #E5E7EB;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.product-offer:before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 200px at -10% -20%, rgba(16,34,78,.10), transparent),
    radial-gradient(600px 200px at 110% 120%, rgba(11,23,56,.10), transparent);
}
.product-offer:hover{ transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,0.16); }
.product-badge{
  display:inline-block; padding:8px 12px; border-radius:8px; margin-bottom:12px; color:#fff; font-weight:700;
  background: linear-gradient(90deg, #0e214a, #09132e);
}
.product-offer h2{ font-size: 1.6rem; margin: 6px 0 8px; color:#0f172a; font-weight:800; }
.product-offer h4{ font-size: 1.1rem; margin: 0 0 12px; color:#334155; font-weight:600; }
.product-offer ul{ text-align:left; padding-left: 0; list-style: none; margin: 12px 0; }
.product-offer ul li{ margin-bottom: 8px; font-weight: 500; color: #2b2b2b; display:flex; gap:8px; }
.product-offer ul li i{ color: var(--accent); margin-top:3px; }
.price{
  display:inline-block; padding:10px 16px; border-radius:999px; margin: 10px 0 14px; font-size: 1.15rem; font-weight:800;
  background: linear-gradient(90deg, #e0f2fe, #e6fffa); border: 1px solid #cbd5e1; color:#001f3f;
}
.product-offer .btn{
  background: linear-gradient(90deg, #cc0000, #b30000);
  color:#fff; padding:.8rem 1.6rem; border:none; cursor:pointer; border-radius:10px; font-weight:800;
  box-shadow: 0 8px 20px rgba(204,0,0,0.25); transition: transform .15s ease, box-shadow .15s ease;
}
.product-offer .btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(204,0,0,0.35); }

.flex-row{  gap:22px; flex-wrap:wrap; }
.flex-col{ flex:1; min-width:300px; }

/* ================= Responsive (MOBİL) =================
   Mobilde: yükseklikler auto + üst/alt boşluklar SIFIR.
   Ayrıca tüm header iç aile (info/image + wrapper) dikey ve sıfır boşlukla davranır.
======================================================== */
@media (max-width: 991.98px){

  /* GENEL boşluk temizliği (yalnız mobil) */
  body, section, header, .container{ margin:0 !important; padding:0 !important; }
  .my-5, .py-1{ margin:0 !important; padding:0 !important; }

  /* HERO SLIDER: tamamen auto yükseklik, sıfır boşluk */
  .hero-slider{ margin:0 !important; padding:0 !important; }
  .hero-slider .slider-track,
  .hero-slider .slide{ height:auto !important; }
  .hero-slider .slide img{
    width:100% !important; height:auto !important; object-fit:cover;
  }
  .hero-slider .dots{ bottom:8px; }

  /* HEADER: auto yükseklik ve DIŞ boşluk yok */
  header.main-header{
    height:auto !important;
    margin:0 !important; padding:0 !important; border:0;
    box-shadow:none; /* istersen geri açabilirsin */
    background: linear-gradient(160deg, var(--navy-1) 0%, var(--navy-2) 55%, var(--ink) 100%);
  }

  /* Header container & satır: tam sıfır boşluk, dikey yığılma */
  header.main-header .container{
    margin:0 !important; padding:0 !important; width:100%;
  }
  header.main-header .row-wrapper{
    margin:0 !important; padding:0 !important;
    height:auto !important;
    display:flex !important; flex-direction:column !important;
    gap:0 !important; align-items:stretch !important;
  }

  /* AİLE: info & image kutuları — sıfır dış boşluk ve auto yükseklik */
  .main-header .info-box,
  .main-header .image-box{
    margin:0 !important; padding:0 !important;
    height:auto !important; min-height:0 !important;
    border-radius:0 !important; box-shadow:none !important;
  }

  /* Sıralama: resim ÜSTTE, yazı ALTA */
  .main-header .image-box{ order:0 !important; }
  .main-header .info-box { order:1 !important; }

  /* Görsel: auto yükseklik, sıfır boşluk */
  .main-header .image-box img{
    width:100% !important; height:auto !important; object-fit:cover;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important;
    display:block;
  }

  /* Info içeriği: okunurluk için MINİMAL iç boşluk bırak, dış boşluk yok */
  .main-header .info-box{
    padding:12px 14px !important; /* iç boşluk; istersen 0 yapabilirsin */
    overflow:visible !important;  /* mobilde doğal akış */
    background: linear-gradient(140deg, var(--navy-1), var(--navy-2)) !important;
  }
  .main-header .info-box > *{ margin-top:0 !important; margin-bottom:10px !important; }
  .main-header .info-box > *:last-child{ margin-bottom:0 !important; }

  /* CTA: auto ve sıfır boşluk */
  .cta-section{ margin:0 !important; padding:0 !important; }
  .cta-section h2{ margin:0 !important; padding:8px 10px !important; }
  .cta-cover-wrap{ margin:0 !important; padding:0 !important; }
  .cta-cover{ width:100% !important; height:auto !important; display:block; margin:0 !important; }

  /* ÜRÜN BÖLÜMÜ: üst–alt padding/margin sıfır */
  .products-section{ margin:0 !important; padding:0 !important; }
  .flex-row{ gap:12px; padding:12px; }
  .product-offer{ margin:0 !important; }
}

/* ============ Tablet optimizasyon (opsiyonel) ============ */
@media (min-width: 992px) and (max-width: 1200px){
  :root{ --header-h: clamp(460px, 66vh, 900px); }
}