/* =========================
   GENEL SAYFA AYARLARI
========================= */

body {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #000;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

a {
  color: #003366;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================
   BAŞLIKLAR
========================= */

h1 {
  font-size: 1.6rem;
  text-align: center;
  margin: 40px 0 25px;
}

h2 {
  font-size: 1.35rem;
  text-align: center;
  margin: 35px 0 20px;
}

h3 {
  font-size: 1.15rem;
  margin: 25px 0 15px;
}

/* =========================
   PARAGRAF METİNLER
========================= */

p {
  margin: 0 0 14px;
  text-align: justify;
}

/* =========================
   ARAPÇA METİNLER
========================= */

.arabic {
  font-family: "Amiri", "Scheherazade", serif;
  font-size: 1.6rem;
  direction: rtl;
  text-align: right;
  margin: 18px 0 8px;
}

/* Scheherazade fontunu yerelden yükleme */
@font-face {
  font-family: 'Scheherazade';
  src: url('../fonts/arabtype.ttf') format('truetype');
           
  }

/* =========================
   DİPNOTLAR
========================= */

.dipnot {
  font-size: 0.9rem;
  color: #444;
  margin: 8px 0;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 3px solid #ddd;
}

/* =========================
   SAYFA GENİŞLİĞİ
========================= */

.sayfa {
  max-width: 760px;
  margin: auto;
  padding: 30px 20px;
}

/* =========================
   MOBİL UYUM
========================= */

@media screen and (max-width: 600px) {
  body {
    font-size: 1.05rem;
  }
}

/* =========================
   MÜZİK ÇALAR
========================= */

/* Müzik Çalar Tasarımı */
.muzik-calar {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
}

#muzikButon {
    background-color: #043927; /* Zümrüt Yeşili */
    color: #e2c08d; /* Altın/Krem tonu */
    border: 2px solid #e2c08d;
    padding: 10px 20px;
    font-family: "Georgia", serif;
    font-size: 14px;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#muzikButon:hover {
    background-color: #e2c08d;
    color: #043927;
}

#ikon {
    font-size: 18px;
}