* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Body ve Arka Plan */
body {
    /*height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    background-image: url('../../../images/login/Picture1.jpg'); /* Arka plan resmi */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-size: 100%;
}
/*--End// Body ve Arka Plan --*/

/*-- Uygulama Başlıkları --*/
h1 {
    font-size: 3.5em; /* Başlık font boyutunu 3.5em yapar (em birimi, font boyutuna göre ölçeklenir) */
    color: #fff; /* Başlık metninin rengini beyaz yapar */
    letter-spacing: 2px; /* Harfler arasında 2 piksel boşluk bırakır */
    text-align: center; /* Metni ortalar */
    text-shadow: 2px 1px 4px rgba(19, 19, 19, 0.52); /* Metne gölge ekler (2px sağa, 1px aşağı, 4px bulanıklık, yarı saydam siyah renk) */
    font-style: italic; /* Metni italik yapar */
    margin: 3vw 1vw; /* Üst ve alt kenar boşluğunu 3vw, sağ ve sol kenar boşluğunu 1vw yapar (vw birimi, viewport genişliğine göre ölçeklenir) */
}

    h1 span {
        color: #C69F6A; /* <span> içindeki metnin rengini turuncu yapar */
    }
/*--End// Uygulama Başlıkları --*/

/*-- Resim ve h2 Elementi Düzenlemeleri --*/
img {
    position: absolute; /* Resmin konumunu mutlak (absolute) olarak ayarlar */
    top: -64px; /* Resmi sayfanın üst kısmından 64 piksel yukarıda konumlandırır */
}

h2 {
    color: #fff; /* Başlık metninin rengini beyaz yapar */
    font-size: 30px; /* Başlık metninin boyutunu 30 piksel yapar */
    letter-spacing: 0px; /* Harfler arasında 2 piksel boşluk bırakır */
    margin: 22px 0 40px; /* Dış kenar boşluğunu üst: 22 piksel, alt: 40 piksel, sol-sağ: 0 yapar */
    border-bottom: 1px dotted #fff; /* Alt kenara 1 piksel noktalı çizgi ve beyaz renk ekler */
    padding-bottom: 8px; /* Alt dolgusu (padding) 8 piksel yapar */
}
/*--End// Resim ve h2 Elementi Düzenlemeleri --*/

/*-- Tema İçerisindeki Alanlar(Container) --*/
.sub-main-w3 {
    display: -webkit-flex; /* Eski WebKit tabanlı tarayıcılar için flexbox */
    display: -webkit-box; /* Eski WebKit tabanlı tarayıcılar için flexbox */
    display: -moz-flex; /* Eski Firefox tarayıcılar için flexbox */
    display: -moz-box; /* Eski Firefox tarayıcılar için flexbox */
    display: -ms-flexbox; /* Eski Internet Explorer için flexbox */
    display: flex; /* Modern tarayıcılar için flexbox */
    align-items: center; /* İçerikleri dikey olarak ortalar */
    -webkit-box-pack: center; /* Eski WebKit tabanlı tarayıcılar için içerikleri yatay olarak ortalar */
    -moz-box-pack: center; /* Eski Firefox tarayıcılar için içerikleri yatay olarak ortalar */
    -ms-flex-pack: center; /* Eski Internet Explorer için içerikleri yatay olarak ortalar */
    -webkit-justify-content: center; /* Eski WebKit tabanlı tarayıcılar için içerikleri yatay olarak ortalar */
    justify-content: center; /* Modern tarayıcılar için içerikleri yatay olarak ortalar */
    float: right; /* Kapsayıcıyı sağa yaslar */
    position: absolute; /* Kapsayıcıyı konumlandırmak için absolute kullanılır */
    top: 50%; /* Kapsayıcıyı dikey olarak ortalar */
    left: 50%; /* Kapsayıcıyı yatay olarak ortalar */
    transform: translate(-50%, -50%); /* Kapsayıcıyı tam ortada konumlandırmak için kullanılır */
}

    .sub-main-w3 form {
        max-width: 500px; /* Formun maksimum genişliğini 600 piksel olarak ayarlar */
        margin: 0 5vw; /* Formun sağ ve sol taraflarına 5 viewport genişliği kadar boşluk ekler */
        background: rgba(12, 10, 10, 0.38); /* Formun arka planına yarı saydam siyah bir renk ekler */
        padding: 3.5vw; /* Formun iç kenarlarına 3.5 viewport genişliği kadar boşluk ekler */
        box-sizing: border-box; /* Padding ve border genişliğini toplam genişliğe dahil eder */
        display: -webkit-flex; /* Eski WebKit tabanlı tarayıcılar için flexbox */
        display: flex; /* Modern tarayıcılar için flexbox */
        flex-wrap: wrap; /* İçeriklerin taşması durumunda yeni satıra geçmesini sağlar */
        justify-content: center; /* İçerikleri yatay olarak ortalar */
        border-radius: 20px; /* Köşeleri oval yapar */
    }
/*--End// Tema İçerisindeki Alanlar --*/

/*-- İnput Type (text-password) Düzenlemeleri --*/
.form-style-agile {
    position: relative; /* Toggle icon'un doğru konumlanması için gerekli */
    margin-bottom: 1.5em; /* Alt kenarda 1.5em boşluk bırakır */
    flex-basis: 100%; /* Elemanın genişliğini esnek konteynerin tamamını kapsayacak şekilde ayarlar */
    -webkit-flex-basis: 100%; /* Eski WebKit tabanlı tarayıcılar için aynı işlemi yapar */
}

    .form-style-agile input[type="text"],
    .form-style-agile input[type="password"] {
        width: 100%; /* Giriş alanlarının genişliğini %100 yapar */
        color: #000; /* Metin rengini siyah yapar */
        outline: none; /* Giriş alanına odaklanıldığında görünen kenarlığı kaldırır */
        font-size: 14px; /* Metin boyutunu 14 piksel yapar */
        letter-spacing: 1px; /* Harfler arasında 1 piksel boşluk bırakır */
        padding: 15px 15px; /* Giriş alanının içindeki metin etrafında 15 piksel boşluk bırakır */
        box-sizing: border-box; /* Padding ve border genişliğini toplam genişliğe dahil eder */
        border: none; /* Kenarlık olmamasını sağlar */
        background: #fff; /* Arka plan rengini beyaz yapar */
        padding-right: 40px; /* Göz simgesi için sağ boşluk bırakır */
        font-family: sans-serif; /* YazıTipini ayarlıyoruz */
        border-radius: 7px; /* Köşeleri oval yapar */
    }

.toggle-password-login {
    position: absolute; /* İkonun giriş alanının sağ tarafında konumlanmasını sağlar */
    top: 50%; /* Dikey olarak ortalar */
    right: 15px; /* Sağ tarafa hizalar */
    transform: translateY(-50%); /* Dikey olarak ortalar */
    cursor: pointer; /* İmleci el simgesine dönüştürür */
    font-size: 18px; /* İkonun boyutunu ayarlar */
    color: #000; /* İkonun rengini siyah yapar */
}

.toggle-password-sign {
    position: absolute; /* İkonun giriş alanının sağ tarafında konumlanmasını sağlar */
    top: 50px; /* Dikey olarak ortalar */
    right: 15px; /* Sağ tarafa hizalar */
    transform: translateY(-50%); /* Dikey olarak ortalar */
    cursor: pointer; /* İmleci el simgesine dönüştürür */
    font-size: 18px; /* İkonun boyutunu ayarlar */
    color: #000; /* İkonun rengini siyah yapar */
}

.toggle-password-old {
    position: absolute; /* İkonun giriş alanının sağ tarafında konumlanmasını sağlar */
    top: 50px; /* Dikey olarak ortalar */
    right: 15px; /* Sağ tarafa hizalar */
    transform: translateY(-50%); /* Dikey olarak ortalar */
    cursor: pointer; /* İmleci el simgesine dönüştürür */
    font-size: 18px; /* İkonun boyutunu ayarlar */
    color: #000; /* İkonun rengini siyah yapar */
}

.toggle-password-new {
    position: absolute; /* İkonun giriş alanının sağ tarafında konumlanmasını sağlar */
    top: 50px; /* Dikey olarak ortalar */
    right: 15px; /* Sağ tarafa hizalar */
    transform: translateY(-50%); /* Dikey olarak ortalar */
    cursor: pointer; /* İmleci el simgesine dönüştürür */
    font-size: 18px; /* İkonun boyutunu ayarlar */
    color: #000; /* İkonun rengini siyah yapar */
}
/*--End// İnput Type (text-password) Düzenlemeleri --*/

/*-- İnput Type (Button) Düzenlemeleri --*/
.sub-main-w3 input[type="submit"] {
    color: white; /* Metin rengini beyaz yapar */
    background: #C69F6A; /* Arka plan rengini sağa doğru #ff5000'dan #f3cbcb'ye geçiş yapan bir degrade yapar */
    border: none; /* Kenarlık kaldırılır */
    padding: 13px 0; /* Üst ve alt padding 13px, sol ve sağ padding 0px yapar */
    margin-top: 30px; /* Üst kenar boşluğunu 30px yapar */
    outline: none; /* Tıklanınca kenarlık görünmesini engeller */
    width: 100%; /* Genişliğini %100 yapar */
    font-size: 16px; /* Yazı boyutunu 16 piksel yapar */
    cursor: pointer; /* İmleci tıklanabilir hale getirir */
    letter-spacing: 2px; /* Harfler arasında 2 piksel boşluk bırakır */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49); /* Butona gölge ekler, x ve y ekseninde 2 piksel kayma ve 6 piksel bulanıklık ile */
    transition: 0.5s all; /* Tüm stil değişikliklerinin 0.5 saniye sürmesini sağlar */
    -webkit-transition: 0.5s all; /* WebKit tarayıcılar için geçiş süresini 0.5 saniye yapar */
    -moz-transition: 0.5s all; /* Mozilla tarayıcılar için geçiş süresini 0.5 saniye yapar */
    -o-transition: 0.5s all; /* Opera tarayıcılar için geçiş süresini 0.5 saniye yapar */
    border-radius: 20px; /* Köşeleri oval yapar */
    font-family: Arial;
    font: bold;
}

    .sub-main-w3 input[type="submit"]:hover {
        background: #333333; /* Arka plan rengini sağa doğru #f3cbcb'den #ff5000'e geçiş yapan bir degrade yapar */
        transition: 0.5s all; /* Tüm stil değişikliklerinin 0.5 saniye sürmesini sağlar */
        -webkit-transition: 0.5s all; /* WebKit tarayıcılar için geçiş süresini 0.5 saniye yapar */
        -moz-transition: 0.5s all; /* Mozilla tarayıcılar için geçiş süresini 0.5 saniye yapar */
        -o-transition: 0.5s all; /* Opera tarayıcılar için geçiş süresini 0.5 saniye yapar */
    }
/*--End// İnput Type (Button) Düzenlemeleri --*/

/*-- ul / li elemanları Düzenlemeleri --*/
.wthree-text {
    width: 100%; /* .wthree-text sınıfına sahip elemanın genişliğini %100 yapar */
}

    .wthree-text ul li:nth-child(1) {
        float: left; /* Listenin ilk öğesini sola hizalar */
    }

    .wthree-text ul li:nth-child(2) {
        float: right; /* Listenin ikinci öğesini sağa hizalar */
    }

    .wthree-text ul li {
        display: inline-block; /* Liste öğelerini yatayda sıralar */
    }

        .wthree-text ul li a {
            color: #fff; /* Bağlantı metninin rengini beyaz yapar */
            font-size: 14px; /* Bağlantı metninin boyutunu 14 piksel yapar */
            letter-spacing: 1px; /* Harfler arasında 1 piksel boşluk bırakır */
            font-weight: 500; /* Metnin kalınlığını 500 olarak ayarlar (orta kalınlık) */
        }

            .wthree-text ul li a:hover {
                color: #ff580d; /* Bağlantı üzerine gelindiğinde (hover) metin rengini #ff580d yapar */
            }
/*--End// ul / li elemanları Düzenlemeleri --*/


/*-- Placeholder (yer tutucu) Düzenlemeleri --*/
::-webkit-input-placeholder {
    color: #000; /* WebKit tabanlı tarayıcılar (Chrome, Safari) için placeholder metninin rengini siyah (#000) yapar */
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #000; /* Eski Firefox sürümleri (18 ve öncesi) için placeholder metninin rengini siyah (#000) yapar */
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #000; /* Yeni Firefox sürümleri (19 ve sonrası) için placeholder metninin rengini siyah (#000) yapar */
}

:-ms-input-placeholder {
    color: #000; /* Internet Explorer tarayıcıları için placeholder metninin rengini siyah (#000) yapar */
}
/*--End// Placeholder (yer tutucu) Düzenlemeleri --*/

/*-- form-styl Düzenlemeleri --*/
.form-style-agile input[type="text"],
.form-style-agile select {
    width: 100%; /* Giriş alanlarının genişliğini %100 yapar */
    color: #000; /* Metin rengini siyah yapar */
    outline: none; /* Giriş alanına odaklanıldığında görünen kenarlığı kaldırır */
    font-size: 14px; /* Metin boyutunu 14 piksel yapar */
    letter-spacing: 1px; /* Harfler arasında 1 piksel boşluk bırakır */
    padding: 15px 15px; /* Giriş alanının içindeki metin etrafında 15 piksel boşluk bırakır */
    box-sizing: border-box; /* Padding ve border genişliğini toplam genişliğe dahil eder */
    border: none; /* Kenarlık olmamasını sağlar */
    background: #fff; /* Arka plan rengini beyaz yapar */
    font-family: sans-serif; /* YazıTipini ayarlıyoruz */
    border-radius: 7px; /* Köşeleri oval yapar */
}
/*--End// form-styl Düzenlemeleri --*/


/* Footer */
.footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.5;
    /* background-color: #FF580D;
    line-height: 1.5;*/
}

    .footer span {
        color: #f16522;
    }

/*-- Tema Farklı Ekran Genişlik Uyum Düzenlemeleri --*/
@media(max-width:1920px) {
    h1 {
        font-size: 4vw; /*Ekran genişliği 1920 pikselden küçük olduğunda, h1 başlığının font boyutunu viewport genişliğine göre (vw) 4vw olarak ayarlar.*/
    }
}

@media(max-width:1024px) {
    h1 {
        font-size: 4.5vw; /*Ekran genişliği 1024 pikselden küçük olduğunda, h1 başlığının font boyutunu viewport genişliğine göre (vw) 4.5vw olarak ayarlar.*/
    }
}

@media(max-width:900px) {
    .w3ls-social {
        left: 6%; /*Ekran genişliği 900 pikselden küçük olduğunda, .w3ls-social elementinin sol kenarını %6 sola kaydırır.*/
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 2.6em; /*Ekran genişliği 800 pikselden küçük olduğunda, h1 başlığının font boyutunu 2.6em olarak ayarlar.*/
    }

    .sub-main-w3 {
        float: none; /*Ekran genişliği 800 pikselden küçük olduğunda, h1 başlığının font boyutunu 2.6em olarak ayarlar.*/
    }

    /*Ekran genişliği 800 pikselden küçük olduğunda, .w3ls-social elementinin pozisyonunu static olarak ayarlar ve üst boşluğunu (margin-top) 5em yapar.*/
    .w3ls-social {
        position: static;
        margin-top: 5em;
    }

        .w3ls-social h2 {
            left: 241px; /*Ekran genişliği 800 pikselden küçük olduğunda, .w3ls-social h2 başlığını 241 piksel sola kaydırır.*/
        }
}

@media(max-width:667px) {
    .w3ls-social h2 {
        left: 182px; /*Ekran genişliği 667 pikselden küçük olduğunda .w3ls-social h2 başlığını 182 piksel sola kaydırır.*/
    }
}

@media(max-width:600px) {
    .w3ls-social h2 {
        left: 151px; /*Ekran genişliği 600 pikselden küçük olduğunda, .w3ls-social h2 başlığını 151 piksel sola kaydırır.*/
    }

    .footer p {
        letter-spacing: 1px; /*Ekran genişliği 600 pikselden küçük olduğunda, .footer p elementinin harf aralığını (letter-spacing) 1 piksel olarak ayarlar.*/
    }
}

@media(max-width:480px) {
    h1 {
        font-size: 2.3em; /*Ekran genişliği 480 pikselden küçük olduğunda, h1 başlığının font boyutunu 2.3em olarak ayarlar.*/
    }

    .sub-main-w3 form {
        padding: 7.5vw; /*Ekran genişliği 480 pikselden küçük olduğunda, .sub-main-w3 form formun padding değerini %7.5vw olarak ayarlar.*/
    }

    .footer p {
        letter-spacing: 1px; /*Ekran genişliği 480 pikselden küçük olduğunda, .footer p elementinin harf aralığını (letter-spacing) 1 piksel olarak ayarlar.*/
    }

    .w3ls-social h2 {
        left: 91px; /*Ekran genişliği 480 pikselden küçük olduğunda, .w3ls-social h2 başlığını 91 piksel sola kaydırır.*/
    }
}

@media(max-width:414px) {

    .form-style-agile input[type="text"],
    .form-style-agile input[type="password"] {
        font-size: 13px;
        padding: 13px 15px;
    }

    .wthree-text ul li:nth-child(1),
    .wthree-text ul li:nth-child(2) {
        float: none;
    }

    .wthree-text ul li:nth-child(2) {
        margin-top: 10px;
    }

    .w3ls-social h2 {
        left: 52px;
    }

    .form-style-agile {
        margin-bottom: 1em;
    }
}

@media(max-width:320px) {
    h1 {
        font-size: 1.8em;
    }

    .sub-main-w3 form {
        padding: 25px 14px;
    }

    .w3ls-social h2 {
        left: 10px;
    }
}
/*--End// Tema Farklı Ekran Genişlik Uyum Düzenlemeleri --*/


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Aşağıdaki kodlamalar KAYIT OL işlemlerine aittir.*/
button-signUp {
    padding: 10px;
    background-color: #fff; /* Butonun rengi beyaz */
    color: #000; /* Buton yazısı siyah */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

/* Kayıt Ol Butonu */
.kayit-ol-btn {
    background-color: #C69F6A;
    /* color: #0d0d0d;*/ /* Buton yazısı siyah */
    color: #ffffff; /* Buton yazısı beyaz */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 25px;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 10px;
    left: 10px;
}

    .kayit-ol-btn:hover {
        background-color: #333333;
    }

/* Kayan Form Paneli */
.form-panel {
    position: fixed;
    right: -100%;
    top: 0;
    width: 400px;
    height: 100%;
    background-color: #333;
    color: white;
    padding: 20px;
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.5);
    transition: right 0.4s ease;
    z-index: 1000;
}

    .form-panel.open {
        right: 0;
    }

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
}

/* İkonun butonun altına düzgün yerleşmesi için stil */
.icon-container {
    text-align: center;
    margin-top: 10px; /* Buton ile ikon arasında boşluk bırak */
}

.logom-icon {
    width: 100px; /* İkonun genişliğini ayarlayın */
    height: 100px; /* Orantılı yükseklik */
}

/* Form Elemanları Stili */
form {
    margin-top: 20px;
}

.label-sign {
    display: block;
    margin-bottom: 5px;
    color: white;
}

.input-sign {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
}

button[type="submit"] {
    background-color: #C69F6A;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

    button[type="submit"]:hover {
        background-color: #ff9800;
    }

/* Login Page */
.login-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0;
    border-radius: 8px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.logo-box {
    flex: 1;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 8px 8px 8px 8px;
}

.side-logo {
    max-width: 100%;
}

.login-box {
    flex: 1;
    background-color: #C69F6Aff;
    padding: 25px;
    text-align: center;
    border-radius: 0 8px 8px 0;
}

.login-icon {
    width: 80px;
    margin-bottom: 20px;
    border-radius: 23px;
}

.login-box h2 {
    color: #fff;
    margin-bottom: 20px;
}

.login-box p {
    margin-bottom: 20px;
    color: #fff;
}

.input-group-sign {
    margin-bottom: 20px;
}

    .input-group-sign input {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        border: none;
        outline: none;
        background-color: #ffcc99;
        color: #000;
    }

/* Giriş alanları ve select kutusu */
input-sign, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background-color: #ffcc99; /* Arka plan rengi */
    color: #000; /* Yazı rengi */
}

/* Select kutusuna özel stil */
select {
    background-color: #ffcc99; /* Select arka plan rengi */
    color: #000; /* Select yazı rengi */
    appearance: none; /* Varsayılan select okunu gizlemek için */
    -webkit-appearance: none; /* Safari için */
    -moz-appearance: none; /* Firefox için */
    padding-right: 30px; /* Ok işareti için sağ tarafa boşluk ekleyin */
}

/* Select kutusuna ok eklemek için özel stil (isteğe bağlı) */
select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

    button:hover {
        background-color: #333;
        color: #fff;
    }

.hidden {
    display: none;
}