/* ============================================================
   SIMGETEK — Kurumsal grubu (6 sayfa ortak)
   Figma: Öykümüz 2360:12697 · Sertifikalar 513:5803 · vb.
   ============================================================ */

/* ------------------------------------------------------------
   SAYFA KAHRAMANI — tum ic sayfalarda ayni
   Figma: 1440x678 · gorsel + #041E42 @ %78
          icerik y=394 (284 yuksek) · pad 0/96
          baslik Mont 600/36/43.88 · alt metin Mont 500/24/29.26
          sekme cubugu y=630 · 48 yuksek · gap 16
   Header bu bolumun UZERINE biniyor (Figma'da ikisi de y=0'da).
   ------------------------------------------------------------ */
.pagehero {
  position: relative;
  height: 678px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
  --overlay: rgba(4, 30, 66, .78);
}
/* DIKKAT: burada width:100% VERILMEZ — .container'in
   width: min(1248px, 100% - 2*pad) kuralini ezer ve metin
   1248 yerine 1440 genisliginde akar. */
.pagehero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}
.pagehero__block {
  display: flex;
  flex-direction: column;
  gap: 66px;
  padding-bottom: 0;
  height: 284px;
}
.pagehero__text { display: flex; flex-direction: column; gap: 24px; }
.pagehero__title {
  font-size: 36px;
  line-height: 43.88px;
  font-weight: 600;
}
.pagehero__sub {
  font-size: 24px;
  line-height: 29.26px;
  font-weight: 500;
}
/* Referanslar sayfasinda alt metin 20/24.38 (diger Kurumsal sayfalarinda 24/29.26) */
.pagehero--sub-sm .pagehero__sub { font-size: 20px; line-height: 24.38px; }

/* Sekme cubugu — aktif sekme beyaz zemin/lacivert metin.
   DOM'da kahraman bolumunun KARDESI: mobilde Figma onu bolumun disinda,
   beyaz zeminde gosteriyor. Masaustunde negatif ust marjla kahramanin
   alt kenarina (y=630, bolum 678'de bitiyor) oturuyor. */
.tabbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  height: 48px;
  width: min(var(--container), 100% - var(--page-pad) * 2);
  margin: -48px auto 0;
}
.tabbar a {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 12px 24px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Figma'da uzun etiketli iki sekmenin yatay dolgusu 16, digerlerinin 24 */
.tabbar a[data-tight="true"] { padding-inline: 16px; }
.tabbar a:hover { background: var(--color-blue); }
.tabbar a[aria-current="page"] {
  background: var(--color-white);
  color: var(--color-navy);
}


/* ------------------------------------------------------------
   ZAMAN TUNELI — Öykümüz
   Figma: kart 1248x500 @ x=104 · beyaz
     sol blok 733x432 (alt hizali) · ray 6x432 · yillar 181x432 col gap 30
     pasif yil Mont 600/24/29.26 #666 · aktif Mont 600/64/78.02 #041E42
     icerik 476x231 · baslik Mont 600/32/39.01 · govde Mont 400/18/28
     gorsel 460x449 @ (788, 26) · golge 0 4 4
   ------------------------------------------------------------ */
.timeline {
  background: var(--color-white);
  padding: 144px 0 168px;
}
.timeline__card {
  width: 1248px;
  max-width: calc(100% - var(--page-pad) * 2);
  margin-left: 104px;
  display: flex;
  align-items: center;
  gap: 55px;
  height: 500px;
}
.timeline__left {
  display: flex;
  align-items: flex-end;
  gap: 55px;
  height: 432px;
  flex: 0 0 733px;
}

/* Figma: "tarih gosterim" 202px = ray 6 + bosluk 15 + yillar 181 */
.timeline__scale {
  display: flex;
  gap: 15px;
  height: 432px;
  flex: 0 0 202px;
}
.timeline__rail {
  position: relative;
  width: 6px;
  height: 432px;
  flex: 0 0 6px;
}
.timeline__rail::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #FFF 0%, var(--color-sky) 18%,
                              var(--color-sky) 82%, #FFF 100%);
}
.timeline__marker {
  position: absolute;
  left: 0;
  width: 6px;
  height: 23px;
  border-radius: 1px;
  background: var(--color-navy);
  transition: top var(--dur-slow) var(--ease);
}

/* Yil listesi bir PENCERE: ayni anda 7 yil gorunur, toplam 14 yil var
   (Figma canvas'inda listelenmis). Ilk ve son gorunen yilin beyaza
   solmasi tam da pencerenin isareti. */
.timeline__years {
  width: 181px;
  height: 432px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
  flex: 0 0 181px;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.timeline__years::-webkit-scrollbar { display: none; }
.timeline__year {
  font-size: 24px;
  line-height: 29.26px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--dur) var(--ease), font-size var(--dur) var(--ease);
  cursor: pointer;
}
.timeline__year:hover { color: var(--color-navy); }
.timeline__year[aria-current="true"] {
  font-size: 64px;
  line-height: 78.02px;
  color: var(--color-navy);
}
.timeline__year[data-empty="true"] { opacity: .55; cursor: default; }

/* Figma'da bu blok 476x231 ve alta hizali. Metin orada elle satir
   sonlariyla 5 satira bolunmus; biz dogal sarma kullaniyoruz (mobilde
   elle sonlar bozardi). min-height Figma yuksekligini korur, boylece
   baslik ve govde ayni y'de baslar, fark yalniz alttaki bosluga gider. */
.timeline__content {
  width: 476px;
  min-height: 231px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  align-self: flex-end;
}
.timeline__title { font-size: 32px; line-height: 39.01px; font-weight: 600; color: var(--color-navy); }
.timeline__body  { font-size: 18px; line-height: 28px;    font-weight: 400; color: var(--color-navy); white-space: pre-line; }
.timeline__empty { font-size: 18px; line-height: 28px; color: var(--color-text-muted); }

.timeline__figure {
  width: 460px;
  height: 449px;
  flex: 0 0 460px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.timeline__figure img { width: 100%; height: 100%; object-fit: cover; }


/* ------------------------------------------------------------
   MISYON / VIZYON
   Figma: 1440x678 · gorsel + #041E42 @ %78
     "Misyon" @ (100, 89) Mont 600/36 · metin 660x84 @ (100,169) Mont 400/18/28
     "Vizyon" @ saga hizali (1212, 397) · metin 629x84 @ (720,478)
   ------------------------------------------------------------ */
.mv {
  position: relative;
  height: 678px;
  overflow: hidden;
  color: var(--color-white);
  --overlay: rgba(4, 30, 66, .78);
}
.mv__inner { position: relative; z-index: 1; height: 100%; }
.mv__block { position: absolute; }
.mv__block--misyon { left: 100px; top: 89px; width: 660px; }
.mv__block--vizyon { right: 104px; top: 397px; width: 629px; text-align: right; }
.mv__title { font-size: 36px; line-height: 43.88px; font-weight: 600; margin-bottom: 36px; }
.mv__body  { font-size: 18px; line-height: 28px; font-weight: 400; }


/* ------------------------------------------------------------
   Tablet (768-1439)
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1439px) {
  .pagehero { height: auto; padding: 160px 0 96px; }
  .pagehero__block { height: auto; gap: 40px; }
  .pagehero__title { font-size: 30px; line-height: 36px; }
  .pagehero__sub { font-size: 20px; line-height: 26px; }

  .timeline { padding: 72px 0; }
  .timeline__card {
    width: auto;
    margin-inline: auto;
    max-width: calc(100% - var(--page-pad) * 2);
    height: auto;
    gap: 32px;
    align-items: stretch;
  }
  .timeline__left { flex: 1 1 auto; gap: 32px; }
  .timeline__content { width: auto; min-height: 0; flex: 1 1 auto; }
  /* 768px'te 320 sabit genislik satira sigmiyordu; kucultulebilir yapildi. */
  .timeline__figure { flex: 0 1 320px; width: 320px; min-width: 0; max-width: 100%; height: 400px; }

  .mv { height: auto; padding: 72px 0; }
  .mv__inner { display: flex; flex-direction: column; gap: 48px; }
  .mv__block { position: static; width: auto; }
  .mv__block--vizyon { text-align: left; }
}


/* ------------------------------------------------------------
   Mobil (<768) — Figma: 505:5844
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* ----------------------------------------------------------
     MOBIL — Figma 505:5844 (390x2721)
       kahraman  0..386   pad 158/93/42/16 · baslik Mont 600/18 · alt Mont 500/16
       sekmeler  410..548 3 satir x 2 sekme · satir 9 / sutun 8 · yukseklik 40
       tunel     572..1299
       mis/viz  1299..1757 · pad 54/15/94/16 · bloklar arasi 80
     ---------------------------------------------------------- */
  /* Figma mobil: kahraman 391x431, pad 203/15/42/16.
     Oykumuz sayfasinda daha kisa: 386, pad-top 158.
     (Figma sag dolguyu 93 diyor ama icerik kutusu 359 genisliginde ve
      x=16'da duruyor — yani gercek sag bosluk 15.) */
  .pagehero {
    height: auto;
    min-height: 431px;
    padding: 203px 15px 42px 16px;
    align-items: flex-start;
  }
  .pagehero--short { min-height: 386px; padding-top: 158px; }
  .pagehero__inner { width: 100%; max-width: none; margin: 0; }
  .pagehero__block { height: auto; gap: 23px; }
  /* Figma: baslik-altmetin araligi cogu sayfada 8, Oykumuz'de 23 */
  .pagehero__text { gap: 8px; }
  .pagehero--short .pagehero__text { gap: 23px; }
  .pagehero__title { font-size: 18px; line-height: 21.94px; }
  /* --sub-sm masaustu kurali (20/24.38) media query DISINDA tanimli;
     ozgullugu yuksek oldugu icin mobile siziyordu — acikca eziliyor. */
  .pagehero__sub,
  .pagehero--sub-sm .pagehero__sub {
    font-size: 16px; line-height: 19.5px; font-weight: 400;
  }
  .pagehero--short .pagehero__sub { font-weight: 500; }

  /* Sekmeler: yatay kaydirma yerine Figma'daki gibi 2 sutunlu sarma */
  .tabbar {
    height: auto;
    flex-wrap: wrap;
    gap: 9px 8px;
    width: 363px;
    max-width: calc(100% - 32px);
    margin: 24px 16px 0;
  }
  /* Figma mobil: sekme yazisi 600 agirlikta (masaustunde 500),
     uzun etiketli sekme 13px, digerleri 14px. */
  .tabbar a {
    height: 40px;
    padding: 8px;
    font-size: 14px;
    line-height: 17.07px;
    font-weight: 600;
  }
  .tabbar a[data-tight="true"] { padding-inline: 8px; font-size: 13px; line-height: 15.85px; }
  .tabbar a:first-child { padding-inline: 12px; }

  /* Zaman tuneli — ray+yillar solda, icerik sagda, gorsel altta */
  .timeline { padding: 24px 10px 0; background: var(--color-white); }
  /* Sekme blogu ile sayfa icerigi arasi Figma'da 24px.
     DIKKAT: `.policy:first-of-type` HICBIR SEYE UYMUYORDU — main icindeki ilk
     <section> .pagehero, ilk .policy degil; :first-of-type tur bazinda calisir.
     Bitisik kardes seciciyle veriliyor (.tabbar her sayfada hemen oncesinde). */
  .tabbar + .policy, .tabbar + .cert { margin-top: 24px; }
  .social, .textpage, .reflist { margin-top: 24px; }
  .timeline__card {
    width: auto;
    margin: 0;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 32px;
  }
  .timeline__left {
    flex: 1 1 auto;
    height: 308px;
    gap: 38px;
    align-items: flex-end;
  }
  .timeline__scale { flex: 0 0 113px; height: 308px; gap: 15px; }
  .timeline__rail { height: 308px; }
  .timeline__years { width: 92px; flex: 0 0 92px; height: 308px; gap: 18px; }
  .timeline__year { font-size: 16px; line-height: 19.5px; }
  .timeline__year[aria-current="true"] { font-size: 40px; line-height: 48.76px; }
  .timeline__content { width: 204px; flex: 0 0 204px; min-height: 238px; gap: 19px; }
  .timeline__title { font-size: 18px; line-height: 21.94px; }
  .timeline__body  { font-size: 14px; line-height: 20px; }
  .timeline__figure { width: 100%; flex: 0 0 auto; height: 367px; box-shadow: none; }

  /* Misyon / Vizyon */
  .mv { height: auto; padding: 54px 15px 94px 16px; }
  .mv__inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .mv__block { position: static; width: auto; }
  .mv__block--vizyon { text-align: left; }
  .mv__title { font-size: 18px; line-height: 21.94px; margin-bottom: 16px; }
  .mv__body  { font-size: 16px; line-height: 19.5px; }
  /* Figma'da Vizyon govdesi 14/20, Misyon govdesi 16/19.5 — tasarim tutarsizligi,
     birebir aktariliyor. */
  .mv__block--vizyon .mv__body { font-size: 14px; line-height: 20px; }
  /* Figma mobil (514:5980): sekme çubuğu 455-593, kartlar 617'den itibaren
     598 yüksekliğinde ve 16 aralıklı. */
  .cert { min-height: 598px; }
  /* İlk kartın üst boşluğu `.tabbar + .cert` ile veriliyor (yukarıda).
     Burada duran `.cert:first-of-type { padding-top: 72px }` hem hiçbir
     şeye uymuyordu hem de yanlış değerdi. */
  .cert + .cert { margin-top: 16px; }

}


/* ------------------------------------------------------------
   POLITIKA BLOKLARI — Entegre Yönetim Sistemi Politikası
   Figma: her blok 1440x360 · alt kenarda 1px #041E42 cizgi
     icerik 1248x203 dikeyde ortali · row gap 48
     sol 226x171 col gap 24 (baslik Mont 600/24/29.26 ortali + ikon)
     sag 974 · Mont 400/16/28.8
   ------------------------------------------------------------ */
.policy {
  height: 360px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-navy);
  background: var(--color-white);
}
.policy__row { display: flex; gap: 48px; align-items: flex-start; }
.policy__head {
  width: 226px;
  flex: 0 0 226px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.policy__title {
  font-size: 24px;
  line-height: 29.26px;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
}
.policy__icon { width: 60px; height: 82px; display: grid; place-items: center; }
.policy__icon img { max-width: 100%; max-height: 100%; }
.policy__body {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 28.8px;
  font-weight: 400;
  color: var(--color-navy);
  white-space: pre-line;
}

/* Imza — Figma: tek metin 161x64 @ (116, 2883), Mont 600/24/32,
   iki satir ("Genel Müdür" / "Şahin AYBEK"). Bolum 2838..3063 = 225px. */
.signature {
  background: var(--color-white);
  padding: 45px 0 116px 116px;
}
.signature__inner {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
  width: auto;
  max-width: none;
}


/* ------------------------------------------------------------
   SERTIFIKA SATIRLARI
   Figma: her satir 1440x436 · pad 96 · alt kenarda 1px #041E42
     icerik 1248x244 · row gap 41 · dikeyde ortali
     gorsel 324x244 (kenarlik ve kose yaricapi GORSELE GOMULU —
       Figma exposure/kontrast filtresi uyguladigi icin node olarak
       export edildi; CSS'te tekrar kenarlik eklenmemeli)
     sag 883 col gap 42 · baslik Mont 500/24/29.26 · govde Mont 400/16/38.4
     buton 121x44 pad 16/32 · Mont 600/16/19.5
   ------------------------------------------------------------ */
.cert {
  height: 436px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-navy);
  background: var(--color-white);
}
.cert__row { display: flex; gap: 41px; align-items: center; }
.cert__figure {
  width: 324px;
  height: 244px;
  flex: 0 0 324px;
  overflow: hidden;
}
.cert__figure img { width: 100%; height: 100%; display: block; }
.cert__figure--contain img { object-fit: contain; }
.cert__figure--cover img   { object-fit: cover; }
/* Kenarlik + kose yaricapi: Figma filtresi olan gorseller node olarak
   export edildigi icin bunlar zaten goruntune gomulu geldi. Filtresi
   olmayanlarda (ilk iki sertifika) CSS ile eklenmesi gerekiyor. */
.cert__figure--framed {
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
}
.cert__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 42px; }
.cert__text { display: flex; flex-direction: column; gap: 16px; }
.cert__title { font-size: 24px; line-height: 29.26px; font-weight: 500; color: var(--color-navy); }
.cert__desc  { font-size: 16px; line-height: 38.4px;  font-weight: 400; color: var(--color-navy); }
/* Figma metni madde listesi olarak bicimlendirilmis; REST API bu bilgiyi
   vermiyor ama render'da madde isaretleri gorunuyor. */
.cert__list { display: flex; flex-direction: column; }
.cert__list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 38.4px;
  font-weight: 400;
  color: var(--color-navy);
}
.cert__list li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.cert .btn { align-self: flex-start; padding: 16px 32px; }
/* Figma: son sertifika satiri 3730'da bitiyor, footer 3832'de basliyor */
.cert:last-of-type { border-bottom: 0; margin-bottom: 102px; }


@media (min-width: 768px) and (max-width: 1439px) {
  .policy { height: auto; padding: 48px 0; }
  .policy__row { gap: 32px; }
  .cert { height: auto; padding: 48px 0; }
  .cert__row { gap: 32px; }
  .cert__figure { flex: 0 0 240px; width: 240px; height: 180px; }
  .cert__desc { line-height: 28px; }
}

@media (max-width: 767px) {
  /* --- POLITIKA KARTI  Figma 505:6142 / "KART n" 390x540
         icerik dikeyde ortali · baslik Mont 600/18/21.94 (tam genislik)
         ikon 60x82 ortali · basliktan ikona 24 · ikondan govdeye 16
         govde Mont 400/14/20 · kenarlik yok --- */
  .policy {
    height: auto;
    min-height: 540px;
    /* yatay bosluk .container'dan gelir; burada tekrar verilirse
       icerik 359 yerine 326'da akar */
    padding: 37px 0;
    border-bottom: 0;
  }
  .policy__row { flex-direction: column; gap: 16px; align-items: stretch; }
  .policy__head { width: auto; flex: 0 0 auto; align-items: stretch; gap: 24px; }
  .policy__title { font-size: 18px; line-height: 21.94px; text-align: left; }
  .policy__icon { width: 60px; height: 82px; margin-inline: auto; }
  .policy__body { font-size: 14px; line-height: 20px; }

  /* Figma: imza 134x66 @ (16, 3912); son kart 3893'te bitiyor, footer 4022 */
  .signature { padding: 19px 0 44px; }
  .signature__inner { margin-inline: var(--page-pad); }
  .signature__inner { font-size: 18px; line-height: 21.94px; }

  /* --- SERTIFIKA KARTI  Figma 514:5980 · kart 391x~600 · pad 24/16
         gorsel 324x244 ustte · gap 16 · metin blogu · gap 30 · buton --- */
  /* Figma mobilde kart içeriği kartın ÜSTÜNE yaslı (görsel tam kart
     tepesinde, 24px boşluk altta). Temel kuraldaki `align-items:center`
     mobilde içeriği 59px aşağı itiyordu: bizim gövde metnimiz Figma'nın
     tekrarlanan yer tutucusundan kısa olduğu için kalan boşluk ikiye
     bölünüyordu. Üste yaslamak görsel/başlık/gövdeyi tasarımdaki y'ye oturtur. */
  .cert {
    height: auto;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 0;
  }
  .cert__row { flex-direction: column; gap: 16px; align-items: stretch; }
  .cert__figure { flex: 0 0 auto; width: 324px; max-width: 100%; height: 244px; }
  /* Figma mobil: metin blogu 359x240 (baslik 18/21.94 w600 + gap 16 +
     liste 16/19.5 w400), sonra gap 30, buton 121x44 pad 16/32 */
  .cert__body { gap: 30px; width: 100%; }
  .cert__text { gap: 16px; }
  .cert__title { font-size: 18px; line-height: 21.94px; font-weight: 600; }
  .cert__list li { font-size: 16px; line-height: 19.5px; padding-left: 20px; }
  .cert__list li::before { left: 8px; top: 8px; }
  .cert .btn { padding: 16px 32px; font-size: 16px; }
  .cert:last-of-type { margin-bottom: 24px; }
}


/* ------------------------------------------------------------
   REFERANS LOGO IZGARASI — Referanslar
   Figma: 1248 genislik · 5 sutun x 220px · aralik 37 · 6 satir
     bazi hucreler beyaz zemin + 2px #D7D7D7 kenarlik
   Figma yorumu (RU WORKS): "hover ile logolar renklenicek"
     -> varsayilan Figma'nin saturation:-1 filtreli gri surumu,
        hover'da filtresiz renkli surum acilir.
   ------------------------------------------------------------ */
/* Figma: izgara 744..2249, footer 2315 -> alt bosluk 66 */
.reflist { background: var(--color-white); padding: 66px 0 66px; }
.reflist__grid {
  display: grid;
  grid-template-columns: repeat(5, 220px);
  gap: 37px;
  justify-content: space-between;
}
/* Her hucre 220x220, beyaz zemin + 2px #D7D7D7 kenarlik.
   Logo hucre icinde kendi olcusu ve konumuyla duruyor (her biri farkli) —
   olculer HTML'de satir ici stille tasiniyor, kaynak data/referanslar.json. */
.reflogo {
  position: relative;
  width: 220px;
  height: 220px;
  background: var(--color-white);
  border: 2px solid #D7D7D7;
  overflow: hidden;
}
.reflogo img {
  position: absolute;
  object-fit: contain;
  transition: opacity var(--dur) var(--ease);
}
.reflogo__color { opacity: 0; }
.reflogo:hover .reflogo__color,
.reflogo:focus-within .reflogo__color { opacity: 1; }
.reflogo:hover .reflogo__gray,
.reflogo:focus-within .reflogo__gray { opacity: 0; }

/* Tablet/mobilde hucre kucuIdugu icin logo olculerini oransal olcekle:
   satir ici piksel degerleri 220'lik hucreye gore verilmis. */
@media (max-width: 1439px) {
  .reflogo { width: auto; height: auto; aspect-ratio: 1; container-type: inline-size; }
  .reflogo img {
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%);
    width: 86% !important; height: auto !important;
    max-height: 78%;
  }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .reflist { padding: 48px 0 64px; }
  .reflist__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
  .reflist { padding: 24px 0 40px; }
  .reflist__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/* ------------------------------------------------------------
   SOSYAL SORUMLULUK
   Figma: blok 1268x1476 @ (86,678) · pad 32/10 · icerik 1248
     galeri gorseli 1248x648 + #041E42 @ %38
       ustunde cubuk 1248x48 @ y=366 · [ok] baslik Mont 600/32 [ok]
     metin 1248x84 Mont 400/18/28 · gap 40
     iki foto 608x459 · aralik 32
     kapanis metni 1248x101 · gap 40
   ------------------------------------------------------------ */
.social { background: var(--color-white); padding: 32px 0; }
.social__inner { display: flex; flex-direction: column; gap: 40px; }
.social__gallery {
  position: relative;
  height: 648px;
  overflow: hidden;
  color: var(--color-white);
  --overlay: rgba(4, 30, 66, .38);
}
.social__bar {
  position: absolute;
  left: 0; right: 0;
  top: 334px;                      /* 366 - 32 (bolum ust dolgusu) */
  z-index: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0;
}
.social__nav {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--color-white);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.social__nav svg { width: 18px; height: 32px; }
.social__nav:hover { opacity: .75; }
.social__nav--prev:hover { transform: translateX(-3px); }
.social__nav--next:hover { transform: translateX(3px); }
.social__gtitle { font-size: 32px; line-height: 39.01px; font-weight: 600; text-align: center; }
.social__text { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-navy); }
.social__photos { display: flex; gap: 32px; }
.social__photos figure { flex: 1 1 0; height: 459px; overflow: hidden; margin: 0; }
.social__photos img { width: 100%; height: 100%; object-fit: cover; }


/* ------------------------------------------------------------
   KVKK / IS ETIGI
   Figma: Content 1440x1615 · pad 32/96 · bloklar arasi 54
     blok basligi Mont 600/32/39.01 · govde Mont 400/18/28 · aralik 31
     "Is Etigi" blogunda ustte 1248x368 gorsel (henuz yerlestirilmemis) · gap 73
   ------------------------------------------------------------ */
/* Figma: icerik 678..2293, footer 2313 -> alt bosluk 32 + 20 */
.textpage { background: var(--color-white); padding: 32px 0 52px; }
.textpage__inner { display: flex; flex-direction: column; gap: 54px; }
.textblock { display: flex; flex-direction: column; gap: 31px; }
.textblock__title { font-size: 32px; line-height: 39.01px; font-weight: 600; color: var(--color-navy); }
/* Figma metninde paragraf sonlari var; pre-line ile korunuyor */
.textblock__body  { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-navy); white-space: pre-line; }
/* Figma: gorselden basliga 83px (73 gap + 10 ic dolgu), govdeden sonra 10px */
.textblock__media { height: 368px; margin-bottom: 52px; }
.textblock--padded { padding-bottom: 10px; }
.textblock__media img { width: 100%; height: 100%; object-fit: cover; }


@media (min-width: 768px) and (max-width: 1439px) {
  .social__gallery { height: 44vw; }
  .social__photos figure { height: 32vw; }
  .social__bar { top: 46%; }
}
@media (max-width: 767px) {
  /* --- SOSYAL SORUMLULUK mobil  Figma 515:6229
         blok 391x2021 · pad 8/16 · ic bloklar arasi 40
         galeri 359x648 (masaustuyle ayni) · metin Mont 400/18/28
         fotolar alt alta: 326 ve 375 · aralarinda 32 --- */
  .social { padding: 8px 0; }
  .social__inner { gap: 40px; }
  .social__gallery { height: 648px; }
  .social__bar { top: 300px; }
  .social__gtitle { font-size: 18px; line-height: 21.94px; }
  .social__nav { width: 32px; height: 32px; }
  .social__nav svg { width: 12px; height: 20px; }
  .social__text { font-size: 18px; line-height: 28px; }
  .social__photos { flex-direction: column; gap: 32px; }
  /* flex:1 1 0 masaustunden siziyor; dikey yiginda yuksekligi sifirliyor */
  .social__photos figure { flex: 0 0 auto; }
  .social__photos figure:first-child { height: 326px; }
  .social__photos figure:last-child  { height: 375px; }

  /* --- KVKK mobil  Figma 515:6558
         bloklar arasi 24 · baslik Mont 500/16/19.5 · govde Mont 400/14/20
         "kvkk" blogunda baslik-govde arasi 31, "Is Etigi"nde 24 --- */
  .textpage { padding: 0 0 32px; }
  .textpage__inner { gap: 24px; }
  .textblock { gap: 31px; }
  .textblock--padded { gap: 24px; padding-block: 10px; }
  .textblock__title { font-size: 16px; line-height: 19.5px; font-weight: 500; }
  .textblock__body  { font-size: 14px; line-height: 20px; }
  .textblock__media { height: 368px; margin-bottom: 0; }
}

/* 390 altı tasarlanmadı; 390 düzeni akışkan küçülmeli. Zaman tüneli
   satırı sabit 113 + 38 + 204 = 355px istiyor ve 320'de taşıyordu
   (scrollWidth 365). İçerik sütunu akışkan. */
@media (max-width: 389px) {
  .timeline__content { width: auto; flex: 1 1 auto; min-width: 0; }
  .timeline__left { gap: 20px; }
}