/* ==========================================================================
   STMACH Robotics - hero.css
   Video/gorsel slider.

   GECMIS: 27.08.2026'da musteri "slider birebir boyle olsun" deyip canli
   stmach.com.tr'deki CERCEVELI slider'i gostermisti (1720 px genislik,
   30 px kenar boslugu, 30 px yuvarlak kose, 100vh-42px yukseklik, 860 px
   tavan, kubbe 65 px asagi tasiyor).

   08.09.2026'da bu karar DEGISTI: musteri referans bir tasarim gosterip
   "slider tam olsun" dedi. Slider artik ekranin tamamini kaplar - kenar
   boslugu, yuvarlak kose ve yukseklik tavani yok, kubbe cerceve icinde.
   Baslik da slider'in uzerinde seffaf durur (bkz. header.css).

   Canli siteden alinan ve HALA gecerli olan olculer:
     perde   duz siyah %50 (gradyan degil)
     metin   1440px blok, DIKEYDE ORTALI, px 30
     ust yazi 20/300/ls 10px/#ADADAD - baslik 48/600 - paragraf 18/300
     buton    200x50, px 30, gap 15, 16/400
     (kubbe kaldirildi - kontrol artik minimal, bkz. SLAYT KONTROLU)

   PERFORMANS KURALI:
   - OTOMATIK GECIS YOK. 7 sn'lik donusle sayfada duran ziyaretci dort
     videoyu da indiriyordu (~4,7 MB); artik slayt yalnizca kontrollerle
     degisiyor, tipik ziyaret tek videoyla (~1,6 MB) sinirli.
     (Canli sitede otomatik gecis var; bilincli ayrilan tek nokta budur.)
   - Yalnizca ilk slide medyasi yuklenir (LCP poster'i preload edilir).
     Diger slide videolari poster ile durur; src ancak slide aktif olunca
     JS tarafindan atanir (bkz. main.js -> initHero/attachMedia).
   - Slider yuksekligi CSS'te sabit -> CLS = 0.
   ========================================================================== */

/* TAM EKRAN (08.09.2026 musteri karari - referans tasarim gosterildi).
   Onceki hali canli stmach.com.tr'deki cerceveli slider'in birebir
   kopyasiydi (30 px kenar boslugu, 30 px yuvarlak kose, 1720 px genislik,
   100vh-42px yukseklik, 860 px tavan). Yeni istek "slider tam olsun":
   kenar boslugu, yuvarlak kose ve yukseklik tavani kaldirildi; slider
   ekranin tamamini kaplar ve basligin ALTINDAN baslar. */
.hero {
  position: relative;
  background: var(--st-white);
  color: var(--text-on-ink);

  /* Baslik fixed oldugu icin <main> ust bosluk aliyor; hero o boslugu
     geri alarak basligin altina girer ve ekranin tepesinden baslar. */
  margin-block-start: calc(var(--header-h) * -1);

  /* Slider'a ozel token - canli sitedeki kesin deger */
  --hero-eyebrow: #ADADAD;   /* canli: .page-title text-[#ADADAD] */
}

.hero__frame {
  position: relative;
  inline-size: 100%;
}

.hero__track {
  position: relative;
  /* dvh: mobilde adres cubugu girip cikarken 100vh sicriyor, dvh sabit
     kalir. vh yedegi dvh desteklemeyen tarayicilar icin once yazilir. */
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 440px;
  overflow: hidden;
  background: var(--bg-ink);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* JS yoksa ilk slide gorunur kalir */
.no-js .hero__slide:first-child { opacity: 1; visibility: visible; }

.hero__media {
  position: absolute;
  inset: 0;
  background: var(--st-slate-dark);
}
/* Goruntunun KENDISI derecelendirilir (interkonv2 hero'sundaki yontem).
   Ustune duz siyah perde sermek renkleri yassiltiyor ve sikistirmadan
   gelen blok izlerini ortaya cikariyordu; parlaklik dusurup kontrasti
   bir tik yukari almak koyulugu ayni oranda verirken goruntuyu
   "sinematik koyu cekim" gibi birakiyor. */
.hero__media > img,
.hero__media > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(.82) contrast(1.06);
}

/* Perde artik DUZ %50 SIYAH DEGIL.
   Duz perde her yeri esit boguyordu: koyu sahnelerde gereginden fazla,
   aydinlik karelerde yazi icin yetersiz. Yerine uclari toplayan dikey
   gradyan + basligin arkasinda yumusak bir havuz. Koyulugun buyuk
   kismini zaten yukaridaki derecelendirme tasiyor. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 34% 50%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 76%),
    /* UST UC ozellikle koyu: baslik slider'in uzerinde SEFFAF duruyor ve
       yazilari beyaz. Ilk denemede ust durak .30'du, parlak kareli bir
       videoda (beyaz "KONYA" tabelalari) menu okunmaz oldu - olculdu. */
    linear-gradient(180deg,
      rgba(0, 0, 0, .50) 0%,
      rgba(0, 0, 0, .18) 22%,
      rgba(0, 0, 0, .08) 45%,
      rgba(0, 0, 0, .34) 100%);
}

/* Metin blogu canli sitede 1440px ve DIKEYDE ORTALI durur. */
.hero__body {
  position: relative;
  z-index: 1;
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: 1440px;
  margin-inline: auto;
  padding-inline: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sade harf arali ust yazi; canli sitede her slaytta "STMACH ROBOTICS". */
.hero__eyebrow {
  display: block;
  margin-block-end: 30px;
  color: var(--hero-eyebrow);
  /* canli: 20px, 1280px'te 18px */
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: .5em;      /* 20px'te 10px - canli sitedeki tracking */
}

.hero__title {
  margin: 0;
  color: var(--st-white);
  /* canli: 1280px -> 32px, 1900px -> 48px */
  font-size: clamp(24px, 2.55vw, 48px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
}

.hero__text {
  /* Canli sitede satir kirilmasi elle konmus; ayni kirilmayi olcu ile
     veriyoruz (~80ch, 18px'te ~760px). */
  max-inline-size: 80ch;
  margin-block: 30px 0;
  color: var(--st-white);
  font-size: clamp(16px, .95vw, 18px);
  font-weight: 300;
  line-height: 1.625;
  /* uzun aciklamalar slider'i buyutmesin */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-block-start: 30px;
}
/* Canli sitedeki buton olculeri (min-w 200, h 50, px 30, gap 15, 16/400) */
.hero__actions .btn-st {
  min-inline-size: 200px;
  block-size: 50px;
  padding: 0 30px;
  gap: 15px;
  font-size: 16px;
  font-weight: 400;
}
/* ---------------------------------------------------- SLAYT KONTROLU
   MINIMAL (08.09.2026 musteri karari). Onceki hali 330x165'lik beyaz
   yarim kubbeydi ve cercevenin alt ortasinda duruyordu; slider tam ekran
   olunca goruntunun ortasinda buyuk bir beyaz leke birakiyordu.

   Yeni hali: ince cizgi gostergeleri + sayac + iki dugum, metin blogunun
   hizasinda SAGDA. Sag secildi cunku sol alt kose artik paragraf ve
   "Incele" dugmesiyle dolu. */
.hero__nav {
  position: absolute;
  inset-block-end: clamp(20px, 4vh, 44px);
  inset-inline: 0;
  z-index: 2;
  /* Bos alan tiklamayi yutmasin - altta slayt duruyor. */
  pointer-events: none;
}

/* Metin blogu ile AYNI kolon: .hero__body 1440 px + 30 px yan bosluk. */
.hero__nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  inline-size: 100%;
  max-inline-size: 1440px;
  margin-inline: auto;
  padding-inline: 30px;
}
.hero__nav-inner > * { pointer-events: auto; }

/* ----------------------------------------------------- gostergeler */
.hero__dots { display: flex; align-items: center; gap: 6px; }

.hero__arc-item {
  inline-size: 26px;
  block-size: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--st-white) 40%, transparent);
  cursor: pointer;
  transition: inline-size var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero__arc-item:hover { background: color-mix(in srgb, var(--st-white) 70%, transparent); }
.hero__arc-item.is-active {
  inline-size: 40px;
  background: var(--st-orange);
}

/* Dokunma hedefi 2 px'lik cizgiden buyuk olmali. */
.hero__arc-item::after {
  content: "";
  position: absolute;
  inset-block: -14px;
  inset-inline: 0;
}
.hero__arc-item { position: relative; }

/* ---------------------------------------------------------- sayac */
.hero__count {
  margin: 0;
  color: var(--st-white);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.hero__count-sep { margin-inline: 5px; opacity: .5; }
.hero__count-total { opacity: .6; }

/* --------------------------------------------------------- dugmeler */
.hero__ctrls { display: flex; align-items: center; gap: var(--space-2); }

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--st-white) 35%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--st-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__btn:hover {
  background: color-mix(in srgb, var(--st-white) 16%, transparent);
  border-color: color-mix(in srgb, var(--st-white) 70%, transparent);
}
.hero__btn .icon { inline-size: 18px; block-size: 18px; }

@media (max-width: 767px) {
  /* Yukseklik SINIRLANMAZ: slider mobilde de tam ekran.
     Onceki clamp(420px, 78vh, 560px) cerceveli surumden kalmaydi ve
     812 px'lik telefonda slider'i 560 px'e kirpiyordu. */
  .hero__body { padding-inline: 20px; }
  .hero__nav-inner { padding-inline: 20px; gap: var(--space-4); }
  .hero__btn { inline-size: 36px; block-size: 36px; }
}

/* Dar ekranda cizgi gostergeleri ile dugmeler yan yana sigmiyor;
   gostergeler dusuyor - slayt degistirmenin yolu dugmelerde kaliyor. */
@media (max-width: 479px) {
  .hero__dots { display: none; }
}