/* HTML kök elementinin stil kuralları */
html {
  background-color: white;  /* Sayfanın temel arkaplan rengini beyaz yapar */
  height: 100%; /* HTML elementinin yüksekliğini viewport boyutuna göre %100 yapar */
}

/* Body elementinin stil kuralları */
body {
  /* Dış boşluk: dikeyde viewport yüksekliğinin %5'i, yatayda otomatik (ortalar) */
  margin: auto;
  
  /* İç boşluk sıralama: Üst - Sağ - Alt - Sol */
  padding: 0px;

  /* Çerçeve: 2px kalınlığında düz siyah kenarlık */
  border: 2px solid #333;
  
  /* Arkaplan rengi:  */
  background-color: #0a192f;
  
  color: gray;
  
  /* Kutu modeli: padding ve border'ı genişlik hesabına dahil eder */
  box-sizing: border-box;
  
  
  /* Flexbox düzeni etkinleştirir */
  display: flex;
  
  /* İçeriği dikey sütun olarak düzenler */
  flex-direction: column;
  
  /* İçeriği dikeyde ortalar (flexbox özelliği) */
  justify-content: center;
  
    /* Responsive genişlik kontrolü: 
varsayılan değer telefon */
  width: 100%; 
  max-width: 400px;
}

/* Tablet için */
@media (min-width: 768px) {
  main {
    width: 70%;
    max-width: 700px;
  }
}

/* Bilgisayar için */
@media (min-width: 1024px) {
  main {
    width: 30%;
    max-width: 1000px;
  }
}

header {
  height: 4%; /* yüksekliği %10 yapar */

    /* Sıralama: Üst - Sağ - Alt - Sol */
  padding: 3%;
  margin: 0; /* Dış margin sıfırlanır */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0; /* Alt çizgi ekler */
}

.header-center {
    color:green;
    
}

.header-left {
    font-size:200%;
    cursor:pointer;
}
.header-right {
    font-size:200%;
    cursor:pointer;
}

main, .main-container {
  width: 100%;
  margin: auto;
  display: block; /* Dış katman için block */
  background-color: transparent;
  border-bottom: 1px solid #e0e0e0; /* Alt çizgi ekler */
}

.timer-container, .konusec-container, .footer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ustveri-container{
  width: 100%;
  margin: auto;
  padding: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:transparent;
}

.timer{
  width: 80%;
  aspect-ratio: 1 / 1;   /* Genişlik ve yükseklik eşit olur */
  border: 10px solid orange;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -33px; /* timerı yukarıya kaydırmak için */ 
}

.sayac{
 /* border: 1px solid orange; */
 /* border-radius: 2%; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto; 
  font-size:500%;
}

.buton-container{
  width: 99%;
  margin-top: -33px; /* buton containeri yukarıya kaydırmak için */
  margin-bottom:10px;
  padding: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:transparent;
  /* border: 2px solid orange; sınırlarını görmek içindi iptal */
}

.countdown{
 /*  margin:auto; butonları ortalamak içindi. iptal  */
 font-size: 24px; /* Eşit büyüklük */
 width: 60px; /* Sabit genişlik */
 height: 60px; /* Sabit yükseklik */
 display: inline-flex;
 align-items: center;
 justify-content: center;
 vertical-align: middle;
 border-radius: 50%;
 cursor: pointer;
 background-color:transparent;

}

.ilksira-footer, .ikincisira-footer{
  width: 99%;
  margin: auto;
  padding: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:transparent;
/* border: 2px solid orange; sınırlarını görmek içindi iptal */
}

.footer-baslik{
 margin:auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 vertical-align: middle;
 color:white;
}

/* SETTİNGS.PHP CSSLERİ*/
.container {
  width: 100%;
  margin: auto;
  display: block; /* Dış katman için block */
  background-color: white;
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* KONUSEC.PHP CSSLERİ*/