/* ==========================================================================
   ENBA DESIGN · 2026
   Kavram: "Eşik". Beyaz zemin, siyah ve pirinç vurgu, uzun dar harfler,
   teknik şartname dili.
   ========================================================================== */

:root {
  --zemin: #ffffff;
  --zemin-2: #f7f4ef;
  --zemin-3: #efeae2;
  --zemin-4: #e3ddd3;
  --yazi: #17140f;
  --yazi-2: #4f483f;
  --yazi-3: #7f776b;
  --koyu: #12100d;
  --koyu-2: #1d1a16;
  --acik: #f3eee5;
  --acik-2: #bcb3a3;
  --acik-3: #8b8274;
  --altin: #b58d47;
  --altin-a: #d9bb80;
  --altin-k: #876629;
  --kor: #d4461c;
  --kor-k: #9a2e0f;
  --plaka: #efeeec;
  --cizgi: rgba(23, 20, 15, .1);
  --cizgi-2: rgba(23, 20, 15, .2);
  --cizgi-ak: rgba(243, 238, 229, .14);

  --f-bas: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-govde: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-kod: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --pad: clamp(18px, 4.6vw, 72px);
  --max: 1380px;
  --ust: 76px;
  --serit-h: 58px;
  --altcizgi-h: 32px;
  --e1: cubic-bezier(.2, .7, .1, 1);
  --e2: cubic-bezier(.65, 0, .35, 1);
  --golge: 0 30px 70px -32px rgba(30, 24, 14, .38);
  --golge-k: 0 14px 34px -18px rgba(30, 24, 14, .35);

  /* Temaya göre değişen yüzeyler */
  --ters: var(--koyu);
  --ters-yazi: var(--acik);
  --ters-yazi-2: var(--acik-2);
  --ters-vurgu: var(--altin-a);
  --panel-koyu: var(--koyu);
  --cam: rgba(255, 255, 255, .88);
  --cam-ust: rgba(255, 255, 255, .92);
  --isik-zemin: rgba(255, 255, 255, .985);
  --nokta: rgba(23, 20, 15, .15);
  --duvar-1: #f4f1ec;
  --duvar-2: #ece8e1;
  --duvar-isik: #ffffff;
  --duvar-cizgi: rgba(23, 20, 15, .035);
  --tahta: #d8c6ab;
  --supurge: #faf8f4;
  --isik-renk: rgba(255, 196, 110, .55);
  --isik-karisim: multiply;
  color-scheme: light;
}

/* Gece teması: cihaz karanlık moddaysa kendiliğinden, ya da üst bardaki düğmeyle */
html[data-tema="koyu"] {
  --zemin: #0f0e0c;
  --zemin-2: #161411;
  --zemin-3: #1e1b17;
  --zemin-4: #2a2620;
  --yazi: #efe9de;
  --yazi-2: #bfb6a6;
  --yazi-3: #8d8476;
  --altin: #c9a35f;
  --altin-a: #e2c891;
  --altin-k: #d3b273;
  --kor: #ef6a3f;
  --kor-k: #ff9a74;
  --plaka: #e9e7e3;
  --cizgi: rgba(239, 233, 222, .12);
  --cizgi-2: rgba(239, 233, 222, .22);
  --golge: 0 30px 70px -30px rgba(0, 0, 0, .75);
  --golge-k: 0 14px 34px -16px rgba(0, 0, 0, .7);
  --ters: #efe9de;
  --ters-yazi: #12100d;
  --ters-yazi-2: #4f483f;
  --ters-vurgu: #876629;
  --panel-koyu: #24201b;
  --cam: rgba(18, 16, 13, .86);
  --cam-ust: rgba(15, 14, 12, .9);
  --isik-zemin: rgba(15, 14, 12, .985);
  --nokta: rgba(239, 233, 222, .17);
  --duvar-1: #1b1915;
  --duvar-2: #12110e;
  --duvar-isik: #2c261e;
  --duvar-cizgi: rgba(239, 233, 222, .03);
  --tahta: #2a241d;
  --supurge: #3a342b;
  --isik-renk: rgba(255, 190, 110, .32);
  --isik-karisim: screen;
  color-scheme: dark;
}
.logo__gece { display: none; }
html[data-tema="koyu"] .logo__gunduz { display: none; }
html[data-tema="koyu"] .logo__gece { display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust) + 16px); }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .028;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--altin-a); color: var(--koyu); }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--koyu); color: var(--acik); padding: 10px 16px; font-weight: 600; }
.atla:focus { top: 12px; }

.kap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }


/* --------------------------------------------------------------------------
   Yazı
   -------------------------------------------------------------------------- */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-kod);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin-k);
}
.etiket::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.etiket--duz::before { display: none; }
.bas {
  font-family: var(--f-bas);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.005em;
  margin: 0;
}
.bas--xxl { font-size: clamp(64px, 12.5vw, 210px); }
.bas--xl { font-size: clamp(52px, 8.4vw, 136px); }
.bas--l { font-size: clamp(42px, 5.8vw, 92px); }
.bas--m { font-size: clamp(32px, 3.6vw, 54px); line-height: .98; }
.bas--s { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; }
.serif { font-family: var(--f-serif); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }
.altin { color: var(--altin); }
.giris-metni { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--yazi-2); max-width: 60ch; }
.kod { font-family: var(--f-kod); font-weight: 500; letter-spacing: .02em; }
.dim { color: var(--yazi-3); }

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */
.dugme {
  --r: var(--ters);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--f-kod);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ters-yazi);
  background: var(--r);
  border: 1px solid var(--r);
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--e1), border-color .35s;
  white-space: nowrap;
}
.dugme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--altin);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--e1);
}
.dugme:hover::before { transform: scaleX(1); transform-origin: left; }
.dugme:hover { color: var(--koyu); border-color: var(--altin); }
.dugme svg { width: 18px; height: 18px; flex: none; transition: transform .4s var(--e1); }
.dugme:hover svg.ok { transform: translateX(4px); }
.dugme--altin { --r: var(--altin); color: var(--koyu); }
.dugme--altin::before { background: var(--altin-a); }
.dugme--cizgi { background: transparent; color: var(--yazi); border-color: var(--cizgi-2); }
.dugme--cizgi::before { background: var(--ters); }
.dugme--cizgi:hover { color: var(--ters-yazi); border-color: var(--ters); }
.dugme--koyu { --r: var(--ters); }
.dugme--acik-cizgi { background: transparent; color: var(--yazi); border-color: var(--cizgi-2); }
.dugme--acik-cizgi::before { background: var(--ters); }
.dugme--acik-cizgi:hover { color: var(--ters-yazi); border-color: var(--ters); }
.dugme--kucuk { min-height: 40px; padding: 0 16px; font-size: 12px; }
.dugme--wa { --r: #1f9d55; color: #fff; }
.dugme--wa::before { background: #178a49; }
.dugme--wa:hover { color: #fff; border-color: #178a49; }
.dugme[aria-pressed="true"] { --r: var(--altin); color: var(--koyu); }

.ok-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-kod);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--altin-k);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap .3s var(--e1), color .3s;
}
.ok-baglanti:hover { gap: 16px; color: var(--yazi); }
.ok-baglanti svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Üst bar ve açılır menüler
   -------------------------------------------------------------------------- */
.ust {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--ust);
  transition: background .4s, border-color .4s, transform .5s var(--e1), box-shadow .4s;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.ust.dolu { background: var(--cam-ust); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-color: var(--cizgi); }
.ust.sakli { transform: translateY(-100%); }
.ust__ic { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: block; flex: none; }
.logo img { height: 30px; width: auto; }
.menu { margin-left: auto; display: flex; gap: 2px; height: 100%; }
.menu__oge { position: relative; display: flex; align-items: center; }
.menu__oge > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yazi-2);
  transition: color .25s;
}
.menu__oge > a svg { width: 12px; height: 12px; transition: transform .3s var(--e1); }
.menu__oge > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: var(--altin);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--e1);
}
.menu__oge:hover > a, .menu__oge > a[aria-current="page"], .menu__oge.acik > a { color: var(--yazi); }
.menu__oge:hover > a::after, .menu__oge > a[aria-current="page"]::after, .menu__oge.acik > a::after { transform: scaleX(1); }
.menu__oge:hover > a svg, .menu__oge.acik > a svg { transform: rotate(180deg); }
.acilir {
  position: absolute;
  top: calc(100% - 10px);
  left: 50%;
  min-width: 260px;
  padding: 10px;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .25s, transform .35s var(--e1), visibility 0s .35s;
  z-index: 5;
}
.acilir::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu__oge:hover > .acilir, .menu__oge:focus-within > .acilir, .menu__oge.acik > .acilir {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .35s var(--e1), visibility 0s;
}
.menu__oge.kapali > .acilir { opacity: 0 !important; visibility: hidden !important; }
.acilir a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--yazi-2);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.acilir a small { font-family: var(--f-kod); font-size: 11px; color: var(--yazi-3); }
.acilir a:hover, .acilir a:focus-visible { background: var(--zemin-2); color: var(--yazi); }
.acilir a:hover small { color: var(--altin-k); }
.acilir__ayrac { height: 1px; background: var(--cizgi); margin: 8px 12px; }
.acilir__baslik { display: block; padding: 8px 12px 4px; font-family: var(--f-kod); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin-k); }
.acilir--mega { left: 0; transform: translate(-18%, 10px); width: min(760px, calc(100vw - 2 * var(--pad))); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; padding: 14px; }
.menu__oge:hover > .acilir--mega, .menu__oge:focus-within > .acilir--mega, .menu__oge.acik > .acilir--mega { transform: translate(-18%, 0); }
.acilir__liste { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
/* Seriler katalog sırasıyla yukarıdan aşağıya: önce sol sütun, sonra sağ sütun */
.acilir__seriler { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; }
.acilir a.acilir__vitrin { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 0; white-space: normal; justify-content: stretch; align-items: stretch; }
.acilir a.acilir__vitrin:hover { background: none; }
.acilir__vitrin .mekan { min-height: 260px; }
.acilir__vitrin p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--yazi-3); }
.acilir__vitrin span { display: block; }
.acilir__vitrin b { display: block; font-family: var(--f-bas); font-size: 24px; text-transform: uppercase; line-height: 1; color: var(--yazi); }

.ust__eylem { display: flex; align-items: center; gap: 8px; }
.tema-dugme {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi-2);
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.tema-dugme:hover { border-color: var(--altin); }
.tema-dugme svg { position: absolute; width: 19px; height: 19px; transition: transform .6s var(--e1), opacity .4s; }
.tema-dugme .gunes { color: var(--altin-k); }
.tema-dugme .ay { transform: translateY(140%) rotate(-40deg); opacity: 0; }
html[data-tema="koyu"] .tema-dugme .gunes { transform: translateY(-140%) rotate(60deg); opacity: 0; }
html[data-tema="koyu"] .tema-dugme .ay { transform: none; opacity: 1; color: var(--altin-a); }
html.tema-gecis, html.tema-gecis *, html.tema-gecis *::before, html.tema-gecis *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important; }
.liste-ac {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--cizgi-2);
  font-family: var(--f-kod);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .3s, background .3s;
}
.liste-ac:hover { border-color: var(--altin); }
.liste-ac svg { width: 18px; height: 18px; }
.rozet {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  background: var(--altin);
  color: var(--koyu);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  transition: transform .3s var(--e1);
}
.rozet[data-bos="1"] { background: var(--zemin-3); color: var(--yazi-3); }
.rozet.zipla { animation: zipla .5s var(--e1); }
@keyframes zipla { 40% { transform: scale(1.5); } }
.menu-ac { display: none; width: 44px; height: 44px; position: relative; border: 1px solid var(--cizgi-2); }
.menu-ac span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--yazi); transition: transform .4s var(--e1), opacity .3s; }
.menu-ac span:nth-child(1) { top: 16px; }
.menu-ac span:nth-child(2) { top: 21px; }
.menu-ac span:nth-child(3) { top: 26px; }
.menu-acik .menu-ac span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-acik .menu-ac span:nth-child(2) { opacity: 0; }
.menu-acik .menu-ac span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobil-menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--zemin);
  padding: calc(var(--ust) + 18px) var(--pad) 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--e2);
  overflow-y: auto;
}
.menu-acik .mobil-menu { clip-path: inset(0 0 0 0); }
.mobil-menu nav { display: flex; flex-direction: column; }
.mobil-oge { border-bottom: 1px solid var(--cizgi); }
.mobil-oge__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobil-oge__bas > a {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  font-family: var(--f-bas);
  font-weight: 800;
  font-size: clamp(36px, 10vw, 58px);
  line-height: 1;
  text-transform: uppercase;
}
.mobil-oge__bas > a small { font-family: var(--f-kod); font-size: 12px; font-weight: 400; color: var(--altin-k); letter-spacing: .1em; }
.mobil-oge__bas > a[aria-current="page"] { color: var(--altin-k); }
.mobil-oge__ac { width: 44px; height: 44px; flex: none; border: 1px solid var(--cizgi-2); display: grid; place-items: center; }
.mobil-oge__ac svg { width: 16px; height: 16px; transition: transform .35s var(--e1); }
.mobil-oge__ac[aria-expanded="true"] svg { transform: rotate(45deg); }
.mobil-oge__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 0 14px 34px; }
.mobil-oge__alt[hidden] { display: none; }
.mobil-oge__alt--sira { grid-template-rows: repeat(6, auto); grid-auto-flow: column; }
.mobil-oge__alt a { padding: 7px 0; font-size: 15px; color: var(--yazi-2); border-bottom: 1px dashed var(--cizgi); }
.mobil-menu__alt { margin-top: auto; display: grid; gap: 6px; font-size: 15px; color: var(--yazi-2); }
.mobil-menu__alt a { color: var(--yazi); }

/* --------------------------------------------------------------------------
   Bölümler
   -------------------------------------------------------------------------- */
.bolum { position: relative; padding-block: clamp(80px, 11vw, 170px); }
.bolum--kagit { background: var(--zemin-2); }
.bolum--kagit2 { background: var(--zemin-3); }
.bolum--koyu { background: var(--koyu); color: var(--acik); }
.bolum--koyu .etiket { color: var(--altin-a); }
.bolum--koyu .giris-metni, .bolum--koyu .dim { color: var(--acik-2); }
.bolum__bas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.bolum__bas .etiket { margin-bottom: 22px; }
.bolum__bas--tek { grid-template-columns: 1fr; }

[data-belir] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--e1), transform .9s var(--e1); transition-delay: var(--gecikme, 0s); }
[data-belir].gorundu { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Duvar sahnesi: kapılar ev ya da koridor duvarı önünde
   -------------------------------------------------------------------------- */
.mekan {
  --duvar: #eeeae3;
  --duvar-doku: none;
  --zemin-renk: #c9b08d;
  --zemin-doku: repeating-linear-gradient(90deg, rgba(90, 60, 30, .10) 0 1px, transparent 1px 64px);
  --supurgelik: #f7f5f1;
  --cizgi-y: 86%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--duvar-doku), var(--duvar);
}
.mekan::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(100% - var(--cizgi-y));
  background: radial-gradient(70% 55% at 50% 0%, rgba(255, 246, 228, .55), transparent 70%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .06));
  z-index: 0;
  pointer-events: none;
}
.mekan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: var(--cizgi-y);
  border-top: 5px solid var(--supurgelik);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 45%), var(--zemin-doku), var(--zemin-renk);
  z-index: 0;
}
.mekan img {
  position: absolute;
  left: 7%;
  width: 86%;
  bottom: calc(100% - var(--cizgi-y) - 2px);
  height: 80%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
  filter: drop-shadow(0 14px 16px rgba(20, 14, 6, .22)) drop-shadow(0 2px 3px rgba(20, 14, 6, .2));
  transition: transform .8s var(--e1), opacity .5s;
}
.mekan--genis img { left: 4%; width: 92%; height: 82%; }
.mekan[data-duvar="beton"], [data-duvar="beton"] .mekan {
  --duvar: #b8b4ad;
  --duvar-doku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --zemin-renk: #5f5b56;
  --zemin-doku: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 110px);
  --supurgelik: #4a4743;
}
.mekan[data-duvar="ahsap"], [data-duvar="ahsap"] .mekan {
  --duvar: #6d4a2f;
  --duvar-doku: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 18px), linear-gradient(90deg, rgba(255, 220, 170, .08), transparent 50%, rgba(255, 220, 170, .06));
  --zemin-renk: #34312e;
  --zemin-doku: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 90px);
  --supurgelik: #2a2724;
}
.mekan[data-duvar="antrasit"], [data-duvar="antrasit"] .mekan {
  --duvar: #3c3f44;
  --duvar-doku: linear-gradient(90deg, rgba(255, 255, 255, .03), transparent 40%, rgba(0, 0, 0, .12));
  --zemin-renk: #d6cfc3;
  --zemin-doku: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 70px);
  --supurgelik: #2c2e32;
}
.mekan[data-duvar="ahsap"]::before, [data-duvar="ahsap"] .mekan::before,
.mekan[data-duvar="antrasit"]::before, [data-duvar="antrasit"] .mekan::before { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 214, 150, .32), transparent 70%); }
.duvar-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--f-kod); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yazi-3); }
.duvar-sec button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--cizgi-2);
  outline-offset: 2px;
  transition: transform .25s var(--e1), outline-color .25s;
}
.duvar-sec button:hover { transform: translateY(-2px); }
.duvar-sec button[aria-pressed="true"] { outline: 2px solid var(--altin); }
.duvar-sec button[data-duvar-sec="beyaz"] { background: linear-gradient(180deg, #eeeae3 70%, #c9b08d 70%); }
.duvar-sec button[data-duvar-sec="beton"] { background: linear-gradient(180deg, #b8b4ad 70%, #5f5b56 70%); }
.duvar-sec button[data-duvar-sec="ahsap"] { background: repeating-linear-gradient(90deg, #5a3c25 0 2px, #6d4a2f 2px 6px) top / 100% 70% no-repeat, #34312e; }
.duvar-sec button[data-duvar-sec="antrasit"] { background: linear-gradient(180deg, #3c3f44 70%, #d6cfc3 70%); }
.duvar-sec button[data-duvar-sec="katalog"] { width: auto; padding: 0 10px; background: var(--plaka); font-size: 10.5px; letter-spacing: .08em; color: var(--yazi-2); }

/* --------------------------------------------------------------------------
   Giriş sahnesi: açılan kapı (beyaz duvar)
   -------------------------------------------------------------------------- */
.giris { position: relative; height: calc(100vh - var(--serit-h) - var(--altcizgi-h)); height: calc(100svh - var(--serit-h) - var(--altcizgi-h)); min-height: 500px; background: var(--zemin); }
.giris__yapis {
  --kh: min(calc(100svh - var(--serit-h) - var(--altcizgi-h) - var(--ust) - 130px), 680px);
  --kw: calc(var(--kh) * .442);
  --kasa: calc(var(--kw) * .085);
  --dy: calc(var(--ust) / 2 - 18px);
  --a: 0; --s: 1; --e: 0; --d: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 50% 36%, var(--duvar-isik) 0%, transparent 72%),
    linear-gradient(180deg, var(--duvar-1) 0%, var(--duvar-2) 100%);
}
.giris__duvar {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--duvar-cizgi) 0 1px, transparent 1px 120px);
  mask-image: linear-gradient(180deg, transparent, #000 25%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%);
  opacity: calc(1 - var(--e));
}
.giris__zemin {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(50% + var(--dy) + var(--kh) / 2);
  border-top: 6px solid var(--supurge);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .07);
  background:
    linear-gradient(180deg, rgba(60, 40, 20, .16), transparent 40%),
    repeating-linear-gradient(90deg, rgba(90, 60, 30, .09) 0 1px, transparent 1px 90px),
    var(--tahta);
  opacity: calc(1 - var(--e) * 1.6);
}
.giris__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1612;
  clip-path: inset(
    max(0px, calc((100% - var(--kh) * var(--s)) / 2 + var(--dy)))
    max(0px, calc((100% - var(--kw) * var(--s)) / 2))
    max(0px, calc((100% - var(--kh) * var(--s)) / 2 - var(--dy)))
  );
  will-change: clip-path;
}
.giris__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/genel/hero.jpg") center 42% / cover no-repeat;
  transform: translateX(calc((1 - var(--e)) * 19%)) scale(calc(1.12 - var(--e) * .06));
  will-change: transform;
}
.giris__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 12, 10, .45), rgba(13, 12, 10, .12) 40%, rgba(13, 12, 10, .82));
  opacity: calc(.3 + var(--e) * .7);
}
.giris__esik {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + var(--dy) + var(--kh) / 2);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--altin) 30%, var(--altin-a) 50%, var(--altin) 70%, transparent);
  opacity: calc(.9 - var(--e) * 2);
  transform: scaleX(calc(.25 + var(--d) * .75));
}
.giris__isik {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--dy) + var(--kh) / 2);
  width: calc(var(--kw) * 3.4);
  height: 34vh;
  transform: translateX(-50%);
  clip-path: polygon(35.3% 0, 64.7% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--isik-renk), transparent 85%);
  mix-blend-mode: var(--isik-karisim);
  opacity: calc(var(--d) * (1 - var(--e) * 2.5));
  pointer-events: none;
}
.giris__kapi {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--dy));
  width: var(--kw);
  height: var(--kh);
  transform: translate(-50%, -50%) scale(var(--s));
  perspective: calc(var(--kh) * 2.4);
  will-change: transform;
}
.giris__kasa {
  position: absolute;
  inset: calc(var(--kasa) * -1) calc(var(--kasa) * -1) 0;
  border: var(--kasa) solid #2a2723;
  border-bottom: 0;
  opacity: clamp(0, calc((1 - var(--e)) * 2.5), 1);
  box-shadow:
    inset 0 0 0 1px rgba(181, 141, 71, .5),
    0 0 0 1px rgba(0, 0, 0, .25),
    0 34px 60px -26px rgba(40, 30, 15, .55);
  pointer-events: none;
}
.giris__kanat {
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%;
  transform: rotateY(calc(var(--a) * -1deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.giris__kanat-on, .giris__kanat-arka { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.giris__kanat-on { background: #2e2b27 url("../img/genel/kapi-kanat.jpg") center / 100% 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.giris__kanat-on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, calc(var(--d) * .55)), transparent 70%); }
.giris__kanat-arka { transform: rotateY(180deg); background: linear-gradient(90deg, #1b1916, #2c2925 60%, #1b1916); box-shadow: inset 0 0 0 10px #1a1815, inset 0 0 0 11px rgba(181, 141, 71, .25); }
.giris__plaka {
  position: absolute;
  left: 50%;
  bottom: calc(var(--kasa) * -1 - 40px);
  transform: translateX(-50%);
  font-family: var(--f-kod);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--yazi-2);
  white-space: nowrap;
  opacity: calc(1 - var(--e) * 4);
}
.giris__plaka b { color: var(--altin-k); font-weight: 600; }
.giris__gir {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% + var(--dy));
  width: var(--kw);
  height: var(--kh);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: calc(1 - var(--e) * 3);
}
.giris__gir span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .92);
  color: #12100d;
  font-family: var(--f-kod);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: var(--golge-k);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .45s var(--e1);
}
.giris__gir span svg { width: 16px; height: 16px; }
.giris__gir:hover span, .giris__gir:focus-visible span, .giris.acildi .giris__gir span { opacity: 1; transform: none; }
.giris.acildi .giris__gir span { animation: davet 2.6s var(--e2) 1.2s infinite; }
@keyframes davet { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }

.ana-alt {
  height: var(--altcizgi-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--pad);
  padding-right: max(var(--pad), 150px);
  border-top: 1px solid var(--cizgi);
  background: var(--zemin);
  font-family: var(--f-kod);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--yazi-3);
  white-space: nowrap;
}
.ana-alt .imza a { color: var(--yazi-2); border-bottom: 1px solid var(--cizgi-2); }
.ana-alt .imza a:hover { color: var(--altin-k); border-color: var(--altin-k); }
body.ana .serit { height: var(--serit-h); padding: 0; display: flex; align-items: center; }
body.ana .serit__ic span { font-size: clamp(20px, 2.1vw, 28px); gap: 28px; padding-right: 28px; }
body.ana .alt { display: none; }
body.ana .yuzen { bottom: calc(var(--serit-h) + var(--altcizgi-h) + 14px); }
.giris__metin {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr var(--kw) 1fr;
  column-gap: calc(var(--kasa) + clamp(28px, 4vw, 72px));
  align-items: center;
  padding: var(--ust) var(--pad) 40px;
  pointer-events: none;
  opacity: calc(1 - var(--e) * 2.4);
}
.giris__metin > * { pointer-events: auto; }
.giris__sol { grid-column: 1; justify-self: end; text-align: right; transform: translateX(calc(var(--e) * -10vw)); }
.giris__sag { grid-column: 3; justify-self: start; max-width: 34ch; transform: translateX(calc(var(--e) * 10vw)); }
.giris__sol .etiket { margin-bottom: 26px; flex-direction: row-reverse; }
.giris h1 { font-family: var(--f-bas); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 6.6vw, 118px); line-height: .93; margin: 0; }
.giris h1 .serif { display: block; font-size: .62em; line-height: 1.05; color: var(--altin); margin-top: .12em; }
.giris__sag p { margin: 0 0 28px; color: var(--yazi-2); font-size: 17px; }
.giris__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.giris__kaydir {
  position: absolute;
  left: var(--pad);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-kod);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yazi-2);
  opacity: calc(1 - var(--d) * 3);
}
.giris__kaydir i { order: -1; width: 1px; height: 46px; background: linear-gradient(var(--altin), transparent); animation: damla 2.2s var(--e2) infinite; transform-origin: top; }
@keyframes damla { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.giris__son {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ust) var(--pad) clamp(40px, 8vh, 96px);
  opacity: clamp(0, calc((var(--e) - .72) * 3.6), 1);
  pointer-events: none;
  color: var(--acik);
}
.giris__son.aktif { pointer-events: auto; }
.giris__son .kap { padding: 0; }
.giris__son .etiket { color: var(--altin-a); }
.giris__son-ic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.giris__son h2 { margin: 18px 0 0; }
.giris__son h2 .altin { color: var(--altin-a); }
.giris__son p { color: rgba(243, 238, 229, .82); margin: 0 0 24px; font-size: 17px; }
.giris__son .dugme { --r: var(--acik); color: var(--koyu); }
.giris__son .dugme--cizgi { background: transparent; color: var(--acik); border-color: rgba(243, 238, 229, .45); }
.giris__son .dugme--cizgi::before { background: var(--acik); }
.giris__son .dugme--cizgi:hover { color: var(--koyu); border-color: var(--acik); }

/* --------------------------------------------------------------------------
   Kayan şerit
   -------------------------------------------------------------------------- */
.serit { overflow: hidden; border-block: 1px solid var(--cizgi); background: var(--zemin); padding: 22px 0; }
.serit__ic { display: flex; width: max-content; animation: kay 46s linear infinite; }
.serit:hover .serit__ic { animation-play-state: paused; }
.serit__ic span {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  font-family: var(--f-bas);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yazi);
}
.serit__ic span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--altin); }
.serit__ic span::after { content: ""; width: 10px; height: 10px; background: var(--altin); transform: rotate(45deg); }
@keyframes kay { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Manifesto ve sayılar
   -------------------------------------------------------------------------- */
.manifesto__izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 40px 32px; }
.manifesto__soz { grid-column: 1 / span 9; font-family: var(--f-serif); font-size: clamp(34px, 4.6vw, 74px); line-height: 1.04; letter-spacing: -.01em; margin: 20px 0 0; }
.manifesto__soz em { color: var(--altin-k); }
.manifesto__soz .bas { font-size: 1.04em; font-style: normal; letter-spacing: 0; font-family: var(--f-bas); }
.manifesto__yan { grid-column: 8 / span 5; display: grid; gap: 22px; align-content: start; }
.manifesto__yan p { margin: 0; color: var(--yazi-2); }
.manifesto__motto { grid-column: 1 / span 6; align-self: end; border-left: 2px solid var(--altin); padding-left: 22px; font-family: var(--f-serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; margin: 0; }
.manifesto__motto cite { display: block; margin-top: 10px; font-family: var(--f-kod); font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--yazi-3); }
.sayilar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); margin-top: clamp(30px, 5vw, 70px); }
.sayi { padding: 28px 24px 0 0; border-right: 1px solid var(--cizgi); }
.sayi:last-child { border-right: 0; }
.sayi + .sayi { padding-left: 24px; }
.sayi b { display: block; font-family: var(--f-bas); font-weight: 800; font-size: clamp(56px, 7vw, 108px); line-height: .9; }
.sayi span { font-family: var(--f-kod); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--yazi-3); }

/* --------------------------------------------------------------------------
   Seri rafı
   -------------------------------------------------------------------------- */
.raf-ust { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.raf-oklar { display: flex; gap: 8px; }
.ok-dugme { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--cizgi-2); transition: background .3s, border-color .3s, color .3s; }
.ok-dugme:hover { background: var(--ters); border-color: var(--ters); color: var(--ters-yazi); }
.ok-dugme svg { width: 20px; height: 20px; }
.ok-dugme:disabled { opacity: .3; pointer-events: none; }
.raf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 23vw, 330px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--pad) 30px;
  margin-top: 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--altin) transparent;
  scroll-padding-inline: var(--pad);
}
.raf::-webkit-scrollbar { height: 4px; }
.raf::-webkit-scrollbar-thumb { background: var(--altin); }
.seri-kart { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; border: 1px solid var(--cizgi); background: var(--zemin); transition: border-color .4s, transform .5s var(--e1), box-shadow .5s; }
.seri-kart:hover { border-color: var(--altin); transform: translateY(-6px); box-shadow: var(--golge); }
.seri-kart__ust { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-family: var(--f-kod); font-size: 11px; letter-spacing: .12em; color: var(--yazi-3); border-bottom: 1px solid var(--cizgi); }
.seri-kart__yeni { color: var(--koyu); background: var(--altin); padding: 2px 8px; letter-spacing: .1em; }
.seri-kart__gorsel { position: relative; aspect-ratio: 3 / 4; }
.seri-kart__gorsel img + img { opacity: 0; transform: translateX(14%); }
.seri-kart:hover .seri-kart__gorsel img:first-of-type { opacity: 0; transform: translateX(-14%); }
.seri-kart:hover .seri-kart__gorsel img + img { opacity: 1; transform: none; }
.seri-kart__govde { padding: 18px 16px 20px; display: grid; gap: 8px; flex: 1; }
.seri-kart__govde h3 { font-family: var(--f-bas); font-weight: 800; font-size: 30px; line-height: .95; text-transform: uppercase; margin: 0; }
.seri-kart__govde p { margin: 0; font-size: 14px; color: var(--yazi-3); line-height: 1.5; }
.seri-kart__alt { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; font-family: var(--f-kod); font-size: 12px; color: var(--altin-k); }
.seri-kart__alt svg { width: 18px; height: 18px; transition: transform .4s var(--e1); }
.seri-kart:hover .seri-kart__alt svg { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Önerilerimiz
   -------------------------------------------------------------------------- */
.oneriler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.oneri-kart { display: grid; gap: 12px; }
.oneri-kart__sahne { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; cursor: zoom-in; }
.oneri-kart__sahne .mekan { position: absolute; inset: 0; }
.oneri-kart:hover .mekan img { transform: translateY(-4px) scale(1.02); }
.oneri-kart__etiket { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--zemin); color: var(--yazi); padding: 5px 9px; font-family: var(--f-kod); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--golge-k); }
.oneri-kart__alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.oneri-kart__alt b { display: block; font-family: var(--f-bas); font-size: 26px; line-height: 1; text-transform: uppercase; }
.oneri-kart__alt small { color: var(--yazi-3); font-size: 13px; }
.oneri-araclar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   Kapının anatomisi
   -------------------------------------------------------------------------- */
.anatomi {
  background:
    linear-gradient(var(--cizgi) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--zemin-2);
  overflow: hidden;
}
.anatomi::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 50%, transparent, var(--zemin-2) 85%); pointer-events: none; }
.anatomi .kap { position: relative; }
.anatomi__izgara { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
.anatomi__sahne { position: sticky; top: calc(var(--ust) + 20px); height: min(calc(100vh - var(--ust) - 40px), 640px); min-height: 440px; display: grid; place-items: center; perspective: 1800px; }
.yigin {
  --ara: 7px;
  position: relative;
  width: clamp(170px, 17vw, 230px);
  aspect-ratio: 1 / 2.15;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(28deg);
  transition: transform 1.2s var(--e1);
}
.anatomi.acik .yigin { --ara: clamp(40px, 4.6vw, 66px); transform: rotateX(-10deg) rotateY(42deg) translateX(-34%); }
.katman { position: absolute; inset: 0; transform: translateZ(calc(var(--i) * var(--ara))); transition: transform 1s var(--e1), opacity .5s, filter .5s; transition-delay: calc(var(--i) * 50ms); transform-style: preserve-3d; }
.katman__no { position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--zemin); border: 1px solid var(--altin); color: var(--altin-k); font-family: var(--f-kod); font-size: 10px; transform: translateZ(2px); }
.k-kasa { inset: -9% -14% 0; border: 12px solid #34302b; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(181, 141, 71, .5), 0 0 0 1px rgba(0, 0, 0, .3); }
.k-kasa .conta { position: absolute; inset: 0; border: 2px solid transparent; border-bottom: 0; transition: border-color .4s; }
.k-sac-arka { background: linear-gradient(135deg, #8a8781, #66635e 40%, #96938d 70%, #6c6964); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.k-yapi {
  background:
    linear-gradient(90deg, transparent 47%, #7d786f 47%, #7d786f 53%, transparent 53%),
    repeating-linear-gradient(180deg, transparent 0 calc(100% / 7 - 6px), #7d786f calc(100% / 7 - 6px) calc(100% / 7));
  box-shadow: inset 0 0 0 5px #7d786f;
}
.k-kilit { inset: auto; left: 74%; top: 46%; width: 18%; height: 12%; background: linear-gradient(180deg, #d9b878, #a07c43); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.k-sac-on { background: linear-gradient(135deg, #3b3833, #2a2724 50%, #3d3a35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.k-kaplama { background: #3b3732 url("../img/genel/kapi-kanat.jpg") center / 100% 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 20px 40px -20px rgba(0, 0, 0, .4); }
.k-kol { inset: auto; left: 70%; top: 34%; width: 3.2%; height: 36%; background: linear-gradient(90deg, #1a1a1a, #4b4b4b, #1a1a1a); border-radius: 3px; }
.yigin[data-secili] .katman { opacity: .25; filter: saturate(.3); }
.yigin[data-secili="0"] .k-kasa, .yigin[data-secili="1"] .k-sac-arka, .yigin[data-secili="2"] .k-yapi, .yigin[data-secili="3"] .k-kilit,
.yigin[data-secili="4"] .k-sac-on, .yigin[data-secili="5"] .k-kaplama, .yigin[data-secili="6"] .k-kol, .yigin[data-secili="7"] .k-kasa { opacity: 1; filter: none; }
.yigin[data-secili="7"] .k-kasa .conta { border-color: var(--altin); }
.yigin[data-secili] .katman.secili-on { transform: translateZ(calc(var(--i) * var(--ara) + 40px)); }
.anatomi__liste { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--cizgi); }
.anatomi__liste li { border-bottom: 1px solid var(--cizgi); }
.anatomi__liste button { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; text-align: left; transition: padding .4s var(--e1), color .3s; }
.anatomi__liste button:hover, .anatomi__liste button[aria-pressed="true"] { padding-left: 10px; color: var(--altin-k); }
.anatomi__liste .kod { font-size: 12px; color: var(--altin-k); }
.anatomi__liste strong { font-weight: 600; font-size: 18px; }
.anatomi__liste small { display: block; color: var(--yazi-3); font-size: 14px; margin-top: 2px; }
.anatomi__dugme { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Özellik ikonları
   -------------------------------------------------------------------------- */
.ikonlar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); background: var(--zemin); }
.ikon { position: relative; display: grid; gap: 18px; align-content: space-between; min-height: 170px; padding: 22px 20px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); transition: background .4s, color .4s; }
.ikon:hover { background: var(--ters); color: var(--ters-yazi); }
.ikon svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--e1), color .3s; }
.ikon:hover svg { color: var(--ters-vurgu); transform: rotate(-8deg) scale(1.1); }
.ikon span { font-family: var(--f-bas); font-weight: 700; font-size: 22px; text-transform: uppercase; line-height: 1; }
.ikon small { position: absolute; top: 18px; right: 18px; font-family: var(--f-kod); font-size: 10px; color: var(--yazi-3); }

/* --------------------------------------------------------------------------
   Kapı seçim rehberi
   -------------------------------------------------------------------------- */
.rehber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 72px; }
.rehber__adim { border-top: 1px solid var(--cizgi-2); padding-top: 22px; margin-bottom: 36px; }
.rehber__adim h3 { margin: 0 0 18px; font-family: var(--f-kod); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--yazi-3); }
.secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.secenek { position: relative; display: grid; gap: 4px; text-align: left; padding: 16px 18px; border: 1px solid var(--cizgi-2); background: var(--zemin); transition: border-color .3s, background .3s, color .3s; }
.secenek strong { font-family: var(--f-bas); font-size: 23px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.secenek small { font-size: 13px; color: var(--yazi-3); line-height: 1.4; }
.secenek:hover { border-color: var(--yazi); }
.secenek[aria-pressed="true"] { background: var(--ters); color: var(--ters-yazi); border-color: var(--ters); }
.secenek[aria-pressed="true"] small { color: var(--ters-yazi-2); }
.secenek[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; background: var(--altin); transform: rotate(45deg); }
.secenekler[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.rehber__sonuc { min-height: 420px; background: var(--panel-koyu); color: var(--acik); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.rehber__bos { margin: auto; text-align: center; max-width: 30ch; color: var(--acik-3); }
.rehber__bos svg { width: 64px; height: 64px; margin: 0 auto 16px; stroke: var(--altin); fill: none; stroke-width: 1; }
.oneri { display: grid; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--cizgi-ak); animation: belir .7s var(--e1) both; }
.oneri:last-child { border-bottom: 0; padding-bottom: 0; }
.oneri:nth-child(2) { animation-delay: .12s; }
.oneri__bas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.oneri__bas h4 { margin: 0; font-family: var(--f-bas); font-weight: 800; font-size: 34px; text-transform: uppercase; line-height: .95; }
.oneri__bas span { font-family: var(--f-kod); font-size: 12px; color: var(--altin-a); white-space: nowrap; }
.oneri p { margin: 0; color: var(--acik-2); font-size: 15px; }
.oneri p .altin { color: var(--altin-a); }
.oneri__kapilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.oneri__kapilar a { aspect-ratio: 3 / 4; display: block; position: relative; transition: transform .4s var(--e1); }
.oneri__kapilar a .mekan { position: absolute; inset: 0; }
.oneri__kapilar a:hover { transform: translateY(-4px); }
.oneri .ok-baglanti { color: var(--altin-a); }
.oneri .ok-baglanti:hover { color: var(--acik); }
@keyframes belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Projeler ve harita
   -------------------------------------------------------------------------- */
.harita-izgara { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px 64px; align-items: center; }
.harita { position: relative; }
.harita svg { width: 100%; height: auto; overflow: visible; }
.harita .nokta { fill: var(--nokta); }
.harita .yay { fill: none; stroke: var(--altin); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .7; }
.harita .pin { cursor: pointer; }
.harita .pin circle.ic { fill: var(--altin); transition: r .3s; }
.harita .pin circle.halka { fill: none; stroke: var(--altin); opacity: .8; transform-box: fill-box; transform-origin: center; animation: nabiz 2.6s var(--e2) infinite; }
.harita .pin:hover circle.ic, .harita .pin.aktif circle.ic { fill: var(--yazi); }
.harita .pin text { font-family: var(--f-kod); font-size: 14px; font-weight: 500; fill: var(--yazi-2); letter-spacing: .04em; pointer-events: none; paint-order: stroke; stroke: var(--zemin); stroke-width: 4px; }
.harita .merkez circle.ic { fill: var(--kor); }
.harita .merkez circle.halka { stroke: var(--kor); }
.harita .merkez text { fill: var(--yazi); font-weight: 600; }
@keyframes nabiz { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.harita__ipucu { position: absolute; z-index: 3; min-width: 220px; max-width: 300px; padding: 14px 16px; background: var(--panel-koyu); color: var(--acik); box-shadow: var(--golge); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 18px)) scale(.96); transition: opacity .25s, transform .25s var(--e1); }
.harita__ipucu.acik { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
.harita__ipucu b { display: block; font-family: var(--f-bas); font-size: 24px; text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--altin-a); }
.harita__ipucu ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; }
.harita__ipucu li::before { content: "— "; color: var(--altin); }
.harita-not { font-size: 13px; color: var(--yazi-3); margin-top: 16px; }
.lejant { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--f-kod); font-size: 12px; color: var(--yazi-3); margin-top: 24px; }
.lejant span { display: inline-flex; align-items: center; gap: 8px; }
.lejant i { width: 10px; height: 10px; border-radius: 50%; background: var(--altin); }
.lejant i.kor { background: var(--kor); }
.proje-sira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 80px); }
.proje-kart { position: relative; display: block; overflow: hidden; background: var(--zemin); border: 1px solid var(--cizgi); transition: box-shadow .5s, border-color .4s; }
.proje-kart:hover { box-shadow: var(--golge); border-color: var(--cizgi-2); }
.proje-kart__gorsel { aspect-ratio: 16 / 11; overflow: hidden; }
.proje-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e1); }
.proje-kart:hover .proje-kart__gorsel img { transform: scale(1.06); }
.proje-kart__govde { padding: 16px 16px 18px; display: grid; gap: 6px; }
.proje-kart__govde h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.proje-kart__meta { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--f-kod); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--yazi-3); }
.proje-kart__meta b { color: var(--altin-k); font-weight: 600; }
.proje-kart__birim { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(18, 16, 13, .82); backdrop-filter: blur(6px); padding: 6px 10px; font-family: var(--f-kod); font-size: 11px; color: var(--altin-a); letter-spacing: .06em; }
.proje-kart__durum { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--zemin); padding: 5px 9px; font-family: var(--f-kod); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.proje-kart__durum[data-durum="devam"] { background: var(--altin); color: var(--koyu); }

/* --------------------------------------------------------------------------
   Acil çıkış ve şaft
   -------------------------------------------------------------------------- */
.yangin { background: radial-gradient(60% 80% at 92% 0%, rgba(212, 70, 28, .09), transparent 60%), var(--zemin-2); overflow: hidden; }
.yangin .etiket { color: var(--kor-k); }
.yangin__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; align-items: center; }
.yangin__vurgu { font-family: var(--f-bas); font-weight: 900; font-size: clamp(90px, 13vw, 210px); line-height: .8; margin: 14px 0 0; color: var(--kor); text-transform: uppercase; }
.yangin__vurgu small { display: block; font-size: .3em; color: var(--yazi); letter-spacing: .02em; margin-top: .2em; line-height: 1; }
.rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rozetler span { padding: 8px 12px; border: 1px solid rgba(212, 70, 28, .4); font-family: var(--f-kod); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kor-k); background: rgba(212, 70, 28, .04); }
.cikis-kapilar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: clamp(56px, 7vw, 90px); }
.yangin__izgara .cikis-kapilar { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cikis-kapilar a { display: grid; gap: 8px; }
.cikis-kapilar figure { position: relative; margin: 0; aspect-ratio: 3 / 4; transition: transform .4s var(--e1); }
.cikis-kapilar figure .mekan { position: absolute; inset: 0; }
.cikis-kapilar a:hover figure { transform: translateY(-6px); }
.cikis-kapilar span { font-family: var(--f-kod); font-size: 12px; color: var(--yazi-2); }

/* --------------------------------------------------------------------------
   Online katalog tanıtımı
   -------------------------------------------------------------------------- */
.kafes {
  background-color: var(--zemin);
  background-image:
    repeating-linear-gradient(45deg, rgba(181, 141, 71, .14) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-45deg, rgba(181, 141, 71, .14) 0 1px, transparent 1px 34px);
}
.katalog-tanitim__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 80px; align-items: center; }
.kitap3d { perspective: 2000px; display: grid; place-items: center; padding: 30px 0; }
.kitap3d__govde { position: relative; width: min(380px, 70vw); aspect-ratio: 992 / 1370; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(6deg); transition: transform 1.2s var(--e1); }
.kitap3d:hover .kitap3d__govde { transform: rotateY(-12deg) rotateX(3deg); }
.kitap3d__ic { position: absolute; inset: 0; background: #f4f4f4 url("../katalog/sayfa/02.jpg") center / cover; transform: translateZ(-1px); box-shadow: 30px 40px 70px -24px rgba(30, 24, 14, .55); }
.kitap3d__sayfalar { position: absolute; top: 1.5%; bottom: 1.5%; right: -14px; width: 14px; background: repeating-linear-gradient(90deg, #f3efe7 0 1px, #d8d1c4 1px 2px); transform: rotateY(90deg); transform-origin: left; }
.kitap3d__kapak { position: absolute; inset: 0; background: url("../img/katalog/kapak.jpg") center / cover; transform-origin: left; transition: transform 1.2s var(--e1); box-shadow: inset 4px 0 10px rgba(0, 0, 0, .5); backface-visibility: hidden; }
.kitap3d:hover .kitap3d__kapak { transform: rotateY(-38deg); }
.kitap3d__kapak::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, .22), transparent 40%); }
.katalog-tanitim ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 10px; }
.katalog-tanitim li { display: flex; gap: 14px; align-items: baseline; color: var(--yazi-2); }
.katalog-tanitim li b { font-family: var(--f-kod); font-weight: 600; color: var(--altin-k); font-size: 13px; min-width: 36px; }

/* --------------------------------------------------------------------------
   Süreç ve SSS
   -------------------------------------------------------------------------- */
.surec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: adim; padding: 0; margin: 0; }
.surec li { list-style: none; position: relative; padding: 30px 26px 0 0; border-top: 1px solid var(--cizgi-2); }
.surec li + li { padding-left: 26px; border-left: 1px solid var(--cizgi); }
.surec li::before { counter-increment: adim; content: "0" counter(adim); display: block; font-family: var(--f-bas); font-weight: 800; font-size: 84px; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--altin); margin-bottom: 26px; }
.surec h3 { margin: 0 0 10px; font-family: var(--f-bas); font-size: 28px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.surec p { margin: 0; color: var(--yazi-2); font-size: 15px; }
.sss { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px 80px; }
.sss__liste { border-top: 1px solid var(--cizgi-2); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 24px 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary i { position: relative; width: 28px; height: 28px; border: 1px solid var(--cizgi-2); border-radius: 50%; transition: transform .4s var(--e1), background .3s; }
.sss summary i::before, .sss summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.sss summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--e1); }
.sss details[open] summary i { background: var(--ters); color: var(--ters-yazi); }
.sss details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.sss details p { margin: 0 0 26px; max-width: 64ch; color: var(--yazi-2); }

/* --------------------------------------------------------------------------
   Çağrı ve alt bilgi
   -------------------------------------------------------------------------- */
.cagri { position: relative; overflow: hidden; background: var(--zemin-2); }
.cagri__arka { position: absolute; inset: 0 0 0 45%; background: url("../img/katalog/anahtar.jpg") center / cover; opacity: .14; filter: grayscale(.6); mask-image: linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); }
.cagri .kap { position: relative; }
.cagri__izgara { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px 80px; align-items: end; }
.iletisim-kartlari { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); box-shadow: var(--golge-k); }
.iletisim-kartlari a, .iletisim-kartlari div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; background: var(--zemin); transition: background .3s; }
.iletisim-kartlari a:hover { background: var(--zemin-2); }
.iletisim-kartlari small { display: block; font-family: var(--f-kod); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--yazi-3); margin-bottom: 4px; }
.iletisim-kartlari strong { font-size: 19px; font-weight: 500; }
.iletisim-kartlari svg { width: 20px; height: 20px; color: var(--altin-k); }

.alt { background: var(--koyu); color: var(--acik); padding-top: clamp(60px, 7vw, 100px); overflow: hidden; }
.alt__izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.alt__marka img { height: 34px; width: auto; margin-bottom: 22px; }
.alt__marka p { color: var(--acik-3); max-width: 38ch; margin: 0; font-size: 15px; }
.alt h4 { margin: 0 0 18px; font-family: var(--f-kod); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--altin-a); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alt ul a, .alt address a { color: var(--acik-2); transition: color .3s; }
.alt ul a:hover, .alt address a:hover { color: var(--acik); }
.alt address { font-style: normal; color: var(--acik-2); display: grid; gap: 10px; font-size: 15px; }
.alt__dev { margin-top: clamp(50px, 6vw, 90px); font-family: var(--f-bas); font-weight: 900; text-transform: uppercase; font-size: clamp(80px, 21.5vw, 360px); line-height: .74; letter-spacing: -.01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(217, 187, 128, .35); text-align: center; user-select: none; transform: translateY(12%); }
.alt__cizgi { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 22px; padding-right: max(var(--pad), 160px); border-top: 1px solid var(--cizgi-ak); font-family: var(--f-kod); font-size: 12px; color: var(--acik-3); position: relative; z-index: 1; background: var(--koyu); }
.imza a { color: var(--acik-2); border-bottom: 1px solid rgba(243, 238, 229, .25); padding-bottom: 1px; transition: color .3s, border-color .3s; }
.imza a:hover { color: var(--altin-a); border-color: var(--altin-a); }

/* Yüzen WhatsApp ve ara düğmeleri */
.yuzen { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; gap: 12px; align-items: center; }
.yuzen a { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -10px rgba(20, 14, 6, .5); transition: transform .4s var(--e1); }
.yuzen a:hover { transform: scale(1.08) rotate(-6deg); }
.yuzen svg { width: 27px; height: 27px; }
.yuzen__wa { background: #1f9d55; }
.yuzen__wa::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(31, 157, 85, .6); animation: nabiz-wa 2.8s var(--e2) infinite; }
.yuzen__ara { background: var(--koyu); box-shadow: 0 0 0 2px var(--altin), 0 14px 30px -10px rgba(20, 14, 6, .5) !important; }
.yuzen__ara svg { width: 24px; height: 24px; color: var(--altin-a); }
.yuzen a span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); background: var(--koyu); color: var(--acik); font-family: var(--f-kod); font-size: 11px; letter-spacing: .06em; padding: 6px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--e1); }
.yuzen a:hover span, .yuzen a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@keyframes nabiz-wa { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }

/* --------------------------------------------------------------------------
   Teklif listesi çekmecesi ve bildirim
   -------------------------------------------------------------------------- */
.perde { position: fixed; inset: 0; z-index: 100; background: rgba(20, 16, 10, .35); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.cekmece-acik .perde { opacity: 1; pointer-events: auto; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(460px, 100%); background: var(--zemin); color: var(--yazi); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .6s var(--e2); box-shadow: -30px 0 60px -30px rgba(20, 14, 6, .35); }
.cekmece-acik .cekmece { transform: none; }
.cekmece__bas { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--cizgi); }
.cekmece__bas h2 { margin: 0; font-family: var(--f-bas); font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.kapat { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--cizgi-2); background: var(--zemin); color: var(--yazi); transition: background .3s, color .3s; }
.kapat:hover { background: var(--ters); color: var(--ters-yazi); }
.kapat svg { width: 18px; height: 18px; }
.cekmece__govde { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cekmece__bos { padding: 60px 10px; text-align: center; color: var(--yazi-2); }
.cekmece__bos svg { width: 54px; height: 54px; margin: 0 auto 14px; stroke: var(--altin); fill: none; stroke-width: 1.2; }
.satir { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.satir figure { margin: 0; background: var(--plaka); aspect-ratio: 3 / 5; padding: 3px; }
.satir figure img { width: 100%; height: 100%; object-fit: contain; }
.satir b { display: block; font-family: var(--f-kod); font-weight: 600; }
.satir small { display: block; color: var(--yazi-3); font-size: 13px; }
.adet { display: inline-flex; align-items: center; border: 1px solid var(--cizgi-2); margin-top: 8px; }
.adet button { width: 30px; height: 30px; display: grid; place-items: center; }
.adet button:hover { background: var(--zemin-2); }
.adet input { width: 44px; height: 30px; text-align: center; border: 0; border-inline: 1px solid var(--cizgi-2); background: transparent; font-family: var(--f-kod); font-size: 13px; -moz-appearance: textfield; }
.adet input::-webkit-outer-spin-button, .adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sil { color: var(--yazi-3); width: 36px; height: 36px; display: grid; place-items: center; }
.sil:hover { color: var(--kor-k); }
.sil svg { width: 18px; height: 18px; }
.cekmece__alt { padding: 18px 24px 24px; border-top: 1px solid var(--cizgi); display: grid; gap: 10px; background: var(--zemin-2); }
.cekmece__alt textarea { width: 100%; min-height: 70px; resize: vertical; padding: 12px; border: 1px solid var(--cizgi-2); background: var(--zemin); font-size: 14px; }
.cekmece__alt .dugme { width: 100%; }
.cekmece__ozet { display: flex; justify-content: space-between; font-family: var(--f-kod); font-size: 12px; color: var(--yazi-3); letter-spacing: .06em; }
.bildirim { position: fixed; left: 50%; bottom: 24px; z-index: 150; transform: translate(-50%, 160%); background: var(--panel-koyu); color: var(--acik); padding: 14px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--golge); font-size: 15px; transition: transform .5s var(--e1); max-width: calc(100vw - 32px); }
.bildirim.acik { transform: translate(-50%, 0); }
.bildirim button { font-family: var(--f-kod); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-a); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Işık kutusu (model ayrıntısı)
   -------------------------------------------------------------------------- */
.isik { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); background: var(--isik-zemin); opacity: 0; pointer-events: none; transition: opacity .4s; }
.isik.acik { opacity: 1; pointer-events: auto; }
.isik__sahne { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 16px; padding: 64px 84px 24px; background: var(--zemin-2); }
.isik__cerceve { position: relative; height: min(74vh, 720px); aspect-ratio: 4 / 5; max-width: 100%; box-shadow: var(--golge); }
.isik__cerceve .mekan { position: absolute; inset: 0; }
.isik__cerceve .mekan img { height: 84%; }
.isik__cerceve--katalog { background: var(--plaka); }
.isik__cerceve--katalog img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.isik__ok { position: absolute; top: 46%; transform: translateY(-50%); width: 56px; height: 56px; border: 1px solid var(--cizgi-2); background: var(--zemin); display: grid; place-items: center; color: var(--yazi); transition: background .3s, color .3s; }
.isik__ok:hover { background: var(--ters); color: var(--ters-yazi); border-color: var(--ters); }
.isik__ok--sol { left: 18px; }
.isik__ok--sag { right: 18px; }
.isik__ok svg { width: 22px; height: 22px; }
.isik__bilgi { position: relative; overflow-y: auto; padding: 80px clamp(24px, 3vw, 48px) 40px; border-left: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 20px; background: var(--zemin); }
.isik__bilgi .kapat { position: absolute; top: 18px; right: 18px; }
.isik__kod { font-family: var(--f-bas); font-weight: 900; font-size: clamp(64px, 7vw, 112px); line-height: .85; margin: 0; }
.isik__kod span { color: var(--altin); }
.isik__seri { font-family: var(--f-kod); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--yazi-2); }
.isik__ozellik { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.isik__ozellik li { padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px; color: var(--yazi-2); display: flex; gap: 12px; }
.isik__ozellik li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; background: var(--altin); transform: rotate(45deg); }
.isik__dugmeler { display: grid; gap: 10px; margin-top: auto; }
.isik__sira { font-family: var(--f-kod); font-size: 12px; color: var(--yazi-3); }

/* --------------------------------------------------------------------------
   Alt sayfa başlığı
   -------------------------------------------------------------------------- */
.sayfa-bas { position: relative; padding: calc(var(--ust) + clamp(18px, 2.2vw, 34px)) 0 clamp(20px, 2.4vw, 34px); overflow: hidden; border-bottom: 1px solid var(--cizgi); background: var(--zemin-2); }
.sayfa-bas__arka { position: absolute; inset: 0 0 0 40%; opacity: .55; background-size: cover; background-position: center; mask-image: linear-gradient(90deg, transparent, #000 55%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); }
.sayfa-bas .kap { position: relative; }
.sayfa-bas__izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.sayfa-bas h1 { margin: 10px 0 0; }
.sayfa-bas .bas--xxl { font-size: clamp(46px, 6.6vw, 112px); }
.sayfa-bas .bas--xl { font-size: clamp(40px, 5.4vw, 92px); }
.h1-alt { display: block; margin-top: .25em; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; letter-spacing: 0; text-transform: none; color: var(--altin-k); }
.sayfa-bas p { margin: 0; color: var(--yazi-2); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.sayfa-bas__izgara > :last-child { background: var(--cam); backdrop-filter: blur(6px); padding: 12px 16px; }
.iz { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--f-kod); font-size: 12px; letter-spacing: .08em; color: var(--yazi-3); margin-bottom: 10px; }
.iz a:hover { color: var(--altin-k); }

/* --------------------------------------------------------------------------
   Koleksiyon
   -------------------------------------------------------------------------- */
.suzgec { position: sticky; top: var(--ust); z-index: 40; background: var(--cam-ust); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--cizgi); transition: top .5s var(--e1); }
.ust.sakli ~ main .suzgec { top: 0; }
.suzgec__ic { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.cipler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 14px 0; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--cizgi-2); font-size: 13px; font-weight: 500; color: var(--yazi-2); white-space: nowrap; background: var(--zemin); transition: border-color .3s, background .3s, color .3s; }
.cip small { font-family: var(--f-kod); font-size: 11px; color: var(--yazi-3); }
.cip:hover { border-color: var(--yazi); color: var(--yazi); }
.cip[aria-pressed="true"] { background: var(--ters); border-color: var(--ters); color: var(--ters-yazi); }
.cip[aria-pressed="true"] small { color: var(--ters-vurgu); }
.ara { position: relative; flex: none; width: 220px; }
.ara input { width: 100%; height: 42px; padding: 0 14px 0 40px; background: var(--zemin); border: 1px solid var(--cizgi-2); font-family: var(--f-kod); font-size: 13px; transition: border-color .3s; }
.ara input:focus { outline: none; border-color: var(--altin); }
.ara svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--yazi-3); pointer-events: none; }
.gorunum { display: flex; justify-content: flex-end; padding: 18px 0 0; }
.kat-bilgi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; padding: clamp(44px, 5vw, 72px) 0 clamp(30px, 3vw, 44px); }
.kat-bilgi:empty { display: none; }
.kat-bilgi h2 { margin: 14px 0 0; }
.kat-bilgi p { margin: 0 0 18px; color: var(--yazi-2); }
.kat-bilgi ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.kat-bilgi li { padding: 8px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px; color: var(--yazi-2); }
.kat-bilgi__alt { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.grup { padding-block: 10px 50px; }
.grup__bas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 30px 0 22px; border-top: 1px solid var(--cizgi-2); }
.grup__bas h2 { margin: 0; font-family: var(--f-bas); font-weight: 800; font-size: clamp(34px, 4vw, 58px); text-transform: uppercase; line-height: .9; }
.grup__bas span { font-family: var(--f-kod); font-size: 12px; color: var(--yazi-3); white-space: nowrap; }
.grup__bas a { color: var(--altin-k); }
.izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 18px; }
.kart { position: relative; display: grid; gap: 10px; }
.kart__plaka { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--plaka); overflow: hidden; cursor: zoom-in; }
.kart__plaka .mekan { position: absolute; inset: 0; }
.kart__plaka > img { position: absolute; inset: 4% 8%; width: 84%; height: 92%; object-fit: contain; transition: transform .8s var(--e1); }
.kart:hover .kart__plaka img { transform: scale(1.04); }
.kart__plaka::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 0 var(--altin); transition: box-shadow .4s var(--e1); pointer-events: none; }
.kart:hover .kart__plaka::after { box-shadow: inset 0 0 0 2px var(--altin); }
.kart__alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kart__kod { font-family: var(--f-kod); font-weight: 600; font-size: 15px; }
.kart__kod small { display: block; font-family: var(--f-govde); font-weight: 400; font-size: 12px; color: var(--yazi-3); }
.ekle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cizgi-2); background: var(--zemin); transition: background .3s, border-color .3s, color .3s; }
.ekle svg { width: 16px; height: 16px; transition: transform .4s var(--e1); }
.ekle:hover { border-color: var(--ters); background: var(--ters); color: var(--ters-yazi); }
.ekle[aria-pressed="true"] { background: var(--altin); border-color: var(--altin); color: var(--koyu); }
.ekle[aria-pressed="true"] svg { transform: rotate(135deg); }
.kart__yeni { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--koyu); color: var(--altin-a); font-family: var(--f-kod); font-size: 10px; letter-spacing: .1em; padding: 4px 7px; }
.bos-sonuc { padding: 80px 0; text-align: center; color: var(--yazi-3); }
.bos-sonuc b { display: block; font-family: var(--f-bas); font-size: 44px; text-transform: uppercase; color: var(--yazi); margin-bottom: 8px; }
.uyari-not { padding: 26px 0 60px; font-size: 13px; color: var(--yazi-3); max-width: 90ch; }

/* --------------------------------------------------------------------------
   Online katalog (çevrilen kitap)
   -------------------------------------------------------------------------- */
.katalog-sayfa { min-height: 100vh; padding-top: var(--ust); display: flex; flex-direction: column; }
.arac-cubugu { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-bottom: 1px solid var(--cizgi); }
.arac-cubugu h1 { margin: 0; font-family: var(--f-bas); font-weight: 800; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; line-height: 1; }
.arac-cubugu h1 small { font-family: var(--f-kod); font-size: 12px; font-weight: 400; letter-spacing: .12em; color: var(--altin-k); margin-left: 10px; vertical-align: middle; }
.araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arac { height: 42px; min-width: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--cizgi-2); background: var(--zemin); font-family: var(--f-kod); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.arac:hover { background: var(--ters); color: var(--ters-yazi); border-color: var(--ters); }
.arac svg { width: 18px; height: 18px; }
.arac select { background: transparent; border: 0; height: 100%; font: inherit; color: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; max-width: 210px; }
.arac select option { color: var(--yazi); background: var(--zemin); }
.arac--sayac { pointer-events: none; min-width: 108px; }
.sahne-kitap { flex: 1; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px) 0; position: relative; }
.kitap { --kh: min(calc(100vh - var(--ust) - 215px), 820px); position: relative; height: var(--kh); aspect-ratio: 1984 / 1370; max-width: calc(100vw - 2 * var(--pad) - 140px); perspective: 2600px; transition: transform .8s var(--e1); }
.kitap[data-konum="kapak"] { transform: translateX(-25%); }
.kitap[data-konum="arka"] { transform: translateX(25%); }
.kitap__yari { position: absolute; top: 0; bottom: 0; width: 50%; background: #e7e7e7; overflow: hidden; }
.kitap__yari--sol { left: 0; box-shadow: -18px 24px 50px -24px rgba(30, 24, 14, .55); }
.kitap__yari--sag { left: 50%; box-shadow: 18px 24px 50px -24px rgba(30, 24, 14, .55); }
.kitap__yari[data-bos="1"] { background: transparent; box-shadow: none; }
.kitap__yari img, .yaprak__yuz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.kitap__yari--sol::after, .yaprak__yuz--arka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 88%, rgba(0, 0, 0, .18)); pointer-events: none; }
.kitap__yari--sag::after, .yaprak__yuz--on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 12%); pointer-events: none; }
.kitap__yari[data-bos="1"]::after { display: none; }
.yaprak { position: absolute; top: 0; bottom: 0; width: 50%; left: 50%; transform-style: preserve-3d; transform-origin: left center; z-index: 5; display: none; }
.yaprak.geri { left: 0; transform-origin: right center; }
.yaprak.calis { display: block; }
.yaprak__yuz { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #e7e7e7; overflow: hidden; }
.yaprak__yuz--arka { transform: rotateY(180deg); }
.yaprak__golge { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 60%); opacity: 0; }
.sicak { position: absolute; z-index: 2; border: 1px solid transparent; transition: border-color .25s, background .25s; cursor: pointer; }
.sicak span { position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 100%); background: var(--koyu); color: var(--altin-a); font-family: var(--f-kod); font-size: 11px; padding: 3px 7px; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.sicak:hover, .sicak:focus-visible { border-color: var(--altin); background: rgba(181, 141, 71, .12); }
.sicak:hover span, .sicak:focus-visible span { opacity: 1; }
.sicak-goster .sicak { border-color: rgba(181, 141, 71, .8); }
.kitap-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 56px; height: 90px; display: grid; place-items: center; border: 1px solid var(--cizgi-2); background: var(--cam); transition: background .3s, color .3s; }
.kitap-ok:hover { background: var(--ters); color: var(--ters-yazi); }
.kitap-ok svg { width: 22px; height: 22px; }
.kitap-ok--sol { left: var(--pad); }
.kitap-ok--sag { right: var(--pad); }
.kitap-ok:disabled { opacity: .25; pointer-events: none; }
.kucukler { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 14px var(--pad) 20px; border-top: 1px solid var(--cizgi); scrollbar-width: thin; scrollbar-color: var(--altin) transparent; }
.kucukler button { flex: none; width: 62px; display: grid; gap: 4px; justify-items: center; opacity: .55; transition: opacity .3s; }
.kucukler button:hover, .kucukler button[aria-current="true"] { opacity: 1; }
.kucukler img { width: 62px; aspect-ratio: 992 / 1370; object-fit: cover; outline: 1px solid var(--cizgi); }
.kucukler button[aria-current="true"] img { outline: 2px solid var(--altin); }
.kucukler span { font-family: var(--f-kod); font-size: 10px; color: var(--yazi-3); }
.bu-sayfada { display: flex; align-items: center; gap: 8px 12px; padding-block: 12px; min-height: 60px; flex-wrap: wrap; font-size: 13px; color: var(--yazi-3); }
.bu-sayfada b { font-family: var(--f-kod); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--altin-k); margin-right: 4px; }
.bu-sayfada a { font-family: var(--f-kod); font-size: 12px; padding: 4px 8px; border: 1px solid var(--cizgi-2); background: var(--zemin); color: var(--yazi-2); transition: border-color .3s, color .3s; }
.bu-sayfada a:hover { border-color: var(--altin); color: var(--altin-k); }
.yakin { position: fixed; inset: 0; z-index: 130; background: rgba(18, 16, 13, .96); overflow: auto; display: none; cursor: zoom-out; }
.yakin.acik { display: block; }
.yakin img { width: min(1400px, 160vw); max-width: none; margin: 40px auto; }
.yakin .kapat { position: fixed; top: 16px; right: 16px; }
.yakin--foto.acik { display: grid; place-items: center; }
.yakin--foto figure { margin: 0; padding: 70px 16px 40px; }
.yakin--foto img, .yakin--foto video, .yakin--foto iframe { width: auto; max-width: min(1100px, 92vw); max-height: 76vh; margin: 0 auto; box-shadow: var(--golge); }
.yakin--foto iframe { width: min(1100px, 92vw); aspect-ratio: 16 / 9; height: auto; border: 0; }
.yakin--foto figcaption { text-align: center; color: var(--acik-2); margin-top: 16px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Projeler sayfası
   -------------------------------------------------------------------------- */
.proje-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.proje-izgara .proje-kart { cursor: zoom-in; }
.il-liste { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.il-liste li { border-bottom: 1px solid var(--cizgi); }
.il-liste button { width: 100%; display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; color: var(--yazi-2); transition: color .3s, padding .3s var(--e1); }
.il-liste button:hover, .il-liste button.aktif { color: var(--altin-k); padding-left: 6px; }
.il-liste span { font-family: var(--f-kod); font-size: 12px; color: var(--yazi-3); }
.vurgu-bant { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--altin); background: linear-gradient(90deg, rgba(181, 141, 71, .1), transparent); margin-bottom: clamp(48px, 6vw, 80px); }
.vurgu-bant b { font-family: var(--f-bas); font-size: clamp(30px, 3.4vw, 48px); text-transform: uppercase; line-height: .95; font-weight: 800; }
.vurgu-bant p { margin: 0; color: var(--yazi-2); }
.suzgec-satiri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.suzgec-satiri .cip { height: 36px; }

/* --------------------------------------------------------------------------
   Teknik sayfa
   -------------------------------------------------------------------------- */
.tablo-sar { overflow-x: auto; border: 1px solid var(--cizgi-2); background: var(--zemin); scrollbar-width: thin; }
.tablo { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 14px; }
.tablo th, .tablo td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); }
.tablo thead th { position: sticky; top: 0; background: var(--koyu); color: var(--acik); font-family: var(--f-bas); font-weight: 700; font-size: 20px; text-transform: uppercase; line-height: 1; vertical-align: bottom; }
.tablo thead th small { display: block; font-family: var(--f-kod); font-size: 10px; font-weight: 400; letter-spacing: .08em; color: var(--altin-a); margin-top: 6px; }
.tablo tbody th { position: sticky; left: 0; background: var(--zemin-2); font-family: var(--f-kod); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; z-index: 1; }
.tablo tbody th span { display: inline-flex; align-items: center; gap: 10px; }
.tablo tbody th svg { width: 22px; height: 22px; flex: none; stroke: var(--altin-k); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tablo thead th:first-child { left: 0; z-index: 2; position: sticky; }
.tablo tbody tr:hover td { background: var(--zemin-2); }
.tablo td.bos { color: #a59d90; }
.ozellik-gorsel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); margin-bottom: clamp(40px, 5vw, 64px); }
.ozellik-gorsel div { background: var(--zemin); padding: 22px 18px; display: grid; gap: 12px; align-content: start; }
.ozellik-gorsel svg { width: 44px; height: 44px; stroke: var(--yazi); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ozellik-gorsel svg .vurgu { stroke: var(--altin); stroke-width: 1.8; }
.ozellik-gorsel b { font-family: var(--f-bas); font-size: 22px; text-transform: uppercase; line-height: 1; }
.ozellik-gorsel span { font-size: 14px; color: var(--yazi-2); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Kurumsal, Neden Biz ve Medya
   -------------------------------------------------------------------------- */
.uretim { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 15vw, 230px); gap: 10px; }
.uretim figure { position: relative; margin: 0; overflow: hidden; }
.uretim figure:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.uretim figure:nth-child(2), .uretim figure:nth-child(3) { grid-column: span 3; }
.uretim figure:nth-child(4), .uretim figure:nth-child(5), .uretim figure:nth-child(6) { grid-column: span 2; }
.uretim img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e1); }
.uretim figure:hover img { transform: scale(1.06); }
.uretim figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(18, 16, 13, .85); padding: 6px 10px; font-family: var(--f-kod); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--altin-a); }
.degerler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cizgi-2); }
.deger { padding: 28px 24px 10px 0; }
.deger + .deger { padding-left: 24px; border-left: 1px solid var(--cizgi); }
.deger b { display: block; font-family: var(--f-bas); font-weight: 800; font-size: clamp(32px, 3.4vw, 52px); text-transform: uppercase; line-height: .9; margin-bottom: 14px; }
.deger p { margin: 0; color: var(--yazi-2); font-size: 15px; }
.metin-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; }
.metin-iki p { margin: 0 0 18px; color: var(--yazi-2); font-size: 17px; }
.alanlar { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cizgi-2); }
.alanlar li { display: grid; grid-template-columns: 60px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); font-size: clamp(20px, 2vw, 28px); font-family: var(--f-bas); font-weight: 700; text-transform: uppercase; line-height: 1.05; transition: padding .4s var(--e1), color .3s; }
.alanlar li:hover { padding-left: 10px; color: var(--altin-k); }
.alanlar li span { font-family: var(--f-kod); font-size: 12px; font-weight: 400; color: var(--altin-k); padding-top: 6px; }

.sebepler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sebep { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--zemin); border: 1px solid var(--cizgi); overflow: hidden; transition: box-shadow .5s, transform .5s var(--e1); }
.sebep:hover { box-shadow: var(--golge); transform: translateY(-4px); }
.sebep__gorsel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plaka); }
.sebep__gorsel > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e1); }
.sebep:hover .sebep__gorsel > img { transform: scale(1.05); }
.sebep__gorsel .mekan { position: absolute; inset: 0; }
.sebep__no { position: absolute; top: 14px; left: 14px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; background: var(--koyu); color: var(--altin-a); font-family: var(--f-kod); font-size: 13px; }
.sebep__govde { padding: 22px 22px 26px; display: grid; gap: 10px; align-content: start; }
.sebep__govde h3 { margin: 0; font-family: var(--f-bas); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: .95; }
.sebep__govde p { margin: 0; color: var(--yazi-2); font-size: 15px; }
.kapilar-uclu { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.kapilar-uclu .mekan { position: relative; inset: auto; height: 100%; }
.kapilar-uclu .mekan img { left: 4%; width: 92%; height: 76%; }
.olcu { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.olcu i { position: absolute; border-color: var(--altin-k); font-style: normal; font-family: var(--f-kod); font-size: 11px; color: var(--altin-k); }
.olcu .olcu__y { left: 28%; top: 7%; bottom: 15%; border-left: 1px solid; }
.olcu .olcu__y::before, .olcu .olcu__y::after { content: ""; position: absolute; left: -5px; width: 9px; border-top: 1px solid; }
.olcu .olcu__y::before { top: 0; }
.olcu .olcu__y::after { bottom: 0; }
.olcu .olcu__y b { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: rgba(255, 255, 255, .9); color: #876629; padding: 2px 5px; font-weight: 500; white-space: nowrap; }
.olcu .olcu__x { left: 34%; right: 34%; bottom: 6%; border-top: 1px solid; }
.olcu .olcu__x b { white-space: nowrap; }
.olcu .olcu__x::before, .olcu .olcu__x::after { content: ""; position: absolute; top: -5px; height: 9px; border-left: 1px solid; }
.olcu .olcu__x::before { left: 0; }
.olcu .olcu__x::after { right: 0; }
.olcu .olcu__x b { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); background: rgba(255, 255, 255, .9); padding: 2px 5px; font-weight: 500; }

.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vm__kart { position: relative; min-height: clamp(420px, 44vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 3.4vw, 48px); color: var(--acik); overflow: hidden; isolation: isolate; }
.vm__kart > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--e1); }
.vm__kart:hover > img { transform: scale(1.05); }
.vm__kart::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 16, 13, .1) 20%, rgba(18, 16, 13, .88)); }
.vm__kart .etiket { color: var(--altin-a); }
.vm__kart h3 { margin: 14px 0 16px; font-family: var(--f-bas); font-size: clamp(48px, 6vw, 92px); font-weight: 800; text-transform: uppercase; line-height: .9; }
.vm__kart p { margin: 0; font-family: var(--f-serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; max-width: 34ch; }

.medya-izgara { columns: 3 300px; column-gap: 16px; }
.medya-oge { break-inside: avoid; margin: 0 0 16px; position: relative; display: block; width: 100%; background: var(--plaka); cursor: zoom-in; overflow: hidden; text-align: left; }
.medya-oge img { width: 100%; transition: transform 1s var(--e1); }
.medya-oge:hover img { transform: scale(1.04); }
.medya-oge figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(18, 16, 13, .8)); color: var(--acik); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.medya-oge figcaption small { font-family: var(--f-kod); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-a); }
.medya-oge__oynat { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; box-shadow: var(--golge-k); }
.medya-oge__oynat::before { content: ""; margin-left: 4px; border-left: 18px solid var(--koyu); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.medya-bos { border: 1px dashed var(--cizgi-2); padding: 34px; text-align: center; color: var(--yazi-3); }

/* --------------------------------------------------------------------------
   İletişim
   -------------------------------------------------------------------------- */
.iletisim-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 72px; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: grid; gap: 8px; }
.alan--tam { grid-column: 1 / -1; }
.alan label { font-family: var(--f-kod); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--yazi-2); }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--cizgi-2); background: var(--zemin); color: var(--yazi); font-size: 16px; transition: border-color .3s, box-shadow .3s; border-radius: 0; }
.alan textarea { min-height: 140px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--yazi); box-shadow: 0 0 0 3px rgba(181, 141, 71, .25); }
.alan input:user-invalid { border-color: var(--kor); }
.form__liste { grid-column: 1 / -1; display: none; padding: 16px; border: 1px dashed var(--altin); background: rgba(181, 141, 71, .07); }
.form__liste.dolu { display: block; }
.form__liste b { font-family: var(--f-kod); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--altin-k); display: block; margin-bottom: 10px; }
.form__liste div { display: flex; flex-wrap: wrap; gap: 6px; }
.form__liste span { font-family: var(--f-kod); font-size: 12px; padding: 4px 8px; background: var(--ters); color: var(--ters-yazi); }
.form__dugmeler { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form__not { grid-column: 1 / -1; font-size: 13px; color: var(--yazi-3); margin: 0; }
.harita-cerceve { position: relative; border-top: 1px solid var(--cizgi); background: var(--zemin-2); overflow: hidden; }
.harita-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.02); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.bulunamadi { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--ust) + 40px) var(--pad) 60px; }
.bulunamadi .bas { font-size: clamp(120px, 26vw, 360px); color: transparent; -webkit-text-stroke: 1.5px var(--altin); }
.bulunamadi p { color: var(--yazi-2); font-size: 18px; margin: 10px auto 32px; max-width: 40ch; }

/* --------------------------------------------------------------------------
   Duyarlı yerleşim
   -------------------------------------------------------------------------- */
@media (max-width: 1320px) {
  .liste-ac .metin { display: none; }
  .menu__oge > a { padding: 10px 11px; }
}
@media (max-width: 1120px) {
  .menu { display: none; }
  .menu-ac { display: block; }
  .ust__eylem { margin-left: auto; }
}
@media (max-width: 1180px) {
  .izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ikonlar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cikis-kapilar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ozellik-gorsel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .bolum__bas, .anatomi__izgara, .rehber, .harita-izgara, .yangin__izgara, .katalog-tanitim__izgara,
  .sss, .cagri__izgara, .sayfa-bas__izgara, .kat-bilgi, .iletisim-izgara, .metin-iki, .giris__son-ic, .vm { grid-template-columns: minmax(0, 1fr); }
  .manifesto__soz, .manifesto__yan, .manifesto__motto { grid-column: 1 / -1; }
  .proje-sira, .proje-izgara, .oneriler, .sebepler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alt__izgara { grid-template-columns: 1fr 1fr; }
  .alt__marka { grid-column: 1 / -1; }
  .surec { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .surec li:nth-child(3) { border-left: 0; padding-left: 0; }
  .isik { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .isik__sahne { padding: 60px 70px 14px; }
  .isik__cerceve { height: min(50vh, 520px); }
  .isik__bilgi { border-left: 0; border-top: 1px solid var(--cizgi); padding: 22px var(--pad) 26px; max-height: 40vh; }
  .isik__bilgi .kapat { position: fixed; }
  .isik__ozellik { display: none; }
  .isik__kod { font-size: 56px; }
  .isik__dugmeler { grid-template-columns: 1fr 1fr; }
  .isik__dugmeler .dugme:last-child { grid-column: 1 / -1; }
  .anatomi__sahne { height: 520px; }
  .kitap-ok { width: 44px; height: 70px; }
  .kitap { max-width: calc(100vw - 2 * var(--pad) - 100px); }
  .vurgu-bant { grid-template-columns: 1fr; }
  .uretim { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .uretim figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .uretim figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .sayfa-bas__arka { inset: 0; opacity: .14; mask-image: none; -webkit-mask-image: none; }
  .yangin__izgara .cikis-kapilar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --ust: 64px; }
  .sayfa-bas { padding: calc(var(--ust) + 14px) 0 16px; }
  .sayfa-bas__izgara { gap: 8px; }
  .sayfa-bas h1 { margin-top: 6px; }
  .sayfa-bas .bas--xxl { font-size: clamp(40px, 12vw, 56px); }
  .sayfa-bas .bas--xl { font-size: clamp(34px, 10vw, 48px); }
  .sayfa-bas .h1-alt { font-size: 19px; }
  .sayfa-bas .etiket { font-size: 10.5px; }
  .sayfa-bas__izgara > :last-child { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .sayfa-bas p { font-size: 14px; line-height: 1.45; }
  .sayfa-bas .iz { font-size: 11px; margin-bottom: 4px; }
  .sayfa-bas .yazdirma-yok { display: none; }
  body { font-size: 15.5px; }
  .logo img { height: 24px; }
  .liste-ac { height: 44px; padding: 0 12px; }
  .tema-dugme { width: 44px; height: 44px; }
  :root { --serit-h: 46px; --altcizgi-h: 30px; }
  .giris__yapis { --kh: min(calc(100svh - var(--serit-h) - var(--altcizgi-h) - 376px), 440px); --dy: 40px; }
  .giris__metin { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: calc(var(--ust) + 12px) var(--pad) 18px; align-items: start; }
  .ana-alt { font-size: 10px; padding-right: var(--pad); }
  .ana-alt__ek { display: none; }
  body.ana .serit__ic span { font-size: 20px; gap: 20px; padding-right: 20px; }
  /* Yüzen düğmeler mobil ana sayfada Koleksiyon / Katalog düğmelerinin üstünde, zemin alanında durur */
  body.ana .yuzen { bottom: calc(var(--serit-h) + var(--altcizgi-h) + 18px + 52px + 14px); }
  .giris__sol { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; transform: translateY(calc(var(--e) * -6vh)); }
  .giris__sol .etiket { margin-bottom: 12px; flex-direction: row; }
  .giris__sol .etiket::before { display: none; }
  .giris h1 { font-size: clamp(34px, 9.6vw, 48px); }
  .giris h1 br:nth-of-type(2) { display: none; }
  .giris h1 .serif { font-size: .66em; margin-top: .05em; }
  .giris__sag { grid-column: 1; grid-row: 3; justify-self: stretch; max-width: none; transform: translateY(calc(var(--e) * 6vh)); }
  .giris__sag p { display: none; }
  .giris__dugmeler { justify-content: center; }
  .giris__dugmeler .dugme { flex: 1; padding: 0 14px; }
  .giris__kaydir, .giris__plaka { display: none; }
  .serit { padding: 16px 0; }
  .sayilar { grid-template-columns: 1fr 1fr; }
  .sayi { padding: 22px 12px 18px 0 !important; border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .sayi:nth-child(odd) { border-right: 1px solid var(--cizgi); }
  .sayi:nth-child(even) { padding-left: 16px !important; }
  .ikonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ikon { min-height: 130px; }
  .secenekler { grid-template-columns: 1fr; }
  .oneri__kapilar { gap: 6px; }
  .proje-sira, .proje-izgara, .sebepler { grid-template-columns: 1fr; }
  .oneriler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .oneri-kart__alt b { font-size: 20px; }
  .cikis-kapilar, .yangin__izgara .cikis-kapilar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .surec { grid-template-columns: 1fr; }
  .surec li, .surec li + li { padding-left: 0; border-left: 0; }
  .alt__izgara { grid-template-columns: 1fr; }
  .alt__cizgi { padding-right: var(--pad); padding-bottom: 96px; }
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .suzgec__ic { flex-wrap: wrap; gap: 0; padding-bottom: 10px; }
  .cipler { order: 2; flex-basis: 100%; padding: 10px 0 0; }
  .ara { width: 100%; padding-top: 12px; }
  .ara svg { top: calc(50% + 6px); }
  .gorunum { justify-content: flex-start; }
  .kat-bilgi ul { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .degerler { grid-template-columns: 1fr 1fr; }
  .deger:nth-child(3) { border-left: 0; padding-left: 0; }
  .il-liste { grid-template-columns: 1fr; }
  .yuzen { right: 14px; bottom: 14px; gap: 10px; }
  .yuzen a { width: 52px; height: 52px; }
  .anatomi__sahne { height: 420px; position: relative; top: 0; }
  .yigin { width: 130px; }
  .anatomi.acik .yigin { transform: rotateX(-10deg) rotateY(42deg) translateX(-40%); }
  .isik__sahne { padding: 58px 12px 10px; }
  .isik__cerceve { height: min(44vh, 440px); }
  .isik__ok { width: 44px; height: 44px; top: 34%; }
  .isik__dugmeler .dugme { white-space: normal; text-align: center; line-height: 1.25; padding: 8px 10px; font-size: 11.5px; letter-spacing: .06em; min-height: 48px; }
  .isik__seri { font-size: 11px; }
  .duvar-sec button { width: 28px; height: 28px; }
  .arac-cubugu { padding-block: 12px; gap: 12px; }
  .arac-cubugu h1 small { display: none; }
  .araclar { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .araclar .arac--metin, #tam-ekran, #buyut { display: none; }
  .araclar label.arac { flex: 1; min-width: 0; padding: 0 8px; }
  .arac select { max-width: 100%; width: 100%; font-size: 13px; }
  .arac--sayac { min-width: 72px; padding: 0 6px; }
  .araclar a.arac span { display: none; }
  .kitap { --kh: auto; height: auto; width: min(100%, calc((100svh - var(--ust) - 230px) * .724)); aspect-ratio: 992 / 1370; max-width: 100%; }
  .kitap[data-konum] { transform: none; }
  .kitap .kitap__yari { width: 100%; left: 0 !important; }
  .kitap .kitap__yari--sol { display: none; }
  .kitap-ok { display: none; }
  .ozellik-gorsel { grid-template-columns: 1fr 1fr; }
  .vm__kart { min-height: 420px; }
  .mobil-oge__alt { grid-template-columns: 1fr; padding-left: 30px; }
  .mobil-oge__alt--sira { grid-template-rows: none; grid-auto-flow: row; }
}

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

@media print {
  body::after, .ust, .yuzen, .alt, .cagri, .suzgec, .perde, .cekmece, .bildirim, .sayfa-bas__arka { display: none !important; }
  body { background: #fff; color: #000; }
  .sayfa-bas { padding: 0 0 20px; border: 0; background: #fff; }
  .sayfa-bas h1 { color: #000; font-size: 48px; }
  .sayfa-bas p, .iz { color: #333; }
  .bolum { padding: 24px 0; }
  .tablo-sar { overflow: visible; }
  .tablo { min-width: 0; font-size: 10px; }
  .tablo thead th { background: #eee; color: #000; font-size: 13px; }
  .yazdirma-yok { display: none !important; }
  [data-belir] { opacity: 1 !important; transform: none !important; }
}