/* ==========================================================================
   EEMK — base.css (Zenit teması) üzerine eklenen özel stiller.
   base.css'e dokunulmaz; tüm eklemeler ve düzeltmeler bu dosyadadır.
   ========================================================================== */

/* ---------------------------------------------------------------------------
 * Üyelik başvurusu penceresi
 *
 * Başvuru formuna gitmeden önce ad ve e-posta alınır. Sayfanın üstünde koyu
 * bir katman açılır; arka plan kaydırması durur ki pencere kaybolmasın.
 * --------------------------------------------------------------------------- */
.basvuru-katman {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 14, 28, 0.72);
  animation: basvuru-belir 0.18s ease;
}

body.basvuru-acik { overflow: hidden; }

.basvuru-kart {
  position: relative;
  width: min(30rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 1rem;
  background: #fff;
  color: var(--base-color-brand--black, #131313);
  box-shadow: 0 24px 60px rgba(4, 10, 24, 0.35);
}

.basvuru-kapat {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7688;
  padding: 0.25rem 0.5rem;
}

.basvuru-kapat:hover { color: #131313; }

.basvuru-baslik { margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.25; }

.basvuru-aciklama {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5b6b84;
}

.basvuru-etiket {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.basvuru-alan {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #d8dee9;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  background: #fbfcfe;
  color: inherit;
}

.basvuru-alan:focus {
  outline: 2px solid #3576fd;
  outline-offset: 1px;
  background: #fff;
}

.basvuru-not {
  margin: -0.35rem 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6b7688;
}

.basvuru-hata {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: #ffe9ec;
  color: #a3182f;
  font-size: 0.875rem;
  line-height: 1.45;
}

.basvuru-dugmeler { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.basvuru-dugmeler .button { flex: 1 1 auto; text-align: center; }
.basvuru-dugmeler button[disabled] { opacity: 0.6; cursor: wait; }

@keyframes basvuru-belir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .basvuru-katman { animation: none; }
}

/* --------------------------------------------------------------------------
   1) Logo
   Kulübün resmî logosu siyah çizimlidir; navbar ve footer koyu zeminli
   olduğu için oralarda beyaza çevrilmiş sürümleri kullanılır
   (images/eemk-*-beyaz.png). Açık zeminli bölümlerde siyah sürüm kullanılır.

   - Navbar: yalnız amblem + yazı  → ince ve okunaklı kalsın diye
   - Footer: resmî tam kilit       → logonun rahat durabildiği yer
   -------------------------------------------------------------------------- */
.eemk-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--base-color-brand--white);
  text-decoration: none;
}

.eemk-logo_mark {
  flex: none;
  width: auto;
  height: 2.5rem;
}

/* Footer'daki resmî tam kilit (amblem + EEMK yazısı) */
.eemk-footer-logo {
  display: block;
  width: auto;
  height: 5.5rem;
}

/* Açık zeminli bölümlerde kullanılan siyah kilit */
.eemk-inline-logo {
  display: block;
  width: auto;
  height: 7rem;
}

@media screen and (max-width: 479px) {
  .eemk-logo_mark { height: 2.125rem; }
  .eemk-footer-logo { height: 4.5rem; }
  .eemk-inline-logo { height: 5.5rem; }
}

.eemk-logo_text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.eemk-logo_name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.eemk-logo_sub {
  margin-top: 0.28rem;
  color: var(--background-gray--gray400);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media screen and (max-width: 479px) {
  .eemk-logo_name { font-size: 1.25rem; }
  .eemk-logo_sub { font-size: 0.5rem; }
}

/* --------------------------------------------------------------------------
   2) Scroll ile beliren bloklar
   Gizli başlangıç durumu sadece JS açıkken uygulanır; JS çalışmazsa
   içerik normal görünür (Webflow'daki "opacity:0 kalma" hatasına karşı).
   -------------------------------------------------------------------------- */
html.js-on .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

html.js-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.js-on .reveal.delay-1 { transition-delay: 0.08s; }
html.js-on .reveal.delay-2 { transition-delay: 0.16s; }
html.js-on .reveal.delay-3 { transition-delay: 0.24s; }

/* Güvenlik ağı: geçiş herhangi bir nedenle tamamlanmazsa (arka planda kalmış
   sekme, düşük güç modu, azaltılmış hareket) blok görünmez kalmasın.
   eemk.js bu sınıfı gerektiğinde ekler. */
html.js-on .reveal.reveal-snap {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-on .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Filtre listelerindeki kartlar her zaman görünürdür. Giriş hareketi
   bilinçli olarak yalnızca transform üzerinden yapılır — animasyon
   duraklarsa (arka planda kalmış sekme) kart yine de okunur kalır.
   Opaklık asla animasyona bağlanmaz. */
@keyframes eemk-card-in {
  from { transform: translateY(0.75rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .blog58_list > [data-category]:not([hidden]) {
    animation: eemk-card-in 0.35s ease;
  }
}

/* --------------------------------------------------------------------------
   3) Hero
   -------------------------------------------------------------------------- */
.hero-eyebrow {
  color: var(--background-gray--gray300);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
}

.hero-sub {
  max-width: 34rem;
  color: var(--background-gray--gray200);
  font-size: 1.125rem;
  font-weight: 500;
}

.header88_card-content .button-group { margin-top: 0.5rem; }

/* Şablonun köşegen karartması tek başına yetmiyor: hero fotoğrafının parlak
   orta bölgesinde üst etiket ve alt başlık okunmuyordu. Metnin oturduğu alt
   bölgeye ikinci bir karartma ekleniyor. */
.image-overlay-layer.home_hero {
  background-image:
    linear-gradient(45deg, #131313d9, #13131326),
    linear-gradient(to top, #131313d9 0%, #13131359 35%, #13131300 65%);
}

/* Hero başlığı satır aralığı: üç satır alt alta okunaklı dursun. */
.heading-style-oversized.hero-home { line-height: 1.05; }

.hero-lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* --------------------------------------------------------------------------
   4) Sayılar şeridi
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-grid .portfolio-header6_metatag-item { padding-left: 1.5rem; }

.stat-value {
  color: var(--base-color-brand--white);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  margin-top: 0.75rem;
  color: var(--background-gray--gray300);
  font-size: 1rem;
  font-weight: 600;
}

.stat-note {
  margin-top: 0.25rem;
  color: var(--background-gray--gray500);
  font-size: 0.8125rem;
}

@media screen and (max-width: 991px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media screen and (max-width: 479px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5) İlgi alanları kartlarında karşılıklı sönümleme
   (Zenit'in jQuery hover davranışının birebir karşılığı)
   -------------------------------------------------------------------------- */
.layout423_card-content {
  opacity: 1;
  transition: opacity 0.3s;
}

.layout423_card-content.inactive { opacity: 0.25; }

/* --------------------------------------------------------------------------
   6) Filtre çubuğu (Etkinlikler / Projeler)
   -------------------------------------------------------------------------- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filterbar_chip {
  border: 1px solid var(--background-gray--gray300);
  border-radius: 2rem;
  background-color: transparent;
  color: var(--background-gray--gray600);
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.filterbar_chip:hover {
  border-color: var(--base-color-neutral--black);
  color: var(--base-color-neutral--black);
}

.filterbar_chip[aria-pressed="true"] {
  border-color: var(--base-color-neutral--black);
  background-color: var(--base-color-neutral--black);
  color: var(--base-color-brand--white);
}

.filter-empty {
  color: var(--background-gray--gray500);
  padding: 3rem 0;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   7) Kart üstü meta satırı (tarih • yer)
   -------------------------------------------------------------------------- */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--background-gray--gray500);
  font-size: 0.875rem;
  font-weight: 600;
}

.meta-row .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Dar ekranda satır kaydığında ayırıcı nokta boşta kalıyor; alt alta diz. */
@media screen and (max-width: 479px) {
  .meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .meta-row .dot { display: none; }
}

/* --------------------------------------------------------------------------
   8) Kurum listesi
   "Sponsor" değil — yalnızca etkinliklerde yer almış kurum adları.
   Logo kullanılmaz; izin alınmadan logo eklenmemelidir.
   -------------------------------------------------------------------------- */
.orglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px;
}

/* Ayırıcı çizgiler kutu gölgesiyle çizilir; böylece son satırda boş kalan
   hücreler arka planı göstermez. */
.orglist_item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: 1rem;
  box-shadow: 0 0 0 1px var(--background-gray--gray800);
  background-color: var(--base-color-brand--black);
  color: var(--background-gray--gray300);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s, background-color 0.2s;
}

.orglist_item:hover {
  background-color: var(--base-color-neutral--neutral-darkest);
  color: var(--base-color-brand--white);
}

/* --------------------------------------------------------------------------
   9) Bilgi / uyarı kutusu (iletişim ve KVKK sayfaları)
   -------------------------------------------------------------------------- */
.notice {
  border-left: 3px solid var(--background-gray--gray400);
  background-color: var(--background-gray--gray100);
  padding: 1.25rem 1.5rem;
  color: var(--background-gray--gray700);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.notice.on-dark {
  border-left-color: var(--background-gray--gray600);
  background-color: #1c1c1c;
  color: var(--background-gray--gray300);
}

.notice strong { color: inherit; }

/* --------------------------------------------------------------------------
   10) Ekip / departman kartları
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--background-gray--gray200);
  border-radius: 0.5rem;
  background-color: var(--base-color-neutral--white);
  padding: 1.75rem;
}

.team-card_avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background-color: var(--base-color-brand--black);
  color: var(--base-color-brand--white);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.team-card_name {
  color: var(--text-color--headings);
  font-size: 1.125rem;
  font-weight: 700;
}

.team-card_role {
  color: var(--background-gray--gray600);
  font-size: 0.9375rem;
  font-weight: 600;
}

.team-card_note {
  color: var(--background-gray--gray500);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   11) Tanım listesi (İletişim bilgileri)
   -------------------------------------------------------------------------- */
.deflist {
  display: grid;
  gap: 1.75rem;
  margin: 0;
}

.deflist dt {
  margin-bottom: 0.35rem;
  color: var(--background-gray--gray500);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deflist dd {
  margin: 0;
  color: var(--text-color--headings);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}

.deflist dd a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   12) Amaç / madde listesi
   -------------------------------------------------------------------------- */
.aim-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aim-list li {
  border-top: 1px solid var(--background-gray--gray200);
  padding-top: 1.25rem;
  color: var(--background-gray--gray600);
  font-size: 1rem;
  line-height: 1.6;
}

.aim-list li b {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-color--headings);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
  .aim-list { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   13) Form geri bildirimi (yerel kurulumda sunucu yok)
   -------------------------------------------------------------------------- */
.form-note {
  margin-top: 1rem;
  color: var(--background-gray--gray500);
  font-size: 0.875rem;
}

.form_input.is-select-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23475467' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

/* --------------------------------------------------------------------------
   14) Küçük düzeltmeler
   -------------------------------------------------------------------------- */

/* Yer tutucu SVG'ler gri filtre altında sönükleşmesin. */
.layout359_image.is-placeholder,
.layout423_image.is-placeholder,
.layout395_card-image.is-placeholder,
.blog58_image.is-placeholder,
.blog62_image.is-placeholder {
  filter: none;
  background-color: #161616;
}

/* Metnin üstüne binen kart görsellerinde çizgiler geri planda kalsın. */
.layout423_image.is-placeholder { opacity: 0.4; }

/* Navbar butonu iki satıra kırılmasın; kolon içeriğe göre genişlesin. */
.button.is-navbar2-button { white-space: nowrap; }

/* Kart görselleri sabit oranda dursun (yer tutucu ↔ fotoğraf geçişi bozulmasın). */
.blog58_image,
.blog62_image,
.layout395_card-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.blog62_image { aspect-ratio: 4 / 3; }

/* Aktif menü bağlantısı */
.navbar2_link.w--current,
.navbar2_dropdown-link.w--current { color: var(--base-color-brand--white); }

/* İç sayfa başlığı: hero kadar yüksek olmasın; yer tutucularla aynı
   teknik ızgara dokusunu kullanır. */
.header88_card.is-page {
  height: auto;
  min-height: 22rem;
  padding-top: 6rem;
  padding-bottom: 4rem;
  background-color: #1a1a1a;
  background-image:
    linear-gradient(#242424 1px, transparent 1px),
    linear-gradient(90deg, #242424 1px, transparent 1px);
  background-size: 40px 40px;
}

.header88_card.is-page .header88_card-content { max-width: 52rem; }

.header88_card.is-page .hero-sub { max-width: 46rem; }

/* Yayın öncesi kaldırılacak editör notları (README'ye bakınız). */
.notice.is-editor-note::before {
  content: "Site yöneticisi notu";
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .header88_card.is-page { min-height: 18rem; padding-top: 4rem; }
}

/* Koyu zeminli bölümlerde gövde metni okunaklı kalsın. */
.text-color-white p,
.text-color-white li { color: var(--background-gray--gray300); }

.text-color-white .text-style-tagline { color: var(--background-gray--gray400); }

/* Panel → Site Yönetimi → Görünüm ayarlarının karşılığı. */
html[data-density="compact"] .padding-section-large {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

html[data-density="comfortable"] .padding-section-large {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

html.anim-off .reveal,
html.js-on.anim-off .reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

html.anim-off .blog58_list > [data-category]:not([hidden]) { animation: none; }

/* Uzun kurum/etkinlik adlarında taşmayı engelle.
   "anywhere" değil "break-word": kelime ancak hiç sığmıyorsa bölünür. */
.heading-style-h3,
.heading-style-h4,
.heading-style-h5 { overflow-wrap: break-word; }

/* İlgi alanları kartları dar olduğundan başlık kart genişliğiyle ölçeklenir;
   aksi hâlde "Otomasyon" gibi uzun kelimeler ortadan bölünüyor. */
.layout423_card .heading-style-h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }

/* ---------------------------------------------------------------------------
 * Bağlantılı kartlar
 *
 * Bir içeriğe adres girildiğinde kartın tamamı <a> olarak render edilir.
 * Adres yoksa kart <div> kalır ve hiçbir tıklama ipucu vermez — kullanıcı
 * boşuna tıklamasın diye imleç ve hover efekti yalnız .is-linked'e uygulanır.
 * --------------------------------------------------------------------------- */
.blog58_item-link.is-linked,
.blog62_item-link.is-linked {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blog58_item-link.is-linked:hover,
.blog62_item-link.is-linked:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(8, 20, 45, .16);
}

.blog58_item-link.is-linked:hover .blog58_image,
.blog62_item-link.is-linked:hover .blog62_image {
  transform: scale(1.04);
}

.blog58_item-link.is-linked:focus-visible,
.blog62_item-link.is-linked:focus-visible {
  outline: 2px solid var(--eemk-mavi, #0b2f6b);
  outline-offset: 3px;
}

/* Hareket azaltma tercihi olan kullanıcılarda yalnız gölge değişir. */
@media (prefers-reduced-motion: reduce) {
  .blog58_item-link.is-linked,
  .blog62_item-link.is-linked { transition: box-shadow .2s ease; }
  .blog58_item-link.is-linked:hover,
  .blog62_item-link.is-linked:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Duyuru bandı
 *
 * Bu stiller daha önce yalnız admin.css içindeydi; halka açık sayfalar o
 * dosyayı yüklemediği için bant tamamen stilsiz çıkıyordu — yazı sayfanın
 * sol kenarına yapışık, boşluksuz. Artık burada.
 *
 * Yazı şerit hâlinde kayar. İçerik JavaScript tarafından iki kez basılır;
 * ikinci kopya birincinin bittiği yerden devam ettiği için döngü dikişsiz
 * görünür ve bant hiç boş kalmaz.
 * --------------------------------------------------------------------------- */
.site-announcement {
  position: relative;
  overflow: hidden;
  background-color: var(--base-color-brand--primary, #3576fd);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 0.6rem 0;
  /* Kenarlarda yumuşak geçiş: yazı birden belirip kaybolmasın */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.site-announcement_track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Adım ve süre JavaScript tarafından ölçülüp yazılır (bkz. duyuruBandi). */
  animation: eemk-duyuru-kay 24s linear infinite;
}

.site-announcement_group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 4rem;
  white-space: nowrap;
}

.site-announcement a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 700;
}

.site-announcement a:hover { text-decoration-thickness: 2px; }

/* Üzerine gelince durur — okumak ya da bağlantıya tıklamak için. */
.site-announcement:hover .site-announcement_track,
.site-announcement:focus-within .site-announcement_track {
  animation-play-state: paused;
}

/*
 * Şerit soldan sağa akar: tam bir kopya boyu kadar.
 *
 * --eemk-duyuru-adim bir kopyanın genişliğidir (eksi işaretli). Döngü başa
 * döndüğünde görüntü birebir aynı olduğu için dikiş görünmez. Değer
 * yazılmamışsa yarım şerit varsayılır — iki kopyalı hâl için doğru sonuç.
 */
@keyframes eemk-duyuru-kay {
  from { transform: translate3d(var(--eemk-duyuru-adim, -50%), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/*
 * Hareket azaltma tercihi: kaymak yerine ortalanmış sabit yazı.
 * Vestibüler rahatsızlığı olan kullanıcılar için sürekli hareket sorun.
 */
@media (prefers-reduced-motion: reduce) {
  .site-announcement {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0.6rem 5%;
  }
  .site-announcement_track { width: 100%; animation: none; justify-content: center; }
  .site-announcement_group { padding-right: 0; white-space: normal; text-align: center; }
  .site-announcement_group + .site-announcement_group { display: none; }
}

/*
 * Dar ekran: kenar solması dar tutulur — 3rem'lik geçiş 375 piksellik bir
 * ekranda bandın dörtte birini soluk bırakıyordu.
 */
@media screen and (max-width: 767px) {
  .site-announcement {
    font-size: 0.8125rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  }
  .site-announcement_group { padding-right: 2.5rem; }
}

/* ---------------------------------------------------------------------------
 * Departman kartındaki kişiler
 *
 * Departman adının hemen altında, adın yanında görevi. Kim ne yapıyor tek
 * bakışta görünsün; departmanın açıklaması listenin altında kalır.
 * --------------------------------------------------------------------------- */
.dep-kisiler {
  list-style: none;
  margin: 0.6rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dep-kisi {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.dep-kisi_ad { font-weight: 600; }

.dep-kisi_gorev {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(53, 118, 253, 0.1);
  color: #2a5bc4;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .dep-kisi { flex-wrap: wrap; gap: 0.25rem; }
}

/* ---------------------------------------------------------------------------
 * Departman kartları (Ekipler sayfası)
 *
 * Kim hangi departmanda ne yapıyor bilgisi sayfaya elle yazılıyor: kulübün
 * resmî organizasyon şemasından geliyor ve dönemde bir değişiyor. Metinler
 * panelden Sayfa Metinleri bölümünden düzenlenebilir.
 * --------------------------------------------------------------------------- */
.dep-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.25rem;
}

.dep-kart {
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid rgba(19, 19, 19, 0.1);
  border-radius: 0.9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.dep-kart_ust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dep-kart_kod {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--base-color-brand--black, #131313);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dep-kart_ad {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.dep-kart_not {
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(19, 19, 19, 0.08);
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5b6b84;
}

/* ---------------------------------------------------------------------------
 * 15) Renk ve canlılık
 *
 * Şablon her fotoğrafı siyah-beyaza çeviriyordu; panelden yüklenen etkinlik,
 * proje ve haber fotoğrafları artık kendi renkleriyle görünür. Koyu/açık
 * zemin düzeni korunur, yalnızca marka mavisi vurgu rengi olarak eklenir.
 * --------------------------------------------------------------------------- */
:root {
  --eemk-mavi: var(--base-color-brand--primary, #3576fd);
  --eemk-mavi-koyu: var(--base-color-brand--primary-dark, #1656eb);
  --eemk-mavi-acik: var(--base-color-brand--primary-light, #89affd);
  --eemk-lacivert: #0a1730;
}

.header88_background-image,
.layout359_image,
.layout395_card-image,
.layout423_image,
.blog58_image,
.blog62_image,
.team8_image { filter: none; }

/* Fotoğraflar biraz daha canlı, hover'da yumuşak büyüme. */
.layout359_image:not(.is-placeholder),
.layout395_card-image:not(.is-placeholder),
.blog58_image:not(.is-placeholder),
.blog62_image:not(.is-placeholder) {
  filter: saturate(1.1) contrast(1.03);
  transition: transform 0.4s ease;
}

/* Yer tutucu çizimler gri yerine mavi tonda. */
.layout359_image.is-placeholder,
.layout423_image.is-placeholder,
.layout395_card-image.is-placeholder,
.blog58_image.is-placeholder,
.blog62_image.is-placeholder {
  filter: sepia(1) saturate(4) hue-rotate(180deg) brightness(0.95);
}

/* Hero: düz siyah karartma yerine lacivert → mavi geçiş. Metnin oturduğu
   alt bölge koyu kalır, okunabilirlik değişmez. */
.image-overlay-layer.home_hero {
  background-image:
    linear-gradient(45deg, rgba(10, 23, 48, 0.9), rgba(53, 118, 253, 0.22)),
    linear-gradient(to top, rgba(10, 23, 48, 0.85) 0%, rgba(10, 23, 48, 0.35) 35%, rgba(10, 23, 48, 0) 65%);
}

.hero-lines > :last-child { color: var(--eemk-mavi-acik); }

/* Üst etiketler ve sayılar vurgu renginde. */
.text-style-tagline { color: var(--eemk-mavi-koyu); }
.text-color-white .text-style-tagline,
.section_header88 .text-style-tagline { color: var(--eemk-mavi-acik); }
.stat-value { color: var(--eemk-mavi-acik); }
.stat-grid .portfolio-header6_metatag-item { border-left-color: var(--eemk-mavi); }

/* Menü */
.navbar2_link:hover,
.navbar2_dropdwn-toggle:hover { color: var(--eemk-mavi-acik); }
.navbar2_link.w--current { box-shadow: inset 0 -2px 0 var(--eemk-mavi); }

.button.is-navbar2-button {
  border-color: var(--eemk-mavi-koyu);
  background-color: var(--eemk-mavi-koyu);
  color: #fff;
}
.button.is-navbar2-button:hover {
  border-color: var(--base-color-brand--primary-darker, #113fa2);
  background-color: var(--base-color-brand--primary-darker, #113fa2);
  color: #fff;
}

/* Siyah ana butonlar hover'da maviye döner. */
.button:not(.is-secondary):not(.is-link):not(.is-navbar2-button):hover {
  border-color: var(--eemk-mavi-koyu);
  background-color: var(--eemk-mavi-koyu);
  color: #fff;
}
.button.is-secondary:hover {
  border-color: var(--eemk-mavi-koyu);
  background-color: var(--eemk-mavi-koyu);
  color: #fff;
}

/* Filtre çipleri, kurum listesi, kart ikonları */
.filterbar_chip:hover { border-color: var(--eemk-mavi); color: var(--eemk-mavi-koyu); }
.filterbar_chip[aria-pressed="true"] {
  border-color: var(--eemk-mavi-koyu);
  background-color: var(--eemk-mavi-koyu);
  color: #fff;
}

.orglist_item:hover {
  background-color: var(--eemk-lacivert);
  color: var(--eemk-mavi-acik);
}

.team-card_avatar,
.dep-kart_kod {
  background: linear-gradient(135deg, var(--eemk-mavi-koyu), var(--eemk-lacivert));
}

.notice { border-left-color: var(--eemk-mavi); }

/* Panel girişi: bilgi mesajı (ör. "Parola sıfırlama bağlantısı gönderildi")
   hata gibi kırmızı görünmesin. Panel bu mesaja is-info sınıfını verir. */
.admin-login_error.is-info {
  background-color: #ecfdf3;
  color: #027a48;
}