/* ==========================================================================
   SANAT TAŞ — Kurumsal Web Sitesi
   style.css
   --------------------------------------------------------------------------
   İçindekiler
   01. Tasarım Token'ları (renk, tipografi, boşluk, doku)
   02. Reset & Temel Katman
   03. Tipografi & Yardımcı Sınıflar
   04. Butonlar & Formlar
   05. Taş Doku Bileşenleri (stone-figure)
   06. Animasyon Motoru (reveal / parallax / scene)
   07. Header, Navigasyon & Mobil Menü
   08. Sabit İletişim Butonları (Floating CTA)
   09. Hero & Ana Sayfa Bölümleri
   10. İç Sayfa Bölümleri (Hakkımızda / Ürünler / Projeler / İletişim)
   11. Footer
   12. Responsive
   13. Erişilebilirlik & Yazdırma
   ========================================================================== */

/* ==========================================================================
   01. TASARIM TOKEN'LARI
   ========================================================================== */
:root {
  /* --- Mardin Katori taşı paleti --- */
  --c-cream:        #FBF7F0;   /* açık krem — ana zemin */
  --c-cream-2:      #F4EDE1;   /* kırık krem */
  --c-sand:         #EADCC6;   /* sıcak bej */
  --c-sand-2:       #DEC9A9;   /* koyu bej */
  --c-taba:         #C4A177;   /* taba */
  --c-taba-2:       #A8845B;   /* derin taba */

  /* --- Vurgu: mat bronz / altın --- */
  --c-bronze:       #9C7C4F;
  --c-bronze-lt:    #C3A268;
  --c-gold:         #D9BC84;

  /* --- Koyu taş grileri --- */
  --c-stone:        #6E6659;
  --c-stone-dk:     #3B3833;
  --c-ink:          #2A2723;
  --c-ink-2:        #1E1C19;

  /* --- Metin --- */
  --c-text:         #524B41;
  --c-text-mute:    #857C6E;
  --c-head:         var(--c-stone-dk);
  --c-line:         rgba(59, 56, 51, .14);
  --c-line-soft:    rgba(59, 56, 51, .08);

  /* --- Koyu bölümler için --- */
  --c-on-dark:      #EDE5D7;
  --c-on-dark-mute: #A79C8A;
  --c-line-dark:    rgba(237, 229, 215, .16);

  /* --- Tipografi --- */
  --ff-display: "Cinzel", "Playfair Display", "Times New Roman", serif;
  --ff-body:    "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.65rem, 7.4vw, 6rem);
  --fs-h1:   clamp(2.15rem, 5.2vw, 3.9rem);
  --fs-h2:   clamp(1.85rem, 3.7vw, 3rem);
  --fs-h3:   clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-h4:   clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: clamp(.975rem, .35vw + .9rem, 1.075rem);
  --fs-lead: clamp(1.05rem, .7vw + .95rem, 1.28rem);
  --fs-sm:   .875rem;
  --fs-xs:   .78rem;

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.75;
  --ls-wide:  .22em;
  --ls-head:  .012em;

  /* --- Boşluk --- */
  --gutter:  clamp(1.15rem, 4vw, 3rem);
  --sec-y:   clamp(4.75rem, 9vw, 9rem);
  --maxw:    1320px;
  --maxw-nr: 980px;   /* dar okuma genişliği */

  /* --- Şekil --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Gölge (sıcak tonlu) --- */
  --sh-sm: 0 1px 2px rgba(59, 45, 26, .05), 0 2px 8px rgba(59, 45, 26, .045);
  --sh-md: 0 4px 14px rgba(59, 45, 26, .07), 0 14px 40px rgba(59, 45, 26, .07);
  --sh-lg: 0 10px 30px rgba(59, 45, 26, .09), 0 34px 80px rgba(59, 45, 26, .12);

  /* --- Hareket --- */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.32, .72, 0, 1);
  --e-in-out: cubic-bezier(.65, .05, .36, 1);
  --t-fast: .22s var(--e-out);
  --t-med:  .45s var(--e-out);
  --t-slow: .9s var(--e-out);

  --header-h: 96px;
  --header-h-sm: 68px;

  /* --- Prosedürel taş dokuları (SVG feTurbulence, harici dosya gerektirmez) --- */
  --tx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  --tx-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .019' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)'/%3E%3C/svg%3E");
  --tx-pore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.24' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 .35 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   02. RESET & TEMEL KATMAN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Sayfanın tamamına ince taş grenli bir zemin */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--tx-grain);
  background-size: 300px 300px;
  opacity: .32;
  mix-blend-mode: multiply;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--c-taba); color: #fff; }

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

/* Ana içerik gren katmanının üstünde kalsın */
.site-header, .site-main, .site-footer, .floating-cta, .mobile-menu, .lightbox, .modal {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   03. TİPOGRAFİ & YARDIMCI SINIFLAR
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

.container {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { width: min(var(--maxw-nr), 100%); }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* Koyu bölüm teması */
.section--dark {
  background: var(--c-ink);
  color: var(--c-on-dark-mute);
  --c-head: var(--c-on-dark);
  --c-text: var(--c-on-dark-mute);
  --c-line: var(--c-line-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--c-on-dark); }

.section--sand { background: var(--c-cream-2); }

/* Üst etiket (eyebrow) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-bronze);
}
.eyebrow::before {
  content: "";
  width: clamp(18px, 3vw, 34px);
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.section--dark .eyebrow { color: var(--c-gold); }

/* Bölüm başlığı bloğu */
.sec-head { margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.sec-head__title { margin-top: 1.1rem; }
.sec-head__text {
  margin-top: 1.15rem;
  max-width: 58ch;
  font-size: var(--fs-lead);
  color: var(--c-text-mute);
}
.section--dark .sec-head__text { color: var(--c-on-dark-mute); }

.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.sec-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sec-head--center .sec-head__text { margin-inline: auto; }

.lead { font-size: var(--fs-lead); color: var(--c-text-mute); }
.muted { color: var(--c-text-mute); }
.serif { font-family: var(--ff-display); }

/* Altı çizili bronz vurgu */
.accent {
  color: var(--c-bronze);
  font-style: italic;
  font-family: var(--ff-display);
}
.section--dark .accent { color: var(--c-gold); }

/* İnce ayraç */
.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

/* Ekran okuyucu */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 999;
  padding: .7rem 1.1rem;
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   04. BUTONLAR & FORMLAR
   ========================================================================== */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-cream);
  --btn-bd: var(--c-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.02rem 1.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-med), border-color var(--t-med), background-color var(--t-med), transform var(--t-fast);
}
/* Bronz dolgu, alttan yukarı akar */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--c-bronze), var(--c-taba-2));
  transform: translateY(101%);
  transition: transform .55s var(--e-soft);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover { color: #fff; border-color: var(--c-bronze); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 17px; height: 17px; transition: transform var(--t-med); }
.btn:hover .ico--arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: rgba(59, 56, 51, .3);
}
.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-dark);
  --btn-bd: rgba(237, 229, 215, .35);
}
.btn--solid-light {
  --btn-bg: var(--c-cream);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-cream);
}
.btn--bronze {
  --btn-bg: var(--c-bronze);
  --btn-fg: #fff;
  --btn-bd: var(--c-bronze);
}
.btn--bronze::after { background: linear-gradient(180deg, var(--c-ink), var(--c-stone-dk)); }
.btn--sm { padding: .72rem 1.25rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Metin bağlantısı — alt çizgi soldan sağa çizilir */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-bronze);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--e-soft), color var(--t-fast);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .ico { width: 16px; height: 16px; transition: transform var(--t-med); }
.link-arrow:hover .ico { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--c-gold); }

.btn-group { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --- Form alanları --- */
.field { position: relative; margin-bottom: 1.35rem; }
.field__label {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.field__label .req { color: var(--c-bronze); }

.input, .textarea, .select {
  width: 100%;
  padding: .95rem 1.05rem;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: #B5AC9C; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-bronze);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(156, 124, 79, .12);
}
.textarea { resize: vertical; min-height: 148px; line-height: 1.65; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239C7C4F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: #B4553F; background: rgba(180, 85, 63, .04); }

.field__error {
  display: block;
  margin-top: .42rem;
  font-size: var(--fs-xs);
  color: #B4553F;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.field.has-error .field__error { opacity: 1; transform: none; }

/* Gövde metni içinde geçen bağlantı ve zorunluluk işareti */
.link-inline {
  color: var(--c-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.link-inline:hover { color: var(--c-ink); }
.req-mark { color: var(--c-bronze); font-weight: 600; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  cursor: pointer;
}
.checkbox input { margin-top: .3rem; accent-color: var(--c-bronze); width: 16px; height: 16px; }

/* ==========================================================================
   05. TAŞ DOKU BİLEŞENLERİ
   ==========================================================================
   .stone-figure — görsel dosyası kullanmadan, katmanlı CSS + SVG gürültü ile
   üretilen Mardin katori taşı yüzeyi. --tone-* varyantları ile ton değişir.
   ========================================================================== */
.stone-figure {
  --s-1: #F0E3CD;
  --s-2: #DFCBAA;
  --s-3: #C9AE87;
  --vein: rgba(255, 252, 244, .5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 22% 12%, var(--s-1), transparent 62%),
    radial-gradient(110% 100% at 82% 88%, var(--s-3), transparent 58%),
    linear-gradient(146deg, var(--s-1) 0%, var(--s-2) 46%, var(--s-3) 100%);
}
/* Bulutlanma — taşın damar/lekelenmesi */
.stone-figure::before {
  content: "";
  position: absolute;
  inset: -14%;
  background-image: var(--tx-mottle);
  background-size: cover;
  opacity: .5;
  mix-blend-mode: multiply;
  z-index: 0;
}
/* Gren + gözenek + ince damar çizgileri */
.stone-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(114deg, transparent 0 26px, var(--vein) 26px 27px, transparent 27px 74px),
    repeating-linear-gradient(101deg, transparent 0 58px, rgba(120, 96, 62, .12) 58px 59px, transparent 59px 150px),
    var(--tx-pore),
    var(--tx-grain);
  background-size: auto, auto, 420px 420px, 300px 300px;
  opacity: .55;
  mix-blend-mode: multiply;
}
.stone-figure > * { position: relative; z-index: 1; }

/* Ton varyantları */
.stone-figure.tone-1 { --s-1:#F6EDDC; --s-2:#E8D7BB; --s-3:#D4BB94; }
.stone-figure.tone-2 { --s-1:#EFE0C6; --s-2:#DCC5A0; --s-3:#C0A177; }
.stone-figure.tone-3 { --s-1:#E8D8BC; --s-2:#CFB58D; --s-3:#AE8F66; }
.stone-figure.tone-4 { --s-1:#F2E9D9; --s-2:#DCD0BB; --s-3:#B9AA92; }
.stone-figure.tone-5 { --s-1:#E2D2B4; --s-2:#C2A87F; --s-3:#9C8258; }
.stone-figure.tone-dark {
  --s-1:#6B6355; --s-2:#4C463C; --s-3:#332F29;
  --vein: rgba(226, 210, 180, .16);
}

/* Yüzey işleme varyantları (ürün kartlarında kullanılır) */
.stone-figure.surf-split::after { opacity: .82; filter: contrast(1.25); }
.stone-figure.surf-honed::after { opacity: .32; }
.stone-figure.surf-polished { box-shadow: inset 0 0 90px rgba(255, 255, 255, .35); }
.stone-figure.surf-polished::after { opacity: .24; }
.stone-figure.surf-antique::after { opacity: .7; filter: blur(.4px) contrast(1.1); }

/* Taş üzerine yerleşen mimari motif */
.stone-figure .motif {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46%;
  height: auto;
  color: rgba(59, 56, 51, .17);
  transition: transform 1.1s var(--e-out), color var(--t-med);
}
.stone-figure .motif--bronze { color: rgba(156, 124, 79, .42); }
.stone-figure .motif--light { color: rgba(250, 244, 232, .3); }

/* Taş üzeri koyu perde (metin okunurluğu için) */
.stone-figure .veil {
  position: absolute;
  inset: 0;
  /* Kart başlıklarının hem taş dokusu hem de yüklenen fotoğraf üzerinde
     okunur kalması için kademeli koyu perde */
  background: linear-gradient(to top,
    rgba(26, 24, 21, .86) 0%,
    rgba(26, 24, 21, .58) 34%,
    rgba(26, 24, 21, .22) 58%,
    transparent 82%);
}

/* Derz / taş bloğu ızgarası */
.ashlar {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .22;
  background-image:
    linear-gradient(to right, rgba(90, 74, 50, .55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90, 74, 50, .55) 1px, transparent 1px);
  background-size: 108px 54px;
  mask-image: radial-gradient(120% 110% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 110% at 50% 50%, #000 30%, transparent 78%);
}

/* ==========================================================================
   06. ANİMASYON MOTORU
   ==========================================================================
   Bağımlılık yok: IntersectionObserver (reveal) + rAF (parallax & sahne
   ilerlemesi). JS her sahneye 0→1 arası `--p` değişkeni yazar; geçişler
   CSS tarafında calc()/clamp() ile hesaplanır.
   ========================================================================== */
[data-reveal] {
  --rv-y: 34px;
  --rv-x: 0px;
  --rv-s: 1;
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s));
  transition:
    opacity .95s var(--e-out) var(--rv-delay, 0ms),
    transform 1.05s var(--e-out) var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { --rv-y: 0px; }
[data-reveal="left"]  { --rv-y: 0px; --rv-x: -46px; }
[data-reveal="right"] { --rv-y: 0px; --rv-x: 46px; }
[data-reveal="scale"] { --rv-y: 18px; --rv-s: .94; }
/* "clip" varyantı — yukarıdan aşağı açılan perde.
   ÖNEMLİ: burada clip-path KULLANILMAZ. clip-path uygulanan ögenin
   kesişim alanı sıfırlandığı için IntersectionObserver hiçbir zaman
   tetiklenmez ve öge kalıcı olarak gizli kalır. mask-size ise yalnızca
   boyamayı etkiler, kesişim hesabını bozmaz. */
[data-reveal="clip"] {
  --rv-y: 26px;
  -webkit-mask-image: linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 0%;
          mask-size: 100% 0%;
  transition:
    opacity .95s var(--e-out) var(--rv-delay, 0ms),
    transform 1.05s var(--e-out) var(--rv-delay, 0ms),
    -webkit-mask-size 1.15s var(--e-soft) var(--rv-delay, 0ms),
    mask-size 1.15s var(--e-soft) var(--rv-delay, 0ms);
}
[data-reveal="clip"].is-in {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Sıralı geciktirme: JS çocuklara --i yazar */
[data-stagger] > * { --rv-delay: calc(var(--i, 0) * var(--stagger-step, 90ms)); }

/* Satır satır açılan başlıklar */
.reveal-lines { display: block; }
.reveal-lines .line { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-lines .line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.15s var(--e-soft) calc(var(--i, 0) * 110ms + var(--lines-delay, 0ms));
}
.reveal-lines.is-in .line > span { transform: translateY(0); }

/* Soldan çizilen ince bronz çizgi */
.draw-line {
  height: 1px;
  background: var(--c-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--e-soft) var(--rv-delay, 0ms);
}
.draw-line.is-in { transform: scaleX(1); }

/* Parallax katmanları GPU'da kalsın */
[data-parallax] { will-change: transform; backface-visibility: hidden; }

/* Sayfa üstü kaydırma ilerleme çubuğu */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-taba), var(--c-bronze), var(--c-gold));
  pointer-events: none;
}

/* Sayfa açılış perdesi */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-cream);
  pointer-events: none;
  opacity: 1;
  transition: opacity .7s var(--e-out);
}
body.is-ready .page-veil { opacity: 0; }

/* ==========================================================================
   07. HEADER, NAVİGASYON & MOBİL MENÜ
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  transition: transform .55s var(--e-soft), background-color .5s var(--e-out),
              box-shadow .5s var(--e-out), backdrop-filter .5s var(--e-out);
}
/* Kaydırınca cam zemin + küçülme */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 247, 240, .82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--c-line-soft);
  opacity: 0;
  transition: opacity .5s var(--e-out);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { box-shadow: 0 8px 34px rgba(59, 45, 26, .06); }
/* Aşağı kaydırırken gizlen, yukarı kaydırırken geri gel */
.site-header.is-hidden { transform: translateY(-102%); }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height .5s var(--e-out);
}
.site-header.is-scrolled .header__inner { height: var(--header-h-sm); }

/* --- Logo --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .78rem;
  flex-shrink: 0;
}
.brand__mark {
  width: 34px;
  height: 41px;
  color: var(--c-bronze);
  transition: width .5s var(--e-out), height .5s var(--e-out), transform .6s var(--e-out);
}
.brand:hover .brand__mark { transform: translateY(-2px); }
.site-header.is-scrolled .brand__mark { width: 28px; height: 34px; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--ff-display);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--c-ink);
  transition: font-size .5s var(--e-out);
}
.site-header.is-scrolled .brand__name { font-size: clamp(.96rem, 1.3vw, 1.1rem); }
.brand__tag {
  margin-top: .34rem;
  font-size: .585rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  transition: opacity .4s var(--e-out);
}
.site-header.is-scrolled .brand__tag { opacity: 0; }

/* --- Masaüstü menü --- */
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.35rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-text);
  padding-block: .45rem;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e-soft);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--c-bronze); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .8rem; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  transition: color var(--t-fast);
}
.header__phone:hover { color: var(--c-bronze); }
.header__phone .ico { width: 16px; height: 16px; color: var(--c-bronze); }

/* --- Hamburger --- */
.burger {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.burger:hover { border-color: var(--c-bronze); }
.burger__box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px; height: 12px;
}
.burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform .5s var(--e-soft), opacity .3s var(--e-out), width .4s var(--e-out);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); width: 70%; }
.burger__line:nth-child(3) { bottom: 0; }
.burger:hover .burger__line:nth-child(2) { width: 100%; }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; transform: translateX(-12px); }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* --- Mobil tam ekran menü --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  clip-path: circle(0% at calc(100% - 46px) 48px);
  transition: clip-path .85s var(--e-soft), visibility 0s linear .85s;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open {
  clip-path: circle(150% at calc(100% - 46px) 48px);
  visibility: visible;
  transition: clip-path .85s var(--e-soft), visibility 0s;
}
.mobile-menu__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(110% 70% at 90% 0%, rgba(196, 161, 119, .3), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(234, 220, 198, .8), transparent 62%);
}
.mobile-menu__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tx-mottle);
  background-size: cover;
  opacity: .22;
  mix-blend-mode: multiply;
}
.mobile-menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: calc(var(--header-h-sm) + 2.5rem) var(--gutter) 2.5rem;
}
.mobile-nav { display: flex; flex-direction: column; gap: .15rem; }
.mobile-nav__item { overflow: hidden; }
.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .58rem;
  font-family: var(--ff-display);
  font-size: clamp(1.85rem, 8.4vw, 2.9rem);
  font-weight: 500;
  color: var(--c-ink);
  transform: translateY(105%);
  opacity: 0;
  transition: transform .8s var(--e-soft), opacity .6s var(--e-out), color var(--t-fast);
}
.mobile-menu.is-open .mobile-nav__link {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 70ms + 190ms);
}
.mobile-nav__link .num {
  font-family: var(--ff-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-bronze);
  opacity: .8;
}
.mobile-nav__link.is-active { color: var(--c-bronze); }

.mobile-menu__foot {
  margin-top: clamp(2rem, 6vw, 3.4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--e-out) .55s, transform .7s var(--e-out) .55s;
}
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; }
.mobile-menu__contact { display: grid; gap: .5rem; }
.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.mobile-menu__contact .ico { width: 15px; height: 15px; color: var(--c-bronze); flex-shrink: 0; }

/* ==========================================================================
   08. SABİT İLETİŞİM BUTONLARI (FLOATING CTA)
   ========================================================================== */
.floating-cta {
  position: fixed;
  right: clamp(.85rem, 2vw, 1.7rem);
  bottom: clamp(.85rem, 2vw, 1.7rem);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-end;
}
.fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  width: 56px;
  padding: 0;
  border-radius: var(--r-pill);
  color: #fff;
  box-shadow: 0 6px 18px rgba(28, 26, 22, .2), 0 14px 40px rgba(28, 26, 22, .14);
  overflow: hidden;
  transform: translateY(26px) scale(.6);
  opacity: 0;
  transition: width .5s var(--e-soft), transform .6s var(--e-out),
              opacity .5s var(--e-out), box-shadow var(--t-med), background-color var(--t-med);
}
.floating-cta.is-ready .fab { transform: translateY(0) scale(1); opacity: 1; }
.floating-cta.is-ready .fab:nth-child(1) { transition-delay: .05s; }
.floating-cta.is-ready .fab:nth-child(2) { transition-delay: .14s; }
.floating-cta.is-ready .fab:nth-child(3) { transition-delay: .23s; }

.fab__icon {
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fab__icon .ico { width: 25px; height: 25px; }
.fab__label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s var(--e-out);
}
.fab:hover, .fab:focus-visible {
  width: 176px;
  box-shadow: 0 10px 26px rgba(28, 26, 22, .26), 0 20px 54px rgba(28, 26, 22, .2);
}
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; transition-delay: .12s; }

.fab--wa { background: #25D366; }
.fab--wa:hover { background: #1EBE5A; }
.fab--tel { background: var(--c-ink); }
.fab--tel:hover { background: var(--c-bronze); }

/* WhatsApp nabız halkası */
.fab--wa::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: fabPulse 2.6s var(--e-out) infinite;
  pointer-events: none;
}
@keyframes fabPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}



/* ==========================================================================
   09. HERO & ANA SAYFA BÖLÜMLERİ
   ========================================================================== */

/* ---------- 9.1 Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
  background: linear-gradient(178deg, #FDFAF4 0%, #F3E9D8 46%, #E3D0B2 100%);
}
.hero__layers { position: absolute; inset: -12% -2%; z-index: 0; }
.hero__layer { position: absolute; inset: 0; }

/* Uzak tepe siluetleri */
.hero__ridge {
  position: absolute;
  left: -6%; right: -6%;
  bottom: -2%;
  width: 112%;
  height: auto;
  color: var(--c-sand-2);
}
.hero__ridge--far { bottom: 14%; opacity: .62; color: #D8C3A0; }
.hero__ridge--mid { bottom: 3%; opacity: .85; color: #C8AC82; }
.hero__ridge--near { bottom: -8%; opacity: 1; color: #B39264; }

/* Sıcak ışık huzmesi */
.hero__glow {
  position: absolute;
  top: -18%; right: -8%;
  width: min(72vw, 940px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 222, .95) 0%, rgba(230, 200, 150, .34) 42%, transparent 70%);
  mix-blend-mode: soft-light;
}
/* Havada asılı taş blok */
.hero__block {
  position: absolute;
  right: clamp(-6%, 2vw, 6%);
  top: 46%;
  width: clamp(210px, 30vw, 460px);
  transform: translateY(-50%);
  opacity: .5;
  color: rgba(122, 100, 68, .5);
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: var(--tx-mottle);
  background-size: cover;
  opacity: .3;
  mix-blend-mode: multiply;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(251, 247, 240, .55) 0%, transparent 26%, transparent 62%, rgba(150, 124, 86, .22) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(6.5rem, 10vw, 9rem);
  /* Kaydırdıkça içerik yavaşça yukarı süzülüp silinir */
  transform: translate3d(0, calc(var(--p, 0) * -70px), 0);
  opacity: clamp(0, calc(1 - var(--p, 0) * 1.55), 1);
}
.hero__content { max-width: min(660px, 100%); }
.hero__title {
  margin-top: 1.5rem;
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.005em;
  color: var(--c-ink);
  max-width: 15ch;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-bronze);
}
.hero__text {
  margin-top: 1.65rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: #6B6153;
}
.hero__actions { margin-top: clamp(1.9rem, 3.5vw, 2.75rem); }

/* Hero alt bilgi şeridi */
.hero__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(59, 56, 51, .12);
  background: linear-gradient(to top, rgba(251, 247, 240, .55), transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero__foot-inner {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero__facts { display: flex; gap: clamp(1.4rem, 4vw, 3.6rem); }
.hero__fact { display: flex; flex-direction: column; gap: .18rem; }
.hero__fact b {
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1;
}
.hero__fact span {
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* Kaydırma göstergesi */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  flex-shrink: 0;
}
.scroll-cue__track {
  position: relative;
  width: 1px; height: 42px;
  background: var(--c-line);
  overflow: hidden;
}
.scroll-cue__track::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 42%;
  background: var(--c-bronze);
  animation: cueRun 2.1s var(--e-in-out) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(-110%); }
  55%  { transform: translateY(120%); }
  100% { transform: translateY(120%); }
}

/* ---------- 9.2 Kayan şerit (marquee) ---------- */
.marquee {
  position: relative;
  padding-block: clamp(1.2rem, 2.4vw, 1.9rem);
  background: var(--c-ink);
  color: var(--c-on-dark);
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, .2);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.2rem);
  padding-right: clamp(1.5rem, 3.4vw, 3.2rem);
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.2rem);
  font-family: var(--ff-display);
  font-size: clamp(.95rem, 1.5vw, 1.28rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-on-dark);
}
.marquee__item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9.3 Giriş / öne çıkanlar ---------- */
.intro { position: relative; overflow: hidden; }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.intro__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.intro__media .stone-figure { position: absolute; inset: 0; border-radius: inherit; }
/* Üst üste binen ikinci taş plaka
   (.intro__media .stone-figure kuralını yenmesi için aynı özgüllükte yazıldı) */
.intro__media .intro__media-sub {
  position: absolute;
  inset: auto -13% -9% auto;
  width: 52%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  border: 6px solid var(--c-cream);
  overflow: hidden;
}
.intro__badge {
  position: absolute;
  left: -8%;
  top: 8%;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: .1rem;
  width: clamp(96px, 12vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-cream);
  text-align: center;
  box-shadow: var(--sh-md);
}
.intro__badge b {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--c-gold);
}
.intro__badge span {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: .82;
}

.feature-list { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: grid; gap: 1.5rem; }
.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-line);
}
.feature:last-child { border-bottom: 0; padding-bottom: 0; }
.feature__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-bronze);
  background: rgba(255, 255, 255, .5);
  transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med);
}
.feature__ico .ico { width: 22px; height: 22px; }
.feature:hover .feature__ico { background: var(--c-bronze); color: #fff; border-color: var(--c-bronze); }
.feature__title { margin-bottom: .3rem; }
.feature__text { font-size: var(--fs-sm); color: var(--c-text-mute); }

/* ---------- 9.4 Dönüşüm hikâyesi (sticky scroll storytelling) ---------- */
.transform {
  position: relative;
  background: var(--c-ink);
  color: var(--c-on-dark-mute);
  --c-head: var(--c-on-dark);
  overflow: clip;
}
.transform::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tx-mottle);
  background-size: cover;
  opacity: .16;
  pointer-events: none;
}
.transform__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* Sol: sabitlenen görsel sahne
   z-index: metin blokları transform taşıdığı için konumlandırılmış katmanda
   boyanır; sabit görselin onların üstünde kalması gerekir. */
.tf-visual {
  position: sticky;
  top: calc(var(--header-h-sm) + clamp(1.5rem, 4vw, 3.2rem));
  z-index: 3;
  display: grid;
  gap: 1.4rem;
}
.tf-copy { position: relative; z-index: 1; }
.tf-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
  background: #2A2723;
}
.tf-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tf-layer .motif { position: static; width: 62%; }

/* Katman 1 — ham taş (her zaman altta) */
.tf-layer--raw { z-index: 1; }
/* Katman 2 — kesim: yukarıdan aşağı perde açılır */
.tf-layer--cut {
  z-index: 2;
  clip-path: inset(0 0 calc(100% - 100% * clamp(0, (var(--p, 0) - .16) * 3.4, 1)) 0);
}
/* Katman 3 — mimari uygulama */
.tf-layer--built {
  z-index: 3;
  clip-path: inset(0 0 calc(100% - 100% * clamp(0, (var(--p, 0) - .56) * 3.4, 1)) 0);
}
/* Perde kenarında ilerleyen bronz tarama çizgisi */
.tf-scan {
  position: absolute;
  left: 0; right: 0;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  box-shadow: 0 0 22px rgba(217, 188, 132, .85);
  top: calc(100% * clamp(0, (var(--p, 0) - .16) * 3.4, 1));
  opacity: clamp(0, calc((var(--p, 0) - .13) * 9), 1);
  pointer-events: none;
}
.tf-scan--2 {
  top: calc(100% * clamp(0, (var(--p, 0) - .56) * 3.4, 1));
  opacity: clamp(0, calc((var(--p, 0) - .53) * 9), 1);
}
.tf-stage__label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.15rem;
  z-index: 5;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: .42rem .8rem;
  background: rgba(20, 18, 16, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(217, 188, 132, .28);
  border-radius: var(--r-pill);
}

/* Aşama göstergesi */
.tf-steps { display: flex; gap: .5rem; }
.tf-step {
  flex: 1;
  display: grid;
  gap: .55rem;
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(167, 156, 138, .6);
  transition: color .5s var(--e-out);
}
.tf-step__bar {
  height: 2px;
  background: rgba(237, 229, 215, .16);
  overflow: hidden;
}
.tf-step__bar i {
  display: block;
  height: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--e-out);
}
.tf-step.is-active { color: var(--c-gold); }
.tf-step.is-active .tf-step__bar i,
.tf-step.is-done .tf-step__bar i { transform: scaleX(1); }
.tf-step.is-done { color: rgba(237, 229, 215, .75); }
.tf-step.is-done .tf-step__bar i { background: rgba(237, 229, 215, .4); }

/* Sağ: kaydıkça geçen bölümler */
.tf-copy { display: grid; gap: clamp(3.5rem, 11vh, 8rem); padding-block: clamp(2rem, 12vh, 8rem); }
.tf-chapter { max-width: 46ch; }
.tf-chapter__num {
  font-family: var(--ff-display);
  font-size: .82rem;
  letter-spacing: .28em;
  color: var(--c-gold);
  display: block;
  margin-bottom: 1rem;
}
.tf-chapter__title { margin-bottom: 1rem; }
.tf-chapter__text { color: var(--c-on-dark-mute); }
.tf-chapter__meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: .38rem .82rem;
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-text-mute);
}
.section--dark .tag, .transform .tag { border-color: var(--c-line-dark); color: var(--c-on-dark-mute); }

/* ---------- 9.5 İstatistikler ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.stat {
  padding: clamp(1.6rem, 3.2vw, 2.9rem) clamp(1rem, 2vw, 1.8rem);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--t-med);
}
.stat:hover { background: rgba(255, 255, 255, .5); }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink);
}
.stat__num .suffix { font-size: .5em; color: var(--c-bronze); }
.stat__label {
  margin-top: .75rem;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.section--dark .stat__num { color: var(--c-on-dark); }

/* ---------- 9.6 Proje galerisi ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.85rem, 1.7vw, 1.5rem);
}
.gcard {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-sand);
  isolation: isolate;
  /* <button> olarak da kullanılabilsin */
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gcard__inner { position: absolute; inset: 0; overflow: hidden; }
.gcard .stone-figure {
  position: absolute;
  inset: -6%;
  transition: transform 1.3s var(--e-out), filter .6s var(--e-out);
  transform: scale(1.02);
}
.gcard:hover .stone-figure { transform: scale(1.09); }
.gcard__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.15rem, 2.2vw, 1.9rem);
  color: var(--c-cream);
}
.gcard__cat {
  /* <button> içinde geçerli olması için <span> kullanıldı; blok davranışı şart */
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: .5rem;
}
.gcard__title {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: var(--lh-head);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--c-cream);
  margin-bottom: .3rem;
}
.gcard__meta {
  font-size: var(--fs-sm);
  color: rgba(237, 229, 215, .72);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gcard__more {
  margin-top: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.gcard:hover .gcard__more { opacity: 1; transform: none; }
.gcard__more .ico { width: 15px; height: 15px; }

/* Ana sayfa galeri yerleşimi */
.gallery .gcard--a { grid-column: span 7; aspect-ratio: 4 / 3; }
.gallery .gcard--b { grid-column: span 5; aspect-ratio: 1 / 1; }
.gallery .gcard--c { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery .gcard--d { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery .gcard--e { grid-column: span 4; aspect-ratio: 3 / 4; }

/* ---------- 9.7 Süreç / zanaat adımları ---------- */
.process { position: relative; }
.process__list {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-left: clamp(2.4rem, 5vw, 4.2rem);
}
/* Dikey hat + kaydırmaya bağlı dolan bronz çizgi */
.process__list::before {
  content: "";
  position: absolute;
  left: clamp(.85rem, 1.8vw, 1.5rem);
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: var(--c-line);
}
.process__list::after {
  content: "";
  position: absolute;
  left: clamp(.85rem, 1.8vw, 1.5rem);
  top: .5rem;
  width: 1px;
  height: calc(clamp(0, (var(--p, 0) - .05) * 1.35, 1) * (100% - 1rem));
  background: linear-gradient(to bottom, var(--c-taba), var(--c-bronze));
}
.pstep {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--c-line);
}
.pstep:last-child { border-bottom: 0; }
.pstep::before {
  content: "";
  position: absolute;
  left: calc(clamp(2.4rem, 5vw, 4.2rem) * -1 + clamp(.85rem, 1.8vw, 1.5rem) - 4px);
  top: calc(clamp(1.1rem, 2vw, 1.6rem) + .55em);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1px solid var(--c-taba);
  transition: background-color .5s var(--e-out), transform .5s var(--e-out);
}
.pstep.is-in::before { background: var(--c-bronze); transform: scale(1.25); }
.pstep__num {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--c-taba);
  opacity: .55;
}
.pstep__title { margin-bottom: .5rem; }
.pstep__text { font-size: var(--fs-sm); color: var(--c-text-mute); max-width: 56ch; }

/* ---------- 9.8 Müşteri yorumları ---------- */
.testi { position: relative; overflow: hidden; }
.testi__viewport { overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.testi__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  transition: transform .85s var(--e-soft);
  will-change: transform;
}
.tcard {
  flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem) * 2) / 3);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
}
.tcard:hover { border-color: var(--c-taba); transform: translateY(-4px); box-shadow: var(--sh-md); }
.section--dark .tcard { background: rgba(255, 255, 255, .04); }
.tcard__quote { width: 30px; height: 30px; color: var(--c-taba); opacity: .55; flex-shrink: 0; }
/* Cinzel yalnızca büyük harf tasarımına sahip olduğundan uzun alıntı
   metinlerinde okunurluğu düşürür; gövde fontunun ince kesimi kullanılır. */
.tcard__text {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
  color: var(--c-head);
  flex: 1;
}
.tcard__foot {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--c-line);
}
.tcard__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--ff-display);
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(145deg, var(--c-taba), var(--c-bronze));
  flex-shrink: 0;
}
.tcard__name { font-weight: 600; font-size: var(--fs-sm); color: var(--c-head); line-height: 1.4; }
.tcard__role { font-size: var(--fs-xs); color: var(--c-text-mute); }

.slider-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.slider-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.slider-btn .ico { width: 17px; height: 17px; }
.slider-btn:hover:not(:disabled) { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.slider-btn:disabled { opacity: .32; cursor: not-allowed; }
.section--dark .slider-btn { color: var(--c-on-dark); }
.section--dark .slider-btn:hover:not(:disabled) { background: var(--c-cream); color: var(--c-ink); }

.slider-dots { display: flex; gap: .45rem; margin-left: auto; }
.slider-dot {
  width: 26px; height: 2px;
  background: var(--c-line);
  transition: background-color var(--t-fast);
}
.slider-dot.is-active { background: var(--c-bronze); }

/* ---------- 9.9 CTA bandı ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--c-stone-dk);
  color: var(--c-on-dark);
  isolation: isolate;
}
.cta-band__bg {
  position: absolute;
  inset: -16% 0;
  z-index: -1;
}
.cta-band__bg .stone-figure { position: absolute; inset: 0; }
.cta-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(30, 28, 25, .93) 0%, rgba(30, 28, 25, .72) 55%, rgba(30, 28, 25, .5) 100%);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3.2rem, 7vw, 6rem);
}
.cta-band__title { color: var(--c-cream); max-width: 20ch; }
.cta-band__text { margin-top: 1.05rem; max-width: 52ch; color: rgba(237, 229, 215, .74); }

/* ==========================================================================
   10. İÇ SAYFA BÖLÜMLERİ
   ========================================================================== */

/* ---------- 10.1 Sayfa başlığı (page hero) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  background: linear-gradient(172deg, #FBF7F0 0%, #F1E6D3 62%, #E7D8BE 100%);
}
.page-hero__bg { position: absolute; inset: -14% -4%; z-index: 0; }
.page-hero__bg .ashlar { opacity: .16; }
.page-hero__motif {
  position: absolute;
  right: -4%;
  bottom: -22%;
  width: clamp(230px, 34vw, 520px);
  color: rgba(156, 124, 79, .13);
  z-index: 0;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { margin-top: 1.1rem; max-width: 18ch; }
.page-hero__text { margin-top: 1.3rem; max-width: 56ch; font-size: var(--fs-lead); color: var(--c-text-mute); }

/* Kırıntı menü */
.crumbs {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: 1.6rem;
}
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--c-bronze); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--c-bronze); }

/* ---------- 10.2 Hakkımızda ---------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.story__media .stone-figure { position: absolute; inset: -8%; }
.story__body p + p { margin-top: 1.15rem; }
.signature {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.signature__mark {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--c-bronze);
}
.signature__meta { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mute); }

/* Zaman çizelgesi */
.timeline { position: relative; display: grid; gap: 0; }
.tl-item {
  display: grid;
  grid-template-columns: minmax(0, .2fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid var(--c-line);
  transition: background-color var(--t-med);
}
.tl-item:last-child { border-bottom: 1px solid var(--c-line); }
.tl-item:hover { background: rgba(255, 255, 255, .45); }
.tl-year {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1;
  color: var(--c-bronze);
}
.tl-title { margin-bottom: .45rem; }
.tl-text { font-size: var(--fs-sm); color: var(--c-text-mute); max-width: 60ch; }

/* Değerler */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.value {
  position: relative;
  padding: clamp(1.6rem, 2.8vw, 2.3rem);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.value::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--c-taba), var(--c-bronze));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e-soft);
}
.value:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--c-sand-2); }
.value:hover::after { transform: scaleX(1); }
/* Bu SVG'ler .ico sınıfını taşımadığı için çizgi stilini burada tanımlıyoruz */
.value__ico {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--c-bronze);
  margin-bottom: 1.15rem;
}
.section--dark .value__ico { color: var(--c-gold); }
.value__title { margin-bottom: .5rem; }
.value__text { font-size: var(--fs-sm); color: var(--c-text-mute); }
.section--dark .value { background: rgba(255, 255, 255, .04); }

/* ---------- 10.3 Ürünler / filtreler ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-line);
}
.filter {
  position: relative;
  padding: .62rem 1.15rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-text-mute);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
  white-space: nowrap;
}
.filter:hover { color: var(--c-ink); border-color: var(--c-taba); }
.filter.is-active {
  color: #fff;
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.filter__count { font-size: .72em; opacity: .6; margin-left: .35rem; }

.filters__meta {
  margin-left: auto;
  align-self: center;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* Filtrelenebilir ızgara */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.filter-item.is-hidden { display: none; }
/* Yalnızca filtreyle çıkarken geçiş uygula; aksi hâlde [data-reveal]
   geçişini ezip açılış animasyonunu bozardı. */
.filter-item.is-fading {
  opacity: 0;
  transform: scale(.96) translateY(10px);
  transition: opacity .28s var(--e-out), transform .28s var(--e-out);
}

/* Ürün kartı */
.pcard {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--c-sand-2); }
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pcard__media .stone-figure {
  position: absolute;
  inset: 0;
  transition: transform 1.2s var(--e-out);
}
.pcard:hover .pcard__media .stone-figure { transform: scale(1.07); }
.pcard__badge {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  padding: .34rem .75rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: rgba(251, 247, 240, .88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--r-pill);
}
.pcard__zoom {
  position: absolute;
  right: .9rem; bottom: .9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(251, 247, 240, .9);
  color: var(--c-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med), transform var(--t-med), background-color var(--t-fast);
}
.pcard__zoom .ico { width: 16px; height: 16px; }
.pcard:hover .pcard__zoom { opacity: 1; transform: none; }
.pcard__zoom:hover { background: var(--c-bronze); color: #fff; }

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .85rem;
  padding: clamp(1.15rem, 2vw, 1.6rem);
}
.pcard__title { font-size: 1.16rem; }
.pcard__text { font-size: var(--fs-sm); color: var(--c-text-mute); flex: 1; }
.pcard__specs {
  display: grid;
  gap: .42rem;
  padding-top: .9rem;
  border-top: 1px solid var(--c-line);
}
.spec {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-xs);
}
.spec dt { color: var(--c-text-mute); letter-spacing: .06em; }
.spec dd { color: var(--c-head); font-weight: 500; text-align: right; }

/* Ürün detay modalı */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--e-out), visibility 0s linear .45s;
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--e-out), visibility 0s; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 22, 19, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.modal__dialog {
  position: relative;
  width: min(940px, 100%);
  max-height: min(86vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  background: var(--c-cream);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: translateY(26px) scale(.97);
  transition: transform .55s var(--e-soft);
}
.modal.is-open .modal__dialog { transform: none; }
.modal__media { position: relative; min-height: 260px; }
.modal__media .stone-figure { position: absolute; inset: 0; }
.modal__body { padding: clamp(1.6rem, 3vw, 2.6rem); overflow-y: auto; }
.modal__eyebrow { margin-bottom: .9rem; }
.modal__title { margin-bottom: .9rem; }
.modal__text { font-size: var(--fs-sm); color: var(--c-text-mute); }
.modal__specs { margin-top: 1.5rem; display: grid; gap: .6rem; }
.modal__specs .spec { padding-bottom: .6rem; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.modal__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.modal__close {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(251, 247, 240, .9);
  color: var(--c-ink);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.modal__close:hover { background: var(--c-ink); color: var(--c-cream); transform: rotate(90deg); }
.modal__close .ico { width: 17px; height: 17px; }

/* Yüzey işleme şeridi */
.surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}
.surface {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
}
.surface .stone-figure { position: absolute; inset: 0; transition: transform 1.1s var(--e-out); }
.surface:hover .stone-figure { transform: scale(1.06); }
.surface__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(30, 28, 25, .8), transparent);
  color: var(--c-cream);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- 10.4 Portfolyo ızgarası & lightbox ---------- */
/* Portfolyo ızgarası — tüm kartlar eşit oranda; kart genişliği, boşluk ve
   en–boy oranı admin panelinden (--pf-* değişkenleriyle) ayarlanabilir. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pf-min, 340px)), 1fr));
  gap: var(--pf-gap, clamp(1rem, 2vw, 1.6rem));
  align-items: start;
}
.pf-grid .gcard { aspect-ratio: var(--pf-ratio, 4 / 3); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(20, 18, 16, .95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--e-out), visibility 0s linear .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--e-out), visibility 0s; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  color: rgba(237, 229, 215, .75);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(237, 229, 215, .12);
}
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter);
  overflow: hidden;
}
.lightbox__figure {
  position: relative;
  width: min(1000px, 100%);
  aspect-ratio: 16 / 10;
  max-height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  transform: scale(.96);
  opacity: 0;
  transition: transform .6s var(--e-soft), opacity .5s var(--e-out);
}
.lightbox.is-open .lightbox__figure { transform: none; opacity: 1; }
.lightbox__figure .stone-figure { position: absolute; inset: 0; }
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem var(--gutter) 1.6rem;
  border-top: 1px solid rgba(237, 229, 215, .12);
  color: rgba(237, 229, 215, .72);
}
.lightbox__title { color: var(--c-cream); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.lightbox__meta { font-size: var(--fs-sm); margin-top: .2rem; }
.lightbox__nav { display: flex; gap: .6rem; flex-shrink: 0; }
.lightbox .slider-btn { border-color: rgba(237, 229, 215, .25); color: var(--c-cream); }
.lightbox .slider-btn:hover { background: var(--c-cream); color: var(--c-ink); }

/* ---------- 10.5 İletişim ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.info-list { display: grid; gap: 1.5rem; }
.info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-line);
}
.info:last-child { border-bottom: 0; padding-bottom: 0; }
.info__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-bronze);
  flex-shrink: 0;
  transition: background-color var(--t-med), color var(--t-med);
}
.info__ico .ico { width: 19px; height: 19px; }
.info:hover .info__ico { background: var(--c-bronze); color: #fff; }
.info__label {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin-bottom: .3rem;
}
.info__value { font-size: 1.02rem; color: var(--c-head); font-weight: 500; }
.info__value a { transition: color var(--t-fast); }
.info__value a:hover { color: var(--c-bronze); }
.info__note { font-size: var(--fs-sm); color: var(--c-text-mute); margin-top: .2rem; }

.form-card {
  padding: clamp(1.6rem, 3.4vw, 3rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.form-grid .field--full { grid-column: 1 / -1; }

.form-status {
  display: none;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form-status.is-visible { display: flex; }
.form-status--ok {
  background: rgba(93, 134, 96, .1);
  border: 1px solid rgba(93, 134, 96, .3);
  color: #3F6142;
}
.form-status--err {
  background: rgba(180, 85, 63, .08);
  border: 1px solid rgba(180, 85, 63, .3);
  color: #9A4634;
}
.form-status .ico { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }

/* Harita */
.map {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-md);
  background: var(--c-sand);
  aspect-ratio: 16 / 7;
  min-height: 320px;
}
.map iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.35) sepia(.18) saturate(.9) contrast(1.02);
  transition: filter .6s var(--e-out);
}
.map:hover iframe { filter: none; }
.map__card {
  position: absolute;
  left: clamp(1rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.8rem);
  z-index: 2;
  max-width: min(340px, calc(100% - 2rem));
  padding: 1.25rem 1.4rem;
  background: rgba(251, 247, 240, .95);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.map__title { font-size: 1.05rem; margin-bottom: .35rem; }
.map__addr { font-size: var(--fs-sm); color: var(--c-text-mute); margin-bottom: .9rem; }

/* SSS akordeon */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.05rem, 2vw, 1.5rem) 0;
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  color: var(--c-head);
  transition: color var(--t-fast);
}
.faq__btn:hover { color: var(--c-bronze); }
.faq__sign {
  position: relative;
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--c-bronze);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform .45s var(--e-soft), opacity .3s var(--e-out);
}
.faq__sign::before { width: 100%; height: 1.5px; }
.faq__sign::after { width: 1.5px; height: 100%; }
.faq__btn[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--e-soft);
}
.faq__btn[aria-expanded="true"] + .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding-bottom: clamp(1.05rem, 2vw, 1.5rem);
  max-width: 70ch;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--c-ink-2);
  color: var(--c-on-dark-mute);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tx-mottle);
  background-size: cover;
  opacity: .12;
  pointer-events: none;
}
.footer__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.2rem, 6vw, 5.25rem);
}
.footer__brand .brand__name { color: var(--c-cream); }
.footer__brand .brand__tag { color: var(--c-on-dark-mute); }
.footer__brand .brand__mark { color: var(--c-gold); }
.footer__about {
  margin-top: 1.4rem;
  max-width: 40ch;
  font-size: var(--fs-sm);
  color: var(--c-on-dark-mute);
}
.footer__col-title {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.3rem;
}
.footer__links { display: grid; gap: .68rem; }
.footer__links a {
  font-size: var(--fs-sm);
  color: var(--c-on-dark-mute);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer__links a:hover { color: var(--c-cream); padding-left: 6px; }
.footer__contact { display: grid; gap: .9rem; }
.footer__contact li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; font-size: var(--fs-sm); }
.footer__contact .ico { width: 15px; height: 15px; color: var(--c-gold); margin-top: .35rem; }
.footer__contact a:hover { color: var(--c-cream); }

.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-line-dark);
  font-size: var(--fs-xs);
  color: rgba(167, 156, 138, .8);
}
.footer__bottom a:hover { color: var(--c-cream); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { gap: 1.15rem; }
  .header__phone { display: none; }
}

@media (max-width: 1024px) {
  :root { --header-h: 78px; --header-h-sm: 62px; }

  .nav, .header__actions .btn { display: none; }
  .burger { display: block; }

  .intro__grid,
  .story__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .intro__media, .story__media { max-width: 520px; margin-inline: auto; width: 100%; }
  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; }

  /* Dönüşüm sahnesi: görsel üstte sabit, metinler altında akar */
  .transform__inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .tf-visual {
    top: var(--header-h-sm);
    padding-block: 14px 10px;
    background: var(--c-ink);
    gap: .9rem;
  }
  /* Sabit görselin altında yumuşak geçiş bandı */
  .tf-visual::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 26px;
    background: linear-gradient(to bottom, var(--c-ink), rgba(42, 39, 35, 0));
    pointer-events: none;
  }
  .tf-stage { aspect-ratio: 16 / 10; }
  .tf-copy { gap: clamp(3rem, 9vh, 5rem); padding-block: clamp(2rem, 6vh, 4rem); }
  .tf-chapter { max-width: none; }

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

  .gallery .gcard--a,
  .gallery .gcard--b { grid-column: span 12; aspect-ratio: 4 / 3; }
  .gallery .gcard--c,
  .gallery .gcard--d,
  .gallery .gcard--e { grid-column: span 6; aspect-ratio: 1 / 1; }

  .tcard { flex: 0 0 calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2); }

  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }

  .modal__dialog { grid-template-columns: minmax(0, 1fr); max-height: 88vh; }
  .modal__media { aspect-ratio: 16 / 9; min-height: 0; }

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

@media (max-width: 768px) {
  /* Hero mobilde dikey akışa geçer: içerik ortada, bilgi şeridi altta —
     böylece butonlar ile şerit hiçbir ekran boyunda üst üste binmez. */
  .hero {
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-top: calc(var(--header-h) + 1.25rem);
  }
  .hero__inner {
    flex: 1;
    display: flex;
    align-items: center;
    padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
  .hero__foot { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero__foot-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__content { max-width: none; }
  .hero__title { max-width: none; }
  .scroll-cue { display: none; }
  .hero__block { display: none; }

  .gallery .gcard--c,
  .gallery .gcard--d,
  .gallery .gcard--e { grid-column: span 12; aspect-ratio: 4 / 3; }

  .tcard { flex: 0 0 100%; }

  .pstep { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .process__list { padding-left: clamp(1.75rem, 6vw, 2.6rem); }
  .pstep::before { left: calc(clamp(1.75rem, 6vw, 2.6rem) * -1 + clamp(.85rem, 1.8vw, 1.5rem) - 4px); }

  .tl-item { grid-template-columns: minmax(0, 1fr); gap: .5rem; }

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

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

  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }

  .lightbox__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .footer__bottom { justify-content: flex-start; padding-bottom: 6.5rem; }
}

@media (max-width: 640px) {
  /* Rozet ve ikinci plaka dar ekranda taşmasın */
  .intro__badge { left: auto; right: -3%; top: -4%; }
  .intro__media .intro__media-sub { inset: auto -4% -5% auto; width: 44%; border-width: 5px; }
  .story__media { max-width: 460px; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .hero__facts { flex-wrap: wrap; gap: 1.1rem 1.75rem; }
  .btn { padding: .92rem 1.4rem; }
  .btn-group .btn { flex: 1 1 100%; }
  .filters { gap: .4rem; }
  .filter { padding: .52rem .9rem; font-size: var(--fs-xs); }
  .fab { height: 52px; width: 52px; }
  .fab__icon { width: 52px; height: 52px; }
  .fab--wa::after { width: 52px; height: 52px; }
  .fab:hover, .fab:focus-visible { width: 52px; }
  .fab__label { display: none; }
  .grid-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Dokunmatik cihazlarda hover'a bağlı gizli içerikleri açık göster */
@media (hover: none) {
  .gcard__more { opacity: 1; transform: none; }
  .pcard__zoom { opacity: 1; transform: none; }
}

/* ==========================================================================
   13. ERİŞİLEBİLİRLİK & YAZDIRMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .reveal-lines .line > span { transform: none !important; }
  [data-parallax] { transform: none !important; }
  .hero__inner { transform: none !important; opacity: 1 !important; }
  .marquee__track { animation: none; }
  .tf-layer--cut, .tf-layer--built { clip-path: none; }
  .tf-layer--cut { opacity: 0; }
  .tf-scan { display: none; }
}

@media print {
  .site-header, .floating-cta, .mobile-menu, .scroll-progress,
  .marquee, .map, .page-veil { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .section { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ==========================================================================
   14. SVG İKON & MOTİF TEMEL STİLİ
   (semboller script.js içindeki sprite ile sayfaya enjekte edilir)
   ========================================================================== */
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ico--fill { fill: currentColor; stroke: none; }
.motif { fill: none; stroke: currentColor; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   15. EKİP, HUKUKİ SAYFALAR VE İÇERİK YÖNETİMİ (CMS) DESTEĞİ
   ========================================================================== */

/* ---------- 15.1 Ekip kartları ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.3rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.member::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--c-taba), var(--c-bronze));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e-soft);
}
.member:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--c-sand-2); }
.member:hover::after { transform: scaleX(1); }

.member--lead {
  background: var(--c-ink);
  border-color: var(--c-ink);
  --c-head: var(--c-on-dark);
}
.member--lead .member__name { color: var(--c-on-dark); }
.member--lead .member__role { color: var(--c-gold); }
.member--lead .member__text { color: var(--c-on-dark-mute); }
.member--lead .member__ico { border-color: var(--c-line-dark); color: var(--c-gold); background: rgba(255, 255, 255, .04); }

.member__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-bronze);
  background: rgba(255, 255, 255, .5);
}
.member__ico .ico { width: 21px; height: 21px; }
.member__name { font-size: 1.14rem; margin-bottom: .25rem; }
.member__role {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-bronze);
  margin-bottom: .9rem;
}
.member__text { font-size: var(--fs-sm); color: var(--c-text-mute); }

/* ---------- 15.2 Hukuki metin sayfaları ---------- */
.legal { display: grid; grid-template-columns: minmax(0, .27fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.legal__toc {
  position: sticky;
  top: calc(var(--header-h-sm) + 1.5rem);
  display: grid;
  gap: .1rem;
  padding: 1.35rem 1.25rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.legal__toc-title {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-bronze);
  margin-bottom: .85rem;
}
.legal__toc a {
  display: block;
  padding: .42rem 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  border-bottom: 1px solid var(--c-line-soft);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.legal__toc a:last-child { border-bottom: 0; }
.legal__toc a:hover { color: var(--c-bronze); padding-left: 5px; }

.legal__body { max-width: 78ch; }
.legal__body > section { scroll-margin-top: calc(var(--header-h-sm) + 24px); }
.legal__body > section + section { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.legal__body h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--c-line);
}
.legal__body h3 { font-size: 1.08rem; margin: 1.6rem 0 .6rem; }
.legal__body p { margin-bottom: 1rem; color: var(--c-text); }
.legal__body ul, .legal__body ol { margin: 0 0 1.15rem 0; display: grid; gap: .5rem; }
.legal__body li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .98rem;
  color: var(--c-text-mute);
}
.legal__body li::before {
  content: "";
  position: absolute;
  left: .25rem; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-taba);
}
.legal__body ol { counter-reset: legal; }
.legal__body ol > li { counter-increment: legal; }
.legal__body ol > li::before {
  content: counter(legal) ".";
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  top: 0;
  left: 0;
  color: var(--c-bronze);
  font-size: .85em;
  font-weight: 600;
}
.legal__body a { color: var(--c-bronze); text-decoration: underline; text-underline-offset: 3px; }
.legal__body strong { color: var(--c-head); font-weight: 600; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.35rem;
  font-size: var(--fs-sm);
}
.legal-table th, .legal-table td {
  padding: .8rem .9rem;
  text-align: left;
  border: 1px solid var(--c-line);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-bronze);
  background: rgba(255, 255, 255, .45);
}
.legal-table td { color: var(--c-text-mute); }
.legal-table__wrap { overflow-x: auto; }

.legal__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.4rem;
  border-left: 2px solid var(--c-bronze);
  background: rgba(255, 255, 255, .5);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2rem;
  padding: .5rem .9rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}

/* ---------- 15.3 CMS ile eklenen görseller ----------
   Admin panelinden bir görsel atandığında ilgili kabın içine <img> eklenir;
   altındaki prosedürel taş yüzeyi görünmez olur. */
/* Görsel, taş yüzeyinin ARKASINA (ilk çocuk olarak) eklenir; taş yüzeyi
   .is-photo ile şeffaflaşır ama üzerindeki okunabilirlik perdesi (.veil)
   korunur. Böylece fotoğraflı kartlarda başlıklar okunur kalır. */
.cms-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gcard .cms-img,
.pcard__media .cms-img,
.surface .cms-img { transition: transform 1.2s var(--e-out); }
.gcard:hover .cms-img,
.pcard:hover .cms-img,
.surface:hover .cms-img { transform: scale(1.07); }

.stone-figure.is-photo { background: none; box-shadow: none; }
.stone-figure.is-photo::before,
.stone-figure.is-photo::after { display: none; }
.stone-figure.is-photo .motif,
.stone-figure.is-photo .ashlar { display: none; }

/* ---------- 15.4 Responsive ---------- */
@media (max-width: 1024px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
}
@media (max-width: 640px) {
  .team { grid-template-columns: minmax(0, 1fr); }
}