/* AFİFE AYVACI — üretilmiş dosya. Kaynak: src/css/*.css */

/* ===== 00-grain.css ===== */
/* ============================================================
   00 — KAGIT DOKUSU (grain)
   tools/make-grain.py tarafindan uretildi. Elle duzenlenmez.
   128x128 deterministik gurultu -> site/assets/grain.png
   Calisma zamaninda feTurbulence YASAK; doku bir kez burada uretilir.
   ============================================================ */
:root {
  --grain-url: url("grain.png");
}


/* ===== 01-tokens.css ===== */
/* ============================================================
   01 — TOKENLAR
   Renk bir dekor değil, bir işaretleme sistemidir. Yeni renk eklenmez.
   ============================================================ */

:root {
  /* --- Yüzeyler --- */
  --kagit:            #F5F1E8;
  --muslin:           #EAE4D6;
  --tebesir:          #FCFAF6;
  --ecru-doku:        #DDD4C0;

  /* --- Mürekkep --- */
  --murekkep:         #17150F;
  --murekkep-60:      #46433A;   /* 8.8:1  */
  --grafit:           #6E6959;   /* 4.94:1 — AA sınırı; #75705F KULLANMA */

  /* --- Çizgiler --- */
  --dikis:            #CEC5B2;
  --kilavuz:          #E4DED0;

  /* --- Aksanlar (kapalı kullanım listesi) --- */
  --isaret-kirmizi:   #A63D28;   /* 5.61:1 */
  --kalip-mavi:       #2C4661;   /* 8.66:1 */

  /* --- Ritim kırıcı koyu bölüm --- */
  --kontrast-zemin:   #0F0E0A;
  --kontrast-metin:   #F5F1E8;   /* 16.9:1 */
  --kontrast-ikincil: #B9B3A3;   /* 8.9:1  */

  /* --- Semantik alias (bileşenler ham token kullanmaz) --- */
  --govde-zemin:      var(--kagit);
  --yuzey:            var(--tebesir);
  --metin:            var(--murekkep);
  --metin-ikincil:    var(--murekkep-60);
  --cizgi:            var(--dikis);

  /* --- Gölge: tek token, sadece swatch + mobil CTA --- */
  --golge: 4px 10px 18px rgba(20, 18, 15, .14);
  --grain-blend: multiply;
  --grain-opak: .04;

  /* --- Boşluk skalası (8px baseline) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --bolum-p: clamp(72px, 10vw, 160px);
  --marj:    clamp(20px, 5vw, 72px);
  --gutter:  24px;
  --kap-max: 1560px;

  /* --- Sabit bileşen ölçüleri --- */
  --cetvel-h:    26px;
  --mobil-cta-h: 56px;
  --radius:      2px;
  --hairline:    1px;

  /* --- Tip ölçeği (1.333) --- */
  --t-d1:      clamp(2.35rem, 6.4vw, 6.25rem);
  --t-d2:      clamp(1.9rem, 4.2vw, 3.6rem);
  --t-d3:      clamp(1.5rem, 2.6vw, 2.15rem);
  --t-h4:      1.25rem;
  --t-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --t-govde:   1.0625rem;
  --t-govde-s: .9375rem;
  --t-mono:    .8125rem;
  --t-etiket:  .6875rem;
  --t-mikro:   .625rem;

  /* --- Yazı tipi zincirleri --- */
  --font-display: "Bodoni Moda", "BodoniYedek", "Times New Roman", Times, serif;
  --font-govde:   "Inter", "InterYedek", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* --- Hareket --- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-slot: cubic-bezier(.3, .8, .2, 1);
  --sure-mikro:  180ms;
  --sure-hizli:  280ms;
  --sure-normal: 420ms;
  --sure-giris:  620ms;
  --sure-cizim:  1600ms;
  --sure-tema:   350ms;
}

/* ============================================================
   GECE BASKISI — aynı token adları, tersine çevrilmiş roller
   ============================================================ */
[data-tema="gece"] {
  --kagit:            #14120E;
  --muslin:           #1C1915;
  --tebesir:          #23201A;
  --ecru-doku:        #2E2A22;

  --murekkep:         #F2EDE1;   /* 15.4:1 */
  --murekkep-60:      #C8C1B2;   /* 10.6:1 */
  --grafit:           #918A79;   /*  5.5:1 */

  --dikis:            #3A362C;
  --kilavuz:          #262319;

  --isaret-kirmizi:   #E4674A;   /* 5.77:1 */
  --kalip-mavi:       #7C9CC4;   /* 6.68:1 */

  /* Ritim kırıcı bölüm gece temasında AÇIK olur */
  --kontrast-zemin:   #F5F1E8;
  --kontrast-metin:   #17150F;
  --kontrast-ikincil: #46433A;

  --golge: 4px 10px 22px rgba(0, 0, 0, .5);
  --grain-blend: screen;
  --grain-opak: .06;

  color-scheme: dark;
}

@media (max-width: 480px) {
  :root { --t-govde: 1rem; --t-govde-s: .9375rem; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}


/* ===== 02-base.css ===== */
/* ============================================================
   02 — RESET, TİPOGRAFİ, IZGARA, ERİŞİLEBİLİRLİK
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cetvel-h) + var(--s-6));
  background-color: var(--kagit);
  transition: background-color var(--sure-tema) var(--ease-out);
  hyphens: none;
}

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--kagit);
  color: var(--metin-ikincil);
  font-family: var(--font-govde);
  font-size: var(--t-govde);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--sure-tema) var(--ease-out),
              color var(--sure-tema) var(--ease-out);
}

/* Kağıt dokusu — tek sabit katman, çalışma zamanında filtre yok */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opak);
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-url);
  background-size: 180px 180px;
}

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

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }

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

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

table { border-collapse: collapse; }

/* ---------- TİPOGRAFİ ---------- */
.d1, .d2, .d3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--metin);
  text-wrap: balance;
}

.d1 {
  font-size: var(--t-d1);
  line-height: .92;
  letter-spacing: -.03em;
  word-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  padding-block: .10em;          /* İ / Ğ aksanları kırpılmasın */
}

.d2 {
  font-size: var(--t-d2);
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 72;
  padding-block: .06em;
}

.d3 {
  font-size: var(--t-d3);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 32;
  padding-block: .04em;
}

.h4 {
  font-family: var(--font-govde);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--metin);
}

.italik { font-style: italic; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 52ch;
}

.govde { max-width: 62ch; }
.govde + .govde { margin-top: 1.1em; }

.govde-s {
  font-size: var(--t-govde-s);
  line-height: 1.6;
  max-width: 58ch;
}

/* Mono üç ses: veri / etiket / mikro */
.mono-veri {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: 1.5;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.etiket {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-etiket);
  line-height: 1.4;
  letter-spacing: .22em;
  color: var(--grafit);
  font-variant-numeric: tabular-nums;
  /* Türkçe büyük harf tuzağı: metin HTML'de zaten büyük yazılır */
  text-transform: none;
}

.mikro {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-mikro);
  line-height: 1.4;
  letter-spacing: .16em;
  color: var(--grafit);
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.rakam { font-variant-numeric: tabular-nums lining-nums; }

.vurgu-kirmizi { color: var(--isaret-kirmizi); }
.vurgu-mavi    { color: var(--kalip-mavi); }

/* ---------- IZGARA ---------- */
.kap {
  width: 100%;
  max-width: var(--kap-max);
  margin-inline: auto;
  padding-inline: var(--marj);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- BÖLÜM ÇERÇEVESİ ---------- */
.bolum { isolation: isolate; }
.bolum > .kap,
.bolum > .bolum-basi,
.hero > .kap { position: relative; z-index: 1; }

.bolum {
  position: relative;
  padding-block: var(--bolum-p);
  transition: background-color var(--sure-tema) var(--ease-out);
}

.bolum--muslin   { background-color: var(--muslin); }
.bolum--kontrast {
  background-color: var(--kontrast-zemin);
  color: var(--kontrast-ikincil);
}
.bolum--kontrast .d1,
.bolum--kontrast .d2,
.bolum--kontrast .d3,
.bolum--kontrast .h4 { color: var(--kontrast-metin); }
.bolum--kontrast .etiket,
.bolum--kontrast .mikro { color: var(--kontrast-ikincil); }
.bolum--kontrast .dikis-cizgi { --dikis: rgba(245, 241, 232, .22); }

/* Bölüm başlığı: numara + ad + hairline */
.bolum-basi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-bottom: var(--s-4);
  margin-bottom: clamp(var(--s-7), 6vw, var(--s-9));
  border-bottom: var(--hairline) solid var(--cizgi);
}
.bolum--kontrast .bolum-basi { border-bottom-color: rgba(245, 241, 232, .22); }

.bolum-no {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-etiket);
  letter-spacing: .18em;
  color: var(--isaret-kirmizi);
}

/* Kesik dikiş ayırıcı */
.dikis-cizgi {
  height: 1px;
  border: 0;
  background-image: repeating-linear-gradient(
    to right, var(--dikis) 0 5px, transparent 5px 9px);
}

/* Kenar notu — döndürülmüş marjinal */
.kenar-not {
  position: absolute;
  right: max(6px, calc(var(--marj) * .22));
  top: var(--bolum-p);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--t-mikro);
  letter-spacing: .3em;
  color: var(--grafit);
  opacity: .8;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1280px) { .kenar-not { display: none; } }

/* Milimetrik kalıp kağıdı ızgarası — metnin ALTINDA ayrı katman */
.zemin-kilavuz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(to right,  var(--kilavuz) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--kilavuz) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right,  var(--kilavuz) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, var(--kilavuz) 0 1px, transparent 1px 80px);
}

/* ---------- ERİŞİLEBİLİRLİK ---------- */
:focus-visible {
  outline: 2px solid var(--kalip-mavi);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.bolum--kontrast :focus-visible { outline-color: var(--kontrast-metin); }

.gorunmez {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.atla {
  position: fixed;
  left: var(--marj);
  top: -150%;
  z-index: 1000;
  background: var(--murekkep);
  color: var(--kagit);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-etiket);
  letter-spacing: .18em;
  transition: top var(--sure-hizli) var(--ease-out);
}
.atla:focus { top: var(--s-2); }

::selection { background: var(--isaret-kirmizi); color: var(--kagit); }

/* ---------- HAREKET ---------- */
[data-belir] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--sure-giris) var(--ease-out),
    transform var(--sure-giris) var(--ease-out);
}
[data-belir].gorundu { opacity: 1; transform: none; }
[data-belir][data-gecikme="1"] { transition-delay: 80ms; }
[data-belir][data-gecikme="2"] { transition-delay: 160ms; }
[data-belir][data-gecikme="3"] { transition-delay: 240ms; }

/* Izgara overlay — G tuşu / kolofon düğmesi */
.izgara-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
  opacity: .14;
}
[data-izgara="acik"] .izgara-overlay { display: block; }
.izgara-overlay .kap {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
.izgara-overlay .kap > i { background: var(--isaret-kirmizi); display: block; }
@media (max-width: 1024px) {
  .izgara-overlay .kap { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .izgara-overlay .kap > i:nth-child(n+9) { display: none; }
}
@media (max-width: 640px) {
  .izgara-overlay .kap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .izgara-overlay .kap > i:nth-child(n+5) { display: none; }
}
.izgara-rapor {
  position: fixed;
  top: calc(var(--cetvel-h) + var(--s-3));
  left: var(--s-3);
  z-index: 9998;
  display: none;
  padding: var(--s-2) var(--s-3);
  background: var(--murekkep);
  color: var(--kagit);
  font-family: var(--font-mono);
  font-size: var(--t-mikro);
  letter-spacing: .16em;
}
[data-izgara="acik"] .izgara-rapor { display: block; }

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

/* ---------- YAZDIRMA ---------- */
@media print {
  body::after, .cetvel, .kenar-not, .sayfa-no, .mobil-cta,
  .izgara-overlay, .izgara-rapor, .atla { display: none !important; }
  .bolum {
    padding-block: var(--s-6);
    break-inside: avoid;
    background: none !important;
    color: #1a1a1a !important;
  }
  .bolum--kontrast .d1, .bolum--kontrast .d2, .bolum--kontrast .d3 { color: #000 !important; }
  details { open: true; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; }
}


/* ===== 03-bilesenler.css ===== */
/* ============================================================
   03 — BİLEŞENLER
   ============================================================ */

/* ---------- BUTON ---------- */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  background: var(--murekkep);
  color: var(--kagit);
  border: 1px solid var(--murekkep);
  border-radius: var(--radius);
  font-family: var(--font-govde);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-align: center;
  transition: transform var(--sure-mikro) var(--ease-out),
              background-color var(--sure-mikro) var(--ease-out),
              border-color var(--sure-mikro) var(--ease-out),
              color var(--sure-mikro) var(--ease-out);
}
.dugme .ok { width: 16px; height: 12px; flex: none; }
.dugme .ok * { stroke: currentColor; }

.dugme--kontur {
  background: transparent;
  color: var(--metin);
  border-color: var(--dikis);
}
.dugme--kucuk { min-height: 34px; padding: 0 var(--s-4); font-size: .75rem; }

@media (hover: hover) and (pointer: fine) {
  .dugme:hover { transform: translateY(-1px); border-color: var(--kalip-mavi); }
  .dugme--kontur:hover { background: var(--tebesir); border-color: var(--murekkep); }
}
.dugme:active { transform: translateY(0); }

.bolum--kontrast .dugme {
  background: var(--kontrast-metin);
  color: var(--kontrast-zemin);
  border-color: var(--kontrast-metin);
}

/* ---------- ALT ÇİZGİLİ BAĞLANTI ---------- */
.baglanti-alti {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  position: relative;
  padding-block: var(--s-2);
  font-weight: 500;
  font-size: .8125rem;
  color: var(--metin);
}
.baglanti-alti .ok { width: 16px; height: 12px; flex: none; }
.baglanti-alti .ok * { stroke: currentColor; }
.baglanti-alti::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--sure-hizli) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .baglanti-alti:hover::after { animation: cizgi-yeniden .5s var(--ease-out); }
}
@keyframes cizgi-yeniden {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ---------- CETVEL ŞERİDİ ---------- */
.cetvel {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid var(--cizgi);
  background: transparent;
  transition: background-color var(--sure-hizli) var(--ease-out);
}
.cetvel[data-kaydi="1"] { background: var(--tebesir); }

.cetvel-centik {
  height: 6px;
  background-image: repeating-linear-gradient(
    to right, var(--dikis) 0 1px, transparent 1px 8px);
  opacity: .7;
}

.cetvel-ic {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--cetvel-h);
  padding-block: var(--s-2);
}

.cetvel-kimlik {
  display: flex;
  gap: var(--s-3);
  flex: none;
  color: var(--metin);
  white-space: nowrap;
}
.cetvel-uzun, .cetvel-sehir { color: var(--grafit); }
@media (max-width: 1560px) { .cetvel-uzun { display: none; } }
@media (max-width: 1400px) { .cetvel-sehir { display: none; } }

.cetvel-nav { position: relative; flex: 1 1 auto; min-width: 0; }
.cetvel-nav ul {
  display: flex;
  gap: var(--s-3);
  list-style: none;
  margin: 0; padding: 0;
  justify-content: center;
}
.cetvel-nav a {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding-block: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-etiket);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--grafit);
  transition: color var(--sure-mikro) var(--ease-out);
}
.cetvel-nav a i { font-style: normal; color: var(--dikis); }
.cetvel-nav a[aria-current="true"] { color: var(--metin); }
.cetvel-nav a[aria-current="true"] i { color: var(--isaret-kirmizi); }
@media (hover: hover) and (pointer: fine) { .cetvel-nav a:hover { color: var(--metin); } }

.cetvel-isaret {
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--isaret-kirmizi);
  transition: transform var(--sure-normal) var(--ease-out),
              width var(--sure-normal) var(--ease-out);
}
@media (max-width: 1300px) { .cetvel-nav { display: none; } }

.cetvel-sag { display: flex; align-items: center; gap: var(--s-4); flex: none; margin-left: auto; }

.dil-degistir { color: var(--grafit); white-space: nowrap; }
.dil-degistir:hover { color: var(--metin); }

.tema-anahtar { color: var(--grafit); white-space: nowrap; }
.tema-anahtar .tema-ayrac { margin-inline: 3px; opacity: .5; }
.tema-anahtar .tema-kagit { color: var(--metin); }
[data-tema="gece"] .tema-anahtar .tema-kagit { color: var(--grafit); }
[data-tema="gece"] .tema-anahtar .tema-gece { color: var(--metin); }
@media (max-width: 1000px) { .cetvel-sag .tema-anahtar { display: none; } }

@media (max-width: 900px) {
  .cetvel-ic { min-height: 44px; }
  .cetvel-sag .dugme--kucuk { display: none; }
}

/* ---------- SAYFA NUMARASI + İÇİNDEKİLER ---------- */
.sayfa-no {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 70;
}
@media (max-width: 900px) { .sayfa-no { bottom: calc(var(--mobil-cta-h) + var(--s-3)); } }

.sayfa-no-dugme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  color: var(--grafit);
  box-shadow: var(--golge);
}
.sayfa-no-dugme .slot {
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15em;
  color: var(--metin);
}
.sayfa-no-dugme .slot-ic {
  display: block;
  transition: transform var(--sure-hizli) var(--ease-slot);
}

.icindekiler {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--kagit);
  overflow-y: auto;
  padding-block: var(--s-8);
}
.icindekiler-bas {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--cizgi);
}
.icindekiler-kapat { color: var(--grafit); }
.icindekiler-liste { list-style: none; padding: 0; margin: var(--s-6) 0 0; counter-reset: ic; }
.icindekiler-liste li { border-bottom: 1px solid var(--cizgi); }
.icindekiler-liste a {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--metin);
}
.icindekiler-liste a i {
  font: 500 var(--t-etiket)/1 var(--font-mono);
  letter-spacing: .18em;
  color: var(--isaret-kirmizi);
  font-style: normal;
}

/* ---------- MOBİL ALT CTA ---------- */
.mobil-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  height: var(--mobil-cta-h);
  background: var(--murekkep);
  box-shadow: var(--golge);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobil-cta a {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--kagit);
  font-family: var(--font-govde);
  font-weight: 500;
  font-size: .875rem;
}
.mobil-cta-b {
  flex: 0 0 34%;
  border-left: 1px solid rgba(245, 241, 232, .22);
  font-family: var(--font-mono) !important;
  font-size: var(--t-etiket) !important;
  letter-spacing: .2em;
}
@media (max-width: 900px) {
  .mobil-cta { display: flex; }
  body { padding-bottom: var(--mobil-cta-h); }
}

/* ---------- AKORDEON ---------- */
details > .icerik-sarma {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-out);
}
details[open] > .icerik-sarma { grid-template-rows: 1fr; }
.icerik-sarma > * { overflow: hidden; min-height: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.hizmet-arti { width: 16px; height: 16px; flex: none; color: var(--grafit); }
.hizmet-arti * { stroke: currentColor; }
details[open] .hizmet-arti .dikey { opacity: 0; }
.hizmet-arti .dikey { transition: opacity var(--sure-mikro) var(--ease-out); }

/* ---------- ÇİP ---------- */
.cip {
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  color: var(--grafit);
  background: transparent;
  transition: color var(--sure-mikro) var(--ease-out),
              border-color var(--sure-mikro) var(--ease-out),
              background-color var(--sure-mikro) var(--ease-out);
}
.cip[aria-pressed="true"] {
  color: var(--metin);
  border-color: var(--kalip-mavi);
  background: var(--tebesir);
}
@media (hover: hover) and (pointer: fine) { .cip:hover { color: var(--metin); border-color: var(--grafit); } }
.cipler { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- FORM ---------- */
.brief-form { display: flex; flex-direction: column; gap: var(--s-5); }
.form-baslik { color: var(--isaret-kirmizi); }

.alan { display: flex; flex-direction: column; gap: 6px; }
.alan label, .alan legend {
  font-family: var(--font-govde);
  font-weight: 500;
  font-size: .8125rem;
  color: var(--metin);
}
.zorunlu { color: var(--isaret-kirmizi); font-weight: 400; }

.alan input, .alan textarea {
  width: 100%;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--murekkep-60);
  border-radius: 0;
  color: var(--metin);
  font-size: var(--t-govde);
  transition: border-color var(--sure-mikro) var(--ease-out);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--grafit); opacity: 1; }
.alan input:focus, .alan textarea:focus {
  outline: none;
  border-bottom-color: var(--kalip-mavi);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--s-3) - 1px);
}
.alan input[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-bottom-color: var(--isaret-kirmizi); }
.alan-hata { color: var(--isaret-kirmizi); letter-spacing: .02em; }

.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 560px) { .alan-cift { grid-template-columns: 1fr; } }

.cip-alan legend { margin-bottom: var(--s-3); }
.form-zorunlu { color: var(--grafit); }
.form-eylem { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.form-durum { color: var(--kalip-mavi); min-height: 1.4em; }
.form-durum:empty { min-height: 0; }
.form-yedek {
  width: 100%; padding: var(--s-3);
  border: 1px solid var(--cizgi); border-radius: var(--radius);
  background: var(--tebesir); color: var(--metin);
  font-family: var(--font-mono); font-size: var(--t-mono);
}

/* ---------- FİŞ ---------- */
.fis {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
}
.fis-baslik { color: var(--isaret-kirmizi); margin-bottom: var(--s-3); }
.fis-liste { margin: 0; }
.fis-satir {
  display: flex; gap: var(--s-3);
  padding-block: 5px;
  border-bottom: 1px dashed var(--cizgi);
}
.fis-satir:last-child { border-bottom: 0; }
.fis-satir dt { flex: 0 0 5.5rem; color: var(--grafit); }
.fis-satir dd { margin: 0; color: var(--metin); overflow-wrap: anywhere; }
.fis-satir.yanip-sonme { animation: fis-yanip .4s var(--ease-out); }
@keyframes fis-yanip { 0% { background: var(--muslin); } 100% { background: transparent; } }

/* ---------- MARJ NOTU (terim) ---------- */
.terim {
  position: relative;
  border-bottom: 1px dashed var(--dikis);
  cursor: help;
}
.terim .not {
  position: absolute;
  left: calc(100% + var(--s-5));
  top: 0;
  width: 220px;
  font: 400 var(--t-etiket)/1.5 var(--font-mono);
  letter-spacing: .02em;
  color: var(--grafit);
  opacity: 0; visibility: hidden;
  transition: opacity var(--sure-mikro) var(--ease-out);
  pointer-events: none;
}
.terim:hover .not, .terim:focus-visible .not { opacity: 1; visibility: visible; }
.terim:hover { border-bottom-color: var(--isaret-kirmizi); }
@media (max-width: 1024px) {
  .terim .not {
    position: static; display: block; width: auto;
    margin-top: var(--s-3); opacity: 1; visibility: visible;
  }
}


/* ===== 04-bolumler.css ===== */
/* ============================================================
   04 — BÖLÜMLER
   ============================================================ */

.bolum-giris { margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }

/* ---------- 01 HERO ---------- */
.hero {
  min-height: min(88vh, 900px);
  display: flex;
  align-items: center;
  padding-block: var(--s-9) var(--s-8);
  overflow: hidden;
}
.hero .zemin-kilavuz { opacity: .55; }

.hero-grid { align-items: center; width: 100%; }
.hero-metin { grid-column: 1 / span 8; }
.hero-kroki  { grid-column: 9 / span 4; margin: 0; }

@media (max-width: 1024px) {
  .hero-metin { grid-column: 1 / span 5; }
  .hero-kroki { grid-column: 6 / span 3; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; padding-block: var(--s-8) var(--s-7); }
  .hero-metin { grid-column: 1 / -1; }
  .hero-kroki { grid-column: 1 / -1; max-width: 240px; margin-inline: auto; margin-top: var(--s-7); }
}

.hero-baslik { margin-bottom: var(--s-6); }
.hero-satir { display: block; position: relative; white-space: nowrap; }
.hero-satir--vurgu { display: block; }
.hero-vurgu-sar { position: relative; display: inline-block; }
.hero-dikis {
  position: absolute;
  left: 0; bottom: .02em;
  width: 100%; height: 8px;
  overflow: visible;
}
.hero-dikis path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-dikis path:first-child { stroke-dasharray: .0167 .0133; }
.hero.dikildi .hero-dikis path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--sure-cizim) var(--ease-out) 300ms;
}

/* harf harf kesim */
.harf {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(.14em);
  transition: clip-path var(--sure-giris) var(--ease-out),
              transform var(--sure-giris) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 26ms);
}
.acik .harf { clip-path: inset(0); transform: none; }

.hero-lead { margin-bottom: var(--s-6); max-width: 46ch; }
.hero-eylem { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }

.hero-asagi {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-8);
  color: var(--grafit);
}
.hero-asagi-ok { width: 10px; height: 32px; }
.hero-asagi-ok * { stroke: currentColor; }

.hero-dikey {
  position: absolute;
  left: max(6px, calc(var(--marj) * .22));
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  color: var(--grafit);
}
@media (max-width: 1280px) { .hero-dikey { display: none; } }

.hero-kroki-svg { width: 100%; height: auto; max-height: 62vh; }
.hero-kroki-svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-kroki-svg.ciziliyor [pathLength] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--sure-cizim) ease-out;
}
.hero-kroki-svg .olcu { opacity: 0; transition: opacity var(--sure-normal) var(--ease-out) 1400ms; }
.hero-kroki-svg.ciziliyor .olcu { opacity: 1; }

/* registration işaretleri */
.reg { position: absolute; width: 14px; height: 14px; color: var(--isaret-kirmizi); opacity: .8; }
.reg * { stroke: currentColor; }
.reg--sol-ust  { left: 24px;  top: 24px; }
.reg--sag-ust  { right: 24px; top: 24px; }
.reg--sol-alt  { left: 24px;  bottom: 24px; }
.reg--sag-alt  { right: 24px; bottom: 24px; }
@media (max-width: 760px) { .reg { display: none; } }

/* ---------- 02 KONUM ---------- */
.bolum--konum { overflow: hidden; }
.konum-etiket { grid-column: 1 / span 3; }
.konum-govde  { grid-column: 4 / span 7; }
@media (max-width: 1024px) {
  .konum-etiket { grid-column: 1 / -1; margin-bottom: var(--s-4); }
  .konum-govde  { grid-column: 1 / -1; }
}
.konum-ana { margin-bottom: var(--s-6); line-height: 1.35; max-width: 24ch; max-width: 46ch; }
.konum-destek { margin-bottom: var(--s-7); }

.kalip-filigran {
  position: absolute;
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46%, 620px);
  height: auto;
  pointer-events: none;
  z-index: -1;
  opacity: .9;
}
@media (max-width: 1024px) { .kalip-filigran { right: -34%; width: 70%; opacity: .55; } }

.kime-liste { margin-bottom: var(--s-6); }
.kime-liste dt { margin-bottom: var(--s-3); }
.kime-liste dd {
  margin: 0;
  padding-left: var(--s-6);
  position: relative;
  font-size: var(--t-govde-s);
  line-height: 1.9;
  color: var(--metin-ikincil);
}
.kime-liste dd::before {
  content: "";
  position: absolute;
  left: 0; top: .9em;
  width: 14px; height: 1px;
  background: var(--dikis);
}
.konum-durustluk { color: var(--grafit); line-height: 1.9; }

.sayac-serit { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--s-8); }
.sayac { border-left: 1px solid var(--cizgi); padding-left: var(--s-4); }

/* ---------- 03 HİZMETLER ---------- */
.hizmet-liste { border-top: 1px solid var(--cizgi); }
.hizmet { border-bottom: 1px solid var(--cizgi); }

.hizmet-bas {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 16px;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-5);
  position: relative;
}
.hizmet-no { color: var(--grafit); transition: color var(--sure-mikro) var(--ease-out); }
.hizmet-ad { color: var(--metin); }
.hizmet-teslim { color: var(--grafit); white-space: nowrap; }
.hizmet-bas::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--isaret-kirmizi);
  transition: width var(--sure-hizli) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hizmet-bas:hover::before { width: 40px; }
  .hizmet-bas:hover .hizmet-no { color: var(--metin); }
}
.hizmet[open] .hizmet-no { color: var(--metin); }
.hizmet[open] .hizmet-no::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--isaret-kirmizi);
  vertical-align: middle;
}
@media (max-width: 760px) {
  .hizmet-bas { grid-template-columns: 2.5rem minmax(0, 1fr) 16px; }
  .hizmet-teslim { grid-column: 2; grid-row: 2; }
}

.hizmet-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-7);
  padding: 0 0 var(--s-7) 3.5rem;
}
@media (max-width: 900px) { .hizmet-ic { grid-template-columns: 1fr; gap: var(--s-5); padding-left: 0; } }
.hizmet-detay { margin-top: var(--s-4); }
.hizmet-detay li { position: relative; padding-left: var(--s-5); margin-bottom: var(--s-2); }
.hizmet-detay li::before {
  content: "";
  position: absolute; left: 0; top: .75em;
  width: 10px; height: 1px; background: var(--dikis);
}
.hizmet-sag .mono-veri { color: var(--grafit); margin-bottom: var(--s-5); }
.cikti-etiket { color: var(--isaret-kirmizi); }
.hizmet-not, .teslimat-not, .matris-not, .plaka-not, .surec-termin { color: var(--grafit); margin-top: var(--s-6); }

/* ---------- 04 SÜREÇ ---------- */
.surec-liste {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--gutter);
  counter-reset: adim;
}
@media (max-width: 1024px) { .surec-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .surec-liste { grid-template-columns: 1fr; } }

.surec-adim { padding-top: var(--s-5); border-top: 1px solid rgba(245, 241, 232, .22); position: relative; }
.surec-adim::before {
  content: "";
  position: absolute; left: 0; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kontrast-zemin);
  border: 1px solid var(--kontrast-metin);
}
.surec-adim.gorundu::before { background: var(--kalip-mavi); border-color: var(--kalip-mavi); }
.surec-sira { display: block; margin-bottom: var(--s-3); color: var(--kontrast-ikincil); }
.surec-adim h3 { margin-bottom: var(--s-3); }
.surec-cikti { margin-top: var(--s-3); color: var(--kontrast-ikincil); }
.surec-ayrac { margin-block: var(--s-9); }

.sezon-blok { align-items: center; }
.sezon-metin { grid-column: 1 / span 6; }
.sezon-daire { grid-column: 8 / span 5; margin: 0; }
@media (max-width: 1024px) {
  .sezon-metin { grid-column: 1 / -1; }
  .sezon-daire { grid-column: 1 / -1; max-width: 420px; margin: var(--s-7) auto 0; }
}
.sezon-metin .d3 { margin-bottom: var(--s-4); }
.sezon-metin .mono-veri { margin-top: var(--s-4); color: var(--kontrast-ikincil); }

/* ---------- 05 ÇİZİM DEFTERİ ---------- */
.plaka-izgara {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}
.plaka { grid-column: span 2; margin: 0; }
.plaka--uzun { grid-column: span 2; }
.plaka--tam  { grid-column: 1 / -1; }
.plaka--genis { grid-column: span 4; }
@media (max-width: 1024px) {
  .plaka-izgara { grid-template-columns: repeat(2, 1fr); }
  .plaka, .plaka--uzun { grid-column: span 1; }
  .plaka--tam, .plaka--genis { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .plaka-izgara { grid-template-columns: 1fr; }
  .plaka, .plaka--uzun, .plaka--genis { grid-column: 1 / -1; }
}

.plaka-cerceve {
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  padding: var(--s-3);
  overflow: hidden;
}
.plaka-cerceve img {
  width: 100%; height: auto;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 600ms var(--ease-out);
}
[data-tema="gece"] .plaka-cerceve img { mix-blend-mode: normal; filter: invert(1) brightness(.92) contrast(1.05); }
@media (hover: hover) and (pointer: fine) {
  .plaka:hover .plaka-cerceve img { transform: scale(1.015); }
}
.plaka-etiket {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: var(--s-3);
  color: var(--metin);
}
.plaka-alt { color: var(--grafit); }

/* ---------- 06 KUMAŞ ---------- */
.kumas-serit {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--marj);
  padding-block: var(--s-3) var(--s-6);
  scrollbar-width: thin;
}
.swatch { position: relative; flex: 0 0 220px; scroll-snap-align: start; }
@media (max-width: 640px) { .swatch { flex-basis: 160px; } }

.swatch-ic {
  display: block; width: 100%; text-align: left;
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 0 0 var(--s-3);
  box-shadow: var(--golge);
  overflow: hidden;
}
.swatch-yuzey {
  position: relative;
  display: block;
  height: 200px;
  background: var(--muslin);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
@media (max-width: 640px) { .swatch-yuzey { height: 140px; } }
.swatch-yuzey svg { width: 100%; height: 100%; }
.swatch-percin {
  position: absolute; left: 12px; top: 12px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--dikis);
  background: var(--kagit);
  box-shadow: inset 0 1px 2px rgba(20, 18, 15, .25);
}
.swatch-percin::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; border: 1px solid var(--dikis);
}
.swatch-etiket { display: block; padding: var(--s-3) var(--s-3) 0; }
.swatch-ad { display: block; color: var(--metin); line-height: 1.4; }
.swatch-detay {
  display: block; margin-top: 6px; color: var(--grafit);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--sure-normal) var(--ease-out), opacity var(--sure-normal) var(--ease-out);
}
.swatch-ic[aria-expanded="true"] .swatch-detay { max-height: 12em; opacity: 1; }
.swatch-no { position: absolute; right: var(--s-3); top: var(--s-3); color: var(--grafit); }

.kumas-alt { display: flex; flex-direction: column; gap: var(--s-3); }
.kumas-ilerleme { color: var(--grafit); }

/* ---------- 07 TESLİMAT ---------- */
.teslimat-grid { align-items: start; }
.teslimat-liste { grid-column: 1 / span 5; list-style: none; padding: 0; margin: 0; }
.teknik-paket   { grid-column: 7 / span 6; margin: 0; position: sticky; top: calc(var(--cetvel-h) + var(--s-7)); }
@media (max-width: 1024px) {
  .teslimat-liste { grid-column: 1 / -1; }
  .teknik-paket { grid-column: 1 / -1; position: static; margin-top: var(--s-7); max-width: 520px; }
}
.teslimat-madde { border-bottom: 1px solid var(--cizgi); }
.teslimat-madde button {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 4px var(--s-3);
  width: 100%; text-align: left;
  padding-block: var(--s-4);
}
.teslimat-no { grid-row: span 2; color: var(--grafit); }
.teslimat-madde button[aria-selected="true"] .teslimat-no { color: var(--isaret-kirmizi); }
.teslimat-ad { color: var(--metin); }
.teslimat-aciklama { color: var(--metin-ikincil); }
.teknik-paket svg { width: 100%; height: auto; }
.teknik-paket .hotspot { fill: var(--tebesir); stroke: var(--grafit); stroke-width: 0.75; transition: fill var(--sure-mikro) var(--ease-out); }
.teknik-paket .hotspot.etkin { fill: var(--isaret-kirmizi); stroke: var(--isaret-kirmizi); }

.teknik-cizim-blok { margin-block: var(--s-9); }
.teknik-cizim-blok .d3 { margin-bottom: var(--s-4); }
.teknik-cizim-blok .govde { margin-bottom: var(--s-7); }
.flat-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gutter);
  list-style: none; padding: 0; margin: 0;
}
.flat {
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  padding: var(--s-4);
}
.flat-cizim { width: 100%; height: auto; aspect-ratio: 3 / 4; color: var(--metin); }
.flat-cizim .doldurulabilir { --kroki-dolgu: none; transition: fill var(--sure-orta, 480ms) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .flat:hover .flat-cizim .doldurulabilir { fill: url(#doku-dimi); }
}
.flat-etiket { margin-top: var(--s-3); color: var(--grafit); }

.pastal, .gradasyon { margin: var(--s-9) 0 0; }
.pastal-cerceve, .gradasyon-cerceve {
  background: var(--tebesir);
  border: 1px solid var(--cizgi);
  padding: var(--s-5);
  overflow-x: auto;
}
.pastal-cerceve svg { min-width: 720px; width: 100%; height: auto; }
.gradasyon-cerceve svg { min-width: 560px; width: 100%; height: auto; }
.pastal figcaption, .gradasyon figcaption { margin-top: var(--s-4); max-width: 70ch; }
.pastal strong, .gradasyon strong { color: var(--metin); }

/* ---------- 08 MODELLER ---------- */
.matris-sarma { overflow-x: auto; }
.matris { width: 100%; min-width: 780px; border-collapse: collapse; }
.matris th, .matris td {
  border: 1px solid var(--cizgi);
  padding: var(--s-4);
  vertical-align: top;
  text-align: left;
  font-size: var(--t-govde-s);
  line-height: 1.55;
  color: var(--metin-ikincil);
  transition: background-color var(--sure-mikro) var(--ease-out), opacity var(--sure-mikro) var(--ease-out);
}
.matris thead td, .matris tbody th { border-top: 0; }
.matris thead th { background: var(--tebesir); }
.matris tbody th { width: 12rem; color: var(--metin); }
.matris tbody th .etiket { color: var(--grafit); }
.matris-eylem td { border-bottom: 0; }

@supports selector(:has(*)) {
  @media (hover: hover) and (pointer: fine) {
    .matris:has([data-sutun="1"]:hover) [data-sutun="2"],
    .matris:has([data-sutun="1"]:hover) [data-sutun="3"],
    .matris:has([data-sutun="2"]:hover) [data-sutun="1"],
    .matris:has([data-sutun="2"]:hover) [data-sutun="3"],
    .matris:has([data-sutun="3"]:hover) [data-sutun="1"],
    .matris:has([data-sutun="3"]:hover) [data-sutun="2"] { opacity: .55; }
    .matris [data-sutun]:hover { background: var(--tebesir); }
  }
}

.neden-blok { margin-top: var(--s-9); }
.neden-blok .d3 { margin-bottom: var(--s-7); }
.neden-liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--gutter);
}
@media (max-width: 760px) { .neden-liste { grid-template-columns: 1fr; } }
.neden-liste li { padding-top: var(--s-4); border-top: 1px solid var(--cizgi); }
.neden-liste .etiket { display: block; margin-bottom: var(--s-3); color: var(--isaret-kirmizi); }
.neden-liste h4 { margin-bottom: var(--s-3); }

/* ---------- 09 SSS ---------- */
.sss-bas { grid-column: 1 / span 4; position: sticky; top: calc(var(--cetvel-h) + var(--s-7)); align-self: start; }
.sss-liste { grid-column: 5 / span 8; border-top: 1px solid var(--cizgi); }
@media (max-width: 1024px) {
  .sss-bas { grid-column: 1 / -1; position: static; margin-bottom: var(--s-6); }
  .sss-liste { grid-column: 1 / -1; }
}
.sss-bas .bolum-no { display: block; margin-bottom: var(--s-3); }
.soru { border-bottom: 1px solid var(--cizgi); }
.soru summary {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 16px;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-4);
}
.soru-no { color: var(--grafit); }
.soru-metin { color: var(--metin); }
.soru-cevap { padding: 0 0 var(--s-5) 2.5rem; }
@media (max-width: 640px) {
  .soru summary { grid-template-columns: 2rem minmax(0, 1fr) 16px; }
  .soru-cevap { padding-left: 2rem; }
}

/* ---------- 10 BRIEF ---------- */
.brief-sol { grid-column: 1 / span 5; }
.brief-sag { grid-column: 7 / span 6; }
@media (max-width: 1024px) {
  .brief-sol { grid-column: 1 / -1; margin-bottom: var(--s-8); }
  .brief-sag { grid-column: 1 / -1; }
}
.bolum-basi--dar { margin-bottom: var(--s-4); border-bottom: 0; padding-bottom: 0; }
.brief-davet { margin-bottom: var(--s-5); }
.brief-sol .govde { margin-bottom: var(--s-7); }
.dogrudan { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-3) var(--s-4); }
.dogrudan dt { color: var(--grafit); }
.dogrudan dd { margin: 0; color: var(--metin); }
.dogrudan a { border-bottom: 1px solid var(--dikis); }
.dogrudan a:hover { border-bottom-color: var(--isaret-kirmizi); }

/* ---------- 11 KOLOFON ---------- */
.kolofon { padding-block: var(--s-8) var(--s-7); }
.kes-satir {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--kontrast-ikincil);
  margin-bottom: var(--s-8);
}
.kes-cizgi {
  flex: 1; height: 1px;
  background-image: repeating-linear-gradient(to right, var(--kontrast-ikincil) 0 5px, transparent 5px 9px);
  opacity: .5;
}
.kes-makas { width: 26px; height: 20px; color: var(--kontrast-ikincil); }
.kes-makas * { stroke: currentColor; }

.kolofon-grid { row-gap: var(--s-7); }
.kolofon-sol { grid-column: 1 / span 4; }
.kolofon-nav { grid-column: 6 / span 3; }
.kolofon-sag { grid-column: 10 / span 3; }
@media (max-width: 1024px) {
  .kolofon-sol { grid-column: 1 / -1; }
  .kolofon-nav { grid-column: 1 / span 4; }
  .kolofon-sag { grid-column: 5 / span 4; }
}
@media (max-width: 640px) {
  .kolofon-nav, .kolofon-sag { grid-column: 1 / -1; }
}
.kolofon-sol .d3 { margin-bottom: var(--s-3); }
.kolofon-nav .etiket, .kolofon-sag .etiket { display: block; margin-bottom: var(--s-4); }
.kolofon-nav ul { list-style: none; padding: 0; margin: 0; }
.kolofon-nav li a { display: flex; gap: var(--s-3); padding-block: 3px; color: var(--kontrast-ikincil); }
.kolofon-nav li a i { font-style: normal; opacity: .6; }
.kolofon-nav li a:hover { color: var(--kontrast-metin); }
.kolofon-iletisim { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.kolofon-iletisim li { padding-block: 3px; }
.kolofon-iletisim a { border-bottom: 1px solid rgba(245, 241, 232, .3); }
.kolofon-arac { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.kolofon-arac .dil-degistir,
.kolofon-arac .tema-anahtar,
.kolofon-arac .izgara-dugme { color: var(--kontrast-ikincil); }
.kolofon-arac .tema-anahtar { display: inline-flex; }
.kolofon-arac .tema-anahtar .tema-kagit { color: var(--kontrast-metin); }
[data-tema="gece"] .kolofon-arac .tema-anahtar .tema-kagit { color: var(--kontrast-ikincil); }
[data-tema="gece"] .kolofon-arac .tema-anahtar .tema-gece { color: var(--kontrast-metin); }

.kolofon-imza { margin-top: var(--s-8); max-width: 72ch; color: var(--kontrast-ikincil); }
.kvkk { margin-top: var(--s-6); border-top: 1px solid rgba(245, 241, 232, .22); padding-top: var(--s-4); }
.kvkk summary { color: var(--kontrast-ikincil); padding-block: var(--s-2); }
.kvkk-ic { margin-top: var(--s-4); max-width: 76ch; }
.kvkk-ic p + p { margin-top: var(--s-4); }

.kolofon-serit {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(245, 241, 232, .22);
  color: var(--kontrast-ikincil);
}

/* ---------- 404 ---------- */
.sayfa-404 { display: flex; align-items: center; min-height: 100svh; }
.hata-kap { padding-block: var(--s-9); max-width: 900px; }
.hata-etiket { color: var(--isaret-kirmizi); margin-bottom: var(--s-5); }
.hata-baslik { margin-bottom: var(--s-5); }
.sayfa-404 .lead { margin-bottom: var(--s-6); }
.hata-gorsel { margin: var(--s-8) 0 var(--s-5); max-width: 280px; }
.hata-gorsel svg { width: 100%; height: auto; }