/* =============================================================================
   BİLEŞENLER — sitenin halka açık yüzünde tekrar eden parçalar
   -----------------------------------------------------------------------------
   NEDEN AYRI BİR DOSYA: bu bileşenler `15e-aurora-ieee.html`'in kendi <style>
   bloğunda doğmuştu. Kurumsal iç sayfalar (k-01…k-14) aynı kart, ızgara ve
   şeritleri kullanıyor. Orada bırakılsaydı ya kopyalanacaklardı — ilk düzeltmede
   ana sayfayla iç sayfa ayrışırdı, tam olarak `events`/`etkinlikler` ikizliğinde
   başımıza gelen şey — ya da her iç sayfa ana sayfayı import etmek zorunda
   kalacaktı. Tek kaynak burası.

   NE BURAYA GİRER: birden fazla sayfada görünen, kendi başına anlamlı bir parça
   (etkinlik şeridi, duyuru kartı, kadro künyesi, sponsor kaidesi).
   NE GİRMEZ: bir sayfanın düzen imzası (`15e`'nin hero'su, rakam şeridi,
   TechVision sahnesi, üyelik ikili düzeni) — onlar sayfanın kendi <style>'ında.

   YÜKLEME SIRASI:  base.css → aurora.css → bilesenler.css → (panel.css) → sayfa
   `panel.css`'ten ÖNCE, çünkü bu bileşenler kimlik katmanının parçası;
   `panel.css` ise `.panel-sayfa` altında kimliği bilinçli olarak sönümlüyor ve
   o ezme hakkını korumak zorunda.

   Cam yüzey buradan gelmiyor: kartlar HTML'de `class="buz etk-satir"` gibi
   yazılıyor, `.buz` aurora.css'te. Bu dosya yalnız düzen ve tipografi taşır.
============================================================================= */

/* =============================================================================
   1 · KONUŞMACI KARTI
   TechVision sahnesinde ve k-04 zirve sayfasında. Yuvarlak portre + ad + kurum
   + konu rozeti. Portre yerine baş harf avatarı kullanılıyor (IMG.speaker):
   konuşmacılar gerçek kişiler, onları stok bir yüzle göstermek yanıltıcı olurdu.
============================================================================= */
.konusmacilar {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.konusmaci {
  padding: 26px 20px; text-align: center;
  transition: transform .2s ease, border-color .2s ease;
}
/* `(hover: hover)` · Tur 75 — dokunmatikte `:hover` takılı kalıyor (K17). */
@media (hover: hover) {
  .konusmaci:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / .28); }
}
.konusmaci img {
  width: 68px; height: 68px; border-radius: 50%; margin-inline: auto;
  border: 2px solid rgb(255 255 255 / .22);
  box-shadow: 0 12px 30px -14px rgb(40 165 255 / .9);
}
.konusmaci b { display: block; margin-top: 16px; font-family: 'Sora', sans-serif; font-size: 1rem; color: var(--metin); }
.konusmaci small { display: block; margin-top: 3px; font-size: .84rem; color: var(--metin-2); }
.konusmaci .konu {
  display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgb(40 165 255 / .22); border: 1px solid rgb(134 207 255 / .35);
  font-size: .72rem; font-weight: 700; color: #aee0ff; letter-spacing: .04em;
}

/* =============================================================================
   2 · ETKİNLİK ŞERİDİ
   Kart ızgarası değil, tam genişlikte cam şerit: tarih rayı · görsel · metin ·
   eylem. Ana sayfada, k-05 gezilerde, k-06 eğitimlerde ve üye panelinde aynı.

   58rem altında ızgara alanları yeniden diziliyor (görsel üstte, tarih ve metin
   yan yana, eylem altta) — dört sütun dar ekranda okunmuyordu.
============================================================================= */
.etk-liste { display: grid; gap: 14px; }

.etk-satir {
  display: grid; gap: 14px 18px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "gorsel gorsel"
    "tarih  govde"
    "eylem  eylem";
  padding: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .etk-satir:hover {
    transform: translateY(-3px);
    border-color: rgb(255 255 255 / .26);
    box-shadow: var(--golge);
  }
}
.etk-tarih {
  grid-area: tarih; text-align: center; align-self: center;
  min-width: 64px; padding: 10px 8px; border-radius: var(--r-s);
  background: rgb(40 165 255 / .18); border: 1px solid rgb(134 207 255 / .3);
}
.etk-tarih b {
  display: block; font-family: 'Sora', sans-serif; font-size: 1.5rem;
  font-weight: 800; line-height: 1; color: var(--metin); font-variant-numeric: tabular-nums;
}
.etk-tarih span { display: block; margin-top: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #aee0ff; }

.etk-gorsel {
  grid-area: gorsel; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-s); border: 1px solid rgb(255 255 255 / .10);
}

/* --- Fotoğraf kırpma çerçevesi (zoom) -------------------------------------
   Odak zoom''u (`odak` = "X% Y% Z") `transform: scale()` ile uygulanıyor;
   taşan görüntüyü bu span KIRPIYOR (img'de overflow yok). img galeri-tetik
   olarak KALIYOR (lightbox tıklaması değişmez); span yalnız görsel kırpma.
   Zoom yoksa (scale 1) görünüm ESKİYLE BİREBİR. Yalnız arşiv kartları
   sarılıyor; canlı kart imgleri sade `.etk-gorsel` olarak kalıyor. */
.foto-kirp { display: block; overflow: hidden; }
.foto-kirp > img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* k-06: span grid hücresi + çerçeve; içteki img kendi çerçevesini bırakıyor. */
.etk-kapak { grid-area: gorsel; aspect-ratio: 16 / 9; border-radius: var(--r-s); border: 1px solid rgb(255 255 255 / .10); }
.etk-kapak > img { border: 0; border-radius: 0; aspect-ratio: auto; }
.etk-govde { grid-area: govde; min-width: 0; }
.etk-govde h3 { margin-top: 8px; }
.etk-govde p { margin-top: 6px; font-size: .9rem; color: var(--metin-2); }

.tur {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgb(17 215 255 / .14); border: 1px solid rgb(97 229 255 / .32);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--turk-acik);
}

.etk-eylem {
  grid-area: eylem; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .09);
}
.kontenjan { font-size: .8rem; color: var(--metin-3); }

/* Sağ sütunun durum yığını: rozet + kontenjan + aciliyet (`R.etkinlikDurumlari`) · 76-KE. Üç ekranda
   (anasayfa, k-05, k-06) ortak; önce k-05 ve k-06 aynı CSS'i ayrı ayrı taşıyordu, anasayfa hiç taşımıyordu. */
.etk-durumlar { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
@media (min-width: 58rem) {
  .etk-durumlar { align-items: flex-end; text-align: right; }
}
.son-uyari { font-size: .78rem; font-weight: 700; color: #ffc978; }

/* --- Durum rozeti --------------------------------------------------------
   panel.css'teki .durum kamu ekranlarında yok (panel yüklenmiyor). Renk sınıfı `durumlar[x].tur`
   alanından geliyor: rozetin hem metni hem rengi TEK kaynaktan çıksın. Rozet her zaman durumun ADINI
   yazıyor — renk tek başına bilgi taşımıyor (WCAG 1.4.1), iptal edilmiş etkinlik rengi görülmese de anlaşılıyor. */
.durum-rozet {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px; border: 1px solid;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.d-aktif   { background: rgb(17 215 255 / .14);  border-color: rgb(97 229 255 / .42); color: #adf2ff; }
.d-bekleme { background: rgb(240 165 46 / .14);  border-color: rgb(240 165 46 / .42); color: #ffc978; }
.d-pasif   { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .2); color: var(--metin-2); }
.d-hata    { background: rgb(255 107 107 / .14); border-color: rgb(255 138 138 / .45); color: #ffb1b1; }
.d-doldu   { background: rgb(104 158 255 / .16); border-color: rgb(104 158 255 / .45); color: #b9cdff; }

@media (min-width: 58rem) {
  .etk-satir {
    grid-template-columns: 76px 214px minmax(0, 1fr) auto;
    grid-template-areas: "tarih gorsel govde eylem";
    align-items: center; gap: 24px; padding: 16px 22px;
  }
  .etk-eylem {
    flex-direction: column; align-items: flex-end; gap: 10px;
    padding-top: 0; border-top: 0; border-left: 1px solid rgb(255 255 255 / .09);
    padding-left: 24px; align-self: stretch; justify-content: center;
  }
}

/* =============================================================================
   3 · GEZİLEN FİRMA KARTI
   Yatay kaydırmalı rayda (base.css `.ray`) duran görsel + üstünde cam künye.
   Ana sayfada özet şerit, k-05'te tam arşiv.
============================================================================= */
.gecmis-baslik {
  margin: clamp(46px, 6vw, 68px) 0 18px;
  font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: var(--mor-acik);
}
.firma { position: relative; flex: 0 0 clamp(200px, 46vw, 248px); }
.firma img { width: 100%; border-radius: var(--r); border: 1px solid rgb(255 255 255 / .1); }
/* k-05: kapak `.foto-kirp` ile sarılınca çerçeve span''e geçiyor (zoom kırpımı). */
.firma .foto-kirp { border-radius: var(--r); border: 1px solid rgb(255 255 255 / .1); }
.firma .foto-kirp > img { border: 0; border-radius: 0; }
/* CAM KALDIRILDI — Tur 34, kullanıcı kararı, ölçümle. Kaydırırken her
     karede arkasındaki yüzeyi yeniden bulanıklaştırmak, aurora katmanıyla
     birlikte kare hızını 19.5 FPS'e düşürüyordu. Opak zemin ZATEN yazılıydı
     (`@supports not` yedeği) — yani tasarımda karşılığı düşünülmüştü; o
     değer buraya taşındı ve ölü kalan `@supports` bloğu silindi.
     Cam yalnız üst menüde (`.ust`) kaldı. */
.firma figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 8px 14px; border-radius: 999px;
  background: rgb(7 24 34 / .74); border: 1px solid rgb(255 255 255 / .18);
  font-size: .84rem; font-weight: 700; color: var(--metin);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgb(8 27 37 / .72);
}

/* =============================================================================
   4 · KADRO KÜNYESİ
   Yönetim kurulu ve komite üyeleri. 15e-5-afis düzeninden alındı.

   Öncesinde her üye cam bir kartın içinde YUVARLAK portre taşıyordu, ama portreyi
   saran <span class="kisi-halka"> öğesine display verilmemişti: inline bir öğede
   width/height yok sayılır, bu yüzden 78x78'lik halka 148x317'ye yayılıyor ve
   portre 0.56 oranında dikey bir elipse eziliyordu — yüzler deforme görünüyordu.
   Yerine afişteki sıkı künye ızgarası: kare portreler, kart yok, isim altta.
============================================================================= */
/* ⛔ `auto-fill`, `auto-fit` DEĞİL · Tur 66 · KULLANICI BİLDİRDİ · ÖLÇÜLDÜ
   *"anasayfadaki ekibimiz kısmında 1 yetkili varken devasa gözüküyor."*

   İkisi arasındaki fark yalnız BOŞ SÜTUNLARDA görünüyor ve tam o yüzden
   sinsi: `auto-fit` boş izleri 0px'e ÇÖKERTİYOR ve kalan alanı dolu olana
   veriyor. Canlıda ölçüldü — tek kurul üyesiyle:

       grid-template-columns: 1140px 0px 0px 0px 0px 0px 0px 0px
       kart: 1140 × 1192 px

   Portre `aspect-ratio: 1/1` ve `width: 100%` olduğu için sütunla birlikte
   büyüyor: 1140px'lik bir yüz. Topluluk yeni olduğu sürece listelerin
   çoğu 1–2 kayıt taşıyor, yani bu HÂL İSTİSNA DEĞİL, VARSAYILAN.

   `auto-fill` boş izleri KORUYOR: kart adetten BAĞIMSIZ olarak aynı
   boyutta kalıyor — bir kişi de olsa on kişi de olsa.

   ⚠ MOBİLDE DAVRANIŞ DEĞİŞMİYOR: tek sütunu sağlayan şey `min(100%, X)`
   ve o duruyor. 380px'te ölçüldü, iki kipte de tek sütun.

   ⚠ KART GENİŞLİĞİ YİNE DE SABİT DEĞİL, SINIRLI: izler satırı eşit
   bölüyor, yani bir iz taban genişliğin iki katına ulaşamadan yenisi
   sığıyor. Aranan şey buydu — "adetten bağımsız", "her ekranda aynı
   piksel" değil. */
.kadro {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
}
/* Portre `.foto-kirp` ile sarılıyor (odak + zoom kırpımı, göç 047). Çerçeve
   (kenar · yuvarlaklık · hover kalkışı) span'e geçti; içteki <img> yalnız
   dolduruyor (`.foto-kirp > img` 100%×100% cover). Zoom `transform: scale`
   satır-içi `R.odakStil` ile geliyor ve span'in `overflow: hidden`'ı kırpıyor.
   `.firma .foto-kirp` ile aynı desen. */
.kadro .foto-kirp {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-s);
  border: 1px solid rgb(255 255 255 / .14);
  transition: border-color .2s ease, transform .2s ease;
}
.kadro .foto-kirp > img { border: 0; border-radius: 0; }
@media (hover: hover) {
  .kadro li:hover .foto-kirp { border-color: rgb(134 207 255 / .55); transform: translateY(-3px); }
}
.kadro b {
  display: block; margin-top: 10px; font-family: 'Sora', sans-serif;
  font-size: .9rem; line-height: 1.3; color: var(--metin);
}
.kadro small { display: block; margin-top: 2px; font-size: .78rem; color: var(--metin-3); }

/* =============================================================================
   5 · DUYURU KARTI
   Ana sayfada özet, k-08'de tam liste. Çekiliş duyurunun bir türü — ayrı bileşen
   değil, `.etiket.cekilis` ile ayrışan aynı kart.
============================================================================= */
.dy-liste {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.duyuru {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .duyuru:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / .28); }
}
.duyuru-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.etiket {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18);
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--metin-2);
}
.etiket.cekilis {
  background: rgb(63 132 255 / .18); border-color: rgb(104 158 255 / .42); color: var(--pembe-acik);
}
.duyuru-tarih { font-size: .78rem; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.duyuru b { display: block; font-family: 'Sora', sans-serif; font-size: 1rem; color: var(--metin); line-height: 1.3; }
.duyuru p { font-size: .87rem; color: var(--metin-2); }
.duyuru-oku { margin-top: auto; padding-top: 6px; font-size: .84rem; font-weight: 700; color: var(--mor-acik); }
.duyuru:hover .duyuru-oku { color: var(--turk-acik); }

/* =============================================================================
   6 · SPONSOR KAİDESİ
   Ortalanmış cam kaide + kademe blokları. Ana sayfada özet, k-10'da tam liste.
   Logolar indirilmiyor, `IMG.sponsorLogo` ile yerelde SVG kelime-marka olarak
   çiziliyor: gerçek kurum logoları tescilli marka ve "bunlar sponsorumuz" gibi
   yanlış bir beyan olurdu.
============================================================================= */
.sponsor-kaide {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 46px);
  border-radius: var(--r-l); text-align: center;
  box-shadow: var(--golge);
}
.sponsor-not { margin: 10px auto 0; max-width: 52ch; font-size: .84rem; color: var(--metin-3); }
.kademe { margin-top: 28px; }
.kademe h3 { font-size: .7rem; font-weight: 800; letter-spacing: .2em; color: var(--metin-3); margin-bottom: 14px; }
.kademe .slotlar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kademe img {
  max-width: 100%; border-radius: 12px; border: 1px solid rgb(255 255 255 / .1);
  opacity: .85; transition: opacity .2s;
}
.kademe img:hover { opacity: 1; }
/* ⭐ Tur 69 · ayrıntısı olan sponsorun logosu listeye götürüyor. Bağlantı
   yalnız bir sarmalayıcı: görsel kendi kenarlığını taşıyor, `<a>` fazladan
   çizgi ya da alt çizgi eklememeli. `display: flex` satır kutusunun altına
   düşen 4px boşluğu da kapatıyor (görsel `inline` olsaydı hizalama kayardı). */
.sp-slot-bag { display: flex; border-radius: 12px; text-decoration: none; }
.sp-slot-bag:hover img, .sp-slot-bag:focus-visible img { opacity: 1; }
.sponsor-kaide .btn { margin-top: 32px; }

/* =============================================================================
   7 · KARDEŞ SAYFA ŞERİDİ  (IEEE_K.altMenu üretiyor)
   Üst menüye sığmayan kurumsal sayfalar arasında gezinme. Dar ekranda yatay
   kayıyor — sarmalamak yerine kaydırmak, şeridin tek satırlık kimliğini
   koruyor. Kaydırılabilir olduğu için `tabindex="0"` gerekmiyor: içindeki
   bağlantılar zaten odaklanabilir, klavye onlarla geziyor (WCAG 2.1.1).
============================================================================= */
.alt-menu {
  margin-top: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.alt-menu::-webkit-scrollbar { display: none; }
.alt-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; width: max-content; min-width: 100%;
  border-bottom: 1px solid var(--cam-kenar);
}

/* ⛔ TELEFONDA KAYDIRMIYOR, SARIYOR · Tur 66 · 390px'te GÖZLE bulundu.
   Şerit dar ekranda yatay kayıyordu ve etkin sekme görünüre getirildiği için
   ŞERİT KENDİLİĞİNDEN KAYIYOR: `k-14`te ilk sekme "KVKK Aydınlatma Metni"
   yerine "K Aydınlatma Metni" olarak, kelime ortasından kesik duruyordu.
   `k-13` ve `u-11`de aynı kusur sağ kenarda ("Erişilebi").

   ⚠ Kaydırma İŞARETİ eklemek de bir seçenekti (tablolardaki `.tablo-ipucu`
   gibi) ve REDDEDİLDİ: burada üç-dört sekme var, sarınca iki satır ediyor
   ve HİÇBİRİ kesilmiyor. Bir işaret, okunamayan metni okunur yapmaz —
   yalnız devamının olduğunu söyler.

   ⚠ Üst sınır 34rem: masaüstünde şeridin tek satırlık kimliği korunuyor. */
@media (max-width: 33.99rem) {
  .alt-menu { overflow-x: visible; }
  .alt-menu ul { flex-wrap: wrap; width: auto; row-gap: 0; }
  .alt-menu a, .alt-menu span { padding: 0 12px; }
}
.alt-menu a,
.alt-menu span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; white-space: nowrap;
  font-size: .9rem; font-weight: 600; color: var(--metin-2);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
}
.alt-menu a:hover { color: var(--metin); border-bottom-color: var(--cam-kenar-guclu); }
/* Bulunduğun sayfa <span>, <a> değil — kendine giden bağlantı yanıltıcı.
   Bu yüzden renk tek başına anlam taşımıyor: alt çizgi de var. */
.alt-menu [aria-current="page"] {
  color: var(--metin); border-bottom-color: var(--turkuaz); cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .konusmaci, .etk-satir, .duyuru, .kadro .foto-kirp, .kademe img, .alt-menu a { transition: none; }
  .konusmaci:hover, .etk-satir:hover, .duyuru:hover, .kadro li:hover .foto-kirp { transform: none; }
}

/* =============================================================================
   ALTBİLGİ — MOBİL YOĞUNLUK

   Ölçüldü (k-01, footer.alt): 320px'te 1.291px = 1,84 ekran boyu · 390px'te
   1.198px = 1,42 ekran · 768px'te 1.172px. On altı sayfada aynı.

   Yüksekliğin çoğu 17 bağlantının 44px dokunma hedefinden geliyor. Bu bir
   hata değil, sitenin kendi Erişilebilirlik Beyanı'nın uygulaması —
   tipografi küçültmek o kararı geri almak olurdu, YAPILMIYOR.

   Kazanç bağlantı silmeden alınıyor:
     · MENÜ sütunu mobilde gizli — 330px. `C.nav`'ın aynı yedi bağlantısı
       üst menüde ve mobil menüde birebir duruyor (ölçüldü, href'ler aynı),
       yani hiçbir yol kapanmıyor.
     · IEEE (198px) ve SOSYAL (110px) mobilde katlı — bağlantılar duruyor,
       bir dokunuş uzakta.
     · Üst dolgu mobilde 48px → 32px.

   `.alt-son`a DOKUNULMUYOR: KVKK, Gizlilik ve Erişilebilirlik bağlantıları
   açıkta ve 44px hedeğinde kalıyor. Hukuki zorunluluk, tasarım tercihi değil.

   Bu kurallar aurora.css'i EZİYOR ama aurora.css'e yazılmıyor: o dosya kilitli
   ve düzen taşımıyor. bilesenler.css aurora'dan sonra yükleniyor ve altbilgiyi
   basan on altı sayfanın on altısı da onu bağlıyor (ölçüldü).
============================================================================= */
@media (max-width: 53.99rem) {
  .alt-sayfalar { display: none; }
  /* padding-block kısayolunu değil YALNIZ üstünü eziyoruz: alt dolgu (26px)
     aurora.css'te kalsın, iki yerde iki değer olmasın. */
  .alt { padding-top: 32px; }
}

/* Katlanır sütun. `open` özniteliğini kabuk.js veriyor (CSS bir <details>'i
   açamıyor); burası yalnız görünümü ayarlıyor. */
.alt-katla > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer;
  list-style: none;                 /* Firefox'un varsayılan üçgeni */
}
.alt-katla > summary::-webkit-details-marker { display: none; }   /* Safari */
.alt-katla > summary h3 { margin-bottom: 0; }
/* Kendi oku: yön açık/kapalı durumu RENGE değil BİÇİME yaslıyor. */
.alt-katla > summary::after {
  content: ''; width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid var(--metin-3); border-bottom: 2px solid var(--metin-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.alt-katla[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .alt-katla > summary::after { transition: none; }
}
/* Masaüstünde sütunlar yan yana; katlamanın kazandıracağı bir şey yok, başlık
   yine düz bir <h3> gibi görünüyor.

   ⛔ "GİBİ GÖRÜNÜYOR" YETMİYORDU — ÖLÇÜLDÜ · Tur 67 · KULLANICI BİLDİRDİ:
   *"anasayfanın da en altındaki menü ieee ve sosyal kısımları simetrik
     değil."*

   1280px'te altbilgi sütunlarının liste üst kenarları:

       MENÜ    y = 8270   (başlık sarmalı 14px)
       IEEE    y = 8292   (başlık sarmalı 44px)
       SOSYAL  y = 8292   (başlık sarmalı 44px)

   22px sapma. Sebep: `min-height: 44px` bir DOKUNMA HEDEFİ kuralı ve
   mobil için doğru — ama masaüstünde `<summary>` zaten tıklanmıyor
   (`cursor: default`, ok gizli). İşlevi kalmamış bir dokunma hedefi,
   yalnız listeyi 22px aşağı itiyordu.

   `.alt-sayfalar` düz bir `<div>` (`h3` + `ul`) ve `h3` `.alt h3`ün 8px
   alt boşluğunu alıyor; `.alt-katla > summary h3`ün alt boşluğu ise 0.
   Masaüstünde o 8px'i SARMALAYICIYA veriyoruz: üç sütun da
   `başlık + 8px` ile başlıyor.

   ⚠ MOBİLE DOKUNULMUYOR: orada sütunlar ALT ALTA ve `<summary>` gerçekten
   tıklanıyor. 44px hedef, erişilebilirlik zorunluluğu — bu kural yalnız
   54rem üstünde geçerli. */
@media (min-width: 54rem) {
  .alt-katla > summary { cursor: default; min-height: 0; margin-bottom: 8px; }
  .alt-katla > summary::after { display: none; }
}

/* --- Galeri lightbox ------------------------------------------------------
   Geçmiş etkinlik kartına tıklayınca açılan foto galerisi (render.js
   `R.galeriAc`). Koyu tam-ekran katman: öne çıkan büyük + küçük şerit.
   Renk anahtarları aurora.css'ten; k-04/05/06/07 ikisini de yüklüyor. */
.galeri-acik { overflow: hidden; }
.galeri-katman {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: clamp(16px, 4vw, 52px);
  /* Koyu tam-örtü. `backdrop-filter` YOK: K15 onu yasaklıyor (kaydırırken
     pahalı) ve zaten katman açıkken gövde kaydırması kilitli — arka planı
     opak zemin karartıyor, bulanıklığa gerek yok. */
  background: rgb(5 9 16 / .97);
}
.galeri-katman[hidden] { display: none; }
.galeri-govde { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(1080px, 100%); }
.galeri-buyuk {
  max-width: 100%; max-height: 66vh; width: auto; height: auto;
  object-fit: contain; border-radius: 14px; background: rgb(255 255 255 / .03);
  box-shadow: 0 24px 64px rgb(0 0 0 / .55);
}
.galeri-sayac { font-size: .82rem; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.galeri-serit { display: flex; gap: 8px; max-width: min(1080px, 100%); overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; }
.galeri-serit[hidden] { display: none; }
.galeri-kucuk {
  flex: 0 0 auto; width: 76px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: none;
  opacity: .55; transition: opacity .15s, border-color .15s;
}
.galeri-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri-kucuk:hover { opacity: .85; }
.galeri-kucuk.secili { opacity: 1; border-color: var(--turk-acik); }
.galeri-kucuk:focus-visible { outline: 2px solid var(--turk-acik); outline-offset: 2px; }
.galeri-kapat, .galeri-ok {
  position: absolute; display: grid; place-items: center; cursor: pointer; line-height: 1;
  border: 1px solid var(--cam-kenar); background: rgb(255 255 255 / .06); color: var(--metin); border-radius: 999px;
}
.galeri-kapat { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.6rem; }
.galeri-ok { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.9rem; }
.galeri-onceki { left: clamp(8px, 2vw, 24px); }
.galeri-sonraki { right: clamp(8px, 2vw, 24px); }
.galeri-ok[hidden] { display: none; }
.galeri-kapat:hover, .galeri-ok:hover { background: rgb(255 255 255 / .14); }
.galeri-kapat:focus-visible, .galeri-ok:focus-visible { outline: 2px solid var(--turk-acik); outline-offset: 2px; }
.galeri-tetik { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .galeri-kucuk { transition: none; } }

/* Ana sayfa sayı beyanı notu ("✓ topluluk beyanı") — büyük sayının altında
   küçük, vurgusuz; ziyaretçi sayının ölçülmüş mü beyan mı olduğunu görür. */
.sayi-not { display: block; margin-top: 5px; font-size: .72rem; font-style: normal; color: var(--metin-3); }

/* --- Kamu sayfası başlığı ve girişi ---------------------------------------

   ⛔ HEDEF `panel.css` DEĞİL BURASI VE BU ÖLÇÜLDÜ · Tur 66 · KULLANICI KARARI.
   Bu iki sınıfı tanımlayan dokuz `k-*` ekranından YEDİSİ `panel.css`
   yüklemiyor; dokuzu da bu dosyayı yüklüyor. Çekirdek `panel.css`e
   konsaydı yedi ekranda hiçbir şey uygulanmazdı ve taşıma sessizce
   işe yaramazdı.

   ⚠ ÇEKİRDEK = EN YAYGIN DÖRTLÜ (kullanıcı kararı): `k-01` · `k-02` ·
   `k-10` · `k-11` dördünde de BİREBİR aynı. Kalan beş ekran varyant olarak
   kendi tanımını taşımaya devam ediyor ve şu an olduğu gibi eziyor —
   görünümleri değişmiyor.

   ⚠ KULLANIM ≡ TANIM ÖLÇÜLDÜ (9/9 ve 5/5): bu sınıfları TANIMLAMADAN
   KULLANAN hiçbir ekran yok. Olsaydı çekirdek onlara YENİ bir görünüm
   verirdi ve taşıma "mekanik" olmaktan çıkardı.

   ⚠ VARYANTLAR BİLEREK SİLİNMEDİ: üst boşluk üç ayrı değerde
   (44 · 52 · 54px) ve alt boşluk beş ekranda SIFIR. Bunları tek değere
   indirmek görsel bir karar ve GÖZLE yapılmalı — araçlar okunabilirliği
   ölçmüyor (9. adım).
-------------------------------------------------------------------------- */
.sayfa-basi { padding-block: clamp(30px, 4.5vw, 54px) clamp(10px, 2vw, 18px); }

.sayfa-lead {
  margin-top: 18px; max-width: 58ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem); color: var(--metin-2);
}

/* =============================================================================
   SPONSOR GÖVDESİ · `.sd-*` · İKİ EKRAN TEK KAYNAK · Tur 69
   -----------------------------------------------------------------------------
   `k-15-sponsor-detay`ın kendi `<style>` bloğunda yazılıydı. Tur 69'da aynı
   gövde `k-10-sponsorlar` listesinde kartın İÇİNDE de çiziliyor (kullanıcı
   kararı: *"sürekli bir yere aktarıyor"*). İki ekrana kopyalamak
   `tutarlilik.mjs → ortakCssTekrari` kuralının tam yasakladığı şey; ortak
   katman burası.

   ⚠ METİN SÜTUNU SINIRLI, KUTUSU DEĞİL: 1180px genişlikte 200 karakterlik
   satır okunmuyor. `1ch` tuzağı bu depoda bir kez ölçüldü — 62ch Türkçe
   metinde ~78 karakter eder.
============================================================================= */
.sd-bolumler { display: grid; gap: clamp(20px, 3vw, 30px); padding-bottom: clamp(40px, 6vw, 72px); }
/* ⛔ `padding: 0` ŞART. Kamu stilinde bare `section` 102px dikey dolgu
   alıyor (tam sayfa bölümler için doğru) ve buradaki bölümler de
   `<section>`. Devralınca aralarında ~250px ölü boşluk oluşuyordu —
   ölçüldü, ekran görüntüsünde görüldü. Izgara boşluğu zaten `gap`ta. */
.sd-bolum { min-width: 0; padding: 0; }
.sd-bolum h2 {
  margin: 0 0 10px; font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
}
/* ⚠ METİN SÜTUNU SINIRLI, KUTUSU DEĞİL: 1180px genişlikte 200 karakterlik
   satır okunmuyor. `1ch` tuzağı bu depoda bir kez ölçüldü — 62ch Türkçe
   metinde ~78 karakter eder. */
.sd-metin { margin: 0; max-width: 62ch; color: var(--metin-2); line-height: 1.65; }

/* Adres bloğu: metin + eylem yan yana, dar ekranda alt alta. */
.sd-adres-satir { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
/* ⚠ `flex-grow: 0`. İlk yazımda `1 1 22rem` idi ve metin bütün satırı
   kaplayıp düğmeyi 1180px'lik kabın SAĞ UCUNA itiyordu: adres ile
   "Yol tarifi al" arasında yarım ekran boşluk. İkisi bir arada
   okunmalı — düğme adresin devamı, ayrı bir eylem değil. */
.sd-adres-satir .sd-metin { flex: 0 1 auto; }
.sd-harita-btn { flex: 0 0 auto; }
.sd-harita-not { margin: 8px 0 0; font-size: .78rem; color: var(--metin-3); }

/* Harita kutusu: boşken yer tutucu, açılınca çerçeve. İki hâlde de AYNI
   boyut — düğmeye basınca sayfa altındaki içerik zıplamasın. */
.sd-harita {
  margin-top: 14px; aspect-ratio: 16 / 9; max-height: 420px;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  border-radius: var(--r-s, 10px); overflow: hidden; text-align: center;
  background: rgb(255 255 255 / .04); border: 1px dashed rgb(255 255 255 / .16);
  padding: 16px;
}
.sd-harita[data-harita-acik] { display: block; padding: 0; border-style: solid; }
/* "Haritayı göster" düğmesi yer tutucunun ortasında (76-PQ): dar kutuda taşmasın. */
.sd-harita-ac { max-width: 100%; }
/* ⭐ 76-PQ · harita TIKLAYINCA yükleniyor (hukuk B15): yer tutucunun ortasında "Haritayı göster" düğmesi duruyor,
   çerçeve düğmeye basılınca geliyor (Tur 69-D'nin kendiliğinden yüklemesi geri alındı). Konumu olmayan sponsorda kutu
   HİÇ basılmıyor; JavaScript kapalıysa kutu boş kalır ve kenarlığı görünür — "burada bir harita olacaktı" demek ve
   doğrusu bu. Uyarı cümlesi (`.sd-harita-uyari`) kutunun altında, basmadan ÖNCE okunuyor. */
.sd-foto {
  padding: 0; border: 1px solid rgb(255 255 255 / .08); cursor: zoom-in;
  display: block; width: 100%;
}
.sd-foto:focus-visible { outline: 2px solid var(--turk-acik); outline-offset: 2px; }
.sd-harita-uyari { margin: 0; max-width: 46ch; font-size: .8rem; color: var(--metin-3); }
.sd-harita-cerceve { display: block; width: 100%; height: 100%; border: 0; }

/* Galeri: `a-30` arşiv galerisiyle aynı görsel dil, kendi ızgarası. */
.sd-galeri {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.sd-foto {
  margin: 0; border-radius: var(--r-s, 10px); overflow: hidden;
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08);
  aspect-ratio: 4 / 3;
}
.sd-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   AÇILIR KART · `k-10` listesinde · Tur 69
   Kart artık ayrı bir sayfaya bağlantı değil; ayrıntı KARTIN ALTINDA
   açılıyor. Kapı `<button aria-expanded>` — bağlantı DEĞİL: bağlantı
   "seni başka yere götürürüm" der ve ekran okuyucu da öyle okur.
--------------------------------------------------------------------------- */
/* ⚠ DİKEY DOLGU DOKUNMA HEDEFİ İÇİN, GÖRÜNÜM İÇİN DEĞİL. `denetle`de
   ölçüldü: dolgusuz kutu 20px yükseklikteydi ve `dokunma` eşiği 24px
   (WCAG 2.5.8). Eksi kenar boşluğu yerleşimi olduğu yerde tutuyor —
   başlık satırı büyümüyor, parmağın değdiği alan büyüyor. */
.ds-kapi {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 0; margin: -6px 0;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.ds-kapi .ok {
  flex: 0 0 auto; font-size: .8em; line-height: 1;
  transition: transform .18s ease;
}
.ds-kapi[aria-expanded="true"] .ok { transform: rotate(90deg); }
/* Kurum adı kapının içinde ayrı bir kutuda: `aria-label` kurulurken adın
   kendisi okunuyor (okun "›" karakteri karışmasın diye). Görsel olarak
   başlığın devamı — kendi biçimi yok, ama sınıfın CSS'i OLMALI:
   `bicem-baglanti` biçimsiz sınıfı kırmızı veriyor ve haklı, çünkü
   CSS'i olmayan sınıf ya ölü koddur ya unutulmuş biçimdir. */
.ds-kapi-ad { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ds-kapi .ok { transition: none; } }

/* Açılan gövde kartın devamı: üstten ince bir çizgiyle ayrılıyor, kendi
   kutusu YOK — ikinci bir kart görünümü "başka bir şey" demek olurdu. */
.ds-detay {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / .1);
}
.ds-detay .sd-bolumler { gap: clamp(14px, 2vw, 20px); padding-bottom: 0; }
.ds-detay .sd-bolum h4 {
  margin: 0 0 8px; font-size: .95rem; color: var(--metin-1);
}
/* Kart içinde harita 16/9 bırakılırsa dar sütunda ezik görünüyor. */
.ds-detay .sd-harita { aspect-ratio: 4 / 3; max-height: 300px; }
.ds-detay .sd-galeri { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* ⛔ KARTIN İÇİNDE, AÇILIR PANELİN DIŞINDA · `denetle`de ölçüldü.
   Önce panelin içindeydi ve `gezinme` haklı olarak kırmızı verdi:
   *"hiçbir yerden ulaşılamayan 1 ekran: k-15-sponsor-detay"*. Araç
   GÖRÜNÜR bağlantıları sayıyor; kapalı bir panelin içindeki bağlantı
   ziyaretçi için de yok demektir. Paylaşmak isteyen kartı açmak zorunda
   kalmamalı, `k-15` de sitenin gezinme grafiğinden düşmemeli.
   ⚠ Küçük ve ikincil: asıl akış kartın kendisi; bu bağlantı yalnız
   "bu kurumun sayfasını paylaşayım" diyen için. */
.ds-kalici {
  display: inline-block; margin-top: 10px; padding: 6px 0;
  font-size: .78rem; color: var(--metin-3);
}
.ds-kalici:hover, .ds-kalici:focus-visible { color: var(--metin-2); }

/* Açık kart satırın tamamını kaplıyor — ölçüldü: üç sütunlu ızgarada
   açılan kart kendi dar sütununda kalınca harita ~230px'e sıkışıyor,
   yanında yarım ekran boş duruyordu. */
.destekci.ds-acik, .gecmis-oge.ds-acik { grid-column: 1 / -1; }
/* Tam genişlikte harita 1180px'e yayılmamalı: bir kafenin konumu için
   o kadar piksel bilgi taşımıyor, yalnız sayfayı uzatıyor. */
.ds-detay .sd-harita { max-width: 560px; }
.ds-detay .sd-bolumler { max-width: 72ch; }