/* ==========================================================================
   CFK ChickN — Temel katman: reset, tipografi, yerleşim, doku
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--komur);
  color: var(--krem);
  font-family: var(--f-govde);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--amber); color: var(--komur); }

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

/* --- Başlıklar ------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-dev); }
h2 { font-size: var(--t-xxl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }

/* Üst göz etiketi — bölüm başlıklarının üstündeki küçük mono satır */
.goz {
  font-family: var(--f-mono);
  font-size: var(--t-etiket);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: 1.1rem;
}
.goz::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.goz--orta { justify-content: center; }
.goz--kirmizi { color: var(--kirmizi-hot); }

/* --- Yerleşim ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--dar { max-width: var(--wrap-dar); }

.bolum { padding-block: var(--bolum); position: relative; }

.bolum--kagit {
  background: var(--krem);
  color: var(--komur);
}
.bolum--kagit .goz { color: var(--kirmizi); }

.bolum--kizgin {
  background: var(--vinyet);
  color: #fff;
}
.bolum--kizgin .goz { color: var(--amber); }

/* --- Doku katmanları ------------------------------------------------ */

/* İnce film grain — düz gradyan görüntüsünü kırar */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halftone nokta trama — ürün fotoğraflarının arkasında */
.tram {
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 9px 9px;
  opacity: .16;
}

/* Dev horoz ibiği filigranı */
.filigran {
  position: absolute;
  pointer-events: none;
  opacity: .045;
  filter: grayscale(1) brightness(3);
  user-select: none;
}

/* --- Yırtık kenar geçişi -------------------------------------------- */

.yirtik {
  position: relative;
}
.yirtik::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 22px;
  background: inherit;
  clip-path: polygon(
    0% 100%, 0% 42%, 3% 61%, 7% 33%, 11% 58%, 15% 28%, 19% 55%, 24% 22%,
    28% 60%, 33% 30%, 37% 63%, 42% 26%, 46% 57%, 51% 20%, 55% 55%, 60% 32%,
    64% 62%, 69% 24%, 73% 58%, 78% 29%, 82% 60%, 87% 25%, 91% 56%, 96% 30%,
    100% 52%, 100% 100%
  );
  transform: translateY(-99%);
  z-index: 4;
}

/* --- Yardımcılar ---------------------------------------------------- */

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
}
.sonuk { color: var(--tuz); }
.bolum--kagit .sonuk { color: var(--tuz-koyu); }
.merkez { text-align: center; }
.gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
  position: absolute; top: 8px; left: 8px;
  transform: translateY(-200%);
  background: var(--amber); color: var(--komur);
  padding: .6rem 1rem; border-radius: var(--r-s);
  font-weight: 700; z-index: 999;
}
.atla:focus { transform: none; }

/* --- Hareket -------------------------------------------------------- */

[data-ac] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--gecikme, 0ms);
}
[data-ac].ac { opacity: 1; transform: none; }

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