/* =============================================================================
   ABOUT — Hakkımızda, Üretim ve Kariyer sayfalarına özel bölümler
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Kurumsal alt sayfa düzeni (bolum.php)
   Solda aynı gruptaki bölümlerin listesi, sağda içerik blokları.
   -------------------------------------------------------------------------- */
.bolum {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Yan gezinme kaydırma boyunca ekranda kalır */
.bolum__aside { position: sticky; top: calc(var(--header-h-sm) + var(--sp-6)); }

.bolum__aside-title {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.bolum__nav { margin: 0; padding: 0; list-style: none; }
.bolum__nav li { margin: 0; }
.bolum__nav a {
  position: relative;
  display: block;
  padding: 0.7rem 0 0.7rem var(--sp-4);
  border-left: 1px solid var(--line);
  color: var(--ink-400);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}
.bolum__nav a:hover { color: var(--ink); border-left-color: var(--rose); padding-left: calc(var(--sp-4) + 4px); }
.bolum__nav a.is-active { color: var(--ink); border-left-color: var(--rose-deep); }

.bolum__cta {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--rose-wash);
}
.bolum__cta p { margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-600); }

/* --- İçerik blokları --- */
.bolum__body > .blk + .blk { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.blk__heading { margin-bottom: var(--sp-5); font-size: var(--fs-h2); }
.blk__p {
  max-width: 68ch;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--ink-600);
}
.blk--list .capability__list { margin-top: 0; }
.blk--cards .feature__icon { margin-bottom: var(--sp-4); }
/* Kartta ikon yerine görsel seçilmişse — ikonla aynı yerleşim, sığdırılmış görsel */
.value-card__media { display: block; margin-bottom: var(--sp-4); }
.value-card__media img {
  width: auto;
  max-width: 100%;
  height: clamp(48px, 6vw, 72px);
  object-fit: contain;
  object-position: left center;
}

/* Tek sütuna hizalanmış zaman çizelgesi (alt sayfa içinde) */
.timeline--single::before { left: 5px; transform: none; }
.timeline--single .timeline__item,
.timeline--single .timeline__item:nth-child(even),
.timeline--single .timeline__item:nth-child(odd) {
  width: 100%;
  margin-left: 0;
  padding-left: clamp(1.75rem, 4vw, 2.5rem);
  padding-right: 0;
  text-align: left;
}
.timeline--single .timeline__item:nth-child(odd) .timeline__dot,
.timeline--single .timeline__item:nth-child(even) .timeline__dot { left: 0; right: auto; }
.timeline--single .timeline__item:nth-child(odd) .timeline__text { margin-left: 0; }

/* -----------------------------------------------------------------------------
   1. Zaman çizelgesi (Tarihçe)
   Ortada tek bir dikey çizgi; kayıtlar dönüşümlü olarak iki yana yerleşir.
   -------------------------------------------------------------------------- */
.timeline { position: relative; }

/* Merkez çizgisi */
.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding-right: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.timeline__item:nth-child(even) {
  margin-left: 50%;
  padding-right: 0;
  padding-left: clamp(2rem, 4vw, 4rem);
  text-align: left;
}
.timeline__item:nth-child(odd) { text-align: right; }

/* Çizgi üzerindeki nokta */
.timeline__dot {
  position: absolute;
  top: 0.5rem;
  width: 11px; height: 11px;
  border: 1px solid var(--rose);
  border-radius: 50%;
  background: var(--ivory);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.timeline__item:nth-child(odd) .timeline__dot { right: -6px; }
.timeline__item:nth-child(even) .timeline__dot { left: -5px; }
.timeline__item:hover .timeline__dot { background: var(--rose-deep); transform: scale(1.35); }

.timeline__year {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.85rem);
  line-height: 1;
  color: var(--rose-deep);
}
.timeline__title { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.timeline__text { margin: 0; color: var(--ink-400); font-size: var(--fs-sm); max-width: 46ch; }
.timeline__item:nth-child(odd) .timeline__text { margin-left: auto; }

/* -----------------------------------------------------------------------------
   2. Değer kartları
   -------------------------------------------------------------------------- */
.value-card {
  position: relative;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

/* Arka planda soluk sıra numarası */
.value-card__index {
  position: absolute;
  top: -0.35em; right: 0.1em;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--rose);
  opacity: 0.11;
  pointer-events: none;
  user-select: none;
}
.value-card__title { position: relative; margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.value-card__text { position: relative; margin: 0; color: var(--ink-400); font-size: var(--fs-sm); }

/* -----------------------------------------------------------------------------
   3. Üretim yeteneği bloğu (üretim aşaması tanıtımı)
   -------------------------------------------------------------------------- */
.capability {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.capability:last-of-type { border-bottom: 0; }
.capability--reverse .capability__media { order: 2; }

.capability__media { position: relative; }
.capability__frame {
  /* <a> olarak da kullanılır; display: block olmadan aspect-ratio uygulanmaz */
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sand);
}
.capability__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Yetenek listesi */
.capability__list { margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.capability__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  margin: 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}
.capability__list li:last-child { border-bottom: 1px solid var(--line); }
.capability__list i { flex-shrink: 0; margin-top: 0.25em; color: var(--rose-deep); }

/* -----------------------------------------------------------------------------
   4. Sertifika ızgarası
   -------------------------------------------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.cert {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.cert:hover { border-color: var(--rose); transform: translateY(-3px); }
.cert i { flex-shrink: 0; font-size: 1.5rem; color: var(--rose-deep); }
.cert__name { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.cert__desc { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-400); }

/* -----------------------------------------------------------------------------
   5. Alıntı bloğu
   -------------------------------------------------------------------------- */
.pull-quote {
  position: relative;
  max-width: 22ch;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 2px solid var(--rose);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.85rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
}
.pull-quote--wide { max-width: 34ch; }

/* -----------------------------------------------------------------------------
   6. Kariyer — açık pozisyon satırı
   -------------------------------------------------------------------------- */
.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-inline var(--dur) var(--ease-out), background var(--dur) var(--ease);
}
.job:first-of-type { border-top: 1px solid var(--line); }
.job:hover { background: var(--white); padding-inline: var(--sp-5); color: var(--ink); }
.job__title { margin: 0; font-size: var(--fs-h3); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.job__arrow {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all var(--dur) var(--ease);
}
.job:hover .job__arrow { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Alt sayfa: yan gezinme içeriğin üstüne alınır */
  .bolum { grid-template-columns: 1fr; }
  .bolum__aside { position: static; }
  .bolum__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .bolum__nav a {
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
  }
  .bolum__nav a:hover { padding-left: 1rem; }
  .bolum__nav a.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .bolum__cta { margin-top: var(--sp-6); }

  /* Zaman çizelgesi tek sütuna iner; çizgi sola kayar */
  .timeline::before { left: 5px; transform: none; }
  .timeline__item,
  .timeline__item:nth-child(even),
  .timeline__item:nth-child(odd) {
    width: 100%;
    margin-left: 0;
    padding-left: clamp(1.75rem, 5vw, 2.5rem);
    padding-right: 0;
    text-align: left;
  }
  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot { left: 0; right: auto; }
  .timeline__item:nth-child(odd) .timeline__text { margin-left: 0; }

  .capability { grid-template-columns: 1fr; }
  .capability--reverse .capability__media { order: 0; }
}

@media (max-width: 575.98px) {
  .job { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .value-card__index { font-size: 5rem; }
}

/* -------------------------------------------------------------------------
   Referans / Sertifika galerisi (Referanslarımız sayfası + Hakkımızda)
   Boş galeri PHP tarafında hiç basılmaz.
   light  -> sertifikalar (renkli logolar, açık kart)
   dark   -> marka referansları (açık/koyu-zeminli logolar, koyu logo duvarı)
   ---------------------------------------------------------------------- */
.ref-gallery { margin-top: var(--sp-9); }

.ref-gallery__title {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-3);
  position: relative;
}
.ref-gallery__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--rose);
}

.ref-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-5);
}

/* Kare kart; görsel object-fit: contain ile içine sığar. Tıklanabilir (buton). */
.ref-gallery__item {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(20, 16, 14, 0.04);
  cursor: zoom-in;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  width: 100%;
}
.ref-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20, 16, 14, 0.13);
}
.ref-gallery__item:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
}
.ref-gallery__item img,
.ref-gallery__item picture {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .ref-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-4); }
}

/* -------------------------------------------------------------------------
   Referans/sertifika lightbox (galeri görüntüleyici)
   JS: assets/js/gallery-lightbox.js — grup içinde ileri/geri gezinme.
   ---------------------------------------------------------------------- */
.reflb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 16, 14, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.reflb.is-open { opacity: 1; visibility: visible; }
.reflb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out, ease);
  background: var(--white);
}
.reflb.is-open .reflb__img { transform: scale(1); }

.reflb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.reflb__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.reflb__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.reflb__nav { top: 50%; transform: translateY(-50%); }
.reflb__nav--prev { left: clamp(0.5rem, 3vw, 2rem); }
.reflb__nav--next { right: clamp(0.5rem, 3vw, 2rem); }
.reflb__nav[hidden] { display: none; }
.reflb__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
body.is-locked { overflow: hidden; }

@media (max-width: 575.98px) {
  .reflb__btn { width: 42px; height: 42px; font-size: 1.15rem; }
}

/* -------------------------------------------------------------------------
   Liste maddesi görseli (ör. Sürdürülebilirlik ilkeleri) — maddenin alt satırı
   ---------------------------------------------------------------------- */
.capability__list-text { display: block; }
.capability__list-media {
  display: block;
  margin-top: var(--sp-3);
  max-width: 460px;
}
.capability__list-media img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.capability__list li.has-media { margin-bottom: var(--sp-6); }