/* ============================================================
   SUPERCUT — site5 · "GÜMÜŞ DESTE" kimliği (site3'ün karanlık ikizi)
   ------------------------------------------------------------
   Aynı aile: dev tipografi, tek vurgu, sert kenar, sessiz site.
   Farklar:
   - Zemin koyu (kutu içi karanlığı); dev wordmark GÜMÜŞ FOLYO
     degradesi taşır — malzemenin kendisi ekrana çıkar
   - İmza hareket "kesik" değil ÇEKİŞ: başlıklar, kutudan yaprak
     çekilir gibi yuvadan yukarı çıkar (.cekis kalıbı)
   - Wordmark arkasında DESTE: iki hayalet kopya (kontur), kutuda
     bekleyen sonraki yapraklar
   - Vurgu: kızıl #E8442E — SADECE birincil CTA + aktif nav imi +
     kritik değer. Gümüş degrade yalnız wordmark + büyük rakamlar.
   - Radius yok, gölge yok, fotoğraf yok.
   ============================================================ */

/* ---------- 1. Değişkenler ---------- */
:root {
  --zemin:   #101114;          /* kutu içi — saf siyah değil */
  --yuzey:   #17191D;          /* panel yüzeyi */
  --metin:   #F2F2EE;          /* kırık beyaz */
  --soluk:   #9AA0A6;          /* ikincil metin */
  --cizgi:   rgba(242, 242, 238, .16);   /* hairline */
  --kizil:   #E8442E;          /* vurgu — kıt kullan */
  --gumus-1: #EDEFF2;          /* folyo degrade uçları */
  --gumus-2: #8E959D;          /* folyo degrade orta */

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-govde:   'Manrope', 'Segoe UI', sans-serif;
  --font-mono:    'Chivo Mono', 'Consolas', monospace;

  --cekis-egri: cubic-bezier(.2, .85, .25, 1);   /* tek çekiş eğrisi */
}

/* ---------- 2. Sıfırlama + taban ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--zemin);
  color: var(--metin);
  font: 400 1rem/1.65 var(--font-govde);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kizil); }

ul { list-style: none; }

::selection { background: var(--kizil); color: var(--metin); }
:focus-visible { outline: 2px solid var(--kizil); outline-offset: 2px; }

body.kilitli { overflow: hidden; }

/* ---------- 3. Yardımcılar ---------- */
.kap { width: min(1220px, 100% - 3rem); margin-inline: auto; }

.mono {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Gümüş folyo metni — yalnız wordmark ve büyük rakamlar */
.folyo {
  background: linear-gradient(172deg, var(--gumus-1) 8%, var(--gumus-2) 46%, #C9CED4 58%, var(--gumus-1) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4. İMZA — ÇEKİŞ kalıbı ---------- */
/* Yuva (.cekis) taşmayı kırpar; içindeki .cekis__yaprak alttan
   yukarı TEK HAMLEDE çekilir. Başka hareket yok — site sessizdir. */
/* Üst/alt pay: Türkçe aksanlar (Ö noktası, Ğ breve, Ç kuyruğu) kırpılmasın */
.cekis { display: block; overflow: hidden; padding-block: .16em .12em; margin-block: -.16em -.12em; }
.cekis__yaprak {
  display: block;
  transform: translateY(112%);
  transition: transform .65s var(--cekis-egri);
}
.gorunur-yap .cekis__yaprak,
.cekis.gorunur-yap .cekis__yaprak { transform: translateY(0); }
/* Ardışık satırlar servis ritmiyle gelir */
.cekis:nth-of-type(2) .cekis__yaprak { transition-delay: .08s; }
.cekis:nth-of-type(3) .cekis__yaprak { transition-delay: .16s; }

/* Opaklık reveal'ı (çekiş dışındaki bloklar için) */
.gizli { opacity: 0; transition: opacity .5s ease; }
.gizli.gorunur-yap { opacity: 1; }

/* ---------- 5. Tipografi ---------- */
h1, h2, .baslik {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}
h2, .baslik { font-size: clamp(2.1rem, 4.8vw, 3.8rem); }

h3 { font-family: var(--font-govde); font-weight: 700; font-size: 1.02rem; }

.govde-genis { font-size: 1.05rem; max-width: 36em; color: var(--soluk); }
.govde-genis b { color: var(--metin); font-weight: 600; }

.goz {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 1rem;
}

/* ---------- 6. Header ---------- */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.marka {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1;
}
.marka .folyo { background: linear-gradient(172deg, var(--gumus-1) 10%, var(--gumus-2) 60%, var(--gumus-1) 95%); -webkit-background-clip: text; background-clip: text; }
.marka:hover { color: inherit; }

.ust nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.ust nav > a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--soluk);
  text-decoration: none;
}
.ust nav > a:hover { color: var(--metin); }
/* Aktif sayfa: kızıl çekiş imi (alt kenarda kısa blok) */
.ust nav > a.aktif { color: var(--metin); position: relative; }
.ust nav > a.aktif::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: -6px;
  width: 1.1em; height: 3px;
  background: var(--kizil);
}

.dil { display: flex; align-items: baseline; gap: .55rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; }
.dil span { color: var(--metin); font-weight: 700; }
.dil a { color: var(--soluk); text-decoration: none; }

.menu-dugme {
  display: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  background: none;
  border: 1px solid var(--cizgi);
  color: var(--metin);
  padding: .5rem .9rem;
  cursor: pointer;
}

/* ---------- 7. Düğmeler ---------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-govde);
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.dugme--birincil { background: var(--kizil); color: var(--metin); }
.dugme--birincil:hover { background: #CF3A26; color: var(--metin); }
.dugme--ikincil { background: transparent; border-color: rgba(242, 242, 238, .35); color: var(--metin); }
.dugme--ikincil:hover { border-color: var(--metin); color: var(--metin); }
.dugme--kucuk { padding: .55rem 1.1rem; font-size: .78rem; }

/* ---------- 8. Hero — GÜMÜŞ DESTE ---------- */
.kahraman {
  min-height: calc(100svh - 4rem);
  display: flex;
  flex-direction: column;
}
.kahraman__ustsoz { text-align: center; padding-top: 1.6rem; color: var(--soluk); }

/* Dev wordmark + arkasında deste (iki hayalet kontur kopya) */
.deste {
  position: relative;
  margin-block: auto;
  padding-block: 1.2rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 26vw, 27rem);
  line-height: .82;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
.deste__yaprak { position: relative; z-index: 3; display: block; }
/* Hayalet yapraklar: kutuda bekleyen sonraki tabakalar */
.deste__golge {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 242, 238, .22);
  pointer-events: none;
}
.deste__golge--1 { top: calc(1.2rem - .085em); }
.deste__golge--2 { top: calc(1.2rem - .17em); -webkit-text-stroke-color: rgba(242, 242, 238, .1); }

.kahraman__orta h1 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
.kahraman__orta p { margin-top: .9rem; max-width: 34em; font-size: 1.05rem; color: var(--soluk); }

.kahraman__alt {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 2.2rem;
  padding-bottom: 2.2rem;
}
.kahraman__spec { display: grid; gap: .55rem; color: var(--soluk); }
.kahraman__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* Sertifika şeridi: hairline üst-alt, gümüş yüzeyde değil zeminde */
.kahraman__serit { border-top: 1px solid var(--cizgi); }
.kahraman__serit .kap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2.2rem;
  justify-content: center;
  padding-block: .95rem;
  color: var(--soluk);
}

/* ---------- 9. Bölüm iskeleti ---------- */
.bolum { padding-block: clamp(4rem, 8.5vw, 6.5rem); }
.bolum--cizgili { border-top: 1px solid var(--cizgi); }
.bolum-bas { margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.bolum-bas .govde-genis { margin-top: 1rem; }

/* Bölüm no: kızıl küçük blok + mono */
.bolum-no {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 1.1rem;
}
.bolum-no::before { content: ""; width: 10px; height: 3px; background: var(--kizil); }

/* ---------- 10. Panel / kıyas ---------- */
.panel-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.panel-2 > div { background: var(--yuzey); padding: clamp(1.3rem, 2.8vw, 2rem); }
.panel-2 > div.panel--zayif { background: var(--zemin); }
.panel-2 h3 { margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }

.satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .62rem 0;
  font-size: .95rem;
  color: var(--soluk);
}
.satir + .satir { border-top: 1px solid var(--cizgi); }
.satir b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin);
  text-align: right;
  white-space: nowrap;
}
.satir b.kritik { color: var(--kizil); }

/* ---------- 11. Büyük rakamlar (gümüş) ---------- */
.statlar { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem); }
.stat__deger {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7.5vw, 6rem);
  line-height: .9;
  letter-spacing: .01em;
}
.stat__ad { margin-top: .6rem; color: var(--soluk); }

/* ---------- 12. Spec tablosu ---------- */
.tablo-sarici { overflow-x: auto; border: 1px solid var(--cizgi); }
.spec { width: 100%; min-width: 680px; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: .8rem 1.05rem; border-bottom: 1px solid var(--cizgi); }
.spec thead th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soluk);
  background: var(--yuzey);
  white-space: nowrap;
}
.spec tbody td {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--metin);
}
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody td.metin { font-family: var(--font-govde); font-size: .92rem; letter-spacing: 0; white-space: normal; color: var(--soluk); }
.spec tr.one-cikan td { background: var(--yuzey); }
.spec tr.one-cikan td:first-child { box-shadow: inset 3px 0 0 var(--kizil); }
.spec-not {
  margin-top: .8rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--soluk);
}

/* ---------- 13. Belge satırları ---------- */
.belgeler { border-top: 1px solid var(--cizgi); }
.belge-satir {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--cizgi);
}
.belge-satir__ad {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
  line-height: 1;
}
.belge-satir__aciklama { color: var(--soluk); font-size: .95rem; }
.belge-satir__not { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--metin); }

/* ---------- 14. Kızıl bant (numune / CTA) ---------- */
.bant {
  background: var(--kizil);
  color: var(--metin);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.bant .kap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.bant h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.bant p { max-width: 34em; margin-top: .7rem; color: rgba(242, 242, 238, .85); }
.bant .dugme--ikincil { border-color: rgba(242, 242, 238, .6); }
.bant .dugme--ikincil:hover { border-color: var(--metin); background: var(--metin); color: var(--kizil); }
.bant a:hover { color: inherit; }

/* ---------- 15. Form ---------- */
.form-kutu { max-width: 800px; display: grid; gap: 1.15rem; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-alan { display: grid; gap: .4rem; }
.form-alan label {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soluk);
}
.form-alan input, .form-alan select, .form-alan textarea {
  font: 400 .98rem var(--font-govde);
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 0;
  padding: .78rem .9rem;
  width: 100%;
}
.form-alan textarea { min-height: 7.2rem; resize: vertical; }
.form-alan input:focus-visible, .form-alan select:focus-visible, .form-alan textarea:focus-visible {
  outline: none;
  border-color: var(--kizil);
  box-shadow: 0 0 0 2px rgba(232, 68, 46, .25);
}
.form-kutu .dugme { justify-self: start; margin-top: .3rem; }
.form-mesaj {
  display: none;
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  padding: 1.5rem 1.6rem;
}
.form-mesaj.gorunur-yap { display: block; }
.form-mesaj__baslik { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; line-height: 1; }
.form-mesaj p { margin-top: .7rem; color: var(--soluk); }

/* ---------- 16. Footer ---------- */
.alt { border-top: 1px solid var(--cizgi); padding-block: clamp(3rem, 6vw, 4.5rem) 1.6rem; }
.alt__marka {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  text-transform: uppercase;
  line-height: .9;
}
.alt__izgara { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-top: 2.4rem; }
.alt__slogan { color: var(--soluk); max-width: 24em; font-size: .95rem; }
.alt h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: .9rem;
}
.alt ul { display: grid; gap: .5rem; font-size: .95rem; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--kizil); }
.alt__dip {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  color: var(--soluk);
}

/* ---------- 17. Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .gizli { opacity: 1; }
  .cekis__yaprak { transform: none; }
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 900px) {
  .menu-dugme { display: block; }
  .ust nav {
    position: fixed;
    top: 4rem;
    left: 0; right: 0; bottom: 0;
    background: var(--zemin);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem 3rem;
  }
  .ust nav.acik { display: flex; }
  .ust nav > a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.2rem;
    text-transform: uppercase;
    color: var(--metin);
  }
  .dil { order: 9; }

  .panel-2 { grid-template-columns: 1fr; }
  .belge-satir { grid-template-columns: 1fr; gap: .5rem; }
  .alt__izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .kahraman__alt { flex-direction: column; align-items: stretch; }
  .kahraman__cta { justify-content: flex-start; }
  .kahraman__cta .dugme { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .form-satir { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr; }
}