/* Genel Sıfırlama ve Temel Stiller */
body {
  background: #252525; /* Koyu tema arka planı */
  color: #E0E0E0; /* Açık metin rengi */
  font-family: 'Roboto', sans-serif; /* Daha modern ve profesyonel bir font */
  margin: 0;
  padding: 0;
  display: flex; /* Flexbox kullanarak içeriği dikeyde ve yatayda hizala */
  flex-direction: column; /* Öğeleri dikey olarak sırala */
  align-items: center; /* Ana eksende (yatayda) ortala */
  min-height: 100vh; /* Body'nin viewport'un tamamını kaplamasını sağla */
  box-sizing: border-box; /* Padding ve border'ın genişlik hesaplamasına dahil olması */
}

/* Banner Kapsayıcısı */
.banner-container {
    width: 80%; /* İstediğiniz %80 genişlik */
    max-width: 1000px; /* Opsiyonel: Çok geniş ekranlarda aşırı büyümesini engelle */
    overflow: hidden; /* Taşmayı engelle */
    margin-bottom: 20px; /* Navbar ile ana konteynerden boşluk */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    background-color: #333; /* Resim yüklenene kadar veya resim yoksa arka plan */
    display: flex; /* İçindeki öğeyi ortalamak için flexbox kullan */
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala */
    border-radius: 8px; /* Köşeleri yuvarla */
}

.banner-container img {
    width: 100%; /* Kapsayıcının genişliğini doldur */
    height: auto; /* Oranı koru */
    display: block; /* Gereksiz boşlukları kaldır */
}

/* Ana Navigasyon (Çıkış Butonu) */
#main-nav {
    width: 80%;
    max-width: 1000px;
    display: flex;
    justify-content: flex-end; /* Sağ tarafa yasla */
    margin-bottom: 10px;
    box-sizing: border-box;
}

.logout-button {
    background-color: #dc3545; /* Kırmızı tonu */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.logout-button:hover {
    background-color: #c82333; /* Daha koyu kırmızı */
}


/* Ana Konteyner Stil */
#main-container {
  max-width: 800px; /* Maksimum genişlik */
  width: 80%; /* Ekran genişliğinin %80'ini kapla */
  background-color: #333; /* Koyu gri arka plan */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Daha belirgin gölge */
  border-radius: 8px; /* Köşeleri yuvarla */
  padding: 30px; /* İç boşluk */
  box-sizing: border-box; /* Padding dahil genişlik hesaplaması */
  margin-bottom: 30px; /* Footer'dan boşluk */
  text-align: center; /* İçeriği ortala */
}

#main-container h1, #main-container h2 {
    color: #007bff; /* Mavi başlık rengi (Koyu temaya uygun parlaklıkta) */
    margin-top: 0;
    margin-bottom: 20px;
}

/* Auth ve Panel Bölümleri için Ortak Stil */
#auth, #panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Elemanlar arası boşluk */
}

/* Input ve Button Stil */
#auth input, #auth button, #panel input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 12px 15px;
    border: 1px solid #555; /* Koyu gri kenarlık */
    border-radius: 5px;
    font-size: 1.1em;
    box-sizing: border-box;
    background-color: #444; /* Daha koyu input arka planı */
    color: #E0E0E0; /* Açık metin */
}

#auth input::placeholder, #panel input[type="text"]::placeholder {
    color: #bbb; /* Placehoder metin rengi */
}

#auth button {
    background-color: #007bff; /* Mavi buton rengi */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#auth button:hover {
    background-color: #0056b3; /* Daha koyu mavi */
}

/* Cihaz Kartları */
.device-card {
    background-color: #444; /* Cihaz kartları için koyu gri */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Konteyner içinde tam genişlik */
    box-sizing: border-box;
}

.device-card h3 {
    color: #28a745; /* Yeşil başlık rengi */
    margin-top: 0;
    margin-bottom: 10px;
    display: flex; /* İçindeki öğeleri hizalamak için flexbox */
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    flex-wrap: wrap; /* Küçük ekranlarda alt satıra geçsin */
}

.device-card h3 span {
    margin-right: 10px; /* Ad ile link arasında boşluk */
}

.device-card p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Toggle Switch (Mevcut stilleriniz) */
.switch {
  position: relative;
  display: inline-block;
  width: 90px; /* Genişlik artırıldı */
  height: 50px; /* Yükseklik artırıldı */
  margin-top: 10px; /* Biraz boşluk */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50px; /* Yuvarlak kenarlar */
}

.slider:before {
  position: absolute;
  content: "";
  height: 40px; /* Düğme yüksekliği */
  width: 40px; /* Düğme genişliği */
  left: 5px; /* Kenardan boşluk */
  bottom: 5px; /* Alttan boşluk */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%; /* Dairesel düğme */
}

input:checked + .slider {
  background-color: #2196F3; /* Mavi renk (koyu tema uyumlu) */
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(40px); /* Düğme hareket mesafesi */
  -ms-transform: translateX(40px);
  transform: translateX(40px);
}

/* Footer Stil */
#main-footer {
  width: 100%;
  padding: 15px 0;
  text-align: center;
  background-color: #222; /* Koyu arka plan */
  color: #888; /* Daha soluk metin */
  font-size: 0.9em;
  margin-top: auto; /* Sayfanın altına sabitlemek için */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Üstten gölge */
}

/* Yeni Eklenen Link Stilleri (Koyu temaya uyumlu, link gibi) */
.edit-link, .save-link {
    color: #888; /* Hafif soluk gri/beyaz link rengi, çok ön planda olmasın */
    text-decoration: underline; /* Varsayılan olarak altı çizili olsun */
    font-size: 0.9em; /* H3 içindeki link için daha küçük font */
    margin-left: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.edit-link:hover, .save-link:hover {
    color: #E0E0E0; /* Hover'da daha belirgin olsun */
    text-decoration: underline; /* Hover'da alt çizgi kalmaya devam etsin */
}

/* Input alanı için stil */
/* #auth input kuralı zaten var, bunu daha spesifik hale getirebiliriz
   ancak genel input[type="text"] de yeterli. */
#panel input[type="text"] {
    margin-top: 5px;
    padding: 12px 15px; /* Auth input ile aynı padding */
    border: 1px solid #555;
    border-radius: 5px;
    width: 100%; /* Kutu modeli nedeniyle width ayarı */
    max-width: 300px; /* Auth input ile aynı max-width */
    box-sizing: border-box;
    background-color: #444;
    color: #E0E0E0;
}


/* Responsive Ayarlamalar */
@media (max-width: 768px) {
    .banner-container,
    #main-nav,
    #main-container {
        width: 95%; /* Küçük ekranlarda daha geniş */
        max-width: none; /* Maksimum genişliği kaldır */
    }

    #main-container {
        padding: 20px;
    }

    .device-card {
        padding: 15px;
    }

    .device-card h3 {
        font-size: 1.2em; /* Mobil için biraz küçült */
        flex-direction: column; /* Mobil cihazlarda adı ve linki alt alta getir */
        align-items: center; /* Dikeyde ortala */
    }

    .device-card h3 span {
        margin-right: 0; /* Boşluğu kaldır */
        margin-bottom: 5px; /* Ad ile link arasında boşluk */
    }

    .edit-link, .save-link {
        margin-left: 0; /* Linkleri adın altına aldığımızda sola yaslama */
        margin-top: 5px; /* Link ile ad arasına boşluk */
        display: block; /* Tam satırı kaplasın */
        text-align: center; /* Metni ortala */
        width: 80%; /* Link genişliğini ayarla */
        max-width: 150px; /* Çok uzun olmasın */
        font-size: 0.9em;
    }

    input[type="text"] {
        width: 95%; /* Mobil input daha geniş olsun */
    }

    /* Switch boyutunu mobil için küçült */
    .switch {
        width: 60px;
        height: 34px;
        margin-top: 10px;
    }

    .slider {
        border-radius: 34px;
    }

    .slider:before {
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    #auth input, #auth button, .logout-button {
      width: 95%; /* Mobil cihazlarda daha geniş input/linkler */
    }
}

/* Ek küçük mobil cihazlar için özel ayarlamalar */
@media (max-width: 480px) {
    #main-container {
        padding: 15px;
    }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    .device-card h3 { font-size: 1.1em; }
    .device-card p { font-size: 1em; }

    /* Küçük mobil ekranlarda auth input ve butonu için padding ve font ayarlaması */
    #auth input, #auth button, #panel input[type="text"] {
        padding: 10px;
        font-size: 1em;
    }
    
    /* Küçük mobil ekranlarda çıkış butonu için padding ve font ayarlaması */
    .logout-button {
      padding: 8px 15px;
      font-size: 0.9em;
    }
}