/* ============================================================
   SIMGETEK — Anasayfa (Figma: Landingpage 2322:11497, 1440x3266)
   ============================================================ */

/* ------------------------------------------------------------
   HERO — bolunmus navigasyon
   Figma: 5 kolon x 288px, gap 1px (toplam 1444 -> 1440'ta kirpiliyor).
   Olcum dogrulamasi: son etiketin merkezi referansta x=1299.5,
   sabit-288 tahmini 1300.0 (sapma 0.5), esit-bolme tahmini 1294 (sapma 5.5).
   Bu yuzden kolonlar sabit 288px ve tasma gizleniyor — tasarimin birebiri.
   Hover (Figma de1 varyantlari 2322:11720..11621): hedef kolon 400px'e
   genisler, digerleri 260px'e daralir; toplam yine 1444.
   Gecis: Figma prototipi "Smart animate, 300ms, Ease out".
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  gap: 1px;
  height: 936px;
  overflow: hidden;
  background: var(--color-white);
  /* Kolon genislikleri: bos / acik / acigin kardesleri.
     Tablet blogu ayni degiskenleri yuzdeyle ezer. */
  --hero-w: 288px;
  --hero-w-open: 400px;
  --hero-w-rest: 260px;
  --hero-dur: 300ms;
  --hero-ease: cubic-bezier(0, 0, .58, 1);
}

.hero__col {
  position: relative;
  /* grow 1: 1440'tan genis ekranda kolonlar esit buyuyup seridi doldurur
     (sagda beyaz bosluk kalmaz). shrink 0: 1440'ta 288 sabit kalir,
     4px tasma kirpilir — referans olcumuyle birebir. */
  flex: 1 0 var(--hero-w);
  overflow: hidden;
  /* flex-basis animasyonu burada zorunlu: kolonlar gercekten genisleyip
     kardeslerini itiyor, transform ile ayni sonuc uretilemez. 5 eleman
     oldugu icin maliyeti kabul edilebilir; tarayiciya onceden bildiriyoruz. */
  will-change: flex-basis;
  transition: flex-basis var(--hero-dur) var(--hero-ease);
}

/* Bir kolon isaretlendiginde: o acilir, kardesleri daralir.
   - Kardes kurali :where() ile sifir ozgullukte. Aksi halde
     ".hero:hover .hero__col" (0,3,0) kolonun kendi ":hover" (0,2,0)
     kuralini ezer: bes kolon birden 260'a iner, hicbiri acilmaz ve sagda
     136px bosluk kalir (eski hata).
   - :has() ile daralma yalniz gercekten bir kolon isaretliyken olur;
     asagi okun veya 1px araliklarin ustundeyken serit oldugu gibi kalir.
   - Mobilde dokunma sonrasi :hover yapisik kaldigi icin kurallar 768
     ustune kapali; orada bantlar data-open ile acilir. */
@media (min-width: 768px) {
  .hero:where(:has(.hero__col:hover, .hero__col:focus-within)) .hero__col {
    flex-basis: var(--hero-w-rest);
  }
  .hero__col:hover,
  .hero__col:focus-within { flex-basis: var(--hero-w-open); }
}
/* :has() olmayan eski tarayicilar: serit uzerindeyken daralt, sonra acigi
   genislet. Ok/aralik ustunde kisa sureli bosluk kalir; kabul edilebilir. */
@supports not selector(:has(a)) {
  @media (min-width: 768px) {
    .hero:where(:hover, :focus-within) .hero__col { flex-basis: var(--hero-w-rest); }
    .hero__col:hover,
    .hero__col:focus-within { flex-basis: var(--hero-w-open); }
  }
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hover ortusu — Figma: #041E42 @ %80 */
.hero__col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  opacity: 0;
  transition: opacity var(--hero-dur) var(--hero-ease);
  pointer-events: none;
}
/* Hover/focus durumlari YALNIZ 768 ustunde. Mobilde tek kaynak data-open:
   iOS Safari, dokunulan ogede :hover kurali varsa ilk dokunusu "hover" sayar
   (renk degisir), click'i yutar; bant ancak ikinci dokunusta acilirdi. */
@media (min-width: 768px) {
  .hero__col:hover::after,
  .hero__col:focus-within::after { opacity: .8; }
}

/* Etiket — Figma: y=806, Mont 500/24/29.26, #000, ortali */
.hero__label {
  position: absolute;
  left: 0; right: 0;
  top: 806px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  padding-inline: 12px;
  font-size: 24px;
  line-height: 29.26px;
  font-weight: 500;
  color: #000;
  text-align: center;
  transition: color var(--dur) var(--ease);
}
@media (min-width: 768px) {
  .hero__col:hover .hero__label,
  .hero__col:focus-within .hero__label { color: var(--color-white); }
}

/* Etiket alti cizgi — Figma'da varsayilan opacity 0, hover'da gorunur.
   Genislik yerine scaleX: layout hesabi tetiklemez. */
.hero__label::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 768px) {
  .hero__col:hover .hero__label::after,
  .hero__col:focus-within .hero__label::after { opacity: 1; transform: scaleX(1); }
}

/* Alt menu — Figma: Frame 279, 208x321 @ y=284, gap 21,
   Mont 500/14/17.07, beyaz, ortali */
.hero__sub {
  position: absolute;
  top: 284px;
  left: 50%;
  transform: translateX(-50%);
  width: 208px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  z-index: 3;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
@media (min-width: 768px) {
  .hero__col:hover .hero__sub,
  .hero__col:focus-within .hero__sub { opacity: 1; visibility: visible; }
}

.hero__sub a {
  font-size: 14px;
  line-height: 17.07px;
  font-weight: 500;
  color: var(--color-white);
  transition: color var(--dur-fast) var(--ease);
}
.hero__sub a:hover { color: var(--color-sky); }

/* Asagi ok — Figma: 47x38 @ (696, 965) sayfa koordinati,
   hero'nun alt kenarindan 22px yukarida, yatayda ortali */
.hero__cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  width: 47px;
  height: 38px;
  z-index: 4;
  color: var(--color-navy);
  display: grid;
  place-items: center;
}
.hero__cue svg { width: 27px; height: 11px; }
.hero__cue > * { transition: transform var(--dur) cubic-bezier(.16, 1, .3, 1); }
.hero__cue:hover > *,
.hero__cue:focus-visible > * { transform: translateY(5px); }


/* ------------------------------------------------------------
   38 YILLIK  —  Figma: Frame 2361, 1440x510, #041E42
   icerik 1233x260 @ (121,135) · row gap 96 · ortali
   ------------------------------------------------------------ */
.about {
  position: relative;
  height: 510px;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

/* Dekoratif elmas — Figma: 452x458 @ (-105, 26), #0033A0 %22 */
.about__decor {
  position: absolute;
  left: -105px;
  top: 26px;
  width: 452px;
  height: 458px;
  background: url("../../assets/icons/decor-diamond.svg") no-repeat center / contain;
  pointer-events: none;
}

/* Figma: dis cerceve 1233px @ x=121 (asimetrik, sag kenar 86px) ve
   icindekiler ortali -> icerik bloku tam olarak x=169'dan basliyor.
   Standart 1248/96 konteyneri burada 17.5px sapma veriyor. */
.about__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 96px;
  width: 1137px;
  max-width: calc(100% - var(--page-pad) * 2);
  margin-left: 169px;
  margin-right: auto;
  height: 260px;
  padding-top: 135px;
  box-sizing: content-box;
}

.about__left { width: 438px; display: flex; flex-direction: column; gap: 21px; }

.about__years { display: flex; align-items: center; gap: 15px; height: 68px; }
/* Figma karakter override'i: temel stil 32px ama gercek punto 72px.
   Metnin kendi satir yuksekligi 87.77px ama Figma'daki kutu 68px — yazi
   tasip ortalaniyor. line-height'i 68 yapmazsak alttaki blok ~10px kayiyor. */
.about__num {
  font-size: 72px;
  line-height: 68px;
  font-weight: 600;
}
.about__unit { font-size: 24px; line-height: 29.26px; font-weight: 500; }

.about__lines { display: flex; flex-direction: column; gap: 10px; }
.about__line1 { font-size: 24px; line-height: 29.26px; font-weight: 500; max-width: 258px; }
.about__line2 { font-size: 28px; line-height: 32px; font-weight: 700; color: var(--color-sky); }

/* Figma: cerceve 603x260, pad 10, icindeki metin bloku 557px ve ortali */
.about__right {
  width: 603px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about__right p { width: 557px; max-width: 100%; font-size: 16px; line-height: 19.5px; font-weight: 400; }
.about__right p + p { margin-top: 19.5px; }


/* ------------------------------------------------------------
   BANNER  —  Figma: 1440x627 · gorsel + #041E42 @ %55
   icerik 948x119 @ (246,254) · col gap 42 · ortali
   ------------------------------------------------------------ */
.banner {
  position: relative;
  height: 627px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-white);
}
.banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  width: 948px;
  max-width: calc(100% - var(--page-pad) * 2);
  text-align: center;
}
.banner__title { font-size: 32px; line-height: 39.01px; font-weight: 600; }


/* ------------------------------------------------------------
   ILGILI BLOGLAR  —  Figma: 1440x684 · #E2E2E2 · pad 60/96
   baslik Mont 600/36 · kart 350x440 · aralik 99
   ------------------------------------------------------------ */
.bloglist { background: #E2E2E2; padding: 60px 0; }
/* Figma masaustu: baslik 1248x44, gap 16, "Tumunu Gor" satiri 1248x32,
   gap 32, kartlar. Mobilde ayni ikili tek satirda (350x32) yan yana. */
.bloglist__bar { display: flex; flex-direction: column; gap: 16px; }
.bloglist__head { font-size: 36px; line-height: 43.88px; font-weight: 600; color: var(--color-navy); }
.bloglist__body { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.bloglist__more { display: flex; justify-content: flex-end; height: 32px; }
/* "Tümünü Gör" — tasarimda Albert Sans 500/20/32 */
.bloglist__more a {
  font-family: var(--font-alt);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bloglist__grid { display: flex; gap: 99px; }



/* ------------------------------------------------------------
   Duyarli davranis
   ------------------------------------------------------------ */
/* Tablet — alt sinir sart: aksi halde bu kurallar mobile de sizip
   .hero'nun max-height'ini 936'da kilitliyor ve bolumler 492px kayiyor. */
@media (min-width: 768px) and (max-width: 1439px) {
  /* Kolon oranlari 1440 tasariminin yuzdesi: 288/1440, 400/1440, 260/1440 */
  .hero {
    height: 72vw; max-height: 936px; min-height: 560px;
    --hero-w: 20%; --hero-w-open: 27.8%; --hero-w-rest: 18.05%;
  }
  .hero__label { top: auto; bottom: 90px; font-size: 20px; line-height: 24px; }
  .hero__sub { top: auto; bottom: 190px; }

  .about { height: auto; padding-block: 80px; }
  .about__inner { padding-top: 0; height: auto; gap: 48px; flex-wrap: wrap;
                  width: auto; margin-inline: auto; max-width: calc(100% - var(--page-pad) * 2); }
  .about__left, .about__right { width: auto; flex: 1 1 320px; }
  .about__right p { width: auto; }

  .bloglist__grid { gap: 32px; }
  .blogcard { width: auto; flex: 1 1 0; }
}

/* Referans logolari — varsayilan gizli (masaustu tasariminda gorunmuyor) */
.reflogos { display: none; position: relative; overflow: hidden; height: 138px; }
/* Figma: serit 924x85 @ x=-4, ogeler arasi 40px, her logonun olcusu sabit,
   tumu %39 opaklikta. 390px ekranda serit tasar; yatay kaydirilabilir. */
.reflogos__track {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 85px;
  margin-top: 26px;
  margin-left: -4px;
  opacity: .39;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reflogos__track::-webkit-scrollbar { display: none; }
.reflogos__track img { flex: 0 0 auto; object-fit: contain; }
/* Sol kenarda beyaza gecis — Figma'daki Rectangle 2132 (x=-241, 321 genislik
   -> gorunur kismi 0..80) */
.reflogos::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 767px) {
  /* ----------------------------------------------------------
     MOBIL — Figma "Landing mobil" (2398:14994), 390x5439
     Masaustunun akiskan hali degil; ayri bir duzen.
     ---------------------------------------------------------- */

  /* HERO — dikey bantlar. Figma "Landing mobil" iki cerceve:
     2394:14761 ilk gorunum, bes bant da kapali (215px);
     2398:14994 KURUMSAL'a dokunulmus hali: o bant 568px, liste ustten 128,
     etiket alttan 41. Dokunulan bant asagi dogru buyur; diger bantlar da
     ayni sekilde acilir. Degerler JS'nin de okudugu degiskenlerde. */
  .hero {
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
    gap: 0;
    overflow: visible;
    --hero-open-min: 568px;
    --hero-sub-top: 128px;
    --hero-open-label-bottom: 41px;
  }
  .hero__col {
    flex: 0 0 auto;
    height: 215px;
    will-change: auto;
    transition: height var(--hero-dur) var(--hero-ease);
  }
  /* Kapali bant: gorsel + siyahtan lacivere gecis, %40 */
  .hero__col::after {
    opacity: .4;
    background: linear-gradient(180deg, #000000 0%, var(--color-navy) 100%);
  }
  /* Acik bant: duz lacivert %80. Yukseklik Figma'da 568 (KURUMSAL, 6 madde);
     8-9 maddelik listeler (Urunler, Entegre, Projeler) buna sigmayip etiketin
     ustune biniyor. app.js her banda --hero-open-h yazar: liste + etiket
     sigacak kadar, en az --hero-open-min. (Figma'daki 390x936 "acik bant"
     cerceveleri masaustu kolonunun kopyasi — bkz. data/home.json.) */
  .hero__col[data-open="true"] { height: var(--hero-open-h, var(--hero-open-min)); }
  .hero__col[data-open="true"]::after {
    opacity: .8;
    background: var(--color-navy);
  }

  /* Kapali bant etiketi — ilk cerceve (2394:14761): KURUMSAL 32, digerleri 12
     (etiket bileseninin 41px kutusu bandin alt kenarina yaslanmis).
     Kardes ogelerde acikca kaza ama ilk gorunumun birebiri. Acik bantta
     etiket 41'e kayar (2398:14994); yukseklikle birlikte animasyonlanir. */
  .hero__label {
    top: auto;
    bottom: 12px;
    color: var(--color-white);
    font-size: 24px;
    line-height: 29.26px;
    gap: 12px;
    transition: bottom var(--hero-dur) var(--hero-ease), color var(--dur) var(--ease);
  }
  .hero__col:nth-child(1) .hero__label { bottom: 32px; }
  .hero__col[data-open="true"] .hero__label { bottom: var(--hero-open-label-bottom); }

  .hero__label::after { display: none; }

  /* Alt menu — Figma: 149x224 @ y=128, gap 21, Mont 400/16/19.5 ortali */
  .hero__sub {
    top: var(--hero-sub-top);
    width: 149px;
    gap: 21px;
    opacity: 0;
    visibility: hidden;
  }
  .hero__col[data-open="true"] .hero__sub { opacity: 1; visibility: visible; }
  .hero__sub a { font-size: 16px; line-height: 19.5px; font-weight: 400; }

  .hero__cue { display: none; }

  /* 38 YILLIK — Figma: 390x657 */
  .about { height: 657px; }
  .about__decor { left: -105px; top: 26px; }
  .about__inner {
    width: auto;
    margin-inline: 16px auto;
    max-width: calc(100% - 32px);
    height: auto;
    padding-top: 37px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .about__left { width: auto; gap: 21px; }
  .about__num  { font-size: 72px; line-height: 68px; }
  .about__unit { font-size: 24px; line-height: 29.26px; }
  .about__lines { gap: 10px; }
  .about__line1 { font-size: 16px; line-height: 19.5px; max-width: 258px; }
  .about__line2 { font-size: 24px; line-height: 32px; }
  .about__right { width: auto; padding: 10px 0; align-items: flex-start; }
  .about__right p { width: auto; font-size: 14px; line-height: 20px; }
  .about__right p + p { margin-top: 20px; }

  /* Banner — Figma: 390x627, icerik 143px ortali, gap 23 */
  .banner { height: 627px; padding-block: 0; }
  .banner__inner { width: 302px; max-width: calc(100% - 44px); gap: 23px; }
  /* Figma'da baslik kutusu 302x80 ama icinde 2 satir var; kalan 36px
     baslik ile buton arasindaki gercek bosluga donusuyor. */
  .banner__title { font-size: 18px; line-height: 21.94px; min-height: 80px; }

  /* Blog — Figma: 350 genislik (20px kenar), baslik Mont 600/18 */
  /* Figma: blog bolumu 4365'te bitiyor, footer 4475'te basliyor -> 110px */
  .bloglist { padding: 16px 0 114px; background: var(--color-white); }
  .bloglist .container { width: 350px; max-width: calc(100% - 40px); }
  .bloglist__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    gap: 12px;
  }
  .bloglist__head { font-size: 18px; line-height: 21.94px; }
  .bloglist__body { gap: 24px; margin-top: 24px; }
  .bloglist__more { height: auto; }
  .bloglist__more a { font-size: 16px; line-height: 32px; }
  .bloglist__grid { flex-direction: column; gap: 24px; }
  .reflogos { display: block; margin-top: 19px; }

  /* Referans logo seridi — Figma'da YALNIZ mobil tasarimda gorunur
     (masaustunde ayni grup blog bolumunun ARKASINDA kalmis, z-sirasi kazasi).
     Tasarima birebir uyuluyor; masaustunde gostermek icin asagidaki
     display kuralini kaldirmak yeterli. Bkz. teslim notlari. */
  /* Blog karti — mobilde baslik 16, ozet 12 */
  .blogcard { width: 100%; height: 440px; flex: 0 0 440px; }
  .blogcard__title { font-size: 16px; line-height: 19.5px; margin-bottom: 9px; }
  .blogcard__text  { font-size: 12px; line-height: 14.63px; }
}

/* Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı.
   Hero split-nav sabit 288px sütunlarla kuruluydu; banner başlığı
   ve şerit 1440 altında taşıyordu. */
@media (min-width: 768px) and (max-width: 1439px) {
  .hero__nav, .hero__bands { width: 100%; }
  /* Alt menu ortali kalir (left:50% + translateX). Eski "right:0; left:auto"
     kurali translate ile birlesince menuyu 104px sola kaydirip kirpiyordu;
     .hero zaten overflow:hidden oldugundan scrollWidth'e katki da vermez. */
  .hero__sub { max-width: 100%; }
  .hero__band { flex: 1 1 0; min-width: 0; }
  .hero__band-label { font-size: 16px; }
  .banner__inner { width: auto; max-width: 100%; padding-inline: var(--page-pad); }
  .banner__title { font-size: 28px; line-height: 36px; }
}