.hero {
  padding: 3rem 0 2.5rem;
}

.hero-ic {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

.hero-metin h1 {
  margin-bottom: 0.75rem;
}

.hero-metin p {
  color: var(--metin-soluk);
  font-size: 1.02rem;
  max-width: 25rem;
}

.hero-butonlar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* --- Hero slaytı --- */

.hero-gorsel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.hero-kutu {
  aspect-ratio: 20 / 11;
}

/* Metnin okunması için görselin altına koyu geçiş bindiriliyor. */
.hero-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(0 0 0 / 0.1) 30%, rgb(0 0 0 / 0.72) 62%);
}

.hero-slayt-metin {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Sağdaki ok düğmesiyle çakışmasın diye sağdan ek boşluk bırakılıyor. */
  width: min(56%, 23rem);
  padding: 1.5rem 3.5rem 2.5rem 1.75rem;
  color: #fff;
}

.hero-slayt-metin h2 {
  font-size: 1.35rem;
  margin: 0.55rem 0 0.4rem;
  color: #fff;
}

.hero-slayt-metin p {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  color: #dfe1e6;
}

.hero-bag {
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}

.hero-bag:hover {
  text-decoration: underline;
}

.rozet {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 0.25rem;
  background: var(--kirmizi);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rozet-ustte {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
}

.hero-ok {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: rgb(255 255 255 / 0.9);
  color: var(--metin);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.hero-ok:hover {
  background: #fff;
}

.hero-ok.sol {
  left: 0.85rem;
}
.hero-ok.sag {
  right: 0.85rem;
}

.hero-noktalar {
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0;
}

/*
 * Nokta 8x8 piksellik bir düğmeydi; parmakla isabet ettirmek neredeyse
 * imkânsız ve WCAG'in 24 piksel alt sınırının altında. Düğme 24x24'e
 * çıkarıldı, nokta ise ::before ile aynı boyutta çiziliyor — görünüş
 * değişmedi, dokunma alanı büyüdü.
 */
.hero-noktalar button {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-noktalar button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.45);
}

.hero-noktalar button.aktif::before {
  background: var(--kirmizi);
}

/* --- Pano (konseptteki beyaz çerçeveli bloklar) --- */

.pano {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.bos-bilgi {
  color: var(--metin-cok-soluk);
  font-size: 0.9rem;
  margin: 0;
}

/* --- Etkinlikler --- */

.etkinlik-duzen {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.one-cikan-etkinlik {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.25rem;
  align-items: center;
}

.one-cikan-etkinlik .gorsel-kutu {
  position: relative;
  border-radius: var(--radius-kucuk);
  aspect-ratio: 4 / 3;
}

.one-cikan-metin h3 {
  font-size: 1.3rem;
  margin: 0.35rem 0 0.5rem;
}

.one-cikan-metin .buton {
  margin-top: 0.9rem;
}

.yer {
  display: block;
  font-size: 0.85rem;
  color: var(--metin-soluk);
  margin: 0;
}

.etkinlik-listesi {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.etkinlik-satir {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  background: var(--zemin-acik);
  transition: border-color 0.15s ease;
}

.etkinlik-satir:hover {
  border-color: var(--kirmizi);
}

.etkinlik-satir h4 {
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}

.tarih-cipi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  background: var(--zemin);
  line-height: 1.1;
}

.tarih-cipi strong {
  font-size: 1.15rem;
}

.tarih-cipi span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--kirmizi);
  letter-spacing: 0.04em;
}

/* --- Projeler & Araçlar --- */

/*
 * Kendi sütun tanımı var: paylaşılan `.izgara-2` en dar sütunu 20rem
 * (320px) sayıyor ve 320px genişliğindeki ekranda kapsayıcı dolgusuyla
 * birlikte satırı taşırıyordu.
 */
.arac-izgara {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.25rem;
}

@media (max-width: 48rem) {
  .arac-izgara {
    grid-template-columns: 1fr;
  }
}

.arac-kart {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  background: var(--zemin-acik);
}

.arac-kart h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.arac-kart p {
  font-size: 0.875rem;
  color: var(--metin-soluk);
  margin: 0 0 0.5rem;
}

/*
 * Araç kartı ikonu. Emoji yerine çizgi ikon kullanılıyor (bkz. page.tsx);
 * rengi kart zemininin koyu tonu, böylece üç kart tek bir sistem gibi
 * duruyor ve marka kırmızısıyla çakışmıyor.
 */
.arac-ikon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-kucuk);
  flex-shrink: 0;
  color: var(--metin-soluk);
}

.arac-kart:first-child .arac-ikon {
  color: var(--kirmizi);
}

.yakinda-rozet {
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
  background: var(--cizgi);
  color: var(--metin-soluk);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bag.pasif {
  /* Değişken artık açık zeminde de AA'yı geçiyor; ayrı ton gerekmiyor. */
  color: var(--metin-cok-soluk);
  cursor: default;
}

/* --- Blog + bülten --- */

/* Blog panosu tam genişlik değil; varsayılan ızgara asgari genişliği burada
   üç kartı yan yana sığdırmıyordu. */
.blog-duzen .izgara-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 60rem) {
  .blog-duzen .izgara-3 {
    grid-template-columns: 1fr;
  }
}

.blog-duzen {
  display: grid;
  grid-template-columns: 2.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.bulten-pano {
  background: var(--zemin-acik);
}

.bulten-ikon {
  font-size: 1.75rem;
  color: var(--kirmizi);
  margin-bottom: 0.5rem;
}

.bulten-pano h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.bulten-pano p {
  font-size: 0.875rem;
  color: var(--metin-soluk);
}

/* Açık zeminde bülten formu */
.bulten-acik .bulten-satir {
  flex-direction: column;
}

.bulten-acik input[type='email'] {
  background: var(--zemin);
  border-color: var(--cizgi);
  color: var(--metin);
}

.bulten-acik input[type='email']::placeholder {
  color: var(--metin-cok-soluk);
}

.bulten-acik .onay {
  color: var(--metin-soluk);
}

.bulten-acik .onay a {
  color: var(--metin);
}

.bulten-acik .bulten-sonuc {
  color: var(--metin-soluk);
}

/* --- Üyelik şeridi --- */

.uyelik-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.uyelik-serit h2 {
  margin-bottom: 0.35rem;
}

.uyelik-serit p {
  margin: 0;
  color: var(--metin-soluk);
  max-width: 38rem;
}

@media (max-width: 72rem) {
  .etkinlik-duzen,
  .blog-duzen {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 60rem) {
  .hero-ic {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero {
    padding-top: 2rem;
  }

  /*
   * Dar ekranda metin görselin üstüne bindirilmiyor, altına alınıyor.
   *
   * Bindirmeli düzen 20/11 oranındaki slayta sığmıyordu: uzun başlıklarda
   * metin görselin üstünden taşıp kırpılıyor, oklar da başlığın üzerine
   * biniyordu. Alt alta dizilince metnin boyu ne olursa olsun sığıyor.
   */
  .hero-slayt-metin {
    position: static;
    width: 100%;
    padding: 1.25rem 1.25rem 0.5rem;
    background: var(--zemin-koyu);
  }

  /* Metin artık koyu zeminde; görselin üstündeki perdeye gerek yok. */
  .hero-perde {
    background: linear-gradient(to top, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.05));
  }

  /* Oklar görselin üst köşelerinde kalıyor. */
  .hero-ok {
    top: 0.85rem;
    transform: none;
  }

  /* Noktalar metin bloğunun altına, koyu zemine geçiyor. */
  .hero-noktalar {
    position: static;
    padding: 0 0 1rem;
    background: var(--zemin-koyu);
  }

  .one-cikan-etkinlik {
    grid-template-columns: 1fr;
  }

  .pano {
    padding: 1.25rem;
  }
}

/* --- İKADEMİ + İKAPORT ikili bloğu --- */

.ikili-bolum {
  padding-top: 1rem;
}

/*
 * `align-items: start` kaldırıldı: iki panelin üst kenarları hizalı ama
 * yükseklikleri farklı kalıyordu. Izgaranın varsayılan `stretch`i ikisini
 * de satırın yüksekliğine çekiyor, paneller birebir aynı boyda duruyor.
 */
.ikili-duzen {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.25rem;
}

.marka {
  color: var(--kirmizi);
}

.buton-kucuk {
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
}

/* .alt-bilgi stiller.css'e taşındı: ilan kartlarıyla birlikte kullanılıyor. */

/* Eğitim listesi */

.egitim-listesi {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.egitim-listesi li + li {
  border-top: 1px solid var(--cizgi);
}

.egitim-satir {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
}

.egitim-satir:hover h3 {
  color: var(--kirmizi);
}

.egitim-saat {
  font-size: 0.82rem;
  color: var(--metin-soluk);
  white-space: nowrap;
}

.egitim-ad h3 {
  font-size: 0.95rem;
  margin: 0 0 0.1rem;
}

/*
 * Fiziksel eğitimlerde bu sütunda mekân adı yazıyor ve adres uzun
 * olabiliyor ("İKAMİD Dernek Merkezi, Kadıköy/İstanbul"). `nowrap` ile
 * satır kırılmadığı için sütun genişliyor ve eğitim adı üç dört satıra
 * sıkışıyordu; sütun sınırlanıp metnin sarmasına izin veriliyor.
 */
.katilim {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 11rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--metin-soluk);
  text-align: right;
  justify-content: flex-end;
}

.katilim::before {
  content: '';
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--metin-cok-soluk);
}

.katilim.cevrimici {
  color: #177a43;
}

.katilim.cevrimici::before {
  background: #177a43;
}

/* İş ilanları */

.ilan-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/*
 * İlan kartının kendi biçimleri stiller.css'e taşındı: bu kartlar
 * /ikaport listesinde ve ilan detayında da kullanılıyor, anasayfa.css ise
 * yalnızca anasayfa açıldığında yükleniyor. Kartlar o sayfalarda
 * biçimsiz kalıyordu — madde işaretli düz liste olarak çiziliyorlardı.
 */

@media (max-width: 72rem) {
  .ikili-duzen {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .egitim-satir {
    grid-template-columns: auto 1fr;
    row-gap: 0.35rem;
  }

  .egitim-saat {
    grid-column: 2;
    grid-row: 2;
  }

  .egitim-ad {
    grid-column: 2;
    grid-row: 1;
  }

  /*
   * Dar ekranda katılım bilgisi kendi satırına iniyor; geniş ekrandaki
   * sağa yaslama burada satırın geri kalanıyla hizasını bozuyordu.
   */
  .katilim {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    justify-content: flex-start;
    text-align: left;
  }

  .ilan-izgara {
    grid-template-columns: 1fr;
  }
}

/* Pano içindeki başlıklar sayfa başlıklarından küçük; "İKAPORT — Öne Çıkan
   İş Fırsatları" gibi uzun başlıklarda yandaki buton alt satıra düşmesin. */
.pano > .bolum-basligi h2,
.pano > h2 {
  font-size: 1.4rem;
}

/* --- Kuruluş amacı bölümü --- */

.amac-bolumu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 0;
  color: #fff;
}

.amac-zemin,
.amac-perde {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.amac-zemin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Perde iki işi birden yapıyor: fotoğrafı bastırıp metni okunur kılıyor ve
 * bölüme markanın koyu lacivert tonunu veriyor. Görsel yoksa da tek başına
 * zemin görevi görüyor.
 */
.amac-perde {
  background: linear-gradient(180deg, rgb(35 37 61 / 0.94), rgb(26 28 48 / 0.97));
}

.amac-duzen {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 3rem;
  align-items: start;
}

.amac-metin h2,
.amac-form h2 {
  color: #fff;
}

.amac-metin > p {
  color: #c9ccd8;
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* --- Akordiyon --- */

.akordiyon {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akordiyon-oge {
  border-radius: var(--radius-kucuk);
  overflow: hidden;
  background: #ffffff;
}

.akordiyon-oge h3 {
  margin: 0;
  font-size: 1rem;
}

.akordiyon-baslik {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--zemin-koyu);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.akordiyon-baslik:hover {
  color: var(--kirmizi);
}

.akordiyon-oge.acik .akordiyon-baslik {
  background: #eef1f6;
}

/* Yuvarlak işaret: kapalıyken artı, açıkken eksi. */
.akordiyon-isaret {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--kirmizi);
}

.akordiyon-isaret::before,
.akordiyon-isaret::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.akordiyon-isaret::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.akordiyon-oge.acik .akordiyon-isaret::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.akordiyon-oge:not(.acik) .akordiyon-govde {
  display: none !important;
}

.akordiyon-oge.acik .akordiyon-govde {
  display: block !important;
}

.akordiyon-govde {
  padding: 0.5rem 1.25rem 1.25rem;
  background: #ffffff;
  color: var(--metin-soluk);
  font-size: 0.95rem;
  line-height: 1.65;
}

.akordiyon-govde p {
  margin: 0;
  padding-top: 1.1rem;
}

.akordiyon-govde ul {
  margin: 0;
  padding: 1.1rem 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.akordiyon-govde li::marker {
  color: var(--kirmizi);
}

.akordiyon-bag {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--kirmizi);
}

.akordiyon-bag:hover {
  text-decoration: underline;
}

/* --- Bölümdeki iletişim kutusu --- */

.amac-form {
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius);
  padding: 2rem;
}

.amac-form > p {
  color: #c9ccd8;
  margin-bottom: 1.5rem;
}

.iletisim-formu-sade,
.uyelik-formu-sade {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.iletisim-formu-sade .form-satir,
.uyelik-formu-sade .form-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/*
 * Koyu kutudaki formlar. Anasayfada artık üyelik başvurusu duruyor;
 * kurallar iki biçimi birden seçiyor ki ileride kutuya hangi form
 * konursa konsun görünüm aynı kalsın.
 *
 * `:not([type='checkbox'])` şart: kural onay kutusunu da yakalayınca kutu
 * %100 genişliğe ve dolgu alıyordu, yanındaki metin de kartın dışına
 * taşıyordu.
 */
.iletisim-formu-sade input:not([type='checkbox']),
.uyelik-formu-sade input:not([type='checkbox']) {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-kucuk);
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.96);
  color: var(--metin);
  font: inherit;
  font-size: 0.95rem;
}

.iletisim-formu-sade input:not([type='checkbox'])::placeholder,
.uyelik-formu-sade input:not([type='checkbox'])::placeholder {
  color: #8a90a0;
}

.iletisim-formu-sade .buton,
.uyelik-formu-sade .buton {
  justify-content: center;
  width: 100%;
}

/*
 * `.iletisim-formu label` etiketleri sütuna diziyor (alan adı üstte, kutu
 * altta). Onay satırında bu yanlış: kutucuk metnin üstünde tek başına
 * ortalanmış kalıyordu. Burada satıra çevriliyor.
 */
.iletisim-formu-sade .onay,
.uyelik-formu-sade .onay {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.35rem;
  color: #c9ccd8;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.iletisim-formu-sade .onay input,
.uyelik-formu-sade .onay input {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.iletisim-formu-sade .onay a,
.uyelik-formu-sade .onay a {
  color: #fff;
  text-decoration: underline;
}

/* Sade üyelik formunun altındaki yönlendirme satırı. */
.sade-form-not {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #c9ccd8;
}

.sade-form-not a {
  color: #fff;
  text-decoration: underline;
}

.form-sonuc-koyu {
  color: #fff;
}

.form-sonuc-koyu h3 {
  color: #fff;
}

@media (max-width: 64rem) {
  .amac-duzen {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 30rem) {
  .amac-bolumu {
    padding: 3.5rem 0;
  }

  .amac-form {
    padding: 1.5rem;
  }

  .iletisim-formu-sade .form-satir,
  .uyelik-formu-sade .form-satir {
    grid-template-columns: 1fr;
  }
}

/* --- Yönetim kurulu şeridi --- */

.kurul-seridi {
  background: var(--zemin-acik);
  /*
   * Üstündeki koyu bölümle arasında geçiş yoktu; iki renk bloğu uç uca
   * geliyordu. İnce kırmızı çizgi ikisini ayırıyor.
   */
  border-top: 3px solid var(--kirmizi);
}

.kurul-seridi-ic {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

.ust-etiket {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kirmizi);
}

.kurul-seridi-metin h2 {
  margin-bottom: 0.6rem;
}

.kurul-seridi-metin p {
  color: var(--metin-soluk);
  max-width: 30rem;
  margin-bottom: 1.5rem;
}

.kurul-seridi-kisiler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.kurul-seridi-kisiler li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.kurul-seridi-kisiler strong {
  font-size: 0.875rem;
  line-height: 1.35;
  margin-top: 0.6rem;
}

.kurul-seridi-kisiler span {
  font-size: 0.78rem;
  color: var(--metin-soluk);
  line-height: 1.35;
}

.kurul-madalyon {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--zemin);
  border: 3px solid var(--zemin);
  box-shadow: var(--golge);
}

.kurul-madalyon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kurul-basharf {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: hsl(var(--ton) 45% 32%);
  background: hsl(var(--ton) 40% 92%);
}

@media (max-width: 68rem) {
  .kurul-seridi-ic {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 44rem) {
  .kurul-seridi-kisiler {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
  }
}

@media (max-width: 26rem) {
  .kurul-madalyon {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* --- İKAMİD Hakkında --- */

/* Panel içine girdi; boşluk panel dolgusuyla birlikte fazla gelmesin. */
.hakkinda-duzen {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 1.75rem;
}

/*
 * Fotoğraf hafifçe kaldırılmış bir çerçevede: grup fotoğrafı sayfanın
 * beyazına yapışık durmasın, bir "kart" gibi otursun.
 */
.hakkinda-gorsel {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--golge-guclu);
  background: var(--zemin-acik);
}

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

.hakkinda-metin h2 {
  margin-bottom: 0.9rem;
}

.hakkinda-metin > p {
  color: var(--metin-soluk);
}

.hakkinda-giris {
  margin-bottom: 0.6rem !important;
  font-weight: 600;
  color: var(--metin) !important;
}

.hakkinda-maddeler {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hakkinda-maddeler li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--metin);
}

/* Madde imi yerine kırmızı onay işareti. */
.hakkinda-maddeler li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6rem;
  height: 0.35rem;
  border-left: 2px solid var(--kirmizi);
  border-bottom: 2px solid var(--kirmizi);
  transform: rotate(-45deg);
}

@media (max-width: 64rem) {
  .hakkinda-duzen {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- İK El Çantası önizlemesi --- */

/*
 * Beş araç üç sütuna yerleşiyor; son satırda iki kart kalıyor ve sola
 * yaslanıyor. Kalan boşluğu doldurmak için kartları esnetmek yerine
 * boş bırakmak daha düzenli duruyor — kartların hepsi aynı genişlikte
 * kalıyor.
 */
.canta-izgara {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.canta-kart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.canta-kart:hover,
.canta-kart:focus-visible {
  border-color: var(--kirmizi);
  transform: translateY(-2px);
}

.canta-ikon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  color: var(--kirmizi);
  margin-bottom: 0.35rem;
}

.canta-kategori {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--metin-cok-soluk);
}

.canta-kart h3 {
  font-size: 1rem;
  margin: 0;
  line-height: 1.35;
}

.canta-kart p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--metin-soluk);
}

/* Bölüm başlığının altındaki tek satırlık açıklama. */
.bolum-giris {
  margin: -0.25rem 0 1.25rem;
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--metin-soluk);
}

@media (max-width: 60rem) {
  .canta-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .canta-izgara {
    grid-template-columns: 1fr;
  }
}

/* ==================== ANASAYFA BÖLÜM DÜZENİ ==================== */

/*
 * Anasayfa da bölüm sayfalarının panel sistemini kullanıyor. Bölümler
 * arasındaki dikey ritim `.bolum`un 3,5rem'inden 1,25rem'e indi: paneller
 * kendi çerçevesini taşıdığı için aralarında büyük boşluğa gerek yok,
 * büyük boşluk sayfayı kopuk parçalar gibi gösteriyordu.
 */
.bolum-parcasi {
  padding: 0 0 1.25rem;
}

.bolum-parcasi.ilk-parca {
  padding-top: 2rem;
}

/*
 * İki panelin aynı boyda durması için ikisi de dikey esnek kutu; alttaki
 * bağlantı `margin-top: auto` ile dibe iniyor. Önceden paneller kendi
 * içeriği kadar uzuyor ve satır eğri kalıyordu.
 */
.esnek-panel {
  display: flex;
  flex-direction: column;
}

.panel-etek {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.88rem;
}

.panel-tek-baslik {
  font-size: 1.05rem;
  margin: 0 0 1.15rem;
}

/* --- Anasayfa etkinlik bölümü --- */

.ana-etkinlik-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.ana-etkinlik-duzen.tek {
  grid-template-columns: minmax(0, 1fr);
}

.ana-one-cikan {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  background: var(--zemin-acik);
}

.ana-one-cikan-gorsel {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-kucuk);
  overflow: hidden;
  background: var(--zemin);
}

.ana-one-cikan-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ana-one-cikan-metin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.ana-one-cikan-metin h3 {
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.3;
}

.ana-one-cikan-metin h3 a {
  color: inherit;
}

.ana-one-cikan-metin h3 a:hover {
  color: var(--kirmizi);
}

/* Künye tek satırda aksın; alt alta dizilince kart gereksiz uzuyordu. */
.ana-one-cikan-metin .kunye-satirlari {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.ana-one-cikan-ozet {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--metin-soluk);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kartın üstünde değil metnin içinde duran tür rozeti. */
.tur-rozeti.duz {
  position: static;
}

.ana-etkinlik-listesi {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ana-etkinlik-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  background: var(--zemin);
  color: inherit;
  transition: border-color 0.15s ease;
}

.ana-etkinlik-satir:hover {
  border-color: var(--kirmizi);
}

.ana-etkinlik-metin {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ana-etkinlik-metin > strong {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.ana-etkinlik-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  font-size: 0.75rem;
  color: var(--metin-soluk);
}

/* Tür etiketi renkli noktayla; renk tek başına anlam taşımıyor. */
.nokta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nokta::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
}

.nokta-mavi {
  color: #2d5bb9;
}
.nokta-yesil {
  color: #177a43;
}
.nokta-mor {
  color: #6a3fb5;
}
.nokta-kirmizi {
  color: var(--kirmizi);
}
.nokta-gri {
  color: #4a4f5c;
}

.ana-etkinlik-ok {
  font-size: 1.2rem;
  color: var(--metin-cok-soluk);
}

/* --- Eğitim listesi (yeniden) --- */

.egitim-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  font-size: 0.76rem;
  color: var(--metin-soluk);
}

.egitim-ad {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.egitim-ad > strong {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 68rem) {
  .ana-etkinlik-duzen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .ana-one-cikan {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hero Slider Geçişleri */
.hero-slayt-oge {
  display: none;
}
.hero-slayt-oge.aktif {
  display: block;
}
.hero-slayt-metin {
  z-index: 2;
}

/* --- İK El Çantası — Pratik Araçlar (İKAMİD Orijinal 3x2 Grid Düzeni) --- */
.el-cantasi-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 992px) {
  .el-cantasi-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .el-cantasi-izgara {
    grid-template-columns: 1fr;
  }
}

.canta-kart {
  display: flex;
  flex-direction: column;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--metin);
  transition: all 0.2s ease;
  height: 100%;
}

.canta-kart:hover {
  border-color: var(--kirmizi);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

.canta-kart-ikon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-kucuk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.canta-kart-etiket {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
  margin-bottom: 0.4rem;
  display: block;
}

.canta-kart h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--metin);
  line-height: 1.35;
}

.canta-kart:hover h3 {
  color: var(--kirmizi);
}

.canta-kart p {
  font-size: 0.865rem;
  line-height: 1.55;
  color: var(--metin-soluk);
  margin: 0;
}