/* -----------------------------------------------------------
   DÁTUM: 2026-05-04
   PROJEKT: MASONS CRM - PREMIUM LOGIN STRUCTURE
   STÍLUS: kezdolap.css (Minden sor végén magyarázattal)
   ----------------------------------------------------------- */

/* 1. VIZUÁLIS ALAPOK ÉS TELJES ÜVEGHATÁS */
.fullscreen-bg {
    position: fixed; /* A háttér rögzítése a képernyőhöz */
    top: 0; /* Felső szélhez illesztés */
    left: 0; /* Bal szélhez illesztés */
    width: 100%; /* Teljes szélesség kitöltése */
    height: 100%; /* Teljes magasság kitöltése */
    z-index: -1; /* Minden tartalom mögé helyezés */
}

.fullscreen-bg img {
    width: 100%; /* Kép nyújtása a tároló szélességére */
    height: 100%; /* Kép nyújtása a tároló magasságára */
    object-fit: cover; /* Arányos kitöltés levágással */
    transform: scale(1.05); /* Enyhe nagyítás a szélek miatt */
}

.wrapper {
    position: relative; /* Belső elemek viszonyítási pontja */
    z-index: 1; /* Első réteg a háttér felett */
    min-height: 100vh; /* Képernyőnyi minimális magasság */
    display: flex; /* Rugalmas elrendezés a középre igazításhoz */
    justify-content: center; /* Vízszintes tengelyen középre */
    align-items: center; /* Függőleges tengelyen középre */
    background: transparent; /* Átlátszó háttérszín */
    overflow: hidden; /* Görgetősávok tiltása a "színpadon" */
}

/* 2. RÉTEGZETT SÖTÉTÍTŐ SÁV (A "TERÍTŐ") */
.wrapper::before {
    content: ""; /* Álelem létrehozása */
    position: absolute; /* Szabad pozicionálás */
    top: 0; /* Fentről indul */
    bottom: 0; /* Aljáig ér */
    width: 860px; /* Fix szélesség, a kártyánál keskenyebb */
    background: rgba(0, 0, 0, 0.45); /* Sötétítő áttetsző szín */
    z-index: 1; /* Megemelt réteg, hogy a kártya alatt, de a kép felett legyen */
    left: 50%; /* Középre helyezés bal széle */
    transform: translateX(-50%); /* Pontos középre igazítás */
    pointer-events: none; /* Átkattintható réteg */
}

/* 3. FŐ LOGIN KÁRTYA */
.login-container {
    position: relative; /* Alap a lebegő láblécnek */
    z-index: 10; /* Magas rétegrend, hogy minden felett legyen */
    display: flex; /* Kétoldalas elosztás */
    width: 900px; /* Fix kártyaszélesség */
    min-height: 500px; /* Fix minimum magasság */
    background: #ffffff; /* Fehér háttér */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Mély árnyék */
    border-radius: 20px; /* Sarkok kerekítése */
    opacity: 0; /* Kezdő láthatatlanság */
    transform: translateY(30px); /* Beúszás kezdőpontja */
    animation: cardFadeIn 0.8s ease-out forwards 1.2s; /* Megjelenítő animáció */
    overflow: visible !important; /* LÉNYEGES: Engedi, hogy a lábléc kilógjon alul */
}

/* 4. BELSŐ ELRENDEZÉS */
.info-side {
    flex: 1; /* Egyenlő arányú bal oldal */
    padding: 50px; /* Belső távolság */
    display: flex; /* Függőleges rendezés */
    flex-direction: column; /* Egymás alá kerülő elemek */
    justify-content: center; /* Középre igazítás */
    border-right: 1px solid rgba(0,0,0,0.05); /* Halvány középső vonal */
}

.info-side .logo {
    width: 200px; /* Logó szélessége */
    margin-bottom: 30px; /* Alsó távolság */
}

.form-side {
    flex: 1.2; /* Szélesebb jobb oldal a formnak */
    padding: 50px; /* Belső távolság */
    display: flex; /* Függőleges elosztás */
    flex-direction: column; /* Egymás alá rendezés */
    justify-content: center; /* Középre zárás */
}

.form-side h1 {
    font-weight: 300; /* Elegáns vékony betűk */
    color: #d4af37; /* Arany címsor szín */
    margin-bottom: 25px; /* Alsó távolság */
}

/* 5. ADATBEVITELI MEZŐK */
.input-wrapper {
    position: relative; /* Alap a feliratnak */
    margin-bottom: 25px; /* Mezök közötti hely */
}

.input-label {
    background: #fff; /* Fehér háttér a label alatt */
    padding: 0 5px; /* Betűk körüli hely */
    font-size: 12px; /* Kicsi felirat */
    color: #666; /* Szürke szín */
    position: absolute; /* Pontos helyezés a kereten */
    top: -9px; /* Keretre tolt pozíció */
    left: 12px; /* Bal oldali behúzás */
    z-index: 2; /* Keret feletti réteg */
}

.input-wrapper input {
    width: 100%; /* Teljes szélesség */
    padding: 14px; /* Kényelmes gépelési hely */
    border: 1px solid #ddd; /* Világos alapkeret */
    border-radius: 8px; /* Sarkok kerekítése */
    font-size: 14px; /* Olvasható betűméret */
    box-sizing: border-box; /* Szélességbe beleszámított padding */
    outline: none; /* Alap böngésző-keret tiltása */
    transition: 0.3s; /* Selymes átmenet fókuszkor */
}

.input-wrapper input:focus {
    border-color: #d4af37; /* Arany keret fókuszkor */
    box-shadow: 0 4px 12px rgba(212,175,55,0.1); /* Arany derengés */
}

/* 6. LÁBLÉC HARMONIKA - JAVÍTVA */
.footer-accordion {
    position: absolute; /* Kártya aljához kötve */
    bottom: 0; /* Alsó élen */
    left: 20px; /* Bal oldali behúzás */
    right: 20px; /* Jobb oldali behúzás */
    background: #ffffff; /* Fehér háttér */
    z-index: -1; /* A kártya fehér háttere mögé rejtjük */
    border: 1px solid #2f2f2f; /* Antracit keret */
    border-top: none; /* Kártyához tapadás felül szegély nélkül */
    border-radius: 0 0 15px 15px; /* Alsó kerekítés */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; /* Mozgásidő */
    opacity: 0; /* Kezdő láthatatlanság */
}

.login-container:hover .footer-accordion {
    transform: translateY(100%); /* Leúszás a kártya ALÁ */
    opacity: 1; /* Megjelenés mozgáskor */
}

.accordion-content {
    padding: 15px; /* Belső tér */
    text-align: center; /* Középre zárt szöveg */
    font-size: 11px; /* Kicsi lábléc betű */
    color: #333; /* Sötétszürke szín */
}

/* 7. GOMBOK ÉS LINKEK */
.btn-primary {
    background: #d4af37 !important; /* Arany szín kényszerítése */
    color: #fff !important; /* Fehér betű kényszerítése */
    padding: 12px 30px; /* Gomb mérete */
    border: none; /* Nincs alap keret */
    border-radius: 8px; /* Sarkok kerekítése */
    cursor: pointer; /* Egérmutató váltása */
    font-weight: 500; /* Közepes betűvastagság */
    transition: 0.3s; /* Hoveridő */
}

.btn-primary:hover {
    background: #e5c05b !important; /* Világos arany hover */
    color: #2f2f2f !important; /* Sötét betű hover */
    transform: translateY(-2px); /* Enyhe felemelkedés */
}

/* MINDEN LINK ÁLLAPOTÁNAK FIXÁLÁSA */
a, a:visited, a:active, a:focus {
    color: #d4af37 !important; /* Arany szín minden állapotban */
    text-decoration: none; /* Aláhúzás eltávolítása */
    transition: 0.3s; /* Sima színváltás */
    outline: none; /* Fókuszkeret eltávolítása */
}

/* 8. SZÍNHÁZI (INTRO) ELEMEK */
.curtain {
    position: fixed; /* Képernyőre rögzítve */
    top: 0; /* Tetejétől indul */
    width: 51%; /* Fél képernyő plusz pici fedés */
    height: 100%; /* Teljes magasság */
    background: #000; /* Fekete függönyszín */
    z-index: 1000; /* Legfelső rétegek egyike */
    pointer-events: none; /* Alatta lévő elemek elérhetők */
}

.curtain.left { left: 0; animation: openLeft 1s forwards 0.8s; } /* Balra nyitás */
.curtain.right { right: 0; animation: openRight 1s forwards 0.8s; } /* Jobbra nyitás */

.intro-logo-container {
    position: fixed; /* Fix középre igazítás */
    top: 0; /* Felső él */
    left: 0; /* Bal él */
    width: 100%; /* Teljes szélesség */
    height: 100%; /* Teljes magasság */
    display: flex; /* Középre igazítás módja */
    justify-content: center; /* Vízszintes közép */
    align-items: center; /* Függőleges közép */
    z-index: 1001; /* A függönyök feletti réteg */
    pointer-events: none; /* Ne fogja a kattintást */
    animation: fadeOut 0.5s forwards 0.8s; /* Eltűnés nyitáskor */
}

/* 9. ANIMÁCIÓK DEFINÍCIÓI */
@keyframes cardFadeIn { to { opacity: 1; transform: translateY(0); } } /* Kártya megjelenés */
@keyframes openLeft { to { transform: translateX(-100%); } } /* Bal függöny nyitás */
@keyframes openRight { to { transform: translateX(100%); } } /* Jobb függöny nyitás */
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } } /* Elhalványulás */

/* 10. MOBIL NÉZET (RESPONSIVE) */
@media (max-width: 768px) {
    .fullscreen-bg, .wrapper::before, .curtain, .intro-logo-container { 
        display: none !important; /* Sallangok és háttérkép tiltása */
    } 

    .wrapper { 
        background: #000; /* Tiszta fekete mobil háttér */
        align-items: flex-start; /* Fentről induló tartalom */
        padding-top: 40px; /* Felső távolság a logónak */
    } 

    .login-container { 
        width: 100%; /* Teljes mobilszélesség */
        flex-direction: column; /* Egymás alá rendezés */
        opacity: 1; /* Nincs beúszás */
        transform: none; /* Nincs mozgás */
        animation: none; /* Nincs animáció */
        background: transparent; /* Kártya átlátszóvá tétele */
        box-shadow: none; /* Árnyék elvétele */
        overflow: visible !important; /* Mobilon is fontos a láblécnek */
    } 

    .info-side { 
        display: flex; /* Mobil logó megjelenítése */
        padding: 0 0 30px 0; /* Alsó távolság a formtól */
        background: transparent; /* Átlátszó háttér */
        border: none; /* Középső vonal elvétele */
        align-items: center; /* Középre igazítás */
    } 

    .info-side .logo { 
        content: url('../kepek/crm.masons.logo.feher.webp'); /* Mobil logó */
        max-width: 250px; /* Optimális mobilméret */
        margin: 0; /* Plusz margó törlése */
    } 

    .sub-text { display: none; } /* Üdvözlő szöveg törlése */

    .form-side { 
        background: #fff; /* Bejelentkezési doboz fehérsége */
        border-radius: 15px; /* Sarkok kerekítése */
        width: 100%; /* Teljes szélesség */
        padding: 30px 20px; /* Belső tér */
        box-sizing: border-box; /* Padding beszámítása */
    } 

    .link-text, .notice, .btn-ghost { display: none !important; } /* Sallangok törlése */

    .footer-accordion { 
        position: relative; /* Fix pozíció alul */
        left: 0; right: 0; 
        opacity: 1; /* Mindig látható */
        transform: none; /* Nincs mozgás */
        border: none; /* Nincs keret */
        background: transparent; /* Átlátszó háttér */
        margin-top: 20px; /* Távolság a doboztól */
    } 

    .accordion-content { color: #888; } /* Szürke lábléc szöveg */
}