/* ============================================================
   SUPERCUT — site4 · "TEKNİK FÖY (PAFTA)" kimliği
   ------------------------------------------------------------
   Site bir mühendislik çizim paftası gibi kurulur:
   - Milimetrik kağıt zemin (ince grid, iki kademe)
   - Her sayfa tek "pafta": 1px mürekkep çerçeve + üstte ANTET
     (title block) — imza öğe budur, her sayfada tekrar eder
   - Ölçü çizgisi (ok uçlu, mono etiketli) bölüm ayracıdır
   - SVG çizimler cetvel çizgisi gibi "çizilerek" görünür olur
   - Renk disiplini: mürekkep laciverti + ONAY YEŞİLİ (kıt:
     onay hücresi, birincil CTA, kritik değer). Fotoğraf YOK.
   ============================================================ */

/* ---------- 1. Değişkenler ---------- */
:root {
  --kagit:       #FAFAF7;                   /* pafta kağıdı */
  --grid-ince:   rgba(16, 35, 58, .055);    /* 8px minör grid */
  --grid-kalin:  rgba(16, 35, 58, .10);     /* 48px majör grid */
  --murekkep:    #10233A;                   /* çini mürekkebi laciverti */
  --murekkep-2:  #45586C;                   /* ikincil metin */
  --soluk:       #8C99A7;                   /* pasif / çizim yardımcı */
  --onay:        #0E7C4A;                   /* onay yeşili — kıt kullan */
  --onay-zemin:  #EAF3EE;                   /* onay hücre zemini */
  --beyaz:       #FFFFFF;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-govde:   'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --cizgi: 1px solid var(--murekkep);       /* pafta çizgisi — hep 1px */
}

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

html { scroll-behavior: smooth; }

body {
  font: 400 1rem/1.65 var(--font-govde);
  color: var(--murekkep);
  /* Milimetrik kağıt: iki kademe grid */
  background:
    linear-gradient(var(--grid-kalin) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-kalin) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(var(--grid-ince) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, var(--grid-ince) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--kagit);
  -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(--onay); }

ul { list-style: none; }

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

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

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

.gizli { opacity: 0; transition: opacity .5s ease; }
.gorunur-yap { opacity: 1; }

/* ---------- 4. Tipografi ---------- */
h1, h2, h3, .baslik {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.08rem; }

.govde-genis { font-size: 1.04rem; max-width: 58ch; color: var(--murekkep-2); }
.govde-genis b { color: var(--murekkep); }

/* ---------- 5. İMZA — ANTET (title block) ---------- */
/* Paftanın üst şeridi: hücreli tablo. Her sayfada tekrar eder;
   PAFTA no ve bölüm adı sayfaya göre değişir. */
.antet {
  display: grid;
  grid-template-columns: 2fr 1.4fr .6fr .8fr 1fr;
  border-bottom: var(--cizgi);
  background: var(--beyaz);
}
.antet > span {
  padding: .55rem .8rem .5rem;
  border-right: var(--cizgi);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.antet > span:last-child { border-right: 0; }
.antet__h { color: var(--murekkep); font-weight: 700; }
.antet__onay { background: var(--onay-zemin); color: var(--onay) !important; font-weight: 700; }

/* ---------- 6. PAFTA ÇERÇEVESİ ---------- */
/* Ana içerik tek pafta gibi çerçevelenir; köşe kırpma işaretleri. */
.pafta {
  position: relative;
  border: var(--cizgi);
  background: var(--kagit);
  margin-block: 1.4rem 2rem;
}
/* Köşe işaretleri (crop marks) */
.pafta::before, .pafta::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--murekkep);
  pointer-events: none;
}
.pafta::before { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.pafta::after  { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; }

.bolum { padding: clamp(2.6rem, 5vw, 4rem) clamp(1.1rem, 3.5vw, 2.6rem); }
.bolum + .bolum { border-top: 0; }

.bolum-bas { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.bolum-bas .goz { display: block; margin-bottom: .8rem; }
.bolum-bas h1, .bolum-bas h2 { margin-bottom: .8rem; }

/* Bölüm üstü göz satırı: çizim notu gibi */
.goz {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--onay);
}

/* ---------- 7. İMZA — ÖLÇÜ ÇİZGİSİ (bölüm ayracı) ---------- */
/* İki ucu ok uçlu ölçü çizgisi; ortasında mono etiket. */
.olcu {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-inline: clamp(1.1rem, 3.5vw, 2.6rem);
}
.olcu::before, .olcu::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--murekkep);
}
/* Ok uçları */
.olcu span { position: relative; }
.olcu span::before, .olcu span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-left: 1px solid var(--murekkep);
  border-bottom: 1px solid var(--murekkep);
}
.olcu span::before { left: calc(-.9rem - 14px); transform: translateY(-50%) rotate(45deg); }
.olcu span::after  { right: calc(-.9rem - 14px); transform: translateY(-50%) rotate(-135deg); }
.olcu span {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  white-space: nowrap;
}

/* ---------- 8. ÜST BAR ---------- */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kagit);
  border-bottom: var(--cizgi);
}
.ust__ic {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.marka {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .01em;
  text-decoration: none;
  line-height: 1;
}
/* Wordmark ölçü işaretli: SUPERCUT⌐ küçük çizim imi */
.marka i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 400;
  color: var(--onay);
  vertical-align: super;
  letter-spacing: 0;
  margin-left: .28em;
}
.marka:hover { color: inherit; }

.ust nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }
.ust nav > a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--murekkep-2);
  text-decoration: none;
  padding: .3rem 0;
}
.ust nav > a:hover { color: var(--murekkep); }
.ust nav > a.aktif {
  color: var(--murekkep);
  box-shadow: inset 0 -2px 0 var(--onay);
}

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

.menu-dugme {
  display: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  background: none;
  border: var(--cizgi);
  color: var(--murekkep);
  padding: .45rem .85rem;
  cursor: pointer;
}

/* ---------- 9. Düğmeler ---------- */
.dugme {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: .78rem 1.5rem .72rem;
  border: var(--cizgi);
  border-radius: 0;
  cursor: pointer;
  background: var(--beyaz);
  color: var(--murekkep);
  transition: background .2s, color .2s, border-color .2s;
}
.dugme:hover { color: var(--murekkep); }
.dugme--birincil {
  background: var(--onay);
  border-color: var(--onay);
  color: var(--beyaz);
}
.dugme--birincil:hover { background: #0B6A3F; color: var(--beyaz); }
.dugme--ikincil:hover { border-color: var(--onay); color: var(--onay); }
.ust nav .dugme { font-size: .8rem; padding: .5rem 1rem .45rem; }
/* Nav'daki genel bağlantı rengi CTA butonunu ezmesin */
.ust nav > a.dugme--birincil { color: var(--beyaz); }
.ust nav > a.dugme--birincil:hover { color: var(--beyaz); }

/* ---------- 10. HERO ---------- */
.kahraman {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  padding: clamp(2.6rem, 5vw, 4.2rem) clamp(1.1rem, 3.5vw, 2.6rem);
}
.kahraman__yazi h1 { margin-block: .8rem 1rem; }
.kahraman__yazi .govde-genis { margin-bottom: 1.6rem; }
.kahraman__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Hero altı veri şeridi: föy özet satırı */
.veri-serit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--cizgi);
  border-bottom: var(--cizgi);
  background: var(--beyaz);
}
.veri-serit > div {
  padding: .9rem 1rem .8rem;
  border-right: var(--cizgi);
}
.veri-serit > div:last-child { border-right: 0; }
.veri-serit b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .3rem;
}
.veri-serit span {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

/* ---------- 11. TEKNİK ÇİZİM (SVG) ---------- */
.cizim { width: 100%; height: auto; }
.cizim text {
  font-family: var(--font-mono);
  letter-spacing: .08em;
}
/* Çizgiler cetvelle çizilir gibi görünür olur */
.cizim path, .cizim line, .cizim rect, .cizim circle, .cizim polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s ease .15s;
}
.gorunur-yap .cizim path, .gorunur-yap .cizim line, .gorunur-yap .cizim rect,
.gorunur-yap .cizim circle, .gorunur-yap .cizim polyline,
.cizim.gorunur-yap path, .cizim.gorunur-yap line, .cizim.gorunur-yap rect,
.cizim.gorunur-yap circle, .cizim.gorunur-yap polyline { stroke-dashoffset: 0; }

/* ---------- 12. FÖY TABLOSU ---------- */
/* Tam çizgili teknik tablo: her hücre çerçeveli. */
.foy-sarici { overflow-x: auto; }
.foy {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--beyaz);
}
.foy th, .foy td {
  border: var(--cizgi);
  padding: .6rem .85rem .55rem;
  text-align: left;
  font-size: .9rem;
}
.foy th {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--kagit);
  color: var(--murekkep-2);
  white-space: nowrap;
}
.foy td { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
.foy td.metin { font-family: var(--font-govde); font-size: .9rem; white-space: normal; letter-spacing: 0; }
.foy tr.one-cikan td { background: var(--onay-zemin); }
.foy tr.one-cikan td:first-child { font-weight: 700; color: var(--onay); }
.foy .onay-hucre { background: var(--onay-zemin); color: var(--onay); font-weight: 700; }
.foy-not {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--murekkep-2);
  margin-top: .7rem;
}

/* ---------- 13. NOT KUTUSU / ÇİZİM NOTU ---------- */
.not-kutu {
  border: var(--cizgi);
  background: var(--beyaz);
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--murekkep-2);
}
.not-kutu b { color: var(--murekkep); }

/* ---------- 14. AKIŞ (numaralı düğüm şeması) ---------- */
.akis { display: grid; grid-template-columns: repeat(5, 1fr); }
.akis__adim {
  position: relative;
  border: var(--cizgi);
  margin-left: -1px;              /* çizgiler üst üste binsin — tek çizgi görünür */
  background: var(--beyaz);
  padding: 1rem 1rem 1.15rem;
}
.akis__adim:first-child { margin-left: 0; }
.akis__no {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--onay);
  border: 1px solid var(--onay);
  padding: .1rem .45rem;
  margin-bottom: .6rem;
}
.akis__ad { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; margin-bottom: .4rem; }
.akis__metin { font-size: .82rem; line-height: 1.5; color: var(--murekkep-2); }

/* ---------- 15. İKİ SÜTUN PANEL ---------- */
.panel-2 { display: grid; grid-template-columns: 1fr 1fr; }
.panel-2 > div {
  border: var(--cizgi);
  background: var(--beyaz);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
}
.panel-2 > div + div { border-left: 0; }
.panel-2 h3 { margin-bottom: .9rem; }
.panel-2 .rozet {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .16rem .5rem;
  vertical-align: .28em;
  margin-left: .5rem;
}
.rozet--onay { background: var(--onay-zemin); color: var(--onay); }
.rozet--soluk { background: rgba(140, 153, 167, .16); color: var(--murekkep-2); }

/* Veri satırı: etiket + mono değer, noktalı cetvel dolgusu */
.satir {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem 0;
  font-size: .9rem;
}
.satir + .satir { border-top: 1px dotted var(--soluk); }
.satir i {
  flex: 1;
  border-bottom: 1px dotted var(--soluk);
  transform: translateY(-.3em);
}
.satir b { font-family: var(--font-mono); font-weight: 600; font-size: .8rem; white-space: nowrap; text-align: right; }
.satir b.deger-onay { color: var(--onay); }

/* ---------- 16. FORM — FÖY TALEP FORMU ---------- */
.form-foy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  background: var(--beyaz);
  border: var(--cizgi);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.form-alan { display: flex; flex-direction: column; gap: .35rem; }
.form-alan--genis { grid-column: 1 / -1; }
.form-alan label {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}
.form-foy input, .form-foy select, .form-foy textarea {
  width: 100%;
  font: 400 .95rem var(--font-govde);
  color: var(--murekkep);
  background: var(--kagit);
  border: 1px solid var(--soluk);
  border-radius: 0;
  padding: .6rem .7rem;
}
.form-foy textarea { min-height: 104px; resize: vertical; }
.form-foy input:focus-visible, .form-foy select:focus-visible, .form-foy textarea:focus-visible {
  outline: none;
  border-color: var(--onay);
  box-shadow: 0 0 0 2px rgba(14, 124, 74, .22);
}
.form-dugmeler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.form-mesaj {
  display: none;
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--onay);
  background: var(--onay-zemin);
  border: 1px solid var(--onay);
  padding: .8rem .9rem;
}
.form-mesaj.gorunur-yap { display: block; }

/* ---------- 17. FOOTER ---------- */
/* Alt antet: pafta altındaki imza bloğu gibi. */
.alt { margin-top: 2.5rem; border-top: var(--cizgi); background: var(--beyaz); }
.alt__izgara {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-block: clamp(2rem, 4vw, 3rem) 1.8rem;
}
.alt__slogan { font-size: .9rem; color: var(--murekkep-2); max-width: 30ch; margin-top: .7rem; }
.alt h4 {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: .7rem;
}
.alt ul li { margin-bottom: .4rem; }
.alt ul a { font-size: .9rem; text-decoration: none; }
.alt ul a:hover { text-decoration: underline; color: var(--onay); }
.alt__dip {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  border-top: var(--cizgi);
  padding-block: .9rem 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

/* ---------- 18. Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .gizli { opacity: 1; }
  .cizim path, .cizim line, .cizim rect, .cizim circle, .cizim polyline {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- 19. Responsive ---------- */
@media (max-width: 980px) {
  .akis { grid-template-columns: repeat(2, 1fr); }
  .akis__adim { margin-left: 0; margin-top: -1px; }
}

@media (max-width: 880px) {
  .menu-dugme { display: block; }
  .ust nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    background: var(--kagit);
    border-bottom: var(--cizgi);
    padding: 1rem 1.2rem 1.3rem;
  }
  .ust nav.acik { display: flex; }
  .ust nav > a { font-size: 1rem; padding: .4rem 0; }
  .ust nav .dugme { margin-top: .5rem; }

  .kahraman { grid-template-columns: 1fr; }
  .antet { grid-template-columns: 1fr 1fr; }
  .antet > span:nth-child(2n) { border-right: 0; }
  .antet > span { border-bottom: var(--cizgi); }
  .antet > span:nth-last-child(-n+2) { border-bottom: 0; }
  .veri-serit { grid-template-columns: 1fr 1fr; }
  .veri-serit > div:nth-child(2n) { border-right: 0; }
  .veri-serit > div:nth-child(-n+2) { border-bottom: var(--cizgi); }
  .panel-2 { grid-template-columns: 1fr; }
  .panel-2 > div + div { border-left: var(--cizgi); border-top: 0; }
  .alt__izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .akis { grid-template-columns: 1fr; }
  .form-foy { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr; gap: 1.4rem; }
  .kahraman__cta .dugme { flex: 1 1 auto; }

  /* Ölçü ayracı etiketi dar ekranda sarabilsin; ok uçları gizlenir */
  .olcu span { white-space: normal; text-align: center; font-size: .62rem; }
  .olcu span::before, .olcu span::after { display: none; }
}