/* Genel Stil Ayarları */
body {
    font-family: 'Roboto', sans-serif; /* Fallback sans-serif ekledik */
    background: #f3f0f1; /* Hafif bir gri tonu */
    color: #31456a; /* Genel metin rengi */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Tüm elementler için box-sizing */
    display: flex; /* İçeriği dikeyde ve yatayda ortalamak için */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Sayfanın tamamını kapla */
}

/* Limiter ve Konteyner */
.limiter {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* İçeriği dikeyde sırala */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Kenarlardan boşluk */
}

.container-login100 {
    width: 100%;
    max-width: 500px; /* Formun maksimum genişliği */
    background: #f3f0f1; /* Neumorphism arka planı */
    border-radius: 25px; /* Yumuşak yuvarlak köşeler */
    padding: 30px 40px; /* İç boşlukları artırdık */
    box-shadow: 15px 15px 30px -5px rgba(0, 0, 0, 0.15),
                -15px -15px 30px -5px rgba(255, 255, 255, 0.8); /* Dış gölge */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 
/* Başlık */
.segment h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Daha belirgin başlık */
    font-size: 28px; /* Büyük ve okunur */
    color: #31456a; /* Ana metin rengi */
    margin-bottom: 25px; /* Alt boşluk */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* Hafif metin gölgesi */
}

/* Form Grupları (Label ve Input/Select) */
.form-group {
    width: 100%;
    margin-bottom: 20px; /* Her form grubu arasına boşluk */
    position: relative;
}

.form-group label {
    display: block;
    font-size: 14px; /* Etiket boyutu */
    font-weight: 500;
    color: #555;
    margin-bottom: 8px; /* Etiket ile input arası boşluk */
    text-align: left; /* Etiketleri sola hizala */
    padding-left: 5px; /* Hafif iç boşluk */
}

.form-group input[type="text"],
.form-group input[type="email"], /* Eklendi */
.form-group input[type="password"], /* Eklendi */
.select-wrapper select {
    width: 100%;
    padding: 12px 20px; /* İç boşlukları artır */
    border: none;
    border-radius: 15px; /* Daha yuvarlak köşeler */
    background: #f3f0f1; /* Form arka plan rengiyle aynı */
    color: #333;
    font-size: 16px;
    outline: none;
    box-shadow: inset 4px 4px 8px -2px rgba(0, 0, 0, 0.1), /* İç gölge */
                inset -4px -4px 8px -2px rgba(255, 255, 255, 0.7); /* İç gölge */
    transition: all 0.3s ease;
    -webkit-appearance: none; /* iOS Safari için varsayılan stilleri kaldır */
    -moz-appearance: none;    /* Firefox için varsayılan stilleri kaldır */
    appearance: none;         /* Diğer tarayıcılar için varsayılan stilleri kaldır */
}

.form-group input[type="text"]::placeholder {
    color: #a0a0a0; /* Placeholder rengi */
}

.form-group input[type="text"]:focus,
.select-wrapper select:focus {
    box-shadow: inset 3px 3px 6px -1px rgba(0, 0, 0, 0.15),
                inset -3px -3px 6px -1px rgba(255, 255, 255, 0.8),
                0 0 0 2px #6a11cb; /* Odaklandığında mor çerçeve */
}

.form-group input::placeholder {
    color: #a0a0a0;
}

.form-group input:focus {
    box-shadow: inset 3px 3px 6px -1px rgba(0, 0, 0, 0.15),
                inset -3px -3px 6px -1px rgba(255, 255, 255, 0.8),
                0 0 0 2px #6a11cb; /* Focus glow */
}

/* Select Kutusu Stili */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    cursor: pointer;
    padding-right: 40px; /* Ok için yer aç */
}

.select__arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 6px 0 6px; /* Daha belirgin ok */
    border-color: #7b7b7b transparent transparent transparent;
    transition: all 0.3s ease;
}

.select-wrapper select:hover ~ .select__arrow,
.select-wrapper select:focus ~ .select__arrow {
    border-top-color: #31456a; /* Odaklandığında ok rengi */
}

/* Buton Stilleri */
.button {
    display: inline-block;
    width: 100%;
    padding: 12px 25px; /* İç boşluk */
    border: none;
    border-radius: 15px; /* Yuvarlak köşeler */
    font-size: 18px; /* Buton metin boyutu */
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none; /* Linkler için alt çizgiyi kaldır */
    margin-top: 15px; /* Butonlar arası boşluk */
}

.button i.icon { /* For buttons with icons */
    font-size: 24px;
    margin-right: 10px;
}

.button-red {
    background: linear-gradient(145deg, #ff6b6b, #ff4c4c); /* Kırmızımsı gradyan */
    color: white;
    box-shadow: 6px 6px 12px -2px rgba(255, 0, 0, 0.2), /* Hafif kırmızı gölge */
                -6px -6px 12px -2px rgba(255, 255, 255, 0.6);
}

.button-red:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 16px -2px rgba(255, 0, 0, 0.3),
                -8px -8px 16px -2px rgba(255, 255, 255, 0.7);
    background: linear-gradient(145deg, #ff4c4c, #ff6b6b); /* Gradyan yönünü değiştir */
}

.button-red:active {
    transform: translateY(0);
    box-shadow: inset 4px 4px 8px -1px rgba(255, 0, 0, 0.3),
                inset -4px -4px 8px -1px rgba(255, 255, 255, 0.7);
}

/* Back to Login Link Button */
.button-link {
    background: #f3f0f1;
    color: #31456a;
    box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.1),
                -6px -6px 12px -2px rgba(255, 255, 255, 0.7);
    margin-top: 20px;
    font-size: 16px;
    padding: 12px 20px;
}
.button-link:hover {
    transform: translateY(-1px);
    box-shadow: 7px 7px 14px -2px rgba(0, 0, 0, 0.15),
                -7px -7px 14px -2px rgba(255, 255, 255, 0.8);
}
.button-link:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 6px -1px rgba(0, 0, 0, 0.15),
                inset -3px -3px 6px -1px rgba(255, 255, 255, 0.8);
}

/* Feedback/Error Messages (should exist) */
.feedback-messages {
    margin-bottom: 25px;
    padding: 15px 20px;
    border-radius: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.1),
                inset -3px -3px 6px rgba(255, 255, 255, 0.7);
}

.feedback-messages.error {
    background-color: #fcebeb;
    color: #cc0000;
    border: 1px solid #f0b0b0;
}

.feedback-messages.success {
    background-color: #e6ffe6;
    color: #008000;
    border: 1px solid #b0e0b0;
}

.feedback-messages p {
    margin: 5px 0;
    line-height: 1.5;
}
 

/* Yatay Çizgiler (HR) */
.hr-neumorphic {
    border: none;
    height: 1px;
    background: #f3f0f1; /* Arka plan ile aynı */
    width: 80%; /* Genişlik */
    margin: 25px auto; /* Üstten ve alttan boşluk, yatayda ortala */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
                0 -1px 1px rgba(255, 255, 255, 0.7); /* Hafif dış gölge */
}

/* Ana slider konteyneri */
#sha_slider_section {
    display: flex;
    justify-content: center; /* Sayfanın ortasına alır */
    align-items: center;
    margin-top: 40px; /* Üstten boşluğu artır */
    flex-wrap: wrap;
    gap: 30px; /* Kartlar arasına boşluk ekler */
    padding: 20px; /* Küçük ekranlarda kenarlardan boşluk */
}

/* Kartın tasarımı */
.slider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff; /* Daha belirgin bir arka plan */
    padding: 30px; /* İç boşluğu artır */
    border-radius: 20px; /* Daha yuvarlak köşeler */
    box-shadow: 8px 8px 15px -3px rgba(0, 0, 0, 0.1),
                -8px -8px 15px -3px rgba(255, 255, 255, 0.8); /* Daha yumuşak gölge */
    width: 400px; /* Kart genişliği */
    max-width: 90%; /* Küçük ekranlarda taşmayı önler */
    margin: 0; /* Ana konteynerdeki gap ile birlikte kullanılır */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover efekti için geçiş */
}

.slider-card:hover {
    transform: translateY(-5px); /* Hafif yukarı kalkma efekti */
    box-shadow: 10px 10px 20px -3px rgba(0, 0, 0, 0.15),
                -10px -10px 20px -3px rgba(255, 255, 255, 0.9);
}

/* Slider kutusu */
.slidecontainer {
    width: 100%; /* Kartın genişliğini doldurur */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px; /* Üstten boşluk */
}

/* Slider çubuğu */
.slider {
    width: 100%;
    appearance: none;
    height: 10px; /* Daha kalın slider çubuğu */
    border-radius: 5px;
    background: linear-gradient(90deg, #6a11cb, #2575fc); /* Mevcut renkler güzel */
    outline: none;
    transition: background 0.3s ease; /* Hover efekti için geçiş */
}

/* Slider butonu (WebKit tabanlı tarayıcılar için - Chrome, Safari vb.) */
.slider::-webkit-slider-thumb {
    appearance: none;
    width: 24px; /* Daha büyük buton */
    height: 24px; /* Daha büyük buton */
    background: #ffffff; /* Beyaz buton */
    border: 3px solid #2575fc; /* Ana renkle uyumlu kenarlık */
    border-radius: 50%;
    cursor: grab; /* Tutma imleci */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Butona gölge */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slider::-webkit-slider-thumb:active {
    transform: scale(1.1); /* Tıklandığında hafif büyüme */
    cursor: grabbing; /* Tutarken imleç */
}

/* Slider butonu (Mozilla Firefox için) */
.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 3px solid #2575fc;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slider::-moz-range-thumb:active {
    transform: scale(1.1);
    cursor: grabbing;
}

/* Değer göstergesi */
.slider-value {
    margin-top: 15px; /* Üstten boşluğu artır */
    font-size: 18px; /* Yazı boyutunu büyüt */
    font-weight: bold;
    color: #333; /* Daha koyu metin rengi */
    background: linear-gradient(45deg, #e0e0e0, #f0f0f0); /* Hafif gradyanlı arka plan */
    padding: 8px 15px; /* İç boşluğu artır */
    border-radius: 12px; /* Daha yuvarlak köşeler */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
                inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* İç gölge efekti */
    min-width: 60px;
    text-align: center;
}

/* Slider kutuları için özelleştirmeler (mevcut slider-container'ı ve slider-box'ı düzenlendi) */
.slider-container { /* Bu kısım muhtemelen ana slider bölümünüzle birleşmeli */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.slider-box { /* Bu kısım muhtemelen slider-card ile birleştirilebilir veya farklı bir amaç için kullanılabilir */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f3f0f1; /* Arka planı genel body rengine uyumlu */
    border-radius: 20px;
    backdrop-filter: blur(5px); /* Hafif blur efekti */
    padding: 20px;
    box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.1),
                -6px -6px 12px -2px rgba(255, 255, 255, 0.8);
    width: 280px; /* Biraz daha geniş */
    max-width: 100%; /* Mobil uyumluluk */
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slider-box:hover {
    transform: translateY(-3px);
    box-shadow: 8px 8px 16px -2px rgba(0, 0, 0, 0.15),
                -8px -8px 16px -2px rgba(255, 255, 255, 0.9);
}

.slider-title {
    font-size: 18px; /* Daha büyük başlık */
    font-weight: bold;
    color: #31456a; /* Ana metin rengiyle uyumlu */
    margin-bottom: 10px; /* Daha fazla boşluk */
}

/* #sha_app (Ana Uygulama Konteyneri) */
#sha_app {
    padding: 20px 15px; /* Daha dengeli bir boşluk */
    max-width: 1200px; /* Maksimum genişliği artırıldı */
    margin: 0 auto; /* Otomatik olarak yatayda ortalar */
}

/* #sha_header_bar (Başlık Çubuğu) */
#sha_header_bar {
    color: rgba(49, 69, 106, 0.7); /* Biraz daha koyu ve belirgin */
    text-align: center; /* Ortalanmış başlık */
    margin-bottom: 25px; /* Alt boşluk */
}

#sha_header_bar span {
    display: block;
}

#sha_header_bar span.sub-heading {
    font-size: 14px; /* Biraz daha büyük alt başlık */
    font-weight: 500;
    padding: 5px 0; /* Boşlukları düzenledik */
}

#sha_header_bar span.heading {
    font-size: 32px; /* Daha büyük ve dikkat çekici başlık */
    font-weight: 700; /* Daha kalın */
    color: rgba(49, 69, 106, 1);
    margin-top: -10px; /* Alt başlığa daha yakın */
    letter-spacing: -0.5px; /* Hafif karakter aralığı */
}

/* #sha_button_list (Buton Listesi Bölümü) */
#sha_button_list {
    margin-top: 25px; /* Üst boşluğu artır */
}

#sha_button_list ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Öğeler arasına daha fazla boşluk */
}

#sha_button_list ul li {
    list-style: none;
    width: 18%; /* Daha küçük ekranlarda daha iyi dağılım için */
    min-width: 80px; /* Minimum genişlik belirledik */
    text-align: center;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* İşaretçi ekle */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Yumuşak geçişler */
}

#sha_button_list ul li:first-child {
    margin-left: 0;
}

#sha_button_list ul li span {
    display: flex;
    height: 60px; /* Daha büyük ikon alanı */
    width: 60px; /* Daha büyük ikon alanı */
    line-height: 60px;
    border-radius: 18px; /* Daha yuvarlak köşeler */
    align-items: center;
    justify-content: center;
    font-size: 24px; /* İkon boyutu */
    transition: all 0.3s ease; /* Tüm geçişlere yumuşaklık */
}

/* Metin kısmı */
#sha_button_list ul li span.button-text {
    margin-top: 8px; /* Metin ile ikon arasına daha fazla boşluk */
    display: block;
    font-size: 13px; /* Metin boyutunu ayarladık */
    color: #555;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none !important;
    box-shadow: none !important;
    font-weight: 500; /* Biraz daha kalın metin */
}

/* Kapalı (Off) Durumu */
#sha_button_list ul li.off span {
    color: rgba(49, 69, 106, 0.4);
    box-shadow: 6px 6px 12px -2px rgba(0, 0, 0, 0.1), /* Yumuşak dış gölge */
                -6px -6px 12px -2px rgba(255, 255, 255, 0.8);
    border: none; /* Border'ı kaldırıyoruz, gölge yeterli */
    background-color: #f3f0f1; /* Arka plan rengi */
}

#sha_button_list ul li.off:hover span {
    transform: translateY(-3px); /* Hover'da hafif yukarı kalkma */
    box-shadow: 8px 8px 16px -2px rgba(0, 0, 0, 0.15),
                -8px -8px 16px -2px rgba(255, 255, 255, 0.9);
}

/* Açık (On) Durumu */
#sha_button_list ul li.on span {
    color: rgba(49, 69, 106, 1);
    box-shadow: inset 5px 5px 8px -1px rgba(0, 0, 0, 0.2), /* Daha belirgin iç gölge */
                inset -5px -5px 8px -1px rgba(255, 255, 255, 0.7),
                0.5px 0.5px 0 rgba(255, 255, 255, 0.5), /* Kenar vurgusu */
                -0.5px -0.5px 0 rgba(0, 0, 0, 0.05); /* Ters kenar vurgusu */
    border: none; /* Border'ı kaldırıyoruz */
    background-color: #e0e0e0; /* Hafif gri arka plan */
}

/* Sıcaklık Gösterge Alanı */
#sha_temp_body {
    margin-top: 40px; /* Daha fazla üst boşluk */
    text-align: center;
}

#sha_temp_body .sha_temp {
    position: relative;
    display: inline-block;
    height: 250px; /* Daha büyük boyut */
    width: 250px; /* Daha büyük boyut */
    border-radius: 100%;
    text-align: center;
    background-color: #f3f0f1; /* Arka plan rengi */
    box-shadow: 20px 20px 40px -10px rgba(0, 0, 0, 0.1), /* Yumuşak dış gölge */
                -20px -20px 40px -10px rgba(255, 255, 255, 0.6),
                inset 2px 2px 5px rgba(0, 0, 0, 0.05), /* Hafif iç gölge */
                inset -2px -2px 5px rgba(255, 255, 255, 0.3); /* Hafif iç gölge */
}

#sha_temp_body .sha_temp:before {
    position: absolute;
    content: '';
    display: block;
    height: 92%; /* İç halka boyutu */
    width: 92%; /* İç halka boyutu */
    border-radius: inherit;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 3px 3px 6px -1px rgba(0, 0, 0, 0.1),
                inset -3px -3px 6px -1px rgba(255, 255, 255, 0.7);
}

#sha_temp_body .sha_temp:after {
    position: absolute;
    content: '';
    display: block;
    height: 82%; /* En iç halka boyutu */
    width: 82%; /* En iç halka boyutu */
    border-radius: inherit;
    left: 50%;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.02); /* Hafif saydam arka plan */
    border: 1px solid rgba(0, 0, 0, 0.01);
    transform: translate(-50%, -50%);
    box-shadow: inset 2px 2px 5px -1px rgba(0, 0, 0, 0.08),
                inset -2px -2px 5px -1px rgba(255, 255, 255, 0.5);
}

#sha_temp_body .sha_temp > span {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%); /* Dikeyde tam ortalama */
}

#sha_temp_body .sha_temp > span > span.temp-data {
    font-size: 75px; /* Daha büyük sıcaklık değeri */
    font-weight: 700;
    display: block;
    color: rgba(49, 69, 106, 1);
}

#sha_temp_body .sha_temp > span > span.temp-data sup {
    position: absolute;
    font-size: 18px; /* Derece işareti boyutu */
    font-weight: 500;
    top: 15%; /* Pozisyonunu ayarladık */
    left: 100%; /* Sayının sağına al */
}

#sha_temp_body .sha_temp > span > span.temp-info {
    position: absolute;
    font-size: 15px; /* Bilgi metni boyutu */
    font-weight: 500;
    color: rgba(4, 69, 106, 0.7); /* Daha belirgin renk */
    white-space: nowrap;
    bottom: -20px; /* Daha fazla boşluk */
    left: 50%;
    transform: translateX(-50%);
}

/* Metrik Kutucuklar (Nem, Basınç vb.) */
#sha_temp_meta {
    margin-top: 40px; /* Üst boşluğu artır */
    display: grid; /* Grid sistemi kullanıyoruz */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Duyarlı sütunlar */
    gap: 20px; /* Kutucuklar arasına boşluk */
    padding: 0 15px; /* Kenar boşlukları */
}

#sha_temp_meta .sha_tile > div {
    position: relative;
    border: none; /* Border'ı kaldırdık */
    padding: 25px; /* İç boşluğu artır */
    border-radius: 20px; /* Daha yuvarlak köşeler */
    background-color: #f3f0f1; /* Arka plan rengi */
    box-shadow: 10px 10px 25px -8px rgba(0, 0, 0, 0.1), /* Yumuşak dış gölge */
                -10px -10px 25px -8px rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#sha_temp_meta .sha_tile > div:hover {
    transform: translateY(-3px);
    box-shadow: 12px 12px 30px -8px rgba(0, 0, 0, 0.15),
                -12px -12px 30px -8px rgba(255, 255, 255, 0.8);
}

#sha_temp_meta .sha_tile > div span.tile_icon {
    display: inline-flex; /* Flexbox ile ortalama */
    height: 55px; /* İkon boyutu */
    width: 55px; /* İkon boyutu */
    align-items: center;
    justify-content: center;
    font-size: 22px; /* İkon boyutu */
    border-radius: 15px;
    border: none; /* Border'ı kaldırdık */
    background-color: #f3f0f1;
    color: rgba(49, 69, 106, 0.7);
    box-shadow: inset 4px 4px 8px -1px rgba(0, 0, 0, 0.1),
                inset -4px -4px 8px -1px rgba(255, 255, 255, 0.6);
}

#sha_temp_meta .sha_tile > div span.tile_info {
    position: absolute;
    display: inline-block;
    font-size: 17px; /* Bilgi metni boyutu */
    font-weight: 600; /* Daha kalın */
    color: rgba(49, 69, 106, 0.9);
    padding-left: 18px; /* İkon ile metin arası boşluk */
    margin-top: 0; /* Boşluğu sıfırladık */
    top: 50%;
    transform: translateY(-50%); /* Dikeyde ortala */
}

#sha_temp_meta .sha_tile > div span.tile_info span {
    display: block;
    font-weight: 400;
    font-size: 14px; /* Alt metin boyutu */
    color: rgba(49, 69, 106, 0.6);
    margin-top: 3px; /* Üst metin ile alt metin arası boşluk */
}

/* Alt bilgi bölümü */
#sha_footer {
    margin-top: 40px; /* Daha fazla üst boşluk */
    color: rgba(49, 69, 106, 0.6);
    padding: 0 15px; /* Kenar boşlukları */
    display: flex; /* Flexbox ile düzenleme */
    justify-content: space-between; /* Öğeleri ayır */
    align-items: center; /* Dikeyde ortala */
    flex-wrap: wrap; /* Küçük ekranlarda sarmala */
    gap: 15px; /* Öğeler arası boşluk */
}

#sha_footer .footer_left,
#sha_footer .footer_right {
    display: flex;
    flex-direction: column;
}

#sha_footer .footer_title {
    font-size: 14px; /* Daha küçük başlık */
    display: block;
}

#sha_footer .footer_data {
    font-size: 19px; /* Daha büyük veri */
    font-weight: 600;
    color: rgba(49, 69, 106, 1);
    margin-top: 2px;
}

#sha_footer .footer_data span {
    color: rgba(49, 69, 106, 0.6);
    font-weight: 500;
}

/* Anahtarlar (Switch) */
#sha_footer .sha_switch {
    position: relative;
    display: inline-block;
    height: 35px; /* Daha büyük anahtar */
    width: 70px; /* Daha büyük anahtar */
    border-radius: 20px; /* Daha yuvarlak */
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: #b0e0a5; /* Yeşil tonu */
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

#sha_footer .sha_switch:before {
    position: absolute;
    content: '';
    height: 30px; /* Düğme boyutu */
    width: 30px; /* Düğme boyutu */
    background-color: #f3f0f1; /* Beyaz düğme */
    border-radius: 50%; /* Tamamen yuvarlak */
    right: 2px; /* Sağ kenara daha yakın */
    top: 2px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
    transition: all 0.3s ease;
}

#sha_footer .sha_switch.turn {
    background-color: #7a94be; /* Kapalıyken koyu mavi */
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2);
}

#sha_footer .sha_switch.turn:before {
    transform: translateX(-35px); /* Sola kaydır */
}

/* Büyük Ekranlar İçin Genel Ayarlamalar */
@media (min-width: 1200px) {
    body {
        /* Geniş ekranlarda içeriğin daha rahat yayılmasını sağlar */
        padding: 20px;
    }

    .limiter {
        /* Limiter'ın geniş ekranlarda da içeriği merkezlemesini sağlar */
        max-width: 1400px; /* Daha geniş bir maksimum genişlik */
        margin: 0 auto; /* Ortalamak için */
    }

    .container-login100 {
        max-width: 600px; /* Formun geniş ekranlarda biraz daha geniş olmasını sağlar */
        padding: 40px 60px; /* İç boşlukları artır */
    }

    /* Başlık */
    .segment h1 {
        font-size: 32px; /* Daha büyük başlık */
    }

    /* Form Grupları */
    .form-group input[type="text"],
    .select-wrapper select {
        padding: 15px 25px; /* Input/select iç boşluklarını artır */
        font-size: 17px;
    }

    /* Buton Stilleri */
    .button {
        padding: 15px 30px; /* Buton iç boşluklarını artır */
        font-size: 20px;
    }

    /* Ana slider konteyneri */
    #sha_slider_section {
        margin-top: 60px; /* Üst boşluğu artır */
        gap: 40px; /* Kartlar arasına daha fazla boşluk */
        padding: 30px; /* Kenarlardan boşluk */
    }

    /* Kartın tasarımı */
    .slider-card {
        width: 450px; /* Kart genişliğini artır */
        padding: 40px; /* İç boşluğu artır */
        border-radius: 25px; /* Daha yuvarlak köşeler */
       /* box-shadow: 10px 10px 20px -3px rgba(0, 0, 0, 0.1),*/
                   /* -10px -10px 20px -3px rgba(255, 255, 255, 0.8); /* Daha belirgin gölge */
    }

    /* Slider çubuğu */
    .slider {
        height: 12px; /* Daha kalın slider çubuğu */
    }

    /* Slider butonu */
    .slider::-webkit-slider-thumb {
        width: 28px; /* Daha büyük buton */
        height: 28px; /* Daha büyük buton */
        border-width: 4px; /* Kenarlık kalınlığını artır */
    }

    .slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
        border-width: 4px;
    }

    /* Değer göstergesi */
    .slider-value {
        margin-top: 20px; /* Üstten boşluğu artır */
        font-size: 20px; /* Yazı boyutunu büyüt */
        padding: 10px 20px; /* İç boşluğu artır */
        min-width: 70px;
    }

    /* #sha_app (Ana Uygulama Konteyneri) */
    #sha_app {
        padding: 30px 25px; /* Daha dengeli bir boşluk */
        max-width: 1400px; /* Maksimum genişliği daha da artırıldı */
    }

    /* #sha_header_bar (Başlık Çubuğu) */
    #sha_header_bar {
        margin-bottom: 40px; /* Alt boşluk */
    }

    #sha_header_bar span.sub-heading {
        font-size: 16px; /* Alt başlık boyutunu büyüt */
    }

    #sha_header_bar span.heading {
        font-size: 38px; /* Daha büyük ve dikkat çekici başlık */
        letter-spacing: -1px; /* Hafif karakter aralığı */
    }

    /* #sha_button_list (Buton Listesi Bölümü) */
    #sha_button_list {
        margin-top: 40px; /* Üst boşluğu artır */
    }

    #sha_button_list ul {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Daha fazla sütun, daha iyi dağılım */
        gap: 30px; /* Öğeler arasına daha fazla boşluk */
    }

    #sha_button_list ul li {
        min-width: 100px; /* Minimum genişliği biraz daha artırdık */
        padding: 15px 10px;
    }

    #sha_button_list ul li span {
        height: 70px; /* Daha büyük ikon alanı */
        width: 70px; /* Daha büyük ikon alanı */
        line-height: 70px;
        border-radius: 20px; /* Daha yuvarlak köşeler */
        font-size: 28px; /* İkon boyutu */
    }

    /* Metin kısmı */
    #sha_button_list ul li span.button-text {
        margin-top: 10px; /* Metin ile ikon arasına daha fazla boşluk */
        font-size: 14px; /* Metin boyutunu ayarladık */
    }

    /* Sıcaklık Gösterge Alanı */
    #sha_temp_body {
        margin-top: 60px; /* Daha fazla üst boşluk */
    }

    #sha_temp_body .sha_temp {
        height: 300px; /* Daha büyük boyut */
        width: 300px; /* Daha büyük boyut */
        box-shadow: 25px 25px 50px -10px rgba(0, 0, 0, 0.12),
                    -25px -25px 50px -10px rgba(255, 255, 255, 0.7); /* Yumuşak dış gölge */
    }

    #sha_temp_body .sha_temp:before {
        height: 94%; /* İç halka boyutu */
        width: 94%; /* İç halka boyutu */
    }

    #sha_temp_body .sha_temp:after {
        height: 85%; /* En iç halka boyutu */
        width: 85%; /* En iç halka boyutu */
    }

    #sha_temp_body .sha_temp > span > span.temp-data {
        font-size: 90px; /* Daha büyük sıcaklık değeri */
    }

    #sha_temp_body .sha_temp > span > span.temp-data sup {
        font-size: 22px; /* Derece işareti boyutu */
        top: 12%; /* Pozisyonunu ayarladık */
    }

    #sha_temp_body .sha_temp > span > span.temp-info {
        font-size: 16px; /* Bilgi metni boyutu */
        bottom: -25px; /* Daha fazla boşluk */
    }

    /* Metrik Kutucuklar (Nem, Basınç vb.) */
    #sha_temp_meta {
        margin-top: 60px; /* Üst boşluğu artır */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Daha geniş kutucuklar */
        gap: 30px; /* Kutucuklar arasına boşluk */
        padding: 0 25px; /* Kenar boşlukları */
    }

    #sha_temp_meta .sha_tile > div {
        padding: 30px; /* İç boşluğu artır */
        border-radius: 25px; /* Daha yuvarlak köşeler */
        box-shadow: 12px 12px 30px -8px rgba(0, 0, 0, 0.12),
                    -12px -12px 30px -8px rgba(255, 255, 255, 0.8);
    }

    #sha_temp_meta .sha_tile > div span.tile_icon {
        height: 65px; /* İkon boyutu */
        width: 65px; /* İkon boyutu */
        font-size: 26px; /* İkon boyutu */
        border-radius: 18px;
    }

    #sha_temp_meta .sha_tile > div span.tile_info {
        font-size: 19px; /* Bilgi metni boyutu */
        padding-left: 20px; /* İkon ile metin arası boşluk */
    }

    #sha_temp_meta .sha_tile > div span.tile_info span {
        font-size: 15px; /* Alt metin boyutu */
        margin-top: 5px; /* Üst metin ile alt metin arası boşluk */
    }

    /* Alt bilgi bölümü */
    #sha_footer {
        margin-top: 60px; /* Daha fazla üst boşluk */
        padding: 0 25px; /* Kenar boşlukları */
    }

    #sha_footer .footer_title {
        font-size: 16px; /* Daha küçük başlık */
    }

    #sha_footer .footer_data {
        font-size: 22px; /* Daha büyük veri */
    }

    /* Anahtarlar (Switch) */
    #sha_footer .sha_switch {
        height: 40px; /* Daha büyük anahtar */
        width: 80px; /* Daha büyük anahtar */
        border-radius: 25px; /* Daha yuvarlak */
    }

    #sha_footer .sha_switch:before {
        height: 35px; /* Düğme boyutu */
        width: 35px; /* Düğme boyutu */
        right: 3px; /* Sağ kenara daha yakın */
        top: 2.5px;
    }

    #sha_footer .sha_switch.turn:before {
        transform: translateX(-40px); /* Sola kaydır */
    }

    /* Ayarlar Sayfası Özelleştirmeleri */
    #sha_header_bar .header-content {
        padding: 35px 0 20px; /* Başlık ve geri butonu için boşluk */
    }

    #sha_header_bar .back-button {
        left: 20px; /* Soldan uzaklık */
        font-size: 28px; /* Buton ikon boyutu */
    }

    #sha_header_bar .heading {
        font-size: 38px; /* Başlık boyutu */
    }

    /* Ayar Seçenekleri Grid Düzeni */
    #settings_options {
        margin-top: 40px; /* Başlıktan sonra boşluk */
        padding: 0 25px; /* Kenarlardan boşluk */
        max-width: 1400px; /* Daha geniş ekranlarda daha iyi dağılım için */
    }

    .settings-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Daha geniş kutucuklar, daha fazla sütun */
        gap: 35px; /* Kutucuklar arasına boşluk */
    }

    /* Her Bir Ayar Kutucuğu (Tile) */
    .sha_tile .tile-content {
        padding: 40px 25px; /* İç boşlukları artırdık */
        border-radius: 30px; /* Daha yuvarlak köşeler */
        /*box-shadow: 12px 12px 25px -5px rgba(0, 0, 0, 0.12),*/
          /*          -12px -12px 25px -5px rgba(255, 255, 255, 0.85); /* Neumorphism dış gölge */
    }

    /* İkon Alanı */
    .sha_tile .tile_icon {
        height: 80px; /* İkon kutusu boyutu */
        width: 80px; /* İkon kutusu boyutu */
        border-radius: 25px; /* Yuvarlak köşeler */
        font-size: 36px; /* İkon boyutu */
        margin-bottom: 25px; /* İkon ile metin arasına boşluk */
    }

    /* Metin Bilgisi */
    .sha_tile .tile_info {
        font-size: 22px; /* Başlık metin boyutu */
        margin-bottom: 12px; /* Alt metinle arasına boşluk */
    }

    .sha_tile .tile_info span {
        font-size: 15px; /* Açıklama metin boyutu */
        margin-top: 8px; /* Üst metinle arasına boşluk */
    }
}


/* Mobil Duyarlılık (Media Queries) */
@media (max-width: 991px) { /* Medium cihazlarda (tabletler) */
    .settings-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 sütun */
        gap: 20px;
    }
    .sha_tile .tile-content {
        padding: 25px 15px;
    }
    .sha_tile .tile_icon {
        height: 60px;
        width: 60px;
        font-size: 28px;
        margin-bottom: 15px;
    }
    .sha_tile .tile_info {
        font-size: 18px;
    }
    .sha_tile .tile_info span {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    #sha_button_list ul li {
        width: 28%; /* Orta ekranlarda 3 sütun */
        min-width: 90px;
    }
    #sha_temp_body .sha_temp {
        height: 200px;
        width: 200px;
    }
    #sha_temp_body .sha_temp > span > span.temp-data {
        font-size: 60px;
    }
    #sha_temp_meta {
        grid-template-columns: 1fr; /* Tek sütuna düşür */
        padding: 0 10px;
    }
    /* Ayarlar sayfası için mobil boyutlandırma */
    #sha_header_bar .heading {
        font-size: 28px;
    }
    .settings-grid {
        grid-template-columns: 1fr; /* Tek sütun */
        gap: 15px;
        padding: 0 10px; /* Kenar boşlukları daralt */
    }
    .sha_tile .tile-content {
        padding: 20px;
    }
    .sha_tile .tile_icon {
        height: 55px;
        width: 55px;
        font-size: 26px;
        margin-bottom: 10px;
    }
    .sha_tile .tile_info {
        font-size: 17px;
    }
    .sha_tile .tile_info span {
        font-size: 12px;
    }
    #sha_header_bar .back-button {
        font-size: 20px;
        left: 10px;
    }
}

@media (max-width: 600px) {
    .container-login100 {
        padding: 20px 25px; /* Daha az iç boşluk */
    }
    .segment h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .form-group input[type="text"],
    .select-wrapper select,
    .button {
        padding: 10px 15px; /* Daha küçük buton ve input boşlukları */
        font-size: 15px;
    }
    .button {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    #sha_header_bar span.heading {
        font-size: 28px;
    }
    #sha_button_list ul li {
        width: 45%; /* Mobil ekranlarda 2 sütun */
        min-width: 120px;
        padding: 8px 0;
    }
    #sha_button_list ul li span {
        height: 50px;
        width: 50px;
        line-height: 50px;
        font-size: 20px;
    }
    #sha_button_list ul li span.button-text {
        font-size: 12px;
    }
    #sha_temp_body .sha_temp {
        height: 180px;
        width: 180px;
    }
    #sha_temp_body .sha_temp > span > span.temp-data {
        font-size: 50px;
    }
    #sha_footer {
        flex-direction: column;
        align-items: flex-start;
    }
    #sha_footer .sha_switch {
        margin-top: 10px;
    }
}

@media (max-width: 400px) {
    .container-login100 {
        padding: 15px 20px;
    }
    .segment h1 {
        font-size: 22px;
    }
}

/* Ayarlar Sayfası Özelleştirmeleri */

#sha_header_bar .header-content {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: center; /* Yatayda ortala */
    position: relative; /* Geri butonunu konumlandırmak için */
    padding: 25px 0 15px; /* Başlık ve geri butonu için boşluk */
    color: rgba(49, 69, 106, 0.7); /* Metin rengi */
}

#sha_header_bar .back-button {
    position: absolute;
    left: 15px; /* Soldan uzaklık */
    top: 50%;
    transform: translateY(-50%); /* Dikeyde ortala */
    font-size: 24px; /* Buton ikon boyutu */
    color: #31456a; /* İkon rengi */
    text-decoration: none;
    transition: color 0.3s ease;
}

#sha_header_bar .back-button:hover {
    color: #6a11cb; /* Hover'da mor renk */
}

#sha_header_bar .heading {
    font-size: 32px; /* Başlık boyutu */
    font-weight: 700;
    color: rgba(49, 69, 106, 1);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* Hafif metin gölgesi */
    margin: 0; /* Otomatik margin'i sıfırladık */
}

/* Ayar Seçenekleri Grid Düzeni */
#settings_options {
    margin-top: 30px; /* Başlıktan sonra boşluk */
    padding: 0 15px; /* Kenarlardan boşluk */
    width: 100%; /* Konteynerin tam genişliğini almasını sağlar */
    max-width: 1200px; /* #sha_app ile uyumlu, daha geniş ekranlarda daha iyi dağılım için */
    margin-left: auto; /* Yatayda ortalamak için */
    margin-right: auto; /* Yatayda ortalamak için */
}

.settings-grid {
    display: grid; /* Grid özelliği korunmalı */
    /* Küçük ekranlarda tek sütun, orta ekranlarda 2 sütun, büyük ekranlarda 3 sütun */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Kutucuklar arasına boşluk */
    /* justify-content: center; /* Grid öğelerini merkezlemek için bu satır gereksiz, üstteki margin auto daha etkili */ */
    width: 100%; /* Gridin ebeveyninin genişliğini almasını sağlar */
}

/* Her Bir Ayar Kutucuğu (Tile) */
.sha_tile .tile-content {
    display: flex;
    flex-direction: column; /* İkon ve metni dikey sırala */
    align-items: center;
    background: #f3f0f1; /* Neumorphism arka planı */
    padding: 30px 20px; /* İç boşlukları artırdık */
    border-radius: 25px; /* Daha yuvarlak köşeler */
   /* box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.1),*/
                /*-10px -10px 20px -5px rgba(255, 255, 255, 0.8); /* Neumorphism dış gölge */
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%; /* İçerik eşit yüksekliğe sahip olsun */
    text-align: center; /* Metinleri ortala */
}

.sha_tile .tile-content:hover {
    transform: translateY(-5px); /* Hover'da hafif yukarı kalkma efekti */
    box-shadow: 12px 12px 25px -5px rgba(0, 0, 0, 0.15),
                -12px -12px 25px -5px rgba(255, 255, 255, 0.9);
}

.sha_tile .tile-content:active {
    transform: translateY(0);
    box-shadow: inset 5px 5px 10px -2px rgba(0, 0, 0, 0.15),
                inset -5px -5px 10px -2px rgba(255, 255, 255, 0.7); /* Tıklama efekti */
}

/* İkon Alanı */
.sha_tile .tile_icon {
    display: flex; /* İkonu ortalamak için */
    align-items: center;
    justify-content: center;
    height: 70px; /* İkon kutusu boyutu */
    width: 70px; /* İkon kutusu boyutu */
    border-radius: 20px; /* Yuvarlak köşeler */
    background: #f3f0f1; /* Arka plan rengi */
    color: #6a11cb; /* Mor ikon rengi */
    font-size: 32px; /* İkon boyutu */
    box-shadow: inset 4px 4px 8px -2px rgba(0, 0, 0, 0.1),
                inset -4px -4px 8px -2px rgba(255, 255, 255, 0.7); /* Neumorphism iç gölge */
    margin-bottom: 20px; /* İkon ile metin arasına boşluk */
    transition: all 0.3s ease;
}

.sha_tile .tile-content:hover .tile_icon {
    color: #550ca0; /* Hover'da ikon rengini koyulaştır */
    box-shadow: inset 3px 3px 6px -1px rgba(0, 0, 0, 0.15),
                inset -3px -3px 6px -1px rgba(255, 255, 255, 0.8);
}

/* Metin Bilgisi */
.sha_tile .tile_info {
    font-size: 20px; /* Başlık metin boyutu */
    font-weight: 600;
    color: #31456a; /* Ana metin rengi */
    display: block; /* Yeni satıra al */
    margin-bottom: 10px; /* Alt metinle arasına boşluk */
}

.sha_tile .tile_info span {
    display: block; /* Açıklama metnini yeni satıra al */
    font-size: 14px; /* Açıklama metin boyutu */
    font-weight: 400;
    color: #555; /* Açıklama metin rengi */
    margin-top: 5px; /* Üst metinle arasına boşluk */
}

/* Feedback Mesajları */
.feedback-messages {
    margin-top: 25px; /* Formlar arasına boşluk */
    margin-bottom: 25px;
    padding: 15px 20px;
    border-radius: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.1),
                inset -3px -3px 6px rgba(255, 255, 255, 0.7);
}

.feedback-messages p {
    margin: 5px 0;
    line-height: 1.5;
}

/* Hata mesajları için varsayılan stil */
.feedback-messages {
    background-color: #fcebeb; /* Çok açık kırmızı */
    color: #cc0000; /* Kırmızı metin */
    border: 1px solid #f0b0b0;
}

/* Başarı mesajları için özel stil */
.feedback-messages.success {
    background-color: #e6ffe6; /* Çok açık yeşil */
    color: #008000; /* Yeşil metin */
    border: 1px solid #b0e0b0;
}


/* Kullanıcı Hoş Geldin Metni */
.user-welcome-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #31456a;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
    text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.5);
}

.user-welcome-text .highlight-username {
    font-weight: 700;
    color: #6a11cb; /* Vurgulu mor renk */
}

/* Geri Dön Linki Ek Stil (Zaten button-link sınıfı var ama daha da spesifik olabilir) */
.back-to-login-link {
    margin-top: 25px; /* Üstteki formdan boşluk */
}

/* "Şifremi Unuttum" Linki */
.forgot-password-link {
    width: 100%;
    text-align: center;
    margin-bottom: 25px; /* Buton öncesi boşluk */
}

.forgot-password-link a {
    color: #888; /* Daha soluk bir renk */
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password-link a:hover {
    color: #6a11cb; /* Hover'da renk değiştir */
    text-decoration: underline;
}

/* Captcha Specific Styles */
.captcha-group {
    margin-bottom: 25px; /* More space for captcha */
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between image and input */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: center; /* Center items if wrapped */
}

.captcha-image {
    border-radius: 10px;
    box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.08),
                -5px -5px 10px -2px rgba(255, 255, 255, 0.6);
    /* Adjust width if needed for your captcha image size */
    max-width: 150px;
    height: auto;
}

.captcha-box input[type="text"] {
    flex-grow: 1; /* Allow captcha input to grow */
    min-width: 150px; /* Minimum width for captcha input */
}
/* Responsive Adjustments */
@media (max-width: 576px) {
    .container-login100 {
        padding: 25px 30px;
        max-width: 90%;
    }
    .segment h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"] {
        padding: 10px 15px;
        font-size: 15px;
    }
    .button {
        font-size: 16px;
        padding: 10px 20px;
    }
    .button-link {
        font-size: 15px;
        padding: 10px 15px;
    }
    .hr-neumorphic {
        margin: 25px auto;
    }
    .captcha-box {
        flex-direction: column; /* Stack captcha elements on small screens */
        gap: 10px;
    }
    .captcha-box input[type="text"] {
        min-width: unset; /* Remove min-width for full flexibility */
        width: 100%;
    }
    .captcha-image {
        max-width: 120px; /* Adjust captcha image size for small screens */
    }
}

@media (max-width: 380px) {
    .container-login100 {
        padding: 20px 25px;
        border-radius: 20px;
    }
    .segment h1 {
        font-size: 22px;
        margin-bottom: 15px;
    }
    .button {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Mevcut buton ve input stillerinizin doğru çalıştığından emin olun */
/* Genel Stil Ayarları içinde tanımladığınız .button, .button-red, .button-link, .form-group, .form-group input, .hr-neumorphic stillerinin bu HTML ile uyumlu olduğundan emin olun. */