/**
 * Projeler sayfası ve single project stilleri.
 * Profesyonel mimarlık portföy tasarımı.
 *
 * @package APY_Architecture
 */

/* Smooth scroll – projeler sayfası kategori linkleri */
html {
  scroll-behavior: smooth;
}

/* ============================================
   PROJELER SAYFASI (Yeni tasarım – hero yok)
   ============================================ */

/* Tam genişlik: layout footer (html body .apy-main !important) ile aynı özgüllük */
html body.apy-page-projects-full .apy-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.apy-page-projects-full .apy-main > .apy-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

html body.apy-page-projects-full .apy-main .apy-projects-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.apy-projects-page {
  padding-top: 40px;
  padding-bottom: var(--apy-space-section, 48px);
}

/* Projeler grid – tam genişlik görsel, alt sol metin, gradient (referans 2×2) */
.apy-projects-main {
  padding: 0;
}

.apy-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.apy-project-card {
  margin: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.apy-project-card-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  outline: none;
}

.apy-project-card-link:focus-visible {
  box-shadow: inset 0 0 0 3px var(--apy-primary, #8f7452);
  z-index: 1;
}

.apy-project-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #2a2a2a;
}

/* Okunabilirlik: alttan üste koyulaşan gradient */
.apy-project-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.74) 0%,
    rgba(0, 0, 0, 0.28) 42%,
    transparent 72%
  );
}

.apy-project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.apy-project-card-link:hover .apy-project-card-image img,
.apy-project-card-link:focus-visible .apy-project-card-image img {
  transform: scale(1.04);
}

.apy-project-card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(145deg, #3a3a3a 0%, #1f1f1f 100%);
}

/* Metin – görsel üzerinde sol alt */
.apy-project-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  pointer-events: none;
}

.apy-project-card-title {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.apy-project-card-meta {
  font-size: clamp(0.8rem, 1.35vw, 0.95rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .apy-project-card-image img {
    transition: none;
  }

  .apy-project-card-link:hover .apy-project-card-image img,
  .apy-project-card-link:focus-visible .apy-project-card-image img {
    transform: none;
  }
}

.apy-projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #8a8a8a;
  font-size: 1rem;
}

.apy-projects-empty p {
  margin: 0;
}

/* Eski hero (artık kullanılmıyor – single project için ayrı) */
.apy-projects-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a2229;
  padding: clamp(3rem, 8vw, 5rem) var(--apy-layout-inline-pad, 32px) clamp(11rem, 24vh, 15rem);
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

/* Arka plan görseli – görsel yoksa gradient fallback */
.apy-projects-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform-origin: center;
  will-change: transform;
  animation: apy-projects-hero-zoom 28s ease-in-out infinite;
}

@keyframes apy-projects-hero-zoom {
  0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); }
  50% { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

/* Görsel yoksa gradient animasyonu */
.apy-projects-hero:not(:has(.apy-projects-hero-bg)) {
  background: linear-gradient(160deg, #0f1419 0%, #1a1f26 50%, #252b33 100%);
  background-size: 200% 200%;
  animation: apy-projects-hero-gradient 10s ease infinite;
}

@keyframes apy-projects-hero-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Gradient overlay – metnin okunabilirliği */
.apy-projects-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

/* İçerik – full değil, contained, ortada */
.apy-projects-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  animation: apy-projects-hero-fade 0.8s ease-out;
}

@keyframes apy-projects-hero-fade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.apy-projects-hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75em;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.apy-projects-hero-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.apy-projects-hero-intro p:last-child {
  margin-bottom: 0;
}

/* Hero içi kategori kutuları */
.apy-projects-hero-cats-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 2;
  padding: 0 var(--apy-layout-inline-pad, 32px);
}

.apy-projects-hero-cats {
  width: 100%;
  max-width: var(--apy-main-content-max-width, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.apy-projects-hero-cat {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: clamp(1rem, 0.35vw + 0.9rem, 1.08rem);
  line-height: 1.25;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.48) 0%, rgba(15, 23, 42, 0.38) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  
  text-decoration: none;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.apy-projects-hero-cat:hover,
.apy-projects-hero-cat:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, rgba(31, 41, 55, 0.62) 0%, rgba(17, 24, 39, 0.56) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.apy-projects-hero-cat:focus-visible {
  outline: none;
}

/* Topbar – koyu tasarım, kategori scroll linkleri (görsel referansı) */
.apy-projects-topbar {
  background: #1a2229;
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.apy-projects-topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.apy-projects-topbar-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.apy-projects-topbar-link:hover,
.apy-projects-topbar-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* Son öğe – vurgulu kutu (Lymphedema Surgery benzeri) */
.apy-projects-topbar-link--highlight {

  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.apy-projects-topbar-link--highlight:hover,
.apy-projects-topbar-link--highlight:focus-visible {
  
  color: #fff;
}

/* Ana içerik */
.apy-projects-main {
  padding: var(--apy-space-section, 48px) 0;
}

/* Kategori bölümleri – scroll hedefi */
.apy-projects-section {
  scroll-margin-top: 4rem;
  margin-bottom: var(--apy-space-section, 48px);
}

.apy-projects-section:last-child {
  margin-bottom: 0;
}

.apy-projects-section-title {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-size: clamp(1.1rem, 0.35vw + 1rem, 1.3rem);
  font-weight: 600;
  color: #ffffff;
  margin: 2.2rem 0 1.3rem;
  letter-spacing: 0;
  line-height: 1.3;
  padding: 1.85rem 2.1rem;
  background: linear-gradient(90deg, #111827 0%, #1f2937 100%);
  border: 0;
  
  border-radius: 0;
  box-shadow: none;
  overflow-wrap: anywhere;
}

/* Grid ve kart stilleri – yeni tasarımla yukarıda tanımlandı, tekrar eden kurallar kaldırıldı */

/* ============================================
   SINGLE PROJE – Hero (~70vh, gradient, animasyon)
   ============================================ */

/*
 * Tek proje: main + hero bölümü kenardan kenara (arka plan full-bleed).
 * Başlık (.apy-project-hero-inner) ve içerik (.apy-project-overlap .apy-container)
 * layout gutter + max-width ile hizalanır (tema --apy-layout-inline-pad).
 */
body.post-type-project.single .apy-main,
body.single-project .apy-main,
body.apy-page-has-parallax .apy-main {
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}

body.post-type-project.single .apy-main .apy-project-hero,
body.post-type-project.single .apy-main .apy-project-overlap,
body.single-project .apy-main .apy-project-hero,
body.single-project .apy-main .apy-project-overlap,
body.apy-page-has-parallax .apy-main .apy-project-hero,
body.apy-page-has-parallax .apy-main .apy-project-overlap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

body.post-type-project.single .apy-main .apy-project-scroll-wrap,
body.single-project .apy-main .apy-project-scroll-wrap,
body.apy-page-has-parallax .apy-main .apy-project-scroll-wrap {
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero görseli tam genişlik; yan boşluk yalnızca safe-area */
body.post-type-project.single .apy-main .apy-project-hero,
body.single-project .apy-main .apy-project-hero,
body.apy-page-has-parallax .apy-main .apy-project-hero {
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
}

/* Breadcrumb + başlık: .apy-container.apy-project-hero-inner — layout padding */
body.post-type-project.single .apy-main .apy-project-hero-inner,
body.single-project .apy-main .apy-project-hero-inner,
body.apy-page-has-parallax .apy-main .apy-project-hero-inner {
  padding-left: max(var(--apy-layout-inline-pad, 32px), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--apy-layout-inline-pad, 32px), env(safe-area-inset-right, 0px)) !important;
  max-width: var(--apy-main-content-max-width-active, var(--apy-main-content-max-width, 1320px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center !important;
}

/* WPBakery içerik + proje nav: overlap içi container */
body.post-type-project.single .apy-main .apy-project-overlap .apy-container,
body.single-project .apy-main .apy-project-overlap .apy-container,
body.apy-page-has-parallax .apy-main .apy-project-overlap .apy-container {
  
  max-width: var(--apy-main-content-max-width-active, var(--apy-main-content-max-width, 1320px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

.apy-project-hero {
  position: relative;
  height: 70vh;
  min-height: 70vh;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background-color: #1a2229;
  padding: clamp(2rem, 5vw, 4rem) var(--apy-layout-inline-pad, 32px);
  /* Tam genişlik: content.css’te .apy-main .apy-project-hero — 100vw yok (scrollbar/pin titremesi) */
  overflow: hidden;
  box-sizing: border-box;
  will-change: transform;
}

/* Arka plan görseli – hafif zoom animasyonu */
.apy-project-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: apy-hero-bg-zoom 18s ease-in-out infinite;
}

@keyframes apy-hero-bg-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Gradient overlay – daha açık tonlar (görselin üzerinde) */
.apy-project-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(28, 35, 43, 0.88) 0%,
    rgba(38, 46, 56, 0.82) 25%,
    rgba(48, 58, 70, 0.76) 50%,
    rgba(35, 43, 52, 0.84) 75%,
    rgba(28, 35, 43, 0.88) 100%
  );
  background-size: 400% 400%;
  animation: apy-hero-gradient 12s ease infinite;
  z-index: 1;
}

.apy-project-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #10172a 20%, rgba(0, 0, 0, 0.25) 50%, transparent 100%);
  z-index: 1;
}

@keyframes apy-hero-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* İçerik fade-in */
.apy-project-hero-inner {
  animation: apy-hero-fade-in 0.8s ease-out;
}

@keyframes apy-hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apy-project-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--apy-main-content-max-width, 1320px);
  margin: 0 auto;
  padding: 0 var(--apy-layout-inline-pad, 32px);
  text-align: center;
}

/* Breadcrumb – ortada: Ana Sayfa / Projeler / Proje adı */
.apy-project-hero-breadcrumb {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--apy-primary, #8f7452);
  margin-bottom: 0.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.apy-project-hero-breadcrumb a {
  color: var(--apy-primary, #8f7452);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.apy-project-hero-breadcrumb a:hover,
.apy-project-hero-breadcrumb a:focus-visible {
  color: var(--apy-primary-hover, #b89a6d);
  opacity: 0.9;
}

.apy-project-hero-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.apy-project-hero-breadcrumb-current {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* Eski sınıf uyumluluğu */
.apy-project-hero-types {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--apy-primary, #8f7452);
  margin-bottom: 0.5em;
}

.apy-project-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25em;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.apy-project-hero-year,
.apy-project-hero-meta {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.apy-project-hero-meta-sep {
  opacity: 0.7;
}

/* ============================================
   HOK tarzı: Hero sabit pin, full-width içerik üzerine kayar
   ============================================ */
.apy-project-scroll-wrap {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  /* Yatay kaydırma / rubber-band ile yan flaşları azalt */
  touch-action: pan-y pinch-zoom;
  max-width: 100%;
}

.apy-project-overlap {
  position: relative;
  z-index: 2;
  margin-top: -70vh;
  background: #fff;
  padding-bottom: 0;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
  overflow: visible;
  box-sizing: border-box;
}

/* WPBakery içerik alanı */
.apy-project-content {
  padding-top: 0;
  min-width: 0;
}

/* VC dışı düz bloklar (klasik editör / ham HTML) */
body.post-type-project.single .apy-project-content,
body.single-project .apy-project-content,
body.apy-page-has-parallax .apy-project-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body.post-type-project.single .apy-project-content > *:not(.vc_row):not(.vc_section):not(.wpb-content-wrapper),
body.single-project .apy-project-content > *:not(.vc_row):not(.vc_section):not(.wpb-content-wrapper),
body.apy-page-has-parallax .apy-project-content > *:not(.vc_row):not(.vc_section):not(.wpb-content-wrapper) {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: max(var(--apy-layout-inline-pad, 32px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--apy-layout-inline-pad, 32px), env(safe-area-inset-right, 0px));
}

.apy-project-content .vc_row,
.apy-project-content .vc_section {
  margin-left: 0;
  margin-right: 0;
}

/*
 * Liste / hero intro: kolon yatay padding kapalı (grid kendi hizasını kullanır).
 * Tek proje (.apy-project-content) burada YOK — sıfırlama metni kenara yapıştırıyordu;
 * gutter için functions.php içindeki proje VC kuralları + aşağıdaki tipografi yedeği.
 */
.apy-projects-hero-intro .vc_column_container > .vc_column-inner,
.apy-projects-main .vc_column_container > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Single proje altı – prev/next proje kartları */
.apy-project-nav {
  margin-top: clamp(2.4rem, 4.4vw, 4rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.apy-project-nav-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.35rem);
  font-weight: 600;
  color: var(--apy-text, #1d1d1b);
  letter-spacing: -0.01em;
  padding-left: 1.05rem;
}

.apy-project-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.apy-project-nav-card {
  margin: 0;
}

.apy-project-nav-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.apy-project-nav-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #0f172a;
}

@media (min-width: 1500px) {
  .apy-project-nav-media {
    aspect-ratio: 21 / 8;
  }
}

.apy-project-nav-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.4s ease;
}

.apy-project-nav-link:hover .apy-project-nav-img,
.apy-project-nav-link:focus-visible .apy-project-nav-img {
  transform: scale(1.05);
}

.apy-project-nav-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2229 0%, #2e3742 100%);
}

.apy-project-nav-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 17, 0.78) 8%, rgba(6, 10, 17, 0.26) 52%, rgba(6, 10, 17, 0.08) 100%);
}

.apy-project-nav-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.apy-project-nav-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--apy-primary, #8f7452);
}

.apy-project-nav-name {
  margin: 0;
  font-size: clamp(1rem, 0.25vw + 0.95rem, 1.18rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.apy-project-nav-category {
  display: block;
  min-height: 1.25em;
  font-size: 0.8rem;
  color: rgba(226, 226, 226, 0.8);
  line-height: 1.25;
}

.apy-project-nav-category.is-empty {
  visibility: hidden;
}

.apy-project-nav-btn {
  margin-top: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.apy-project-nav-btn-arrow {
  font-size: 1em;
  line-height: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1100px) {
  .apy-header-projects-bar .apy-projects-filters-inner {
    gap: 0.5rem 0.75rem;
  }

  .apy-header-projects-bar .apy-projects-sort {
    margin-left: 0;
    width: 100%;
  }

  body.apy-has-projects-bar .apy-main {

  }

  .apy-projects-hero-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .apy-project-nav-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* Mobil full-width: projeler listesi hero — single proje .apy-project-hero 100vw kullanmaz */
  .apy-projects-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
    padding-left: max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-right, 0px));
  }

  .apy-projects-main {
    padding: var(--apy-space-section-mobile, 32px) 0;
  }

  .apy-projects-section-title {
    margin: 1.7rem 0 1.05rem;
    font-size: 1.06rem;
    padding: 0.72rem 0.9rem;
    border-left-width: 3px;
  }

  .apy-projects-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .apy-projects-page {
    padding-top: 0px;
    padding-bottom: var(--apy-space-section-mobile, 32px);
  }

  body.apy-has-projects-bar .apy-main {
    
  }

  /* Mobil: Filtreler butonu görünür, dropdown kapalı */
  .apy-projects-filters-toggle {
    display: flex;
  }

  .apy-projects-filters-dropdown {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: 1rem;
    gap: 0.75rem;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 0.75rem;
  }

  .apy-projects-filters-dropdown.is-open {
    display: flex;
  }

  .apy-header-projects-bar .apy-projects-filters-inner {
    flex-wrap: wrap;
  }

  .apy-header-projects-bar .apy-projects-filters-inner .apy-projects-search {
    flex: 1;
    min-width: 0;
  }

  .apy-projects-filters-inner .apy-projects-select {
    width: 100%;
  }

  .apy-header-projects-bar .apy-projects-sort {
    width: 100%;
  }

  /* Mobil: Pin yok; negatif margin vh ile adres çubuğu oynaması azaltıldı */
  .apy-project-overlap {
    margin-top: max(-30svh, -9rem);
    
  }

  /*
   * Tek proje: overlap (z-index:2) negatif margin ile hero başlığının üstünü kapıyordu.
   * Mobilde margin sıfır — .apy-project-hero-inner görünür kalır.
   */
  body.post-type-project.single .apy-project-overlap,
  body.single-project .apy-project-overlap,
  body.apy-page-has-parallax .apy-project-overlap {
    margin-top: 0 !important;
  }

  /* Projeler hero – mobil */
  .apy-projects-hero {
    min-height: 70svh;
    min-height: 70dvh;
    padding: max(2.5rem, env(safe-area-inset-top)) max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-right)) max(8.25rem, env(safe-area-inset-bottom)) max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-left));
  }

  .apy-projects-hero-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .apy-projects-hero-cats-wrap {
    bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-right, 0px));
  }

  .apy-projects-hero-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .apy-projects-hero-cat {
    min-height: 62px;
    font-size: 0.97rem;
    padding: 0.72rem 0.82rem;
  }

  .apy-projects-hero-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.25;
    word-break: break-word;
  }

  .apy-projects-hero-intro {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Single proje hero – mobil: ~70vh; dinamik viewport (iOS) */
  .apy-project-hero {
    height: auto;
    max-height: none;
    min-height: 70svh;
    min-height: 70dvh;
    will-change: auto;
    padding: max(2rem, env(safe-area-inset-top)) max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(var(--apy-layout-inline-pad, 24px), env(safe-area-inset-left));
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .apy-project-hero-inner {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  body.post-type-project.single .apy-main .apy-project-hero-breadcrumb,
  body.single-project .apy-main .apy-project-hero-breadcrumb,
  body.apy-page-has-parallax .apy-main .apy-project-hero-breadcrumb {
    justify-content: center;
  }

  .apy-project-hero-breadcrumb {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.5em;
    gap: 0.25em;
    flex-wrap: wrap;
    word-break: break-word;
  }

  .apy-project-hero-breadcrumb-current {
    max-width: 100%;
  }

  .apy-project-hero-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.25;
    word-break: break-word;
  }

  .apy-project-hero-year {
    font-size: 0.875rem;
  }

  .apy-project-nav {
    margin-top: 2rem;
    padding-top: 1rem;
  }

  .apy-project-nav-title {
    margin-bottom: 0.9rem;
    padding-left: 0.9rem;
  }

  .apy-project-nav-content {
    padding: 0.82rem 0.9rem;
  }

  .apy-project-nav-kicker {
    font-size: 0.64rem;
  }

  .apy-project-nav-name {
    font-size: 0.98rem;
  }

  .apy-project-nav-category {
    font-size: 0.72rem;
  }

  /* Mobilde arka plan animasyonları kapat – scroll/jank ve yatay repaint azalır */
  .apy-project-hero-bg {
    animation: none;
    transform: none;
  }

  .apy-project-hero::before {
    animation: none;
    background-size: 100% 100%;
  }

  /* WPBakery / geniş satırlar taşmasın */
  .apy-project-overlap .apy-container {
    max-width: 100%;
    overflow-x: hidden;
    min-width: 0;
  }

  .apy-project-content {
    overflow-x: hidden;
    max-width: 100%;
  }

  .apy-project-content img,
  .apy-project-content video {
    max-width: 100%;
    height: auto;
  }

  .apy-project-content iframe {
    max-width: 100%;
  }

  .apy-project-content .vc_row,
  .apy-project-content .vc_section {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .apy-projects-hero {
    min-height: 65svh;
    min-height: 65dvh;
    padding: max(2rem, env(safe-area-inset-top)) max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-left)) max(6.8rem, env(safe-area-inset-bottom)) max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-right));
  }

  .apy-projects-hero-title {
    font-size: 1.35rem;
  }

  .apy-projects-hero-cats-wrap {
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    padding-left: max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-right, 0px));
  }

  .apy-projects-hero-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
  }

  .apy-projects-hero-cat {
    min-height: 54px;
    font-size: 0.93rem;
    padding: 0.62rem 0.75rem;
  }

  .apy-projects-section-title {
    margin: 1.55rem 0 1rem;
    font-size: 0.96rem;
    padding: 1.64rem 1.78rem;
  }

  .apy-project-hero {
    min-height: 70svh;
    min-height: 70dvh;
    padding: max(1.75rem, env(safe-area-inset-top)) max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--apy-layout-inline-pad, 20px), env(safe-area-inset-right));
  }

  .apy-project-overlap {
    margin-top: max(-26svh, -7.5rem);
  }

  body.post-type-project.single .apy-project-overlap,
  body.single-project .apy-project-overlap,
  body.apy-page-has-parallax .apy-project-overlap {
    margin-top: 0 !important;
  }

  .apy-project-hero-title {
    font-size: 2.25rem;
  }

  .apy-project-hero-breadcrumb {
    font-size: 0.6rem;
  }
}