/* CSS değişkenleri ile sayfa renk paleti, yazı tipleri ve tasarım ölçüleri tanımlanır */
:root {
  --bg: #f7f6f3;
  --bg2: #f0ede6;
  --card: #ffffff;
  --ink: #1a1814;
  --ink2: #4a4740;
  --ink3: #7a756b;
  --accent: #1e3a8a;
  --accent-hover: #172554;
  --accent-light: #eff6ff;
  --line: rgba(26, 24, 20, 0.08);
  --line-strong: #dcd7ce;
  --font-serif: Georgia, "Times New Roman", Garamond, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 4px 20px -2px rgba(26, 24, 20, 0.05), 0 2px 6px -1px rgba(26, 24, 20, 0.03);
  --shadow-hover: 0 10px 30px -4px rgba(26, 24, 20, 0.1);
  --trans: 0.25s ease;
}

/* Koyu tema için renk değişkenlerinin yeni değerleri tanımlanır */
body.koyu-tema {
  --bg: #121316;
  --bg2: #1a1c22;
  --card: #1c1f26;
  --ink: #f0ede6;
  --ink2: #a3a099;
  --ink3: #78736a;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-light: rgba(96, 165, 250, 0.12);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: #2e323e;
  --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 10px 30px -4px rgba(0, 0, 0, 0.6);
}

/* Tüm HTML öğelerinin kutu boyutlandırması ve varsayılan kenar boşlukları sıfırlanır */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Sayfa gövdesinin temel arka plan rengi, yazı tipi, metin rengi ve akıcı geçiş ayarları */
body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  transition: background-color var(--trans), color var(--trans);
}

/* Modern yapışkan, buzlu cam efektli (backdrop blur) üst menü kapsayıcısı */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 246, 243, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.5rem;
  transition: background-color var(--trans), border-color var(--trans);
}

/* Koyu temada üst menü alanının buzlu cam arka plan ve kenarlık rengi */
body.koyu-tema header {
  background-color: rgba(18, 19, 22, 0.88);
  border-bottom-color: var(--line);
}

/* Üst menü bileşenlerini (logo, menü bağlantıları, tema butonu) hizalayan esnek kutu düzeni */
.header-icerik {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Üst menünün sol kısmında isim logosunu ve kurumsal rozeti barındıran kapsayıcı */
.header-sol {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* İsim logosunun serif yazı tipi, boyutu, rengi ve alt çizgisiz görünümü */
.logo-link {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--trans);
}

/* İsim logosunun üzerine gelindiğindeki vurgu rengi */
.logo-link:hover {
  color: var(--accent);
}

/* Üniversite aidiyetini gösteren küçük kurumsal rozetin biçimlendirmesi */
.header-rozeti {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink3);
  background-color: var(--bg2);
  border: 1px solid var(--line-strong);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Gezinti menüsünün kapsayıcı stili */
nav {
  display: block;
}

/* Menü bağlantı listesini yatay dizen Flexbox stili */
nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.5rem;
}

/* Menü bağlantılarının minimalist, zarif buton stili */
nav a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--trans), background-color var(--trans);
}

/* Menü bağlantılarının üzerine gelindiğindeki arka plan ve renk durumu */
nav a:hover {
  color: var(--accent);
  background-color: var(--accent-light);
}

/* Dış bağlantıların ayırt edici açık renk ve kesikli çizgi vurgusu */
nav a.dis-baglanti {
  color: var(--ink3);
  font-size: 0.85rem;
}

/* Dış bağlantıların üzerine gelindiğindeki renk değişimi */
nav a.dis-baglanti:hover {
  color: var(--accent);
}

/* Üst menü sağ alanındaki buton kapsayıcısı */
.header-sag {
  display: flex;
  align-items: center;
}

/* Oval hap biçimli modern tema değiştirme düğmesi */
.tema-buton {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--bg2);
  border: 1px solid var(--line-strong);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--trans);
}

/* Tema değiştirme düğmesinin üzerine gelindiğindeki vurgu stili */
.tema-buton:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Ana içerik alanının sayfa genişliği ve kenar boşlukları */
main {
  max-width: 1080px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* Sayfa bölümlerinin kart arka planı, kenarlığı, gölgesi ve iç boşluğu */
section {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  transition: background-color var(--trans), border-color var(--trans), box-shadow var(--trans);
}

/* Hero alanını sol ve sağ sütun olarak ikiye ayıran Flexbox düzeni */
.hero-kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* Hero sol içerik sütununun esnek genişliği */
.hero-sol {
  flex: 1.2;
}

/* Hero alanının üstündeki yatay çizgi efektli akademik rozet etiketi */
.hero-etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* Rozet etiketinin başındaki zarif yatay vurgu çizgisi */
.hero-etiket::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background-color: var(--accent);
  border-radius: 2px;
}

/* Sayfadaki tek h1 başlığının büyük, editoryal serif tipografisi */
h1 {
  font-family: var(--font-serif);
  font-size: 2.85rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

/* Hero başlığının altındaki italik unvan metni */
.hero-unvan {
  font-size: 1.1rem;
  color: var(--ink3);
  font-style: italic;
  margin-bottom: 1.25rem;
}

/* Profil metni kapsayıcısının üst ve alt boşlukları */
.profil-metin {
  margin-bottom: 1.5rem;
}

/* Bölüm ve alt başlıklar için kullanılan serif yazı tipi ve renk kuralı */
h2 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

/* h3 alt başlıklarının tipografi, renk ve boşluk ayarları */
h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.25rem 0 0.5rem 0;
}

/* Paragraf metinlerinin renk, satır yüksekliği ve alt boşluk ayarı */
p {
  color: var(--ink2);
  line-height: 1.7;
  font-size: 1rem;
}

/* Hero alanındaki eylem butonlarını hizalayan Flexbox kapsayıcısı */
.hero-eylem {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Eylem butonlarının ortak temel stili */
.eylem-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: all var(--trans);
}

/* Ana eylem butonunun koyu arka plan ve yüksek kontrast stili */
.eylem-ana {
  background-color: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}

/* Ana eylem butonunun üzerine gelindiğindeki renk ve yükselme efekti */
.eylem-ana:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
}

/* İkincil eylem butonunun zarif kenarlık stili */
.eylem-ikincil {
  background-color: transparent;
  color: var(--ink2);
  border: 1px solid var(--line-strong);
}

/* İkincil eylem butonunun üzerine gelindiğindeki durumu */
.eylem-ikincil:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Hero sağ tarafındaki profil fotoğrafı ve etiket sütunu */
.hero-sag {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* Dairesel, çift kenarlıklı modern fotoğraf çerçevesi */
.foto-cerceve {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(135deg, var(--line-strong), var(--bg2));
  box-shadow: 0 12px 30px -6px rgba(26, 24, 20, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--trans);
}

/* Fotoğraf çerçevesinin üzerine gelindiğindeki hafif büyüme efekti */
.foto-cerceve:hover {
  transform: scale(1.03);
}

/* Profil görselinin dairesel ve tam oturan yapısı */
.profil-resmi {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card);
}

/* Fotoğrafın altındaki ince etiket metni */
.foto-etiket {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink3);
}

/* Beceriler ve eğitim kutularını iki eşit sütun olarak bölen CSS Grid düzeni */
.liste-kapsayici {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem 0;
}

/* Deneyim kartları tarzında solunda dikey vurgu çizgisi olan kart kutuları */
.kart-kutu {
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
  transition: transform var(--trans), box-shadow var(--trans);
}

/* Kart kutusunun üzerine gelindiğinde hafifçe yükselmesi */
.kart-kutu:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Kart kutusunun solundaki renkli dikey vurgu çizgisi */
.kart-kutu::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--accent);
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Kart içindeki kısa açıklama metninin boyutu ve alt boşluğu */
.kart-aciklama {
  font-size: 0.9rem;
  color: var(--ink3);
  margin-bottom: 1rem;
}

/* Yetenek listesinin (ul) iç girintisi ve stil ayarları */
.yetenek-listesi {
  padding-left: 1.25rem;
}

/* Sıralı eğitim zaman çizelgesi listesinin (ol) iç girintisi */
.zaman-listesi {
  padding-left: 1.25rem;
}

/* Liste maddelerinin dikey boşlukları, yazı rengi ve boyutu */
.yetenek-listesi li, .zaman-listesi li {
  color: var(--ink2);
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

/* Tablonun küçük ekranlarda taşmasını önleyen kaydırılabilir kapsayıcı */
.tablo-kapsayici {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Temiz, minimalist ders ve yetkinlik tablosu */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--card);
  font-size: 0.95rem;
}

/* Tablo başlık hücrelerinin (th) editoryal yazı tipi, arka planı ve iç dolgusu */
th {
  font-family: var(--font-sans);
  background-color: var(--bg2);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
}

/* Tablo veri hücrelerinin (td) iç boşluğu ve alt sınır çizgisi */
td {
  padding: 0.9rem 1.2rem;
  color: var(--ink2);
  border-bottom: 1px solid var(--line);
}

/* Tablo satırlarına hafif zebra arka plan deseni uygulayan kural */
tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.015);
}

/* Koyu temada tablo zebra satır rengi */
body.koyu-tema tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Tablo satırının üzerine gelindiğindeki ince aydınlanma efekti */
tbody tr:hover {
  background-color: var(--accent-light);
}

/* Yetkinlik düzeylerini gösteren modern renkli rozet etiketi */
.seviye-etiketi {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

/* İleri düzey yetkinlik rozetinin yeşil/mavi renk stili */
.seviye-etiketi.ileri {
  background-color: #dbeafe;
  color: #1e40af;
}

/* Yetkin düzey yetkinlik rozetinin yeşil renk stili */
.seviye-etiketi.yetkin {
  background-color: #dcfce7;
  color: #166534;
}

/* Orta düzey yetkinlik rozetinin kehribar sarısı renk stili */
.seviye-etiketi.orta {
  background-color: #fef3c7;
  color: #92400e;
}

/* İletişim bölümünün bilgi ve form alanını yan yana hizalayan esnek Grid düzeni */
.iletisim-kapsayici {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.5rem;
  align-items: start;
}

/* İletişim sol sütunundaki rozet etiketleri kutusu */
.iletisim-etiket-kutusu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* İletişim rozet elemanlarının stili */
.etiket-oge {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink2);
  background-color: var(--bg2);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  width: fit-content;
}

/* Form giriş alanlarının her biri için alt kenar boşluğu */
.form-grup {
  margin-bottom: 1.2rem;
}

/* Form etiketlerinin (label) blok düzeni, yazı tipi ve ağırlığı */
label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* Form metin giriş kutuları ve metin alanının (textarea) zarif editoryal stili */
input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background-color: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--trans), box-shadow var(--trans);
}

/* Form kutularına tıklandığında (focus) oluşan modern mavi odak halkası */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Mesaj gönderme butonunun koyu editoryal stili ve geçiş efektleri */
.gonder-buton {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg);
  background-color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: all var(--trans);
}

/* Gönder butonunun üzerine gelindiğindeki renk değişimi ve yukarı esneme efekti */
.gonder-buton:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Form doğrulama mesajlarının yerleştiği paragraf alanı */
.form-mesaj {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 1.5rem;
}

/* Hata mesajının kırmızı uyarı stili */
.form-mesaj.hata {
  color: #dc2626;
}

/* Koyu temada hata mesajının kontrast uyumlu açık kırmızı tonu */
body.koyu-tema .form-mesaj.hata {
  color: #f87171;
}

/* Başarı mesajının onay yeşili stili */
.form-mesaj.basarili {
  color: #16a34a;
}

/* Koyu temada başarı mesajının kontrast uyumlu açık yeşil tonu */
body.koyu-tema .form-mesaj.basarili {
  color: #4ade80;
}

/* Sayfa alt bilgisi (footer) kapsayıcısının stili ve üst sınırı */
footer {
  border-top: 1px solid var(--line);
  background-color: var(--card);
  padding: 2.5rem 1.5rem;
  text-align: center;
  margin-top: 3rem;
  transition: background-color var(--trans), border-color var(--trans);
}

/* Alt bilgi içerik metinlerinin düzeni */
.footer-icerik {
  max-width: 1080px;
  margin: 0 auto;
}

/* Alt bilginin ikincil açıklama yazısı */
.footer-alt-yazi {
  font-size: 0.85rem;
  color: var(--ink3);
  margin-top: 0.35rem;
}

/* Sertifikalar alanının üst kenarlık çizgisi ve ayırıcı boşluğu */
.sertifikalar-alani {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* Sertifikalar alanının giriş açıklama metni */
.sertifika-giris-yazi {
  font-size: 0.95rem;
  color: var(--ink3);
  margin-bottom: 1.25rem;
}

/* Sertifika kartlarını yan yana dizen esnek Grid ızgara düzeni */
.sertifika-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Her bir sertifika kartının arka planı, kenarlığı, gölgesi ve geçiş efekti */
.sertifika-karti {
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

/* Sertifika kartının üzerine gelindiğinde yukarı doğru süzülme efekti */
.sertifika-karti:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}

/* Sertifika resim bağlantısının blok stili ve taşma ayarı */
.sertifika-resim-baglanti {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

/* Sertifika görselini içeren beyaz arka planlı çerçeve kutusu */
.sertifika-resim-kapsayici {
  background-color: #ffffff;
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem;
}

/* Sertifika görselinin tam oturması ve büyüme geçiş efekti */
.sertifika-resmi {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--trans);
}

/* Kartın üzerine gelindiğinde sertifika görselinin hafif büyümesi */
.sertifika-karti:hover .sertifika-resmi {
  transform: scale(1.04);
}

/* Sertifika kartı içerik alanının iç boşluğu ve esnek dikey düzeni */
.sertifika-icerik {
  padding: 1rem 1.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Sertifika başlığının (h4) serif yazı tipi, boyutu ve rengi */
.sertifika-baslik {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

/* Sertifikayı veren kurum ve program açıklama metni */
.sertifika-kurum {
  font-size: 0.82rem;
  color: var(--ink3);
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

/* Sertifika alt bilgi alanının tarih ve durum rozetini iki yana hizalaması */
.sertifika-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

/* Sertifikanın tamamlanma tarihi metninin stili */
.sertifika-tarih {
  font-size: 0.78rem;
  color: var(--ink3);
  font-weight: 500;
}

/* Sertifikanın onaylı olduğunu belirten renkli hap rozeti */
.sertifika-durum-rozet {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background-color: var(--accent-light);
  color: var(--accent);
}

/* 600 piksel ve altı mobil ekranlar için duyarlı (responsive) medya sorgusu */
@media (max-width: 600px) {
  /* Üst menü bileşenlerini dikeyde alt alta dizen kural */
  .header-icerik {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  /* Menü bağlantılarını dikeyde tam genişlik yapan kural */
  nav ul {
    flex-direction: column;
    width: 100%;
  }

  /* Menü butonlarını tam genişliğe yayan kural */
  nav a {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* Tema düğmesini tam genişlik yapan kural */
  .tema-buton {
    width: 100%;
  }

  /* Hero alanını tek sütuna düşürerek fotoğrafı üste/alta alan kural */
  .hero-kapsayici {
    flex-direction: column-reverse;
    text-align: center;
    gap: 2rem;
  }

  /* Hero rozet etiketini ortalayan kural */
  .hero-etiket {
    justify-content: center;
  }

  /* h1 başlığını dar ekrana uygun ölçeklendiren kural */
  h1 {
    font-size: 2.15rem;
  }

  /* Hero eylem butonlarını dikeyde alt alta dizen kural */
  .hero-eylem {
    flex-direction: column;
    width: 100%;
  }

  /* Eylem butonlarını tam genişlik yapan kural */
  .eylem-btn {
    width: 100%;
  }

  /* Liste kutularını tek sütuna düşüren kural */
  .liste-kapsayici {
    grid-template-columns: 1fr;
  }

  /* İletişim alanını dikeyde tek sütuna dönüştüren kural */
  .iletisim-kapsayici {
    grid-template-columns: 1fr;
  }

  /* Bölüm kartlarının iç boşluklarını dar ekrana ayarlayan kural */
  section {
    padding: 1.5rem 1.25rem;
  }

  /* Sertifika kartlarını dar ekranda tek sütuna düşüren kural */
  .sertifika-izgara {
    grid-template-columns: 1fr;
  }

  /* Gönder butonunu tam genişlik yapan kural */
  .gonder-buton {
    width: 100%;
  }
}