/* =====================================================
   HOMEPAGE – SINGLE RESPONSIBILITY / NO SCROLL
===================================================== */

/* SADECE ANASAYFA */
body.is-homepage main{
  padding:0;
}

/* HERO */
.homepage{
  position:relative;
  width:100%;
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;

  background-color: var(--homepage-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

/* OVERLAY – DERİNLİK */
.homepage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(
      1200px 600px at 50% -12%,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02) 35%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.12) 45%,
      rgba(0,0,0,0.22) 100%
    );
}

/* GRID */
.homepage-layout{
  position:relative;
  z-index:1;

  width:100%;
  max-width:1280px;

  display:grid;
  grid-template-columns:240px 1fr 240px;
  gap:56px;

  padding:36px;
  align-items:flex-start;
}

/* =====================================================
   SIDE IMAGES (GÖRSELE DOKUNULMAZ)
===================================================== */

.hp-side{
  position:relative;
  display:flex;
  justify-content:center;
  padding-top:12px;
  opacity:.75;
}

.hp-side img{
  max-height:56vh;
  width:auto;
  border-radius:24px;
  transform:scale(0.92);
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* SIDE TEXT */
.hp-side-text{
  position:absolute;
  z-index:3;

  font-size:20px;
  font-weight:700;
  letter-spacing:.06em;

  white-space:normal;
  word-break:keep-all;

  max-width:180px;
  line-height:1.15;

  pointer-events:none;
  user-select:none;

  overflow:hidden;
}

.hp-left-text{
  right:60px;
  bottom:100px;
}

.hp-right-text{
  left:12px;
  top:100px;
}

/* CENTER */
.hp-center{
  grid-column:2;
  max-width:520px;
  margin:0 auto;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.hp-logo img{
  max-width:360px;
  width:100%;
}

.hp-slogan{
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.35;
  max-width:460px;
  margin-bottom:28px;
  color:#fff;
}

.hp-text{
  font-size:15px;
  line-height:1.75;
  max-width:460px;
  color:rgba(255,255,255,.85);
}

.hp-text.primary{
  font-size:16px;
  line-height:1.8;
  margin-bottom:18px;
  opacity:.95;
}

.hp-text.secondary{
  font-size:14px;
  line-height:1.65;
  margin-top:10px;
  opacity:.6;
}

.hp-cta-wrap{
  margin-top:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hp-cta{
  padding:15px 46px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#eee);
  color:#1a1a1a;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.hp-cta-sub{
  margin-top:18px;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.03em;
  color:rgba(255,255,255,.55);
}

/* =====================================================
   TABLET + MOBILE – (<=1024)
   KRİTİK: Footer yoksa sebep genelde global "height/overflow" kilidi.
   Bu blok, SADECE body.is-homepage scope’unda kilidi kırar.
===================================================== */

@media (max-width: 1024px){

  /* 1) GLOBAL KİLİT KIRMA (footer’ın görünmemesinin ana nedeni bu olur) */
  html, body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.is-homepage{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }

  body.is-homepage main{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    display:block !important;
  }

  /* 2) HOMEPAGE SECTION artık sayfayı “kilitlemez”, akışa girer */
  .homepage{
    display:block !important;
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
    padding-bottom:64px;
  }

  .homepage-layout{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;
    max-width:100%;

    padding:96px 24px 56px;
    gap:36px;
  }

  .hp-center{
    max-width:560px;
    margin:0 auto;
    padding:0 6px;
  }

  .hp-logo img{
    max-width:320px;
  }

  .hp-slogan{
    font-size:20px;
    line-height:1.4;
    margin-bottom:22px;
  }

  .hp-text,
  .hp-text.primary{
    font-size:15px;
    line-height:1.7;
  }

  .hp-text.primary{
    margin-bottom:18px;
  }

  .hp-cta-wrap{
    margin-top:56px;
  }

  .hp-cta{
    width:100%;
    max-width:360px;
    text-align:center;
  }

  .hp-side{
    width:100%;
    order:3;
    padding:0;
    margin-top:24px;
    opacity:1;
    display:flex;
    justify-content:center;
  }

  .hp-side img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    transform:none;
    border-radius:22px;

    box-shadow:
      0 28px 70px rgba(0,0,0,.45),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }

  .hp-side-text{
    font-size:16px;
    max-width:220px;
    line-height:1.2;
  }

  .hp-left-text{
    right:24px;
    bottom:28px;
  }

  .hp-right-text{
    left:24px;
    top:auto;
    bottom:28px;
  }

  /* 3) Footer elementini görünür kılmaya yardımcı (footer varsa) */
  footer{
    position:relative;
    z-index:2;
  }
}