/*
  anlar.css — Styles for anlar.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
   ============================================ */
.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. GALLERY — Portfolio Grid (mixed sizes)
   ============================================ */
#objektiften-sahneye {
  position: relative;
}

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

#objektiften-sahneye > * {
  position: relative;
  z-index: 1;
}

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

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

.portfolyo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 16rem;
  gap: var(--space-sm);
}

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

.portfolyo-kare--yatay {
  grid-column: span 2;
}

.portfolyo-kare--dikey {
  grid-row: span 2;
}

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

.portfolyo-kare:hover img {
  transform: scale(1.06);
}

.portfolyo-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.8));
  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);
}

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

/* ============================================
   2. BEFORE-AFTER — Dual Comparison Sliders
   ============================================ */
#donusum-vitrini {
  position: relative;
  overflow: hidden;
}

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

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

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

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

.donusum-cift {
  margin-block-end: var(--space-xl);
}

.donusum-cift:last-child {
  margin-block-end: 0;
}

.donusum-baslik {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  font-weight: 500;
  color: var(--color-glow);
  margin-block-end: var(--space-md);
  letter-spacing: 0.02em;
}

.donusum-slider {
  position: relative;
  inline-size: 100%;
  max-inline-size: 56rem;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: ew-resize;
  box-shadow: var(--shadow-lg);
}

.donusum-slider__before,
.donusum-slider__after {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.donusum-slider__before {
  z-index: 1;
}

.donusum-slider__after {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}

.donusum-slider__handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: 3;
  inline-size: 3rem;
  margin-inline-start: -1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}

.donusum-slider__handle::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 2px;
  margin-inline-start: -1px;
  background-color: var(--color-light);
  box-shadow: 0 0 8px rgba(24, 25, 34, 0.4);
}

.donusum-slider__handle .icon {
  position: relative;
  z-index: 4;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.375rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(24, 25, 34, 0.3);
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.donusum-slider__handle:hover .icon,
.donusum-slider__handle:focus-visible .icon {
  transform: scale(1.15);
}

/* ============================================
   3. CLIENT LOGOS — Marquee + Stats
   ============================================ */
#sahne-ortaklari {
  position: relative;
}

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

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

.ortaklar-marquee {
  overflow: hidden;
  position: relative;
  padding-block: var(--space-sm);
  margin-block-end: var(--space-xl);
}

.ortaklar-marquee::before,
.ortaklar-marquee::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 4rem;
  z-index: 2;
  pointer-events: none;
}

.ortaklar-marquee::before {
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--color-light), transparent);
}

.ortaklar-marquee::after {
  inset-inline-end: 0;
  background: linear-gradient(270deg, var(--color-light), transparent);
}

.ortaklar-marquee .marquee-track {
  display: flex;
  gap: var(--space-md);
  inline-size: max-content;
  animation: marquee-scroll 35s linear infinite;
}

.ortaklar-ozet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
}

.ozet-blok {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md);
}

.ozet-sayi {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-brand);
}

.ozet-etiket {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(24, 25, 34, 0.6);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ============================================
   4. TESTIMONIALS — Extended Client Voices
   ============================================ */
#misafir-alkislari h2 {
  color: var(--color-light);
  margin-block-end: var(--space-sm);
}

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

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

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

.alkis-kart:hover {
  box-shadow: 0 4px 20px rgba(81, 82, 239, 0.12);
}

.alkis-tirnak {
  color: var(--color-brand);
  opacity: 0.25;
  width: 2em;
  height: 2em;
}

.alkis-kart p {
  font-size: var(--size-body);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-mist);
}

.alkis-kart footer {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgba(249, 249, 249, 0.08);
}

.alkis-kart cite {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-style: normal;
  font-weight: 500;
  color: var(--color-light);
}

.alkis-kart footer span {
  font-size: var(--size-xs);
  color: var(--color-mist);
}

/* ============================================
   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 — Anlar Page
   Approach: desktop-first (max-width)
   ============================================ */

@media (max-width: 1023px) {
  /* Gallery: 3-col → 2-col */
  .portfolyo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 14rem;
  }

  .portfolyo-kare--dikey {
    grid-row: span 2;
  }

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

@media (max-width: 767px) {
  /* Gallery: 2-col → 1-col, remove spans */
  .portfolyo-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .portfolyo-kare--yatay {
    grid-column: auto;
  }

  .portfolyo-kare--dikey {
    grid-row: auto;
  }

  .portfolyo-kare img {
    aspect-ratio: 3 / 2;
  }

  /* Before-after slider: full width */
  .donusum-slider {
    max-inline-size: 100%;
  }

  /* Stats: 3-col → still 3 but tighter */
  .ortaklar-ozet {
    gap: var(--space-md);
  }

  /* Testimonials: 2 → 1 */
  .alkis-grid {
    grid-template-columns: 1fr;
  }

  /* Diagonal angles: reduce */
  [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) {
  /* Stats: 3 → stacked */
  .ortaklar-ozet {
    grid-template-columns: 1fr;
    max-inline-size: 16rem;
  }

  .ozet-blok {
    padding: var(--space-md);
    border-block-end: 1px solid rgba(174, 166, 182, 0.12);
  }

  .ozet-blok:last-child {
    border-block-end: none;
  }

  .sayfa-baslik {
    padding-block: 5rem var(--space-lg);
  }
}