/* ===============================
   GENEL SAYFA STİLLERİ
   Sayfanın temel görünümü, başlıklar ve arka planlar
=================================== */

/* Sayfa genel arka plan rengi (kırık beyaz) */
body {
  background-color: #fafafa;
}

/* Başlıklara hafif yazı gölgesi ekler */
h1, h2, h3, h4 {
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
}

/* H5 başlıkların boyutunu büyütür */
h5 {
  font-size: 25px;
}

/* Tüm görsellere hafif bir gölge efekti ekler */
img {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Video iframe öğelerine kenarlık ve köşe yumuşatma */
iframe {
  border: 2px solid #eaeaea;
  border-radius: 5px;
}

/* ===============================
   NAVBAR - SOSYAL MEDYA İKONLARI
   Navbar içindeki ikonların görünümünü ayarlar
=================================== */

.social-icons a {
  font-size: 1.25rem; /* İkon boyutu */
  color: #ffffff; /* Varsayılan beyaz renk */
  transition: color 0.3s ease; /* Renk geçiş efekti */
}

.social-icons a:hover {
  color: #ffc107; /* Üzerine gelindiğinde sarı renk */
}

/* ===============================
   CAROUSEL - YAZI ARKA PLANI
   Carousel içindeki yazıların arka plan kutusu
=================================== */

.carousel-caption {
  background-color: rgb(0 0 0 / 82%); /* Şeffaf siyah arka plan */
  padding: 55px;
  border-radius: 8px;
}

/* ===============================
   FOOTER - LİNK RENK GEÇİŞİ
   Footer içindeki bağlantıların hover durumu
=================================== */

footer a:hover {
  text-decoration: underline;
  color: #ffc107;
}

/* ===============================
   MODAL PENCERELER
   Modal kutuların çerçevesi ve gölgesi
=================================== */

.modal-content {
  border: 1px solid #dee2e6;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ===============================
   FORM ALANLARI - ODAKLANMA
   Input ve textarea alanlarına odaklanıldığında görünüm
=================================== */

input:focus, textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 3px rgba(13, 110, 253, 0.3);
}

/* ===============================
   ÖZEL BÖLÜMLER - TASARIM VE GEÇİŞ
   İçerik kutuları ve buton geçiş efektleri
=================================== */

/* Web tasarım içerik kutusu stili */
.web-tasarim-icerik {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #0d6efd; /* Sol tarafta mavi bir şerit */
}

/* Butonlara geçiş efekti ve hover görünümü */
.devamini-oku-btn, .gizle-btn {
  margin-top: 15px;
  transition: all 0.3s ease;
}

.devamini-oku-btn:hover, .gizle-btn:hover {
  transform: translateY(-2px); /* Hover'da butonu hafif yukarı kaldırır */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ===============================
   GÖRSELLERİN ÖZEL BOYUTLANDIRILMASI
   Belirli bir görsel alanında boyutlandırma ve kesme
=================================== */

.row.my-5.align-items-center .col-md-6 img {
  width: 400px;
  height: 400px;
  object-fit: cover; /* Görselin oranını bozmadan alanı doldurması */
}

/* ===============================
   KOD BOX BÖLÜMÜ
=================================== */

/* Kod bloğu için özel siyah tema */
.code-box {
  background-color: #1e1e1e;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}
.code-box span.tag { color: #569cd6; }
.code-box span.attr { color: #9cdcfe; }
.code-box span.val { color: #ce9178; }

.code-box {
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    white-space: pre-wrap;
}

.text-primary {
    color: #007bff;
}