/* =======================================================================
   TALS — Projects (Refactor-Minimal, Structure-Preserving)
   - Web (≥1024): TRI3 → [sol küçük+desc] [orta 9/16] [sağ featured]
   - Diğer layout’lar (single/two/split) etkilenmez
   - Mobil / Tablet (≤1023.98): yalnız featured için 60/40 kart modu
   ======================================================================= */

/* ------------------------- Değişkenler ------------------------- */
/* Projects bölüm varsayılanları (bölüm kapsamına indirildi) */
#projects {
  --prj-gap: 18px;
  --prj-pad: 24px;
  --prj-card-bg: #141418;
  --prj-card-border: rgb(0 0 0 / 12%);
  --prj-card-title-font:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  --prj-card-desc-font:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  /* surface’i viewport bg’ye bağla (zaten vardı) */
  --prj-viewport-bg: var(--section-bg, transparent);
  --prj-surface-web: var(--prj-viewport-bg, var(--section-bg, transparent));
  --prj-surface-mobile: #fff; /* mobil kart zemini: istersen customizer ile override et */

  /* YENİ: web’te kartların tepe boşluğu (header/footer konumuna göre değişecek) */
  --prj-inner-top: 0px;
}

/* ------------------------- Kök / Viewport ---------------------- */
#projects {
  position: relative;
}
#projects .tals-prj__inner {
  position: relative;
  z-index: 1;
}
#projects .tals-prj__viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Viewport zemini: base.css → --prj-viewport-bg  → yoksa --section-bg */
  background: var(--prj-viewport-bg, var(--section-bg, transparent)) !important;
}
#projects .tals-prj__viewport::before,
#projects .tals-prj__viewport::after {
  background: transparent !important;
}

#projects {
  background: var(--prj-viewport-bg, transparent);
}

.prj-card {
  border: 1px solid var(--prj-card-border, rgb(0 0 0 / 1%));
  box-shadow: 0 0 0 1px var(--prj-card-border, rgb(0 0 0 / 12%)) inset;
}

#projects.tals-prj {
  position: relative;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Inter,
    Helvetica,
    Arial;
}

#tals-prj-sections {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* YENİ */
#tals-prj-sections > .tals-prj__section {
  flex: 0 0 100%;
  height: 100%;
  box-sizing: border-box;
}
.tals-prj__section {
  display: grid;
  box-sizing: border-box;
}

/* ------------------------- İç Grid / Layout -------------------- */
.tals-prj__inner {
  height: 100%;
  min-height: 0;
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  box-sizing: border-box;
  gap: var(--prj-gap);
  /* padding: var(--prj-pad); */
  background: transparent; /* GENELDE ŞEFFAF; TRI3(web) boyar */
}
.tals-prj--single1 {
  grid-template-columns: 1fr;
}
.tals-prj--two2 {
  grid-template-columns: 1fr 1fr;
}
.tals-prj--split2 {
  grid-template-columns: 1.2fr 0.8fr;
}
.tals-prj--tri3 {
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 'big smallA' 'big smallB';
}
.tals-prj--tri3 .tals-prj__big {
  grid-area: big;
}
.tals-prj--tri3 .tals-prj__a {
  grid-area: smallA;
}
.tals-prj--tri3 .tals-prj__b {
  grid-area: smallB;
}

/* ------------------------- Tile / Görsel / Meta ---------------- */
.tals-prj__tile,
.tals-prj__split,
.tals-prj__single {
  position: relative;
  /* border-radius: 16px; */
  overflow: hidden;
  background: var(--prj-card-bg, #141418);
  border: 1px solid var(--prj-card-border, rgb(0 0 0 / 12%));
  height: 100%;
  min-height: 0;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--prj-card-bg, #141418) inset;
}
.tals-prj__img {
  position: absolute;
  inset: 0;
  background: #000 50% 50% / cover no-repeat;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.02);
  will-change: transform;
}
.tals-prj__img.fit-contain {
  background-size: contain;
  background-position: center;
}
.tals-prj__img.fit-contain-mobile {
  background-size: contain;
}

.tals-prj__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}
.tals-prj__meta {
  position: absolute;
  left: var(--prj-meta-left, 18px);
  bottom: var(--prj-meta-bottom, 18px);
  right: auto;
  max-width: min(var(--prj-meta-maxw, 80%), calc(100% - 40px));
  max-height: 48%;
  padding: var(--prj-meta-padding, 16px 18px);
  margin: 20px;
  color: var(--prj-text);
  background: var(--prj-meta-bg, rgba(0, 0, 0, 0.55));
  border: 1px solid var(--prj-meta-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--prj-meta-radius, 14px);
  -webkit-backdrop-filter: blur(var(--prj-meta-blur, 6px));
  backdrop-filter: blur(var(--prj-meta-blur, 6px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tals-prj__meta::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tals-prj__title {
  margin: 0 0 6px;
  font-family: var(--prj-card-title-font);
  font-size: var(--prj-card-title-size, clamp(18px, 2.2vw, 28px));
  color: var(--prj-meta-title-color, var(--prj-card-title-color, #fff));
}

.tals-prj__desc {
  margin: 0;
  font-family: var(--prj-card-desc-font);
  font-size: var(--prj-card-desc-size, clamp(14px, 1.4vw, 16px));
  line-height: 1.55;
  color: var(--prj-meta-desc-color, var(--prj-card-desc-color, rgba(255, 255, 255, 0.92)));
}

/* ------------------------- Üst Başlık (varsayılan) ------------- */
/* Mobil/Tablet’te gizli; web’te açılır */
#projects .tals-prj__head {
  display: none;
}

/* =======================================================================
   MOBİL / TABLET (≤1023.98) — 60/40 Kart Modu (yalnız featured)
   ======================================================================= */
@media (max-width: 1023.98px) {
  #projects.mobile-card-mode .tals-prj__section {
    min-height: var(--app-hf); /* [GÜNCEL] */
    padding: 0;
    background: var(--prj-surface-mobile);
  }
  #projects.mobile-card-mode .tals-prj__inner {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }

  /* Kart kutusu */
  #projects.mobile-card-mode .tals-prj__tile.m-card {
    width: 100vw;
    height: var(--app-hf);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
  }

  /* %60 Görsel */
  #projects.mobile-card-mode .m-card__media {
    position: relative;
    flex: 0 0 60%;
  }
  #projects.mobile-card-mode .m-card__media .tals-prj__img {
    position: absolute;
    inset: 0;
    background: #000 50% 50% / cover no-repeat;
  }
  #projects.mobile-card-mode .m-card__media .tals-prj__img.fit-contain-mobile {
    background-size: contain;
    background-color: #f5f5f5;
  }

  /* %40 Bilgi */
  #projects.mobile-card-mode .m-card__info {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 12px);
    padding: clamp(14px, 4vw, 20px);
    background: var(--prj-surface-mobile, #fff);
    color: var(--prj-text-dark, #0b0b0d);
    text-align: center;
    overflow: hidden;
  }
  #projects.mobile-card-mode .m-card__head {
    font-family: var(--prj-card-title-font);
    font-weight: 700;
    font-size: var(--prj-card-title-size, clamp(18px, 5vw, 22px));
    line-height: 1.25;
    color: var(--prj-card-title-color, #000);
    margin: 0;
  }
  #projects.mobile-card-mode .m-card__body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--prj-card-desc-font);
    font-size: var(--prj-card-desc-size, clamp(14px, 3.8vw, 16px));
    line-height: 1.6;
    color: var(--prj-card-desc-color, #000);
  }

  /* Orijinal overlay/metayı sadece kartlaştırılan öğede kapat */
  #projects.mobile-card-mode .m-card .tals-prj__meta,
  #projects.mobile-card-mode .m-card .tals-prj__shade {
    display: none !important;
  }

  /* Sekonder görseller JS ile gizlenir; güvenlik için */
  #projects.mobile-card-mode [data-mobile-hidden='1'] {
    display: none !important;
  }

  /* Custom-double: mobilde iki kart alt alta */
  #projects .tals-prj__inner.custom-double.mobile-stack-double {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      'top'
      'bottom';
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--prj-mobile-double-gap-top, clamp(12px, 3.2vw, 16px)) !important;
    column-gap: 0 !important;
    padding: 0 !important;
    height: var(--app-hf);
    align-content: stretch;
    background: var(--prj-surface-mobile, #fff);
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .right-big {
    grid-area: top;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small {
    grid-area: bottom;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small,
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .right-big {
    min-height: 0;
    height: 100%;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
  }

  #projects .tals-prj__inner.tals-prj--single1 .single-about {
    height: var(--app-hf);
    border: 0;
    border-radius: 0;
  }
  #projects .tals-prj__inner.tals-prj--single1 .single-about .tals-prj__meta {
    display: block !important;
    position: absolute;
    left: calc(var(--prj-mobile-title-left, 18px) + env(safe-area-inset-left, 0px));
    right: 16px;
    bottom: calc(var(--prj-mobile-title-bottom, 84px) + env(safe-area-inset-bottom, 0px));
    max-width: min(78vw, 520px);
    max-height: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    overflow: visible;
  }
  #projects .tals-prj__inner.tals-prj--single1 .single-about .tals-prj__title {
    margin: 0;
    color: var(--prj-mobile-title-color, #fff);
    font-size: var(--prj-mobile-title-size, 24px);
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
  #projects .tals-prj__inner.tals-prj--single1 .single-about .tals-prj__desc {
    display: none;
  }

  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small .tals-prj__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small .tals-prj__shade {
    display: block !important;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small .tals-prj__meta {
    display: block !important;
    position: absolute;
    left: calc(var(--prj-mobile-double-meta-left, 18px) + env(safe-area-inset-left, 0px));
    right: 16px;
    bottom: calc(var(--prj-mobile-double-meta-bottom, 18px) + env(safe-area-inset-bottom, 0px));
    max-width: min(78vw, 90%);
    max-height: 70%;
    margin: 0;
    padding: var(--prj-mobile-double-meta-padding, 12px 14px);
    background: var(--prj-mobile-double-meta-bg, rgba(0, 0, 0, 0.35));
    border: 0;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(var(--prj-mobile-double-meta-blur, 6px));
    backdrop-filter: blur(var(--prj-mobile-double-meta-blur, 6px));
    overflow: auto;
    color: #fff;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small .tals-prj__title {
    margin: 0 0 4px;
    font-size: var(--prj-mobile-double-title-size, clamp(18px, 5vw, 22px));
    color: var(--prj-mobile-double-title-color, #fff) !important;
  }
  #projects .tals-prj__inner.custom-double.mobile-stack-double > .left-small .tals-prj__desc {
    display: block;
    margin: 0;
    font-size: var(--prj-mobile-double-desc-size, clamp(14px, 3.8vw, 16px));
    line-height: 1.5;
    color: var(--prj-mobile-double-desc-color, rgba(255, 255, 255, 0.92)) !important;
  }
}

@media (max-width: 1023.98px) {
  /* Mobil proje başlığı: sol alt */
  #projects .prj-mobile-info {
    position: fixed;
    left: calc(var(--prj-mobile-title-left, 18px) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--prj-mobile-title-bottom, 84px) + env(safe-area-inset-bottom, 0px));
    z-index: 2147482500;
    pointer-events: none;
    max-width: min(78vw, 520px);
    color: var(--prj-mobile-title-color, #fff);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
  #projects .prj-mobile-info h2 {
    margin: 0;
    font-family: var(--prj-card-title-font);
    font-size: var(--prj-mobile-title-size, 24px);
    line-height: 1.2;
    font-weight: 700;
  }
  #projects .prj-mobile-info p {
    display: none;
  }
  #projects.is-mobile-double-active .prj-mobile-info {
    display: none !important;
  }
}

/* ------------------------- Video (opsiyonel) ------------------- */
#projects .tals-prj__video {
  position: absolute;
  inset: 0;
  background: #000;
}
#projects .tals-prj__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------- Çipler (opsiyonel) ------------------ */
.tals-chips {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.tals-chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--prj-card-bg-light);
  border: 1px solid var(--prj-card-b-light);
  font:
    600 11px/1.1 ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto;
  color: #222;
  text-transform: uppercase;
}

/* ================================
   DESKTOP (≥1024px) — TRI3 ve Genel
   ================================ */
@media (min-width: 1024px) {
  /* Başlık görünür; ofset section’dan verilir (kayma engellenir) */
  #projects {
    --prj-head-top: clamp(12px, 4vh, 24px);
    --prj-head-h: clamp(40px, 3.2vw, 56px);
    --prj-head-gap: clamp(8px, 1.2vw, 16px);
    --prj-pager-safe: var(--footer-safe); /* [GÜNCEL] eskisi: 28px */
  }

  /* Her section sabit üst offset alır (tüm projeler hizalı) */
  #projects .tals-prj__section {
    position: relative;
    margin: 0; /* olası dış boşlukları sıfırla */
    padding-top: var(--prj-head-top);
  }

  /* Üst şerit proje adı (chip) */
  #projects .tals-prj__head {
    display: block !important;
    position: absolute;
    z-index: 10;
    pointer-events: none;
    top: 0; /* ofset section padding-top ile verildi */
    left: clamp(24px, 6vw, 80px);
  }
  #projects .tals-prj__head .prj-head__title {
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    font:
      900 clamp(18px, 2.4vw, 32px) / 1.1 ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Inter,
      Helvetica,
      Arial;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    pointer-events: auto;
  }

  /* TRI3 — üç sütun düzen ve yerleşimler */
  #projects .tals-prj__inner.tals-prj--tri3 {
    background: var(--prj-surface-web, var(--prj-viewport-bg, var(--section-bg, transparent)));
    display: grid;
    grid-template-columns:
      clamp(220px, 22vw, 320px) clamp(260px, 26vw, 420px)
      1fr;
    grid-template-areas: 'smallA tall big';
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    padding-left: clamp(24px, 6vw, 80px);
    padding-right: clamp(24px, 6vw, 80px);
    height: 100%;
  }
  #projects .tals-prj--tri3 .tals-prj__a {
    grid-area: smallA;
    align-self: stretch;
  }
  #projects .tals-prj--tri3 .tals-prj__b {
    grid-area: tall;
    position: relative;
    align-self: stretch;
  }
  #projects .tals-prj--tri3 .tals-prj__big {
    grid-area: big;
    position: relative;
    align-self: stretch;
  }

  /* Orta sütun (image3): 9/16 görünüm, full kapla */
  #projects .tals-prj--tri3 .tals-prj__b .tals-prj__img {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    transform: none;
  }
  #projects .tals-prj--tri3 .tals-prj__b .tals-prj__shade,
  #projects .tals-prj--tri3 .tals-prj__b .tals-prj__meta {
    display: none;
  }

  /* Sağ büyük (featured): full-bleed + rozet */
  #projects .tals-prj--tri3 .tals-prj__big .tals-prj__img {
    position: absolute;
    inset: 0;
  }
  #projects .tals-prj--tri3 .tals-prj__big .tals-prj__badge {
    position: absolute;
    left: var(--prj-web-title-left, clamp(12px, 2.5vw, 24px));
    right: auto;
    bottom: var(--prj-web-title-bottom, clamp(12px, 2.5vw, 24px));
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--prj-web-title-color, #111);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(
      --prj-web-title-font,
      ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Inter,
      Helvetica,
      Arial
    );
    font-size: var(--prj-web-title-size, 14px);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }

  /* Sol küçük — CARD varyantı (web’te başlık gizli, desc görünür) */
  #projects .tals-prj--tri3 .tals-prj__a.is-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    display: block;
    align-self: stretch;
  }
  #projects .tals-prj--tri3 .tals-prj__a.is-card .prj-card {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px; /* img + desc */
    background: var(--prj-card-bg, #fff);
    border: 1px solid var(--prj-card-border, rgba(0, 0, 0, 0.06));
    border-radius: var(--prj-card-radius, 16px);
    padding: var(--prj-card-pad, clamp(14px, 2vw, 18px));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  }
  #projects .tals-prj--tri3 .tals-prj__a.is-card .prj-card__img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: 12px;
    background-position: center;
    background-size: cover;
    transform: none;
    display: block;
  }
  #projects .tals-prj--tri3 .tals-prj__a.is-card .prj-card__title {
    display: none;
  }
  #projects .tals-prj--tri3 .tals-prj__a.is-card .prj-card__desc {
    margin: 0;
    color: var(--prj-card-desc-color, var(--prj-text-dark));
    font-family: var(--prj-card-desc-font);
    font-size: var(--prj-card-desc-size, clamp(14px, 1.4vw, 16px));
    font-weight: var(--prj-card-desc-weight, 400);
    line-height: 1.6;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #projects .tals-prj--tri3 .tals-prj__a.is-card .tals-prj__shade,
  #projects .tals-prj--tri3 .tals-prj__a.is-card .tals-prj__meta {
    display: none !important;
  }
}

/* ===================================================================
   PROJECTS — Mobile / Tablet (≤1023.98px) "Hero-benzeri" skin
   - img3 tam ekran arka plan
   - Sol altta "İncele" butonu (hero’daki Daha ile aynı cam/joystick)
   - Modal: slider + oklar + altta başlık/özet (100 char)
   =================================================================== */
@media (max-width: 1023.98px) {
  /* HERO ile aynı alt hiza (global aşağı ok ile eşit) */
  :root {
    --cta-bottom: calc(var(--footer-safe) + 18px); /* [GÜNCEL] */
  }
  #projects.mobile-hero-mode {
    --cta-bottom: calc(var(--footer-safe) + 18px); /* [GÜNCEL] */
  }

  /* "Hero-benzeri" mod aktifken mevcut kart içeriklerini görünmez yap */
  #projects.mobile-hero-mode .tals-prj__inner,
  #projects.mobile-hero-mode .tals-prj__tile,
  #projects.mobile-hero-mode .tals-prj__split,
  #projects.mobile-hero-mode .tals-prj__meta,
  #projects.mobile-hero-mode .tals-prj__shade {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Her section tam viewport — footer yüksekliğini hesaba katıyoruz */
  #projects.mobile-hero-mode #tals-prj-sections {
    height: var(--app-h) !important; /* [GÜNCEL] eskisi: 100dvh */
  }
  #projects.mobile-hero-mode #tals-prj-sections > .tals-prj__section {
    position: relative !important;
    min-height: var(--app-hf) !important; /* [GÜNCEL] */
    height: var(--app-hf) !important; /* [GÜNCEL] */
    overflow: hidden !important;
  }

  /* IMG3 full-bleed arka plan */
  #projects.mobile-hero-mode .prj-hero-bg {
    position: absolute;
    inset: 0;
    background: #000 50% 50% / cover no-repeat;
    z-index: 0;
  }

  /* Sağdaki global "aşağı/sonraki" ok → aynı ALT HİZA */
  :is(.sec-next, .section-next, .section-nav-next, .global-next, .section-nav .next) {
    position: fixed !important; /* zaten sabitse etkilemez */
    right: clamp(24px, 4vw, 64px) !important;
    bottom: var(--cta-bottom) !important;
    z-index: 9999 !important;
    inline-size: auto;
    block-size: auto;
    touch-action: manipulation;
  }
  :is(.sec-next, .section-next, .section-nav-next, .global-next, .section-nav .next) svg {
    width: clamp(26px, 5.2vw, 36px) !important;
    height: clamp(26px, 5.2vw, 36px) !important;
  }
}

/* =======================
   PROJECTS — Modal (mobil)
   ======================= */
@media (max-width: 1023.98px) {
  .prj-modal[hidden] {
    display: none !important;
  }
  .prj-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.76);
    overflow-x: hidden;
  }
  .prj-modal .prjm__dialog {
    position: relative;
    width: min(
      1100px,
      calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px)
    );
    max-width: 100%;
    max-height: min(88svh, 720px);
    display: grid;
    grid-template-rows: auto auto; /* viewport + meta */
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  }
  .prj-modal .prjm__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
  }
  .prj-modal .prjm__frame {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }
  .prj-modal .prjm__frame > img,
  .prj-modal .prjm__frame > video,
  .prj-modal .prjm__frame > iframe {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    display: block;
    background: #000;
  }

  /* Oklar */
  .prj-modal .prjm__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    user-select: none;
  }
  .prj-modal .prjm__prev {
    left: 10px;
  }
  .prj-modal .prjm__next {
    right: 10px;
  }

  /* Kapat */
  .prj-modal .prjm__close {
    position: absolute;
    top: clamp(10px, 3vw, 14px);
    right: clamp(10px, 3vw, 14px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
  }
  .prj-modal .prjm__close svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* Meta (altta başlık + kısaltılmış açıklama) */
  .prj-modal .prjm__meta {
    padding: 12px 14px;
    background: rgba(10, 10, 12, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    backdrop-filter: blur(6px);
    min-width: 0;
    overflow-x: hidden;
  }
  .prj-modal .prjm__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    margin-top: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prj-modal .prjm__thumbs::-webkit-scrollbar {
    display: none;
  }
  .prj-modal .prjm__thumb {
    position: relative;
    flex: 0 0 var(--prj-modal-thumb-size, 84px);
    width: var(--prj-modal-thumb-size, 84px);
    aspect-ratio: 1;
    border-radius: calc(var(--prj-modal-radius, 16px) * 0.5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #111;
    cursor: pointer;
    padding: 0;
  }
  .prj-modal .prjm__thumb.is-active {
    outline: 2px solid rgba(255, 255, 255, 0.78);
    outline-offset: 2px;
  }
  .prj-modal .prjm__thumb img,
  .prj-modal .prjm__thumb .prjm__thumb-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .prj-modal .prjm__thumb .prjm__thumb-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #232329, #0f1014);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .prj-modal .prjm__title {
    margin: 0 0 6px;
    font:
      800 clamp(16px, 4.6vw, 20px) / 1.2 system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial;
  }
  .prj-modal .prjm__excerpt {
    margin: 0;
    font:
      500 13px/1.6 system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial;
    opacity: 0.95;
    overflow-wrap: anywhere;
  }
  .prj-modal .prjm__share {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .prj-modal .prjm__share-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font:
      700 12px/1 system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Arial;
    letter-spacing: 0.03em;
    cursor: pointer;
  }
}

@media (max-width: 1023.98px) {
  .prj-modal .prjm__dialog {
    border-radius: var(--prj-modal-radius, 16px);
    background: var(--prj-modal-surface, #000);
    border-color: var(--prj-modal-border, rgba(255, 255, 255, 0.18));
  }
  .prj-modal .prjm__title {
    color: var(--prj-modal-title-color, #fff);
  }
  .prj-modal .prjm__excerpt {
    color: var(--prj-modal-text-color, #fff);
  }
  .prj-modal .prjm__meta {
    color: var(--prj-modal-text-color, #fff);
  }
}

@media (max-width: 767.98px) {
  .prj-modal {
    padding: 6px;
  }

  .prj-modal .prjm__dialog {
    width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px);
    max-height: min(92svh, 680px);
  }

  .prj-modal .prjm__thumb {
    flex-basis: min(var(--prj-modal-thumb-size, 84px), 62px);
    width: min(var(--prj-modal-thumb-size, 84px), 62px);
  }
}

/* Modal açıkken sayfayı sabitle */
html.modal-open,
body.modal-open {
  overflow: hidden;
}

/* Hero-benzeri modda tıklanabilirlik kalkanı (arka linkler) */
#projects.mobile-hero-mode .tals-prj__section a {
  pointer-events: none !important;
}

/* [EKLE] Modal slaytlarında medya yerleşimi */
.prj-modal .prj-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.prj-modal .prj-slide img,
.prj-modal .prj-slide video,
.prj-modal .prj-slide .prj-embed,
.prj-modal .prj-slide iframe {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prj-modal .prj-slide .prj-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.prj-modal .prj-slide .prj-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prj-modal .prjm__viewport {
  min-height: 40vh;
}
.prj-modal .prjm__frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.prj-modal .prjm__frame iframe,
.prj-modal .prjm__frame video,
.prj-modal .prjm__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ================================================================
   PATCH — Projects üst başlık (chip) kapalı
   ================================================================ */
@media (min-width: 1024px) {
  /* Başlık hiç görünmesin */
  #projects .tals-prj__head {
    display: none !important;
  }

  /* Başlık için ayrılan tüm boşlukları sıfırla */
  #projects {
    --prj-head-top: 0px;
    --prj-head-h: 0px;
    --prj-head-gap: 0px;
  }
  #projects .tals-prj__inner {
    padding-top: 0 !important;
  }
}

#projects .tals-prj__a.is-card .prj-card {
  background: var(--prj-card-bg, #fff);
}

/* ==========================================================
   PROJECTS — İç scroll’u kapat, section yüksekliğini sabitle
   ========================================================== */

/* Projects section: tüm ekran - footer-safe (header-safe üst padding ile yönetiliyor) */
:is(#projects, .projects-section, section[data-section='projects']) {
  position: relative;
  min-height: var(--app-hf); /* [GÜNCEL] eskisi: calc(100vh - header - footer) */
  overflow: hidden; /* iç scroll kapalı, içerik kendi içinde hizalanacak */
}

/* Grid / track / stage ne kullanıyorsak, kendi içinde scroll olmasın */
:is(#projects, .projects-section, section[data-section='projects']) .projects-stage,
:is(#projects, .projects-section, section[data-section='projects']) .projects-grid,
:is(#projects, .projects-section, section[data-section='projects']) .projects-inner {
  height: 100%;
  overflow: hidden !important;
}

/* Kart arkaplan görselleri de kırpılsın, scroll yapmasın */
:is(#projects, .projects-section, section[data-section='projects']) .project-card img,
:is(#projects, .projects-section, section[data-section='projects']) .prj-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================
   PROJECTS — Web (≥1024px) header/footer konumuna göre hizalama
   - margin ile taşırmak yerine section içi padding ile çözüyoruz
   ========================================================== */
@media (min-width: 1024px) {
  /* Kartlara artık ekstra margin-top vermiyoruz,
     böylece footer alanının altına taşmıyorlar */
  #projects .prj-card,
  #projects .tals-prj__b,
  #projects .tals-prj__big {
    margin-top: 0;
    height: auto;
  }
}

/* ==========================================================
   PROJECTS — 3'lü kare kart layout'u (her 3 proje = 1 section)
   ========================================================== */
@media (min-width: 1024px) {
  /* İç grid: 3 kolonlu kart dizilimi */
  #projects .tals-prj__inner.tals-prj--cards3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 32px);
    align-items: flex-start;
    align-content: center;
    justify-items: stretch;
    padding-inline: clamp(24px, 6vw, 80px);
  }

  /* Kart: dikey, üstte square görsel, altta başlık + buton */
  #projects .prj-card--grid {
    display: flex;
    flex-direction: column;
    /* border-radius: 18px; */
    overflow: hidden;
    background: var(--prj-card-bg, #141418);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    height: auto;
  }

  /* Kare thumbnail */
  #projects .prj-card__thumb {
    position: relative;
    padding-top: 100%; /* 1:1 oran */
    background: #000 50% 50% / cover no-repeat;
  }

  /* Alt kısım: başlık + sağ altta buton */
  #projects .prj-card__body {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }

  #projects .prj-card__title {
    margin: 0;
    font-family: var(--prj-card-title-font);
    font-weight: 600;
    font-size: var(--prj-card-title-size, 15px);
    line-height: 1.3;
    color: var(--prj-card-title-color, #fff);
  }

  /* "Detay Göster" — küçük cam buton, sağ altta */
  #projects .prj-card__more {
    margin-left: auto;
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font:
      600 11px/1 ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Inter,
      Helvetica,
      Arial;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
  }

  #projects .prj-card__more:hover {
    background: rgba(255, 255, 255, 0.22);
  }

  #projects .prj-card__more:active {
    transform: translateY(1px);
  }
}

/* =========================================================
   PROJECTS — Kart başlığı taşmasın (satır clamp)
   ========================================================= */

/* Overlay içindeki başlık + sol card başlığı + mobil head */
#projects .tals-prj__title,
#projects .prj-card__title,
#projects .m-card__head {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 1 satırda kalsın; istersen 2 yapabilirsin */
  line-clamp: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* =========================================================
   PROJECTS — Kart alt kısmı aşağı doğru uzamasın
   - Sol card (TRI3) + mobil m-card body
   ========================================================= */

/* Web: TRI3 sol taraftaki açıklama alanının kartı büyütmesini engelle */
#projects .tals-prj--tri3 .tals-prj__a.is-card .prj-card__desc {
  max-height: var(--prj-card-desc-maxh, 7.5em); /* ~4–5 satır */
  overflow: auto; /* fazlası içeride scroll olsun, kart boyu sabit kalsın */
}

/* Mobil: 60/40 kart modunda alttaki metin alanı kartı şişirmesin */
#projects.mobile-card-mode .m-card__body {
  max-height: var(--prj-mcard-body-maxh, 7.5em);
  overflow: auto;
}

/* === Custom Single (about style) === */
.tals-prj--single1 .single-about .tals-prj__meta {
  background: var(--prj-meta-bg, rgba(0, 0, 0, 0.55));
  max-width: 480px;
}

/* === Custom Double === */
.custom-double {
  grid-template-columns: 1fr 1fr;
  /* gap: 40px; */
}

.custom-double .left-small {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-content: flex-start;
  align-self: center; /* section yüksekliği içinde ortalansın */
  height: auto; /* tam kaplama olmasın */
  min-height: 0;
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 90px;
  overflow: hidden;
}

.custom-double .left-small .tals-prj__title {
  color: var(
    --prj-double-title-color,
    var(--prj-card-title-color, var(--prj-meta-title-color, #111))
  );
  font-size: var(--prj-double-title-size, var(--prj-card-title-size, clamp(18px, 2.2vw, 28px)));
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.custom-double .left-small .tals-prj__desc {
  color: var(
    --prj-double-desc-color,
    var(--prj-card-desc-color, var(--prj-meta-desc-color, #2b2b2b))
  );
  font-size: var(--prj-double-desc-size, var(--prj-card-desc-size, clamp(14px, 1.4vw, 16px)));
}

/* meta başlık+açıklama görselin ALTINDA dursun */
.custom-double .left-small .tals-prj__meta {
  position: relative;
  z-index: 2;
  inline-size: min(100%, var(--prj-meta-double-maxw, 100%));
  max-width: 100%;
  max-height: 100%;
  padding: var(--prj-meta-double-padding, 0);
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  background: var(--prj-meta-double-bg, var(--prj-meta-bg, transparent));
  border: 0;
  border-radius: var(--prj-meta-double-radius, var(--prj-meta-radius, 0));
  -webkit-backdrop-filter: blur(var(--prj-meta-double-blur, 0px));
  backdrop-filter: blur(var(--prj-meta-double-blur, 0px));
  background-clip: padding-box;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
}
.custom-double .right-big {
  position: relative;
  box-shadow: none;
}

/* soldaki küçük görsel: sadece kendi alanını kaplasın, üst/alt boşluk kalsın */
.custom-double .left-small .tals-prj__img {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 4 / 3; /* istersen 3/2 veya 1/1 yapabilirsin */
  background-position: center;
  background-size: cover;
}

/* solda shade olmasın */
.custom-double .left-small .tals-prj__shade {
  display: none;
}

.custom-double .right-big .tals-prj__img {
  background-size: cover;
}

/* ==========================================================
   FIX — Custom Double: bottom align + title/desc kaybolmasın
   ========================================================== */
@media (min-width: 1024px) {
  #projects .tals-prj__section {
    overflow: hidden;
  }

  #projects .tals-prj__inner.custom-double {
    --prj-double-block-h: calc(100% - clamp(20px, 4vh, 56px));
    height: 100%;
    min-height: 0;
    align-items: end;
    overflow: hidden;
  }

  #projects .tals-prj__inner.custom-double > .left-small {
    align-self: end !important;
    block-size: var(--prj-double-block-h);
    padding: clamp(24px, 3.2vw, 72px) !important;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 55%) minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #projects .tals-prj__inner.custom-double > .left-small .tals-prj__img {
    inline-size: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 100%;
    aspect-ratio: 16 / 10; /* 4/3 yerine biraz daha kısa */
  }

  #projects .tals-prj__inner.custom-double > .left-small .tals-prj__meta {
    min-height: 0;
    overflow: auto;
    max-height: 100%;
    align-self: start;
  }

  #projects .tals-prj__inner.custom-double > .left-small .tals-prj__title,
  #projects .tals-prj__inner.custom-double > .left-small .tals-prj__desc {
    overflow-wrap: anywhere;
  }

  #projects .tals-prj__inner.custom-double > .right-big {
    align-self: end !important;
    block-size: var(--prj-double-block-h);
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #projects .tals-prj__inner.custom-double > .right-big .tals-prj__img {
    inset: 0;
    height: 100%;
  }
}