/* ==========================================================================
   Mimarlıkta Rahatsız Edici Sorular — ana stil dosyası
   --------------------------------------------------------------------------
   Sitenin TEK stil dosyası. Sayfaların kendi <style> bloğu olmasın; bir şey
   birden fazla sayfada görünüyorsa buraya yazılır. (Önceki projede her sayfa
   kendi CSS'ini taşıdığı için aynı başlık 5 farklı boyuta, aynı :root 12
   farklı varyanta dağılmıştı — bu dosya tam olarak onu önlemek için var.)

   Sayfaya özel, gerçekten tek seferlik bir kural gerekirse: o sayfanın
   <body>'sine bir sınıf ver (ör. <body class="page-fanzin">) ve kuralı yine
   burada, o sınıfın altında yaz. Böylece tüm stil tek yerde kalır.

   Bölümler:
     1. Token'lar (:root)      — renk, tipografi, boşluk. Tek doğruluk kaynağı.
     2. Reset
     3. Tipografi
     4. Yerleşim (layout)
     5. Bileşenler
     6. Yardımcılar
   ========================================================================== */


/* 0. FONT ================================================================= */
/* Archivo — SIL Open Font License, ücretsiz. Lisans metni font/OFL.txt.

   Google'dan bağlamak yerine repoda duruyor: ziyaretçinin tarayıcısı üçüncü
   bir sunucuya istek atmıyor (video kapağındaki kararın aynısı), sayfa bir
   DNS+bağlantı turu az yapıyor, Google'ın servisine bağımlı kalmıyoruz.

   Değişken font: tek dosya 100-900 ağırlık ve %62-125 genişlik taşıyor.
   Ayrı "Expanded" dosyası indirmeye gerek yok — font-stretch ile açılıyor.

   İKİ alt küme birden yükleniyor, Türkçe için şart:
     latin      → ı ç ö ü  (U+0131, U+00E7, U+00F6, U+00FC)
     latin-ext  → ş ğ İ    (U+015F, U+011F, U+0130)
   Sadece latin alsak ş/ğ/İ yedek fonta düşer ve satır ortasında harf
   değişir. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;      /* font inene kadar metin görünür kalsın */
  src: url('font/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('font/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. TOKEN'LAR ============================================================ */
/* Bir değeri değiştirmek istersen SADECE burayı değiştir. Aşağıdaki hiçbir
   kuralda çıplak renk/boyut yazmıyoruz — hepsi var() ile buraya bağlı.
   Renkler ve font şu an nötr yer tutucu; yön belli olunca buradan değişecek. */
:root {
  color-scheme: light;

  /* Renk — beyaz zemin, siyah metin. Şemalardaki gibi.
     Bir değeri değiştirmek istersen SADECE burayı değiştir; aşağıdaki
     kuralların hiçbirinde çıplak renk yok, hepsi var() ile buraya bağlı. */
  --bg:           #ffffff;
  --bg-alt:       #f2f1ee;   /* tablo şeridi, kart zemini */
  --text:         #0c0c0c;
  --text-soft:    #4a4a4a;
  --text-faint:   #9b9792;
  /* Vurgu rengi. Turuncu (#d8431c) beyaz üstünde 4.43 kontrast veriyordu,
     WCAG AA eşiği 4.5 — yani metin olarak kullanıldığı yerlerde sınırın
     altındaydı. Bu koyu kırmızı 7.23 veriyor.
     Lacivert isteyen olursa tek satır: #1f3a8a (10.34). */
  --accent:       #a8202a;
  --border:       rgba(12, 12, 12, 0.18);

  /* Tipografi — şemadaki dil grotesk sans. Tek aile kullanıyoruz; ayrım
     puntodan, ağırlıktan ve harf aralığından geliyor, font değiştirerek değil. */
  --font:         'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:      var(--font);

  /* TİP ÖLÇEĞİ — BEŞ ROL, BAŞKA PUNTO YOK.
     Aşağıdaki hiçbir kuralda çıplak font-size yazmıyor; hepsi bu beşinden
     birini kullanıyor. Yeni bir punto gerektiğini düşünüyorsan muhtemelen
     var olan bir rolün yerine geçmeli — yenisini eklemek ölçeği çözer.

  Adlar HTML'in başlık hiyerarşisine bağlı; <h1>/<h2>/<h3> yazınca doğru
  punto kendiliğinden geliyor, ayrıca sınıf vermek gerekmiyor. Ekran
  okuyucu ve arama motoru da sayfayı bu hiyerarşiden okuyor — punto ile
  anlam aynı yerden geliyor, ikisi ayrı düşmüyor.

       h1      ana başlık. Sayfada BİR tane olur.
       h2      alt başlık — tema satırları, bölüm başlıkları
       h3      sub başlık — "about", "latest", kart başlığı
       govde   düz yazı — paragraflar, form, bağlantı listeleri
       author  künye satırı: yazar, konuşmacı, tarih
       ref     referans: tablo, kenar notu, etiket, resim altı

     clamp(en küçük, ekrana göre, en büyük): dar ekranda küçülür, geniş
     ekranda bir yerde durur. Ortadaki vw değeri geçişin hızı. */
  --tip-h1:       clamp(2.2rem, 6.5vw, 4.4rem);
  --tip-h2:       clamp(1.5rem, 3.4vw, 2.4rem);
  --tip-h3:       1rem;
  --tip-govde:    0.9rem;
  --tip-author:   0.8rem;
  --tip-ref:      0.72rem;

  /* Şemadaki başlıklar neredeyse üst üste biniyor — 0.95 onu veriyor */
  --leading-tight: 0.95;
  --leading-body:  1.7;
  --tracking-wide: 0.12em;

  /* Boşluk */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     6rem;

  /* Yerleşim */
  /* SAYFA KOLONU — şemadaki ölçü. Sitedeki HER kutu (nav, main, footer,
     kayıt sayfası) bu genişlikte ve ortalanmış. Sayfa tarayıcı genişliğine
     yayılmıyor. Tek yerden değişir: burası. */
  --wrap-width:   1180px;
  --wrap-wide:    var(--wrap-width);
  /* Şemadaki iki kolonlu ritim: solda dar etiket/not kolonu, sağda içerik.
     Sayfadaki hemen her bölüm bu ızgarayı kullanıyor. */
  --etiket-kolon: 15rem;
  /* Kutuların iç yan boşluğu. px — em DEĞİL: em kendi punto'suna göre
     çözülür, nav (13.6px punto) ile kart ızgarası (16px punto) farklı
     yerden başlardı. Sol kenar çizgisi tek olsun diye sabit. */
  --wrap-ic:      0px;   /* geniş formatta kutu çerçevesi yok, iç boşluk da yok */
  --nav-height:   56px;
}


/* 2. RESET ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--tip-govde);
  line-height: var(--leading-body);
  min-height: 100vh;
}

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

a { color: inherit; }


/* 3. TİPOGRAFİ ============================================================ */
h1, h2, h3, h4 { font-weight: 700; line-height: var(--leading-tight); }

/* Başlıklar şemadaki gibi küçük harf ve sıkı. text-transform KULLANMIYORUZ:
   büyük harfe çevirmek Türkçe'de i/İ sorunu çıkarır ve ekran okuyucu
   bazı motorlarda harf harf okur. Metin neyse o basılıyor. */
/* Rol ile etiket aynı yerden geliyor: <h1> yazınca ana başlık puntosu
   kendiliğinden geliyor, ayrı bir sınıf gerekmiyor. */
h1 {
  font-size: var(--tip-h1);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
  font-stretch: 115%;          /* Archivo Expanded — değişken eksenden */
}
h2 { font-size: var(--tip-h2); margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: var(--tip-h3); margin: var(--space-md) 0 var(--space-xs); }

p { margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

/* Başlık altı açıklama — her içerik türünde aynı görünsün diye tek kural */
.subtitle {
  font-size: var(--tip-govde);
  font-style: italic;
  color: var(--text-soft);
  margin-bottom: var(--space-md);
}

/* Üst etiket: "BULUŞMA", "FANZİN", "YAZI" gibi tür göstergesi */
.label {
  font-family: var(--font-ui);
  font-size: var(--tip-ref);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Tarih, yazar, yer gibi künye satırı */
.meta-line {
  font-family: var(--font-ui);
  font-size: var(--tip-author);
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-sm);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--text-soft);
}

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-lg) 0; }


/* 4. YERLEŞİM ============================================================= */
.wrap {
  /* .kutu ile BİREBİR aynı genişlik kuralı — kayıt sayfasındaki metin,
     nav ve footer kutularıyla aynı hizada dursun diye. */
  width: calc(100% - 2 * var(--space-sm));
  max-width: var(--wrap-width);
  margin: 0 auto;
  /* Üst nav artık sticky (fixed değil), o yüzden nav yüksekliği kadar
     boşluk bırakmaya gerek yok. Yan boşluk .kutu'nunkiyle aynı: metin
     kolonu nav'daki yazılarla tam hizalanıyor. */
  padding: var(--space-md) var(--wrap-ic) var(--space-xl);
}

.wrap--wide { max-width: var(--wrap-wide); }

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
  letter-spacing: 0;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.2s;
}

/* Nav'ın orta grubu: şemadaki gibi aralıklı bağlantılar */
.site-nav .nav-orta { display: flex; gap: var(--space-md); }
.site-nav a:hover,
.site-nav a.active { opacity: 1; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* 5. BİLEŞENLER =========================================================== */
/* İçerik listesi — buluşma/yazı/fanzin hepsi aynı kartı kullanır, türü
   .label ile ayrılır. Excel'in yapısı netleşince buraya alan eklenecek. */
.entry-list { list-style: none; }

.entry {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.entry a { text-decoration: none; display: block; }
.entry a:hover .entry-title { color: var(--accent); }

.entry-title {
  font-size: var(--tip-h3);
  line-height: var(--leading-tight);
  transition: color 0.2s;
}

.entry-excerpt {
  color: var(--text-soft);
  font-size: var(--tip-govde);
  margin-top: var(--space-xs);
}

/* Etiketler (Excel'deki keyword/tag sütunlarından gelecek) */
.tags {
  list-style: none;      /* <ul> olduğu için madde işareti çıkıyordu */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.tag {
  font-family: var(--font-ui);
  font-size: var(--tip-ref);
  letter-spacing: 0.06em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 0.2em 0.6em;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.tag:hover { color: var(--text); border-color: var(--text); }


/* 6. YARDIMCILAR ========================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* MOBİL =================================================================== */
@media (max-width: 640px) {
  :root {
    --space-lg: 2.5rem;
    --space-xl: 3.5rem;
  }
  .site-nav { padding: 0 var(--space-sm); }
}


/* BASKI =================================================================== */
@media print {
  .site-nav, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}


/* 7. TEKİL SAYFA ========================================================== */
/* ÖLÇÜ STANDARDI — 128 sayfanın hepsi için geçerli:

   Sayfadaki her şey varsayılan olarak OKUMA KOLONUNA hizalanır. Kolon
   genişliği tek yerden gelir: --wrap-width (680px) eksi .wrap'ın yan boşluğu
   = ~616px. Video, metin, etiketler, künye — hepsi aynı sol ve sağ kenarda
   başlar ve biter. Videoyu sayfa genişliğine yaymak metni 616px'de bırakıp
   oynatıcıyı 1100px yapıyordu; ikisi aynı sayfada tutarsız duruyordu.

   Bilerek taşan tek şey galeri şeridi (.gallery): farklı oranlı fotoğrafları
   yan yana gösterebilmek için sayfa genişliğini kullanıyor. Onu da kolona
   çekmek istersen .gallery'deki taşma satırlarını (width / margin-left /
   padding-inline) silmek yeterli. */
/* 128 kayıt sayfası (62 etkinlik + 66 üretim) bu bileşenleri kullanır.
   Sayfaların kendi <style>'ı YOK; bir şey değişecekse burada değişir. */

.post-head {
  margin-bottom: var(--space-md);
}

/* Tür göstergesi birden fazla olabilir: bir etkinlik hem "Konferans" hem
   "Atölye" olabiliyor. Excel'de virgüllü geldiği için liste olarak basıyoruz. */
.post-head .label { margin-bottom: var(--space-xs); }

/* Künye: tarih · şehir · mekan. Tarih aralık da olabilir (19–20 Eylül 2026). */
.post-head .meta-line { margin-bottom: 0; }


/* GALERİ ------------------------------------------------------------------
   Yatay kaydırmalı şerit. Fotoğraflar aynı YÜKSEKLİKTE, genişlikleri kendi
   oranlarına göre. Böylece afiş, bez, fanzin kapağı gibi farklı oranlı
   görseller kırpılmadan yan yana durur.

   Şerit okuma kolonundan taşıp sayfa genişliğini kullanır: metin dar kalsın,
   görsel geniş olsun. Sağdaki fotoğrafın kenarı görünür — kaydırılacağı
   böylece belli olur, ayrıca ok düğmesi gerekmez. */

.gallery {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin: var(--space-md) 0;

  /* okuma kolonundan taşır */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--gallery-gutter);
  scroll-padding-inline: var(--gallery-gutter);

  scrollbar-width: thin;
}

:root {
  /* Şeridin kenar boşluğu — metin kolonuyla hizalansın diye hesaplanıyor */
  --gallery-gutter: max(var(--wrap-ic),
                        calc(50vw - var(--wrap-width) / 2 + var(--wrap-ic)));
}

.gallery figure {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 90vw;
}

.gallery img {
  height: min(65vh, 560px);
  width: auto;
  max-width: none;          /* reset'teki max-width:100% şeridi bozardı */
  object-fit: contain;
}

.gallery figcaption {
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
  color: var(--text-faint);
  margin-top: var(--space-xs);
  max-width: 42ch;
}

/* Tek fotoğraf varsa şerit gibi davranmasına gerek yok */
.gallery:has(figure:only-child) { scroll-snap-type: none; }


/* GÖVDE METNİ -------------------------------------------------------------
   yazi.md'den gelen kısım. Sayfanın okunan yeri burası. */


.prose > *:first-child { margin-top: 0; }
.prose h2 { margin-top: var(--space-lg); }
.prose h3 { margin-top: var(--space-md); }

.prose ul, .prose ol { margin: 0 0 var(--space-sm) 1.4em; }
.prose li { margin-bottom: 0.3em; }

.prose a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--accent); }

/* Metin henüz girilmemiş kayıtlar için. yazi.md doldurulunca kaybolur. */
.prose-bos {
  border: 1px dashed var(--border);
  padding: var(--space-sm);
  color: var(--text-faint);
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
}


/* ÜRETİM KÜNYESİ ----------------------------------------------------------
   Sadece üretim sayfalarında: yazar, dil, dosya türü. Etkinlikte bunlar yok. */

.credits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-sm);
  margin: var(--space-md) 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
}

.credits dt, .credits dd { font-size: var(--tip-author); }
.credits dt {
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--tip-ref);
  padding-top: 0.15em;
}

.credits dd { margin: 0; }

/* Dış kaynağa (Drive vb.) giden bağlantı. Dışarı çıktığını belli etsin. */
.source-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.5em 1em;
  transition: border-color 0.2s, color 0.2s;
}
.source-link:hover { border-color: var(--accent); color: var(--accent); }
.source-link::after { content: " ↗"; color: var(--text-faint); }


/* SAYFA ALTI GEZİNME ------------------------------------------------------ */

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
}

.post-nav a { text-decoration: none; color: var(--text-soft); max-width: 45%; }
.post-nav a:hover { color: var(--accent); }
.post-nav .yon {
  display: block;
  font-size: var(--tip-ref);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2em;
}
.post-nav .sonraki { text-align: right; margin-left: auto; }


/* MOBİL — tekil sayfa ----------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gallery-gutter: var(--space-sm); }
  .gallery img { height: 50vh; }
  .credits { grid-template-columns: 1fr; gap: 0.1em; }
  .credits dd { margin-bottom: var(--space-xs); }
}


/* VİDEO -------------------------------------------------------------------
   Sadece videosu olan sayfalar bu işaretlemeyi yazar; olmayan hiç yazmaz.
   CSS'in sayfada video olup olmadığını bilmesi gerekmez — kural sadece var
   olan elemana uygulanır.

   Oynatıcı sayfa açılırken YÜKLENMEZ. Önce yerel kapak görseli durur;
   ziyaretçi tıklayınca iframe yerine geçer. Üç faydası var:
     1. Sayfa hızlı açılır (YouTube'un ~1 MB script'i hiç inmez).
     2. Tıklanana kadar YouTube'a hiçbir istek gitmez — izleme yok.
     3. Gömülü oynatıcı herhangi bir sebeple engellenirse sayfa boş kalmaz;
        altındaki "YouTube'da izle" bağlantısı her koşulda çalışır. */

.video {
  width: 100%;                 /* kapsayıcı ne kadarsa o — metinle aynı hiza */
  margin: var(--space-md) 0 var(--space-xs);
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}

.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Kapak — tıklanabilir olduğu için <button>, <div> değil: klavyeyle de
   seçilebilsin, ekran okuyucu düğme olduğunu söylesin. */
.video-ac {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.video-ac img {
  width: 100%;
  height: 100%;
  max-width: none;          /* reset'teki max-width:100% burada işe yaramaz */
  object-fit: cover;
  display: block;
}

/* Oynat düğmesi: daire + üçgen. Görsel süs olduğu için aria-hidden. */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: background 0.2s, transform 0.2s;
}

.video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 24px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  transform: translateX(4px);   /* üçgenin görsel ağırlığı sola kaçıyor */
}

.video-ac:hover .video-play,
.video-ac:focus-visible .video-play {
  background: var(--accent);
  transform: scale(1.06);
}

.video-ac:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Videonun altındaki bağlantı satırı */
.video-not {
  font-family: var(--font-ui);
  font-size: var(--tip-govde);
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}
.video-not a { color: var(--text-soft); text-decoration: none; }
.video-not a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .video-play { width: 58px; height: 58px; }
  .video-play::after { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
}


/* 8. ŞEMA BİLEŞENLERİ ===================================================== */
/* Gönderdiğin üçüncü sayfadaki yerleşimden çıkarıldı: solda dar etiket
   kolonu, sağda geniş içerik; büyük sıkı başlık; iki tonlu tema listesi. */

/* İKİ KOLON --------------------------------------------------------------
   Sol: küçük kalın etiket ("about", "2024 Ankara bağımsız kolektif").
   Sağ: asıl içerik. Dar ekranda alt alta iner. */

.iki-kolon {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.iki-kolon > .etiket-kolon {
  font-weight: 700;
  font-size: var(--tip-h3);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* İkincil, daha küçük ve soluk paragraf — şemada ana metnin altındaki blok */
.metin-ikincil {
  font-size: var(--tip-govde);
  color: var(--text-soft);
  margin-top: var(--space-sm);
}


/* TEMA LİSTESİ -----------------------------------------------------------
   Şemadaki "01 ARCHITECTURE & PEDAGOGY" satırları: solda numara, sonra
   iki tonlu başlık, sağda ok. Beş tema için.

   İki ton <span> ile değil, iç içe iki elemanla yapılıyor: başlığın tamamı
   okunabilir metin olarak duruyor, renk sadece görsel vurgu. */

/* Kolonun tamamını kullanır — yanında açıklama kolonu yok, satırlar
   sıkışmasın diye. */
.tema-liste { list-style: none; padding: 0 var(--wrap-ic) var(--space-lg);
              border-top: 1px solid var(--border); }

.tema-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.tema-satir a {
  display: contents;
  text-decoration: none;
}

.tema-no {
  font-size: var(--tip-h2);
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tema-ad {
  font-size: var(--tip-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-stretch: 115%;                /* başlıkla aynı genişlikte dursun */
  color: var(--text-faint);          /* ikinci ton */
  transition: color 0.2s;
}

/* Başlığın ilk parçası tam kontrastta — şemadaki "ARCHI" / "TECTURE &" ayrımı */
.tema-ad b { font-weight: inherit; color: var(--text); }

.tema-ok {
  font-size: var(--tip-h3);
  color: var(--text-faint);
  transition: transform 0.2s, color 0.2s;
}

.tema-satir:hover .tema-ad,
.tema-satir:hover .tema-ad b { color: var(--accent); }
.tema-satir:hover .tema-ok { color: var(--accent); transform: translateX(6px); }


/* AÇILIŞ BAŞLIĞI ---------------------------------------------------------
   Ana sayfadaki büyük başlık. Çok sıkı, küçük harf, iki satır. */

.hero h1 { margin-bottom: var(--space-md); }

/* Şemadaki en küçük, en soluk kenar notu */
.kenar-not {
  font-size: var(--tip-ref);
  line-height: 1.4;
  color: var(--text-faint);
  max-width: 20rem;
}


@media (max-width: 760px) {
  .iki-kolon { grid-template-columns: 1fr; gap: var(--space-xs); }
  .tema-satir { grid-template-columns: auto minmax(0, 1fr) auto; }
}


/* 9. ANA SAYFA DEVAMI ===================================================== */
/* Gönderdiğin 4-5-6. şemalardan: soru tablosu, dikey yazılı network listesi,
   latest/next kart ızgarası, geniş footer. */

/* AÇILIŞ FOTOĞRAFI — okuma kolonunu aşıp sayfa genişliğini kullanır */
.tam-gorsel {
  width: min(var(--wrap-wide), 100vw - 2 * var(--space-md));
  margin: var(--space-lg) 0 var(--space-lg) 50%;
  transform: translateX(-50%);
}
.tam-gorsel img { width: 100%; height: auto; }


/* SORU TABLOSU -----------------------------------------------------------
   Üç kolon: tema · soru · numara. Şemada çok küçük punto ve sık satırlar.

   Gerçek <table> kullanıyoruz, <div> ızgarası değil: bu veri tablo; ekran
   okuyucu "tema sütunu, soru sütunu" diye gezebilsin, kolon başlıkları
   satırlarla ilişkilensin. Dar ekranda yatay kaydırılır — tabloyu kırıp
   alt alta dizmek 35 satırda okunmaz hale getiriyor. */

.tablo-kaydir {
  overflow-x: auto;
  margin: 0 0 var(--space-lg);
  padding: 0 var(--wrap-ic);   /* sayfanın sol kenar çizgisiyle aynı hizada */
}

.soru-tablo {
  width: 100%;
  min-width: 22rem;   /* çok dar telefonda sütunlar ezilmesin */
  border-collapse: collapse;
  font-size: var(--tip-ref);
  line-height: 1.5;
}

.soru-tablo th {
  text-align: left;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.soru-tablo td {
  padding: 0.45em var(--space-sm) 0.45em 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(12, 12, 12, 0.07);
}

.soru-tablo tbody tr:nth-child(odd) { background: var(--bg-alt); }

/* Şemada üzerine gelinen satır tamamen siyah — hangi satırı okuduğun
   32 satırlık bir tabloda kaybolmasın diye. */
.soru-tablo tbody tr:hover,
.soru-tablo tbody tr:hover .s-tema,
.soru-tablo tbody tr:hover .s-no { background: var(--text); color: var(--bg); }

.soru-tablo .s-tema { color: var(--text-soft); white-space: nowrap;
                      width: 1%; }   /* kendi içeriği kadar, kalanı soruya */
.soru-tablo .s-no   { text-align: right; color: var(--text-faint);
                      font-variant-numeric: tabular-nums; white-space: nowrap; }


/* LATEST / NEXT KART IZGARASI --------------------------------------------
   Şemadaki mozaik: değişken genişlikte görseller, altında başlık ve ok. */

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-sm);
  list-style: none;
  margin-bottom: var(--space-lg);
}

.kart a { text-decoration: none; display: block; }

.kart-gorsel {
  aspect-ratio: 3 / 2;
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.kart-alt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--tip-govde);
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: var(--space-xs);
}
.kart-alt .ok { color: var(--text-faint); transition: transform 0.2s, color 0.2s; }
.kart:hover .kart-alt .ok { color: var(--accent); transform: translateX(5px); }
.kart:hover .kart-alt { color: var(--accent); }

.kart-tarih { font-weight: 400; color: var(--text-faint); font-size: var(--tip-ref); }


/* GENİŞ FOOTER -----------------------------------------------------------
   Şemadaki alt blok: solda büyük çağrılar, sağda bağlantı kolonları. */

.footer-genis {
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
  padding: var(--space-lg) 0 var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
}

.footer-cagri a {
  display: block;
  font-size: var(--tip-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-bottom: var(--space-xs);
  transition: color 0.2s;
}
.footer-cagri a:hover { color: var(--accent); }
.footer-cagri .ok { color: var(--text-faint); }

.footer-kolonlar { display: flex; gap: var(--space-lg); }
.footer-kolonlar ul { list-style: none; }
.footer-kolonlar li { margin-bottom: 0.35em; }
.footer-kolonlar a {
  font-size: var(--tip-govde);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.footer-kolonlar a:hover { opacity: 1; color: var(--accent); }

.footer-alt {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: var(--space-sm) 0;
  font-size: var(--tip-ref);
  color: var(--text-faint);
}
.footer-alt a { color: inherit; text-decoration: none; }
.footer-alt a:hover { color: var(--text); }


@media (max-width: 760px) {
  .footer-genis { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-kolonlar { gap: var(--space-md); flex-wrap: wrap; }
  .network-ad { max-height: 15rem; font-size: var(--tip-govde); }
}


/* SİTE İKONU — nav'ın sol üstündeki blok soru işareti -------------------- */
.site-ikon {
  display: block;
  height: 22px;
  width: auto;
  color: var(--text);     /* satır içi SVG fill="currentColor" bunu alır */
}
.site-nav a:has(.site-ikon) { opacity: 1; }


/* 10. ÇERÇEVELİ IZGARA DİLİ ============================================== */
/* Activity şemasından: nav ve footer hücrelere bölünmüş bir tablo gibi.
   Aktif bağlantı siyah ve altı çizili, diğerleri gri. Satır araları çizgili. */

/* Şemadaki sayfa: geniş ve ortalanmış. Çerçeve YOK — önceki dar formatta
   her bölüm kutu içindeydi, bu formatta ayrım boşlukla yapılıyor. */
.kutu {
  width: calc(100% - 2 * var(--space-md));
  max-width: var(--wrap-width);
  margin-inline: auto;
  background: var(--bg);
}

/* ÜST NAV ----------------------------------------------------------------
   Tek satır: solda işaret, ortada sekmeler, sağda menü. Şemadaki gibi küçük
   harf — metnin kendisi küçük yazılı, text-transform kullanmıyoruz (Türkçe
   i/İ eşlemesini bozuyor). */
.ust {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  /* Altta --space-xl (6rem) vardı: nav bandı gereksiz yere yüksekti ve
     sayfa açılışta boş görünüyordu. İçerik aradaki boşlukla değil,
     bloklarla ayrılıyor. */
  padding: var(--space-sm) 0 var(--space-md);
  background: var(--bg);
}

.ust-ikon { display: inline-flex; }
.ust-ikon .site-ikon { height: 20px; }

.ust-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-left: calc(var(--etiket-kolon) - 20px - var(--space-md));
}
.ust-nav a {
  font-size: var(--tip-govde);
  text-decoration: none;
  color: var(--text-soft);
  transition: color 0.15s;
}
.ust-nav a:hover { color: var(--accent); }
.ust-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

/* MENÜ — <details>, JavaScript yok. Klavyeyle açılıyor, Esc ile kapanıyor,
   sayfa JS olmadan da tam çalışıyor. */
.menu { position: relative; }
.menu > summary {
  font-size: var(--tip-govde);
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--text); }
.menu[open] > summary { color: var(--text); font-weight: 700; }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-sm));
  min-width: 14rem;
  background: var(--bg);
  border: 1px solid var(--text);
  padding: var(--space-sm);
  display: grid;
  gap: 0.35em;
  z-index: 200;
}
.menu-panel a {
  font-size: var(--tip-govde);
  text-decoration: none;
  color: var(--text-soft);
}
.menu-panel a:hover { color: var(--accent); }
.menu-panel hr { margin: var(--space-xs) 0; }


/* GÖRÜNÜMLER -------------------------------------------------------------
   Nav'daki sekmeye basınca ana akış gizleniyor ve o sekmenin tam görünümü
   TEK BAŞINA açılıyor. Yeni sayfa yüklenmiyor.

   :target ile, JavaScript'siz. Kazancı: adres çubuğunda #activity kalıyor,
   geri düğmesi ana akışa döndürüyor, sekmenin bağlantısı paylaşılabiliyor.

   SAYFA NİYE KAYMIYOR: görünüm açıldığında ana akış display:none oluyor,
   yani hedef zaten sayfanın en üstünde kalıyor. Tarayıcının kaydıracak
   yeri olmuyor. */
.gorunum { display: none; }
.gorunum:target { display: block; }
body:has(.gorunum:target) .ana-akis { display: none; }

/* :has() yoksa ana akış gizlenemez; görünüm yine açılır, altında akış
   kalır. Sekme hissi gider, içerik kaybolmaz. */
@supports not selector(:has(*)) {
  .gorunum:target { display: block; }
}

.gorunum-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--text);
}
.gorunum-ust h1 { margin: 0; font-size: var(--tip-h2); font-stretch: 115%; }

.gorunum-kapat {
  font-size: var(--tip-govde);
  text-decoration: none;
  color: var(--text-soft);
  white-space: nowrap;
}
.gorunum-kapat:hover { color: var(--accent); }

/* "Buraya görsel gelecek" notu — taslak sunumunda eksiğin görünmesi için.
   Görsel gelince bu satır tamamen kalkar. */
.gorsel-notu {
  border: 1px dashed var(--border);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  font-size: var(--tip-ref);
  color: var(--text-faint);
}

/* Ana akış içindeki çapalar (#about, #sorular) için: yapışkan nav hedefi
   örtmesin. */
main > .ana-akis > section,
main > .ana-akis > .blok { scroll-margin-top: var(--space-lg); }

/* Bölüm içi başlık — şemadaki "2024 yılında sorduğumuz rahatsız edici
   sorular" satırı. */
.bolum-baslik {
  margin: 0 0 var(--space-sm);
  font-size: var(--tip-h2);
  font-weight: 700;
  font-stretch: 100%;
  margin-bottom: var(--space-sm);
}

/* Sol kolondaki küçük bağlantı listesi ("latest", "next" altındakiler) */
.yan-liste { list-style: none; display: grid; gap: 0.15em; margin-top: var(--space-xs); }
.yan-liste a {
  font-size: var(--tip-ref);
  color: var(--text-faint);
  text-decoration: none;
  line-height: 1.4;
}
.yan-liste a:hover { color: var(--accent); }


/* BLOK — şemanın temel ritmi: solda etiket/not, sağda içerik ------------- */
.blok {
  display: grid;
  grid-template-columns: var(--etiket-kolon) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-xl);
}

/* Sol kolondaki küçük kalın etiket: "about", "latest", "themes" */
.blok-etiket {
  margin: 0;                 /* taban h2 boşluğu sol kolondaki etiketi kaydırıyordu */
  font-size: var(--tip-h3);
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: var(--leading-tight);
}

/* Sol kolondaki soluk açıklama notu */
.blok-not {
  font-size: var(--tip-ref);
  line-height: 1.5;
  color: var(--text-faint);
  margin-top: var(--space-xs);
}

/* Şemadaki büyük açılış başlığı — sayfanın en iri elemanı */
.hero-baslik {
  font-size: var(--tip-h1);
  font-stretch: 125%;
  letter-spacing: -0.035em;
  line-height: 0.92;
  /* Fotoğrafla arası açıktı, isim sayfanın tepesinde tek başına kalıyordu */
  margin-bottom: var(--space-sm);
}

/* Açılış fotoğrafı. Yüksekliği sınırlı: 16:9'a kırpılıyor ve ekranın
   yarısını geçmiyor — yoksa tek başına bir ekran dolduruyor ve altındaki
   metne inmek için kaydırmak gerekiyor. */
.hero-foto { width: 100%; margin-bottom: var(--space-md); }
.hero-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 46vh;
  object-fit: cover;
  display: block;
}


/* GİRİŞ METNİ ------------------------------------------------------------ */
.giris {
  padding: var(--space-sm) var(--wrap-ic) var(--space-md);
  font-size: var(--tip-govde);
  line-height: 1.45;
}

/* Şemada giriş metniyle ilk bölüm başlığı arasında ince bir çizgi var.
   Sadece bölüm başlığı giriş metnini izlediğinde çiziliyor. */
.giris + .bolum-ust {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}


/* BÖLÜM BAŞLIĞI + "LOAD MORE" -------------------------------------------- */
.bolum-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--wrap-ic) var(--space-sm);
}
.bolum-ust h2 {
  margin: 0;
  font-size: var(--tip-h2);
  font-stretch: 100%;
}
.daha {
  font-size: var(--tip-ref);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.daha:hover { color: var(--accent); }


/* KART IZGARALARI -------------------------------------------------------- */
/* Üç yoğunluk: iri (öne çıkan), orta, sık. Şemadaki üç bölüm bunlar. */
/* Sütun sayısı SABİT, auto-fill değil. Kolon 620px'e sabitlendiği için
   auto-fill artık şemadaki 3 / 3 / 6 düzenini vermiyordu. */
.izgara      { display: grid; gap: var(--space-sm); list-style: none;
               padding: 0 var(--wrap-ic); margin-bottom: var(--space-lg); }
.izgara--iri { grid-template-columns: repeat(3, 1fr); }
.izgara--orta{ grid-template-columns: repeat(3, 1fr); }
.izgara--sik { grid-template-columns: repeat(6, 1fr); gap: var(--space-xs); }

/* Sık ızgarada kart küçücük — başlık 4 satır yerine 3 satırda kesilsin */
.izgara--sik .oge-metin { -webkit-line-clamp: 3; }

.oge a { text-decoration: none; display: block; height: 100%; }

/* Görsel kutusu — fotoğraf yoksa da ızgara bozulmasın diye gri zemin durur */
.oge-gorsel {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 0.5em;
}
.oge-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Fotoğrafı olmayan kayıtta kutunun ortasındaki soluk işaret */
.oge-gorsel .site-ikon { height: 26px; color: var(--border); }

.oge-tarih { font-size: var(--tip-ref); font-weight: 700; font-variant-numeric: tabular-nums; }
.oge-tip   { font-size: var(--tip-ref); font-weight: 700;
             display: flex; justify-content: space-between; gap: 0.5em;
             border-top: 1px solid var(--border); padding-top: 0.35em; }
.oge-ok    { color: var(--text-faint); transition: transform 0.2s; }
.oge:hover .oge-ok { transform: translateX(4px); color: var(--accent); }
.oge-metin {
  font-size: var(--tip-ref);
  line-height: 1.35;
  overflow-wrap: anywhere;   /* sık ızgarada sütun ~90px; uzun kelime taşmasın */
  color: var(--text-soft);
  margin-top: 0.2em;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* uzun başlıklar kartı şişirmesin */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oge:hover .oge-tip { color: var(--accent); }


/* AKORDEON --------------------------------------------------------------- */
/* <details>/<summary> kullanıyoruz: açılıp kapanması tarayıcının kendi işi,
   JavaScript gerekmiyor ve klavyeyle de açılıyor. */
.akordeon { padding: 0 var(--wrap-ic); margin-bottom: var(--space-lg); }

/* Şemadaki iki kolonlu hâli: solda bölüm başlığı, sağda açılır satırlar. */
.akordeon-blok {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding: 0 var(--wrap-ic) var(--space-lg);
}
.akordeon-blok h2 {
  margin: 0;
  font-size: var(--tip-h2);
  font-stretch: 100%;
}
.akordeon-blok .akordeon { padding: 0; margin: 0; }

.akordeon details { border-bottom: 1px solid var(--border); }
.akordeon details:first-child { border-top: 1px solid var(--border); }

.akordeon summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.7em 0;
  cursor: pointer;
  font-size: var(--tip-govde);
  font-weight: 700;
  list-style: none;
}
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after { content: "+"; font-weight: 400; font-size: 1.2em; color: var(--text-soft); }
.akordeon details[open] summary::after { content: "–"; }
.akordeon summary:hover { color: var(--accent); }

.akordeon-govde { padding: 0 0 var(--wrap-ic); }
.akordeon-govde ul { list-style: none; }
.akordeon-govde li { padding: 0.25em 0; font-size: var(--tip-govde); }
.akordeon-govde a { text-decoration: none; color: var(--text-soft); }
.akordeon-govde a:hover { color: var(--accent); }


/* ALT — footer ---------------------------------------------------------
   Şemada: solda iri çağrı (sağa yaslı), sağda küçük bağlantı kolonu,
   en altta ince bir çizgi ve iki uçta künye. */
.alt {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md) var(--space-xs);
  background: var(--bg-alt);   /* şemada footer zemini gri */
}

.alt-gorsel img { width: 100%; height: auto; display: block; }

.alt-ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.alt-cagri { text-align: right; }
.alt-cagri a {
  display: block;
  font-size: var(--tip-h2);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-bottom: 0.15em;
}
.alt-cagri a:hover { color: var(--accent); }

.alt-baglar { display: grid; gap: 0.3em; align-content: start; }
.alt-baglar a {
  font-size: var(--tip-govde);
  color: var(--text-soft);
  text-decoration: none;
}
.alt-baglar a:hover { color: var(--accent); }
.alt-baglar .bosluk { height: var(--space-sm); }
.alt-baglar .site-ikon { height: 20px; margin-top: var(--space-sm); }

.alt-kunye {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--space-xs);
  font-size: var(--tip-ref);
  color: var(--text-faint);
}
.alt-kunye a { text-decoration: none; }

.alt-metin {
  font-size: var(--tip-ref);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

/* Kayıt sayfasında gövde metni: kolon 1180px, okunacak metin o kadar geniş
   olmaz. Satır uzunluğu ~75 karakterde kalsın. */
.prose { max-width: 46rem; }


@media (max-width: 760px) {
  .ust-satir { grid-template-columns: repeat(2, 1fr); }
  .ust-ad { grid-column: 1 / 3; text-align: left; }
  .ust-genis { grid-column: 1 / 2; }
  .alt-satir--6 { grid-template-columns: repeat(3, 1fr); }
  .izgara--iri,
  .izgara--orta { grid-template-columns: repeat(2, 1fr); }
  .izgara--sik  { grid-template-columns: repeat(3, 1fr); }
  .akordeon-blok { grid-template-columns: 1fr; }
  /* Geniş format tek kolona iner: etiket kolonu içeriğin üstüne geçer */
  .blok { grid-template-columns: 1fr; gap: var(--space-sm);
          margin-bottom: var(--space-lg); }
  .ust { grid-template-columns: auto 1fr auto; gap: var(--space-sm);
         padding-bottom: var(--space-lg); }
  .ust-nav { padding-left: 0; gap: var(--space-sm); }
  .alt-ust { grid-template-columns: 1fr; gap: var(--space-md); }
  .alt-cagri { text-align: left; }
}


/* ÇEVİRİ NOTU — İngilizce sayfada henüz çevrilmemiş Türkçe bloğun üstünde.
   Ziyaretçi neden Türkçe metin gördüğünü bilsin diye; sessizce Türkçe
   bırakmak ya da makine çevirisi basmak yerine açıkça söylüyoruz. */
.ceviri-notu {
  font-size: var(--tip-ref);
  line-height: 1.45;
  color: var(--text-soft);
  border-left: 2px solid var(--accent);
  padding: 0.2em 0 0.2em 0.7em;
  margin: 0 var(--wrap-ic) var(--space-xs);
}


/* 11. MANİFESTO ========================================================== */
/* Şemadaki ritim: çerçeveli başlık çubuğu → küçük gri paragraf → büyük
   vurgu paragrafı → küçük paragraf. Punto farkı hiyerarşiyi taşıyor. */

.m-bolum { border-top: 1px solid var(--border); }

.m-baslik {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em var(--wrap-ic);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.m-baslik h2 {
  margin: 0;
  font-size: var(--tip-h3);
  font-stretch: 100%;
  letter-spacing: -0.01em;
}
.m-baslik .site-ikon { height: 15px; flex: 0 0 auto; }

.m-govde { padding: var(--space-sm) var(--wrap-ic) var(--space-md); }

/* Küçük, soluk — bağlam cümlesi */
.m-kucuk {
  font-size: var(--tip-ref);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 80ch;
  margin-bottom: var(--space-sm);
}

/* Büyük, koyu — manifestonun asıl iddiası */
.m-buyuk {
  font-size: var(--tip-h3);
  font-weight: 700;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 62ch;
  margin-bottom: var(--space-sm);
}

/* Açılış ve kapanış — en büyük punto, çerçevesiz */
.m-vurgu {
  font-size: var(--tip-h2);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: var(--space-md) var(--wrap-ic);
  max-width: 70ch;
}

/* Bölümler arası tam genişlik görsel */
.m-serit { background: var(--bg-alt); aspect-ratio: 6 / 1; }
.m-serit img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* 12. İLETİŞİM =========================================================== */

.iletisim-baslik {
  font-size: var(--tip-h2);
  margin-bottom: 0;
}

.iletisim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  border-top: 1px solid var(--border);
}
.iletisim > * { padding: var(--space-md) 0; }
.iletisim-form { border-left: 1px solid var(--border); }

.iletisim-bilgi dl { display: grid; grid-template-columns: auto; gap: 0; }
.iletisim-bilgi dt {
  font-size: var(--tip-ref);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: var(--space-sm);
}
.iletisim-bilgi dd { margin: 0; font-size: var(--tip-govde); font-weight: 700; }
.iletisim-bilgi a { text-decoration: underline; text-underline-offset: 0.2em; }
.iletisim-bilgi a:hover { color: var(--accent); }

.iletisim-form h2 { margin-top: 0; font-size: var(--tip-h3); }

/* Form — etiketler input'u SARIYOR, ayrı for/id eşleşmesi gerekmiyor;
   tıklanınca alan odaklanır, ekran okuyucu doğru okur. */
.iletisim-form label {
  display: block;
  font-size: var(--tip-ref);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

.iletisim-form input[type="text"],
.iletisim-form input[type="email"],
.iletisim-form select,
.iletisim-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35em;
  padding: 0.5em 0;
  font: inherit;
  font-size: var(--tip-govde);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.iletisim-form textarea { resize: vertical; }
.iletisim-form :focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.form-onay {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tip-govde);
  color: var(--text-soft);
}
.form-onay input { margin-top: 0.25em; }

.iletisim-form button {
  font: inherit;
  font-size: var(--tip-govde);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: 0;
  padding: 0.8em 2em;
  cursor: pointer;
  transition: background 0.2s;
}
.iletisim-form button:hover { background: var(--accent); }

.form-not {
  font-size: var(--tip-ref);
  color: var(--text-faint);
  margin-top: var(--space-sm);
}

@media (max-width: 760px) {
  .iletisim { grid-template-columns: 1fr; }
  .iletisim-form { border-left: 0; border-top: 1px solid var(--border); }
  .form-satir { grid-template-columns: 1fr; gap: 0; }
  .m-serit { aspect-ratio: 3 / 1; }
}


/* 13. ANA SAYFA ========================================================== */

/* Numaralı bölüm etiketi:  01 | THEMES  — şemada bölümleri ayıran çubuk */
.bolum-etiket {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: 0.45em var(--wrap-ic);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: var(--tip-ref);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
}
.bolum-etiket .no { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Açılış paragrafı — giriş'ten daha iri, manifestoya köprü */
.acilis {
  padding: var(--space-sm) var(--wrap-ic) var(--space-md);
  font-size: var(--tip-govde);
  font-weight: 700;
  line-height: 1.4;
  max-width: 88ch;
}

/* Tam genişlik şerit görsel */
.serit { background: var(--bg-alt); }
.serit img { width: 100%; height: auto; display: block; }

/* Sol dar kolon + sağ geniş alan (şemadaki "Nasıl çalışıyoruz" bloğu) */
.yan-yana {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  border-top: 1px solid var(--border);
}
.yan-yana > * { padding: var(--space-sm) var(--wrap-ic); }
.yan-yana > :last-child { border-left: 1px solid var(--border); }
.yan-kucuk { font-size: var(--tip-ref); line-height: 1.45; color: var(--text-soft); }
.yan-kucuk h3 { font-size: var(--tip-govde); margin: 0 0 var(--space-xs); }

/* AĞ LİSTESİ — yatay: solda küçük ülke, sağda kalın kurum adı ------------ */
/* Ağ listesi. Önce adlar 90° döndürülmüş dikey yazıydı ve liste yatay
   kaydırılıyordu — sağdaki kurumlar ekran dışında kalıyordu. Artık
   sarmalayan düz bir ızgara: kaydırma yok, hepsi tek bakışta. */
.ag-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.15em var(--space-md);
  padding: var(--space-sm) var(--wrap-ic) var(--space-md);
}

.ag-satir {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: 0.1em 0;
}
.ag-ulke {
  font-size: var(--tip-ref);
  color: var(--text-faint);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ag-ad {
  font-size: var(--tip-govde);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .yan-yana { grid-template-columns: 1fr; }
  .yan-yana > :last-child,
  .ag-satir { grid-template-columns: 1fr; gap: 0; padding: 0.35em 0; }
  .ag-ulke { text-align: left; }
}
