/* Eventor production stylesheet - original cascade order preserved. */

/* Design tokens */
/* ============================================
   EVENTOR — CSS Custom Properties (Değişkenler)
   UI/UX Pro Max Premium Calibrations
   ============================================ */

:root {
  /* ── Renk Paleti (Lüks Antrasit & Turuncu) ── */
  --color-bg: #121212;
  --color-bg-elevated: #1A1A1A;
  /* Biraz daha derinleştirildi */
  --color-accent: #FF6B00;
  --color-accent-hover: #FF8022;
  /* Hover biraz daha soft */
  --color-text: #D4D4D4;
  /* Metin okunabilirliği artırıldı */
  --color-heading: #F5F0E8;
  --color-muted: #8C8C8C;
  --color-overlay: rgba(10, 10, 10, 0.75);
  /* Daha dramatik backdrop */
  --color-border: rgba(255, 255, 255, 0.06);

  /* ── Tipografi (Premium) ── */
  --font-primary: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Cinzel', serif;
  --font-label: 'DM Sans', system-ui, sans-serif; /* Unify small badges and labels with DM Sans */

  --fs-xs: 0.85rem;
  --fs-sm: 0.95rem;
  --fs-base: 1.125rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.75rem;
  --fs-xl: 2.75rem;
  /* Başlıklar daha görkemli */
  --fs-2xl: 3.75rem;
  --fs-3xl: 5.5rem;

  /* ── Boşluklar (Nefes Alan Tasarım) ── */
  --space-xs: 0.5rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
  /* Section araları açıldı */

  /* ── Geçişler (Kusursuz Pürüzsüzlük) ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);

  --transition-fast: 250ms var(--ease-out-expo);
  --transition-base: 450ms var(--ease-out-expo);
  --transition-slow: 700ms var(--ease-in-out-quint);
  /* Modal ve büyük kartlar için */

  /* ── Gölgeler (Derin & Zarif) ── */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--color-border);
  --shadow-glow: 0 16px 48px rgba(255, 107, 0, 0.25);

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  /* Daha yumuşak köşeler */
  --radius-xl: 32px;

  /* ── Container ── */
  --container-max: 1280px;
  --container-padding: 2rem;
}

/* Base reset */
/* ============================================
   EVENTOR — Modern CSS Reset
   Kaynak: Andy Bell'in Modern Reset'i üzerine özelleştirildi
   ============================================ */

/* 1. Box-sizing evrensel */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Margin ve padding sıfırlama */
* {
  margin: 0;
  padding: 0;
}

/* 3. HTML kök ayarları */
html {
  font-size: 100%;
  /* 1rem = 16px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

/* 4. Body temeli */
body {
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5. Medya elementleri */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Form elementleri font kalıtımı */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 7. Yazı taşması */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 8. Liste stillerini kaldır (nav ve ul.reset için) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

ul[role="menubar"] {
  list-style: none;
}

/* 9. Bağlantılar */
a {
  color: inherit;
  text-decoration: none;
}

/* 10. Buton sıfırla */
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 11. Fieldset / legend */
fieldset {
  border: none;
}

/* 12. HR sıfırla */
hr {
  border: none;
  border-top: 1px solid currentColor;
}

/* 13. Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 14. Odak görünürlüğü (erişilebilirlik) */
:focus-visible {
  outline: 2px solid var(--color-accent, #FF6B00);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Core components */
/* ============================================================
   EVENTOR — Ana Stil Dosyası (main.css)
   Bölümler:
     1.  Genel & Yardımcı
     2.  Header / Navigasyon
     3.  Hero
     4.  Hakkımızda
     5.  Hizmetlerimiz (Kartlar)
     6.  Projelerimiz & Galeri
     7.  Modal
     8.  Referans Marquee
     9.  İletişim
     10. Footer
     11. Scroll Reveal Animasyonları
     12. Responsive (Mobile-First)
   ============================================================ */


/* ============================================================
   1. GENEL & YARDIMCI
   ============================================================ */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Konteyner yardımcı sınıfı */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Eyebrow — bölüm üstü küçük etiket */
.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* Bölüm ortak padding */
section {
  padding-block: var(--space-2xl);
}

/* Seçim rengi */
::selection {
  background-color: var(--color-accent);
  color: #fff;
}

/* Scrollbar özelleştirme */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 3px;
}

/* Gradient ayırıcı çizgi */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-border) 20%,
      var(--color-border) 80%,
      transparent 100%);
  margin-inline: auto;
  max-width: var(--container-max);
}


/* ============================================================
   3. HERO
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  /* section override */
}

/* Video wrapper */
.hero__video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Siyah overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(18, 18, 18, 0.30) 0%,
      rgba(18, 18, 18, 0.55) 60%,
      rgba(18, 18, 18, 0.80) 100%);
}

/* İçerik */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--container-padding);
  max-width: 820px;
  animation: heroFadeIn 1.2s ease both;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__logo {
  width: clamp(160px, 30vw, 280px);
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  /* Logo yokken gizle */
  display: none;
  /* Gerçek logo eklenince 'block' yapılacak */
}

/* Logo yerine geçici metin logosu — Kullanıcı isteğiyle kaldırıldı */
.hero__content::before {
  display: none !important;
  content: none !important;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-3xl));
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: var(--space-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__title-accent {
  color: var(--color-heading, #F5F0E8);
  position: relative;
}

.hero__subtitle {
  font-size: clamp(var(--fs-base), 2vw, var(--fs-md));
  color: var(--color-text);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}

/* CTA Butonları */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* [FIX M-02] transition:all yerine özellik bazlı — performans ve
     beklenmedik animasyonları önlemek için */
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
  white-space: nowrap;
}

.hero__cta--primary {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 24px rgba(255, 107, 0, 0.35);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
  background-color: var(--color-accent-hover);
  box-shadow: 0 6px 32px rgba(255, 107, 0, 0.55);
  transform: translateY(-2px);
}

.hero__cta--secondary {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-heading);
  backdrop-filter: blur(8px);
}

.hero__cta--secondary:hover,
.hero__cta--secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Scroll İndikatör */
.hero__scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: scrollBounce 2.5s ease-in-out infinite;
}

.hero__scroll-text {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero__scroll-arrow {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  border-radius: 2px;
}

@keyframes scrollBounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }

  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}


/* ============================================================
   4. HAKKIMIZDA
   ============================================================ */

.about {
  background-color: var(--color-bg);
  overflow: hidden;
}

.about__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Sol metin */
.about__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.about__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: var(--space-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about__heading-accent {
  color: var(--color-heading, #F5F0E8);
}

.about__text {
  /* [FIX L-03] opacity yerine rgba — alt elementleri etkilemez */
  color: rgba(224, 224, 224, 0.85);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-base);
  line-height: 1.8;
}

/* Sayısal vurgular */
.about__highlights {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.about__highlight-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about__highlight-number {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.about__highlight-number::after {
  content: '+';
  font-size: var(--fs-lg);
  color: var(--color-accent);
}

.about__highlight-label {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Sağ görsel */
.about__image-wrapper {
  position: relative;
}

.about__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 5;
  /* Görsel yokken arka plan */
  background: linear-gradient(135deg, var(--color-bg-elevated) 0%, #2a2a2a 100%);
  min-height: 400px;
}

/* Dekoratif turuncu çerçeve */
.about__image-accent {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 60%;
  height: 60%;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}


/* ============================================================
   5. HİZMETLERİMİZ
   ============================================================ */

.services {
  background-color: var(--color-bg-elevated);
  position: relative;
  overflow: hidden;
}

/* Arka plan dekoratif gradyan */
.services::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.services__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Başlık grubu */
.services__header {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.services__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.services__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.services__description {
  color: var(--color-muted);
  font-size: var(--fs-base);
}

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

/* ── Hizmet Kartı — Ana Stil ── */
.services__card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: default;

  /* Smooth hover geçişi — özellik bazlı (transition:all kaçınıldı) */
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-slow);

  /* [FIX M-01] will-change statik değil, hover'da aktive edilir.
     Statik kullanım gereksiz GPU katmanı + bellek kullanımı yaratır. */
}

/* ── Hover: yukarı kalk + turuncu gölge ── */
.services__card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 12px 40px rgba(255, 107, 0, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.30);
  border-color: rgba(255, 107, 0, 0.30);
  background-color: #181818;
  /* [FIX M-01] GPU katmanını sadece hover sırasında aç */
  will-change: transform, box-shadow;
}

/* İkon wrapper */
.services__card-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 107, 0, 0.10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: background-color var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.services__card:hover .services__card-icon {
  background: rgba(255, 107, 0, 0.18);
  transform: scale(1.08) rotate(-4deg);
}

/* SVG ikonu */
.services__icon {
  color: var(--color-accent);
  width: 32px;
  height: 32px;
}

/* Başlık */
.services__card-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.services__card:hover .services__card-title {
  color: #fff;
}

/* Metin */
.services__card-text {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  line-height: 1.7;
  flex: 1;
}

/* Ok */
.services__card-arrow {
  font-size: var(--fs-lg);
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: inline-block;
  line-height: 1;
}

.services__card:hover .services__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Turuncu sol kenar çizgisi (hover sonrası) */
.services__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity var(--transition-base), top var(--transition-base), bottom var(--transition-base);
}

.services__card:hover::before {
  opacity: 1;
  top: 10%;
  bottom: 10%;
}


/* ============================================================
   6. PROJELERİMİZ & GALERİ
   ============================================================ */

.projects {
  background-color: var(--color-bg);
  padding-bottom: 0;
  /* Marquee section hemen altında */
}

.projects__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Başlık */
.projects__header {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.projects__eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.projects__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.projects__description {
  color: var(--color-muted);
  font-size: var(--fs-base);
}

/* Galeri Grid - Masonry (Premium Layout) */
.projects__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 320px;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Proje kartı */
.projects__card {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  grid-column: span 1;
  grid-row: span 1;
  height: 100%;
}

.projects__card--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.projects__card--tall {
  grid-column: span 1;
  grid-row: span 2;
}

.projects__card-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.projects__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
  /* Görsel yokken arka plan */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  min-height: 300px;
}

.projects__card:hover .projects__card-image {
  transform: scale(1.06);
}

/* Hover Overlay */
.projects__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(18, 18, 18, 0) 30%,
      rgba(18, 18, 18, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.projects__card:hover .projects__card-overlay {
  opacity: 1;
}

.projects__card-category {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 8px;
  transform: translateY(12px);
  transition: transform var(--transition-base);
}

.projects__card:hover .projects__card-category {
  transform: translateY(0);
}

.projects__card-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
  display: block;
  transform: translateY(12px);
  transition: transform var(--transition-base);
}

.projects__card:hover .projects__card-name {
  transform: translateY(0);
}

.projects__card-cta {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-top: 6px;
  transform: translateY(12px);
  transition: transform var(--transition-base) 50ms;
}

.projects__card:hover .projects__card-cta {
  transform: translateY(0);
}


/* ============================================================
   7. MODAL
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);

  /* Başlangıç: gizli */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

/* Açık modal */
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* Modal penceresi */
.modal__container {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  z-index: 1;

  /* Giriş animasyonu */
  transform: scale(0.90) translateY(24px);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.modal.is-open .modal__container {
  transform: scale(1) translateY(0);
}

/* Scrollbar inside modal */
.modal__container::-webkit-scrollbar {
  width: 4px;
}

/* Kapat butonu */
/* [FIX M-03] sticky + float birlikte Safari'de layout bozukluğu
   yaratıyordu. absolute konumlama ile düzeltildi. */
.modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.modal__close:hover,
.modal__close:focus-visible {
  background-color: rgba(255, 107, 0, 0.2);
  color: var(--color-accent);
  transform: rotate(90deg);
}

/* Modal içerik */
.modal__body {
  display: flex;
  flex-direction: column;
}

.modal__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Görsel yokken arka plan */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  min-height: 220px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal__info {
  padding: var(--space-lg);
}

.modal__category {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  clear: both;
  /* float'ı temizle */
}

.modal__text {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.8;
  opacity: 0.85;
  margin-bottom: var(--space-md);
}

/* Etiket listesi */
.modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.modal__tag {
  padding: 6px 14px;
  background: rgba(255, 107, 0, 0.10);
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: var(--radius-xl);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

/* Body scroll kilit (JS ile .modal-open class eklenir) */
body.modal-open {
  overflow: hidden;
}


/* ============================================================
   8. REFERANS MARQUEE
   ============================================================ */

.references {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  overflow: hidden;
  /* Kenar soluk geçiş maskesi */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
}

.references__track,
.partners__marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite !important;
}

.references__track:hover,
.partners__marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.references__slide {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding-inline: var(--space-xl);
  flex-shrink: 0;
}

.references__logo {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  /* Siyah-beyaz efekt */
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity var(--transition-base), filter var(--transition-base);
  /* Logo yokken görsel yer tutucu */
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.references__logo:hover {
  opacity: 0.9;
  filter: brightness(0) invert(1) sepia(1) hue-rotate(10deg) saturate(5);
}


/* ============================================================
   9. İLETİŞİM
   ============================================================ */

.contact {
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* Dekoratif arka plan ışıması */
.contact::after {
  content: '';
  position: absolute;
  bottom: -300px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.contact__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Sol — Bilgi */
.contact__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.contact__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: var(--space-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact__heading-accent {
  color: var(--color-heading, #F5F0E8);
}

.contact__text {
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: var(--space-lg);
}

/* Adres detayları */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-style: normal;
  margin-bottom: var(--space-lg);
}

.contact__detail-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.contact__detail-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.contact__detail-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.contact__detail-value {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.contact__detail-link {
  transition: color var(--transition-fast);
}

.contact__detail-link:hover,
.contact__detail-link:focus-visible {
  color: var(--color-accent);
}

/* Sosyal medya */
.contact__social {
  display: flex;
  gap: var(--space-sm);
}

.contact__social-link {
  width: 44px;
  height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  transition: all var(--transition-base);
}

.contact__social-link:hover,
.contact__social-link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-3px);
}

/* ── Sağ — Form ── */
.contact__form-wrapper {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

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

/* Form grup */
.contact__form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.contact__form-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
}

.contact__form-optional {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-weight: 400;
}

/* Input, Select, Textarea ortak */
.contact__form-input,
.contact__form-select,
.contact__form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.contact__form-input::placeholder,
.contact__form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}

.contact__form-input:focus,
.contact__form-select:focus,
.contact__form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: rgba(255, 107, 0, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

/* Select ok oku */
.contact__form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E9E9E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

/* Select option arka planı */
.contact__form-select option {
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
}

/* Textarea */
.contact__form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Hata durumu */
.contact__form-input.is-invalid,
.contact__form-select.is-invalid,
.contact__form-textarea.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Hata mesajı */
.contact__form-error {
  font-size: var(--fs-xs);
  color: #ef4444;
  font-weight: 500;
  min-height: 16px;
  display: block;
}

/* Checkbox grubu */
.contact__form-group--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.contact__form-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-accent);
  margin-top: 2px;
}

.contact__form-label--checkbox {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  line-height: 1.5;
  cursor: pointer;
  flex: 1;
}

.contact__form-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-fast);
}

.contact__form-link:hover {
  opacity: 0.75;
}

/* Honeypot — görünmez */
.contact__form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Gönder butonu */
.contact__form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 36px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.30);
}

.contact__form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background-color var(--transition-fast);
}

.contact__form-submit:hover,
.contact__form-submit:focus-visible {
  background-color: var(--color-accent-hover);
  box-shadow: 0 6px 28px rgba(255, 107, 0, 0.50);
  transform: translateY(-2px);
}

.contact__form-submit:active {
  transform: translateY(0);
}

/* Loading spinner */
.contact__form-submit-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.contact__form-submit.is-loading .contact__form-submit-text {
  opacity: 0.7;
}

.contact__form-submit.is-loading .contact__form-submit-loader {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Form durum mesajları */
.contact__form-status {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  display: none;
}

.contact__form-status.is-success {
  display: block;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.contact__form-status.is-error {
  display: block;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}


/* ============================================================
   10. FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-bg-elevated);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.footer__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__logo {
  height: 32px;
  width: auto;
}

.footer__tagline {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.footer__links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__link {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  transition: color var(--transition-fast);
  position: relative;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-accent);
}

.footer__divider {
  border-top-color: var(--color-border);
  margin: 0;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.footer__legal {
  display: flex;
  gap: var(--space-md);
}

.footer__legal-link {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
  color: var(--color-accent);
}


/* ============================================================
   11. SCROLL REVEAL ANİMASYONLARI
   ============================================================ */

/* Başlangıç state'i — JS tarafından gözlemlenecek */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

[data-reveal="fade-up"] {
  transform: translateY(40px);
}

[data-reveal="fade-right"] {
  transform: translateX(-40px);
}

[data-reveal="fade-left"] {
  transform: translateX(40px);
}

/* Görünür hale gelince */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Gecikme destekleri */
[data-reveal-delay="100"] {
  transition-delay: 100ms;
}

[data-reveal-delay="200"] {
  transition-delay: 200ms;
}

[data-reveal-delay="300"] {
  transition-delay: 300ms;
}

[data-reveal-delay="400"] {
  transition-delay: 400ms;
}

[data-reveal-delay="500"] {
  transition-delay: 500ms;
}


/* ============================================================
   12. RESPONSİVE — MOBILE FIRST BREAKPOINTS
   ============================================================ */

/* ── Tablet: max 1024px ── */
@media screen and (max-width: 1024px) {

  /* Services: 2 kolonlu */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects: 2 kolonlu */
  .projects__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About: alt alta */
  .about__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__image-wrapper {
    order: -1;
    /* Görsel önce */
  }

  .about__image {
    aspect-ratio: 16 / 9;
  }

  /* Contact: alt alta */
  .contact__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ── Mobil: max 768px ── */
@media screen and (max-width: 768px),
  screen and (max-width: 1024px) and (max-height: 600px) {

  /* Hero */
  .hero__title {
    font-size: clamp(var(--fs-xl), 8vw, var(--fs-2xl));
  }

  /* Header: hamburger menü */
  .header__hamburger {
    display: flex;
  }

  .header__menu {
    position: fixed;
    inset: 0;
    top: 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    /* Gizli hali */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base),
      transform var(--transition-base);
    z-index: 99;
  }

  .header__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .header__menu-link {
    font-size: var(--fs-lg);
  }

  /* Services: tek kolon */
  .services__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .services__card:hover {
    transform: none;
    /* Mobilde hover efekti kapalı */
  }

  /* Projects: tek kolon, span reset */
  .projects__gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(280px, auto);
  }

  .projects__card--wide,
  .projects__card--tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Projects card: her zaman overlay görünür (hover yok) */
  .projects__card-overlay {
    opacity: 1;
    background: linear-gradient(180deg,
        transparent 30%,
        rgba(18, 18, 18, 0.85) 100%);
  }

  .projects__card-name,
  .projects__card-cta,
  .projects__card-category {
    transform: none;
  }

  /* About highlights: sarma */
  .about__highlights {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  /* Contact form wrapper: padding azalt */
  .contact__form-wrapper {
    padding: var(--space-lg);
  }

  /* Footer: ortalanmış */
  .footer__brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  /* Section padding azalt */
  section {
    padding-block: var(--space-xl);
  }
}

/* ── Küçük Mobil: max 480px ── */
@media screen and (max-width: 480px) {

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__cta {
    width: 100%;
    text-align: center;
  }

  .about__highlights {
    gap: var(--space-sm);
  }

  .about__highlight-number {
    font-size: var(--fs-xl);
  }

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

/* ── [FIX L-04] Hareket Azaltma Tercihi ──
   reset.css'teki genel kural @keyframes'i yakalamıyor.
   Bu blok ile scrollBounce ve marqueeScroll korunuyor. */
@media (prefers-reduced-motion: reduce) {

  .hero__scroll-indicator {
    animation: none;
    opacity: 0.6;
  }

  /* Hero fade animasyonu da durdurulur */
  .hero__content {
    animation: none;
  }

  /* Scroll reveal'ı anında göster */
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}




.cta-section h2,
.footer-section h2,
.contact-section h2 {
  font-size: clamp(1.5rem, 6vw, 4rem) !important;
  /* Mobilde küçülür, masaüstünde büyür */
  white-space: nowrap !important;
  /* Kelimenin bölünmesi KESİN olarak yasaklandı */
  overflow: hidden;
  text-overflow: ellipsis;
}

.about__content h2::after,
.projects__header h2::after,
.partners__header h2::after,
.contact__info h2::after,
.section-title::after {
  margin: 10px auto !important;
  position: static !important;
  display: block !important;
}

h1,
h2,
h3,
.cta-section h2,
.footer-section h2,
.section-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {

  html,
  body {
    overflow-x: hidden !important;
    /* Sağa sola gereksiz kaymayı engeller */
  }

  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
  }
  nav,
  .nav {
    position: relative !important;
    pointer-events: auto !important;
  }

  h2,
  .section-title {
    font-size: 2rem !important;
    /* Ekran daraldığında kelimeyi bölme, komple küçült */
    white-space: normal !important;
  }

  .cta-section h2,
  .footer-section h2 {
    font-size: 1.8rem !important;
    /* Kelime sığsın diye boyutu küçültüldü */
    white-space: normal !important;
  }




  /* Biz ne yaparız kısmı mobilde görünürlüğü */


















  .mobile-only {
    display: block !important;
  }

  .brands-grid,
  .client-logos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 20px !important;
  }

  .brands-grid img,
  .client-logos img {
    transform: scale(1) !important;
    max-width: 100px !important;
    margin: 0 auto !important;
  }

  .hamburger {
    display: flex !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
  }

  nav ul,
  .navbar-links,
  .nav__links {
    display: flex !important;
    flex-direction: column !important;
    width: 92% !important;
    position: fixed !important;
    top: 75px !important;
    left: 4% !important;
    background: rgba(12, 12, 12, 0.98) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    padding: 2rem 1.5rem !important;
    gap: 1.25rem !important;
    z-index: 10000 !important;
    border: 1px solid rgba(255, 140, 0, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 140, 0, 0.2) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-20px) scale(0.96) !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
  }

  nav ul.active,
  .navbar-links.active,
  .nav__links.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Reset desktop accordion expand rules on mobile to prevent layout collapse */




  /* Project card back face typography and scrolling optimizations for mobile */
  .card-face--back {
    padding: 1.5rem 1.25rem !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }

  .card-back__title {
    font-size: 1.25rem !important;
    margin-bottom: 0.6rem !important;
  }

  .project-card:nth-child(1) .card-back__title {
    font-size: 1.4rem !important;
  }

  .card-back__desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.8rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* About statement: follows the split editorial treatment used by service titles. */
#about .about-statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12em 0.23em;
  max-width: 12ch;
  margin: 0 0 1.75rem;
  color: #f7f2eb;
  font: 500 clamp(2.7rem, 4.2vw, 4rem) / 0.95 "Cormorant Garamond", serif !important;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

#about .about-statement span {
  color: inherit;
  font-family: "Cormorant Garamond", serif !important;
  font-size: inherit;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: inherit;
  opacity: 1 !important;
}

#about .about-statement strong {
  display: inline-block;
  padding: 0.08em 0.2em 0.12em;
  background: #ff7417;
  color: #080808;
  font: inherit;
  line-height: 0.82;
  transform: rotate(-0.8deg);
}

#about .about-copy {
  display: grid;
  gap: 1rem;
  max-width: 52ch;
}

#about .about-copy p {
  max-width: none;
  margin: 0;
  color: rgba(247, 242, 235, 0.88);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.72;
}

#about .about-copy p:first-child {
  color: #f7f2eb;
}

@media (max-width: 1024px) {
  #about .about-statement {
    justify-content: center;
    max-width: 100%;
  }

  #about .about-copy {
    max-width: 60ch;
  }
}

@media (max-width: 640px) {
  #about .about-statement {
    gap: 0.16em 0.2em;
    margin-bottom: 1.5rem;
    font-size: clamp(2.1rem, 10.5vw, 3rem) !important;
  }

  #about .about-copy {
    gap: 0.85rem;
  }

  #about .about-copy p {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.project-media-picture {
  display: contents;
}

/* Project-specific refinements */
.font-editorial-serif {
  font-family: "Playfair Display", serif !important;
  text-transform: none !important;
}
.font-editorial-sans {
  font-family: "Inter", sans-serif !important;
  text-transform: none !important;
}

/* ── HERO HEADLINE RULES — defeat global h1 !important ── */
.hero-line-1 {
  font-family: "Playfair Display", serif !important;
  white-space: nowrap !important;
  font-size: clamp(1.8rem, 5vw, 5.5rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #faf7f2 !important;
  line-height: 1.05 !important;
  filter: blur(0px);
}

.hero-line-2 {
  font-family: "Inter", sans-serif !important;
  font-style: italic !important;
  font-size: clamp(1.5rem, 4.5vw, 4.8rem) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: rgba(220, 210, 195, 0.82) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  filter: blur(0px);
}

.hero-sub {
  font-family: "Cormorant Garamond", serif !important;
  text-transform: uppercase !important;
}

html {
  scroll-behavior: smooth !important;
}

/* LENIS BASE STYLES */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   BRUTALIST LUXURY TYPOGRAPHY SYSTEM
   ══════════════════════════════════════════════════ */
:root {
  --font-display: "Cinzel", serif;
  --font-body: "DM Sans", sans-serif;
  --font-heading:
    "Clash Display", sans-serif; /* Kept as tertiary accent for small labels/badges */
  --text-heading: #f5f0e8; /* Warm prestige off-white for ALL main headlines */
}

/* Apply display font globally to main headlines */
h1,
h2,
h3,
h4,
.logo,
.header__logo,
.hero__title,
.about__heading,
.contact__heading,
.section-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important; /* Generous letter-spacing for Cinzel prestige */
  color: var(--text-heading, #f5f0e8) !important;
}

/* Apply body font globally to body copy, navigation links, buttons, form labels, secondary text */
body,
p,
span:not(.eyebrow):not(.badge):not(.card-label),
a,
input,
button,
textarea,
select,
label,
.nav-links,
.nav__links li a,
.navbar-links a {
  font-family: var(--font-body, "DM Sans", sans-serif) !important;
}

/* ══════════════════════════════════════════════════
   HERO TEXT — GSAP MASK REVEAL (Bulletproof Centered)
   ══════════════════════════════════════════════════ */

.hero-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 10;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.5vw, 6.5rem);
  font-weight: 800;
  color: var(--text-heading, #f5f0e8); /* Warm prestige off-white */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.25;
}

.line-mask {
  overflow: visible;
  display: inline-block;
  padding: 0.2em 0.1em;
  margin: -0.2em -0.1em;
  vertical-align: middle;
}

.reveal-text,
#animated-text {
  display: inline-block;
  color: #ffffff;
  font-family: var(--font-display, "Cinzel", serif);
  font-weight: 800;
  will-change: transform, opacity, filter;
}

section {
  border: none !important;
  outline: none !important;
  margin: 0 !important;
}


.section-title {
  color: var(--text-heading, #f5f0e8) !important;
  font-family: var(--font-display) !important;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ── About Section ("Sahne Arkasındaki GÜÇ") Typography ── */
.about__content p,
p.sr-paragraph {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.35vw, 1.25rem) !important;
  line-height: 1.8 !important;
  color: #ffffff !important; /* Pure white as requested */
  margin: 0 auto 1.5rem auto !important;
  font-weight: 400;
  max-width: 65ch;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.about-text-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 20;
}

/* --- HERO TRANSITION MASK --- */
#hero {
  position: relative;
}

#hero::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Pull down slightly to kill sub-pixel gaps */
  left: 0;
  width: 100%;
  height: 250px; /* Makes the fade long and buttery smooth */
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 0%, #080808 100%);
  z-index: 5; /* Must sit ABOVE the video, but BELOW the text */
  pointer-events: none;
}

/* The Section Wrapper must handle overflow */
#about {
  background: #080808 !important;
  margin-top: 0 !important;
  border-top: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/* Ensure text sits above the collage. */
.about-text-card .relative.z-10 {
  position: relative;
  z-index: 10;
}
.nav-links a,
.nav__links a {
  font-weight: 600 !important;
}











.mobile-only {
  display: none !important;
}

.brands-grid img,
.client-logos img {
  transform: scale(1.3);
  max-width: 150px;
}

.cta-section,
.footer-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
  margin: 0 auto;
}

.cta-section h2,
.cta-section p,
.footer-section h2,
.footer-section p,
.contact__info h2,
.section-title {
  word-break: keep-all !important; /* Kelimeleri ortasından bölme */
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal;
}
h2 span.text-accent,
.section-title span.text-accent,
h1 span.text-accent,
h3 span.text-accent {
  white-space: nowrap !important;
  display: inline-block !important;
  color: var(--text-heading, #f5f0e8) !important;
  -webkit-text-fill-color: var(--text-heading, #f5f0e8) !important;
}
@media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {
  .contact__info h2 {
    font-size: 3rem !important; /* PROJEYİ BAŞLATALIM yazısının webde M harfi aşağı düşmeden sığması için */
  }
}
/* Büyük başlıkların mobilde harf fırlatmasını önlemek için duyarlı boyut: */
.cta-section h2,
.footer-section h2 {
  font-size: 1.8rem !important;
}

/* ═══════════════════════════════════════════════
   PORTFOLIO SECTION — VERTICAL SCROLL-PINNED 3D STACKED DECK
   ═══════════════════════════════════════════════ */
#portfolio-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #080808;
  perspective: 1400px;
}

.cards-container {
  perspective: 1400px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
}

.project-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(380px, 94vw, 1600px);
  height: min(88vh, 850px);
  border-radius: 1.4rem;
  transform-origin: top center;
  will-change: transform;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  padding: 1.5rem 2rem;
  background-color: #080808 !important;
  color: #faf7f2 !important;
  backface-visibility: hidden; /* prevents rendering artifacts during rotation */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}

.project-copy {
  margin-bottom: 0.75rem !important;
}

.project-card h2 {
  font-family: "Clash Display", var(--font-display, "Cinzel", serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.15;
  margin: 0.5rem 0 1rem 0;
  color: #faf7f2 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-stack-info {
  position: relative;
  z-index: 2;
}

.card-stack-info p {
  font-family: "Manrope", var(--font-body, sans-serif);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  max-width: 95%;
  margin: 0;
}

.card-stack-img {
  width: 100%;
  height: 70%;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  margin-top: 1.2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-stack-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.project-card:hover .card-stack-img img {
  transform: scale(1.04);
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  .project-card {
    width: 88vw;
    height: min(72vh, 560px);
    padding: 1.5rem;
  }
  .card-stack-img {
    height: 40%;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMART HEADER (Auto-Hide on Scroll Down)
   ══════════════════════════════════════════════════════════════ */
header,
.header {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.header-hidden {
  transform: translateY(-100%) !important;
}

/* ══════════════════════════════════════════════════════════════
   THE CONFIDENT HERO (Static Elegance Typography)
   ══════════════════════════════════════════════════════════════ */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 1100px);
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

h1.hero-main {
  font-family:
    "Cormorant Garamond", var(--font-display, "Cinzel", serif) !important;
  font-size: clamp(2.8rem, 6vw, 6.2rem) !important;
  font-weight: 700 !important;
  color: #faf7f2 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-sub p {
  font-family: "DM Sans", var(--font-body, sans-serif) !important;
  font-size: clamp(0.95rem, 1.3vw, 1.3rem) !important;
  color: rgba(250, 247, 242, 0.85) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* --- NEW HERO STYLES --- */
.hero-italic {
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}
.hero-badge {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 20;
}
.badge-spin {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- NEW ABOUT (BACKSTAGE PASS) STYLES --- */
.about-new {
  color: #faf7f2;
  padding: 8rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
/* The Dark Premium About Text Card Container Fix */
.about-new .container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
@media (max-width: 1024px) {
  .about-new .container {
    flex-direction: column !important;
  }
}

/* The Dark Premium About Text Card */
.about-text-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 20;
  color: #faf7f2;
  width: 45% !important;
  /* Width changes at breakpoints must settle before portfolio measurement.
     Animating width keeps reflowing every section below for another 500ms. */
  transition: none;
}
.about-text-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.about-text-card h2 {
  font-family: var(--font-heading, serif);
  color: #faf7f2;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.about-text-card h2 span {
  color: #faf7f2;
  opacity: 0.6;
  font-style: italic;
} /* Kill the raw orange */
.about-text-card p {
  font-family: var(--font-body, sans-serif);
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(250, 247, 242, 0.85);
  max-width: 45ch;
}
/* Update CSS for the new floating glass showcase */
#bagInfoBox.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Trusted Brands (Güvenen Markalar) Revamp */
.partners__header h2 {
  font-family: "Cinzel", serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.partners__header h2::after {
  display: none !important;
}
.partners__logo {
  width: 140px !important;
  height: 70px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: grayscale(100%) !important;
  opacity: 0.6 !important;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease !important;
  margin: 0 30px;
}
.partners__logo:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* Contact Form Luxury UI */
.contact__info h2 {
  font-family: "Cinzel", serif !important;
  text-transform: uppercase !important;
}
.contact__info .contact__icon {
  color: #c98a2a !important;
} /* Change pink to accent orange/gold */
.contact__form label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  opacity: 0.8;
  margin-bottom: 0.5rem;
  display: block;
}

.input-group {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}
.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 0.5rem 0;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  outline: none;
  border-bottom: 1px solid transparent;
}
.input-group .focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #c98a2a;
  transition: 0.4s;
}
.input-group input:focus ~ .focus-border,
.input-group select:focus ~ .focus-border,
.input-group textarea:focus ~ .focus-border {
  width: 100%;
  transition: 0.4s;
}
.input-group input::placeholder,
.input-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.contact__submit.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: all 0.3s ease !important;
  padding: 1rem 2rem !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  margin-top: 1rem;
  cursor: pointer;
}
.contact__submit.btn-ghost:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* Success / Error States */
.form-success-state {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  animation: fadeIn 0.5s ease;
}
.form-success-state h3 {
  font-family: "Cinzel", serif;
  font-size: 2.5rem;
  color: #c98a2a;
  margin-bottom: 1rem;
}
.form-success-state p {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  opacity: 0.8;
}
.form-error-msg {
  display: none;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff6b6b;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  text-align: center;
  border-radius: 4px;
}
.field-error {
  color: #ff6b6b;
  font-size: 0.75rem;
  display: none;
  margin-top: 0.25rem;
  font-family: "DM Sans", sans-serif;
}

.form__honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form__captcha {
  min-height: 78px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.form__captcha:empty {
  min-height: 0;
  margin-top: 0;
}

@media (max-width: 1024px) {
  .about-new {
    flex-direction: column;
    padding: 5rem 2rem;
    text-align: center;
  }
  .about-text,
  .about-collage {
    width: 100%;
  }
  .about-text-card {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-text-card > div {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .about-text-card p {
    text-align: center;
  }
  .about-collage {
    height: 600px;
    margin-top: 3rem;
  }
  #bagInfoBox {
    right: 0 !important;
    left: 0 !important;
    bottom: -30px !important;
    width: 90% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }
  .pass-1 {
    right: 2rem;
  }
  .pass-2 {
    left: 0;
  }
  .hero-badge {
    display: none;
  }
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  .hero-content {
    padding-top: 35vh !important;
  }
  .form__row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .card-metrics {
    flex-direction: column !important;
    align-items: center;
    gap: 6px !important;
    margin-bottom: 1.5rem !important;
  }
  .card-metrics .divider {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL PORTFOLIO CARDS
   ══════════════════════════════════════════════════════════════ */
/* Typography & Accents */
.text-accent {
  color: #c98a2a;
} /* The ONLY Orange/Gold accent */
.font-editorial {
  font-family: "Cormorant Garamond", var(--font-display, serif);
  font-weight: 300; /* Thinner, more elegant */
  letter-spacing: 0.03em;
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: #faf7f2;
  margin: 1.5rem 0 1rem 0;
}

/* Meta Tags */
.card-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
}
.tag-signature {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 40px;
  color: #a0a0a0;
}
.tag-category {
  color: #a0a0a0;
}

/* Metrics Row */
.card-metrics {
  display: flex;
  gap: 1rem;
  color: #a0a0a0;
  font-size: 0.85rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.divider {
  color: #c98a2a;
  opacity: 0.5;
}

/* Image Hover - The Apple Effect */
.card-image-wrapper {
  width: 100%;
  height: 58vh;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0;
}
.card-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  background-size: cover !important;
  background-position: center center !important;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  filter: brightness(0.9);
}
.project-card:hover .hover-zoom {
  transform: scale(1.04);
  filter: brightness(1);
}

/* Update CSS conceptually for this specific card wrapper only */
.project-card.ibrahim-bodur-case .card-image-wrapper {
  padding-top: 40%; /* Assuming previous cards used ~56.25% (16:9) */
  height: 0;
  position: relative;
  width: 100% !important; /* Must fill horizontal span */
  overflow: hidden;
}

/* Then adjust the visual scaling/angle of the contained image element professional */
.project-card.ibrahim-bodur-case .card-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Precludes cropping */
  object-position: center 30% !important; /* Lower slightly from center to capture whole stage */
  transform: scale(
    1.05
  ); /* very slight scale conceptually to lock professional and eliminate any containment lines */
}

/* SHADOW & LIGHT GALA FOCAL POINT FIX */
.project-card.shadow-light-gala-case .card-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* CRITICAL: Shift the focal point DOWN. Anchor bottom of photo into frame */
  object-position: center 85% !important;
}

/* 5-SLIDE PORTFOLIO TWIN CARD OVERHAUL */
.twin-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important; /* Space between the two verticals */
  width: 100%;
  height: 100%;
}

.twin-card .vertical-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* View Case Arrow CTA */
.card-bottom {
  text-align: right;
}
.view-case-btn {
  color: #faf7f2;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}
.view-case-btn .arrow {
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  display: inline-block;
}
.view-case-btn:hover {
  color: #c98a2a;
}
.view-case-btn:hover .arrow {
  transform: translate(4px, -4px);
  color: #c98a2a;
}
.polaroid-text {
  text-align: center;
  font-family: "Caveat", cursive;
  color: #000;
  font-size: 1.2rem;
  margin-top: 0.5rem;
}
/* --- THE ULTIMATE MOBILE CSS ILLUSION --- */
@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  /* ACTION 1: PURGE THE GHOST PADDING & RESET LAYOUT */
  #portfolio-stage {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 3rem 1rem !important;
    background-color: transparent !important;
    overflow: visible !important;
  }

  .cards-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 4rem !important;
  }

  /* Mobile is a normal document flow, not a paused desktop deck. */
  .project-card {
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Force all inline overrides to drop */
  #portfolio-stage,
  .cards-container,
  .project-card,
  .twin-card,
  .twin-card > .project-entry {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  /* On mobile every project is an independent case; the desktop twin
     container becomes layout-only and contributes no visible surface. */
  .project-card:has(.twin-card) {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .twin-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4rem !important; /* Separate the two inner cards */
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Give the inner items the true card appearance */
  .twin-card > .project-entry {
    background: #111111 !important;
    border-radius: 16px !important;
    padding: clamp(0.875rem, 3.5vw, 1.125rem) !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 18px 42px -28px rgba(0, 0, 0, 0.9) !important;
    box-sizing: border-box !important;
  }

  /* ACTION 3: STANDARDIZE ALL MOBILE CARDS (THE STABLEX STANDARD) */
  /* Single cards also need the exact same padding, border-radius, background */
  .project-card:not(:has(.twin-card)) {
    background: #111111 !important;
    border-radius: 16px !important;
    padding: clamp(0.875rem, 3.5vw, 1.125rem) !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 18px 42px -28px rgba(0, 0, 0, 0.9) !important;
    box-sizing: border-box !important;
  }

  /* Stablex defines the mobile media standard. Horizontal and vertical
     source files now share one deliberate frame instead of changing rhythm. */
  .project-media,
  .vertical-item {
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 7 / 6 !important;
    border-radius: 12px !important;
  }

  .project-media > img,
  .vertical-item > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  .project-media img,
  .vertical-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-top: 0 !important;
  }

  /* One typographic system for every mobile case study. The real H3 names
     and descriptions stay in the DOM for search engines and accessibility. */
  .project-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 3.75rem !important;
    margin-bottom: 0.5rem !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    box-sizing: border-box !important;
  }

  .project-copy span {
    font-size: 0.75rem !important;
    margin-bottom: 0 !important;
    opacity: 0.7 !important;
    word-wrap: break-word !important;
  }

  .project-card .card-title,
  .project-card h2,
  .project-card h3,
  .project-entry .card-title,
  .project-entry h3 {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
  }

  .project-copy > div:last-child {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
    opacity: 0.72 !important;
  }

  /* Keep the logo fix from previous action just in case */
  .partners__header h2,
  .references h2 {
    font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    margin: 0 auto 2rem auto !important;
    word-break: break-word !important;
    text-align: center !important;
  }

  .partners__marquee-wrapper,
  .partners__marquee-track {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .partners__marquee-track {
    animation: none !important;
  }

  .partners__marquee-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    width: 100% !important;
    animation: none !important;
  }

  .partners__marquee-track > .partners__marquee-content:not(:first-child) {
    display: none !important;
  }

  .partners-logo,
  .partners__marquee-content img {
    display: block !important;
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* Page-level refinements */
/* ═══════════════════════════════════════════════
       CORE — VARIABLES & RESET
       ═══════════════════════════════════════════════ */
      :root {
        --bg-color: #000000;
        --text-main: #f5f5f5;
        --text-muted: #a0a0a0;
        --accent: #ff6b00;
        --glass-bg: rgba(255, 255, 255, 0.03);
        --glass-border: rgba(255, 255, 255, 0.05);
        /* ── PRESTIGE TYPOGRAPHY SYSTEM ── */
        --font-display: "Cinzel", serif;
        --font-body: "DM Sans", sans-serif;
        --font-heading: "Cormorant Garamond", serif;
        --text-heading: #f5f0e8;
        /* Warm prestige off-white for ALL headings */
      }

      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        /* Modified for Lenis smooth scroll */
      }

      body {
        font-family: var(--font-body);
        background-color: var(--bg-color);
        color: var(--text-main);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        overflow-y: auto;
      }

      body.loaded {
        overflow-y: auto;
      }

      h1,
      h2,
      h3,
      h4 {
        font-family: var(--font-display) !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: 1.15;
        color: var(--text-heading);
        padding-top: 5px;
        margin: 0;
      }

      p,
      span:not(.text-accent):not(.card-label__sub):not(.card-back__tag):not(
          .contact__text span
        ),
      li,
      label {
        font-family: var(--font-body);
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      .text-accent {
        color: var(--text-heading) !important;
        -webkit-text-fill-color: var(--text-heading) !important;
      }

      /* ═══════════════════════════════════════════════
       HEADER & NAVİGASYON
       ═══════════════════════════════════════════════ */
      .header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 2.5rem 5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
        pointer-events: none;
        transition:
          padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          background 0.4s ease,
          box-shadow 0.4s ease,
          border-color 0.4s ease;
      }

      .header--scrolled {
        background: rgba(10, 10, 10, 0.9) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        padding: 1.2rem 5rem !important;
        border-bottom: 1px solid rgba(255, 140, 0, 0.2) !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85) !important;
        pointer-events: auto !important;
      }

      .header__logo {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        pointer-events: auto;
        transition:
          transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
          text-shadow 0.3s ease;
        background: linear-gradient(135deg, #ffffff 0%, #ff8c00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: 0 4px 20px rgba(255, 140, 0, 0.25);
      }

      .header__logo:hover {
        transform: scale(1.06);
        text-shadow: 0 4px 25px rgba(255, 140, 0, 0.5);
      }

      .nav__links {
        display: flex;
        gap: 3.5rem;
        list-style: none;
        pointer-events: auto;
      }

      .nav__links li a {
        font-family: var(--font-heading);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--text-main);
        position: relative;
        padding-bottom: 5px;
        transition: color 0.3s ease;
      }

      .nav__links li a:hover {
        color: var(--accent);
      }

      .nav__links li a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s ease;
      }

      .nav__links li a:hover::after {
        transform: scaleX(1);
      }

      /* ═══════════════════════════════════════════════
       HERO SECTION
       ═══════════════════════════════════════════════ */
      .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: #080808;
      }

      .hero__video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%) scale(1.05);
        object-fit: cover;
        z-index: 0;
        /* Keep the cinematic grade without crushing detail on dim phone and
           laptop displays. The text contrast is still protected by the
           dedicated overlay below. */
        filter: brightness(0.52) contrast(1.08);
      }

      .hero__overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at center,
          rgba(0, 0, 0, 0.3) 0%,
          rgba(14, 12, 17, 0.74) 100%
        );
        z-index: 1;
      }

      .hero__fade-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 180px;
        background: linear-gradient(
          to top,
          var(--bg-color) 0%,
          transparent 100%
        );
        z-index: 0;
        pointer-events: none;
      }

      /* ═══════════════════════════════════════════════
       SECTION DECORATION — Ortak Altı Çizgi
       ═══════════════════════════════════════════════ */
      .about__content h2,
      .projects__header h2,
      .partners__header h2,
      .contact__info h2 {
        position: relative;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
      }

      .about__content h2::after,
      .projects__header h2::after,
      .partners__header h2::after,
      .contact__info h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 60px;
        height: 2px;
        background: var(--accent);
      }

      .about__content h2::after,
      .contact__info h2::after {
        left: 0;
      }

      .projects__header h2::after {
        left: 50%;
        transform: translateX(-50%);
      }

      /* ═══════════════════════════════════════════════
       ABOUT / MANİFESTO
       ═══════════════════════════════════════════════ */
      .about {
        padding: 6rem 5rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8rem;
        align-items: center;
        max-width: 1600px;
        margin: 0 auto;
        background: transparent;
      }

      .about__content h2 {
        font-size: 3.5rem;
      }

      .about__content p {
        font-family: var(--font-body);
        font-size: 1.1rem;
        line-height: 1.8;
        color: #d1cfc9;
        /* Muted off-white for elite readability */
        margin: 0 auto 1.5rem auto;
        font-weight: 400;
        max-width: 65ch;
        /* Premium magazine blurb width constraint */
      }

      .about__image-wrapper {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
        background-color: transparent !important;
      }

      .about__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: translateY(0) scale(1.06);
        transition: transform 0.15s ease-out;
        will-change: transform;
      }

      .about__image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 0 1px var(--glass-border);
        border-radius: 24px;
        pointer-events: none;
      }

      .about__image {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.8s ease;
        background-color: var(--bg-color);
      }

      .about__image-wrapper:hover .about__image {
        transform: scale(1.04);
      }

      /* ═══════════════════════════════════════════════
       PROJECTS — 3D FLIP KART SİSTEMİ
       ═══════════════════════════════════════════════ */
      .projects {
        padding: 4rem 5rem 6rem;
        max-width: 1800px;
        margin: 0 auto;
        background: transparent;
      }

      .projects__header {
        text-align: center;
        margin-bottom: 4rem;
      }

      .projects__header h2 {
        font-size: 4.5rem;
      }

      /* Portfolio rules migrated to style.css */

      /* ═══════════════════════════════════════════════
       GÜVENEN MARKALAR — Sonsuz Marquee
       ═══════════════════════════════════════════════ */
      .partners {
        padding: 5.25rem 0 6rem;
        background: #080808;
        overflow: hidden;
        position: relative;
      }

      .partners__header {
        text-align: center;
        margin-bottom: 4rem;
      }

      .partners__header h2 {
        font-weight: 400 !important;
        font-family: "Cormorant Garamond", serif !important;
        font-size: 4rem !important;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      #partners .partners__header h2::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }

      .partners__marquee-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 3rem 0;
        /* <--- FIX 3: Prevent clipping of scaled logos like MAERSK */
      }

      .partners__marquee-wrapper::before,
      .partners__marquee-wrapper::after {
        display: none !important;
      }

      .partners__marquee-track {
        display: flex;
        width: max-content;
        animation: marqueeScroll 35s linear infinite !important;
      }

      .partners__marquee-track:hover {
        animation-play-state: paused;
      }

      .partners__marquee-content {
        display: flex;
        align-items: center;
        gap: 12rem;
        /* <--- FIX 3: Increased gap */
        padding-right: 12rem;
      }

      /* Update your CSS strictly with these rules to keep colors and improve blending */
      .partners-logo {
        max-height: 70px !important;
        width: auto !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        opacity: 0.85;
        transition: all 0.4s ease;

        /* DESTROY THE GREYSCALE FILTER */
        filter: none !important;
        /* <--- ALL COLORS COME BACK! */

        /* CRITICAL BLEND MODE FOR COLORFUL JPGs ON DARK BACKGROUND */
        mix-blend-mode: lighten !important;
        /* <--- Keeps colorful assets while hiding most dark JPG boxes */
      }

      .logo-invert {
        filter: invert(1) hue-rotate(180deg) saturate(5) brightness(0.85)
          contrast(1.2) !important;
      }

      .partners-logo:hover {
        opacity: 1;
        filter: brightness(1.2);
        /* <--- A small brightness boost on hover, not greyscale */
        transform: scale(1.05);
      }

      .partners-logo.scale-2x {
        transform: scale(2.2);
      }

      .partners-logo.scale-2x:hover {
        transform: scale(2.3);
      }

      @keyframes marqueeScroll {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-50%);
        }
      }

      /* ═══════════════════════════════════════════════
       CONTACT / İLETİŞİM
       ═══════════════════════════════════════════════ */
      .contact {
        padding: 6rem 5rem;
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        align-items: start;
        /* Align tops with the form */
        background: transparent;
      }

      .contact__info h2 {
        font-weight: 400 !important;
        font-family: "Cormorant Garamond", serif !important;
        font-size: 3.5rem !important;
        text-transform: uppercase;
      }

      #contact .contact__info h2::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }

      .contact__info p {
        font-size: 1.15rem;
        line-height: 1.9;
        color: var(--text-muted);
        margin-bottom: 2.5rem;
        font-weight: 300;
      }

      .contact__details {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .contact__item {
        display: flex;
        align-items: center;
        gap: 1.5rem;
      }

      .contact__icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 1.2rem;
      }

      .contact__text {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }

      .contact__text span {
        font-size: 0.9rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .contact__text strong {
        font-size: 1.1rem;
        color: #fff;
        font-weight: 500;
      }

      .contact__text span {
        display: block;
        font-size: 0.8rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 2px;
      }

      .contact__text strong {
        font-size: 1.1rem;
        color: var(--text-main);
        font-weight: 600;
      }

      .contact__form {
        background: rgba(20, 20, 20, 0.6);
        border: 1px solid var(--glass-border);
        padding: 3rem;
        border-radius: 24px;
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .form__group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .form__group label {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--text-muted);
      }

      .form__group input,
      .form__group textarea {
        width: 100%;
        padding: 1rem 1.2rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        color: #fff;
        font-family: var(--font-body);
        font-size: 1rem;
        transition:
          border-color 0.3s ease,
          background 0.3s ease;
      }

      .form__group input:focus,
      .form__group textarea:focus {
        outline: none;
        border-color: var(--accent);
        background: rgba(255, 255, 255, 0.05);
      }

      .form__group textarea {
        resize: vertical;
        min-height: 120px;
      }

      .form__submit {
        padding: 1.2rem;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 3px;
        cursor: pointer;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          background 0.3s ease;
        margin-top: 0.5rem;
      }

      .form__submit:hover {
        background: #e05e00;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(255, 107, 0, 0.3);
      }

      /* ═══════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════ */
      .footer {
        border-top: 1px solid var(--glass-border);
        padding: 4rem 5rem 2rem;
        background: #0a0a0a;
      }

      .footer__container {
        max-width: 1600px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
      }

      .footer__logo {
        font-family: "Cormorant Garamond", serif;
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: 4px;
        color: #fff;
      }

      .footer__links {
        display: flex;
        gap: 2.5rem;
        list-style: none;
      }

      .footer__links a {
        font-size: 0.9rem;
        color: var(--text-muted);
        transition: color 0.3s ease;
      }

      .footer__links a:hover {
        color: var(--accent);
      }

      .footer__bottom {
        max-width: 1600px;
        margin: 0 auto;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        color: var(--text-muted);
      }

      /* ═══════════════════════════════════════════════
       DİNAMİK REVEAL (Cinematic)
       ═══════════════════════════════════════════════ */
      @keyframes cinematicReveal {
        from {
          opacity: 0;
          transform: scale(0.9) translateY(15px);
        }

        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .dyn-cinematic {
        animation: cinematicReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      /* ═══════════════════════════════════════════════
       SCROLL REVEAL CLASSSLARI
       ═══════════════════════════════════════════════ */
      .sr-hidden {
        opacity: 0;
        transform: translateY(50px);
        transition:
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .sr-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }

      .sr-hidden[data-sr-delay="1"] {
        transition-delay: 0.1s;
      }

      .sr-hidden[data-sr-delay="2"] {
        transition-delay: 0.2s;
      }

      .sr-hidden[data-sr-delay="3"] {
        transition-delay: 0.35s;
      }

      .sr-hidden[data-sr-delay="4"] {
        transition-delay: 0.5s;
      }

      .sr-hidden[data-sr-delay="5"] {
        transition-delay: 0.65s;
      }

      .sr-left {
        opacity: 0;
        transform: translateX(-50px);
        transition:
          opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
          transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .sr-right {
        opacity: 0;
        transform: translateX(50px);
        transition:
          opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
          transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .sr-left.sr-visible,
      .sr-right.sr-visible {
        opacity: 1;
        transform: translateX(0);
      }

      .sr-paragraph {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        color: #ffffff !important;
      }

      .sr-paragraph.sr-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        color: #ffffff !important;
      }

      /* ═══════════════════════════════════════════════
       KEYFRAMES — Genel
       ═══════════════════════════════════════════════ */
      @keyframes fadeUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ═══════════════════════════════════════════════
       RESPONSIVE DESIGN
       ═══════════════════════════════════════════════ */
      @media (max-width: 1200px) {
        .about,
        .contact {
          grid-template-columns: 1fr;
          padding: 4rem 3rem;
          text-align: center;
        }

        .about__content h2::after,
        .contact__info h2::after {
          left: 50%;
          transform: translateX(-50%);
        }

        .contact__info {
          text-align: center;
        }

        .contact__details {
          align-items: center;
        }

        /* cleaned */

        .header {
          padding: 2rem 3rem;
        }

        .contact__form {
          padding: 3rem 2rem;
        }
      }

      @media (max-width: 768px),
        (max-width: 1024px) and (max-height: 600px) {
        .header {
          justify-content: space-between !important;
          padding: 1.5rem 2rem;
        }

        .header__logo {
          font-size: 1.5rem;
          letter-spacing: 3px;
        }

        .nav__links {
          gap: 1.5rem;
        }

        /* cleaned */

        .projects__header h2,
        .about__content h2,
        .contact__info h2,
        .partners__header h2 {
          font-size: 2.5rem;
        }

        .about {
          padding: 4rem 2rem;
        }

        .projects {
          padding: 3rem 2rem 4rem;
        }

        .contact {
          padding: 3rem 2rem 4rem;
        }

        .partners-logo {
          max-height: 60px !important;
        }

        .partners__marquee-content {
          gap: 5rem;
          padding-right: 5rem;
        }

        #dynamic-text {
          font-size: clamp(1.4rem, 7vw, 3rem);
          letter-spacing: -2px !important;
        }

      }

      @media (prefers-reduced-motion: reduce) {
        .sr-hidden,
        .sr-left,
        .sr-right {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }

        body {
          overflow-y: auto !important;
        }
      }

      .cta-section h2,
      .footer-section h2,
      .contact-section h2 {
        font-size: clamp(1.5rem, 6vw, 4rem) !important;
        /* Mobilde küçülür, masaüstünde büyür */
        white-space: nowrap !important;
        /* Kelimenin bölünmesi KESİN olarak yasaklandı */
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .about__content h2::after,
      .projects__header h2::after,
      .partners__header h2::after,
      .contact__info h2::after,
      .section-title::after {
        margin: 10px auto !important;
        position: static !important;
        display: block !important;
      }

      h1,
      h2,
      h3,
      .cta-section h2,
      .footer-section h2,
      .section-title,
      .contact__info h2 {
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
      }

      h2 span.text-accent,
      .section-title span.text-accent {
        white-space: nowrap !important;
        display: inline-block !important;
      }

      @media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {
        .contact__info h2 {
          font-size: 3rem !important;
          /* PROJEYİ BAŞLATALIM yazısının webde M harfi aşağı düşmeden sığması için */
        }
      }

      @media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {



      }













      .mobile-only {
        display: none !important;
      }

      @media (max-width: 768px),
        (max-width: 1024px) and (max-height: 600px) {
        html,
        body {
          overflow-x: hidden !important;
        }

        .mobile-only {
          display: block !important;
        }

        .header {
          position: absolute !important;
          padding: 1.5rem 2rem !important;
          width: 100% !important;
          display: flex !important;
          justify-content: flex-end !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          pointer-events: auto !important;
          z-index: 9999 !important;
        }

        .header--scrolled {
          padding: 1rem 1.5rem !important;
          background: rgba(10, 10, 10, 0.92) !important;
          backdrop-filter: blur(20px) !important;
          -webkit-backdrop-filter: blur(20px) !important;
          border-bottom: 1px solid rgba(255, 140, 0, 0.2) !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
        }

        .nav {
          width: 100% !important;
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          pointer-events: auto !important;
          position: relative !important;
        }

        h2,
        .section-title {
          font-size: 2.4rem !important;
          /* Ekran daraldığında kelimeyi bölme, görkemli tut */
          white-space: normal !important;
        }

        .cta-section h2,
        .footer-section h2 {
          font-size: 2.1rem !important;
          /* Kelime sığsın ve okunaklı olsun */
          white-space: normal !important;
        }

        /* Biz ne yaparız kısmı mobilde görünürlüğü */
















        .brands-grid,
        .client-logos {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 20px !important;
          padding: 0 20px !important;
        }

        .brands-grid img,
        .client-logos img {
          transform: scale(1) !important;
          max-width: 100px !important;
          margin: 0 auto !important;
        }

        .header {
          position: fixed !important;
          padding: 1rem 1.5rem !important;
          width: 100% !important;
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          pointer-events: auto !important;
          z-index: 10000 !important;
          background: rgba(10, 10, 10, 0.95) !important;
          backdrop-filter: blur(20px) !important;
          -webkit-backdrop-filter: blur(20px) !important;
          border-bottom: 1px solid rgba(255, 140, 0, 0.2) !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
        }

        .nav {
          display: flex !important;
          justify-content: flex-end !important;
          align-items: center !important;
          pointer-events: auto !important;
          position: relative !important;
        }

        nav ul,
        .navbar-links,
        .nav__links {
          display: flex !important;
          flex-direction: column !important;
          width: 92% !important;
          position: fixed !important;
          top: 75px !important;
          left: 4% !important;
          background: rgba(12, 12, 12, 0.98) !important;
          backdrop-filter: blur(30px) !important;
          -webkit-backdrop-filter: blur(30px) !important;
          padding: 2rem 1.5rem !important;
          gap: 1.25rem !important;
          z-index: 10000 !important;
          border: 1px solid rgba(255, 140, 0, 0.4) !important;
          border-radius: 16px !important;
          box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.95),
            0 0 40px rgba(255, 140, 0, 0.2) !important;
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
          transform: translateY(-20px) scale(0.96) !important;
          transition:
            opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.4s !important;
        }

        nav ul.active,
        .navbar-links.active,
        .nav__links.active {
          opacity: 1 !important;
          visibility: visible !important;
          pointer-events: auto !important;
          transform: translateY(0) scale(1) !important;
        }

        nav ul li,
        .nav__links li {
          width: 100% !important;
          text-align: center !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
          padding-bottom: 1.2rem !important;
        }

        nav ul li:last-child,
        .nav__links li:last-child {
          border-bottom: none !important;
          padding-bottom: 0 !important;
        }

        nav ul li a,
        .nav__links li a {
          font-family: "Outfit", sans-serif !important;
          font-size: 1.2rem !important;
          font-weight: 600 !important;
          letter-spacing: 3px !important;
          color: #fff !important;
          text-transform: uppercase !important;
          transition:
            color 0.3s ease,
            transform 0.3s ease !important;
          display: block !important;
        }

        nav ul li a.nav-what-we-do,
        .nav__links li a.nav-what-we-do {
          text-transform: none !important;
          letter-spacing: 1px !important;
          font-size: 1.15rem !important;
          white-space: nowrap !important;
        }

        nav ul li a:hover,
        .nav__links li a:hover {
          color: var(--accent, #ff8c00) !important;
          transform: translateX(6px) !important;
        }

        @keyframes menuSlideDown {
          0% {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
          }

          100% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        /* Reset desktop accordion expand rules on mobile to prevent layout collapse */




        /* Project card back face typography and scrolling optimizations for mobile */
        .card-face--back {
          padding: 1.5rem 1.25rem !important;
          overflow-y: auto !important;
          justify-content: flex-start !important;
        }

        .card-back__title {
          font-size: 1.4rem !important;
          margin-bottom: 0.8rem !important;
        }

        .project-card:nth-child(1) .card-back__title {
          font-size: 1.8rem !important;
        }

        .card-back__desc {
          font-size: 0.85rem !important;
          line-height: 1.4 !important;
          margin-bottom: 1rem !important;
        }

        .card-back__btn {
          padding: 0.5rem 1.5rem !important;
          font-size: 0.75rem !important;
        }

        /* Mobile-only composition cleanup. Desktop visual rules stay untouched. */
        .header {
          position: absolute !important;
        }

        #hero .hero-content {
          inset: 0 !important;
          width: 100% !important;
          height: 100% !important;
          transform: none !important;
          box-sizing: border-box !important;
          justify-content: flex-start !important;
          gap: 0 !important;
          padding: clamp(18.75rem, 42svh, 22.5rem) 1.5rem 2rem !important;
        }

        #hero .hero-title {
          gap: 0.25rem !important;
          line-height: 1 !important;
        }

        #hero .hero-line-1 {
          max-width: 100% !important;
          font-size: clamp(1.8rem, 8vw, 2.15rem) !important;
          line-height: 1.08 !important;
          white-space: normal !important;
          text-wrap: balance;
        }

        #hero .hero-line-2 {
          margin-top: 0 !important;
          font-size: clamp(1.45rem, 6.8vw, 1.8rem) !important;
          line-height: 1.15 !important;
          white-space: normal !important;
        }

        #hero .hero-sub {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 0.7rem !important;
          width: min(100%, 21rem) !important;
          margin: 2.15rem auto 0 !important;
          padding: 0 !important;
          border: 0 !important;
          font-family: "DM Sans", sans-serif !important;
          font-size: 0.72rem !important;
          line-height: 1.35 !important;
          font-weight: 600 !important;
          letter-spacing: 0.18em !important;
          text-align: center !important;
        }

        #hero .hero-service {
          display: block;
          min-width: 0;
          max-width: 100%;
        }

        #hero .hero-service-separator {
          display: block !important;
          width: 0.28rem;
          height: 0.28rem;
          margin: 0.05rem auto;
          overflow: hidden;
          color: transparent !important;
          background: #c98a2a;
          transform: rotate(45deg);
          opacity: 0.85;
        }

        #hero .hero-service::before {
          content: none;
        }

        #hero .hero-service::after {
          content: none;
        }

        #hero .hero-cta {
          margin-top: 1.75rem !important;
        }

        #about.about-new {
          padding: 4.5rem 1.25rem 2.75rem !important;
        }

        #about .about-collage {
          height: auto !important;
          min-height: 320px !important;
          margin-top: 2.25rem !important;
          padding: 0 !important;
        }

        #about .about-collage > div {
          min-height: 320px !important;
          padding: 0 !important;
        }

        #about #eventorBag {
          width: min(88%, 280px) !important;
          max-width: 280px !important;
          max-height: min(54svh, 29rem) !important;
          object-fit: contain !important;
        }

        #about #bagInfoBox {
          bottom: 0 !important;
        }



        #partners.partners {
          padding: 4rem 1.25rem 4.5rem !important;
        }

        #partners .partners__header {
          margin-bottom: 2.75rem !important;
        }

        #partners .partners__header h2 {
          width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          font-size: clamp(1.85rem, 8vw, 2.25rem) !important;
          line-height: 1.05 !important;
          letter-spacing: 0.08em !important;
          white-space: nowrap !important;
          word-break: normal !important;
          overflow-wrap: normal !important;
        }

        #partners .partners__marquee-wrapper {
          padding: 0 !important;
          overflow: visible !important;
        }

        #partners .partners__marquee-track {
          display: block !important;
          width: 100% !important;
          animation: none !important;
          transform: none !important;
        }

        #partners .partners__marquee-content:first-child {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          align-items: center !important;
          justify-items: center !important;
          gap: 2.5rem 2rem !important;
          width: 100% !important;
          padding: 0 !important;
        }

        #partners
          .partners__marquee-track
          > .partners__marquee-content:not(:first-child) {
          display: none !important;
        }

        #partners .partners-logo,
        #partners .partners-logo.scale-2x {
          display: block !important;
          width: auto !important;
          max-width: 112px !important;
          max-height: 58px !important;
          height: auto !important;
          margin: 0 !important;
          transform: none !important;
          object-fit: contain !important;
        }

        #partners .partners-logo.scale-2x {
          width: 108px !important;
        }

        #contact .contact__details {
          width: min(100%, 24rem) !important;
          margin-inline: auto !important;
          align-items: stretch !important;
        }

        #contact .contact__item {
          display: grid !important;
          grid-template-columns: 3.125rem minmax(0, 1fr) !important;
          align-items: start !important;
          gap: 1rem !important;
          width: 100% !important;
          text-align: left !important;
        }

        #contact .contact__icon {
          width: 3.125rem !important;
          height: 3.125rem !important;
          flex: none !important;
        }

        #contact .contact__text {
          min-width: 0 !important;
          padding-top: 0.15rem !important;
          align-items: flex-start !important;
        }

        #contact .contact__text strong {
          overflow-wrap: anywhere !important;
        }
      }

/* Hero refinements */
@keyframes scrollIndicator {
          0% {
            transform: translate3d(0, -100%, 0);
          }

          30% {
            transform: translate3d(0, 0, 0);
          }

          70% {
            transform: translate3d(0, 0, 0);
          }

          100% {
            transform: translate3d(0, 100%, 0);
          }
        }

        .hero-cta:hover {
          opacity: 1 !important;
        }

        .hero-cta:hover .cta-line-container {
          transform: scaleY(1.42);
        }

        .hero-cta:hover .cta-line-fill {
          transform: translate3d(0, 0, 0) !important;
        }

        .hero-line-1 {
          font-family: "Cormorant Garamond", serif !important;
          font-weight: 400 !important;
          font-style: normal !important;
          text-transform: none !important;
          letter-spacing: 0.04em !important;
        }

        .hero-line-2 {
          font-family: "Inter", sans-serif !important;
          font-weight: 600 !important;
          font-style: italic !important;
          text-transform: none !important;
          opacity: 0.7;
        }

        .hero-sub {
          font-family: "Cormorant Garamond", serif !important;
          text-transform: uppercase !important;
        }

/* ============================================================
   Accessibility, deep-link and resilient-motion refinements
   ============================================================ */
.skip-link {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 20000;
  padding: 0.75rem 1rem;
  color: #0a0a0c;
  background: #f4b54a;
  border-radius: 0.5rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  transform: translateY(calc(-100% - 2rem));
  transition: transform 180ms ease;
}

/* ============================================================
   Final visual system: one uninterrupted stage and two font roles
   ============================================================ */
:root {
  --site-bg: #080808;
}

html,
body,
main,
#about.about-new,
#services.service-routes,
#portfolio-stage,
#partners.partners,
#contact.contact,
.footer {
  background-color: var(--site-bg) !important;
}

#about::after {
  content: none !important;
}

#services .service-routes__intro h2,
#services .service-story__heading h3,
#portfolio-stage .card-title,
#portfolio-stage .font-editorial,
#partners .partners__header h2,
#contact .contact__info h2,
.footer__logo {
  font-family: "Cormorant Garamond", serif !important;
}

#services .service-routes__intro p,
#services .service-story__services,
#about .about-copy,
#portfolio-stage .project-copy,
#contact .contact__text,
#contact .contact__form,
.footer__links,
.footer__bottom {
  font-family: "DM Sans", sans-serif !important;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

html.no-js body {
  overflow-y: auto !important;
}

html.no-js .sr-hidden,
html.no-js .sr-left,
html.no-js .sr-right {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#hero,
#about,
#services,
#portfolio-stage,
#partners,
#contact {
  scroll-margin-top: clamp(5rem, 9vw, 7rem);
}

#main-content:focus {
  outline: none;
}

.contact__text a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.contact__text a:hover,
.contact__text a:focus-visible {
  color: #f4b54a;
  text-decoration: underline;
}

#eventorBag:focus-visible {
  border-radius: 1rem;
  outline: 3px solid #f4b54a;
  outline-offset: 0.4rem;
}

/* Match the established service headings, without changing hero or clients. */
#services .editorial-heading,
#contact .editorial-heading {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.editorial-heading strong,
.editorial-highlight {
  display: inline-block;
  padding: 0.08em 0.2em 0.12em;
  color: #080808;
  background: #ff7417;
  font: inherit;
  line-height: 0.82;
  transform: rotate(-1deg);
}
#services .editorial-heading > span,
#contact .editorial-heading > span {
  font: inherit !important;
  color: inherit;
}
#contact .contact__info { min-width: 0; }
#contact .editorial-heading {
  max-width: 100%;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  white-space: normal !important;
}
#partners .partners__header h2 {
  font-size: clamp(1.75rem, 4.2vw, 3.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}
/* Suppress browser anchoring only while our breakpoint transaction owns the
   semantic position. Native anchoring remains available during normal use. */
html.is-layout-switching { overflow-anchor: none; }

#partners .partners-logo.gorilla-logo {
  width: 112px !important;
  max-width: 112px !important;
  max-height: 92px !important;
  opacity: 0.88;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: scale(1) !important;
  transition:
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms ease,
    filter 300ms ease !important;
}

#partners .partners-logo.gorilla-logo:hover {
  opacity: 1;
  filter: brightness(1.15) !important;
  transform: scale(1.08) !important;
}

.header > .header__logo {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(202px, 15vw, 236px);
  height: auto;
  flex: 0 0 auto;
  line-height: 0;
  isolation: isolate;
  perspective: 720px;
  transform-style: preserve-3d;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header__logo-picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.header > .header__logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("../media/eventor-logo-400.webp?v=20260919-1")
    center / contain no-repeat;
  opacity: 0.7;
  filter: brightness(0.17) sepia(1) saturate(4.2) hue-rotate(347deg);
  transform: translate3d(4px, 5px, -1px) rotateY(-3deg);
  transform-origin: 50% 50%;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 240ms ease;
}

.header > .header__logo::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 4%;
  z-index: 0;
  height: 13%;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(8px);
  transform: translate3d(7px, 8px, -2px) rotate(-7deg);
}

.header > .header__logo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 118px;
  object-fit: contain;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 193, 133, 0.28))
    drop-shadow(0 2px 0 rgba(255, 226, 202, 0.2))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.48))
    drop-shadow(0 13px 22px rgba(0, 0, 0, 0.38)) !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  transform: rotateX(2deg) rotateY(-3deg) translateZ(1px);
  transform-origin: 50% 50%;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 240ms ease !important;
}

.header > .header__logo:is(:hover, :focus-visible) {
  transform: translate3d(0, -2px, 0) scale(1.025) !important;
}

.header > .header__logo:is(:hover, :focus-visible)::before {
  opacity: 0.58;
  transform: translate3d(3px, 4px, -1px) rotateY(0deg);
}

.header > .header__logo:is(:hover, :focus-visible) img {
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 209, 166, 0.32))
    drop-shadow(0 2px 0 rgba(255, 235, 216, 0.24))
    drop-shadow(0 8px 6px rgba(0, 0, 0, 0.52))
    drop-shadow(0 15px 25px rgba(255, 107, 0, 0.12)) !important;
  transform: rotateX(0deg) rotateY(0deg) translateZ(2px);
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  #about .about-collage > div {
    justify-content: center !important;
  }

  #about #eventorBag {
    display: block;
    margin-inline: auto !important;
  }

  #partners .partners-logo[src*="nkolay"] {
    width: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
  }

  #partners .partners-logo[src*="arcelik"] {
    width: 136px !important;
    max-width: 136px !important;
    max-height: 64px !important;
  }

  #partners .partners-logo.gorilla-logo {
    width: 104px !important;
    max-width: 104px !important;
    max-height: 88px !important;
  }

  .header > .header__logo {
    width: 154px;
    isolation: auto;
    perspective: none;
    transform-style: flat;
  }

  .header > .header__logo::before,
  .header > .header__logo::after {
    content: none;
    display: none;
  }

  .header > .header__logo img {
    max-height: 88px;
    filter: none !important;
    transform: none !important;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .header > .header__logo:is(:hover, :focus-visible) {
    transform: translate3d(0, -1px, 0) scale(1.015) !important;
  }

  .header {
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
    padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
  }
}

@media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {
  /* Bound paint invalidation to each moving deck card. The section keeps its
     authored 3D motion without repainting neighbouring page regions. */
  #portfolio-stage .project-card {
    contain: layout paint style;
  }

  html.no-js #portfolio-stage,
  html.motion-engine-unavailable #portfolio-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: clamp(3rem, 6vw, 6rem) 2rem !important;
    perspective: none !important;
  }

  html.no-js #portfolio-stage .cards-container,
  html.motion-engine-unavailable #portfolio-stage .cards-container {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: min(100%, 100rem) !important;
    height: auto !important;
    margin-inline: auto !important;
    gap: 2rem !important;
    transform: none !important;
    perspective: none !important;
  }

  html.no-js #portfolio-stage .project-card,
  html.motion-engine-unavailable #portfolio-stage .project-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: min(88vh, 850px) !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  /* Fixed backdrop filters repaint a large surface on every mobile scroll
     frame. The same opaque visual treatment is materially cheaper. */
  .header,
  .header--scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(10, 10, 10, 0.98) !important;
  }

  #portfolio-stage .mobile-project-motion-target {
    transform-origin: center top !important;
  }

  #portfolio-stage .cards-container,
  #portfolio-stage .project-card {
    will-change: auto !important;
  }

  #portfolio-stage .mobile-project-motion-fallback {
    will-change: transform, opacity !important;
    opacity: 0 !important;
    transform: translateY(48px) scale(0.985) !important;
    transition:
      opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 480ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #portfolio-stage
    .mobile-project-motion-fallback.is-mobile-visible {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  .footer {
    padding: 3.5rem max(1.5rem, env(safe-area-inset-right))
      max(2rem, env(safe-area-inset-bottom))
      max(1.5rem, env(safe-area-inset-left)) !important;
  }

  .footer__container {
    width: 100%;
    padding: 0 !important;
    margin: 0 0 2rem !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  .footer__links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 18rem);
    margin: 0;
    padding: 0;
    gap: 0.25rem 1.5rem !important;
  }

  .footer__links li,
  .footer__links a {
    min-width: 0;
  }

  .footer__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  .footer__logo {
    width: 100%;
    text-align: center;
  }

  .footer__bottom {
    width: 100%;
    margin: 0 !important;
    padding-top: 1.5rem !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    line-height: 1.65;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header > .header__logo,
  .header > .header__logo::before,
  .header > .header__logo img {
    transition: none !important;
  }

  .header > .header__logo:is(:hover, :focus-visible) {
    transform: none !important;
  }
}

/* The full desktop navigation needs a compact bridge immediately above the
   mobile breakpoint. Without it, 769–899px viewports inherit the wide 5rem
   desktop padding and push the last link beyond the viewport. */
@media (min-width: 769px) and (max-width: 899px) and (min-height: 601px) {
  .header,
  .header--scrolled {
    padding: 1.1rem 1.5rem !important;
  }

  .nav__links {
    gap: 1.15rem !important;
  }

  .nav__links li a {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* 2026-09 launch refinements: keep the navigation visually integrated with
   the hero instead of painting a separate black band. */
.header,
.header--scrolled {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* WebKit sizes ScrollTrigger's generated spacer from innerWidth (including
   its classic scrollbar). Constrain it to the document box to prevent a
   6px horizontal pan on macOS-style scrollbars. */
.pin-spacer-eventor-portfolio-deck,
.pin-spacer-eventor-portfolio-deck > #portfolio-stage {
  width: 100% !important;
  max-width: 100% !important;
}

/* NKolay's supplied artwork is intentionally dark. A targeted adjustment
   preserves every other partner's brand colours while making "Kolay" legible. */
#partners .partners-logo[src*="nkolay"] {
  opacity: 1 !important;
  filter: brightness(1.82) contrast(1.04) saturate(1.06) !important;
}

#partners .partners-logo[src*="nkolay"]:hover {
  filter: brightness(1.96) contrast(1.04) saturate(1.06) !important;
}

#partners .partners-title-mobile {
  display: none;
}

@media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {
  /* Reuse the mobile heading's editorial composition on desktop without
     carrying over the mobile logo panel, grid or card treatments. */
  #partners .partners-title-desktop {
    display: none !important;
  }

  #partners .partners-title-mobile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: #faf7f2;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.1rem, 4.8vw, 4.75rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.025em;
  }

  #partners .partners-title-mobile__plain,
  #partners .partners-title-mobile__accent {
    display: block;
    font-family: "Cormorant Garamond", serif !important;
    white-space: nowrap;
  }

  #partners .partners-title-mobile__plain {
    align-self: center;
    text-align: center;
  }

  #partners .partners-title-mobile__accent {
    margin-top: -0.03em;
    padding: 0.04em 0.22em 0.08em;
    color: #090909;
    background: #ff7417;
    transform: translate3d(-0.13em, 0, 0) rotate(-1.35deg);
    transform-origin: 52% 50%;
  }
}

@media (max-width: 768px),
  (max-width: 1024px) and (max-height: 600px) {
  /* Mobile intentionally has no menu control; keep desktop navigation intact. */
  .header {
    justify-content: flex-start !important;
  }

  .header .nav,
  .header .hamburger,
  .header .nav__links {
    display: none !important;
  }

  /* A single calm brand column is easier to scan on narrow touch screens. */
  #partners .partners__marquee-content:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2.75rem !important;
  }

  /* Mobile-only reference presentation: a lightweight branded frame with
     fixed logo stages. No blur or motion is used, keeping scroll repaints low. */
  #partners.partners {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  #partners .partners__mobile-panel {
    position: relative;
    width: min(100%, 25rem);
    margin-inline: auto;
    padding: 2.5rem 1.25rem 2.75rem;
    overflow: hidden;
    background: #14110f;
    border: 1px solid rgba(255, 116, 23, 0.72);
    border-top-width: 5px;
    border-radius: 2rem 2rem 0.9rem 0.9rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34);
  }

  #partners .partners__header {
    margin-bottom: 2.25rem !important;
  }

  #partners .partners-title-desktop {
    display: none !important;
  }

  #partners .partners-title-mobile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: #faf7f2;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.25rem, 11vw, 3rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.025em;
  }

  #partners .partners-title-mobile__plain,
  #partners .partners-title-mobile__accent {
    display: block;
    font-family: "Cormorant Garamond", serif !important;
    white-space: nowrap;
  }

  #partners .partners-title-mobile__plain {
    align-self: center;
    text-align: center;
  }

  #partners .partners-title-mobile__accent {
    margin-top: -0.03em;
    padding: 0.04em 0.22em 0.08em;
    color: #090909;
    background: #ff7417;
    transform: translate3d(-0.13em, 0, 0) rotate(-1.35deg);
    transform-origin: 52% 50%;
  }

  #partners .partners__marquee-content:first-child {
    gap: 1.15rem !important;
  }

  #partners .partners-logo,
  #partners .partners-logo.scale-2x,
  #partners .partners-logo.gorilla-logo,
  #partners .partners-logo[src*="nkolay"],
  #partners .partners-logo[src*="arcelik"] {
    box-sizing: border-box !important;
    width: min(100%, 16rem) !important;
    max-width: 16rem !important;
    height: 7.75rem !important;
    max-height: 7.75rem !important;
    padding: 1.15rem 1.75rem !important;
    background: #090909 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    mix-blend-mode: normal !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Touch devices must not leave a logo in a synthetic hover/active state.
     Keep each brand's intended static filter while removing all press feedback. */
  #partners .partners-logo:is(:hover, :active, :focus, :focus-visible),
  #partners .partners-logo.scale-2x:is(:hover, :active, :focus, :focus-visible),
  #partners .partners-logo.gorilla-logo:is(:hover, :active, :focus, :focus-visible) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  #partners .partners-logo.logo-invert:is(:hover, :active, :focus, :focus-visible) {
    filter: invert(1) hue-rotate(180deg) saturate(5) brightness(0.85)
      contrast(1.2) !important;
  }

  #partners .partners-logo[src*="nkolay"]:is(:hover, :active, :focus, :focus-visible) {
    filter: brightness(1.82) contrast(1.04) saturate(1.06) !important;
  }

  /* The Arçelik artwork uses a dark wordmark and an invert filter. Supplying
     a light pre-filter surface keeps the rendered logo stage dark like peers. */
  #partners .partners-logo[src*="arcelik"] {
    background: #ffffff !important;
  }

  /* The NKolay source has generous transparent space around the wordmark.
     Crop that intrinsic canvas inside its fixed stage instead of enlarging
     the stage itself, so the mobile reference column remains aligned. */
  #partners .partners-logo[src*="nkolay"] {
    padding: 1rem 2rem !important;
    object-fit: cover !important;
    object-position: 50% 53% !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  /* Lower the complete hero message as one unit without affecting landscape. */
  #hero .hero-content {
    padding-top: clamp(21.25rem, 48svh, 25rem) !important;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  #hero .hero-content {
    padding: clamp(7.75rem, 34svh, 9rem) 2rem 1rem !important;
    padding-left: max(2rem, env(safe-area-inset-left)) !important;
    padding-right: max(2rem, env(safe-area-inset-right)) !important;
  }

  #hero .hero-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: min(100%, 46rem) !important;
    gap: 0.12rem !important;
  }

  #hero .hero-line-1,
  #hero .hero-line-2 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #hero .hero-line-1 {
    font-size: clamp(1.8rem, 5vw, 2.65rem) !important;
  }

  #hero .hero-line-2 {
    font-size: clamp(1.55rem, 4.4vw, 2.25rem) !important;
  }

  #hero .hero-sub {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin-top: 0.9rem !important;
    font-size: clamp(0.56rem, 1.45vw, 0.7rem) !important;
    letter-spacing: 0.13em !important;
    white-space: nowrap !important;
  }

  #hero .hero-service-separator {
    display: inline-block !important;
    flex: 0 0 auto;
    margin: 0 0.75rem !important;
  }

  #hero .hero-cta {
    margin-top: 0.85rem !important;
  }

  /* The portrait cap made the case look undersized in phone landscape mode. */
  #about #eventorBag {
    width: min(46vw, 390px) !important;
    max-width: 390px !important;
    max-height: 76svh !important;
  }
}

@media (min-width: 769px) and (min-height: 601px), (min-width: 1025px) {
  #hero .hero-sub {
    align-self: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  /* Uppercase tracking leaves an invisible trailing gap on every label.
     Match it on the leading side so the visible service row is optically,
     not merely mathematically, centred. */
  #hero .hero-service {
    box-sizing: border-box;
    padding-inline-start: 0.3em;
  }

  #hero .hero-cta {
    align-self: center !important;
    width: max-content !important;
    margin-inline: auto !important;
    margin-top: 0 !important;
  }

  /* Letter-spacing contributes trailing inline space. Matching it with a
     text indent centers the visible glyphs, not the invisible final gap. */
  #hero .hero-cta > span:first-child {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-indent: 0;
    padding-inline-start: 0.4em;
  }
}

@media (min-width: 769px) and (min-height: 651px) {
  #hero .hero-content {
    transform: translate(-50%, calc(-50% - 0.5rem)) !important;
  }
}

/* A short desktop window needs its own vertical rhythm. This does not touch
   phones or regular-height desktop layouts. */
@media (min-width: 1025px) and (max-height: 650px) {
  #hero .hero-content {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: clamp(6.75rem, 21svh, 7.5rem) 2.5rem 1.25rem !important;
    box-sizing: border-box !important;
  }

  #hero .hero-line-1 {
    font-size: clamp(3.5rem, 10.5svh, 4.4rem) !important;
  }

  #hero .hero-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: min(100%, 68rem) !important;
    gap: 0.12rem !important;
  }

  #hero .hero-line-1,
  #hero .hero-line-2 {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #hero .hero-line-2 {
    margin-top: 0 !important;
    font-size: clamp(3rem, 9.4svh, 3.9rem) !important;
  }

  #hero .hero-sub {
    flex-wrap: nowrap !important;
    margin-top: 1.55rem !important;
    font-size: clamp(0.7rem, 1.35vw, 0.9rem) !important;
    letter-spacing: 0.22em !important;
    white-space: nowrap !important;
  }

  #hero .hero-service-separator {
    flex: 0 0 auto;
    margin-inline: 0.9rem !important;
  }

  #hero .hero-cta {
    margin-top: 0.8rem !important;
  }
}