/* =====================================================
   HERO VARIABLES
===================================================== */

:root{
  --hero-bend:160px;
}

/* =====================================================
   HERO WRAPPER
===================================================== */

main.home-page .hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  width:100%;
  margin:0;

  min-height:clamp(520px,72vh,780px);

  border-bottom-left-radius:var(--hero-bend);
  border-bottom-right-radius:var(--hero-bend);

  border-bottom:1px solid rgba(255,255,255,.14);
}

/* =====================================================
   HERO BACKGROUND
===================================================== */

main.home-page .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 12px
    ),
    radial-gradient(1000px 560px at 12% 78%, rgba(31,224,182,.32), transparent 62%),
    radial-gradient(1000px 560px at 88% 18%, rgba(16,176,208,.30), transparent 62%),
    linear-gradient(120deg,#0b3b86 0%,#0a5fa8 35%,#10b0d0 70%,#1fe0b6 100%);

  background-size:auto,auto,auto,auto,240% 240%;
  animation:heroBgMove 10s ease-in-out infinite;

  border-bottom-left-radius:var(--hero-bend);
  border-bottom-right-radius:var(--hero-bend);

  filter:saturate(1.06) contrast(1.05);
  transform:scale(1.02);
}

@keyframes heroBgMove{
  0%{background-position:0 0,0 0,0 0,0 0,0% 50%}
  50%{background-position:0 0,0 0,0 0,0 0,100% 50%}
  100%{background-position:0 0,0 0,0 0,0 0,0% 50%}
}

/* =====================================================
   HERO OVERLAY
===================================================== */

main.home-page .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(1200px 700px at 50% 45%,rgba(2,6,23,.10),rgba(2,6,23,.55)),
    radial-gradient(700px 280px at 20% 22%,rgba(255,255,255,.10),transparent 60%);

  border-bottom-left-radius:var(--hero-bend);
  border-bottom-right-radius:var(--hero-bend);
}

/* =====================================================
   HERO INNER LAYOUT
===================================================== */

main.home-page .hero-inner{
  position:relative;
  z-index:2;

  max-width:1400px;
  margin:auto;

  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;

  gap:clamp(20px,3vw,52px);
  padding:clamp(28px,5vh,60px) clamp(18px,4vw,76px);
}

/* =====================================================
   HERO TEXT
===================================================== */

.hero-eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

.hero-title{
  margin:0;

  font-size:clamp(34px,4.2vw,68px);
  font-weight:950;
  line-height:1.05;

  letter-spacing:-.02em;
  color:#fff;

  text-shadow:0 18px 70px rgba(0,0,0,.35);
}

.hero-title span{
  background:linear-gradient(90deg,#1fe0b6,#4fd3ff,#22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-subtitle{
  margin-top:14px;
  max-width:54ch;

  font-size:clamp(14px,1.6vw,18px);
  line-height:1.65;

  color:rgba(255,255,255,.86);
}

/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:48px;
  padding:0 18px;

  border-radius:999px;
  font-weight:900;

  text-decoration:none;

  transition:.2s ease;
}

.hero-btn--primary{
  color:#111;
  background:linear-gradient(135deg,#1fe0b6,#4fd3ff);
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}

.hero-btn--primary:hover{
  transform:translateY(-2px);
}

.hero-btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}

/* =====================================================
   HERO METRICS
===================================================== */

.hero-metrics{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.metric{
  padding:10px 12px;
  border-radius:14px;

  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);

  backdrop-filter:blur(8px);
}

.metric-num{
  font-weight:950;
  color:#fff;
}

.metric-text{
  font-size:12px;
  color:rgba(255,255,255,.75);
}

/* =====================================================
   HERO IMAGE BOX
===================================================== */

.hero-right{
  display:flex;
  justify-content:center;
}

.hero-art{
  width:min(560px,96%);
  aspect-ratio:1/1;

  display:grid;
  place-items:center;

  border-radius:28px;

  border:1px solid rgba(255,255,255,.14);

  background:
    radial-gradient(900px 420px at 20% 20%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(900px 420px at 80% 70%,rgba(79,211,255,.18),transparent 60%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0));

  box-shadow:0 26px 80px rgba(0,0,0,.25);

  overflow:hidden;
}

.hero-art img{
  width:96%;
  height:96%;

  object-fit:cover;

  border-radius:18px;

  animation:heroFloat 4s ease-in-out infinite;
}

@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* =====================================================
   HERO CAROUSEL
===================================================== */

.hero-carousel{
  position:relative;
}

.hero-carousel__track{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
}

.hero-carousel__slide{
  position:absolute;
  inset:0;

  padding:20px;
  box-sizing:border-box;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;

  opacity:0;
  transform:scale(1.01);

  transition:opacity .6s ease, transform .7s ease;
}

.hero-carousel__slide.is-active{
  opacity:1;
  transform:scale(1);
}

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

@media (max-width:980px){

  :root{--hero-bend:140px}

  main.home-page .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-actions,
  .hero-metrics{
    justify-content:center;
  }

  .hero-art{
    width:min(620px,100%);
    aspect-ratio:16/10;
  }

}

@media (max-width:640px){

  :root{--hero-bend:100px}

  .hero-title{
    font-size:clamp(26px,7vw,34px);
  }

  .hero-btn{
    height:44px;
    font-size:14px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:center;
  }

  .hero-btn{
    width:100%;
    max-width:260px;
  }

}

@media (prefers-reduced-motion:reduce){

  .hero-bg,
  .hero-art img,
  .hero-carousel__slide{
    animation:none;
    transition:none;
  }

}

/* =================================
   HERO MOBILE FIX
================================= */

@media (max-width: 768px){

  /* HERO layout dikey olsun */
  main.home-page .hero-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:22px;
  }

  /* sağ görsel en alta */
  main.home-page .hero-right{
    order:5;
    width:100%;
    display:flex;
    justify-content:center;
  }

  /* metin blokları */
  main.home-page .hero-left{
    order:1;
    width:100%;
  }

  /* butonlar alt alta */
  main.home-page .hero-actions{
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:10px;
  }

  main.home-page .hero-btn{
    width:100%;
    max-width:260px;
  }

  /* metrics alt alta */
  main.home-page .hero-metrics{
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:8px;
  }

  main.home-page .metric{
    width:100%;
    max-width:240px;
    text-align:center;
  }

  /* görsel küçült */
  main.home-page .hero-art{
    width:100%;
    max-width:420px;
    aspect-ratio:16/11;
  }

  /* hero yüksekliği küçült */
  main.home-page .hero{
    min-height:auto;
    padding-bottom:40px;
  }

}