/* =====================================================================
   BURAKCAN DEMİRDOĞRAMA — Tasarım Sistemi (v2)
   ---------------------------------------------------------------------
   Karakter: Premium · Endüstriyel · Güven veren · Modern
   Görsel dil: Charcoal + Warm White + Metal Grey + kontrollü Copper
   Bağımlılık yok. Animasyonlar transform/opacity üzerinden çalışır ve
   scroll ilerlemesine bağlıdır (JS yoksa da tüm içerik erişilebilir).

   İÇİNDEKİLER
   01. Fontlar
   02. Tasarım token'ları
   03. Reset & temel
   04. Tipografi & yardımcılar
   05. Düğmeler
   06. Header & navigasyon
   07. Hero
   08. Marka hikâyesi
   09. Kalite ifadeleri
   10. Hizmet showcase
   11. Üretim süreci
   12. Ham maddeden sonuca (blueprint)
   13. Galeri (yatay / dikey)
   14. Instagram / atölye kanıtı
   15. Fiyat kartları
   16. Teklif formu
   17. SSS
   18. İletişim kartları & harita
   19. Footer
   20. Yüzen aksiyonlar & mobil çubuk
   21. Lightbox
   22. Alt sayfa düzeni (breadcrumb, sayfa başlığı, galeri ızgarası)
   23. Scroll animasyon yardımcıları
   24. Hareket azaltma & erişilebilirlik
   25. Duyarlı ayarlar
   ===================================================================== */

/* ============ 01. FONTLAR ========================================== */
/* Space Grotesk (değişken ağırlık 300–700) — self-host, Türkçe için    */
/* latin + latin-ext alt kümeleri. Gövde metni sistem fontu (0 bayt).   */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ 02. TASARIM TOKEN'LARI =============================== */
:root {
  /* Marka paleti (sabit) */
  --ink:        #131210;  /* Deep Charcoal — ana zemin */
  --ink-deep:   #0D0C0B;  /* footer / en koyu */
  --graphite:   #1C1B19;  /* kart ve koyu yüzeyler */
  --graphite-2: #24221F;  /* yükseltilmiş yüzey */
  --bone:       #F3F0EA;  /* Warm Off White — açık bölümler */
  --bone-2:     #E7E3DA;  /* açık zeminde ikincil yüzey */
  --steel:      #77736D;  /* metalik gri (çizgi/dekor) */
  --silver:     #B7B5B0;  /* teknik detay */
  --copper:     #C87532;  /* accent — koyu zeminde */
  --copper-lit: #DE8F4C;  /* accent hover */
  --copper-ink: #8A5122;  /* accent — açık zeminde (AA kontrast) */
  --wa:         #25D366;
  --wa-ink:     #06381D;

  /* Aktif bölüm teması (panel sınıfları bunları ezer) */
  --bg:         var(--ink);
  --surface:    var(--graphite);
  --surface-2:  var(--graphite-2);
  --fg:         #F3F0EA;
  --fg-muted:   #ADA9A1;   /* koyu zeminde AA uyumlu ikincil metin */
  --fg-faint:   #7C7871;
  --accent:     var(--copper);
  --accent-hov: var(--copper-lit);
  --line:       rgba(183, 181, 176, 0.16);
  --line-2:     rgba(183, 181, 176, 0.32);
  --scrim:      rgba(13, 12, 11, 0.72);

  /* Tipografi */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Akışkan ölçek */
  --fs-eyebrow: clamp(0.688rem, 0.66rem + 0.14vw, 0.78rem);
  --fs-100: clamp(0.75rem, 0.73rem + 0.1vw, 0.82rem);
  --fs-200: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --fs-300: 1rem;                                            /* mobilde min 16px */
  --fs-400: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --fs-500: clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem);
  --fs-600: clamp(1.31rem, 1.18rem + 0.62vw, 1.75rem);
  --fs-700: clamp(1.63rem, 1.36rem + 1.3vw, 2.63rem);
  --fs-800: clamp(2.13rem, 1.6rem + 2.6vw, 4rem);
  --fs-900: clamp(2.63rem, 1.75rem + 4.3vw, 6rem);
  --fs-huge: clamp(3rem, 1.5rem + 7.4vw, 9rem);

  /* Boşluk */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  /* Yapı */
  --wrap: 1280px;
  --wrap-wide: 1560px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 74px;
  --hero-fig: 560px;   /* hero fotoğraf sütununun genişliği */

  /* Köşe yarıçapı — endüstriyel karakter için minimum */
  --r: 2px;
  --r-2: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Uzun mesafeli giriş hareketleri için: hızlı başlar, yumuşak oturur.
     Kısa hover geçişlerinde --ease kullanılmaya devam edilir.          */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;
}

/* Panel temaları — bileşenler token'ları okuduğu için otomatik uyum sağlar */
.panel--ink {
  --bg: var(--ink); --surface: var(--graphite); --surface-2: var(--graphite-2);
  --fg: #F3F0EA; --fg-muted: #ADA9A1; --fg-faint: #7C7871;
  --accent: var(--copper); --accent-hov: var(--copper-lit);
  --line: rgba(183, 181, 176, 0.16); --line-2: rgba(183, 181, 176, 0.32);
}
.panel--graphite {
  --bg: var(--graphite); --surface: #211F1D; --surface-2: #2A2825;
  --fg: #F3F0EA; --fg-muted: #ADA9A1; --fg-faint: #807C75;
  --accent: var(--copper); --accent-hov: var(--copper-lit);
  --line: rgba(183, 181, 176, 0.16); --line-2: rgba(183, 181, 176, 0.32);
}
.panel--bone {
  --bg: var(--bone); --surface: #FBFAF7; --surface-2: var(--bone-2);
  --fg: #131210; --fg-muted: #5E5A54; --fg-faint: #8A857D;
  --accent: var(--copper-ink); --accent-hov: #6E3F19;
  --line: rgba(19, 18, 16, 0.14); --line-2: rgba(19, 18, 16, 0.28);
}

/* ============ 03. RESET & TEMEL ==================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--fg);
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

ul[class], ol[class] { list-style: none; padding: 0; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--copper); color: #16100A; }

/* İçeriğe atla */
.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: -80px;
  z-index: 2000;
  background: var(--copper);
  color: #16100A;
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  border-radius: var(--r);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* ============ 04. TİPOGRAFİ & YARDIMCILAR ========================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
}

p { max-width: 68ch; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--wrap-wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.panel {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
}
.panel--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.panel--flush { padding-block: 0; }

/* Bölüm başlığı bloğu */
.head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.head--center { text-align: center; }
.head--center .head__lede { margin-inline: auto; }
.head__title { font-size: var(--fs-700); }
.head__lede {
  margin-top: var(--sp-4);
  color: var(--fg-muted);
  font-size: var(--fs-400);
  max-width: 62ch;
}

/* Eyebrow — küçük, aralıklı, teknik etiket */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow--plain::before { display: none; }

.display { font-size: var(--fs-800); }
.display--xl { font-size: var(--fs-900); }
.lede { font-size: var(--fs-500); color: var(--fg-muted); line-height: 1.5; max-width: 46ch; }

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

/* Teknik köşe işaretleri — endüstriyel çizim hissi */
.ticks { position: relative; }
.ticks::before,
.ticks::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  opacity: 0.75;
  pointer-events: none;
}
.ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ticks::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Sayı rozeti (01, 02, …) */
.num {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
}

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

.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

/* ============ 05. DÜĞMELER ======================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn .btn__arrow { transition: transform var(--t) var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(-1px); }

.btn--primary { --btn-bg: var(--copper); --btn-fg: #16100A; --btn-line: var(--copper); }
.btn--primary:hover { --btn-bg: var(--copper-lit); --btn-line: var(--copper-lit); }

.btn--wa { --btn-bg: var(--wa); --btn-fg: var(--wa-ink); --btn-line: var(--wa); }
.btn--wa:hover { --btn-bg: #1FBE5A; --btn-line: #1FBE5A; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-2); }
.btn--ghost:hover { --btn-line: var(--accent); --btn-fg: var(--accent); }

.btn--lg { min-height: 56px; padding: 0.95rem 1.9rem; font-size: var(--fs-300); }
.btn--block { display: flex; width: 100%; }

/* Metin bağlantısı — alt çizgi açılımı */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--accent);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; color: var(--accent-hov); }
.link svg { width: 1em; height: 1em; transition: transform var(--t) var(--ease); }
.link:hover svg { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.actions--center { justify-content: center; }

/* ============ 06. HEADER & NAVİGASYON ============================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  color: #F3F0EA;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
.site-header::after {
  /* Sayfa en üstteyken logo/menünün fotoğraf üzerinde okunmasını sağlayan
     çok hafif üst degrade — cam efekti değil, sadece okunabilirlik. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140%;
  background: linear-gradient(to bottom, rgba(13, 12, 11, 0.72), transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--t) var(--ease);
}
.site-header.is-stuck {
  background: rgba(19, 18, 16, 0.9);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: rgba(183, 181, 176, 0.16);
}
.site-header.is-stuck::after { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  transition: min-height var(--t) var(--ease);
}
.site-header.is-stuck .site-header__inner { min-height: 62px; }

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand__logo {
  height: 46px;
  width: auto;
  transition: height var(--t) var(--ease);
}
.site-header.is-stuck .brand__logo { height: 38px; }

/* Masaüstü menü */
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #F3F0EA;
  border-radius: var(--r);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--copper); }
.nav__link[aria-current="page"] { color: var(--copper); box-shadow: inset 0 -2px 0 var(--copper); }
.nav__item { position: relative; }

/* Hizmetler açılır paneli */
.nav__disclosure { position: relative; }
.nav__caret { width: 12px; height: 12px; transition: transform var(--t) var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(560px, 90vw);
  padding: var(--sp-4);
  background: var(--graphite);
  border: 1px solid rgba(183, 181, 176, 0.18);
  border-radius: var(--r-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.nav__toggle[aria-expanded="true"] + .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-200);
  color: #D9D5CD;
  border-radius: var(--r);
  border-bottom: 1px solid rgba(183, 181, 176, 0.08);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav__panel a::after {
  content: "→";
  color: var(--copper);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__panel a:hover { color: #F3F0EA; background: rgba(200, 117, 50, 0.1); }
.nav__panel a:hover::after { opacity: 1; transform: translateX(0); }

.nav__cta { display: inline-flex; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 12px;
  border: 1px solid rgba(183, 181, 176, 0.3);
  border-radius: var(--r);
}
.nav-toggle__bar {
  display: block;
  height: 2px; width: 100%;
  background: #F3F0EA;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobil menü paneli */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(13, 12, 11, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* ============ 07. HERO =========================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background: var(--ink);
  color: #F3F0EA;
  overflow: clip;
  isolation: isolate;
}

/* Arka plan: gerçek atölye fotoğrafı, doku olarak — çok koyu ve sakin */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.75) contrast(1.05) brightness(0.42);
  transform: scale(calc(1.08 - (var(--p, 0) * 0.05)));
  transform-origin: 50% 40%;
  will-change: transform;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(19, 18, 16, 0.96) 0%, rgba(19, 18, 16, 0.86) 38%, rgba(19, 18, 16, 0.55) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(19, 18, 16, 0) 55%);
}

/* Blueprint ızgarası — ince teknik çizgiler */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(0.5 + (var(--p, 0) * 0.5));
  background-image:
    linear-gradient(to right, rgba(183, 181, 176, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(183, 181, 176, 0.07) 1px, transparent 1px);
  background-size: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px);
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, transparent 78%);
}

/* Sağdaki sütun fotoğrafın genişliği kadardır; kalan alanın tamamı metne kalır. */
/* NOT: burada `width: 100%` KULLANILMAZ — .wrap--wide'ın genişlik/kenar
   boşluğu hesabını ezer ve metni ekranın en soluna yapıştırırdı. */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(46%, var(--hero-fig));
  align-items: end;
  /* Sütun arası boşluk YOK: metin sütunu fotoğrafın kenarına kadar uzanır,
     nefes payını metin bloğunun kendi ortalanması üretir (aşağıya bakınız). */
  column-gap: 0;
  row-gap: clamp(2rem, 5vw, 4rem);
}

/* Metin bloğu sola yaslanmaz: sol kenar ile fotoğraf arasında ortalanır.
   fit-content, bloğu en geniş satırına (başlığa) göre daraltır; margin auto
   da kalan boşluğu iki yana eşit dağıtır. Sığmazsa max-width devreye girer. */
.hero__content {
  position: relative;
  z-index: 2;
  width: fit-content;
  /* Uzun bir başlıkta bile fotoğrafla arasında en az bu kadar boşluk kalır. */
  max-width: calc(100% - clamp(2rem, 5vw, 4rem));
  margin-inline: auto;
  /* Tam ortada değil, biraz solda dursun: sağa eklenen bu boşluk bloğu
     yarısı kadar sola kaydırır. Dar ekranda 0'a inip taşımayı önler
     (1280px civarında başlık zaten sütunu dolduruyor). */
  padding-right: clamp(0px, calc(10vw - 100px), 200px);
}
.hero__eyebrow { margin-bottom: var(--sp-5); }

.hero__title {
  font-size: var(--fs-900);
  line-height: 0.92;
  letter-spacing: -0.035em;
  transform: translateY(calc(var(--p, 0) * -26px));
  will-change: transform;
}
.hero__title span { display: block; }
.hero__title .is-accent {
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 240, 234, 0.85);
}
@supports not (-webkit-text-stroke: 1px #000) {
  .hero__title .is-accent { color: #C9C5BD; }
}

.hero__text {
  margin-top: var(--sp-5);
  font-size: var(--fs-500);
  color: #C9C5BD;
  max-width: 30ch;
  transform: translateY(calc(var(--p, 0) * -14px));
}
.hero__actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Ölçü şeridi — “ölçüye özel” fikrini görselleştiren teknik detay */
.hero__measure {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(183, 181, 176, 0.18);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #96928B;
}
.hero__measure b { color: var(--copper); font-weight: 600; }
.hero__measure span { display: inline-flex; align-items: center; gap: 0.5em; }
.hero__measure span + span::before {
  content: "";
  width: 1px; height: 12px;
  background: rgba(183, 181, 176, 0.3);
  margin-right: 0.4em;
}

/* Hero görseli — katmanlı, geometrik maskeli çerçeve */
.hero__figure {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: var(--hero-fig);
  margin: 0;
  transform: translateY(calc(var(--p, 0) * -34px));
  will-change: transform;
}
.hero__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(183, 181, 176, 0.28);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%, 0 calc(100% - 46px));
}
.hero__frame img {
  width: 100%;
  aspect-ratio: 553 / 735;
  object-fit: cover;
  transform: scale(calc(1.06 - (var(--p, 0) * 0.06)));
  transition: none;
  will-change: transform;
}
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 11, 0.55), transparent 45%);
  pointer-events: none;
}
/* Çerçeve dışına taşan bakır ölçü çizgisi */
.hero__rule {
  position: absolute;
  right: -1px;
  top: -22px;
  width: 1px;
  height: 22px;
  background: var(--copper);
}
.hero__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8B8780;
}

/* Scroll işareti */
.hero__cue {
  position: absolute;
  left: 0;
  bottom: calc(-1 * clamp(1rem, 3vw, 2rem));
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8B8780;
  opacity: calc(1 - (var(--p, 0) * 2.4));
}
.hero__cue i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--copper), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---- Hero açılış koreografisi ------------------------------------
   Sayfa yüklendiğinde html.is-ready eklenir ve sahne sırayla kurulur.
   Not: .hero__title/.hero__text/.hero__figure zaten --p parallax'ı için
   transform kullanıyor. Çakışmayı önlemek adına giriş animasyonları ya
   iç öğelere (span, .hero__frame) ya da clip-path/opacity'ye uygulanır. */
.js .hero__eyebrow,
.js .hero__title span,
.js .hero__text,
.js .hero__actions,
.js .hero__measure,
.js .hero__frame,
.js .hero__caption,
.js .hero__cue {
  --in-delay: 0s;
  transition:
    opacity 1s var(--ease-out) var(--in-delay),
    transform 1s var(--ease-out) var(--in-delay),
    clip-path 1.1s var(--ease-out) var(--in-delay);
}

/* Kırpma ile açılan öğelerde bitiş durumu da inset() olmalıdır; aksi hâlde
   inset() → none geçişi interpolate edilemez ve animasyon zıplayarak biter. */
.js .hero__title span,
.js .hero__text { clip-path: inset(-0.2em 0 -0.2em 0); }

/* Başlangıç (perde kapalı) durumu */
.js:not(.is-ready) .hero__eyebrow,
.js:not(.is-ready) .hero__actions,
.js:not(.is-ready) .hero__measure,
.js:not(.is-ready) .hero__caption { opacity: 0; transform: translateY(22px); }

.js:not(.is-ready) .hero__title span { opacity: 1; clip-path: inset(-0.2em 0 100% 0); }
.js:not(.is-ready) .hero__text       { opacity: 0; clip-path: inset(-0.2em 0 100% 0); }
/* .hero__frame'in köşe kesimi polygon(); inset() ile araları geçiş
   yapılamadığı için burada kırpma DEĞİL, transform + opacity kullanılır. */
.js:not(.is-ready) .hero__frame      { opacity: 0; transform: translateY(26px) scale(0.985); }
.js:not(.is-ready) .hero__cue        { opacity: 0; }

/* Sahne sırası — demir işi gibi kademeli oturur */
.js .hero__eyebrow          { --in-delay: 0.10s; }
.js .hero__title span:first-child { --in-delay: 0.20s; }
.js .hero__title span:last-child  { --in-delay: 0.32s; }
.js .hero__frame            { --in-delay: 0.38s; }
.js .hero__text             { --in-delay: 0.52s; }
.js .hero__actions          { --in-delay: 0.64s; }
.js .hero__caption          { --in-delay: 0.72s; }
.js .hero__measure          { --in-delay: 0.78s; }
.js .hero__cue              { --in-delay: 1.05s; }

/* Bakır ölçü çizgisi hero görselinin üstünde yukarı doğru çizilir */
.js .hero__rule { transform-origin: bottom; transition: transform 0.7s var(--ease-out) 0.95s; }
.js:not(.is-ready) .hero__rule { transform: scaleY(0); }

/* ============ 08. MARKA HİKÂYESİ ================================= */
.story { position: relative; overflow: clip; }
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.story__title { font-size: var(--fs-800); }
.story__text { margin-top: var(--sp-5); font-size: var(--fs-500); color: var(--fg-muted); max-width: 44ch; }
.story__list {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.story__list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-400);
}
.story__list .num { font-size: var(--fs-200); color: var(--accent); }

.story__media { position: relative; }
.story__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.story__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(calc(1.12 - (var(--p, 0) * 0.12)));
  will-change: transform;
}
/* Fotoğraf üzerine gelen ölçü çizgileri (dekoratif) */
.story__blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--copper);
}
.story__blueprint .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
  /* pathLength=1 ile normalize edilir */
}
.story__blueprint .fade { opacity: calc((var(--p, 0) - 0.45) * 2.6); }

/* ============ 09. NEDEN BİZ ŞERİDİ =============================== */
/* Eskiden ayrı bir bölümdü (sticky fotoğraflı iki kolon, yarım ekran yer
   kaplıyordu). Artık hizmet showcase'inin girişinde duran kompakt ızgara.
   Hairline ayraçlar 1px grid boşluğu + zemin renginden gelir. */
.why {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.why__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-6);
}
.why__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.why__lede {
  font-size: var(--fs-300);
  color: var(--fg-muted);
  max-width: 54ch;
}

.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.why__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg);
}
.why__item .num {
  grid-row: 1 / span 2;
  font-size: var(--fs-100);
  padding-top: 0.35em;
  color: var(--accent);
}
.why__word {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--fg);
}
.why__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-200);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* ============ 10. HİZMET SHOWCASE ================================ */
/* Masaüstünde bölüm pinlenir: sayfa normal şekilde kayar (scroll hijack
   yok), kayma ilerlemesi aktif hizmeti değiştirir. Mobilde bu düzen
   tamamen kapanır ve yerini tek kolon kart listesi alır. */
/* Başlık + "neden biz" şeridi pinlenen alanın DIŞINDA durur; pin yalnızca
   sekmeleri ve büyük görseli taşır. */
.showcase__intro { padding-block: clamp(3.5rem, 9vw, 7.5rem) 0; }
.showcase__intro .head { margin-bottom: 0; }

.showcase__scroll { height: 240vh; }
.showcase__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 1rem) var(--sp-6);
}
.showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.showcase__nav { position: sticky; top: calc(var(--header-h) + 4vh); }
.showcase__list { border-top: 1px solid var(--line); }
.showcase__btn {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--fg-faint);
  transition: color var(--t) var(--ease);
}
.showcase__btn .num { font-size: var(--fs-100); transition: color var(--t) var(--ease); }
.showcase__btn b {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.showcase__btn svg { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.showcase__btn:hover { color: var(--fg-muted); }
.showcase__btn[aria-selected="true"] { color: var(--fg); }
.showcase__btn[aria-selected="true"] .num { color: var(--accent); }
.showcase__btn[aria-selected="true"] svg { opacity: 1; transform: translateX(0); color: var(--accent); }
.showcase__btn[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: 50%;
  width: 3px; height: 26px;
  background: var(--accent);
  transform: translateY(-50%);
}
.showcase__panel[hidden] { display: none; }

.showcase__stage { position: relative; }
.showcase__panel { display: none; }
.showcase__panel.is-active { display: block; }

.showcase__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.showcase__figure img {
  width: 100%;
  height: min(48svh, 40vw);
  object-fit: cover;
  animation: showcaseIn 0.7s var(--ease) both;
}
@keyframes showcaseIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}
.showcase__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 11, 0.62), transparent 52%);
  pointer-events: none;
}
/* Fotoğraf üzerindeki teknik etiketler (dekoratif, ölçü iddiası taşımaz) */
.showcase__tags {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  z-index: 2;
}
.showcase__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.7em;
  background: rgba(13, 12, 11, 0.72);
  border: 1px solid rgba(200, 117, 50, 0.5);
  color: #E4E0D8;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.showcase__tag::before {
  content: "";
  width: 10px; height: 1px;
  background: var(--copper);
}

.showcase__body { margin-top: var(--sp-5); }
.showcase__body h3 { font-size: var(--fs-600); }
.showcase__body p { margin-top: var(--sp-3); color: var(--fg-muted); max-width: 56ch; }
.showcase__body .link { margin-top: var(--sp-4); }

/* Mobil: tek kolon kart listesi */
.showcase__cards { display: none; }
.svc-card {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.svc-card + .svc-card { margin-top: var(--sp-4); }
.svc-card__media { position: relative; overflow: hidden; }
.svc-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 11, 0.6), transparent 55%);
}
.svc-card__body { padding: var(--sp-4); }
.svc-card__body h3 { font-size: var(--fs-600); }
.svc-card__body p { margin-top: var(--sp-2); font-size: var(--fs-200); color: var(--fg-muted); }
.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--sp-3);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.svc-card__cta svg { width: 1em; height: 1em; }
.svc-card__num {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  color: #E4E0D8;
  background: rgba(13, 12, 11, 0.7);
  border: 1px solid rgba(183, 181, 176, 0.25);
  padding: 0.25em 0.6em;
}

/* ============ 11. ÜRETİM SÜRECİ — PINLENMİŞ SAHNE ================ */
.process { position: relative; }
.process__sticky { padding-block: var(--sp-9); }
.process__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: var(--sp-7);
}
.process__intro { position: relative; z-index: 2; }
.process__head { max-width: var(--wrap-narrow); }
.process__readout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  line-height: 0.82;
  color: var(--accent);
}
.process__readout span { font-size: var(--fs-900); font-weight: 700; letter-spacing: -0.06em; }
.process__readout small { font-size: var(--fs-400); color: var(--fg-faint); letter-spacing: 0.18em; }
.process__cue,
.forge__cue {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.process__cue i,
.forge__cue i {
  position: relative;
  width: var(--sp-8);
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}
.process__cue i::after,
.forge__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(calc((var(--p, 0) - 1) * 100%));
}
.forge__cue-copy {
  display: grid;
  min-width: 24ch;
}
.forge__cue-copy b {
  grid-area: 1 / 1;
  font-weight: 600;
}
.forge__cue-copy b:first-child { opacity: clamp(0, (0.9 - var(--p, 0)) / 0.08, 1); }
.forge__cue-copy b:last-child { opacity: clamp(0, (var(--p, 0) - 0.84) / 0.08, 1); color: var(--fg); }
.process__scrollmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: var(--sp-5);
  margin-top: var(--sp-5);
  color: var(--accent);
}
.process__scrollmark i {
  position: relative;
  width: 1px;
  height: var(--sp-7);
  background: var(--line-2);
}
.process__scrollmark i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: var(--sp-3);
  background: var(--accent);
  transform: translate(-50%, calc(var(--p, 0) * var(--sp-6)));
}
.process__scrollmark svg { width: var(--sp-4); height: auto; stroke: currentColor; stroke-width: 2; }
.process__stage {
  position: relative;
  min-height: 46svh;
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
}
.process__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--sp-7) var(--sp-7);
  opacity: 0.45;
}
.process__rail {
  position: absolute;
  z-index: 3;
  right: var(--sp-5);
  top: var(--sp-5);
  bottom: var(--sp-5);
  width: 2px;
  background: var(--line-2);
}
.process__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.process__track {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  min-height: 46svh;
  padding: var(--sp-5);
}
.step {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  background: var(--surface);
}
.step__icon {
  width: min(30%, var(--sp-9));
  color: var(--accent);
}
.step__icon svg { display: block; width: 100%; height: auto; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.step__dot {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: var(--sp-3);
  height: var(--sp-3);
  border: 1px solid var(--line-2);
  background: var(--bg);
  border-radius: 50%;
}
.step__dot::after {
  content: "";
  position: absolute;
  inset: var(--sp-1);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.step.is-active .step__dot { border-color: var(--accent); }
.step.is-active .step__dot::after { opacity: 1; }
.step__num { display: block; margin-top: var(--sp-4); font-size: var(--fs-100); letter-spacing: 0.2em; color: var(--accent); }
.step__phase {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.step__title {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-700);
  font-weight: 700;
  line-height: 0.95;
  color: var(--fg);
}
.step__text { margin-top: var(--sp-4); font-size: var(--fs-300); color: var(--fg-muted); max-width: 38ch; }

.js .process__scroll { height: 240vh; }
.js .process__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-6);
}
.js .process__track { display: block; }
.js .step {
  --step-o: 0;
  --step-y: 1;
  position: absolute;
  inset: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6);
  opacity: var(--step-o);
  transform: translate3d(0, calc(var(--step-y) * var(--sp-8)), 0)
             scale(calc(0.94 + var(--step-o) * 0.06));
  transform-origin: center;
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-out);
  pointer-events: none;
  will-change: transform, opacity;
}
.js .step:first-child { --step-o: 1; --step-y: 0; }

/* ============ 12. HAM MADDEDEN SONUCA — FERFORJE BLUEPRINT ======= */
.forge { position: relative; }
.forge__scroll { height: 340vh; }
.forge__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-6);
}
.forge__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.58fr);
  align-items: center;
  gap: var(--sp-8);
}
.forge__head { position: relative; z-index: 4; }
.forge__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--ink-deep);
}
.forge__stage::before {
  content: "";
  position: absolute;
  inset: var(--sp-3);
  z-index: 2;
  border: 1px solid var(--line);
  pointer-events: none;
}
.forge__svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--copper);
  opacity: clamp(0, (0.98 - var(--p, 0)) / 0.12, 1);
  transform: scale(calc(0.985 + var(--p, 0) * 0.015));
  transform-origin: center;
}
.forge__grid { opacity: calc(0.32 + var(--p, 0) * 0.3); }
.forge__svg .grid-line { stroke: var(--line); stroke-width: 1; }
.forge__svg .grid-axis { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 7; }
.forge__svg .draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(
    1 - clamp(0, (var(--p, 0) - var(--s, 0)) / (var(--e, 1) - var(--s, 0)), 1)
  );
  vector-effect: non-scaling-stroke;
}
.forge__svg .draw--frame { stroke-width: 4; }
.forge__svg .draw--bar { stroke-width: 3; }
.forge__svg .draw--ornament { stroke: var(--silver); }
.forge__svg .draw--detail,
.forge__svg .draw--mount { stroke: var(--steel); }
.forge__svg .measure,
.forge__svg .measure-text {
  opacity: clamp(0, (var(--p, 0) - 0.62) / 0.12, 1);
}
.forge__svg .measure {
  fill: none;
  stroke: var(--silver);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}
.forge__svg text {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  fill: var(--silver);
}
.forge__photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: clamp(0, (var(--p, 0) - 0.82) / 0.14, 1);
  transform: scale(calc(1.04 - clamp(0, (var(--p, 0) - 0.82) / 0.18, 1) * 0.04));
  transform-origin: center;
  will-change: transform, opacity;
}
.forge__photo img { width: 100%; height: 100%; object-fit: cover; }
.forge__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim), transparent 58%);
}
.forge__label {
  position: absolute;
  z-index: 4;
  left: var(--sp-5);
  bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.forge__label > b { color: var(--accent); font-weight: 600; }
.forge__stagename { position: relative; display: inline-block; min-width: 13ch; height: 1.3em; }
.forge__stagename b {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-weight: 600;
  color: var(--fg);
  opacity: calc(
    clamp(0, (var(--p, 0) - var(--s)) / 0.04, 1) *
    clamp(0, (var(--e) - var(--p, 0)) / 0.04, 1)
  );
}
.forge__progress {
  position: absolute;
  z-index: 4;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: min(var(--sp-10), 24vw);
  height: 2px;
  background: var(--line-2);
}
.forge__progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ============ 13. GALERİ ========================================= */
.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 460px);
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.reel::-webkit-scrollbar { height: 4px; }
.reel::-webkit-scrollbar-thumb { background: var(--line-2); }
.reel__item { scroll-snap-align: start; }
.reel__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.reel__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.reel__item:hover .reel__figure img { transform: scale(1.04); }
.reel__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 11, 0.72), transparent 50%);
  pointer-events: none;
}
.reel__cap {
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 2;
}
.reel__tag {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.reel__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 600;
  color: #F3F0EA;
}
.reel__name svg { width: 18px; height: 18px; color: var(--copper); }

.reel-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.reel-bar__track { flex: 1; height: 1px; background: var(--line-2); position: relative; }
.reel-bar__thumb {
  position: absolute;
  top: -1px;
  height: 3px;
  background: var(--accent);
  width: 20%;
  transition: transform 0.12s linear, width 0.2s var(--ease);
}
.reel-bar__btns { display: flex; gap: var(--sp-2); }
.reel-bar__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.reel-bar__btn:hover { border-color: var(--accent); color: var(--accent); }
.reel-bar__btn[disabled] { opacity: 0.35; cursor: default; }
.reel-bar__btn svg { width: 18px; height: 18px; }

/* ============ 14. ATÖLYE KANITI (INSTAGRAM) ====================== */
/* 8 görsel → masaüstünde 4x2, telefonda 2x4. Fotoğraflar panelden tek tek
   değiştirilir; hangi Instagram karesinin görüneceği tamamen seçilebilir. */
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.proof__item { position: relative; overflow: hidden; }
.proof__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
}
.proof__item:hover img { transform: scale(1.06); filter: saturate(1); }

/* ============ 15. FİYAT KARTLARI ================================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
@media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.price-card:hover { border-color: var(--accent); transform: translateY(-3px); }
/* Teknik çizim yerine gerçek uygulama fotoğrafı: kart genişliğince taşar. */
.price-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.price-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.price-card:hover .price-card__media img { transform: scale(1.05); }
.price-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 600;
}
.price-card__desc { margin-top: var(--sp-2); font-size: var(--fs-200); color: var(--fg-muted); flex: 1; }
.price-card__price {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.price-card__price span { font-size: var(--fs-200); font-weight: 500; color: var(--fg-muted); }
.price-card .btn { margin-top: var(--sp-4); }
.price-note { margin-top: var(--sp-5); font-size: var(--fs-200); color: var(--fg-muted); }

/* ============ 16. TEKLİF FORMU =================================== */
.quote__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.quote__title { font-size: var(--fs-800); }
.quote__text { margin-top: var(--sp-5); font-size: var(--fs-500); color: var(--fg-muted); max-width: 42ch; }
.quote__direct { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: var(--sp-3); }
.quote__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-400);
}
.quote__row svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.quote__row b { font-weight: 600; }
.quote__row span { color: var(--fg-muted); font-size: var(--fs-200); margin-left: auto; letter-spacing: 0.12em; text-transform: uppercase; }

.form {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
}
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font-size: 16px;                      /* iOS zoom engelleme */
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 117, 50, 0.22);
}
.field__error {
  font-size: var(--fs-100);
  color: #E4653F;
  min-height: 1.1em;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #E4653F; }

.form__note { font-size: var(--fs-100); color: var(--fg-muted); }
.form__status {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  font-size: var(--fs-200);
}
.form__status.is-shown { display: flex; }
.form__status[data-state="success"] { border-color: rgba(37, 211, 102, 0.5); color: var(--fg); }
.form__status[data-state="error"] { border-color: rgba(228, 101, 63, 0.6); color: var(--fg); }
.form__status svg { width: 20px; height: 20px; flex-shrink: 0; }
.form button[data-state="loading"] { pointer-events: none; opacity: 0.72; }
.spinner {
  width: 1.1em; height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 17. SSS ============================================ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--accent);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__body { overflow: hidden; }
.faq__body p { padding-bottom: var(--sp-5); color: var(--fg-muted); max-width: 66ch; }

/* ============ 18. İLETİŞİM KARTLARI & HARİTA ===================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.contact-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.contact-card__icon { width: 24px; height: 24px; color: var(--accent); }
.contact-card__label {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.contact-card__value { font-size: var(--fs-300); font-weight: 600; overflow-wrap: anywhere; }
.contact-card--wide { grid-column: 1 / -1; }

.map {
  margin-top: var(--sp-5);
  border: 1px solid var(--line);
  overflow: hidden;
}
.map iframe { border: 0; width: 100%; height: clamp(280px, 45vw, 420px); }

/* ============ 19. FOOTER ========================================= */
.site-footer {
  background: var(--ink-deep);
  color: #C9C5BD;
  border-top: 1px solid rgba(183, 181, 176, 0.14);
  padding-block: clamp(3rem, 7vw, 5rem) var(--sp-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.site-footer__logo { height: 62px; width: auto; }
.site-footer__about {
  margin-top: var(--sp-4);
  font-size: var(--fs-200);
  color: #96928B;
  max-width: 38ch;
}
.site-footer h2 {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-4);
}
.site-footer__links { display: grid; gap: 0; }
.site-footer__links a {
  display: block;
  padding-block: 0.55rem;
  font-size: var(--fs-200);
  color: #C9C5BD;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.site-footer__links a:hover { color: var(--copper); padding-left: 6px; }
.site-footer__contact { display: grid; gap: var(--sp-3); }
.site-footer__contact li { display: flex; gap: var(--sp-3); font-size: var(--fs-200); align-items: flex-start; }
.site-footer__contact svg { width: 17px; height: 17px; color: var(--copper); flex-shrink: 0; margin-top: 3px; }
/* Dokunma hedefi: alt bilgideki telefon/e-posta bağlantıları rahat tıklanır. */
.site-footer__contact a { display: inline-block; padding-block: 6px; color: #C9C5BD; }
.site-footer__contact a:hover { color: var(--copper); }
.social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(183, 181, 176, 0.22);
  border-radius: var(--r);
  color: #C9C5BD;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.social a:hover { border-color: var(--copper); color: var(--copper); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(183, 181, 176, 0.14);
  font-size: var(--fs-100);
  color: #7C7871;
  letter-spacing: 0.08em;
}

/* ============ 20. YÜZEN AKSİYONLAR & MOBİL ÇUBUK ================= */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 900;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--wa);
  color: var(--wa-ink);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform var(--t) var(--ease);
}
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--wa);
  animation: pulse 3.2s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.wa-fab:hover { transform: scale(1.07); }
.wa-fab svg { width: 27px; height: 27px; }

.mobile-bar { display: none; }

/* ============ 21. LIGHTBOX ======================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(10, 9, 8, 0.95);
}
.lightbox.is-open { display: flex; }
.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border: 1px solid rgba(183, 181, 176, 0.2);
}
.lightbox__caption {
  text-align: center;
  color: #96928B;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(28, 27, 25, 0.9);
  border: 1px solid rgba(183, 181, 176, 0.25);
  border-radius: var(--r);
  color: #F3F0EA;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lightbox__btn:hover { border-color: var(--copper); color: var(--copper); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__close { top: clamp(0.5rem, 2vw, 1.5rem); right: clamp(0.5rem, 2vw, 1.5rem); transform: none; width: 48px; height: 48px; }

/* ============ 22. ALT SAYFA DÜZENİ =============================== */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  color: #F3F0EA;
  overflow: clip;
  isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) brightness(0.38);
  transform: scale(1.06);
}
.page-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(19, 18, 16, 0.94), rgba(19, 18, 16, 0.6)),
    linear-gradient(to top, var(--ink) 3%, transparent 60%);
}
.page-hero__inner { position: relative; }
.page-hero__title { font-size: var(--fs-800); margin-top: var(--sp-4); }
.page-hero__lede { margin-top: var(--sp-4); font-size: var(--fs-500); color: #C9C5BD; max-width: 56ch; }
.page-hero .actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.breadcrumb { font-family: var(--font-display); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); color: #8B8780; }
.breadcrumb li + li::before { content: "/"; color: #57534D; }
/* Yol izi bağlantıları da rahat dokunulabilir olmalı (min. 24px). */
.breadcrumb a { display: inline-block; padding-block: 5px; color: #8B8780; transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--copper); }
.breadcrumb [aria-current="page"] { color: var(--copper); }

/* Alt sayfa galeri ızgarası — masonry hissi veren yoğun düzen */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22vw, 280px), 1fr));
  gap: var(--sp-3);
}
.grid-gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: zoom-in;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.grid-gallery__btn img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.grid-gallery__btn::after {
  content: "";
  position: absolute;
  inset: auto var(--sp-2) var(--sp-2) auto;
  width: 26px; height: 26px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  color: #F3F0EA;
  border: 1px solid rgba(243, 240, 234, 0.4);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.grid-gallery__btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.grid-gallery__btn:hover img { transform: scale(1.06); }
.grid-gallery__btn:hover::after, .grid-gallery__btn:focus-visible::after { opacity: 1; }

/* Alt sayfa çapraz bağlantı listesi */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 600;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.related a svg { width: 16px; height: 16px; color: var(--accent); transition: transform var(--t) var(--ease); }
.related a:hover { border-color: var(--accent); transform: translateY(-2px); }
.related a:hover svg { transform: translateX(3px); }

/* Öne çıkan CTA bandı */
.cta-band {
  position: relative;
  background: var(--graphite);
  color: #F3F0EA;
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgba(183, 181, 176, 0.14);
  border-bottom: 1px solid rgba(183, 181, 176, 0.14);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.cta-band h2 { font-size: var(--fs-700); max-width: 18ch; }
.cta-band p { margin-top: var(--sp-3); color: #ADA9A1; max-width: 40ch; }

/* Hizmet rehberi — eski sitelerdeki ürün bilgisini okunabilir, teknik bir
   düzende toplar. Alt sayfalarda içerik önce gelir; galeri kanıtlar. */
.service-guide__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--sp-8);
  align-items: start;
}
.service-guide__intro .head { margin-bottom: 0; }
.service-facts { border-top: 1px solid var(--line); }
.service-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.service-fact__num {
  min-width: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  color: var(--accent);
}
.service-fact h3 { font-size: var(--fs-500); }
.service-fact p {
  margin-top: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-200);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.model-card {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  min-height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.model-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.model-card__media { min-height: 100%; background: var(--surface-2); }
.model-card__media img { width: 100%; height: 100%; object-fit: cover; }
.model-card--drawing .model-card__media img { object-fit: contain; }
.model-card__body { padding: var(--sp-5); }
.model-card__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.model-card h3 { margin-top: var(--sp-2); font-size: var(--fs-600); }
.model-card__body > p { margin-top: var(--sp-3); color: var(--fg-muted); font-size: var(--fs-200); }
.spec-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--fs-200);
}
.spec-list strong { color: var(--fg); text-align: right; }

.service-table-wrap {
  margin-top: var(--sp-6);
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}
.service-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.service-table th,
.service-table td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.service-table th {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface-2);
}
.service-table td { color: var(--fg-muted); font-size: var(--fs-200); vertical-align: top; }
.service-table td:first-child { color: var(--fg); font-weight: 700; }
.service-table tr:last-child td { border-bottom: 0; }
.service-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.service-note__mark {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1;
  color: var(--accent);
}
.service-note h3 { font-size: var(--fs-500); }
.service-note p { margin-top: var(--sp-2); color: var(--fg-muted); font-size: var(--fs-200); }

.service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.service-step {
  padding: var(--sp-5);
  border-top: 1px solid var(--accent);
  background: var(--surface);
}
.service-step .num { color: var(--accent); }
.service-step h3 { margin-top: var(--sp-5); font-size: var(--fs-500); }
.service-step p { margin-top: var(--sp-3); color: var(--fg-muted); font-size: var(--fs-200); }

/* ============ 23. SCROLL ANİMASYON YARDIMCILARI ================== */
/* JS varsa açılış animasyonu uygulanır; JS yoksa içerik doğrudan görünür.
   Gecikme iki kaynaktan gelir:
   · data-reveal-delay="1..5" → elle verilen sıra
   · --i                      → data-reveal-group içindeki çocuklara JS'in
                                otomatik yazdığı sıra (kademeli akış)          */
.js [data-reveal] {
  --rv-delay: 0s;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-out) var(--rv-delay),
    transform 0.8s var(--ease-out) var(--rv-delay),
    clip-path 0.9s var(--ease-out) var(--rv-delay),
    filter 0.8s var(--ease-out) var(--rv-delay);
}
/* Genel durumda clip-path'e DOKUNULMAZ: kutu dışına taşan rozet, ölçü
   çizgisi vb. öğeler kırpılmasın ve tasarımdaki köşe kesimleri bozulmasın.
   Kırpmayı yalnızca onu kendi efekti için kullanan varyantlar yönetir.   */
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* -- Varyantlar: her bölüm aynı şekilde girmesin ------------------- */

/* Maskeli satır açılımı — başlıklar perde arkasından yukarı kayar.
   clip-path kullanır; transform'lu parallax öğelerle çakışmaz.        */
.js [data-reveal="mask"] {
  opacity: 1;
  transform: translateY(0.4em);
  clip-path: inset(-0.2em 0 100% 0);
}
/* Üst/alt paylar çıkıntı ve alt uzantıları (g, y, ş) kırpmadan bırakır. */
.js [data-reveal="mask"].is-in { clip-path: inset(-0.2em 0 -0.2em 0); }

/* Soldan giriş — liste ve yan sütunlar için */
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }

/* Hafif yakınlaşma — görsel ve kartlar için */
.js [data-reveal="scale"] { transform: scale(0.955); }

/* Netleşerek gelme — teknik çizim ve fotoğraflarda derinlik hissi */
.js [data-reveal="blur"] {
  transform: translateY(14px);
  filter: blur(9px);
}

/* Yatay çizgi çekme — ölçü/ayırıcı çizgiler */
.js [data-reveal="line"] {
  transform: none;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}
.js [data-reveal="line"].is-in { clip-path: inset(0 0 0 0); }

.js [data-reveal-delay="1"] { --rv-delay: 0.08s; }
.js [data-reveal-delay="2"] { --rv-delay: 0.16s; }
.js [data-reveal-delay="3"] { --rv-delay: 0.24s; }
.js [data-reveal-delay="4"] { --rv-delay: 0.32s; }
.js [data-reveal-delay="5"] { --rv-delay: 0.40s; }

/* Grup içi otomatik kademelendirme (JS --i yazar) */
.js [data-reveal][style*="--i"] { --rv-delay: calc(var(--i, 0) * 0.075s); }

/* ============ 24. HAREKET AZALTMA & ERİŞİLEBİLİRLİK ============== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }
  /* Hero açılış koreografisi tamamen devre dışı — sahne kurulu gelir.
     clip-path burada sıfırlanmaz: .hero__frame'in polygon() köşe kesimi
     tasarımın parçası, silinmemeli. Kırpmayla açılan metinler ayrıca
     aşağıda tam görünür duruma alınır.                                  */
  .js:not(.is-ready) .hero__eyebrow,
  .js:not(.is-ready) .hero__title span,
  .js:not(.is-ready) .hero__text,
  .js:not(.is-ready) .hero__actions,
  .js:not(.is-ready) .hero__measure,
  .js:not(.is-ready) .hero__frame,
  .js:not(.is-ready) .hero__caption,
  .js:not(.is-ready) .hero__cue,
  .js:not(.is-ready) .hero__rule {
    opacity: 1 !important;
    transform: none !important;
  }
  .js:not(.is-ready) .hero__title span,
  .js:not(.is-ready) .hero__text {
    clip-path: inset(-0.2em 0 -0.2em 0) !important;
  }
  .js [data-reveal="mask"] { clip-path: inset(-0.2em 0 -0.2em 0) !important; }
  .js [data-reveal="line"] { clip-path: inset(0) !important; }
  .hero__bg img, .hero__title, .hero__text, .hero__figure,
  .hero__frame img, .story__figure img { transform: none !important; }
  .process__scroll { height: auto !important; }
  .process__sticky { position: static !important; height: auto !important; padding-block: var(--sp-8); overflow: visible; }
  .process__layout { grid-template-columns: 1fr; }
  .process__readout, .process__cue, .process__scrollmark, .process__rail { display: none; }
  .js .process__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: auto; }
  .js .step {
    position: relative;
    inset: auto;
    min-height: 0;
    opacity: 1 !important;
    transform: none !important;
    padding: var(--sp-6);
  }
  .forge__scroll { height: auto; }
  .forge__sticky { position: static; height: auto; padding-block: var(--sp-6); overflow: visible; }
  .forge__layout { grid-template-columns: 1fr; }
  .forge__svg { opacity: 0 !important; transform: none !important; }
  .forge__photo { opacity: 1 !important; transform: none !important; }
  .forge__cue, .forge__label, .forge__progress { display: none; }
  .showcase__scroll { height: auto; }
  .showcase__pin { position: static; height: auto; padding-block: 0; display: block; overflow: visible; }
  .wa-fab::after { display: none; }
  .hero__cue i { animation: none; }
}

/* Kontrast tercihi */
@media (prefers-contrast: more) {
  :root { --line: rgba(183, 181, 176, 0.4); --line-2: rgba(183, 181, 176, 0.6); }
  .panel--bone { --line: rgba(19, 18, 16, 0.35); --line-2: rgba(19, 18, 16, 0.55); }
}

/* ============ 25. DUYARLI AYARLAR ================================ */

/* ---- Tablet ve altı: menü panele döner ---- */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav__cta { display: none; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 999;
    width: min(420px, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) var(--sp-7);
    background: var(--ink);
    border-left: 1px solid rgba(183, 181, 176, 0.16);
    transform: translateX(100%);
    transition: transform 0.42s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__item { width: 100%; }
  .nav__link {
    min-height: 60px;
    padding: 0;
    font-size: var(--fs-600);
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(183, 181, 176, 0.12);
    justify-content: space-between;
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--copper); }

  .nav__toggle { width: 100%; justify-content: space-between; }
  .nav__panel {
    position: static;
    transform: none;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    padding: var(--sp-2) 0 var(--sp-4);
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__toggle[aria-expanded="true"] + .nav__panel { display: grid; transform: none; }
  .nav__panel a { padding-left: var(--sp-4); border-bottom: 0; color: #ADA9A1; }

  .nav__cta--mobile { display: flex; margin-top: var(--sp-5); }

  /* Tek kolona düşünce ortalamaya gerek kalmaz; metin normal akışına döner. */
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero { align-items: center; }
  .hero__content { width: auto; margin-inline: 0; }
  .hero__figure { max-width: 420px; justify-self: start; }
  .hero__cue { display: none; }

  .story__inner, .showcase__inner, .quote__inner { grid-template-columns: 1fr; }
  .showcase__nav { position: static; }

  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service-guide__intro { grid-template-columns: 1fr; gap: var(--sp-6); }
  .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---- Tablet: hizmet showcase mobil kart moduna geçer ---- */
@media (max-width: 900px) {
  .showcase__nav, .showcase__stage { display: none; }
  .showcase__cards { display: block; padding-bottom: clamp(3.5rem, 9vw, 7.5rem); }
  .showcase__scroll { height: auto; }
  .showcase__pin { position: static; height: auto; padding-block: 0; display: block; overflow: visible; }

  .process__scroll { height: 210vh; }
  .process__sticky { padding-block: calc(var(--header-h) + var(--sp-3)) var(--sp-4); }
  .process__layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .process__intro { padding-right: var(--sp-10); }
  .process__readout { position: absolute; top: var(--sp-4); right: 0; margin-top: 0; }
  .process__readout span { font-size: var(--fs-800); }
  .process__readout small { font-size: var(--fs-100); }
  .process__cue { display: none; }
  .process__stage, .process__track { min-height: 42svh; }
  .process__stage::before { background-size: var(--sp-7) var(--sp-7); }
  .js .step { inset: var(--sp-4); padding: var(--sp-5); }
  .step__icon { width: var(--sp-8); }
  .step__num { margin-top: var(--sp-4); }
  .step__title { font-size: var(--fs-600); }
  .step__text { font-size: var(--fs-200); }

  .forge__scroll { height: 300vh; }
  .forge__sticky { padding-block: calc(var(--header-h) + var(--sp-3)) var(--sp-4); }
  .forge__layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .forge__head .head__lede { max-width: 52ch; }
  .forge__cue { display: none; }
  .forge__stage { width: 100%; aspect-ratio: 16 / 10; }
}

/* ---- Telefon ---- */
@media (max-width: 640px) {
  :root { --gutter: 1.25rem; --header-h: 66px; }

  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* Yönetim panelinden yalnızca telefon görünümünde kapatılan bölümler. */
  [data-panel-hide-mobile="true"] { display: none !important; }

  /* ---- Hero: ekranı zorla doldurmaz; fotoğraf ve altındaki hizmetler
       çok daha erken görünür. Kare yerine yatay bant kullanılır. ---- */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--sp-5)); padding-bottom: var(--sp-7); }
  .hero__inner { gap: var(--sp-6); }
  /* 13vw'de "Demir Doğrama" 375px'lik ekranda taşıp kırpılıyordu. */
  .hero__title { font-size: clamp(2.25rem, 11.5vw, 3.5rem); }
  .hero__text { max-width: 100%; font-size: var(--fs-400); }
  .hero__figure { max-width: 100%; }
  .hero__frame { clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px)); }
  .hero__frame img { aspect-ratio: 3 / 2; }
  .hero__measure { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-6); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  /* panel--flush bölümler (showcase, forge) kendi boşluğunu yönetir. */
  .panel:not(.panel--flush) { padding-block: clamp(2.75rem, 11vw, 4rem); }
  .showcase__intro { padding-block: clamp(2.75rem, 11vw, 4rem) 0; }
  .showcase__cards { padding-bottom: clamp(2.75rem, 11vw, 4rem); }
  .forge__sticky { padding-block: clamp(2.75rem, 11vw, 4rem); }

  /* ---- Neden biz: tek kolon, sıkı ---- */
  .why__list { grid-template-columns: 1fr; }
  .why__item { padding: var(--sp-4); }

  /* ---- Hizmet listesi: telefonda yatay kart ----
       9 hizmetin tamamı 5–6 ekran yerine ~2,5 ekranda taranabilir; her
       satırda yine gerçek bir iş fotoğrafı vardır. ---- */
  .svc-card {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: stretch;
  }
  .svc-card + .svc-card { margin-top: var(--sp-3); }
  .svc-card__media img { aspect-ratio: auto; height: 100%; min-height: 118px; }
  .svc-card__media::after { background: linear-gradient(to right, transparent 55%, rgba(13, 12, 11, 0.35)); }
  .svc-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-4);
  }
  .svc-card__body h3 { font-size: var(--fs-500); }
  .svc-card__cta { margin-top: var(--sp-2); }
  .svc-card__num { top: var(--sp-2); left: var(--sp-2); }

  .form__row { grid-template-columns: 1fr; }

  /* ---- İş galerisi ve Instagram: fotoğraflar büyür ---- */
  /* Hero parallax'ı telefonda kapalı: arka plandaki filtreli fotoğrafın her
     karede yeniden ölçeklenmesi düşük donanımda kaydırmayı takılatıyor ve
     pil yakıyor. Giriş animasyonları (clip-path/opacity) etkilenmez. */
  .hero__bg img,
  .hero__frame img,
  .hero__title,
  .hero__text,
  .hero__figure { transform: none; will-change: auto; }

  .reel { grid-auto-columns: 86vw; }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .price-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .price-card__media { aspect-ratio: 16 / 10; }

  .model-grid { grid-template-columns: 1fr; }
  .model-card { grid-template-columns: 1fr; }
  .model-card__media { min-height: 0; }
  .model-card__media img { aspect-ratio: 16 / 10; }
  .service-steps { grid-template-columns: 1fr; }
  .service-fact { gap: var(--sp-3); }
  .service-note { padding: var(--sp-4); }

  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { justify-content: flex-start; }
  .site-footer__contact a { padding-block: 11px; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band .actions { width: 100%; }
  .cta-band .actions .btn { flex: 1; }

  /* Yüzen buton yerine alt aksiyon çubuğu */
  .wa-fab { display: none; }
  .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(183, 181, 176, 0.16);
    border-top: 1px solid rgba(183, 181, 176, 0.16);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 58px;
    font-family: var(--font-display);
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .mobile-bar svg { width: 18px; height: 18px; }
  .mobile-bar .mb--call { background: var(--graphite); color: #F3F0EA; }
  .mobile-bar .mb--wa { background: var(--wa); color: var(--wa-ink); }

  .lightbox__btn { width: 46px; height: 46px; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
}

/* ---- Geniş masaüstü ---- */
@media (min-width: 1025px) {
  .nav { position: static; transform: none; }
  .nav__cta--mobile { display: none; }
  .nav-backdrop { display: none; }

  /* --fs-900 ekran genişliğine göre ölçekleniyor, oysa iki kolonlu düzende
     başlık ekranın ancak yarısını kullanıyor. Bu sınır olmadan uzun kelime
     ("Demir Doğrama") 1100–1400px arasında sütundan taşıp kırpılıyordu. */
  .hero__title { font-size: min(var(--fs-900), 6vw); }

  /* Dikey olarak dar ekranlarda (ör. 1440x900 dizüstü) fotoğrafın doğal
     yüksekliği hero'yu ekran dışına taşırıyor, ölçü şeridi ve "Kaydırın"
     ipucu görünmez oluyordu. object-fit:cover olduğu için kırpmak
     görüntüyü bozmaz. */
  .hero__frame img { max-height: calc(100svh - 15rem); }
}

@media (min-width: 1400px) {
  :root { --hero-fig: 620px; }
}

/* =====================================================================
   26. ÖNE ÇIKAN ALANLAR (spotlight) — medikal & teşhir sistemleri
   ===================================================================== */
.spotlight__item {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.spotlight__item + .spotlight__item {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.spotlight__item:nth-child(even) .spotlight__media { order: -1; }

.spotlight__no {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.spotlight__title { font-size: var(--fs-800); }
.spotlight__text { margin-top: var(--sp-4); font-size: var(--fs-500); color: var(--fg-muted); max-width: 44ch; }
.spotlight__list {
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.spotlight__list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-200);
  color: var(--fg-muted);
}
.spotlight__list svg { width: 15px; height: 15px; margin-top: 0.28em; color: var(--accent); }
.spotlight__item .link { margin-top: var(--sp-5); }

/* Teknik çizim çerçevesi — fotoğrafla karıştırılmasın diye etiketli */
.blueprint-figure {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.blueprint-figure::before {
  content: attr(data-label);
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.blueprint-figure svg { width: 100%; height: auto; color: var(--accent); }
.blueprint-figure .bp-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.blueprint-figure .bp-thin { fill: none; stroke: var(--fg-faint); stroke-width: 1; }
.blueprint-figure .bp-dash { fill: none; stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 4 4; }
.blueprint-figure text {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: var(--fg-faint);
}

/* Fotoğraf yığını — teşhir sistemleri için */
.stack { position: relative; margin: 0; padding-bottom: 12%; }
.stack img { border: 1px solid var(--line-2); background: var(--surface); }
.stack__main { width: 82%; display: block; }
.stack__sub {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.stack__tag {
  position: absolute;
  top: var(--sp-4); right: 0;
  padding: 0.35em 0.7em;
  background: var(--accent);
  color: #16100A;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =====================================================================
   27. LAZER KAYNAK
   ===================================================================== */
.laser__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.laser__seam { width: 100%; height: auto; color: var(--accent); }
.laser__seam .plate { fill: none; stroke: var(--fg-muted); stroke-width: 2; }
.laser__seam .plate-fill {
  fill: currentColor;
  fill-opacity: 0.08;
  stroke: var(--fg-muted);
  stroke-width: 1.5;
}
.laser__seam .hatch { stroke: var(--fg-faint); stroke-width: 1; opacity: 0.5; }
.laser__seam .weld {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - 0.15) / 0.55, 1));
}
.laser__seam .head {
  transform: translateX(calc(clamp(0, (var(--p, 0) - 0.15) / 0.55, 1) * 300px));
  opacity: calc(clamp(0, (var(--p, 0) - 0.1) / 0.1, 1) * clamp(0, (0.78 - var(--p, 0)) / 0.06, 1));
}
.laser__seam .glow { fill: currentColor; opacity: 0.28; }
.laser__seam text { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; fill: var(--fg-faint); }

.metals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.metal {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--sp-4);
  background: var(--bg);
  transition: background-color var(--t) var(--ease);
}
.metal:hover { background: var(--surface); }
.metal b {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.metal span { font-size: var(--fs-200); color: var(--fg-muted); }

/* =====================================================================
   28. REFERANSLAR
   ===================================================================== */
.refs { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.refs__group h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.refs__group h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.refs__list { border-top: 1px solid var(--line); }
.refs__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: clamp(0.85rem, 1.8vw, 1.15rem);
  border-bottom: 1px solid var(--line);
}
.refs__row .num { font-size: var(--fs-100); }
.refs__name {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
}
.refs__city {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.refs__note { margin-top: var(--sp-5); font-size: var(--fs-200); color: var(--fg-muted); }
.refs__note .link { margin-left: var(--sp-2); }

/* --- Kompakt varyant: anasayfada kullanılır ------------------------
   Tam tablo referanslar.html'de kalır. Anasayfada referanslar satır satır
   bir listeye değil, akıp giden küçük etiketlere dönüşür: aynı bilgi,
   bölümün birkaç ekran yerine yarım ekran yer kaplamasıyla. ------- */
.refs--compact { gap: clamp(1.5rem, 4vw, 2.5rem); }
.refs--compact .refs__group h3 { margin-bottom: var(--sp-3); }
.refs--compact .refs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-top: 0;
}
.refs--compact .refs__row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.refs--compact .refs__name { font-size: var(--fs-200); font-weight: 600; line-height: 1.35; }
.refs--compact .refs__city { font-size: var(--fs-100); letter-spacing: 0.14em; }

/* Vurgu cümlesi */
.pullquote {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-700);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 24ch;
  color: var(--fg);
}
.pullquote span { color: var(--accent); }
.pullquote + p { margin-top: var(--sp-4); padding-left: clamp(1rem, 3vw, 2rem); color: var(--fg-muted); max-width: 52ch; }

/* =====================================================================
   29. YENİ BÖLÜMLERİN MOBİL KOMPOZİSYONU
   ===================================================================== */
@media (max-width: 1024px) {
  .spotlight__item, .laser__inner { grid-template-columns: 1fr; }
  .spotlight__item:nth-child(even) .spotlight__media { order: 0; }
  .spotlight__media { max-width: 520px; }
}

@media (max-width: 640px) {
  .refs__row { grid-template-columns: 2.1rem minmax(0, 1fr); row-gap: 0.15rem; }
  .refs__city { grid-column: 2; }
  /* Etiketler telefonda da akar; grid kuralları buraya sızmamalı. */
  .refs--compact .refs__row { grid-template-columns: none; row-gap: 0; }
  .refs--compact .refs__city { grid-column: auto; }
  .stack { padding-bottom: 16%; }
  .stack__main { width: 78%; }
  .stack__sub { width: 52%; }
  .metals { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .metal { padding: var(--sp-3); }
  .pullquote { font-size: var(--fs-600); max-width: 100%; }
}

/* Menü panelinde grup başlıkları (Uzmanlık / Demir Doğrama) */
.nav__panel h3 {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.nav__panel h3:first-child { margin-top: 0; }
.nav__panel a.is-new::before {
  content: "YENİ";
  margin-right: 0.6em;
  padding: 0.1em 0.4em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #16100A;
  background: var(--copper);
}
@media (max-width: 1024px) {
  .nav__panel h3 { padding-left: var(--sp-4); margin-top: var(--sp-3); }
}

/* =====================================================================
   24. FIGURE-PHOTO — Tekil büyük fotoğraf (SVG şema/blueprint yerine)
   Uzmanlık spotlight'ı, lazer bölümü ve iç sayfalarda kullanılır.
   Panel bu figure içindeki <img>'in src'sini üzerine yazar.
   ===================================================================== */
.figure-photo {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  isolation: isolate;
}
.figure-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
.figure-photo:hover img { transform: scale(1.06); }
/* Alt köşede küçük bakır etiket — data-tag varsa görünür */
.figure-photo[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: 0.35rem 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--scrim);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  backdrop-filter: blur(4px);
  z-index: 2;
}
/* İnce üst gradyan → başlıkla kontrast kalmasın */
.figure-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 22%, transparent 62%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Varyantlar — farklı bağlamda oran değişiyor */
.laser__photo    { aspect-ratio: 4 / 3; }
.page-photo      { aspect-ratio: 16 / 10; }
.figure-photo--medikal { aspect-ratio: 4 / 5; }

/* Reduced-motion: hover büyümesi ve zoom kapansın */
@media (prefers-reduced-motion: reduce) {
  .figure-photo img { transform: none; transition: none; }
  .figure-photo:hover img { transform: none; }
}