/* YOY Mimarlık — üretilen belge sayfaları (proje ve hizmet sayfaları)
   css/style.css içindeki tasarım değişkenlerini kullanır; onun ardından yüklenir. */

/* ---------- Üst bar: sayfalarda sabit değil, akışın içinde ---------- */
.belge-ustbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1.2rem, 3vw, 3rem);
  border-bottom: 1px solid var(--renk-cizgi);
}
.belge-ustbar .marka { display: flex; align-items: center; gap: 0.7rem; }
.belge-ustbar .marka img { width: 58px; height: auto; }
.belge-ustbar .marka small {
  font-size: 0.6rem; letter-spacing: 0.14em; color: var(--renk-soluk);
  text-transform: uppercase;
}
.belge-ustbar nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.5vw, 2rem); flex-wrap: wrap; }
.belge-ustbar nav a {
  font-size: var(--text-kucuk); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renk-soluk); padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color var(--sure-hizli), border-color var(--sure-hizli);
}
.belge-ustbar nav a:hover, .belge-ustbar nav a:focus-visible,
.belge-ustbar nav a[aria-current] { color: var(--renk-metin); border-color: var(--renk-metin); }

/* ---------- Belge gövdesi ---------- */
.belge { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem) 5rem; }
.kirinti {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.6rem 0 2.4rem;
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--renk-soluk);
}
.kirinti a { border-bottom: 1px solid var(--renk-cizgi); }
.kirinti a:hover { color: var(--renk-metin); border-color: var(--renk-metin); }
.kirinti span[aria-current] { color: var(--renk-metin); }

.belge-bas { max-width: 62rem; }
.belge-etiket {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--renk-bronz);
  margin-bottom: 0.9rem;
}
.belge h1 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem); line-height: 1.02;
  margin-bottom: 1.2rem; overflow-wrap: break-word;
}
.belge-ozet {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem); line-height: 1.62;
  max-width: 58ch; color: var(--renk-metin);
}

/* ---------- Künye tablosu ---------- */
.kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; margin: 2.6rem 0 0; background: var(--renk-cizgi);
  border: 1px solid var(--renk-cizgi);
}
.kunye > div { background: var(--renk-zemin); padding: 0.9rem 1rem; }
.kunye dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--renk-soluk); margin-bottom: 0.35rem;
}
.kunye dd { font-size: 0.92rem; line-height: 1.4; }

/* ---------- Bölümler ---------- */
.belge section { margin-top: clamp(3.2rem, 2rem + 4vw, 6rem); }
.belge h2 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1;
  padding-top: 0.9rem; border-top: 3px solid var(--renk-metin);
  margin-bottom: 1.4rem;
}
.belge h3 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.15;
  margin-bottom: 0.6rem;
}
.belge p { max-width: 68ch; margin-bottom: 1rem; }
.belge p:last-child { margin-bottom: 0; }
.belge section > p + p { margin-top: 0; }

/* ---------- Süreç aşamaları ---------- */
.asama {
  border-top: 1px solid var(--renk-cizgi); padding-top: 1.6rem; margin-top: 2.4rem;
}
.asama:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.asama-no {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; color: var(--renk-bronz); display: block; margin-bottom: 0.3rem;
}
.dayanak {
  margin-top: 1rem; padding-top: 0.7rem; border-top: 1px dotted var(--renk-cizgi);
  font-size: 0.82rem; color: var(--renk-soluk); max-width: 68ch;
}
.dayanak b {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--renk-bronz);
  margin-right: 0.5rem;
}

/* ---------- Görsel ızgarası ---------- */
.gorsel-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem; margin-top: 1.6rem;
}
.gorsel-izgara figure { margin: 0; }
.gorsel-izgara img {
  width: 100%; height: auto; background: #fff;
  border: 1px solid var(--renk-cizgi);
}
.gorsel-izgara figcaption {
  margin-top: 0.5rem; font-size: 0.72rem; line-height: 1.4; color: var(--renk-soluk);
}
.kapak-gorsel { margin: 2.6rem 0 0; }
.kapak-gorsel img { width: 100%; height: auto; border: 1px solid var(--renk-cizgi); background: #fff; }
.kapak-gorsel figcaption {
  margin-top: 0.6rem; font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--renk-soluk);
}

/* ---------- Sayılarla proje ---------- */
.veri-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.4rem; margin-top: 1.4rem;
}
.veri-izgara .sayi {
  font-family: "YOY Architect Ek", "YOY Architect", cursive;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; color: var(--renk-bronz);
}
.veri-izgara .birim {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--renk-soluk);
  margin: 0.35rem 0 0.2rem;
}
.veri-izgara .not { font-size: 0.82rem; line-height: 1.4; }

/* ---------- Pafta listeleri ---------- */
.pafta-grubu { margin-top: 1.8rem; }
.pafta-grubu h3 { margin-bottom: 0.3rem; }
.pafta-grubu > p { color: var(--renk-soluk); font-size: 0.88rem; margin-bottom: 0.7rem; }
.pafta-listesi {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pafta-listesi li {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--renk-metin);
  border: 1px solid var(--renk-cizgi); padding: 0.35rem 0.6rem;
}

/* ---------- Ekip ---------- */
.ekip-listesi { list-style: none; display: grid; gap: 0.7rem; }
.ekip-listesi b { font-weight: 600; }
.ekip-listesi span { color: var(--renk-soluk); font-size: 0.88rem; }

/* ---------- Çağrı kutusu ---------- */
.cagri {
  margin-top: clamp(3.2rem, 2rem + 4vw, 6rem);
  border: 1px solid var(--renk-cizgi); padding: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  background: color-mix(in srgb, var(--renk-bronz) 4%, transparent);
}
.cagri h2 { border-top: 0; padding-top: 0; margin-bottom: 0.7rem; }
.cagri .dugmeler { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; }
.dugme {
  display: inline-block; padding: 0.75em 1.5em;
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--renk-metin); color: var(--renk-metin);
  transition: background var(--sure-hizli), color var(--sure-hizli);
}
.dugme:hover, .dugme:focus-visible { background: var(--renk-metin); color: var(--renk-zemin); }
.dugme.dolu { background: var(--renk-metin); color: var(--renk-zemin); }
.dugme.dolu:hover, .dugme.dolu:focus-visible { background: var(--renk-bronz); border-color: var(--renk-bronz); }

/* ---------- İlgili sayfa bağlantıları ---------- */
.ilgili-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px; background: var(--renk-cizgi); border: 1px solid var(--renk-cizgi); margin-top: 1.4rem;
}
.ilgili-izgara a {
  background: var(--renk-zemin); padding: 1.1rem 1.2rem;
  transition: background var(--sure-hizli);
}
.ilgili-izgara a:hover, .ilgili-izgara a:focus-visible { background: #fff; }
.ilgili-izgara .yer {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--renk-soluk); display: block; margin-bottom: 0.3rem;
}
.ilgili-izgara .baslik { font-size: 0.95rem; line-height: 1.35; }

/* ---------- Sık sorulanlar ---------- */
.sss { margin-top: 1.4rem; }
.sss > div { border-top: 1px solid var(--renk-cizgi); padding: 1.2rem 0; }
.sss h3 { font-family: var(--font-govde); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.5rem; }

/* ---------- Alt bilgi ---------- */
.belge-altbilgi {
  border-top: 1px solid var(--renk-cizgi);
  padding: 2.6rem clamp(1.2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem;
  max-width: 78rem; margin: 0 auto;
}
.belge-altbilgi h2 {
  border-top: 0; padding-top: 0; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renk-soluk); margin-bottom: 0.7rem;
}
.belge-altbilgi p, .belge-altbilgi li { font-size: 0.88rem; line-height: 1.6; }
.belge-altbilgi ul { list-style: none; }
.belge-altbilgi a { border-bottom: 1px solid var(--renk-cizgi); }
.belge-altbilgi a:hover { border-color: var(--renk-metin); }
.belge-altbilgi .imza {
  grid-column: 1 / -1; border-top: 1px solid var(--renk-cizgi); padding-top: 1.2rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--renk-soluk);
}

@media (max-width: 640px) {
  .belge-ustbar { gap: 0.9rem; }
  .belge-ustbar nav { gap: 0.9rem; }
  .kunye { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ---------- Kuşatılmış yığma şemaları ----------
   Sitenin çizgi dili: koyu kontur, şeffaf iç, yuvarlatılmış uçlar. */
.sema-kutu {
  margin: 1.8rem 0 0;
  border: 1px solid var(--renk-cizgi);
  padding: clamp(1rem, 0.6rem + 1.4vw, 2rem) clamp(0.8rem, 0.5rem + 1vw, 1.6rem);
  background: color-mix(in srgb, var(--renk-bronz) 3%, transparent);
}
.sema-kutu svg { width: 100%; height: auto; display: block; overflow: visible; }
.sema-kutu figcaption {
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--renk-cizgi);
  font-size: 0.78rem; line-height: 1.5; color: var(--renk-soluk);
}

.sema {
  fill: none;
  stroke: var(--renk-metin);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sema .s-ince { stroke-width: 1.5; opacity: 0.55; }
.sema .s-kesikli { stroke-dasharray: 7 7; }
.sema .s-olcu { stroke-width: 1.4; opacity: 0.45; }
/* Kuşatma öğeleri (hatıllar) bronz vurguyla ayrılır */
.sema .s-vurgu { stroke: var(--renk-bronz); stroke-width: 4.5; }
.sema .s-hayir-cizgi { stroke: var(--renk-bronz); stroke-width: 4; opacity: 0.9; }
/* Boyuna donatı kesitleri — dolu daire */
.sema .s-nokta circle { fill: var(--renk-metin); stroke: none; }

.sema .s-yazi {
  fill: var(--renk-metin); stroke: none;
  font-family: var(--font-mono); font-size: 15px;
  letter-spacing: 0.06em; text-anchor: middle;
}
.sema .s-yazi.s-kucuk { font-size: 13px; fill: var(--renk-soluk); }
.sema .s-yazi.s-no { font-size: 13px; fill: var(--renk-bronz); }
/* Veri grafiklerinde satır etiketleri sağa, değerler sola hizalanır */
.sema .s-yazi.s-sag { text-anchor: end; }
.sema .s-yazi.s-sol { text-anchor: start; }

.sema .s-evet, .sema .s-hayir { stroke-width: 2.6; }
.sema .s-evet { stroke: #4a6b3a; }
.sema .s-hayir { stroke: #9a4a32; }

/* Dar ekranda şema küçülerek okunmaz hâle gelmesin: kendi içinde yatay kayar */
@media (max-width: 640px) {
  .sema-kutu { overflow-x: auto; padding-bottom: 0.6rem; }
  .sema-kutu svg { min-width: 520px; }
  /* Geniş viewBox'lı şemalar daha çok yer ister ki yazıları okunur kalsın */
  .sema-kutu svg.sema-genis { min-width: 780px; }
  .sema-kutu figcaption { position: sticky; left: 0; }
  .sema { stroke-width: 3.4; }
  .sema .s-vurgu { stroke-width: 5; }
  .sema .s-yazi { font-size: 17px; }
  .sema .s-yazi.s-kucuk { font-size: 15px; }
}

/* Kontrol listesi — sayfanın sonundaki "sık yapılan hatalar" */
.kontrol-listesi { list-style: none; margin-top: 1.4rem; display: grid; gap: 1px;
  background: var(--renk-cizgi); border: 1px solid var(--renk-cizgi); }
.kontrol-listesi li { background: var(--renk-zemin); padding: 1rem 1.2rem; }
.kontrol-listesi b { display: block; margin-bottom: 0.25rem; }
.kontrol-listesi span { color: var(--renk-soluk); font-size: 0.88rem; line-height: 1.55; }

/* Uyarı kutusu — mühendislik sorumluluğu */
.uyari {
  margin-top: 1.8rem; padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--renk-bronz);
  background: color-mix(in srgb, var(--renk-bronz) 6%, transparent);
}
.uyari p { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.uyari b { color: var(--renk-bronz); }

/* Altbilgi haritası — açık zeminli sayfa altbilgisinde ince görünsün */
.belge-altbilgi .altbilgi-harita { opacity: 0.45; color: var(--renk-metin); }
.belge-altbilgi .altbilgi-harita:hover,
.belge-altbilgi .altbilgi-harita:focus-visible { opacity: 0.95; }

/* ---------- 404 sayfası: kendini çizen cephe ----------
   Ölçülü çizim mantığı: çizgiler sırayla, kalemle çizilir gibi belirir. */
.hata-cizim { margin: 0 0 1.8rem; max-width: 420px; color: var(--renk-metin); }
.hata-cizim svg { display: block; width: 100%; height: auto; overflow: visible; }
.hata-cizim .hc-c {
  /* pathLength="1" ile normalize: her çizgi uzunluğundan bağımsız aynı sürede çizilir.
     Süre bilerek uzun: sayfa hızlı yüklendiğinde çizim gözden kaçmasın. */
  stroke-dasharray: 1; stroke-dashoffset: 1;
  opacity: 0;
  animation: hcCiz 1.5s ease-in-out forwards, hcBelir 0.35s linear forwards;
  animation-delay: calc(0.35s + var(--sira) * 0.22s);
}
@keyframes hcCiz { to { stroke-dashoffset: 0; } }
@keyframes hcBelir { to { opacity: 1; } }

/* Kalem ucu hissi: çizim biterken hafif koyulaşma */
.hata-cizim svg { animation: hcKoyul 3.6s ease-out forwards; }
@keyframes hcKoyul { from { opacity: 0.75; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hata-cizim .hc-c { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .hata-cizim svg { animation: none; opacity: 1; }
}