/* Login page additions to Content/maincss/mths-giris.css (moved out of the old inline <style>). */
.giris-main { height: 100vh; }

/* The notice box sits in the slider section (not in the Swiper wrapper) so it can drop below the image on phones. */
.giris-hero { position: relative; }
.geciciBilgilendirme {
    position: absolute; right: 1rem; top: 1rem; z-index: 5;
    background: white; width: 463px; border-radius: 10px; padding: 18px; padding-right: 46px;
}
.bxs-alarm-exclamation {
    position: absolute; right: 0.5rem; top: 0.5rem; font-size: 34px; color: red;
    animation: alert 1s infinite;
}
.yeni-bilgilendirme {
    display: block; background: #b10a0a; width: max-content; color: white;
    padding: 5px 10px; border-radius: 9px; position: relative; top: -7px;
}
.geciciBilgilendirme b { margin-top: 7px; display: block; font-weight: 500; }

/* The two instruction lines under the button (the old page used Font Awesome circles). */
.giris-bilgi { margin-top: 20px; }
.giris-madde { display: block; text-align: left; font-style: normal; }
.giris-madde + .giris-madde { margin-top: 15px; }
.giris-nokta { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #dc1c1c; margin-right: 7px; vertical-align: -1px; }
.giris-indir { color: #dc1c1c; text-decoration: underline; }
.giris-hata { color: #dc1c1c; margin-top: 1rem; }

/* Same as the old page: just "İşlem Kodu" and the code (the expiry still runs in giris.js, unseen). */
.islem-kutu {
    background: #ebebeb; width: 60%; display: none; padding: 1rem;
    flex-direction: column; align-items: center; gap: 1.2rem; animation: opacity .4s;
}
.islem-kutu.acik { display: flex; }
.islem-kodu { font-size: 30px; font-weight: 500; }

/* ---------- Responsive: layout only — every size stays as on the old page ---------- */

/* Two columns but a narrow image: the box moves under the logo instead of covering it. */
@media (min-width: 769px) and (max-width: 1199px) {
    .geciciBilgilendirme {
        top: 130px !important; bottom: auto !important;
        left: 1rem !important; right: 1rem !important; width: auto !important;
    }
    .hero { padding-bottom: 0 !important; }
}

/* Phones: one column — image, then the box, then the form (the old CSS left each section at 50% width). */
@media (max-width: 768px) {
    .container section { width: 100%; flex: none; }
    .giris-main { height: auto; }
    .giris-hero { display: flex; flex-direction: column-reverse; }
    .geciciBilgilendirme {
        position: static !important; width: auto !important; margin: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
    .hero { padding-bottom: 0 !important; }
}