/* ==========================================================================
   STMACH Robotics - about.css
   Ana sayfa Hakkimizda bolumu: altigen sayaclar + radyal vinyet maskeli
   tanitim videosu. Kurumsal sayfasinin bloklari dosyanin altinda.
   ========================================================================== */

.about__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}
/* Video sutunu metinden genis: tanitim filmi bolumun agirlik merkezi ve
   esit bolusturmede 572 px'e dusuyordu. minmax(0, …) sart - ic icgeriden
   gelen minimum genislik izgarayi tasirir. */
@media (min-width: 992px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--space-8);
  }
}

/* Bolum sag kenara kadar uzanir: video maskesi sayfa zeminine karisiyor,
   konteyner icinde kesilirse vinyet yarim kalir. */
.about { overflow: hidden; }

/* VIDEO SAG KENARA TASAR - canli sitedeki kompozisyon (olculdu: medya
   ~1030x720, sag kenardan disari akiyor; bizde kapsayici icinde 666x375
   kaliyordu ve ayni maskeyle bile "ayni gorunum" olusmuyordu).
   --rail-pad: kapsayici icerik kenarindan ekran kenarina olan mesafe; o
   kadar negatif kenar boslugu kutuyu ekranin kenarina dayar (1907px'te
   +345 px -> ~1010 px). Mantiksal yon: RTL'de sola tasar. */
@media (min-width: 992px) {
  .about__video {
    margin-inline-end: calc(-1 * var(--rail-pad));
    /* Dikeyde bolumun EN USTUNDEN EN ALTINA: satiri doldurur ve bolum
       dolgusunun icine tasar. Referansta video ustte yazidan once basliyor,
       altta bolumun kenarinda keskin bitiyor. */
    margin-block: calc(-1 * var(--section-y));
    align-self: stretch;
  }
  .about__video-frame {
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 520px;
  }
}

.about__eyebrow {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: none;
}

/* Bolum basligi burada TURUNCU - mevcut sitedeki gibi tek istisna. */
.about__title {
  margin-block-end: var(--space-5);
  color: var(--st-orange-text);
  font-size: var(--fs-h2);
}

.about__text p { color: var(--text-muted); }
.about__actions { margin-block-start: var(--space-7); }

/* -------------------------------------------------------------- SAYACLAR
   Altigen cerceve inline SVG ile ciziliyor: clip-path ile kenarlik
   verilemiyor, gorsel kullanmak da bos yere istek olurdu. */
.counters {
  display: grid;
  gap: var(--space-4);
  /* Mevcut sitedeki gibi her zaman tek sirada uc altigen; auto-fit
     mobilde 2+1 dizip son altigeni yalniz birakiyordu. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-inline-size: 520px;
  margin-block-start: var(--space-7);
}

.counter {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 100 / 112;
  padding: var(--space-4);
  text-align: center;
}

.counter__hex {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: var(--st-line);
  stroke-width: 1.2;
  transition: stroke var(--dur) var(--ease);
}
.counter:hover .counter__hex { stroke: var(--st-orange); }

.counter__body { position: relative; }

.counter__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  margin-block-end: var(--space-1);
}
.counter__plus {
  color: var(--text-strong);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
}
/* Kurulus yili sayac degil - artan animasyon yok, "+" yok. */
.counter__year {
  color: var(--text-strong);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter__label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* ------------------------------------------------------------- VIDEO ALANI */
.about__video {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* kutudan buyuk maske burada kirpilir */
}

/* Cerceve orani: dar ekranda kaynak videonun orani (16/9); genis ekranda
   asagida 10/7'ye buyur. object-fit: cover oldugu icin oran farki siyah
   bant degil kenardan kirpma uretir. */
.about__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Video gelene kadar zemin: poster zaten ustunde durur. */
  background: var(--st-paper);
}
/* object-fit: cover SIYAH BANT BIRAKMAZ: goruntu cerceveyi doldurur,
   oran farki varsa kenardan kirpar. YouTube iframe'i bunu yapamiyordu -
   oynatici kendi icinde "sigdir" davranisi uyguluyor ve arta kalan yeri
   siyaha boyuyordu. */
.about__video-frame > img,
.about__video-frame > video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
}

/* Poster, iframe hazir olunca sonuyor. */
.about__video-poster {
  z-index: 1;
  transition: opacity var(--dur-slow) var(--ease);
}
.about__video.is-playing .about__video-poster { opacity: 0; }

/* Maske: canli sitedeki homepage-video-mask.png dosyasinin kendisi (bkz.
   Index.cshtml). 800px KAYIPSIZ WebP (53 KB): kayipli alfa kodlamasi gradyani
   29 birimlik basamaklara bolup goze carpan halkalar uretiyordu (olculdu:
   kayipsizda ardisik piksel farki 1). Gradyan puruzsuz oldugu icin 800px
   buyutulunce de puruzsuz kalir.

   YERLESIM: dosya kutuya sigdirilmaz, kutudan BUYUK basilip saga-asagi
   kaydirilir. Sigdirilince (cover, sola hizali) seffaf merkez kutunun
   ortasinda kaliyor ve sag taraf da soluyordu; referansta sag ve alt
   kenar keskin, solma sola ve yukari. Genislik 180% / yukseklik 160%,
   SOL ve UST kenar kutuya oturur (0 / 0): dosyanin kendi kenari tam beyaz
   oldugu icin kutunun sol ve ust kenarinda cizgi kalmaz (kenar kutunun
   disina tasinca orada %89/%70 beyaz kaliyor ve ince bir hat gorunuyordu).
   Seffaf merkez kutunun (90%, 80%) noktasina gelir.

   EGRI: dosyanin alfasi kup alinarak (alfa^3) yeniden yazildi. Dogrusal
   egride kutunun ortasi %58 beyazdi ve video puslu duruyordu; kare egri
   %34, kup egri %20'ye indirir, solmayi kenarlara toplar: sag ve alt kenar
   ~%0-2 beyaz, sol ve ust kenar yine %100. Musteri kademeli olarak "daha
   net" istedi; bir kademe daha (alfa^4) sol/ust gecisi belirgin daraltir.
   object-fit: fill - gradyanin oraninin bozulmasi sorun degil.
   .about__video uzerindeki overflow: hidden tasan kismi kirpar. */
.about__video-mask {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  inline-size: 180%;
  block-size: 160%;
  max-inline-size: none;
  object-fit: fill;
  pointer-events: none;
}

@media (max-width: 991px) {
  /* Oran artik her genislikte 16/9; burada yalnizca sayac genisligi kaliyor. */
  .counters { max-inline-size: none; }
}

/* ==========================================================================
   KURUMSAL SAYFASI (kurumsal.html) — hakkimizda bolumunun genis hali.
   Ana sayfadaki .about__grid + .counters buradan da kullanilir; asagidakiler
   sadece kurumsal sayfasinda gecen bloklar.
   ========================================================================== */

/* ------------------------------------------------------- FABRIKA FOTOGRAFI */
.about-figure { margin: 0; }
.about-figure__media { border-radius: var(--radius-lg); }
.about-figure__caption {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Kurumsal sayfasi, uretim blogu: gorsel solda. */
@media (min-width: 992px) {
  .about__grid--ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
}
@media (max-width: 991px) {
  /* Dar ekranda metin once, fotograf sonra. */
  .about__grid--ters .about-figure { order: 2; }
}

/* ------------------------------------------------------------ NEDEN STMACH */
.why-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.why-card {
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
}
.why-card__icon {
  inline-size: 36px;
  block-size: 36px;
  margin-block-end: var(--space-3);
  color: var(--st-orange);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-card__title { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.why-card__text { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* --------------------------------------------------------- MISYON / VIZYON */
.mv-card__icon {
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--space-3);
  color: var(--st-orange-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mv-card__title {
  margin: 0 0 var(--space-2);
  color: var(--st-orange-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mv {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mv { grid-template-columns: repeat(2, 1fr); }
}

.mv-card {
  padding: var(--space-6);
  border: 1px solid var(--st-line-ink);
  border-radius: var(--radius-lg);
  /* Vurgu, ust kenardaki turuncu seritte - metin uzerinde degil. */
  border-block-start: 3px solid var(--st-orange);
}
.mv-card__text {
  margin: 0;
  color: var(--text-on-ink);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.5;
}

/* ----------------------------------------------------- KURUMSAL SAYFA KARTI */
.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hub-card:hover { border-color: var(--st-orange); box-shadow: var(--shadow-md); }
.hub-card__title { margin: 0; font-size: var(--fs-h4); }
.hub-card__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  color: var(--st-orange-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.hub-card__cta .icon { transition: transform var(--dur) var(--ease); }
.hub-card:hover .hub-card__cta .icon { transform: translateX(4px); }

.hub-note {
  margin-block-start: var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.hub-note a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--st-orange-text);
  font-weight: 600;
}

/* 4 kurumsal sayfa kartinin masaustunde tek sirada durmasi icin daha dar
   sutun esigi - .grid-st--wide (320px) ile 3+1 kaliyordu. */
.hub-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}