/* Titillium Font Family */
@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Thin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-ThinItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../assets/fonts/titillium/Titillium-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#ffffff;
  --fg:#121212;
  --muted:rgba(18,18,18,.70);
  --line:rgba(18,18,18,.12);
  --surface:rgba(0,0,0,.02);
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --r-12:12px;
  --r-16:16px;
  --r-18:18px;

  --t:180ms;

  --home-gutter-left: 48px;   /* JS bunu header'a göre güncelleyecek */
  --home-gutter-right: 48px;
  
}

*{ box-sizing:border-box; }
html, body { 
  overflow-x: clip; 
  max-width: 100vw;
}
html{
  /* Intro kapanırken scrollbar kaynaklı layout shift olmasın */
  scrollbar-gutter: stable;
}
body{
  margin:0;
  font-family: 'Titillium', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background-color:var(--bg);
  color:var(--fg);
  line-height:1.55;
  transition: background-color 1000ms cubic-bezier(.22,.61,.36,1);
}

/* Sticky footer: içerik kısa olsa bile footer hep en altta kalsın */
html, body{ height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 0 auto; }
.footer{ flex-shrink:0; }

/* Index sayfasında içerik `.page` içinde: aynı sticky footer davranışı */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
}
.page > main{ flex:1 0 auto; }

/* =========================
   INTRO SPLASH (HOME OPEN)
========================= */
body.intro-pending{
  background-color:#000;
}
/* Intro çıkışı başlar başlamaz body'yi beyaza döndür (siyah sayfaya taşmasın) */
body.is-intro-exit{
  background-color:var(--bg);
}

.page{
  opacity:1;
  transition:
    opacity 900ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity;
}
body.intro-pending .page{
  opacity:0;
}
/* Intro çıkışında sayfayı cross-fade ile içeri al */
body.is-intro-exit .page{
  opacity:1;
}

.intro{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none; /* default: intro kapalı (normal sayfa geçişlerinde flash olmasın) */
  place-items:center;
  background:#000;
  /* display:none iken görünmez; gösterildiğinde 1'den exit'e doğru fade eder */
  opacity:1;
  transition: opacity 1000ms cubic-bezier(.22,.61,.36,1);
}
body.is-intro .intro,
body.is-intro-exit .intro{
  display:grid;
  pointer-events:auto;
}
.intro.is-exit{
  opacity:0;
  pointer-events:none;
}

.intro__inner{
  /* Logo daha küçük/zarif */
  width: min(250px, calc(100vw - 128px));
  display:grid;
  place-items:center;
}

.intro__logo-wrap{
  position:relative;
  width:100%;
  display:grid;
  place-items:center;
}

.intro__logo-clip{
  width:100%;
  position:relative;
  overflow:hidden; /* görünmeyen “çizgi” aslında buranın alt kenarı */
}

/* İnce ayar: oranlar yüzde ile (logo PNG'e göre) */
.intro__logo-wrap{
  /* AES katmanında architects'i gizlemek için alttan kırpma.
     Çok yüksek olursa AES'in altını da keser. */
  --intro-aes-bottom: 24%;
  --intro-arch-top: 74%;   /* architects katmanının üstten kırpılması */
}

/* Ortak logo katmanı */
.intro__logo{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  filter: brightness(0) invert(1);
}

/* AES — görünmeyen çizgiden yukarı çıkar (ilk üst görünür, en son alt) */
.intro__logo--aes{
  opacity:1;
  transform: translateY(112%);
  /* AES'i ayır: alt kısmı (architects) bu katmanda görünmesin */
  clip-path: inset(0 0 var(--intro-aes-bottom) 0);
  will-change: transform;
}
.intro.is-enter .intro__logo--aes{
  animation: introAesRise 1350ms cubic-bezier(.22,.61,.36,1) 0ms forwards;
}
@keyframes introAesRise{
  0%{ transform: translateY(112%); }
  100%{ transform: translateY(0); }
}

/* architects — AES bittikten sonra yerinde “belirsin” (aşağıdan gelmesin) */
.intro__logo--arch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path: inset(var(--intro-arch-top) 0 0 0);
  opacity:0;
  transform: scale(.985);
  will-change: opacity, transform;
}
.intro.is-enter .intro__logo--arch{
  /* AES oturduktan sonra architects gelsin */
  animation: introArchIn 650ms cubic-bezier(.22,.61,.36,1) 1350ms forwards;
}
@keyframes introArchIn{
  0%{ opacity:0; transform: scale(.985); }
  100%{ opacity:1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .intro,
  .intro__logo{
    animation:none !important;
    transition:none !important;
  }
  body{ transition:none !important; }
  .intro__logo{
    opacity:1;
    transform:none;
    filter: brightness(0) invert(1);
  }
  .intro__logo--aes{
    clip-path: inset(0 0 var(--intro-aes-bottom) 0);
  }
  .intro__logo--arch{
    position:absolute;
    inset:0;
    clip-path: inset(var(--intro-arch-top) 0 0 0);
    opacity:1;
    transform:none;
  }

  /* Scroll ile görünen footer: reduced-motion'da animasyonsuz */
  .footer{
    transition:none !important;
    transform:none !important;
  }
}

main{
  overflow-x: hidden;
  width: 100%;
}

a{ color:inherit; text-decoration:none; }
.container{
  width: min(1200px, calc(100vw - 96px)); /* 48px sol + 48px sağ */
  margin: 0 auto;
}

/* =========================
   HEADER + NAV
========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--line);
}
.header__inner{
  height:72px;
  display:flex;
  align-items:center;
  gap:16px;
  padding-left: 48px;
  padding-right: 48px;
}
.logo{
  display:inline-flex;
  align-items:flex-end; /* alttan hizala */
  gap:6px; /* biraz daha yakın */
  font-weight:650;
  letter-spacing:.3px;
}

.logo__img{
  display:block;
  width:auto;
}

.logo__img--mark{
  height:28px;
}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left: auto; /* Logo'dan sonra sağa yaslan */
  margin-right: 18px; /* Lang-switch ile arasında boşluk */
}
.nav__link{
  font-size:14px;
  color:var(--muted);
  padding:8px 0;
  border-bottom:1px solid transparent;
  transition: color var(--t) ease, border-color var(--t) ease;
}
.nav__link:hover{ color:var(--fg); }
.nav__link.is-active{
  color:var(--fg);
  border-bottom-color:var(--fg);
}

.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  border-radius:10px;
  cursor:pointer;
  transition: transform var(--t) ease, background var(--t) ease;
}
.nav__toggle:hover{ background:rgba(0,0,0,.03); }
.nav__toggle:active{ transform:scale(.98); }

.nav__toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background:var(--fg);
  margin:6px auto;
  opacity:.9;
}

/* =========================
   LANGUAGE SWITCH (TR/EN)
========================= */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.lang-switch__btn{
  height:34px;
  width:34px;
  padding:0;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  transition: background var(--t) ease, color var(--t) ease, transform var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;
  border-radius:999px;
  display:grid;
  place-items:center;
}
.lang-switch__btn:hover{ 
  color:var(--fg);
  border-color: rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.lang-switch__btn.is-active{
  color:#fff;
  background:var(--fg);
  border-color: var(--fg);
  box-shadow:0 6px 14px rgba(0,0,0,.14);
}
.lang-switch__btn.is-active:hover{
  background:var(--fg);
}
.lang-switch__btn:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}


/* =========================
   SECTIONS + CONTENT
========================= */
.section{
  padding:72px 0;
  border-top:1px solid var(--line);
}
.section--muted{ background:var(--surface); }

.section__title{
  margin:0;
  font-size:22px;
  letter-spacing:-.01em;
}
.section__text{ color:var(--muted); margin:10px 0 0; }

.split{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:28px;
}

.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:var(--r-16);
  padding:18px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card--map{
  padding:0;
  overflow:hidden;
}
.card--map__head{
  padding: 14px 14px 18px;
}
.card--map__head .card__title{
  margin: 0;
}
.card--map .map{
  height: 420px;
  border:0;
  border-radius: var(--r-16);
  box-shadow: none;
  margin-top: 0;
}
.card--map .map__expand{
  top: 14px;
  right: 14px;
}
.card__title{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.card__text{ margin:0; color:var(--fg); opacity:.92; }
.divider{ height:1px; background:var(--line); margin:16px 0; }

/* =========================
   TEAM MEMBERS (ABOUT)
========================= */
.section--team{
  padding-top:160px;
}

.team-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  padding-bottom:150px;
}

.team-member{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:max(100px, 15vh);
}

.team-member__photo{
  width:280px;
  aspect-ratio:3/4;
  border-radius:var(--r-16);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.team-member__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.team-member__info{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:center;
  opacity:0;
  transform:translateY(60px);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
              transform 900ms cubic-bezier(.22,.61,.36,1);
}

.team-member__info.is-visible{
  opacity:1;
  transform:translateY(0);
}

.team-member__name{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
}

.team-member__title{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  font-weight:500;
}

.team-member__bio{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
  max-width:400px;
}

@media(max-width:768px){
  .section--team{
    padding-top:100px;
  }
  
  .team-grid{
    grid-template-columns: 1fr;
    gap:56px;
    padding-bottom:100px;
  }
  
  .team-member{
    gap:max(80px, 12vh);
  }
  
  .team-member__photo{
    width:240px;
  }
}

/* =========================
   MAP (CONTACT)
========================= */
.map{
  position:relative;
  border:1px solid rgba(0,0,0,.15);
  border-radius:14px;
  overflow:hidden;
  height:300px;
  background: rgba(0,0,0,.05);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
}
.map__iframe{
  width:100%;
  height:100%;
  border:0;
  display:none;
}
.map[data-has-embed="1"] .map__iframe{ display:block; }
.map__canvas{
  position:absolute;
  inset:0;
}
.map[data-map-provider="leaflet"] .map__canvas{
  display:block;
}
.map__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  color:var(--muted);
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.map[data-has-embed="1"] .map__placeholder{ display:none; }
.map__ph-title{
  font-size:13px;
  color:var(--fg);
  opacity:.9;
  margin:0 0 6px;
}
.map__ph-sub{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
}
.map__open{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-size:12px;
  color:var(--fg);
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease, opacity var(--t) ease;
}
.map[data-has-embed="1"] .map__open{
  opacity:.92;
}
.map__open:hover{
  background:#fff;
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.map__open:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}
.map[data-has-url="0"] .map__open{ display:none; }

/* Leaflet map: clean grayscale look */
.map[data-map-provider="leaflet"] .leaflet-container{
  background: rgba(0,0,0,.06);
  font: inherit;
}
.map[data-map-provider="leaflet"] .leaflet-container{
  cursor: pointer;
}
.map[data-map-provider="leaflet"] .leaflet-container:active{
  cursor: grabbing;
}
.map[data-map-provider="leaflet"] .map-pane--base .leaflet-tile{
  /* Add a subtle gray tone to the base layer (avoid pure white) */
  filter: grayscale(1) contrast(1.10) brightness(0.98);
}
.map[data-map-provider="leaflet"] .map-pane--labels .leaflet-tile{
  /* Keep labels crisp/darker than the base */
  filter: contrast(1.45) brightness(0.88);
}

.map[data-map-provider="leaflet"] .leaflet-control-container{
  opacity: .9;
}
.map[data-map-provider="leaflet"] .leaflet-control-attribution{
  background: transparent;
  margin: 0 0 10px 10px;
  padding: 0;
  color: rgba(18,18,18,.30);
  font-size: 10px;
}
.map[data-map-provider="leaflet"] .leaflet-control-attribution a{
  color: rgba(18,18,18,.42);
  text-decoration: none;
}
.map[data-map-provider="leaflet"] .leaflet-control-attribution a:hover{
  text-decoration: underline;
}
.map-pin{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  position: relative;
}
.map-pin::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width: 10px;
  height: 10px;
  background:#111;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.map-pin::before{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  opacity: .92;
}

.map-pin-svg{
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

/* Expand / open in Google Maps (Habif-style) */
.map__expand{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  color: rgba(18,18,18,.70);
  z-index: 1005; /* above leaflet panes */
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
}
.map__expand::before{
  content:"⤢";
  font-size: 14px;
  line-height: 1;
}
.map__expand:hover{
  background:#fff;
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.map__expand:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}
.map:hover .map__expand,
.map:focus-within .map__expand{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.map[data-has-url="0"] .map__expand{ display:none; }

/* Road/POI labels (custom) — only used when a specific name must be forced visible */
.map-road-label{
  display:inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1px;
  color: rgba(20,20,20,.62);
  white-space: nowrap;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 -1px 0 rgba(255,255,255,.98),
    1px 0 0 rgba(255,255,255,.98),
    -1px 0 0 rgba(255,255,255,.98),
    1px 1px 0 rgba(255,255,255,.98),
    -1px 1px 0 rgba(255,255,255,.98),
    1px -1px 0 rgba(255,255,255,.98),
    -1px -1px 0 rgba(255,255,255,.98);
  /* Leaflet icon defaultu top-left'e oturur. Burada kendimizi anchor noktasına göre
     merkezleyip (-%50) sonra döndür/offsetleyeceğiz. Böylece font boyutu değişse de
     yazı aynı referans çizgisinin üstünde kalır. */
  transform-origin: 50% 50%;
}
.map-road-label.is-zoom-small{
  font-size: 8px;
  opacity: .92;
}

.map-road-label--maski.is-zoom-small{
  font-size: 8px;
  opacity: .90;
}
.map-road-label--sumer{
  /* JS marker is positioned along the reference line; CSS only centers + rotates the text */
  transform: translate(-50%, -50%) rotate(32deg);
}

.map-road-label--maski{
  /* MASKİ label - sol üstte, düz (rotate yok veya minimal) */
  transform: translate(-50%, -50%) rotate(0deg);
  font-weight: 600;
}

.service-list{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:6px;
}
.service-list li{ font-size:14px; color:var(--muted); }

/* =========================
   PROJECTS LIST (GRID + HOVER)
========================= */
/* Projects container - header ve footer içerikleri ile tam hizalı */
/* Header: 120px (header) + 48px (header__inner) = 168px */
/* Footer: 120px (footer) + 48px (footer__inner) = 168px */
.section--projects .container{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 168px;
  padding-right: 168px;
  box-sizing: border-box;
}

/* Contact container - header ve footer içerikleri ile tam hizalı */
.section--contact{
  min-height: calc(100vh - 180px); /* Header ve footer için yer bırak */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.section--contact .container{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 168px;
  padding-right: 168px;
  box-sizing: border-box;
}

/* Contact sayfası split: harita ve bilgiler dengeli */
.section--contact .split{
  grid-template-columns: 1fr 1.1fr; /* Harita biraz daha büyük */
  align-items: center;
  gap: 48px;
}

/* Projects grid */
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
  align-items: stretch;
}

/* Orta ekran: 2 sütun */
@media (max-width: 900px){
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  
  .section--projects .container,
  .section--contact .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mobil: 1 sütun */
@media (max-width: 760px){
  .grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  .section--projects .container,
  .section--contact .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* Card wrapper */
.project{
  border:1px solid var(--line);
  border-radius:var(--r-16);
  overflow:hidden;
  background:rgba(255,255,255,.8);
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}
.project:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(0,0,0,.16);
}

/* 3-stage hover media */
.project__media{
  position:relative;
  width: 100%;
  padding-bottom: 66.67%; /* 3:2 asect ratio - eşit yükseklik */
  height: 0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.project__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition: opacity 240ms ease, transform 700ms ease, filter 240ms ease;
}

/* Plan default */
.project__img--plan{
  opacity:1;
  filter:grayscale(1) contrast(1.15);
}

/* Photo hidden until hover */
.project__img--photo{ opacity:0; }

.project:hover .project__img--photo{ opacity:1; }
.project:hover .project__img{ transform:scale(1.05); }

/* Curtain */
.project__curtain{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.40));
  transform:translateY(-100%);
  transition: transform 650ms ease;
  transition-delay:0ms;
  pointer-events:none;
}
.project:hover .project__curtain{
  transform:translateY(0);
  transition-delay:900ms;
}

/* Label (after delay) */
.project__label{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;

  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);

  color:#fff;
  opacity:0;
  transform:translateY(-8px);
  transition: opacity 240ms ease, transform 240ms ease;
  transition-delay:0ms;
  pointer-events:none;
}
.project__label-title{ font-weight:650; font-size:14px; }
.project__label-meta{ margin-top:4px; font-size:12px; opacity:.85; }

.project:hover .project__label{
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity:1;
  transform:translateY(0);
  transition-delay:900ms;
}

/* Meta row under image */
.project__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px;
}
.project__name{ font-weight:650; font-size:14px; }
.project__year{ color:var(--muted); font-size:13px; }

/* =========================
   PROJECT DETAIL
========================= */
.project-hero{
  position:relative;
  height:auto;
  padding:10px 0 40px; 
  border-bottom:1px solid var(--line);
}

.project-hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.55)),
    radial-gradient(1000px 500px at 60% 30%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
}
.project-hero__content{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:220px;
}
.project-title{
  margin:0;
  font-size:clamp(32px, 5vw, 52px);
  letter-spacing:-0.03em;
}
.project-subtitle{
  margin-top:8px;
  color:var(--muted);
}

/* Project detail: ok butonunun altındaki ayracı (sonraki section çizgisi) oka yaklaştır */
.project-hero + .section{
  padding-bottom: 44px;
}

.project-layout{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:32px;
}
.project-meta{
  border-left:1px solid var(--line);
  padding-left:24px;
}
.meta-item{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}
.meta-label{ color:var(--muted); }

/* Project description: "Devamını oku" (kısalt/expand) */
.project-desc{
  position:relative;
}
.project-desc__content{
  position:relative;
  /* Uzun tek parça metin/URL varsa layout bozmasın */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.project-desc.is-collapsed .project-desc__content{
  max-height: 220px;
  overflow:hidden;
}
.project-desc__fade{
  display:none;
}
.project-desc.is-collapsed .project-desc__fade{
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0; /* fade en alta kadar gelsin; altta "yeniden görünme" olmasın */
  height:150px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.72),
    rgba(255,255,255,1)
  );
  z-index:1;
}
.project-desc__toggle{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(18,18,18,.12);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  cursor: pointer;
  display:grid;
  place-items:center;
  padding:0;

  opacity:0; /* hover olunca gözüksün */
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.22,.61,.36,1);
  position:relative;
  z-index:2;
}

/* Ok ikonu */
.project-desc__toggle::before{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(18,18,18,.72);
  border-bottom:2px solid rgba(18,18,18,.72);
  transform: rotate(45deg); /* aşağı bakan ok */
}

/* Kısaltılmışken ok: fade alanının ortasında */
.project-desc.is-collapsed .project-desc__toggle{
  position:absolute;
  left:50%;
  bottom: 20px;
  transform: translateX(-50%) rotate(0deg);
  pointer-events:none; /* hover olana kadar tıklanmasın */
}
.project-desc.is-collapsed:hover .project-desc__toggle,
.project-desc.is-collapsed:focus-within .project-desc__toggle{
  opacity:1;
  pointer-events:auto;
}

/* Açıkken ok: aşağıda, ters dönsün */
.project-desc:not(.is-collapsed) .project-desc__toggle{
  position:relative;
  left:50%;
  margin-top: 18px;
  margin-bottom: -10px; /* okun altındaki boşluğu daralt */
  transform: translateX(-50%) translateY(6px) rotate(180deg);
  opacity:1;
  pointer-events:auto;
}

/* Mobilde hover olmadığı için ok hep görünsün */
@media (hover: none){
  .project-desc.is-collapsed .project-desc__toggle{
    opacity:1;
    pointer-events:auto;
  }
}

/* Detail gallery - TEK SÜTUN, BÜYÜK FOTOĞRAFLAR */
.detail-gallery{
  margin-top:24px;
  display:grid;
  grid-template-columns: 1fr;
  gap:64px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.detail-gallery .gallery-img-wrap{
  position:relative;
  border-radius:var(--r-16);
  overflow:hidden;
}
.detail-gallery img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:var(--r-16);
  border:1px solid var(--line);
  display:block;
  cursor:zoom-in;
  transition: transform 180ms ease, filter 180ms ease;
}
.detail-gallery img:hover{
  transform:translateY(-2px);
  filter:brightness(0.96);
}

/* “Büyüt” badge */
.detail-gallery .gallery-img-wrap::after{
  content:"Büyüt";
  position:absolute;
  right:10px;
  bottom:10px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(18,18,18,.12);
  background:rgba(255,255,255,.88);
  color:rgba(18,18,18,.75);
  opacity:0;
  transform:translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events:none;
}
.detail-gallery .gallery-img-wrap:hover::after{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   CTA + FOOTER + LINKS
========================= */
.cta{
  border:1px solid var(--line);
  border-radius:var(--r-18);
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.footer{
  border-top:1px solid var(--line);
  /* Navbar ile hizalı + biraz daha dolgun */
  padding:40px 120px;

  /* Sayfa ilk açılışta görünmesin, scroll ile ortaya çıksın */
  opacity:0;
  transform: translateY(18px);
  pointer-events:none;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1), transform 420ms cubic-bezier(.22,.61,.36,1);
}
body.is-scrolled .footer{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  /* Header'daki içerik hizasını yakala (.header__inner: 48px) */
  padding-left:48px;
  padding-right:48px;
}
.footer__brand{
  display:flex;
  align-items:flex-end; /* alttan hizala */
  gap:6px; /* biraz daha yakın */
  font-weight:650;
  margin:0;
}
.footer__small{ color:var(--muted); font-size:13px; }
.footer__left{ justify-self:start; }
.footer__center{ justify-self:center; }
.footer__right{
  justify-self:end;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Footer container'ı header gibi full-width kullan (max-width sınırlamasını kaldır) */
.footer .container{
  max-width:none;
  width:100%;
  margin:0 auto;
}

.logo__img--full{
  height:60px;
}

.footer__link,
.textlink{
  color:var(--muted);
  font-size:14px;
  transition: color var(--t) ease;
}
.footer__link:hover,
.textlink:hover{ color:var(--fg); }

/* =========================
   LIGHTBOX
========================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(8px);
  padding:0;

  opacity:0;
  transform:scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}
.lightbox.is-open{
  display:grid;
  opacity:1;
  transform:scale(1);
}

/* Fullscreen modunda ekstra ayarlar */
.lightbox:fullscreen,
.lightbox:-webkit-full-screen,
.lightbox:-moz-full-screen,
.lightbox:-ms-fullscreen{
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,1);
}

.lightbox:fullscreen .lightbox__img,
.lightbox:-webkit-full-screen .lightbox__img,
.lightbox:-moz-full-screen .lightbox__img,
.lightbox:-ms-fullscreen .lightbox__img{
  max-height:100vh;
  height:calc(100vh - 60px);
}

/* iOS Safari özel ayarlar (tam ekran için) */
@supports (-webkit-touch-callout: none) {
  .lightbox:fullscreen,
  .lightbox:-webkit-full-screen {
    height:100dvh;
  }
  
  .lightbox:fullscreen .lightbox__figure,
  .lightbox:-webkit-full-screen .lightbox__figure {
    height:100dvh;
  }
  
  .lightbox:fullscreen .lightbox__img,
  .lightbox:-webkit-full-screen .lightbox__img {
    height:calc(100dvh - 60px);
    max-height:calc(100dvh - 60px);
  }
}

.lightbox__figure{
  margin:0;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0;
}
.lightbox__img{
  width:100%;
  height:calc(100vh - 60px);
  max-width:100vw;
  max-height:calc(100vh - 60px);
  object-fit:contain;
  border-radius:0;
  background:transparent;
}

/* caption + count - minimal, altta sabit */
.lightbox__cap{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color:rgba(255,255,255,.90);
  font-size:13px;
  text-align:center;
  z-index:10000;
  opacity:1;
  transition: opacity 220ms ease;
}
.lightbox__count{
  color:rgba(255,255,255,.90);
  font-size:12px;
  border:1px solid rgba(255,255,255,.25);
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(10px);
}

.lightbox__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  opacity:1;
  transition: opacity 220ms ease, background 180ms ease, transform 180ms ease;
  z-index:10001;
}
.lightbox__btn:hover{ 
  background:rgba(0,0,0,.60); 
  transform:translateY(-50%) scale(1.05);
}

.lightbox__close{
  top:30px;
  right:30px;
  transform:none;
  width:44px;
  height:44px;
  font-size:24px;
}
.lightbox__close:hover{
  transform:scale(1.05);
}
.lightbox__prev{ left:30px; }
.lightbox__next{ right:30px; }

/* Lightbox UI auto-hide (mouse hareket edince görünür) */
.lightbox.is-ui-hidden .lightbox__btn,
.lightbox.is-ui-hidden .lightbox__cap{
  opacity:0;
  pointer-events:none;
}

/* =========================
   PAGE HERO (optional utility)
========================= */
.page-hero{ padding:56px 0 18px; }
.page-hero__title{
  margin:0 0 10px;
  font-size:clamp(28px, 3.5vw, 42px);
  letter-spacing:-0.02em;
}
.page-hero__desc{
  margin:0;
  color:var(--muted);
  max-width:70ch;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .hero__content{ padding:84px 0 56px; }
  
  .section--projects .container,
  .section--contact .container{
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .section--contact{
    min-height: auto;
    padding: 48px 0;
  }
  
  .section--contact .split{
    gap: 32px;
  }
  
  .card--map .map{
    height: 320px;
  }

  /* project list: hover yok */
  .project__media{ 
    padding-bottom: 75%; /* 4:3 mobilde */
    height: 0;
  }
  .project__curtain{ display:none; }
  .project__label{ display:none; }
  .project__img--photo{ opacity:1; }
  .project__img--plan{ opacity:0; }

  /* project detail */
  .project-hero{ padding: 40px 0 28px; }
  .project-hero__content{
    justify-content: flex-start;
    min-height: unset;
  }
  .project-title{ margin-top: 0; }
  .project-layout{ grid-template-columns:1fr; }
  .project-meta{
    border-left:none;
    padding-left:0;
    margin-top:24px;
  }

  .project-desc.is-collapsed .project-desc__content{
    max-height: 200px;
  }

  .detail-gallery{
    gap:48px;
  }

  /* Mobil tam ekran optimizasyonu */
  .lightbox__figure{ 
    width:100vw; 
    height:100vh;
  }
  .lightbox__img{
    height:calc(100vh - 50px);
    max-height:calc(100vh - 50px);
  }
  .lightbox__prev{ left:10px; width:40px; height:40px; font-size:20px; }
  .lightbox__next{ right:10px; width:40px; height:40px; font-size:20px; }
  .lightbox__close{ right:10px; top:10px; width:36px; height:36px; font-size:18px; }
  .lightbox__cap{ bottom:10px; font-size:11px; }
  
  /* Fullscreen modunda mobil */
  .lightbox:fullscreen .lightbox__img,
  .lightbox:-webkit-full-screen .lightbox__img{
    height:100vh;
    max-height:100vh;
  }
  
  .lightbox:fullscreen .lightbox__cap,
  .lightbox:-webkit-full-screen .lightbox__cap{
    bottom:15px;
  }
}

@media (max-width: 760px){
  header, .header{
    padding-left: 0;
    padding-right: 0;
  }
  
  .header__inner{
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .nav__toggle{ display:block; }

  .nav{
    position:absolute;
    right:16px;
    top:72px;
    width:min(320px, calc(100% - 32px));
    display:none;
    flex-direction:column;
    gap:0;
    background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    border-radius:var(--r-16);
    overflow:hidden;
    padding:8px;
    box-shadow:var(--shadow);
    margin-left:0;
    margin-right:0;
  }
  .nav.is-open{ display:flex; }

  .nav__link{
    width:100%;
    padding:12px 12px;
    border-bottom:1px solid var(--line);
  }
  .nav__link:last-child{ border-bottom:none; }
  
  .lang-switch{
    order:-1; /* Logo'dan sonra ilk eleman olsun */
    margin-left:auto;
    margin-right:8px;
    gap: 6px;
  }
  
  .lang-switch__btn{
    height: 28px;
    width: 28px;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .cta{ flex-direction:column; align-items:flex-start; }
}

/* HEADER spacing (logo sola, menu sağa biraz daha) */
header, .header, .nav-wrap {
  padding-left: 120px;
  padding-right: 120px;
}

/* Eğer header container max-width ile ortalanıyorsa bunu da ekle */
header .container, .header .container {
  max-width: none;
  width: 100%;
}

@media (max-width: 900px){
  header, .header{
    padding-left: 0;
    padding-right: 0;
  }
  
  .header__inner{
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .nav{
    gap: 16px;
    margin-right: 12px;
  }
  
  .nav__link{
    font-size: 13px;
  }
  
  .lang-switch{
    gap: 6px;
  }
  
  .lang-switch__btn{
    height: 30px;
    width: 30px;
    font-size: 9px;
    letter-spacing: .08em;
  }
  
  .footer{
    padding-left:24px;
    padding-right:24px;
  }
  .footer__inner{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width: 600px){
  .footer{
    padding-left:18px;
    padding-right:18px;
  }
  .footer__inner{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
  }
  .footer__center{ grid-row:1; }
  .footer__right{ grid-row:2; justify-self:center; justify-content:center; }
  .footer__left{ grid-row:3; justify-self:center; }
  .logo__img--full{ height:60px; }
}

/* =========================
   HOME / INDEX CAROUSEL 
   ========================= */
  
  .home-carousel{
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: 56px 0;
    width: 100%;
    overflow: hidden;
  }
  
  /* ✅ çizgilerin içinde kalsın */
  .home-carousel .carousel{
    width: calc(100vw - var(--home-gutter-left) - var(--home-gutter-right));
    margin-left: var(--home-gutter-left);
    margin-right: var(--home-gutter-right);

    /* Carousel geometry (item ölçüleri) */
    --available-width: 100%;
    --total-ratio: 4;
    --gap: 0px;
    --sideW: calc((var(--available-width) - (2 * var(--gap))) / var(--total-ratio));
  }

  /* Caption: büyük görselin sol altına hizalanır (JS --home-caption-left set eder) */
  .home-carousel__caption{
    width: 100%;
    margin-top: 14px;
    /* Proje değişince satır kırılıp layout itmesin */
    min-height: 2.2em;
  }

  .home-carousel__caption-inner{
    /* Yazı her zaman orta görselin sol altına sabit (JS px set eder) */
    margin-left: var(--home-caption-left, 0px);
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.15;
    opacity: 1;
    transition: opacity 200ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .home-carousel__caption-inner.is-fading{
    opacity: 0;
  }

  .home-carousel__caption-title{
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(18,18,18,.82);
  }

  .home-carousel__caption-year{
    font-size: clamp(11px, 1.3vw, 14px);
    color: var(--muted);
  }

  .home-carousel__caption-year:not(:empty)::before{
    content: ",";
    margin-right: 6px;
    color: inherit;
  }
  
  /* viewport taşmayı keser */
  .carousel-viewport{
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  /* Hover ile durduğunu göstermek için pause chip */
  .home-carousel__paused-badge{
    position: absolute;
    top: 14px;
    /* Ortadaki (pos-center) görselin sağ üstüne hizala */
    right: auto;
    left: calc(
      var(--track-offset-px, 0px) +
      var(--sideW-px, 0px) +
      var(--gap-px, 0px) +
      var(--centerW-px, 0px) -
      14px -
      32px
    );
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
    z-index: 3;
  }
  .home-carousel__paused-badge::before{
    content: "⏸";
    font-size: 14px;
    line-height: 1;
    color: rgba(18,18,18,.58);
  }
  .carousel.is-paused .home-carousel__paused-badge{
    opacity: 1;
    transform: translateY(0);
  }
  /* Manuel sağ/sol geçişlerde pause badge görünmesin (geçiş bitince geri gelir) */
  .carousel.is-manual-nav .home-carousel__paused-badge{
    opacity: 0 !important;
    transform: translateY(-4px) !important;
  }
/* =========================
   HOME – Carousel (FİZİKSEL KAYMA + BOYUT DEĞİŞİMİ)
   ========================= */
  #carouselStage{
    /* Stage, viewport yerine parent genişliğine uysun (gutter içinde kalsın) */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0 auto;

    /* Height hesabı */
    /* Biraz daha uzun dursun */
    --sideH: clamp(180px, 24vh, 300px);
    --centerH: calc(var(--sideH) * 2);

    /* Layout sabit kalsın */
    height: var(--centerH);
    display: flex;
    align-items: center;
  }
  
  /* Track - KAYACAK (transform ile) */
  .carousel-track{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-px, var(--gap));
    transform: translateX(var(--track-offset-px, 0px));
    will-change: transform;
    position: relative;
    height: 100%;
    opacity: 0;
    transition: opacity 300ms ease;
  }
  
  /* Item - kayarken boyut da değişecek */
  .c-item{
    flex: 0 0 auto;
    border-radius: 0;
    overflow: hidden;
    background: #f2f2f2;
    
    /* Boyut değişimi smooth - KAYMA SÜRESİYLE AYNI */
    transition: 
      height 800ms cubic-bezier(.4, 0, .2, 1),
      width 800ms cubic-bezier(.4, 0, .2, 1),
      opacity 800ms cubic-bezier(.4, 0, .2, 1),
      filter 800ms cubic-bezier(.4, 0, .2, 1),
      box-shadow 800ms cubic-bezier(.4, 0, .2, 1);
    
    will-change: height, width;
  }
  
  .c-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* POZISYON CLASS'LARI - Manuel olarak eklenecek */
  
  /* pos-left - küçük */
  .c-item.pos-left{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: .85;
    filter: brightness(0.96);
    box-shadow: 0 20px 60px rgba(0,0,0,.06);
    cursor: pointer;
  }
  
  /* pos-center - BÜYÜK */
  .c-item.pos-center{
    height: var(--centerH);
    width: var(--centerW-px, calc(var(--sideW) * 2));
    opacity: 1;
    filter: none;
    box-shadow: 0 24px 80px rgba(0,0,0,.08);
  }
  
  /* pos-right - küçük */
  .c-item.pos-right{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: .85;
    filter: brightness(0.96);
    box-shadow: 0 20px 60px rgba(0,0,0,.06);
    cursor: pointer;
  }
  
  /* pos-next - görünmez sağda */
  .c-item.pos-next{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: 0;
  }

  /* pos-prev - görünmez solda (geri kaydırma için) */
  .c-item.pos-prev{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: 0;
  }
  
  /* pos-exit - çıkış (soldaki kayboluyor) */
  .c-item.pos-exit{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: 0;
  }

  /* pos-exit-right - çıkış (sağdaki kayboluyor) */
  .c-item.pos-exit-right{
    height: var(--sideH);
    width: var(--sideW-px, var(--sideW));
    opacity: 0;
  }

  /* MOBİL RESPONSIVE - Masaüstü ile aynı oranlar, sadece küçültülmüş */
  @media (max-width: 900px){
    .home-carousel .carousel{
      --available-width: 100vw;
      --gap: 0px;
      margin-left: 0;
      margin-right: 0;
      width: 100vw;
    }

    #carouselStage{
      --sideH: clamp(100px, 14vh, 160px);
      --centerH: calc(var(--sideH) * 2);
    }
    
    .home-carousel{
      min-height: calc(100vh - 72px);
      padding: 24px 0;
    }
  }

  /* Mobilde de mevcut boşluğun 2 katı */
  @media (max-width: 980px){
    .detail-gallery{
      gap:48px;
    }
  }

  @media (max-width: 600px){
    .home-carousel .carousel{
      --available-width: 100vw;
      --gap: 0px;
      margin-left: 0;
      margin-right: 0;
      width: 100vw;
    }

    #carouselStage{
      --sideH: clamp(85px, 12vh, 140px);
      --centerH: calc(var(--sideH) * 2);
    }
    
    .home-carousel{
      padding: 20px 0;
      min-height: calc(100vh - 72px);
    }
    
    .carousel-track{
      transition: opacity 150ms ease;
    }
    
    .c-item{
      transition: 
        height 800ms cubic-bezier(.4, 0, .2, 1),
        width 800ms cubic-bezier(.4, 0, .2, 1),
        opacity 800ms cubic-bezier(.4, 0, .2, 1),
        filter 800ms cubic-bezier(.4, 0, .2, 1),
        box-shadow 800ms cubic-bezier(.4, 0, .2, 1);
    }
    
    .c-item.pos-left,
    .c-item.pos-right,
    .c-item.pos-next,
    .c-item.pos-prev,
    .c-item.pos-exit,
    .c-item.pos-exit-right{
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
    }
    
    .c-item.pos-center{
      box-shadow: 0 12px 30px rgba(0,0,0,.08);
    }
  }
  
  @media (max-width: 400px){
    .home-carousel .carousel{
      --available-width: 100vw;
      --gap: 0px;
      margin-left: 0;
      margin-right: 0;
      width: 100vw;
    }

    #carouselStage{
      --sideH: clamp(75px, 10vh, 120px);
      --centerH: calc(var(--sideH) * 2);
    }
    
    .home-carousel{
      padding: 16px 0;
    }
  }