/*
  etkinlik-cesitleri.css — Styles for etkinlik-cesitleri.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: 48ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============================================
   1. SERVICES — Repertoire Grid (6 cards)
   ============================================ */
#sahne-repertuari {
  position: relative;
}

#sahne-repertuari::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--color-creative) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

#sahne-repertuari > * {
  position: relative;
  z-index: 1;
}

#sahne-repertuari h2 {
  margin-block-end: var(--space-sm);
}

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

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

.repertuar-karti {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-light);
  border: 1px solid rgba(174, 166, 182, 0.18);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth),
    transform var(--duration-normal) var(--ease-bounce);
}

.repertuar-karti:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.repertuar-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  background-color: rgba(81, 82, 239, 0.08);
  border-radius: var(--radius-md);
  color: var(--color-brand);
  transition: background-color var(--duration-normal) var(--ease-smooth);
}

.repertuar-karti:hover .repertuar-ikon {
  background-color: rgba(81, 82, 239, 0.15);
}

.repertuar-karti h3 {
  font-size: var(--size-h3);
  margin-block-start: var(--space-xs);
}

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

.repertuar-detay {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(174, 166, 182, 0.12);
  list-style: none;
}

.repertuar-detay li {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(24, 25, 34, 0.6);
  padding-inline-start: 1rem;
  position: relative;
}

.repertuar-detay li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-brand);
}

/* ============================================
   2. HOW IT WORKS — Process Journey
   ============================================ */
#perdeden-sahneye {
  position: relative;
  overflow: hidden;
}

#perdeden-sahneye::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 59px,
    rgba(249, 249, 249, 0.03) 59px,
    rgba(249, 249, 249, 0.03) 60px
  );
  pointer-events: none;
  z-index: 0;
}

#perdeden-sahneye .section-inner > * {
  position: relative;
  z-index: 1;
}

#perdeden-sahneye h2 {
  color: var(--color-light);
  margin-block-end: var(--space-sm);
}

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

.surec-yolu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-block-end: var(--space-xl);
}

.surec-adim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: rgba(249, 249, 249, 0.04);
  border: 1px solid rgba(249, 249, 249, 0.08);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    background-color var(--duration-normal) var(--ease-smooth);
}

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

.surec-numara {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.2;
  align-self: start;
}

.surec-detay {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.surec-baslik {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.surec-baslik .icon {
  color: var(--color-glow);
  flex-shrink: 0;
}

.surec-baslik h3 {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  font-weight: 500;
  color: var(--color-light);
}

.surec-detay p {
  font-size: var(--size-small);
  color: var(--color-mist);
  line-height: 1.65;
}

.surec-gorsel {
  position: relative;
  max-inline-size: 56rem;
  margin-inline: auto;
}

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

/* ============================================
   3. CASE STUDIES — Event Showcases
   ============================================ */
#sahnelenen-hikayeler {
  position: relative;
}

#sahnelenen-hikayeler h2 {
  margin-block-end: var(--space-sm);
}

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

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

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

.vitrin-kart:nth-child(even) {
  direction: rtl;
}

.vitrin-kart:nth-child(even) > * {
  direction: ltr;
}

.vitrin-gorsel {
  overflow: hidden;
  border-radius: var(--radius-md);
}

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

.vitrin-kart:hover .vitrin-gorsel img {
  transform: scale(1.04);
}

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

.vitrin-etiket {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vitrin-icerik h3 {
  font-size: var(--size-h2);
  line-height: 1.15;
}

.vitrin-icerik > p {
  font-size: var(--size-small);
  color: rgba(24, 25, 34, 0.6);
  line-height: 1.65;
}

.vitrin-meta {
  display: flex;
  gap: var(--space-lg);
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(174, 166, 182, 0.15);
}

.vitrin-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.vitrin-meta dt {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(24, 25, 34, 0.6);
  letter-spacing: 0.03em;
}

.vitrin-meta dd {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 700;
  color: var(--color-brand);
}

/* ============================================
   4. PRICING — Investment Plans
   ============================================ */
#sahneye-yatirim h2 {
  color: var(--color-light);
  margin-block-end: var(--space-sm);
}

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

.yatirim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: start;
  margin-block-end: var(--space-lg);
}

.yatirim-kart {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  background-color: rgba(249, 249, 249, 0.04);
  border: 1px solid rgba(249, 249, 249, 0.08);
  border-radius: var(--radius-md);
  position: relative;
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.yatirim-kart:hover {
  border-color: var(--color-brand);
  box-shadow: 0 4px 24px rgba(81, 82, 239, 0.15);
}

.yatirim-kart h3 {
  font-size: var(--size-h2);
  color: var(--color-light);
}

.yatirim-aciklama {
  font-size: var(--size-small);
  color: var(--color-mist);
}

.yatirim-ozellikler {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgba(249, 249, 249, 0.08);
  list-style: none;
}

.yatirim-ozellikler li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--size-small);
  color: var(--color-mist);
  line-height: 1.5;
}

.yatirim-ozellikler .icon-sm {
  color: var(--color-sky);
  flex-shrink: 0;
}

.yatirim-kart .btn {
  margin-block-start: auto;
  align-self: stretch;
  text-align: center;
  justify-content: center;
}

.section-dark .yatirim-kart .btn--outline {
  color: var(--color-mist);
  border-color: rgba(249, 249, 249, 0.2);
}

.section-dark .yatirim-kart .btn--outline:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
}

/* Featured pricing card */
.yatirim-kart--one-cikan {
  border-color: var(--color-accent);
  border-width: 2px;
  padding-block-start: calc(var(--space-xl) + 0.5rem);
  box-shadow: 0 4px 24px rgba(250, 87, 62, 0.12);
}

.yatirim-kart--one-cikan:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 32px rgba(250, 87, 62, 0.2);
}

.yatirim-rozet {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-lg);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--color-accent);
  color: var(--color-light);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-sm);
}

.yatirim-not {
  font-size: var(--size-small);
  color: var(--color-mist);
  text-align: center;
  max-inline-size: 56ch;
  margin-inline: auto;
}

/* ============================================
   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 — Etkinlik Çeşitleri Page
   Approach: desktop-first (max-width)
   ============================================ */

@media (max-width: 1023px) {
  /* Services: 3 → 2 */
  .repertuar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process: 2 → 1 */
  .surec-yolu {
    grid-template-columns: 1fr;
  }

  /* Pricing: 3 → 2 */
  .yatirim-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  /* Case studies: 2-col → stacked */
  .vitrin-kart {
    grid-template-columns: 1fr;
  }

  .vitrin-kart:nth-child(even) {
    direction: ltr;
  }

  .vitrin-gorsel {
    max-inline-size: 28rem;
  }

  .vitrin-meta {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  /* Pricing: 2 → 1, constrain */
  .yatirim-grid {
    grid-template-columns: 1fr;
    max-inline-size: 26rem;
    margin-inline: auto;
  }

  /* Process image: full width */
  .surec-gorsel {
    max-inline-size: 100%;
  }

  /* 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) {
  /* Services: 2 → 1 */
  .repertuar-grid {
    grid-template-columns: 1fr;
  }

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

  /* Process step number: smaller */
  .surec-numara {
    font-size: var(--size-h2);
  }
}