/* =========================================================================
   ZEBRANO BURSA — Yetkili Bayi
   Konsept: gece siyahı zemin · şampanya altın vurgu · didone tipografi
   ========================================================================= */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
  /* Zemin: neredeyse nötr, hafif sıcak siyah — mobilya fotoğrafını öne çıkarır */
  --ink:        #08090A;
  --ink-2:      #101214;
  --ink-3:      #191C1F;

  /* Metin: sıcak fildişi */
  --silk:       #F2EDE4;
  --silk-70:    rgba(242, 237, 228, 0.70);
  --silk-45:    rgba(242, 237, 228, 0.44);
  --silk-22:    rgba(242, 237, 228, 0.20);
  --line:       rgba(242, 237, 228, 0.13);
  --line-soft:  rgba(242, 237, 228, 0.07);

  /* Tek vurgu: şampanya altın. Değişken adı geçmişten kalma —
     site genelinde vurgu rengi olarak bu okunur. */
  --iznik:      #C9A66B;
  --iznik-dim:  rgba(201, 166, 107, 0.30);

  /* Daha derin altın — seçili durum halkaları ve ince çizgiler */
  --brass:      #A5854A;

  /* Nadir ikinci vurgu: kökboya */
  --madder:     #B25844;

  /* Açık yüzey — kırık beyaz keten */
  --paper:      #EDE9E0;
  --paper-ink:  #14161A;

  /* Tipografi */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Ölçü */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw:   1400px;
  --header-h: 76px;

  /* Hareket */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 2. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--ink);
  color: var(--silk);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--iznik); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--iznik);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--iznik); color: var(--ink);
  padding: 0.75rem 1.25rem; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Tipografi ölçeği ----------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 0.94;
  letter-spacing: -0.022em;
  font-size: clamp(2.9rem, 9.2vw, 8.2rem);
}
.display em {
  font-style: italic;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.h3 { font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1.14; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silk-45);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: var(--iznik);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.66;
  color: var(--silk-70);
  font-weight: 300;
  max-width: 56ch;
}

.muted { color: var(--silk-45); }
.accent { color: var(--iznik); }

/* ---------- 4. Layout --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(5rem, 11vw, 10rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.rule { height: 1px; background: var(--line); border: 0; }

/* İpek filament ayracı — tekrar eden imza motifi */
.filament {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--line) 12%,
    var(--iznik-dim) 50%,
    var(--line) 88%, transparent 100%);
}

/* ---------- 5. Header --------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
              border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

/* Marka kilidi: üreticinin logosu + bayi satırı */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.42rem; }
.brand__logo {
  width: auto;
  height: clamp(20px, 2.4vw, 26px);
  flex: none;
}
.brand__sub {
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--silk-45);
  white-space: nowrap;
}
/* Açık zeminli bölümlerde logo beyaz olduğu için ters çevrilir */
.paper .brand__logo { filter: invert(1) brightness(0.15); }
.paper .brand__sub { color: rgba(20, 22, 26, 0.55); }

.nav { justify-self: center; }
.nav ul { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--silk-70);
  padding-block: 0.5rem;
  position: relative;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: var(--iznik);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--silk); }
.nav a:hover::after, .nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__actions { display: flex; align-items: center; gap: 1rem; }

.lang {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--silk-45);
}
.lang button {
  padding: 0.35rem 0.4rem;
  transition: color 0.3s var(--ease);
}
.lang button[aria-pressed="true"] { color: var(--silk); }
.lang button:hover { color: var(--iznik); }
.lang span { opacity: 0.35; }

/* ---------- 6. Butonlar ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  border: 1px solid var(--silk-22);
  color: var(--silk);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--silk);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover { color: var(--ink); border-color: var(--silk); }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--iznik); border-color: var(--iznik); color: var(--ink); font-weight: 500; }
.btn--solid::before { background: var(--silk); }
.btn--solid:hover { color: var(--ink); border-color: var(--silk); }

.btn--sm { padding: 0.7rem 1.15rem; font-size: 0.68rem; letter-spacing: 0.16em; }

.btn__arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Metin bağlantısı */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--silk-70); padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), gap 0.35s var(--ease);
}
.tlink:hover { color: var(--iznik); border-color: var(--iznik); gap: 0.95rem; }

/* ---------- 7. Hero ----------------------------------------------------- */
/* Bölünmüş hero: solda mürekkep zemin üzerinde ipek tezgâhı ve tipografi,
   sağda showroom fotoğrafı. Fotoğrafla animasyon üst üste binmiyor —
   hem okunaklılık kazanıyor hem de "fotoğraf üstüne yazı" klişesinden çıkıyor. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero__pane {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.hero__figure {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  min-width: 0;
}
/* Slayt: hepsi üst üste, yalnızca .is-on görünür */
.hero__figure .hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  z-index: 0;
}
.hero__figure .hero__slide.is-on { opacity: 1; z-index: 1; }

.hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  /* Doygunluğu bir miktar kısıp kontrastı yükseltiyoruz: fotoğraf altın vurguyla
     yarışmasın, ama mobilyanın dokusu kaybolmasın */
  filter: saturate(0.55) contrast(1.12) brightness(0.82);
  transform: scale(1.1);
  animation: heroDrift 24s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

/* Fotoğrafın sol kenarını mürekkep zemine bağlayan yumuşak geçiş */
.hero__figure::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, var(--ink) 0%, rgba(8,9,10,0.6) 14%, transparent 38%),
    linear-gradient(to top, rgba(8,9,10,0.62) 0%, transparent 32%),
    linear-gradient(rgba(28,24,16,0.18), rgba(28,24,16,0.18));
}

/* İmza: dokunan ipek filamentleri */
/* canvas yer değiştirilmiş bir elemandır: inset:0 onu germez,
   ölçüyü açıkça vermek gerekir — yoksa 300×150'de kalır. */
/* Not: burada mix-blend-mode kullanmıyoruz. Filamentler zaten şeffaf zemine
   açık renkle çiziliyor; blend modu katmanı izole edip altındaki fotoğrafı
   karartıyordu. */
.hero__loom {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  /* %1'lik boya: gözle görülmez, ama katmanın boş kalmasını engeller.
     Tamamen boş bir canvas katmanı bazı derleyicilerde opak siyah rasterlenip
     altındaki fotoğrafı yutuyor. */
  background: rgba(10, 16, 14, 0.01);
  opacity: 0;
  animation: loomIn 2.4s 0.5s var(--ease) forwards;
  pointer-events: none;
}
@keyframes loomIn { to { opacity: 0.85; } }

.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding: 0 clamp(1.5rem, 3.5vw, 3.5rem) clamp(3.5rem, 8vw, 7rem) var(--gutter);
}

.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

.hero__title { max-width: 14ch; font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
/* Üç satırlık başlık: yükseklik taşmasın diye bir tık küçük, satırlar daha sıkı */
.hero__title--triple {
  max-width: 16ch;
  font-size: clamp(2.05rem, 4.3vw, 4.35rem);
  line-height: 1.0;
}
.hero__title--triple em { color: var(--iznik); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: riseIn 1.15s var(--ease) forwards;
}
@keyframes riseIn { to { transform: translateY(0); } }

.hero__foot {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}
.hero__lede { max-width: 42ch; font-size: 1.02rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Girişte kademeli açılım */
.stagger { opacity: 0; transform: translateY(22px); animation: fadeUp 1s var(--ease) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 8vw, 7rem);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--silk-45);
  writing-mode: vertical-rl;
  opacity: 0;
  animation: fadeUp 1s 1.9s var(--ease) forwards;
}
.hero__scroll i {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(var(--iznik), transparent);
  animation: thread 2.6s var(--ease-io) infinite;
}
@keyframes thread {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Sayfa başlığı (iç sayfalar) */
.pagehead {
  padding-top: calc(var(--header-h) + clamp(4.5rem, 10vw, 9rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.pagehead__inner { position: relative; z-index: 2; }
.pagehead .display { font-size: clamp(2.6rem, 7.5vw, 6.4rem); }
.pagehead__lede { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.pagehead__loom {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  background: rgba(10, 16, 14, 0.01);
  opacity: 0.55; pointer-events: none;
}

/* ---------- 8. Manifesto ------------------------------------------------ */
.manifesto { border-block: 1px solid var(--line-soft); }
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.manifesto__body p + p { margin-top: 1.15rem; }
.manifesto__quote {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.1vw, 2.7rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  font-weight: 400;
}
.manifesto__quote em { font-style: italic; color: var(--iznik); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.2rem) 0.25rem; }
.stat__n {
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  font-weight: 500;
}
.stat__l {
  margin-top: 0.7rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--silk-45);
}

/* ---------- 9. Koleksiyon indeksi (imza etkileşim) ---------------------- */
.index {
  --index-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  /* Sahne oranı. Aşağıdaki fr değeriyle AYNI kalmalı — biri ızgarayı,
     diğeri mutlak konumlu sahnenin genişliğini kurar. */
  --index-stage: 1.15;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--index-gap);
  align-items: start;
}

/* Liste konumlandırılmamalı: aksi hâlde mutlak konumlu sahne
   kendi sütununa hapsolur ve isimlerin üstüne biner. */
.index__list { position: static; }

.index__item { border-bottom: 1px solid var(--line-soft); }
.index__item:first-child { border-top: 1px solid var(--line-soft); }

.index__link {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.15rem, 2.4vw, 1.9rem);
  transition: padding-left 0.5s var(--ease);
}
.index__item.is-active .index__link { padding-left: clamp(0.6rem, 1.6vw, 1.4rem); }

.index__idx {
  font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--silk-22);
  transition: color 0.4s var(--ease);
  font-variant-numeric: tabular-nums;
}
.index__item.is-active .index__idx { color: var(--iznik); }

.index__name {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.6vw, 3.7rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--silk-45);
  transition: color 0.45s var(--ease);
}
.index__item.is-active .index__name { color: var(--silk); }

.index__note {
  font-size: 0.68rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--silk-22);
  text-align: right;
  transition: color 0.4s var(--ease);
}
.index__item.is-active .index__note { color: var(--silk-45); }

/* Sahne: sticky görsel */
.index__media {
  position: absolute;
  top: 0; right: 0;
  /* Sahne genişliği ızgara oranından türetilir: stage / (1 + stage) */
  width: calc((100% - var(--index-gap)) * var(--index-stage) / (1 + var(--index-stage)));
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.index__item.is-active .index__media { opacity: 1; }

/* Üç mekân görseli: üstte geniş bir kare, altında yan yana iki dikey kare.
   Böylece hem yatay hem dikey çekimler kendi oranına yakın bir kutuya oturur
   ve kırpılma göze batmaz. Sahne mutlak konumlu kalır (sağ sütun), içindeki
   yığın sticky durur. */
.index__stack {
  position: sticky;
  top: calc(var(--header-h) + 3vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.index__media figure {
  overflow: hidden;
  background: var(--ink-2);
  margin: 0;
}
.index__shot {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}
/* Küçük kareler tek sütun kaplar ve dikey orana geçer */
.index__shot--s { grid-column: auto; aspect-ratio: 3 / 4; }
/* Mekân çekimi kareyi doldurur — .tile'ın ürün davranışı buraya sızmasın */
.index__shot img {
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
}
.index__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
  filter: saturate(0.75) contrast(1.02);
}
.index__item.is-active .index__media img { transform: scale(1); }

.index__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(10,16,14,0.9), transparent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silk-70);
}

/* ---------- 10. Kart ızgaraları ----------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  transition: border-color 0.5s var(--ease);
  display: block;
}
.card:hover { border-color: var(--iznik-dim); }

.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) brightness(0.88);
  transition: transform 1.2s var(--ease), filter 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); filter: saturate(0.95) brightness(1); }

.card__body { padding: clamp(1.2rem, 2.2vw, 1.8rem); }
.card__title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.card__meta {
  margin-top: 0.55rem;
  font-size: 0.68rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--silk-45);
}
.card__text { margin-top: 0.85rem; font-size: 0.95rem; color: var(--silk-70); }

/* Kategori kartı — görsel üstü etiket */
.cat { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.cat__media { aspect-ratio: 3 / 4; }
.cat__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.6) brightness(0.72);
  transition: transform 1.3s var(--ease), filter 0.8s var(--ease);
}
.cat:hover .cat__media img { transform: scale(1.06); filter: saturate(0.9) brightness(0.92); }
.cat__label {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: linear-gradient(to top, rgba(10,16,14,0.92), transparent);
}
.cat__name { font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.1; }
.cat__n { font-size: 0.64rem; letter-spacing: 0.2em; color: var(--silk-45); flex: none; }

/* ---------- 11. Hizmetler ----------------------------------------------- */
.svc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.svc__ico {
  width: 44px; height: 44px;
  color: var(--iznik);
  flex: none;
}
.svc__ico svg { width: 100%; height: 100%; }
.svc__t { font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
.svc__d { margin-top: 0.8rem; color: var(--silk-70); max-width: 60ch; font-size: 1rem; }
.svc__list { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.svc__list li {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--silk-45);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
}

/* ---------- 12. Süreç (gerçek sıralı adımlar) --------------------------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line-soft); list-style: none; margin: 0; padding: 0; }
.step {
  counter-increment: step;
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--iznik);
  line-height: 1;
}
.step__t { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.step__d { margin-top: 0.6rem; color: var(--silk-70); font-size: 0.98rem; max-width: 62ch; }

/* ---------- 13. Projeler ------------------------------------------------ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.proj { position: relative; overflow: hidden; background: var(--ink-2); display: block; grid-column: span 12; }
.proj img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.62) brightness(0.8);
  transition: transform 1.3s var(--ease), filter 0.8s var(--ease);
}
.proj:hover img { transform: scale(1.045); filter: saturate(0.92) brightness(0.95); }
.proj__cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  background: linear-gradient(to top, rgba(10,16,14,0.94), transparent);
}
.proj__t { font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.proj__m { margin-top: 0.4rem; font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--silk-45); }

@media (min-width: 700px) {
  .proj { grid-column: span 6; aspect-ratio: 4 / 3; }
  .proj--wide { grid-column: span 12; aspect-ratio: 16 / 7; }
  .proj--tall { grid-column: span 6; aspect-ratio: 3 / 4; }
}
@media (min-width: 1080px) {
  .proj { grid-column: span 4; }
  .proj--wide { grid-column: span 8; aspect-ratio: 4 / 3; }
  .proj--tall { grid-column: span 4; aspect-ratio: 3 / 4; }
}

/* ---------- 14. Açık yüzey (ipek) --------------------------------------- */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
}
.paper .eyebrow { color: rgba(20, 22, 26, 0.55); }
.paper .eyebrow::before { background: #8A6D33; }
.paper .lede, .paper .muted { color: rgba(20, 22, 26, 0.68); }
.paper .accent { color: #8A6D33; }
.paper .btn { border-color: rgba(20, 22, 26, 0.28); color: var(--paper-ink); }
.paper .btn::before { background: var(--paper-ink); }
.paper .btn:hover { color: var(--paper); border-color: var(--paper-ink); }
.paper .btn--solid { background: #8A6D33; border-color: #8A6D33; color: var(--paper); }
.paper .btn--solid::before { background: var(--paper-ink); }
.paper .btn--solid:hover { color: var(--paper); }
.paper .filament {
  background: linear-gradient(90deg, transparent, rgba(20,22,26,0.14) 20%, rgba(30,122,103,0.5) 50%, rgba(20,22,26,0.14) 80%, transparent);
}
.paper .step { background: var(--paper); }
.paper .steps { background: rgba(20, 22, 26, 0.12); }
.paper .step::before { color: #8A6D33; }
.paper .step__d { color: rgba(20, 22, 26, 0.7); }

/* ---------- 15. Form ---------------------------------------------------- */
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: 0.55rem; }
.field label {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(20, 22, 26, 0.55);
}
.field__req { color: #8A6D33; letter-spacing: 0; }
.field__opt { color: rgba(20, 22, 26, 0.38); letter-spacing: 0.1em; text-transform: none; font-size: 0.62rem; }
/* Örnek metinler — hangi alana ne yazılacağını gösterir */
.field input::placeholder, .field textarea::placeholder {
  color: rgba(20, 22, 26, 0.32);
  font-size: 0.92rem;
}
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 22, 26, 0.25);
  padding: 0.7rem 0;
  font-size: 1rem;
  font-weight: 300;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: #8A6D33;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; cursor: pointer; }
.field--half { }
.form__row { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form__note { font-size: 0.82rem; color: rgba(20, 22, 26, 0.55); line-height: 1.6; }
.form__status { font-size: 0.85rem; color: #8A6D33; min-height: 1.2em; }

/* ---------- 16. İletişim ------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.info dt {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--silk-45);
  margin-top: 1.9rem;
}
.info dt:first-child { margin-top: 0; }
.info dd { margin: 0.55rem 0 0; font-size: 1.05rem; line-height: 1.55; }
.info dd a { border-bottom: 1px solid var(--line); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.info dd a:hover { color: var(--iznik); border-color: var(--iznik); }

.map {
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  width: 100%;
  filter: grayscale(1) invert(0.92) contrast(0.86) hue-rotate(150deg);
}

/* ---------- 17. CTA şeridi ---------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.cta-band .display { font-size: clamp(2.1rem, 5.4vw, 4.4rem); max-width: 16ch; }

/* ---------- 18. Footer -------------------------------------------------- */
.footer { border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--silk-45); font-weight: 500;
  margin-bottom: 1.1rem;
}
.footer li + li { margin-top: 0.6rem; }
.footer a { font-size: 0.94rem; color: var(--silk-70); transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--iznik); }
.footer__brand p { margin-top: 1.2rem; max-width: 38ch; font-size: 0.94rem; color: var(--silk-45); }
/* Footer'da logo başlıktakinden belirgin büyük dursun */
.footer__brand .brand__logo { height: clamp(34px, 4.5vw, 52px); }
.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.76rem; color: var(--silk-45);
}

/* Sosyal */
.social { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.social a:hover { border-color: var(--iznik); color: var(--iznik); }
.social svg { width: 17px; height: 17px; }

/* ---------- 19. Mobil menü ---------------------------------------------- */
.burger {
  display: none;
  width: 42px; height: 42px;
  place-items: center;
  position: relative;
  z-index: 120;
}
.burger i {
  display: block; width: 22px; height: 1px; background: var(--silk);
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--silk);
  transition: transform 0.45s var(--ease);
}
.burger i::before { top: -7px; }
.burger i::after { top: 7px; }
body.menu-open .burger i { background: transparent; }
body.menu-open .burger i::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger i::after { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ink);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease);
  overflow-y: auto;
}
body.menu-open .drawer { transform: translateY(0); }
.drawer[hidden] { display: none; }

.drawer__nav li { overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.drawer__nav a {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3rem);
  padding-block: 0.6em 0.45em;
  line-height: 1;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease), color 0.3s var(--ease);
  transition-delay: var(--d, 0s);
}
body.menu-open .drawer__nav a { transform: translateY(0); }
.drawer__nav a:hover { color: var(--iznik); }

.drawer__foot { margin-top: 2.5rem; }
.drawer__foot .btn { width: 100%; justify-content: center; }

/* ---------- 20. Kayan bant --------------------------------------------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  --dur: 42s;
}
.ticker__track { display: flex; width: max-content; animation: slide var(--dur) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  padding-inline: clamp(1.2rem, 3vw, 2.5rem);
  color: var(--silk-45);
  white-space: nowrap;
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem);
}
.ticker__item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--iznik); flex: none;
}

/* ---------- 21. Scroll reveal ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Ölçek: görsel maskeleme */
.reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); transition-delay: var(--d, 0s); }
.reveal-img.is-in { clip-path: inset(0 0 0 0); }

/* ---------- 22. WhatsApp yüzer -------------------------------------------*/
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--iznik);
  color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transform: scale(0);
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease);
}
.wa.is-in { transform: scale(1); }
.wa:hover { background: var(--silk); }
.wa svg { width: 26px; height: 26px; }

/* ---------- 23. Duyarlı ------------------------------------------------- */
@media (max-width: 1080px) {
  .index { grid-template-columns: 1fr; }
  .index__media {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1;
    margin-bottom: 1.1rem;
  }
  .index__media { position: static; top: auto; }
  .index__media figure { position: static; height: auto; }
  .index__media img { transform: none; }
  .index__item { border-bottom: 0; padding-bottom: clamp(2rem, 5vw, 3rem); }
  .index__item:first-child { border-top: 0; }
  .index__link { padding-block: 0 0.5rem; border-bottom: 1px solid var(--line-soft); padding-bottom: 1rem; }
  .index__item.is-active .index__link { padding-left: 0; }
  .index__name { color: var(--silk); }
  .index__idx { color: var(--iznik); }
  .manifesto__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .burger { display: grid; }
  .header__inner { grid-template-columns: 1fr auto; }
  .header__actions .btn { display: none; }
  .hero__scroll { display: none; }
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .hero__pane { min-height: 66svh; }
  .hero__inner { padding-inline: var(--gutter); }
  .hero__figure { height: 44svh; }
  .hero__figure::before {
    background:
      linear-gradient(to bottom, var(--ink) 0%, rgba(10,16,14,0.35) 7%, transparent 20%),
      linear-gradient(rgba(21,52,44,0.16), rgba(21,52,44,0.16));
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
  .svc { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__name { font-size: 1.15rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* Geniş ekranda hero biraz daha nefes alsın */
@media (min-width: 1600px) {
  .hero__title { max-width: 13ch; }
}

/* ---------- 24. Hareket azaltma ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__title .line > span { transform: none; }
  .stagger, .reveal { opacity: 1; transform: none; }
  .reveal-img { clip-path: none; }
  .hero__bg img { transform: none; }
  .ticker__track { animation: none; }
  .wa { transform: scale(1); }
}

/* ---------- 25. Koleksiyon açılımı (iç sayfa) --------------------------- */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6.5rem);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.spread:nth-of-type(even) .spread__media { order: 2; }
.spread__media { position: relative; overflow: hidden; background: var(--ink-2); }
.spread__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(0.72) brightness(0.9);
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}
.spread:hover .spread__media img { transform: scale(1.035); filter: saturate(0.95) brightness(1); }
.spread__idx {
  position: absolute; top: 0; left: 0;
  padding: 0.9rem 1.2rem;
  background: var(--ink);
  font-size: 0.68rem; letter-spacing: 0.22em; color: var(--iznik);
}
.spread__name { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1; }
.spread__tag {
  margin-top: 0.9rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--iznik);
}
.spread__d { margin-top: 1.4rem; color: var(--silk-70); max-width: 52ch; }
.spread__spec { margin-top: 1.8rem; display: grid; gap: 0.75rem; }
.spread__spec div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.spread__spec dt { color: var(--silk-45); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 0.28rem; }
.spread__spec dd { margin: 0; color: var(--silk-70); }
.spread__cta { margin-top: 2rem; }

@media (max-width: 860px) {
  .spread { grid-template-columns: 1fr; }
  .spread:nth-of-type(even) .spread__media { order: 0; }
  .spread__spec div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- 26. Sabit yan başlık (hizmetler) --------------------------- */
.sticky-col { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
@media (max-width: 1080px) { .sticky-col { position: static; } }


/* ---------- 28. Ürün kataloğu ------------------------------------------- */
/* Üretici görselleri beyaz zeminli stüdyo çekimleri. İpek rengi bir karo
   üzerine `multiply` ile bindirilince beyaz zemin kaybolur, ürün karonun
   üstünde duruyormuş gibi görünür. İzolasyon şart: yoksa koyu sayfayla karışır. */
.tile {
  position: relative;
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 5%;
  transition: transform 1s var(--ease);
}

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters + .filters { margin-top: 0.75rem; }
.chip {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.58rem 1.05rem;
  border: 1px solid var(--line);
  color: var(--silk-45);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--silk); border-color: var(--silk-22); }
.chip[aria-pressed="true"] {
  background: var(--silk); border-color: var(--silk); color: var(--ink); font-weight: 500;
}

.filters__label {
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--silk-22);
  align-self: center;
  margin-right: 0.4rem;
}

.prod-count {
  margin-top: 1.75rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--silk-45);
}

.prods {
  margin-top: 1.75rem;
  display: grid;
  gap: clamp(0.75rem, 1.7vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.prod {
  position: relative;          /* hızlı ekleme düğmesi buna göre konumlanır */
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.prod[hidden] { display: none; }
.prod .tile { aspect-ratio: 4 / 3; }
.prod:hover .tile img, .prod:focus-visible .tile img { transform: scale(1.045); }
.prod__col {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 0.6rem 0.85rem;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(20, 22, 26, 0.45);
}
.prod .tile { display: block; }
.prod__name {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.22;
  color: var(--silk);
}
.prod__type {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--silk-45);
}

.empty {
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  color: var(--silk-45);
}

/* ---------- 29. Ürün sayfası (modal) ------------------------------------ */
.sheet {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(0.75rem, 4vw, 3rem);
  background: rgba(5, 9, 8, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.sheet.is-open { opacity: 1; visibility: visible; }

.sheet__box {
  position: relative;
  width: min(940px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  transform: translateY(16px);
  transition: transform 0.5s var(--ease);
}
.sheet.is-open .sheet__box { transform: none; }

.sheet__media { min-height: 260px; }
.sheet__media img { padding: 7%; }

.sheet__body {
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  align-items: flex-start;
}
.sheet__col { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--iznik); }
.sheet__name { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.08; }
.sheet__d { color: var(--silk-70); font-size: 0.96rem; }
.sheet__spec { width: 100%; display: grid; gap: 0.6rem; }
.sheet__spec div {
  display: grid; grid-template-columns: 8rem 1fr; gap: 0.8rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
}
.sheet__spec dt { color: var(--silk-45); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 0.25rem; }
.sheet__spec dd { margin: 0; color: var(--silk-70); }

.sheet__close {
  position: absolute; top: 0; right: 0; z-index: 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--silk);
  background: rgba(10, 16, 14, 0.55);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.sheet__close:hover { color: var(--iznik); background: var(--ink); }
.sheet__close svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .sheet__box { grid-template-columns: 1fr; }
  .sheet__spec div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Koleksiyon sahnesi ve açılımı da ürün karosu kullanır */
.index__media figure.tile, .spread__media.tile { background: var(--paper); }
.index__media .tile img { filter: none; }
.spread__media.tile img { aspect-ratio: 4 / 3; filter: none; }
.spread:hover .spread__media.tile img { transform: scale(1.03); }

/* ---------- 30. Doku katmanı -------------------------------------------
   İnce bir kâğıt dokusu. Düz dijital siyahı kırıp basılı bir katalog hissi
   verir — koyu yüzeylerde lüks algısını en çok yükselten tek müdahale. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* Karolara derinlik: uzun ve yumuşak gölge + ince üst ışık */
.tile {
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.85);
}
.tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 0 60px rgba(20, 22, 26, 0.07);
}
/* ---------- 30a. Koleksiyon mekân galerisi ------------------------------ */
/* Tüm kareler aynı oranda — görseller farklı en/boy geliyor, object-fit ile
   ortadan kırpılıp tek bir ızgara ritmi kuruluyor. */
.kgal {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.kgal__i {
  display: block; padding: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  cursor: zoom-in;
}
.kgal__i img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.kgal__i:hover img { transform: scale(1.05); }

/* Görsel büyütme */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 5, 6, 0.94);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__stage { min-width: 0; display: grid; justify-items: center; gap: 1rem; }
.lightbox__img {
  max-width: 100%; max-height: 80svh;
  object-fit: contain;
}
.lightbox__cap {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silk-45);
  text-align: center;
}
.lightbox__n { color: var(--iznik); margin-left: 0.5rem; }
.lightbox__nav {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 2rem; line-height: 1;
  color: var(--silk-70);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox__nav:hover { color: var(--iznik); border-color: var(--iznik); }
.lightbox__close {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 2rem);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--silk-70);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  z-index: 2;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox__close svg { width: 14px; height: 14px; }
.lightbox__close:hover { color: var(--iznik); border-color: var(--iznik); }

/* ---------- 30b. Proje galerisi ----------------------------------------- */
.pgrid {
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pcard {
  position: relative; overflow: hidden; background: var(--ink-2);
  display: block; width: 100%; padding: 0; text-align: left;
  cursor: pointer;
}
.pcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.06); filter: saturate(0.95) contrast(1.05); }
.pcard__cap {
  position: absolute; inset: auto 0 0 0;
  display: block;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: linear-gradient(to top, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.55) 55%, transparent 100%);
}
.pcard__t {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.2;
}
.pcard__m {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--iznik);
}
.pcard__n { color: var(--silk-45); }

/* Sanal tur yönlendirme kutusu */
.tour-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.tour-teaser__fig { aspect-ratio: 16 / 10; display: block; }
.tour-teaser__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .tour-teaser { grid-template-columns: 1fr; } }

/* Sanal tur çerçevesi */
.tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.tour__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: 1.2rem;
}
.tour__foot .muted { font-size: 0.82rem; }
@media (max-width: 640px) { .tour__frame { aspect-ratio: 3 / 4; } }

/* ---------- 31. Hizmet kapsamı listesi ---------------------------------- */
.caps { counter-reset: cap; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.caps__i {
  counter-increment: cap;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  border-bottom: 1px solid rgba(20, 22, 26, 0.14);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.2;
  transition: color 0.35s var(--ease);
}
.caps__i:first-child { border-top: 1px solid rgba(20, 22, 26, 0.14); }
.caps__i::before {
  content: counter(cap, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: #8A6D33;
}
.caps__i:hover { color: #8A6D33; }
/* Koyu zeminde de kullanılabilsin */
.caps--dark .caps__i { border-color: var(--line-soft); }
.caps--dark .caps__i:first-child { border-top-color: var(--line-soft); }
.caps--dark .caps__i::before { color: var(--iznik); }
.caps--dark .caps__i:hover { color: var(--iznik); }

/* ---------- 32. Teklif listesi ------------------------------------------ */
.sheet__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; width: 100%; }
.sheet__actions .btn { flex: 1 1 auto; justify-content: center; }
.sheet__media { position: relative; }
.sheet__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 5%;
}
#sheet-quote.is-done { background: var(--iznik); border-color: var(--iznik); color: #fff; }

/* Başlıktaki "Teklif listem" düğmesi ve sayacı */
.btn--quote { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; }
.qbadge {
  display: none;
  min-width: 1.35rem; height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--iznik);
  color: #fff;
  font-size: 0.68rem; font-weight: 500;
  line-height: 1.35rem; text-align: center;
  letter-spacing: 0;
}
.qbadge.is-on { display: inline-block; }

/* Ürün kartındaki hızlı ekleme düğmesi */
.q-add {
  position: absolute;
  right: 0.6rem; top: 0.6rem;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  background: rgba(10, 16, 14, 0.62);
  backdrop-filter: blur(8px);
  color: var(--silk);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.q-add svg { width: 15px; height: 15px; }
.prod:hover .q-add, .prod:focus-within .q-add, .q-add:focus-visible {
  opacity: 1; transform: translateY(0);
}
.q-add:hover { background: var(--iznik); border-color: var(--iznik); color: #fff; }
.q-add.is-done { animation: qpop 0.5s var(--ease); background: var(--iznik); border-color: var(--iznik); color: #fff; }
@keyframes qpop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* Dokunmatikte hover yok — düğme hep görünsün */
@media (hover: none) { .q-add { opacity: 1; transform: none; } }

/* Bildirim */
.q-toast {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  transform: translate(-50%, 1.5rem);
  z-index: 200;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  color: var(--silk);
  padding: 0.85rem 1.4rem;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  max-width: calc(100vw - 2rem);
}
.q-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Boş liste */
.quote-empty {
  border: 1px solid var(--line-soft);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  display: grid; justify-items: center; gap: 1rem;
}
.quote-empty[hidden] { display: none; }
.quote-empty__t { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); }
.quote-empty__d { color: var(--silk-70); max-width: 46ch; }
.quote-empty .btn { margin-top: 1rem; }

/* Liste başlığı */
.quote-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.tlink--quiet { color: var(--silk-45); font-size: 0.72rem; }
.tlink--quiet:hover { color: var(--iznik); }

/* Satırlar */
.quote-list { list-style: none; margin: 0; padding: 0; }
.qrow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: start;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.qrow__img { width: 110px; aspect-ratio: 1; display: block; }
.qrow__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.qrow__main { min-width: 0; }
.qrow__col {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--silk-45);
}
.qrow__name { font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.25; margin-top: 0.35rem; }
.qrow__type { font-size: 0.78rem; color: var(--silk-70); margin-top: 0.3rem; }
.qrow__notelab { display: block; margin-top: 0.9rem; }
.qrow__note {
  width: 100%; max-width: 42ch;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 0.45rem 0;
  font-size: 0.86rem;
  border-radius: 0;
  color: var(--silk);
}
.qrow__note:focus { outline: none; border-bottom-color: var(--iznik); }
.qrow__note::placeholder { color: var(--silk-22); }

.qrow__side { display: grid; justify-items: end; gap: 0.8rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-soft); }
.qty__b {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--silk-70);
  font-size: 1rem; line-height: 1;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.qty__b:hover { color: var(--silk); background: rgba(239, 232, 219, 0.06); }
.qty__i {
  width: 46px; height: 34px;
  text-align: center;
  background: transparent;
  border: 0; border-inline: 1px solid var(--line-soft);
  color: var(--silk);
  font-size: 0.9rem;
  border-radius: 0;
  -moz-appearance: textfield;
}
.qty__i::-webkit-outer-spin-button, .qty__i::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qty__i:focus { outline: none; background: rgba(239, 232, 219, 0.06); }
.qrow__del { font-size: 0.72rem; color: var(--silk-45); transition: color 0.25s var(--ease); }
.qrow__del:hover { color: var(--iznik); }

/* Form bloğu açık zeminde — koyu sayfa içinde bir kâğıt gibi durur */
.quote-form-wrap {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(1.75rem, 5vw, 4rem);
}
.quote-form-wrap .eyebrow { color: rgba(20, 22, 26, 0.55); }
.quote-form-wrap .lede { color: rgba(20, 22, 26, 0.72); }
.quote-form-wrap .h2 { color: var(--paper-ink); }

@media (max-width: 720px) {
  .qrow {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "img main" "side side";
    row-gap: 1rem;
  }
  .qrow__img { width: 84px; grid-area: img; }
  .qrow__main { grid-area: main; }
  .qrow__side {
    grid-area: side;
    justify-items: stretch;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
  }
  .qrow__del { text-align: right; }
}

/* ---------- 32. Yazdırma ------------------------------------------------ */
@media print {
  .header, .drawer, .wa, .hero__loom, .ticker, .q-add, .qrow__side { display: none !important; }
  body { background: #fff; color: #000; }
}