/* === rentiqo-hikayesi.css — section styles for rentiqo-hikayesi.html === */
/*
  Sections: marka-hikayesi (about), gelisim-cizgisi (timeline),
  rakamlarla-rentiqo (statistics), guven-damgasi (certificates)

  Layout DNA: Diagonal / Angled Sections + Floating Islands
  Visual: Negative Space Art + Dot/Line Patterns + Scroll-Triggered Scenes
  Direction: serious, dynamic, airy, modern, medium contrast, geometric, subtle
*/

/* ========================================
   SECTION BASE + H2 DECORATION
   ======================================== */

main > section {
  padding-block: var(--space-3xl);
}

/* H2 accent bar — consistent with project pattern */
main > section h2 {
  position: relative;
  padding-inline-start: var(--space-md);
}

main > section h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
}

/* ========================================
   1. ABOUT (.marka-hikayesi)
   ======================================== */

.marka-hikayesi {
  padding-block: 0;
}

/* Page banner — dark intro */
.hikaye-giris {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  padding: calc(var(--space-3xl) + 5rem) var(--space-lg) calc(var(--space-2xl) + 4vw);
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  margin-block-end: calc(-4vw + 1px);
  position: relative;
}

.hikaye-giris::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 40% 50%, color-mix(in srgb, var(--color-deep) 28%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--color-trust) 8%, transparent) 0%, transparent 40%);
  pointer-events: none;
}

.hikaye-giris h1 {
  position: relative;
  z-index: 1;
  max-inline-size: 24ch;
  margin-inline: auto;
  color: var(--color-text-inverse);
}

/* No accent bar on H1 */
.hikaye-giris h1::before {
  display: none;
}

.hikaye-giris > p {
  position: relative;
  z-index: 1;
  max-inline-size: 48ch;
  margin-inline: auto;
  margin-block-start: var(--space-md);
  color: color-mix(in srgb, var(--color-light) 65%, transparent);
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.15rem);
  line-height: var(--leading-relaxed);
}

/* About content area */
.hikaye-icerik {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hikaye-icerik > h2 {
  max-inline-size: 24ch;
}

/* Two-column: image + text */
.hikaye-gorunum {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-xl);
  align-items: start;
}

.hikaye-gorsel img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.hikaye-metin {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.hikaye-metin p {
  line-height: var(--leading-relaxed);
}

.hikaye-degerler {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

.hikaye-degerler li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-small);
}

.hikaye-degerler li .icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ========================================
   2. TIMELINE (.gelisim-cizgisi)
   ======================================== */

.gelisim-cizgisi {
  background-color: var(--color-surface-alt);
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  padding-block: calc(var(--space-3xl) + 3vw);
  position: relative;
}

.gelisim-cizgisi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-brand) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.03;
  pointer-events: none;
}

.gelisim-icerik {
  position: relative;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.gelisim-icerik > h2 {
  max-inline-size: 22ch;
}

.gelisim-icerik > p {
  margin-block-start: calc(-1 * var(--space-md));
}

/* Timeline list */
.gelisim-zaman-dizisi {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gelisim-nokta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  position: relative;
}

/* Vertical connector line */
.gelisim-nokta:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 2.75rem;
  inset-block-start: 3rem;
  width: 2px;
  height: calc(100% + var(--space-lg) - 2.5rem);
  background: repeating-linear-gradient(
    180deg,
    var(--color-border-strong) 0px,
    var(--color-border-strong) 5px,
    transparent 5px,
    transparent 10px
  );
}

.gelisim-yil {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 2.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--size-small);
  color: var(--color-text-inverse);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gelisim-detay {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-start: var(--space-2xs);
}

.gelisim-detay h3 {
  padding-inline-start: 0;
}

/* No accent bar on H3 inside timeline */
.gelisim-detay h3::before {
  display: none;
}

.gelisim-detay p {
  font-size: var(--size-small);
  line-height: var(--leading-relaxed);
}

/* ========================================
   3. STATISTICS (.rakamlarla-rentiqo)
   ======================================== */

.rakamlarla-rentiqo {
  background-color: var(--color-surface-deep);
  color: var(--color-text-inverse);
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  margin-block-start: calc(-3vw + 1px);
  padding-block-start: calc(var(--space-3xl) + 3vw);
  padding-block-end: var(--space-3xl);
}

.rakamlar-icerik {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.rakamlar-icerik > h2 {
  max-inline-size: 22ch;
  color: var(--color-text-inverse);
}

.rakamlar-icerik > h2::before {
  background-color: var(--color-warm);
}

.rakamlar-icerik > p {
  margin-block-start: calc(-1 * var(--space-md));
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

.rakamlar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.rakam-kutu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-deep));
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-radius: var(--radius-md);
  text-align: center;
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.rakam-kutu:hover {
  border-color: color-mix(in srgb, var(--color-warm) 50%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-brand) 30%, transparent);
}

.rakam-deger {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  color: var(--color-text-inverse);
  line-height: 1;
}

.rakam-son {
  color: var(--color-warm);
}

.rakam-aciklama {
  font-size: var(--size-small);
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

/* ========================================
   4. CERTIFICATES (.guven-damgasi)
   ======================================== */

.guven-damgasi {
  background-color: var(--color-surface);
}

.guven-icerik {
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.guven-icerik > h2 {
  max-inline-size: 24ch;
}

.guven-icerik > p {
  margin-block-start: calc(-1 * var(--space-md));
}

.guven-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.guven-kart {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.guven-kart:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.guven-kart .icon-lg {
  color: var(--color-flame);
}

.guven-kart h3 {
  margin-block-start: var(--space-2xs);
}

/* No accent bar on H3 inside certificate cards */
.guven-kart h3::before {
  display: none;
}

.guven-kart p {
  font-size: var(--size-small);
  line-height: var(--leading-relaxed);
}

/* ========================================
   DARK MODE — Section overrides
   ======================================== */

@media (prefers-color-scheme: dark) {
  .gelisim-cizgisi {
    background-color: var(--color-surface-alt);
  }

  .guven-kart {
    background-color: var(--color-surface);
  }
}

/* ========================================
   RESPONSIVE — Desktop-first (max-width)
   ======================================== */

/* ---- Below lg (1024px) ---- */
@media (max-width: 1023px) {
  .rakamlar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guven-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Below md (768px) — burger threshold ---- */
@media (max-width: 767px) {
  /* General section padding reduction */
  main > section {
    padding-block: var(--space-2xl);
  }

  /* Banner */
  .hikaye-giris {
    padding: calc(var(--space-2xl) + 4rem) var(--space-md) calc(var(--space-xl) + 2vw);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
    margin-block-end: calc(-2vw + 1px);
  }

  .hikaye-giris h1 {
    max-inline-size: 18ch;
  }

  /* About — single column */
  .hikaye-gorunum {
    grid-template-columns: 1fr;
  }

  .hikaye-icerik {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  /* Timeline */
  .gelisim-cizgisi {
    clip-path: polygon(0 2vw, 100% 0, 100% calc(100% - 2vw), 0 100%);
    padding-block: calc(var(--space-2xl) + 2vw);
  }

  /* Statistics */
  .rakamlarla-rentiqo {
    clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 100%);
    margin-block-start: calc(-2vw + 1px);
    padding-block-start: calc(var(--space-2xl) + 2vw);
    padding-block-end: var(--space-2xl);
  }

  /* Certificates — single column */
  .guven-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Below sm (480px) ---- */
@media (max-width: 479px) {
  .hikaye-giris {
    padding: calc(var(--space-xl) + 3.5rem) var(--space-md) calc(var(--space-lg) + 2vw);
  }

  /* Timeline — stack year and content */
  .gelisim-nokta {
    grid-template-columns: 1fr;
  }

  .gelisim-nokta:not(:last-child)::after {
    display: none;
  }

  .gelisim-yil {
    width: auto;
    max-width: 5.5rem;
  }

  .rakamlar-grid {
    grid-template-columns: 1fr;
  }
}