/*
 * "<Firma>'da Yasam" bolumu - teksan/assets/css/style.css dosyasinin bu temaya
 * uyarlanmis kopyasi. Kurallar ve degerler birebir ayni; tek fark hepsinin
 * .ft-life sarmalayicisi altina alinmis olmasi.
 *
 * Sarmalama zorunlu: kaynak dosya body, img, a, h1-h3, p ve * secicilerini global
 * tanimliyor, ayrica Bootstrap'in .container sinifini yeniden yaziyordu.
 * Kapsamlanmasaydi sayfanin geri kalaninin yerlesimi bozulurdu.
 */

/* ========================================================================== TEKSAN’da Yaşam ========================================================================== */
.ft-life {
  --life-primary: var(--theme-primary, var(--ft-accent, #c45c26));
  --navy-900: var(--life-primary);
  --navy-800: var(--life-primary);
  --navy-700: var(--life-primary);
  --blue-600: var(--life-primary);
  --blue-500: var(--life-primary);
  --ink: var(--theme-heading, var(--ft-heading, #1c1917));
  --text: var(--theme-text, var(--ft-text, #4a5568));
  --text-soft: var(--theme-muted, var(--ft-muted, #7a7268));
  --red: #c8102e;
  --teal: var(--life-primary);
  --bg-wash-light: color-mix(in srgb, var(--life-primary) 6%, #fff);
  --bg-wash: color-mix(in srgb, var(--life-primary) 10%, #fff);
  --bg-wash-mid: color-mix(in srgb, var(--life-primary) 14%, #fff);
  --bg-social: var(--bg-wash);
  --bg-health: var(--bg-wash-mid);
  --bg-career: var(--bg-wash-light);
  --bg-culture: var(--bg-wash);
  --chip: color-mix(in srgb, var(--life-primary) 12%, #fff);
  --radius: 6px;
  --shadow: 0 2px 6px color-mix(in srgb, var(--life-primary) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--life-primary) 6%, transparent);
  --shadow-hover: 0 6px 14px color-mix(in srgb, var(--life-primary) 14%, transparent), 0 18px 36px color-mix(in srgb, var(--life-primary) 10%, transparent);
  --font-head: var(--theme-font-family, "Montserrat", "Segoe UI", Arial, sans-serif);
  --font-body: var(--theme-font-family, "Inter", "Segoe UI", Arial, sans-serif);
}

.ft-life *,
.ft-life *::before,
.ft-life *::after {
  box-sizing: border-box;
}

.ft-life {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.ft-life img {
  display: block; max-width: 100%;
}

.ft-life a {
  color: inherit; text-decoration: none;
}

.ft-life h1,
.ft-life h2,
.ft-life h3,
.ft-life p {
  margin: 0;
}

.ft-life .container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
}

/* ---------- Sertifika bandı ---------- */
.ft-life .cert-bar {
  background: var(--navy-800);
  padding: 18px 0 12px;
  overflow: visible;
}

.ft-life .cert-bar__inner {
  display: flex;
  gap: 34px;
  align-items: flex-end;
  overflow: visible;
}

.ft-life .hpw-badge {
  width: 150px;
  min-height: 164px;
  flex: 0 0 150px;
  filter: none;
  transition: transform .3s ease;
}

.ft-life .hpw-badge:hover {
  transform: translateY(-3px) rotate(-1deg);
}

.ft-life .hpw-badge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- Hero ---------- */
.ft-life .hero {
  position: relative;
  min-height: 360px;
  background: var(--navy-800);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ft-life .hero__media {
  position: absolute;
  inset: 0 0 0 30%;
}

.ft-life .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.ft-life .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(90deg, var(--navy-800) 0%, color-mix(in srgb, var(--navy-800) 85%, transparent) 18%, color-mix(in srgb, var(--navy-800) 35%, transparent) 42%, transparent 65%),
  linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 25%, transparent), transparent 40%);
}

.ft-life .hero__content {
  position: relative;
  z-index: 1;
  padding-top: 70px;
  padding-bottom: 28px;
  color: #fff;
}

.ft-body .ft-life .hero__title,
.ft-life .hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -.5px;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.ft-body .ft-life .hero__text,
.ft-life .hero__text {
  max-width: 430px;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

/* ---------- Bölüm blokları ---------- */
.ft-life .block {
  padding: 18px 0 22px;
}

.ft-life .block + .block {
  border-top: 1px solid color-mix(in srgb, var(--life-primary) 5%, transparent);
}

.ft-life .block--social {
  background: linear-gradient(180deg, color-mix(in srgb, var(--life-primary) 5%, #fff) 0%, var(--bg-social) 100%);
}

.ft-life .block--health {
  background: linear-gradient(180deg, color-mix(in srgb, var(--life-primary) 8%, #fff) 0%, var(--bg-health) 100%);
}

.ft-life .block--career {
  background: linear-gradient(180deg, color-mix(in srgb, var(--life-primary) 4%, #fff) 0%, var(--bg-career) 100%);
}

.ft-life .block--culture {
  background: linear-gradient(180deg, color-mix(in srgb, var(--life-primary) 7%, #fff) 0%, var(--bg-culture) 100%);
}

.ft-life .block__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.ft-life .block__icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy-700);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--life-primary) 25%, transparent);
}

.ft-life .block__icon svg {
  width: 28px; height: 28px; fill: #fff;
}

.ft-life .block--culture .block__icon {
  background: var(--teal);
}

.ft-life .block__titles {
  flex: 1 1 auto; min-width: 0;
}

.ft-life .block__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
}

.ft-life .block__desc {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-soft);
}


/* ---------- Kartlar ---------- */
.ft-life .cards {
  display: grid;
  gap: 14px;
}

.ft-life .cards--5 {
  grid-template-columns: repeat(5, 1fr);
}

.ft-life .cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.ft-life .cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.ft-life .card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ft-life .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.ft-life .card__media {
  position: relative;
  height: 145px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--life-primary) 18%, #fff) 0%, color-mix(in srgb, var(--life-primary) 32%, #fff) 100%);
}

.ft-life .card__media img {
  display: block;
  width: 100%;
  height: 145px;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .5s ease;
}

.ft-life .card__media img.is-loaded {
  opacity: 1;
}


/* Görsel yüklenemezse gösterilen yer tutucu */
.ft-life .card__media.is-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
  opacity: .85;
}

.ft-life .card__body {
  flex: 1 1 auto;
  padding: 13px 12px 16px;
}

.ft-life .card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 9px;
}

.ft-life .card__text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-soft);
}

.ft-life .cards--compact .card__body {
  padding: 10px 12px 14px;
}

.ft-life .cards--compact .card__title {
  font-size: 12px; margin-bottom: 6px;
}

.ft-life .cards--compact .card__text {
  font-size: 10.5px;
}

/* ---------- Görünür olma animasyonu ---------- */
.ft-life .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.ft-life .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ft-life .reveal {
    opacity: 1; transform: none; transition: none;
  }

  .ft-life .card,
  .ft-life .card__media img,
  .ft-life .hpw-badge {
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ft-life .cards--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .ft-life .container {
    padding: 0 20px;
  }

  .ft-life .hero__media {
    inset: 0;
  }

  .ft-life .hero__media::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--navy-800) 92%, transparent) 0%, color-mix(in srgb, var(--navy-800) 60%, transparent) 60%, color-mix(in srgb, var(--navy-800) 30%, transparent) 100%);
  }

  .ft-life .cards--4,
  .ft-life .cards--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ft-life .cert-bar__inner {
    gap: 18px;
  }

  .ft-life .hpw-badge {
    width: 112px;
  }

  .ft-life .hero {
    min-height: 320px;
  }

  .ft-life .hero__content {
    padding-top: 40px;
  }

  .ft-life .block__head {
    flex-wrap: wrap; gap: 12px;
  }

  .ft-life .block__icon {
    width: 44px; height: 44px;
  }

  .ft-life .block__icon svg {
    width: 22px; height: 22px;
  }

  .ft-life .block__title {
    font-size: 22px;
  }

  .ft-life .block__titles {
    flex-basis: calc(100% - 56px);
  }

  /* Kartlar mobilde yatay kaydırılır */
  .ft-life .cards,
  .ft-life .cards--5,
  .ft-life .cards--4,
  .ft-life .cards--3 {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }

  .ft-life .cards::-webkit-scrollbar {
    display: none;
  }

  .ft-life .card {
    scroll-snap-align: start;
  }

  .ft-life .card:hover {
    transform: none;
  }
}