@charset "UTF-8";
/* ÇESİAD — stil sistemi
   ----------------------------------------------------------------------------
   Renkler logodan sayılarak çıkarıldı, tahmin değil. Kırmızı yalnız eylem
   çağrısında kullanılır; geniş alanda mavi+kırmızı birlikte kullanılmaz, dernek
   sitesini afiş havasına sokuyor.

   Yazı tipi bilerek sistem yazı tipi: barındırılan bir yazı tipi (Google Fonts)
   ziyaretçinin IP'sini üçüncü tarafa taşır ve bu sitede KVKK metni var. Ölçek,
   satır aralığı ve harf aralığı elle ayarlandı; ağırlık farkı buradan geliyor.
   ------------------------------------------------------------------------- */
:root {
  --mavi: #0090D8;
  --mavi-koyu: #00688F;
  --mavi-cok-koyu: #0B3550;
  --mavi-gece: #071F30;
  --kirmizi: #D81818;
  --kirmizi-koyu: #A81212;
  --gri: #A8A8A8;
  --gri-acik: #F5F7F9;
  --gri-sicak: #EEF3F7;
  --metin: #14191E;
  --metin-soluk: #55606B;
  --cizgi: #E4E9EE;
  --beyaz: #fff;
  --olcu: 1140px;
  --olcu-ust: 1300px;
  --olcu-genis: 1400px;

  --golge-1: 0 1px 2px rgba(11,53,80,.06), 0 4px 12px rgba(11,53,80,.06);
  --golge-2: 0 2px 6px rgba(11,53,80,.08), 0 14px 40px rgba(11,53,80,.12);
  --golge-3: 0 30px 80px rgba(7,31,48,.28);
  --yay: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--metin); background: var(--beyaz);
  font: 400 17px/1.68 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
.kap { max-width: var(--olcu); margin: 0 auto; padding: 0 24px; }
a { color: var(--mavi-koyu); }

h1, h2, h3 { letter-spacing: -.022em; font-weight: 700; }
h1 { font-size: clamp(32px, 5.2vw, 54px); line-height: 1.08; margin: 0 0 18px; }
h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0 0 16px; }
h3 { font-size: 20px; margin: 28px 0 10px; }

/* Bölüm başlığının üstündeki küçük etiket: sayfayı bölümlere ayıran şey büyük
   punto değil, bu tanıtıcı satır. */
.etiket {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mavi-koyu);
}
.etiket::before { content: ""; width: 26px; height: 2px; background: var(--mavi);
                  border-radius: 2px; }

/* ==========================================================================
   Başlık çubuğu
   ========================================================================== */
header.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cizgi);
}
.ust .kap { max-width: var(--olcu-ust); display: flex; align-items: center; gap: 24px;
            min-height: 88px; flex-wrap: nowrap; }
.marka { display: flex; align-items: center; gap: 14px; text-decoration: none;
         color: inherit; flex-shrink: 0; }
.marka img { height: 66px; width: auto; transition: transform .35s var(--yay); }
.marka:hover img { transform: scale(1.05); }
.marka b { font-size: 25px; line-height: 1.1; letter-spacing: -.02em;
           color: var(--mavi-cok-koyu); }
.marka span { display: block; font-size: 12px; line-height: 1.35; max-width: 32ch;
              color: var(--metin-soluk); font-weight: 400; letter-spacing: 0;
              margin-top: 2px; }
nav.menu { margin-left: auto; display: flex; gap: 1px; flex-wrap: wrap;
           justify-content: flex-end; align-items: center; }
nav.menu a {
  /* Dokunma hedefi alt sınırı 44px: telefondan giren aday menüyü parmakla ıskalamamalı. */
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 11px; border-radius: 8px; text-decoration: none;
  color: var(--metin); font-weight: 500; font-size: 15px; white-space: nowrap;
  transition: color .18s;
}
nav.menu a:not(.vurgu)::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px;
  background: var(--mavi); border-radius: 2px; transform: scaleX(0);
  transition: transform .24s var(--yay);
}
nav.menu a:not(.vurgu):hover { color: var(--mavi-koyu); }
nav.menu a:not(.vurgu):hover::after { transform: scaleX(1); }
nav.menu a.vurgu {
  margin-left: 10px; background: var(--kirmizi); color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px rgba(216,24,24,.28); transition: transform .2s var(--yay),
              box-shadow .2s, background .2s;
}
nav.menu a.vurgu:hover { background: var(--kirmizi-koyu); color: #fff;
                         transform: translateY(-1px);
                         box-shadow: 0 10px 26px rgba(216,24,24,.34); }

/* ==========================================================================
   Kahraman bölümü — fotoğraf şeridi arka planda, yazı üstünde
   ========================================================================== */
.kahraman { position: relative; isolation: isolate; background: var(--mavi-gece); }
.kahraman .serit { position: absolute; inset: 0; z-index: 0; }
.kahraman .serit .kareler { height: 100%; }
.kahraman .serit figcaption { display: none; }   /* yazı kahramanın kendisinde */
/* Fotoğrafın üstündeki okunabilirlik katmanı: soldan sağa koyudan şeffafa. */
.kahraman::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,31,48,.94) 0%, rgba(7,31,48,.82) 42%,
                    rgba(7,31,48,.35) 72%, rgba(7,31,48,.18) 100%),
    linear-gradient(180deg, rgba(7,31,48,.45) 0%, transparent 30%);
}
/* ⛔ ÖLÇÜLEN KUSUR (10 Eyl 2026): şeridin ok ve nokta düğmeleri GÖRÜNÜYOR
   ama TIKLANAMIYORDU. Sebep yığınlama bağlamı: bu katman z-index:2 alıyor ve
   şeridin tamamını kaplıyor; `.serit` kendi z-index'ini almadığı için
   içindeki z-index:3 olan oklar bu katmanın üstüne çıkamıyor ve tıklama
   yazıya gidiyordu. `elementFromPoint` okun merkezinde "kahraman-yazi"
   döndürüyordu.

   Katman görsel olarak üstte kalıyor ama artık tıklama YUTMUYOR; yalnız
   kendi bağlantı ve düğmeleri tıklanabilir. */
.kahraman-yazi { position: relative; z-index: 2; padding: 104px 0 108px;
                 pointer-events: none; }
.kahraman-yazi a,
.kahraman-yazi button,
.kahraman-yazi .dugme { pointer-events: auto; }
.kahraman-yazi .etiket { color: #7FD0F5; }
.kahraman-yazi .etiket::before { background: #7FD0F5; }
.kahraman h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.kahraman p.giris {
  font-size: clamp(17px, 1.5vw, 20px); color: #D3E1EC; max-width: 56ch;
  margin: 0 0 32px; line-height: 1.6;
}
.kahraman p.giris strong { color: #fff; }
.kahraman-dugmeler { display: flex; gap: 14px; flex-wrap: wrap; }

/* Şerit denetimleri kahraman içinde sağ alta toplanıyor. */
.kahraman .serit .ok { z-index: 3; top: auto; bottom: 26px; transform: none;
                       width: 44px; height: 44px;
                       background: rgba(255,255,255,.14); color: #fff;
                       border: 1px solid rgba(255,255,255,.3);
                       backdrop-filter: blur(6px); }
.kahraman .serit .ok:hover { background: rgba(255,255,255,.3); }
.kahraman .serit .ok.geri { left: auto; right: 96px; }
.kahraman .serit .ok.ileri { right: 40px; }
.kahraman .serit .noktalar { z-index: 3; left: auto; right: 40px; bottom: 84px;
                             justify-content: flex-end; }
/* Çok kare seçildiğinde noktalar yerine sayaç: 166 nokta 4864 piksel
   ediyordu ve ilk noktalar ekranın dışında kalıyordu. */
.serit-sayac { position: absolute; z-index: 3; right: 40px; bottom: 84px; margin: 0;
               color: #fff; font-size: 14px; font-weight: 600;
               font-variant-numeric: tabular-nums;
               background: rgba(0,0,0,.32); backdrop-filter: blur(6px);
               border: 1px solid rgba(255,255,255,.26);
               border-radius: 999px; padding: 5px 13px; }
@media (max-width: 700px) {
  .serit-sayac { right: 16px; bottom: 74px; font-size: 13px; }
}

/* ==========================================================================
   KAHRAMAN — DAR EKRAN
   ==========================================================================
   ⛔ ÖLÇÜLEN KUSUR (10 Eyl 2026): masaüstünde fotoğraf arka planda, yazı
   üstünde duruyor ve YATAY bir gradient ikisini ayırıyor. 390 px'te böyle
   bir ayrım mümkün değil: yazı fotoğrafın tam üstüne biniyor, fotoğraftaki
   yazılarla karışıyordu. Ölçüm `yaziFotoUstunde: true` diyordu — ne yazı
   okunuyordu ne fotoğraf görünüyordu.

   Dar ekranda ikisi DİKEY ayrılıyor: fotoğraf kendi alanında üstte (tam
   görünür), yazı altında kendi zemininde. Üst üste binme yok.
   ========================================================================== */
@media (max-width: 899px) {
  .kahraman .serit { position: relative; inset: auto; }
  .kahraman .serit .kareler { height: clamp(260px, 46vh, 420px); }
  /* Yatay okunabilirlik katmanı burada anlamsız: yazı fotoğrafın üstünde
     değil, altında. Yerine fotoğrafın alt kenarını yazıya bağlayan ince
     bir geçiş. */
  .kahraman::after { display: none; }
  .kahraman .serit::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    z-index: 1; pointer-events: none;
    background: linear-gradient(transparent, var(--mavi-gece));
  }
  .kahraman-yazi { padding: 22px 0 34px; }
  .kahraman h1 { max-width: none; }
  .kahraman p.giris { max-width: none; }
  /* Denetimler tek sırada, fotoğrafın altındaki şeride: gösterge solda,
     oklar sağda. Eskiden noktalar fotoğrafın ORTASINA denk geliyordu ve
     karenin üstünde duruyordu. */
  .kahraman .serit .ok { bottom: 12px; width: 40px; height: 40px; }
  .kahraman .serit .ok.ileri { right: 12px; }
  .kahraman .serit .ok.geri { right: 60px; }
  .kahraman .serit .noktalar { left: 12px; right: auto; bottom: 12px;
                               justify-content: flex-start; height: 40px; }
  .serit-sayac { left: 12px; right: auto; bottom: 19px; }
}

/* Fotoğraf yoksa kahraman yine de dolu görünsün. */
.kahraman:not(:has(.serit)) { background:
  radial-gradient(1000px 460px at 12% 0%, #14486B 0%, var(--mavi-gece) 62%); }

/* ==========================================================================
   Sayı bandı — dernek ne kadar zamandır ne yapıyor
   ========================================================================== */
.sayilar { background: var(--mavi-cok-koyu); color: #fff; }
.sayilar .kap { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                padding-top: 0; padding-bottom: 0; }
.sayilar div { padding: 30px 20px 32px; position: relative; }
.sayilar div + div::before {
  content: ""; position: absolute; left: -1px; top: 26%; bottom: 26%; width: 1px;
  background: rgba(255,255,255,.18);
}
.sayilar b { display: block; font-size: clamp(30px, 3.6vw, 42px); line-height: 1;
             letter-spacing: -.03em; margin-bottom: 8px; }
.sayilar span { font-size: 14.5px; color: #A9C4D6; }

/* ==========================================================================
   Düğmeler
   ========================================================================== */
.dugme {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 14px 28px; border-radius: 10px; text-decoration: none;
  font-weight: 600; border: 0; cursor: pointer; font-size: 16.5px;
  transition: transform .2s var(--yay), box-shadow .2s, background .2s;
}
.dugme:hover { transform: translateY(-2px); }
.dugme-kirmizi { background: var(--kirmizi); color: #fff;
                 box-shadow: 0 10px 28px rgba(216,24,24,.32); }
.dugme-kirmizi:hover { background: var(--kirmizi-koyu);
                       box-shadow: 0 16px 38px rgba(216,24,24,.4); }
/* AA kontrast (9 Eyl ölçümü): beyaz yazı --mavi (#0090D8) üstünde 3,2:1 kalıyordu.
   --mavi-koyu ile 6,2:1. Marka mavisi vurgu ve çizgilerde aynen duruyor. */
.dugme-mavi { background: var(--mavi-koyu); color: #fff;
              box-shadow: 0 10px 28px rgba(0,144,216,.34); }
.dugme-mavi:hover { background: var(--mavi-cok-koyu);
                    box-shadow: 0 16px 38px rgba(0,144,216,.42); }
.dugme-hayalet { background: rgba(255,255,255,.1); color: #fff;
                 border: 1px solid rgba(255,255,255,.36); backdrop-filter: blur(6px); }
.dugme-hayalet:hover { background: rgba(255,255,255,.2); }

/* ==========================================================================
   Gövde ve bölümler
   ========================================================================== */
main { padding: 76px 0 90px; }
.bolum { padding: 0 0 68px; }
.bolum:last-child { padding-bottom: 0; }
.bolum-ust { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 26px;
             flex-wrap: wrap; }
.bolum-ust h2 { margin: 0; }
.bolum-ust > div { min-width: 0; }
.bolum-ust a { margin-left: auto; font-size: 15px; font-weight: 600; white-space: nowrap;
               display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
               text-decoration: none; }
.bolum-ust a:hover { text-decoration: underline; }

/* ==========================================================================
   Kartlar — fotoğraf üstünde başlık, üzerine gelince yakınlaşma
   ========================================================================== */
.izgara { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kart {
  position: relative; border-radius: 16px; overflow: hidden; display: block;
  text-decoration: none; color: inherit; background: var(--mavi-cok-koyu);
  box-shadow: var(--golge-1); transition: transform .34s var(--yay), box-shadow .34s;
  isolation: isolate;
}
.kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); }
.kart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
            background: var(--gri-acik); transition: transform .6s var(--yay); }
.kart:hover img { transform: scale(1.06); }
.kart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 42%, rgba(7,31,48,.86) 100%);
}
.kart .govde {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 20px 18px; color: #fff;
}
.kart .govde b { display: block; font-size: 18.5px; line-height: 1.25;
                 letter-spacing: -.015em; margin-bottom: 4px; }
.kart .govde small { color: #BFD3E1; font-size: 13.5px; }
.kart:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; }

/* ==========================================================================
   Duyuru satırları
   ========================================================================== */
.duyuru-satir {
  display: block; text-decoration: none; color: inherit; background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px 24px;
  margin-bottom: 12px; transition: border-color .2s, transform .2s var(--yay),
              box-shadow .2s;
}
.duyuru-satir:hover { border-color: var(--mavi); transform: translateX(4px);
                      box-shadow: var(--golge-1); }
.duyuru-satir time { color: var(--mavi-koyu); font-size: 13px; font-weight: 700;
                     letter-spacing: .06em; text-transform: uppercase; }
.duyuru-satir b { display: block; font-size: 19px; margin: 5px 0 5px;
                  letter-spacing: -.015em; }
.duyuru-satir p { margin: 0; color: var(--metin-soluk); font-size: 15.5px; }

/* ==========================================================================
   Bilgi/uyarı kutuları
   ========================================================================== */
.uyari, .bilgi {
  border-radius: 12px; padding: 18px 22px; margin: 0 0 28px; font-size: 16px;
  border-left: 4px solid;
}
.bilgi { background: var(--gri-sicak); border-color: var(--mavi); }
.uyari { background: #FDF2F2; border-color: var(--kirmizi); }
.eksik { background: #FFF6E5; border: 1px dashed #C99A2E; color: #7A5B14;
         padding: 2px 6px; border-radius: 5px; font-size: 14px; }

/* ==========================================================================
   Başvuru formu
   ========================================================================== */
form.basvuru fieldset { border: 1px solid var(--cizgi); border-radius: 16px;
                        padding: 24px 26px 28px; margin: 0 0 24px;
                        background: var(--beyaz); box-shadow: var(--golge-1); }
form.basvuru legend { font-weight: 700; font-size: 15px; letter-spacing: .06em;
                      text-transform: uppercase; color: var(--mavi-koyu);
                      padding: 0 10px; }
.alanlar { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.alan label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.alan input[type=text], .alan input[type=email], .alan input[type=date],
.alan input[type=number], .alan input[type=file], .alan select, .alan textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cizgi);
  border-radius: 10px; font: inherit; font-size: 16px; background: var(--beyaz);
  transition: border-color .18s, box-shadow .18s;
}
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: #C6D2DC; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--mavi);
  box-shadow: 0 0 0 4px rgba(0,144,216,.16); }
.alan.onay { display: flex; gap: 10px; align-items: center; grid-column: 1 / -1;
             min-height: 44px; }
/* Dokunma hedefi etikettir (kutu <label>'ın dışında, `for` ile bağlı).
   Etiket 24 px kalıyordu; parmakla ıskalanan onay kutusu formu bitirmeyi engeller. */
.alan.onay label { font-weight: 400; margin: 0; display: inline-flex;
                   align-items: center; min-height: 44px; }
.alan .hata { color: var(--kirmizi-koyu); font-size: 14px; margin-top: 5px;
              font-weight: 600; }
.alan .yardim { color: var(--metin-soluk); font-size: 13.5px; margin-top: 5px; }
.genis { grid-column: 1 / -1; }
table.satirlar { width: 100%; border-collapse: collapse; }
table.satirlar th { text-align: left; font-size: 13px; color: var(--metin-soluk);
                    padding: 0 8px 8px 0; font-weight: 700; letter-spacing: .04em;
                    text-transform: uppercase; }
table.satirlar td { padding: 0 8px 12px 0; vertical-align: top; }
/* :not(...) şart: kural onay kutusunu da yakalayınca kutu 26 px yerine 52 px
   oluyor ve "Bu satırı sil" yazısı üç satıra sarıyordu (9 Eyl ölçümü). */
table.satirlar input:not([type=checkbox]):not([type=radio]),
table.satirlar select { width: 100%; padding: 11px 12px;
  border: 1px solid var(--cizgi); border-radius: 10px; font: inherit; font-size: 15.5px; }

/* Dokunma hedefleri (mobil denetim bulgusu, 2 Eyl): başvuru sahiplerinin çoğu
   lise/üniversite öğrencisi ve telefondan dolduruyor. 13 px'lik bir onay kutusu,
   formu bırakma sebebidir. */
input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px; margin: 11px 8px 11px 0; accent-color: var(--mavi);
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]),
.secim label { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }

/* ==========================================================================
   Çorum bölümü
   ========================================================================== */
.corum-giris { display: grid; gap: 34px; grid-template-columns: 1fr;
               align-items: start; }
@media (min-width: 900px) { .corum-giris { grid-template-columns: 1.15fr .85fr; } }
.corum-giris .metin { max-width: 66ch; }
/* `align-items: start` olmadan ızgara kutuyu metin sütunu kadar UZATIYORDU:
   altı yüzlerce piksel boş kalıyor, sayfa yarım bırakılmış gibi duruyordu.
   Yapışkan konum ise uzun metin okunurken kutuyu görüşte tutuyor — listedeki
   yerler metinle birlikte akıp kayboluyordu. */
@media (min-width: 900px) {
  .corum-kutu { position: sticky; top: 92px; }
}
.corum-kutu { background: var(--gri-sicak); border: 1px solid #D9E5EE;
              border-radius: 16px; padding: 24px 26px; }
.corum-kutu h3 { margin-top: 0; }
.corum-kutu ul { margin: 0; padding-left: 20px; }
.corum-kutu li { margin-bottom: 8px; }

/* ==========================================================================
   İçerik sayfaları (Hakkımızda, İletişim, KVKK, Projelerimiz)
   ==========================================================================
   Metin sütunu ORTALANIYOR. Eskiden sola yaslıydı: 1440 px'lik bir ekranda
   yazı solda sıkışıp sağ yarı bomboş kalıyordu — sayfa yarım bırakılmış gibi
   duruyordu. Genişlik yine ölçülü (68ch), çünkü uzun satır okunmuyor.       */
.yazi { max-width: 68ch; margin-inline: auto; }

/* Sayfa başlığı: altında ince bir kimlik çizgisi. Başlıklar çıplak duruyordu,
   hangi sayfada olunduğunu yalnız yazı söylüyordu. Çizgi derneğin iki
   rengini taşıyor — kırmızıdan lacivere. */
.yazi h1 { margin-bottom: 10px; }
.yazi h1::after {
  content: ""; display: block; width: 68px; height: 3px; border-radius: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--kirmizi) 0%, var(--kirmizi) 38%,
                              var(--mavi-koyu) 38%, var(--mavi-koyu) 100%);
}
.yazi h1 + p { font-size: 19.5px; line-height: 1.62; color: var(--metin-soluk);
               margin-top: 22px; }

/* Bölüm ritmi: h3 bir üst bölümü kapatıp yenisini açıyor, nefes payı büyük.
   h4 aynı bölümün içinde kalıyor, payı küçük. Eskiden ikisi de benzerdi ve
   metin tek bir blok gibi akıyordu. */
.yazi h3 { font-size: 22.5px; margin: 54px 0 14px; letter-spacing: -.018em;
           padding-top: 22px; border-top: 1px solid var(--cizgi); }
.yazi h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 40px; }
.yazi h4 { font-size: 17.5px; margin: 28px 0 8px; color: var(--mavi-koyu); }
.yazi p { margin: 0 0 18px; }
.yazi ul { margin: 0 0 22px; padding-left: 22px; }
.yazi li { margin-bottom: 9px; }
.yazi > *:first-child { margin-top: 0; }

/* KİŞİ LİSTELERİ — "**Ad Soyad** — Görev" kalıbı.
   Hakkımızda'da 25'ten fazla kişi düz madde listesi olarak diziliydi; kim
   kimdir seçilemiyordu. Kalıbı bozmadan (metin panelde aynı yazılıyor)
   ızgaraya alınıyor: her kişi kendi satırında, adı öne çıkıyor.
   `kisiler` sınıfı şablonda, "— " taşıyan listelere veriliyor. */
.yazi ul.kisiler { list-style: none; padding: 0; display: grid; gap: 10px;
                   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.yazi ul.kisiler li {
  margin: 0; padding: 11px 14px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: #fff; font-size: 14.5px;
  color: var(--metin-soluk); line-height: 1.45;
}
.yazi ul.kisiler li strong { display: block; color: var(--metin); font-size: 15.5px;
                             font-weight: 650; margin-bottom: 1px; }

/* İletişim satırları: telefon ve e-posta tıklanabilir olmalı, telefondan
   arayan kişi numarayı elle yazmasın. */
.yazi a[href^="tel:"], .yazi a[href^="mailto:"] { font-variant-numeric: tabular-nums; }

/* Ana sayfadaki Çorum bölümü: metin solda, iki kare sağda. */
.corum-vitrin { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .corum-vitrin { grid-template-columns: 1fr 1fr; } }
.corum-vitrin p { max-width: 52ch; color: var(--metin-soluk); margin: 0 0 26px; }
.corum-kareler { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.corum-kareler img { width: 100%; height: 100%; min-height: 210px; object-fit: cover;
                     border-radius: 14px; display: block; box-shadow: var(--golge-1); }
.corum-kareler img:first-child { grid-row: span 2; min-height: 260px; }

/* ==========================================================================
   Fotoğraf şeridi (kütüphane yok: CSS + 30 satır JS)
   ========================================================================== */
.serit { position: relative; background: var(--mavi-gece); overflow: hidden; }
/* Dikey fotoğraf ağırlıklı arşiv için biraz daha yüksek kutu: 3:4'lük bir
   kare 640px'te ~480px genişlik kaplıyor, ekranın ortasında yalnız kalmasın. */
.serit .kareler { position: relative; width: 100%; height: clamp(460px, 62vw, 700px); }
.serit figure { position: absolute; inset: 0; margin: 0; opacity: 0;
                transition: opacity 1.1s ease; pointer-events: none; }
.serit figure.acik { opacity: 1; pointer-events: auto; }
/* İKİ KATMAN — ölçülen kusurun çözümü (10 Eyl 2026).
   Arşivin %66'sı dikey fotoğraf (ortanca 3:4, en dar 9:16). Tek katman
   `cover` ile dikey kareden yalnız ortadaki yatay şerit görünüyordu;
   üstüne %9 yakınlaşan animasyon biniyor, kırpma daha da artıyordu.
   Şimdi: arkada bulanık DOLGU (kırpılır, sorun değil — zaten bulanık),
   önde ASIL kare tam görünür. */
.serit img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.serit img.dolgu {
  object-fit: cover;
  filter: blur(26px) saturate(1.15) brightness(.62);
  transform: scale(1.12);          /* blur kenarındaki şeffaflığı taşır */
}
.serit img.asil { object-fit: contain; }

/* Kahraman bölümünde yazı SOLDA duruyor. Kare ortalanınca fotoğrafın sol
   kenarı yazının altına giriyor ve ikisi de zarar görüyor. Geniş ekranda
   kare sağa yaslanıyor: yazı kendi boşluğunda, fotoğraf tam görünür.
   Dar ekranda yazı zaten karenin altına indiği için ortalı kalıyor. */
@media (min-width: 900px) {
  .kahraman .serit img.asil { object-position: right center; }
  /* Sol tarafta yazının arkasını koyulaştır — dolgu tek başına yetmiyor. */
  .kahraman .serit::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg,
      rgba(11,53,80,.92) 0%, rgba(11,53,80,.78) 34%, rgba(11,53,80,.10) 62%,
      rgba(11,53,80,0) 100%);
  }
}

/* Animasyon korunuyor — ama artık kırpmıyor.
   Asıl kare 0,955'ten 1'e AÇILIYOR: bitişte tam boyda, hiçbir an taşmıyor.
   Dolgu ters yönde çok hafif kayıyor; iki katman aynı yöne gitseydi
   fotoğraf yerinde duruyormuş gibi görünürdü. */
.serit figure.acik img.asil  { animation: nefes 9s ease-out both; }
.serit figure.acik img.dolgu { animation: dolgu-nefes 9s ease-out both; }
@keyframes nefes       { from { transform: scale(.955); } to { transform: scale(1); } }
@keyframes dolgu-nefes { from { transform: scale(1.20); }  to { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .serit figure.acik img.asil,
  .serit figure.acik img.dolgu { animation: none; }
  .serit img.dolgu { transform: scale(1.12); }
}
.serit figcaption { position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
                    padding: 46px 24px 18px; font-size: 15.5px;
                    background: linear-gradient(transparent, rgba(11,53,80,.88)); }
.serit figcaption b { display: block; font-size: 18px; margin-bottom: 2px; }
.serit .noktalar { position: absolute; left: 0; right: 0; bottom: 12px;
                   display: flex; gap: 8px; justify-content: center; z-index: 2; }
/* Nokta görsel olarak 10px, dokunma alanı 44px. */
.serit .noktalar button { width: 20px; height: 44px; border: 0; padding: 0;
                          background: none; cursor: pointer; display: grid;
                          place-items: center; }
.serit .noktalar button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.45); transition: width .22s var(--yay), background .22s;
}
.serit .noktalar button[aria-current="true"]::before {
  background: #fff; width: 28px; border-radius: 5px; }
.serit .ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
             width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
             background: rgba(255,255,255,.85); color: var(--mavi-cok-koyu);
             font-size: 20px; line-height: 1; display: grid; place-items: center;
             transition: background .2s, transform .2s var(--yay); }
.serit .ok:hover { background: #fff; }
.serit .ok.geri { left: 14px; }
.serit .ok.ileri { right: 14px; }

/* ==========================================================================
   Albüm ızgarası ve fotoğraf büyüteci
   ========================================================================== */
.albom-izgara { display: grid; gap: 16px;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.albom-izgara button {
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--gri-acik); cursor: zoom-in; display: block; width: 100%;
  box-shadow: var(--golge-1); transition: transform .3s var(--yay), box-shadow .3s;
}
.albom-izgara button:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.albom-izgara button:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; }
.albom-izgara img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
                    transition: transform .6s var(--yay); }
.albom-izgara button:hover img { transform: scale(1.05); }

.buyutec[hidden] { display: none; }
.buyutec { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
           justify-content: center; background: rgba(6,20,30,.965);
           backdrop-filter: blur(6px); padding: 28px; }
.buyutec img { max-width: min(100%, 1600px); max-height: calc(100vh - 160px);
               width: auto; height: auto; border-radius: 8px; display: block;
               box-shadow: var(--golge-3); }
.buyutec figure { margin: 0; display: flex; flex-direction: column; align-items: center;
                  gap: 14px; max-width: 100%; }
.buyutec figcaption { color: #D8E4EC; font-size: 14.5px; text-align: center;
                      max-width: 70ch; }
.buyutec .sayac { color: #8FA6B6; font-size: 13px; font-variant-numeric: tabular-nums;
                  letter-spacing: .08em; }
.buyutec button { position: absolute; background: rgba(255,255,255,.1); color: #fff;
                  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
                  width: 54px; height: 54px; font-size: 24px; line-height: 1;
                  cursor: pointer; display: flex; align-items: center;
                  justify-content: center; font-family: inherit;
                  transition: background .2s, transform .2s var(--yay); }
.buyutec button:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.buyutec button:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; }
.buyutec .kapat { top: 20px; right: 20px; }
.buyutec .onceki { left: 20px; top: 50%; transform: translateY(-50%); }
.buyutec .sonraki { right: 20px; top: 50%; transform: translateY(-50%); }
.buyutec .onceki:hover, .buyutec .sonraki:hover { transform: translateY(-50%) scale(1.06); }
body.buyutec-acik { overflow: hidden; }

/* ==========================================================================
   Altbilgi
   ========================================================================== */
footer.alt { background: var(--mavi-gece); color: #9FB6C6; font-size: 15px;
             padding: 60px 0 34px; margin-top: 90px; }
footer.alt .kap { display: grid; gap: 34px;
                  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
footer.alt .marka-alt { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
footer.alt .marka-alt img { height: 54px; width: auto; }
footer.alt .marka-alt b { color: #fff; font-size: 21px; letter-spacing: -.02em; }
footer.alt strong { color: #fff; display: block; margin-bottom: 12px; font-size: 15px;
                    letter-spacing: .06em; text-transform: uppercase; }
footer.alt a { color: #C6D8E4; text-decoration: none;
               display: inline-flex; align-items: center; min-height: 40px; }
footer.alt a:hover { color: #fff; text-decoration: underline; }
footer.alt nav { display: flex; flex-direction: column; }
.alt-cizgi { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px;
             padding-top: 22px; font-size: 13.5px; color: #7C93A4; }

/* ==========================================================================
   Belirme animasyonu (görünüre girince)
   ========================================================================== */
.belir { opacity: 0; transform: translateY(22px);
         transition: opacity .7s var(--yay), transform .7s var(--yay); }
.belir.gorundu { opacity: 1; transform: none; }

/* ==========================================================================
   Duyarlılık
   ========================================================================== */
@media (max-width: 1180px) {
  .ust .kap { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 8px;
              gap: 10px 18px; }
  nav.menu { margin-left: 0; width: 100%; justify-content: flex-start;
             border-top: 1px solid var(--cizgi); padding-top: 6px; }
  nav.menu a.vurgu { margin-left: auto; }
}
@media (max-width: 900px) {
  .kahraman-yazi { padding: 76px 0 86px; }
  .kahraman .serit .noktalar { bottom: 76px; }
  main { padding: 56px 0 70px; }
  footer.alt { margin-top: 70px; }
}
@media (max-width: 620px) {
  .marka img { height: 52px; }
  .marka b { font-size: 21px; }
  .marka span { display: none; }   /* dernek tam adı kahramanda ve altbilgide var */
  .kahraman-yazi { padding: 60px 0 96px; }
  .kahraman .serit .ok.ileri { right: 20px; }
  .kahraman .serit .ok.geri { right: 74px; }
  .kahraman .serit .noktalar { right: 20px; bottom: 82px; }
  .buyutec { padding: 12px; }
  .buyutec button { width: 46px; height: 46px; font-size: 20px; }
  .buyutec .onceki { left: 8px; }
  .buyutec .sonraki { right: 8px; }
  .dugme { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important;
                           transition-duration: .001ms !important; }
  .belir { opacity: 1; transform: none; }
  .serit figure.acik img { animation: none; }
}

/* ==========================================================================
   Başvuru sonucu — başarı sayfası
   ========================================================================== */
.basari { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 26px;
          background: #F1F9F2; border: 1px solid #BFE3C6; border-left: 4px solid #2E9E4B;
          border-radius: 14px; padding: 22px 24px; }
.basari-imge { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
               background: #2E9E4B; color: #fff; font-size: 26px; line-height: 46px;
               text-align: center; font-weight: 700; }
.basari h1 { font-size: 27px; }
.basvuru-no { font-size: 34px; font-weight: 800; letter-spacing: .04em;
              color: var(--mavi-cok-koyu); margin: 0; font-variant-numeric: tabular-nums; }
ol.adimlar { margin: 0 0 28px; padding-left: 22px; }
ol.adimlar li { margin-bottom: 10px; line-height: 1.7; }

/* Hata özeti içindeki bağlantılar tıklanabilir görünmeli. */
.uyari ul { padding-left: 20px; }
.uyari ul li { margin-bottom: 4px; line-height: 1.6; }
.uyari a { color: var(--kirmizi-koyu); font-weight: 600; }

/* Hatalı alan gözle de ayrılsın; yalnız kırmızı yazı yeterli değil. */
.alan:has(.hata) input, .alan:has(.hata) select, .alan:has(.hata) textarea,
table.satirlar td:has(.hata) input { border-color: var(--kirmizi);
  box-shadow: 0 0 0 3px rgba(216,24,24,.12); }

/* ==========================================================================
   Kardeş/referans satırları — telefonda tablo kart olur
   ==========================================================================
   375 px'te beş sütunluk girdi tablosu okunamıyor ve yatay kaydırma doğuruyor.
   Bu genişliğin altında her satır kendi kartına iniyor, sütun başlığı da
   data-etiket'ten her alanın üstüne yazılıyor. */
@media (max-width: 700px) {
  /* Gizlenmiş thead 5 px taşıyordu; başlıklar zaten data-etiket'ten
     basılıyor ve her girdinin aria-label'ı var, bilgi kaybı yok. */
  table.satirlar thead { display: none; }
  table.satirlar, table.satirlar tbody, table.satirlar tr, table.satirlar td {
    display: block; width: 100%; }
  table.satirlar tr { border: 1px solid var(--cizgi); border-radius: 12px;
                      padding: 14px 16px; margin-bottom: 14px;
                      background: var(--gri-sicak); }
  table.satirlar td { padding: 0 0 12px; }
  table.satirlar td:last-child { padding-bottom: 0; }
  table.satirlar td::before { content: attr(data-etiket); display: block;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 5px; }
  .sil-hedef { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Telefonda başarı kutusu alt alta. */
@media (max-width: 620px) {
  .basari { flex-direction: column; gap: 12px; padding: 20px; }
  .basvuru-no { font-size: 28px; }
}


/* ==========================================================================
   Telefon menüsü
   ==========================================================================
   Ölçüm (9 Eyl): sekiz bağlantı 375 px'te üç satıra yayılıyor ve yapışkan
   başlık 226 px'e çıkıyordu — iPhone SE ekranının %34'ü. Menü artık katlanıyor,
   başlık ~72 px'te kalıyor. JavaScript yoksa `html.js` sınıfı hiç eklenmez ve
   menü eskisi gibi tamamen açık kalır; hiçbir bağlantı erişilemez olmuyor. */
.menu-dugme { display: none; align-items: center; gap: 9px; margin-left: auto;
  min-height: 44px; padding: 9px 16px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: var(--beyaz); color: var(--mavi-cok-koyu);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.menu-dugme:hover { border-color: var(--mavi); }
.menu-dugme:focus-visible { outline: 3px solid var(--mavi); outline-offset: 2px; }
.menu-cizgi { position: relative; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; display: block; }
.menu-cizgi::before, .menu-cizgi::after { content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.menu-cizgi::before { top: -6px; } .menu-cizgi::after { top: 6px; }
[aria-expanded="true"] .menu-cizgi { background: transparent; }
[aria-expanded="true"] .menu-cizgi::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .menu-cizgi::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .menu-dugme { display: inline-flex; }
  html.js nav.menu { display: none; }
  html.js nav.menu.acik { display: flex; flex-direction: column; align-items: stretch;
    gap: 0; width: 100%; padding: 6px 0 10px; }
  html.js nav.menu.acik a { min-height: 48px; display: flex; align-items: center;
    padding: 0 4px; border-bottom: 1px solid var(--cizgi); }
  html.js nav.menu.acik a:last-child { border-bottom: 0; }
  html.js nav.menu.acik a.vurgu { margin: 10px 0 0; justify-content: center;
    border-bottom: 0; }
  /* Menü katlanınca ok/alt çizgi süsü gereksiz. */
  html.js nav.menu.acik a::after { display: none; }
}

/* ==========================================================================
   Dokunma hedefleri — 44 px
   ==========================================================================
   Denetçi bulgusu (9 Eyl): altbilgi bağlantıları ve menü bağlantıları 40 px'ti.
   Parmakla ıskalanan bağlantı, sayfayı terk etme sebebidir. */
@media (max-width: 1180px) {
  footer.alt nav a, footer.alt a[href^="tel:"], footer.alt a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px; }
  nav.menu a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Onay kutusu: 22 px kutunun kendi isabet alanı dar kalıyordu. Etiket zaten
   44 px ve kutuya bağlı, ama kutunun kendisi de rahat basılabilmeli. */
@media (max-width: 1180px) {
  input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px;
    margin: 9px 10px 9px 0; }
}

/* Açılır yardım başlığı ("Telefonumdan tek PDF nasıl yaparım?") 27 px'ti.
   Formu telefondan dolduran öğrencinin en çok ihtiyaç duyduğu bağlantı bu. */
form.basvuru summary, .bilgi summary { min-height: 44px; display: flex;
  align-items: center; }

/* ==========================================================================
   Yalnız ekran okuyucuya görünen metin
   ==========================================================================
   Bu sınıf şablonlarda kullanılıyordu ama CSS'te hiç tanımlanmamıştı; "Bu satırı
   sil" yazısı bu yüzden herkese görünüyor ve kardeş satırında üç satıra sarıyordu.
   (9 Eyl, ekran görüntüsüyle bulundu — otomatik denetim bunu göremez.) */
.gizli-okuyucu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


@media (max-width: 700px) {
  /* Kartta "SİL" başlığı gereksiz — yazı zaten kutunun yanında duruyor. */
  table.satirlar td:has(.sil-hedef)::before { display: none; }
  .sil-yazi { position: static; width: auto; height: auto; margin: 0;
              overflow: visible; clip: auto; white-space: normal;
              font-size: 15px; color: var(--metin-soluk); }
  table.satirlar tr { position: relative; }
}


/* ==========================================================================
   Evet / Hayır seçimi
   ==========================================================================
   Onay kutusunun yerini aldı: işaretlenmemiş bir kutu "hayır" mı yoksa
   "soruyu atladım" mı belli olmuyordu. İki seçenek de görünür ve zorunlu. */
/* form.basvuru fieldset kuralı (çerçeve, gölge, dolgu, BÜYÜK HARF başlık)
   bu iç fieldset'i de yakalıyordu: her Evet/Hayır sorusu kocaman bir kartın
   içinde ve başlığı bağıra bağıra duruyordu. Özgüllük burada eşitleniyor. */
form.basvuru fieldset.secim-kutusu {
  border: 0; padding: 0; margin: 0; background: none; box-shadow: none;
  border-radius: 0;
}
form.basvuru fieldset.secim-kutusu legend {
  padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 14.5px;
  color: var(--metin); text-transform: none; letter-spacing: normal;
}
.secim-secenekler { display: flex; gap: 10px; flex-wrap: wrap; }
.secim-secenek {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  min-height: 46px; padding: 0 18px 0 14px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: var(--beyaz); font-weight: 500;
  transition: border-color .16s, background .16s, box-shadow .16s;
  flex: 1 1 0; justify-content: center; min-width: 92px;
}
.secim-secenek:hover { border-color: var(--mavi); }
.secim-secenek input { margin: 0; flex: 0 0 auto; }
.secim-secenek:has(input:checked) {
  border-color: var(--mavi); background: #EAF6FD;
  box-shadow: inset 0 0 0 1px var(--mavi); font-weight: 700; }
.secim-secenek:has(input:focus-visible) { outline: 3px solid var(--mavi);
                                          outline-offset: 2px; }
.alan .yildiz { color: var(--kirmizi); }

/* Koşullu alan: kapalıyken hiç görünmüyor. Soluk gösterip devre dışı bırakmak
   "burada bir şey var ama dokunamıyorum" hissi veriyordu; gizlemek daha net. */
.alan.kosullu[hidden] { display: none; }

/* ==========================================================================
   Satır ekle / sil düğmeleri
   ========================================================================== */
.dugme-ekle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  min-height: 46px; padding: 0 20px; border: 1px dashed var(--mavi);
  border-radius: 10px; background: var(--beyaz); color: var(--mavi-koyu);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.dugme-ekle:hover { background: #EAF6FD; border-style: solid; }
.dugme-ekle:focus-visible { outline: 3px solid var(--mavi); outline-offset: 2px; }
.dugme-ekle span[aria-hidden] { font-size: 20px; line-height: 1; font-weight: 700; }

.dugme-sil {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: var(--beyaz); color: var(--kirmizi-koyu);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.dugme-sil:hover { background: #FDF2F2; border-color: var(--kirmizi); }
.dugme-sil:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 2px; }
.dugme-sil span[aria-hidden] { font-size: 19px; line-height: 1; }
/* Django'nun DELETE kutusu görünmüyor: silme işini düğme yapıyor, kutu yalnız
   kayıtlı satırın silineceğini sunucuya bildirmek için duruyor. */
/* display:none — kutu hâlâ gönderiliyor ama ne ölçüye ne sekme sırasına
   ne de ekran okuyucuya giriyor. clip ile gizlemek yetmiyordu: 26 px'lik
   adsız bir dokunma hedefi olarak sayılıyordu. */
.silme-kutusu { display: none; }
table.satirlar td.sil-hucre { width: 1%; white-space: nowrap; vertical-align: middle; }
/* Masaüstünde "Sil" yazısı gereksiz, çarpı yeter. */
@media (min-width: 701px) { .dugme-sil .sil-yazi { display: none; } }

/* Gelir özeti — doğrulama satırı.
   Eski hâli 22 punto / 800 ağırlıkta bir rakamdı: formun ortasında adayın
   gelirini ilan ediyordu. İşi hane hatasını yakalatmak, o kadar. */
.gelir-ozeti { margin: 16px 0 0; font-size: 14px; color: var(--gri-koyu, #5C7080);
               line-height: 1.6; }
.gelir-ozeti #gelir-toplam { font-weight: 650; color: var(--mavi-koyu);
                             font-variant-numeric: tabular-nums; }

/* Aile bölümündeki ara başlıklar */
form.basvuru h3 { font-size: 16px; letter-spacing: .02em; margin: 22px 0 12px;
                  padding-top: 16px; border-top: 1px solid var(--cizgi);
                  color: var(--mavi-koyu); }
form.basvuru fieldset > .alanlar + h3 { margin-top: 24px; }

@media (max-width: 700px) {
  .secim-secenek { flex: 1 1 calc(50% - 5px); }
  table.satirlar td.sil-hucre { width: auto; }
  table.satirlar td.sil-hucre::before { display: none; }
  .dugme-sil { width: 100%; }
  .dugme-ekle { width: 100%; justify-content: center; }
}


/* Bölüm başlığındaki "→" bağlantıları ve metin içi bağlantılar da parmakla
   basılabilir olmalı. 44 px sınırının hemen altında (43,x) kalıyorlardı. */
@media (max-width: 1180px) {
  .bolum-ust > a, .corum-giris a, main p > a {
    display: inline-flex; align-items: center; min-height: 46px; }
}

/* ==========================================================================
   Başvurular kapalıyken
   ==========================================================================
   Başvuru yıl boyu açık değil. Kapalıyken düğmeler BAĞLANTI DEĞİL: tıklanamaz
   işaretler. Kapalı bir forma tıklatıp "kapalıdır" sayfası göstermek kişiyi
   boşuna yürütmek olurdu; durumu düğmenin kendisi söylüyor. */
.dugme-kapali {
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78);
  border: 1px dashed rgba(255, 255, 255, .38);
  cursor: not-allowed; box-shadow: none;
}
.dugme-kapali:hover { background: rgba(255, 255, 255, .12); }

.vurgu-kapali {
  background: transparent; color: var(--gri-koyu, #5C7080);
  border: 1px dashed var(--cizgi, #DDE3EA);
  cursor: not-allowed;
}
/* ⛔ ÖLÇÜLEN KUSUR (10 Eyl 2026): alt bilgi KOYU lacivert zeminli
   (--mavi-gece), buradaki gri yazı 3,27:1 ölçtü — okunmuyordu. Yerelde
   görünmedi çünkü orada başvuru AÇIKTI ve bu satır hiç basılmıyordu;
   yalnız kapalı durumda ortaya çıkan bir kusur. Alt bilginin kendi
   metin rengiyle aynı aileden, biraz sönük: 4,9:1. */
.alt-kapali { color: #8FA6B8; cursor: not-allowed; }

/* ==========================================================================
   Gönderme onayı kutusu — istenen belgeler son kez
   ==========================================================================
   Aday kırk alan doldurduktan sonra sayfanın en üstündeki belge listesini
   unutuyor. Eksik belgeyle gelen aday mülakata alınamıyor ve bunu mülakat
   sabahı öğreniyor. Kutu, gönder tuşuyla başvuru arasına giriyor. */
#belge-kutusu {
  border: 0; border-radius: 16px; padding: 0; max-width: 620px; width: calc(100% - 32px);
  box-shadow: 0 24px 70px rgba(7, 31, 48, .34); color: var(--metin);
  /* 11 belgeyle kutu ekranı aşıyordu ve "Başvuruyu tamamla" düğmesi
     görüş alanının altında kalabiliyordu. Kutu ekrana sığıyor, LİSTE
     kayıyor, uyarı ve düğmeler her zaman görünür kalıyor. */
  /* Liste kendi sınırını taşıyor (aşağıda), bu yüzden kutunun kırpmasına
     gerek yok. `overflow: hidden` bırakıldığında alt düğmeler kutunun son
     pikselinde kesiliyor ve tıklanamaz hâle geliyordu. */
  max-height: 88dvh;
}
/* ⛔ İKİ KUSUR, İKİSİ DE ÖLÇÜLDÜ (10 Eyl 2026):
   1. `display: flex` doğrudan `#belge-kutusu`ya verilince KAPALI
      `<dialog>`ın `display: none` davranışı ezildi ve kutu sayfa açılır
      açılmaz görünüyordu (`open=false` ama 620×792 px).
   2. `[open]` ile sınırlayınca bu sefer dialog'un kendisi yatay flex
      konteyner oldu ve iç düzen dağıldı: "Geri dön" düğmesi 126×774 px
      ölçtü ve kutunun dışına (x=1138) taştı.

   Düzen dialog'da değil, İÇİNDEKİ formda kuruluyor; dialog'un kendi
   görünürlük davranışına hiç dokunulmuyor. */
#belge-kutusu::backdrop { background: rgba(7, 31, 48, .62); backdrop-filter: blur(3px); }
/* `min-height: 0` olmadan flex çocuğu içeriğinden küçülemiyor ve alt
   düğmeler kutunun dışına taşıp kesiliyordu (masaüstünde ölçüldü). */
.belge-kutusu__ic { padding: 26px 28px 22px; }
#belge-kutusu h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.015em;
                   flex: 0 0 auto; }

/* Numaralar iki haneye çıkınca kesiliyordu: 10. madde "0." görünüyordu.
   Sayı listenin içinde, kendi sütununda. */
/* Yükseklik sınırı doğrudan LİSTEYE veriliyor. Flex zinciriyle (dialog →
   form → liste) küçültmeye çalışmak iki kez başarısız oldu: bir seferinde
   düğmeler kutunun dışına taşıp kesildi (ölçüldü: düğme y=881, kutu y=846'da
   bitiyor). Liste kendi sınırını bilirse zincire gerek kalmıyor. */
.belge-kutusu__liste { margin: 16px 0 0; padding: 0 6px 0 0; display: grid; gap: 10px;
                       list-style-position: inside;
                       max-height: min(48dvh, 430px); overflow-y: auto; }
.belge-kutusu__liste li { padding-left: 4px; }
.belge-kutusu__liste li::marker { font-weight: 650; color: var(--mavi-koyu); }
.belge-kutusu__liste span { padding-left: 1.55em; }
.belge-kutusu__liste li { line-height: 1.45; }
.belge-kutusu__liste strong { font-weight: 650; }
.belge-kutusu__liste span { display: block; font-size: 13.5px; color: var(--metin-soluk); }
.belge-kutusu__liste em { font-style: normal; font-size: 13px; color: var(--metin-soluk); }

.belge-kutusu__vurgu {
  flex: 0 0 auto; margin: 16px 0 0; padding: 13px 15px; border-radius: 10px;
  background: #FDF3F3; border-left: 4px solid var(--kirmizi);
  font-size: 14.5px; line-height: 1.5;
}
.belge-kutusu__uyari { margin: 14px 0 0; color: var(--metin-soluk); }

.belge-kutusu__onay {
  flex: 0 0 auto; display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 0;
  padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: 10px;
  cursor: pointer; font-size: 15px; line-height: 1.45;
}
.belge-kutusu__onay:hover { border-color: var(--mavi-koyu); }
.belge-kutusu__onay input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }

.belge-kutusu__dugmeler { flex: 0 0 auto; display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.belge-kutusu__dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
/* Devre dışı düğme tıklanabilir görünmemeli: onay verilmeden geçilmiyor. */
#belge-kutusu-onayla:disabled { opacity: .5; cursor: not-allowed; }
/* Kutunun içinde hayalet düğme koyu zemin varsaymamalı. */
#belge-kutusu .dugme-hayalet { background: #fff; color: var(--metin);
                               border: 1px solid var(--cizgi); }
#belge-kutusu .dugme-hayalet:hover { background: var(--gri-sicak); }

@media (max-width: 560px) {
  .belge-kutusu__ic { padding: 20px 18px 18px; }
  #belge-kutusu h2 { font-size: 19px; }
  .belge-kutusu__dugmeler .dugme { flex: 1 1 100%; }
}


/* Kahraman bloğunda son başvuru tarihi. Düğmelerin altında, onlardan sönük
   ama okunur: bilgi satırı, ikinci bir çağrı değil. */
.kahraman-tarih {
  margin: 14px 0 0;
  font-size: .95rem;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}
.kahraman-tarih strong { color: #fff; font-weight: 600; }