/*
  sahne-arkasi.css — Styles for sahne-arkasi.html sections
  Visual Identity: Slab+Mono, Grid with Bleed, Dot/Line Patterns, Choreographed Entrance
  Visual Direction: playful, moderate, balanced, retro, sharp, geometric, subtle
*/

/* ============================================
   PAGE TITLE BLOCK — compact inner-page hero
   ============================================ */
.sayfa-baslik {
  background-color: var(--color-dark);
  color: var(--color-light);
  padding-block: clamp(6rem, 12vw, 10rem) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

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

.sayfa-baslik .section-inner {
  position: relative;
  z-index: 1;
}

.sayfa-baslik h1 {
  font-size: var(--size-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-block-end: var(--space-sm);
}

.sayfa-baslik p {
  color: var(--color-mist);
  font-size: clamp(1.0625rem, 0.75vw + 0.9375rem, 1.3125rem);
  max-inline-size: 42ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============================================
   1. ABOUT — Story Split Layout
   ============================================ */
#perde-arkasi-hikayemiz {
  position: relative;
}

#perde-arkasi-hikayemiz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--color-brand) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

#perde-arkasi-hikayemiz > * {
  position: relative;
  z-index: 1;
}

.hikaye-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

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

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

.hikaye-icerik p {
  color: rgba(24, 25, 34, 0.6);
  line-height: 1.7;
  font-size: var(--size-body);
}

.hikaye-icerik p:first-of-type {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem);
  color: var(--color-dark);
  font-weight: 400;
}

.hikaye-gorsel {
  position: relative;
}

.hikaye-gorsel img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.hikaye-gorsel::after {
  content: '';
  position: absolute;
  inset-block-start: -0.75rem;
  inset-inline-start: -0.75rem;
  inline-size: 100%;
  block-size: 100%;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0.35;
}

/* ============================================
   2. TEAM — Extended Profiles (horizontal cards)
   ============================================ */
#sahne-yildizlari h2 {
  color: var(--color-light);
}

#sahne-yildizlari .section-intro {
  color: var(--color-mist);
  margin-block-end: var(--space-xl);
}

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

.usta-kart {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: var(--space-md);
  align-items: start;
  background-color: rgba(249, 249, 249, 0.04);
  border: 1px solid rgba(249, 249, 249, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    background-color var(--duration-normal) var(--ease-smooth);
}

.usta-kart:hover {
  border-color: var(--color-glow);
  background-color: rgba(249, 249, 249, 0.07);
}

.usta-foto {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.usta-foto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.usta-kart:hover .usta-foto img {
  transform: scale(1.04);
}

.usta-bilgi {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.usta-bilgi h3 {
  font-size: var(--size-h3);
  color: var(--color-light);
}

.usta-rol {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-glow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.usta-bilgi p {
  font-size: var(--size-small);
  color: var(--color-mist);
  line-height: 1.65;
  margin-block-start: var(--space-xs);
}

/* ============================================
   3. TIMELINE — Vertical Milestones
   ============================================ */
#ilk-perdeden-bugune {
  position: relative;
}

#ilk-perdeden-bugune::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    var(--color-mist) 23px,
    var(--color-mist) 24px
  );
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

#ilk-perdeden-bugune > * {
  position: relative;
  z-index: 1;
}

#ilk-perdeden-bugune h2 {
  margin-block-end: var(--space-sm);
}

#ilk-perdeden-bugune .section-intro {
  margin-block-end: var(--space-xl);
}

.zaman-cetveli {
  counter-reset: none;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-inline-size: 52rem;
  position: relative;
}

.zaman-cetveli::before {
  content: '';
  position: absolute;
  inset-inline-start: 3.5rem;
  inset-block: 0;
  inline-size: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-brand),
    var(--color-accent)
  );
  opacity: 0.3;
}

.zaman-adim {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  position: relative;
}

.zaman-adim::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(3.5rem - 5px);
  inset-block-start: calc(var(--space-lg) + 0.4em);
  inline-size: 12px;
  block-size: 12px;
  background-color: var(--color-brand);
  border-radius: 50%;
  border: 2px solid var(--color-light);
  z-index: 1;
}

.zaman-adim:last-child::before {
  background-color: var(--color-accent);
}

.zaman-adim time {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-weight: 900;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0.2;
  text-align: right;
  padding-inline-end: var(--space-md);
}

.zaman-icerik {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid rgba(174, 166, 182, 0.12);
}

.zaman-adim:last-child .zaman-icerik {
  border-block-end: none;
  padding-block-end: 0;
}

.zaman-icerik h3 {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  font-weight: 500;
}

.zaman-icerik p {
  font-size: var(--size-small);
  color: rgba(24, 25, 34, 0.6);
  line-height: 1.65;
  max-inline-size: 50ch;
}

/* ============================================
   4. CULTURE — Energy Gallery
   ============================================ */
#sahne-ruhu h2 {
  color: var(--color-light);
}

#sahne-ruhu .section-intro {
  color: var(--color-mist);
  margin-block-end: var(--space-xl);
}

.enerji-galeri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.enerji-kare {
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}

.enerji-kare--genis {
  grid-column: 1 / -1;
}

.enerji-kare img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.enerji-kare:hover img {
  transform: scale(1.05);
}

.enerji-kare figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(transparent, rgba(24, 25, 34, 0.75));
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-light);
  letter-spacing: 0.03em;
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.enerji-kare:hover figcaption {
  transform: translateY(0);
}

/* ============================================
   5. CERTIFICATES — Badge Grid
   ============================================ */
#guven-damgasi h2 {
  margin-block-end: var(--space-sm);
}

#guven-damgasi .section-intro {
  margin-block-end: var(--space-xl);
}

.belge-listesi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  list-style: none;
}

.belge-karti {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background-color: var(--color-light);
  border: 1px solid rgba(174, 166, 182, 0.15);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.belge-karti:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}

.belge-karti .icon-lg {
  color: var(--color-brand);
  width: 2.5em;
  height: 2.5em;
  transition: color var(--duration-normal) var(--ease-smooth);
}

.belge-karti:hover .icon-lg {
  color: var(--color-accent);
}

.belge-karti h3 {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  font-weight: 500;
}

.belge-karti p {
  font-size: var(--size-small);
  color: rgba(24, 25, 34, 0.6);
  line-height: 1.6;
}

/* ============================================
   DIAGONAL / ANGLED section separators
   ============================================ */
[data-angle="right"]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: clamp(2rem, 4vw, 4rem);
  background-color: inherit;
  clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
  z-index: 2;
}

[data-angle="left"]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: clamp(2rem, 4vw, 4rem);
  background-color: inherit;
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

[data-angle] {
  padding-block-end: calc(var(--space-2xl) + clamp(2rem, 4vw, 4rem));
}

/* ============================================
   RESPONSIVE — Sahne Arkası Page
   Approach: desktop-first (max-width)
   ============================================ */

@media (max-width: 1023px) {
  /* Certificates: 4 → 2 */
  .belge-listesi {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Team cards: reduce photo ratio */
  .usta-kart {
    grid-template-columns: 0.8fr 1fr;
  }
}

@media (max-width: 767px) {
  /* About: 2-col → stacked */
  .hikaye-layout {
    grid-template-columns: 1fr;
  }

  .hikaye-gorsel {
    max-inline-size: 28rem;
    order: -1;
  }

  .hikaye-gorsel::after {
    inset-block-start: -0.5rem;
    inset-inline-start: -0.5rem;
  }

  /* Team: 2-col → 1-col, horizontal cards → stacked */
  .usta-grid {
    grid-template-columns: 1fr;
    max-inline-size: 32rem;
  }

  .usta-kart {
    grid-template-columns: 1fr;
  }

  .usta-foto {
    aspect-ratio: 3 / 2;
    max-block-size: 16rem;
  }

  .usta-bilgi {
    padding: var(--space-md);
  }

  /* Timeline: simplify column */
  .zaman-cetveli::before {
    inset-inline-start: 1rem;
  }

  .zaman-adim {
    grid-template-columns: 1fr;
    padding-inline-start: 2.5rem;
  }

  .zaman-adim::before {
    inset-inline-start: calc(1rem - 5px);
  }

  .zaman-adim time {
    text-align: left;
    padding-inline-end: 0;
    font-size: var(--size-h3);
  }

  /* Culture gallery: 2-col → 1 */
  .enerji-galeri {
    grid-template-columns: 1fr;
  }

  .enerji-kare--genis {
    grid-column: auto;
  }

  /* Diagonal angles: reduce on mobile */
  [data-angle="right"]::after,
  [data-angle="left"]::after {
    block-size: clamp(1rem, 2vw, 2rem);
  }

  [data-angle] {
    padding-block-end: calc(var(--space-2xl) + clamp(1rem, 2vw, 2rem));
  }
}

@media (max-width: 479px) {
  /* Certificates: 2 → 1 */
  .belge-listesi {
    grid-template-columns: 1fr;
  }

  /* Page title: still generous on mobile */
  .sayfa-baslik {
    padding-block: 5rem var(--space-lg);
  }
}