/* ============================================================================
   DEPO YAPI MARKET — Tasarım sistemi
   ORYZO "darkroom editorial" dilinin seramik & yapı sektörüne uyarlaması.
   Sıcak koyu zemin, krem tipografi, tek turuncu vurgu, gölgesiz derinlik.
   ========================================================================== */

:root {
  /* Renk — aydınlık palet.
     Koyu temanın sıcak ailesi korunur, kutuplar ters çevrilir:
     zemin kemik beyazı, metin sıcak siyah, tek turuncu vurgu. */
  --paper:    #f8f3ec;   /* sayfa zemini — sıcak kemik, saf beyaz değil */
  --surface:  #fffdf9;   /* yükseltilmiş kart yüzeyi */
  --sunken:   #ece2d3;   /* görsel arkası, boş yüzey */
  --ink:      #151210;   /* firma siyahı — ana metin ve koyu yüzeyler */
  --deep:     #151210;   /* dolu koyu yüzey */
  --line:     #e2dbcd;   /* saç teli ayraç */
  --line-2:   #c6bba7;   /* belirgin ayraç */
  --muted:    #6f6656;   /* ikincil metin */

  /* Firma renkleri: sarı + siyah.
     Sarı bir DOLGU rengidir — üstüne daima siyah metin gelir (11.5:1).
     Açık zeminde sarı metin okunmaz; vurgu METNİ için koyu tonu kullanılır. */
  --brand:      #ffc300;   /* dolgu sarısı — CTA, rozet, seçili durum */
  --brand-dark: #e3ac00;   /* sarı kenarlık / hover */
  --accent:     #7a5200;   /* sarının koyu tonu — vurgu metni, 6.4:1 */
  --wa:         #25d366;   /* WhatsApp yeşili */
  --wa-dark:    #1da851;

  --ink-70: rgba(21, 18, 16, .80);
  --ink-45: rgba(21, 18, 16, .62);
  --ink-22: rgba(21, 18, 16, .24);
  --ink-10: rgba(21, 18, 16, .10);
  --ink-06: rgba(21, 18, 16, .05);

  /* Tipografi */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-legal: Arial, ui-sans-serif, system-ui, sans-serif;

  /* Açık zeminde koyu metin, koyu zeminde açık metne göre optik olarak daha
     ince görünür. Tema çevrilince kaybedilen ağırlık burada geri veriliyor. */
  --fw-body: 450;      /* karışık kutu gövde metni */
  --fw-ui: 600;        /* menü, etiket, buton, tablo başlığı */
  --fw-display: 700;   /* büyük başlıklar */
  --fw-mark: 800;      /* logo yazımı */

  --t-legal: 8px;
  --t-micro: 10px;
  --t-label: 12px;
  --t-nav: 14px;
  --t-sub: 18px;
  --t-h-sm: 24px;
  --t-body: 29px;
  --t-h: 41px;
  --t-display: 51px;

  /* Boşluk */
  --s-6: 6px;  --s-8: 8px;   --s-10: 10px; --s-12: 12px; --s-14: 14px;
  --s-18: 18px; --s-24: 24px; --s-31: 31px; --s-41: 41px; --s-45: 45px;
  --s-68: 68px; --s-204: 204px;

  /* Yarıçap */
  --r-card: 12px;
  --r-pill: 36px;
  --r-ghost: 22.5px;
  --r-full: 9999px;

  --gutter: clamp(18px, 4vw, 68px);
  --nav-h: 68px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------- temeller */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--fw-ui);
  font-size: var(--t-nav);
  line-height: 1.26;
  font-feature-settings: 'ss01' on, 'cv11' on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --------------------------------------------------------------- tipografi */

.u,
h1, h2, h3, h4, h5, h6,
.nav a, .btn, .label, .eyebrow {
  text-transform: uppercase;
  font-weight: var(--fw-ui);
  letter-spacing: normal;
}

/* Büyük başlıklar bir kademe daha kalın — 0.9 satır yüksekliğindeki
   heykelsi blok etkisi ancak bu ağırlıkta kuruluyor. */
.display, .h1, .h2, h1, h2 { font-weight: var(--fw-display); }

/* 14px altındaki tümü büyük harf etiketlerde çok hafif bir harf aralığı;
   küçük puntoda kapanan formları açar. */
.label, .micro, .legal, .eyebrow, .nav__links a, .chip, .prod__meta,
.prod__cat, .prod__link, .cat__go, .proj__meta, .proj__loc, .disc-sub {
  letter-spacing: .015em;
}

h1, h2, h3, h4 { margin: 0; line-height: .9; }

.display {
  font-size: clamp(38px, 8.2vw, 94px);
  line-height: .88;
  text-transform: uppercase;
  font-weight: var(--fw-display);
}

.h1 { font-size: clamp(30px, 5.2vw, var(--t-display)); line-height: .9; text-transform: uppercase; }
.h2 { font-size: clamp(26px, 4.1vw, var(--t-h)); line-height: .9; text-transform: uppercase; }
.h3 { font-size: clamp(19px, 2.2vw, var(--t-h-sm)); line-height: 1.09; text-transform: uppercase; }
.h4 { font-size: var(--t-sub); line-height: 1; text-transform: uppercase; }

/* Sistemin tek "konuşan" sesi: karışık kutu, 400 ağırlık. */
.body-lg {
  font-size: clamp(18px, 2.1vw, var(--t-body));
  line-height: 1.26;
  font-weight: var(--fw-body);
  text-transform: none;
}
.body {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.62;
  font-weight: var(--fw-body);
  text-transform: none;
  color: var(--ink-70);
}

.label   { font-size: var(--t-label); }
.micro   { font-size: 11px; text-transform: uppercase; font-weight: var(--fw-ui); }
.legal   { font-family: var(--font-legal); font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.accent  { color: var(--accent); font-weight: var(--fw-ui); }
.muted   { color: var(--ink-45); }

/* ---------------------------------------------------------------- düzen */

.wrap { padding-inline: var(--gutter); }
.section { padding-block: clamp(68px, 11vw, 168px); position: relative; }
.section--tight { padding-block: clamp(45px, 7vw, 100px); }

.rule { height: 0; border: 0; border-top: 1px dashed var(--line); margin: 0; }
.rule--solid { border-top-style: solid; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: var(--s-41) var(--s-68);
  align-items: end;
  margin-bottom: var(--s-45);
}
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  font-size: var(--t-label);
  color: var(--accent);
  margin-bottom: var(--s-18);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--brand);
  flex: none;
}

/* --------------------------------------------------------------- butonlar */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  font-size: 12.5px;
  font-weight: var(--fw-ui);
  line-height: 1;
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Sayfada tek dolu CTA — nadirliği sinyaldir. */
.btn--fill {
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: var(--s-14) var(--s-24);
}
.btn--fill:hover { background: var(--ink); color: var(--brand); }

.btn--ghost {
  border: 1px solid var(--ink);
  border-radius: var(--r-ghost);
  padding: 7.5px var(--s-18);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--link {
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ink-22);
  padding-bottom: 4px;
}
.btn--link:hover { border-bottom-color: var(--accent); color: var(--accent); }

.btn--sm { font-size: 11.5px; padding: 6px var(--s-14); }

/* ------------------------------------------------------- ilerleme + navigasyon */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--ink);
  z-index: 90;
  transition: width .1s linear;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  isolation: isolate;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding-inline: var(--gutter);
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(248, 243, 236, .86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}

/* Şeffafken bile koyu menü yazısı hareketli hero fotoğrafında okunsun diye
   çok yumuşak bir kemik perde. Sabitlenince perde kaybolur, zemin devralır. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--nav-h) * 1.9);
  background: linear-gradient(to bottom, rgba(248, 243, 236, .92), rgba(248, 243, 236, .55) 45%, transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s var(--ease);
}
.nav.is-stuck::before { opacity: 0; }

.brand { display: flex; align-items: baseline; gap: var(--s-8); }
.brand__mark {
  font-size: 16px;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  font-weight: var(--fw-mark);
  white-space: nowrap;
}
.brand__sub {
  font-size: 9px;
  font-family: var(--font-legal);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}

.nav__links { display: flex; align-items: center; gap: var(--s-24); }
.nav__links a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: var(--fw-ui);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--line-2); }
.nav__links a.is-active { color: var(--ink); border-bottom-color: var(--brand); }

.nav__right { display: flex; align-items: center; gap: var(--s-18); }
.nav__phone { font-size: 14px; text-transform: uppercase; font-weight: 700; }

.burger { display: none; width: 34px; height: 34px; position: relative; }
.burger span {
  position: absolute; left: 5px; right: 5px; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { bottom: 12px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__links, .nav__phone { display: none; }
  .burger { display: block; }
}

/* mobil menü */
.menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: var(--paper);
  padding: calc(var(--nav-h) + var(--s-31)) var(--gutter) var(--s-41);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
  overflow-y: auto;
}
.menu.is-open { transform: translateY(0); }
.menu a.menu__item {
  display: block;
  font-size: clamp(30px, 9vw, 58px);
  line-height: .96;
  text-transform: uppercase;
  font-weight: var(--fw-display);
  padding-block: var(--s-10);
  border-bottom: 1px dashed var(--line);
}
.menu a.menu__item:hover { color: var(--accent); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--s-24)) var(--gutter) var(--s-18);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.98) contrast(1.08) brightness(1);
  transform: scale(1.06);
  transition: transform 9s linear;
}
.hero__slide.is-active img { transform: scale(1); }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* Açık zeminde koyu metnin okunabilmesi için güçlü kemik perde:
     sol alt köşe neredeyse düz zemin, sağ üst köşe fotoğrafa açılır. */
  background:
    linear-gradient(to top, var(--paper) 3%, rgba(248, 243, 236, .88) 24%, rgba(248, 243, 236, .22) 62%, transparent 90%),
    linear-gradient(to right, rgba(248, 243, 236, .95) 6%, rgba(248, 243, 236, .58) 34%, rgba(248, 243, 236, .08) 66%, transparent 84%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  font-size: var(--t-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-18);
}
.hero__eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--brand);
  flex: none;
}

.hero__title {
  font-size: clamp(34px, min(9vw, 12.4svh), 112px);
  line-height: .86;
  text-transform: uppercase;
  max-width: 15ch;
  margin-bottom: var(--s-18);
}
.hero__title span { display: block; }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-24) var(--s-45);
  align-items: center;
  margin-top: clamp(14px, 2.6svh, 38px);
  padding-top: var(--s-18);
  border-top: 1px dashed var(--line);
}
.hero__sub {
  max-width: 44ch;
  font-size: clamp(15px, min(1.5vw, 2.4svh), 22px);
}
.hero__cta { display: flex; gap: var(--s-12); flex-wrap: wrap; }

@media (max-width: 720px) {
  .hero__foot { grid-template-columns: 1fr; }
}

/* dikey kenar etiketi — ürün seri numarası gibi */
.side-label {
  position: fixed;
  right: max(6px, calc(var(--gutter) / 2 - 7px));
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: var(--t-micro);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  /* Sabit konumlu etiket hem açık zeminin hem siyah alt bilginin üstünden
     geçiyor; fark karışımı ile zemine göre kendini ters çeviriyor. */
  color: #fff;
  mix-blend-mode: difference;
  opacity: .55;
}
@media (max-width: 980px) { .side-label { display: none; } }

.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-18);
  z-index: 2;
  font-size: var(--t-micro);
  color: var(--ink-45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
}
.scroll-hint::after {
  content: '';
  width: 1px; height: 34px;
  background: linear-gradient(var(--ink-45), transparent);
  animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint { 0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* --------------------------------------------------------------- kayan şerit */

.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: var(--s-14);
  background: var(--paper);
}
.ticker__row { display: flex; width: max-content; animation: ticker 34s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__row span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-18);
  padding-inline: var(--s-18);
  font-size: var(--t-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__row span::after { content: '◆'; color: var(--accent); font-size: 8px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================================
   DÖNEN TABAK — sayfanın imza bölümü
   Sticky sahne + kaydırma ilerlemesine bağlı rotasyon ve yüz geçişi.
   ========================================================================== */

.disc-track { position: relative; }

.disc-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-18);
  padding: calc(var(--nav-h) + var(--s-18)) var(--gutter) var(--s-45);
  overflow: hidden;
}

.disc-stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(120vmin, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(184, 61, 0, .11), transparent 64%);
  opacity: var(--glow, .5);
  pointer-events: none;
  transition: opacity .8s var(--ease);
}

/* yan sütunlar */
.disc-col { position: relative; z-index: 3; }
.disc-col--left { text-align: left; }
.disc-col--right { text-align: left; max-width: 38ch; justify-self: end; }

.disc-code {
  font-family: var(--font-legal);
  font-size: var(--t-legal);
  color: var(--accent);
  margin-bottom: var(--s-12);
}
.disc-title {
  font-size: clamp(24px, 3.5vw, var(--t-h));
  line-height: .9;
  text-transform: uppercase;
  margin-bottom: var(--s-14);
}
.disc-sub {
  font-size: var(--t-label);
  text-transform: uppercase;
  color: var(--ink-45);
  padding-top: var(--s-12);
  border-top: 1px dashed var(--line);
}
.disc-body { margin-bottom: var(--s-24); font-size: clamp(16px, 1.5vw, 23px); }

.disc-stat { display: flex; align-items: baseline; gap: var(--s-10); margin-top: var(--s-18); }
.disc-stat b { font-size: clamp(28px, 3.4vw, 46px); line-height: .9; font-weight: var(--fw-display); }
.disc-stat i { font-style: normal; font-size: var(--t-micro); text-transform: uppercase; color: var(--ink-45); }

/* geçişli metin */
.swap { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.swap.is-out { opacity: 0; transform: translateY(10px); }

/* tabak */
.disc {
  position: relative;
  z-index: 2;
  width: min(58vmin, 520px);
  aspect-ratio: 1;
  justify-self: center;
  will-change: transform;
}

.disc__plate {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--line-2);
  will-change: transform;
}
.disc__face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.disc__face.is-active { opacity: 1; }
.disc__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02) brightness(1);
}
/* kenardan merkeze doğru hafif hacim — gölge değil, ışık */
.disc__plate::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-full);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .30), transparent 48%),
    radial-gradient(circle at 72% 78%, rgba(31, 21, 13, .34), transparent 60%);
  pointer-events: none;
}
/* tabak halkaları */
.disc__plate::before {
  content: '';
  position: absolute;
  inset: 11%;
  z-index: 2;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 0 0 1px rgba(31, 21, 13, .18) inset;
  pointer-events: none;
}

/* dış kadran: çentikler + dönen yazı */
.disc__dial {
  position: absolute;
  inset: -13%;
  pointer-events: none;
  will-change: transform;
}
.disc__dial text { fill: var(--ink-70); font-size: 4.1px; letter-spacing: .34em; text-transform: uppercase; }
.disc__dial .tick { stroke: var(--ink-45); stroke-width: .35; }
.disc__dial .tick--major { stroke: var(--accent); stroke-width: .7; }
.disc__dial .ring { fill: none; stroke: var(--line-2); stroke-width: .3; stroke-dasharray: 1.6 2.4; }

/* uydu karolar */
.disc__sat {
  position: absolute;
  left: 50%; top: 50%;
  width: 13%;
  aspect-ratio: 1;
  margin: -6.5% 0 0 -6.5%;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line-2);
  will-change: transform;
}
.disc__sat img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) brightness(1); }

/* alt ilerleme çubukları */
.disc-progress {
  position: absolute;
  left: 50%;
  bottom: var(--s-24);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: var(--s-8);
  align-items: center;
}
.disc-progress i {
  display: block;
  width: 26px; height: 2px;
  background: var(--ink-22);
  transition: background .4s var(--ease), width .4s var(--ease);
}
.disc-progress i.is-on { background: var(--ink); width: 44px; }

@media (max-width: 980px) {
  .disc-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: var(--s-18);
    text-align: left;
  }
  .disc { width: min(52vmin, 320px); }
  .disc-col--right { justify-self: start; }
  .disc-body { font-size: 15px; }
}

/* --------------------------------------------------------------- kategoriler */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.cat {
  position: relative;
  background: var(--surface);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-24);
  overflow: hidden;
  isolation: isolate;
}
.cat__img { position: absolute; inset: 0; z-index: -2; }
.cat__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(1.02);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
}
.cat::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--surface) 3%, rgba(255, 253, 249, .94) 27%, rgba(255, 253, 249, .22) 58%, transparent 80%);
}
.cat:hover .cat__img img { transform: scale(1.12); filter: saturate(1.05) brightness(1.05); }

.cat__no {
  position: absolute;
  top: var(--s-18); left: var(--s-24);
  font-family: var(--font-legal);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  background: var(--brand);
  padding: 3px 6px;
  border-radius: var(--r-full);
}
.cat__name { font-size: var(--t-h-sm); line-height: 1.05; text-transform: uppercase; font-weight: var(--fw-display); margin-bottom: var(--s-8); }
.cat__desc { font-size: 13px; line-height: 1.5; font-weight: var(--fw-body); color: var(--ink-70); margin-bottom: var(--s-14); }
.cat__go {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: var(--t-micro); text-transform: uppercase;
  color: var(--accent);
}
.cat:hover .cat__go { gap: var(--s-14); }
.cat__go { transition: gap .4s var(--ease); }

/* ------------------------------------------------------------------ ürünler */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap: var(--s-18);
}

.prod {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.prod:hover { border-color: var(--line-2); background: var(--surface); }

.prod__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sunken); }
.prod__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(1);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.prod:hover .prod__media img { transform: scale(1.06); filter: saturate(1.05) brightness(1.04); }

.prod__flag {
  position: absolute;
  top: var(--s-10); left: var(--s-10);
  font-family: var(--font-legal);
  font-size: var(--t-legal);
  text-transform: uppercase;
  background: var(--brand);
  color: var(--ink);
  padding: 4px 7px;
  border-radius: var(--r-full);
}
.prod__body { padding: var(--s-14) var(--s-14) var(--s-18); display: flex; flex-direction: column; gap: var(--s-8); flex: 1; }
.prod__cat { font-size: var(--t-legal); font-family: var(--font-legal); text-transform: uppercase; color: var(--muted); }
.prod__name { font-size: 15px; line-height: 1.16; text-transform: uppercase; font-weight: var(--fw-ui); }
/* Başlık bağlantısı görünmez biçimde tüm kartı kaplar — kartın her yeri tıklanır
   kalırken WhatsApp düğmesi ayrı bir bağlantı olarak üstte durur. */
.prod__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.prod__meta { font-size: var(--t-micro); text-transform: uppercase; color: var(--ink-45); display: flex; flex-wrap: wrap; gap: var(--s-8); }
.prod__meta span::after { content: ' ·'; color: var(--line); }
.prod__meta span:last-child::after { content: ''; }
.prod__foot {
  margin-top: auto;
  padding-top: var(--s-12);
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-10);
}
.prod__link { font-size: var(--t-micro); text-transform: uppercase; color: var(--accent); }

/* "Fiyat al" düğmesi — firma sarısı, WhatsApp işaretiyle kanalı belli eder. */
.wa-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.wa-btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.wa-btn:hover { background: var(--ink); color: var(--brand); }

/* filtre çubuğu */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10);
  align-items: center;
  padding-block: var(--s-18);
  border-block: 1px dashed var(--line);
  margin-bottom: var(--s-31);
}
.chip {
  font-size: 11.5px;
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-ghost);
  padding: 7px var(--s-14);
  transition: border-color .3s, color .3s, background .3s;
}
.chip:hover { border-color: var(--ink-22); }
.chip.is-on { background: var(--brand); color: var(--ink); border-color: var(--brand-dark); }

.field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-22);
  border-radius: 0;
  padding: var(--s-10) var(--s-6);
  min-width: 190px;
  outline: none;
  transition: border-color .3s;
}
.field::placeholder { color: var(--ink-45); text-transform: uppercase; font-size: var(--t-micro); letter-spacing: .04em; }
.field:focus { border-bottom-color: var(--ink); }
select.field { text-transform: uppercase; font-size: var(--t-micro); }
select.field option { background: var(--paper); color: var(--ink); text-transform: none; }

/* sayfalama */
.pager { display: flex; gap: var(--s-8); justify-content: center; align-items: center; margin-top: var(--s-41); flex-wrap: wrap; }
.pager button {
  min-width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  transition: border-color .3s, background .3s, color .3s;
}
.pager button:hover:not(:disabled) { border-color: var(--ink-22); }
.pager button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager button:disabled { opacity: .3; cursor: default; }

/* --------------------------------------------------------- ürün detay sayfası */

.pd {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--s-45) var(--s-68);
  align-items: start;
}
@media (max-width: 940px) { .pd { grid-template-columns: 1fr; } }

.pd__main {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--sunken);
}
.pd__main img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumbs { display: flex; gap: var(--s-8); margin-top: var(--s-10); flex-wrap: wrap; }
.pd__thumbs button {
  width: 84px; aspect-ratio: 1;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color .3s, opacity .3s;
  opacity: .6;
}
.pd__thumbs button.is-on, .pd__thumbs button:hover { border-color: var(--ink); opacity: 1; }
.pd__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spec { width: 100%; border-collapse: collapse; margin-block: var(--s-18); }
.spec th, .spec td {
  text-align: left;
  padding: var(--s-10) 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  vertical-align: top;
}
.spec th { font-weight: var(--fw-ui); text-transform: uppercase; color: var(--ink-45); width: 46%; font-size: var(--t-micro); }
.spec td { font-weight: var(--fw-body); text-transform: none; }

/* Fiyat yerine geçen kutu: fiyat sormayı sayfanın birincil eylemi yapar. */
.ask-box {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--s-18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-18) var(--s-31);
  align-items: center;
  justify-content: space-between;
  margin-block: var(--s-18);
}
.ask-box__text { min-width: min(100%, 240px); flex: 1; }
.ask-box__text b {
  display: block;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  font-weight: var(--fw-display);
  margin-top: 4px;
}
.ask-box__cta { flex: none; }
.ask-box__cta svg { width: 18px; height: 18px; fill: currentColor; }

/* ----------------------------------------------------------------- hizmetler */

.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-45) var(--s-68);
  padding-block: clamp(41px, 6vw, 90px);
  border-bottom: 1px dashed var(--line);
}
.svc-row:nth-child(even) .svc-row__media { order: 2; }
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-row:nth-child(even) .svc-row__media { order: 0; }
}
.svc-row__media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
}
.svc-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(1.01);
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}
.svc-row:hover .svc-row__media img { transform: scale(1.05); filter: saturate(1.05) brightness(1.05); }
.svc-row__no { font-family: var(--font-legal); font-size: var(--t-legal); color: var(--accent); margin-bottom: var(--s-12); }

/* ------------------------------------------------------------------ projeler */

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-18); }
.proj {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--s-18);
  border: 1px solid var(--line);
  isolation: isolate;
}
.proj img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(1.01);
  transition: transform 1.3s var(--ease), filter .8s var(--ease);
}
.proj::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--surface) 4%, rgba(255, 253, 249, .90) 34%, rgba(255, 253, 249, .18) 64%, transparent);
}
.proj:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(1.05); }
.proj__meta { font-size: var(--t-micro); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-6); }
.proj__title { font-size: var(--t-sub); line-height: 1.05; text-transform: uppercase; font-weight: var(--fw-display); }
.proj__loc { font-size: var(--t-micro); text-transform: uppercase; color: var(--ink-45); margin-top: var(--s-6); }

/* ------------------------------------------------------------------ sayılar */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat { background: var(--surface); padding: var(--s-31) var(--s-24); }
.stat b { display: block; font-size: clamp(34px, 5.4vw, 68px); line-height: .88; font-weight: var(--fw-display); margin-bottom: var(--s-8); }
.stat i { font-style: normal; font-size: var(--t-micro); text-transform: uppercase; color: var(--ink-45); }

/* ----------------------------------------------------------------- formlar */

.form { display: grid; gap: var(--s-18); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-18); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: var(--s-6); font-size: 11px; font-weight: var(--fw-ui); text-transform: uppercase; color: var(--ink-70); }
.form textarea.field { min-height: 120px; resize: vertical; }
.form__note { font-size: 12.5px; font-weight: var(--fw-ui); text-transform: none; }
.form__note.is-ok { color: var(--accent); }
.form__note.is-err { color: #b3261e; }

/* -------------------------------------------------------------------- alt bilgi */

.foot { border-top: 1px solid var(--line); padding-top: var(--s-45); background: var(--surface); }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-31) var(--s-41);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

.foot h4 { font-size: var(--t-micro); color: var(--ink-45); margin-bottom: var(--s-14); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.foot li a, .foot li { font-size: 13px; text-transform: uppercase; font-weight: var(--fw-ui); }
.foot li a:hover { color: var(--accent); }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-24);
  justify-content: space-between; align-items: center;
  margin-top: var(--s-41); padding-block: var(--s-18);
  border-top: 1px dashed var(--line);
}

/* whatsapp */
.wa {
  position: fixed;
  right: var(--s-18); bottom: 88px;
  z-index: 70;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--wa);
  border: 1px solid var(--wa-dark);
  display: grid; place-items: center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); transform: translateY(-2px); }
.wa svg { width: 26px; height: 26px; fill: #fff; }

/* --------------------------------------------------------------- animasyon */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-split] > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(2deg);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-split].is-in > span { opacity: 1; transform: none; }

.parallax { will-change: transform; }

/* önyükleme */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { font-size: clamp(24px, 6vw, 51px); text-transform: uppercase; line-height: .9; overflow: hidden; }
.loader__bar { width: min(220px, 50vw); height: 1px; background: var(--line); margin-top: var(--s-18); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s linear; }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  padding: var(--s-45) var(--s-24);
  text-align: center;
  color: var(--ink-45);
  font-size: 13px;
  text-transform: uppercase;
}

.skeleton {
  background: linear-gradient(90deg, var(--ink-06), rgba(31, 21, 13, .11), var(--ink-06));
  background-size: 200% 100%;
  animation: sk 1.4s linear infinite;
  border-radius: var(--r-card);
}
@keyframes sk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-split] > span { opacity: 1; transform: none; }
}

/* Harita: aydınlık Google gömülü haritayı koyu paletle uyumlu hâle getirir. */
.map-wrap {
  filter: grayscale(0.35) contrast(0.96);
  background: var(--sunken);
}
.map-wrap:hover { filter: none; }

/* Anasayfa toptan CTA: fotoğraf zeminde kalır, metin kemik perdenin üstünde okunur. */
.cta-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta-bg img {
  width: 100%; height: 120%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.02) brightness(1.02);
}
.cta-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(248, 243, 236, .96) 18%, rgba(248, 243, 236, .70) 52%, rgba(248, 243, 236, .30) 100%),
    linear-gradient(to bottom, var(--paper), rgba(248, 243, 236, .55) 30%, rgba(248, 243, 236, .55) 70%, var(--paper));
}

/* Ekmek kırıntısı: küçük ama silik değil — geçerli sayfa siyah, üst sayfalar tıklanır. */
.crumb {
  font-size: 11.5px;
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--ink-45);
}
.crumb a {
  color: var(--ink-70);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-2);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.crumb a:hover { color: var(--ink); border-bottom-color: var(--brand); border-bottom-width: 2px; }

/* ============================================================================
   Alt bilgi: firma siyahı bandı, sarı vurgular. Sayfayı aşağıdan bağlayan
   ve marka kimliğini net söyleyen tek koyu alan.
   ========================================================================== */

.foot {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.foot .brand__mark { color: var(--paper); }
.foot h4 { color: rgba(248, 243, 236, .55); }
.foot .body { color: rgba(248, 243, 236, .72); }
.foot li a, .foot li { color: var(--paper); }
.foot li a:hover { color: var(--brand); }
.foot li span, .foot li[style] { color: rgba(248, 243, 236, .62) !important; }
.foot .accent { color: var(--brand); }
.foot .legal { color: rgba(248, 243, 236, .45); }
.foot__bar { border-top: 1px dashed rgba(248, 243, 236, .20); }
.foot .btn--fill { background: var(--brand); color: var(--ink); }
.foot .btn--fill:hover { background: var(--paper); color: var(--ink); }

/* Dar ekranda logo yazımı tek satırda kalsın; alt slogan yer açmak için gizlenir. */
@media (max-width: 560px) {
  .brand__sub { display: none; }
}

/* Hizmet kartları bütün kartı saran bir bağlantıdır; ürün kartlarındaki
   gerilmiş bağlantıya ihtiyaç duymaz. */
.prod--link { display: flex; }

/* Menüdeki ve mobil menüdeki "fiyat al" düğmesi — WhatsApp işaretiyle. */
.nav__ask { gap: 7px; }
.nav__ask svg { width: 15px; height: 15px; fill: currentColor; flex: none; }