/* ==========================================================================
   sections-a.css — Bayraklı 1923
   Bu dosya şu bölümleri biçimlendirir:
     #hero       — açılış, büyük başlık, ÇNR notu, çift CTA
     #hakkimizda — kısa güven notu
     #aciklamalar / #iddialar — hukuki açıklamalar ve iddialara yanıtlar
     #belgeler   — görsel belge önizleme kartları (.doc-preview-card / .doc-grid)
     Lightbox Modal — tam ekran interaktif belge görüntüleyici
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
#hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 88vh;
  min-height: 88svh;
  padding-block: var(--space-4) var(--space-5);
}

#hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 18%;
}

#hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .92) 48%,
    rgba(255, 255, 255, .65) 75%,
    rgba(255, 255, 255, .3) 100%
  );
}

#hero > .container {
  width: 100%;
  position: relative;
  z-index: 1;
}

#hero .hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

#hero .son-guncelleme {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

#hero .hero-title {
  max-width: 26ch;
  font-size: var(--text-xxl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

#hero .hero-text {
  margin-top: var(--space-4);
  max-width: 100%;
}

#hero .hero-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--color-ink-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

@media (min-width: 735px) {
  #hero {
    min-height: 92vh;
    min-height: 92svh;
    padding-block: var(--space-5) var(--space-6);
  }

  #hero .hero-text { margin-top: var(--space-5); }
}

@media (min-width: 1069px) {
  #hero {
    min-height: 94vh;
    min-height: 94svh;
  }
}