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

/* --------------------------------------------------------------------------
   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); }