/* Baziniai nustatymai */
:root {
    --primary-black: #000000;
    --primary-white: #ffffff;
    --top-bar-height: 40px; 
    --bottom-bar-height: 50px; 
    --font-stack: Arial, sans-serif;
    --newsletter-bottom-offset: 1%; 

    /* FONO PAVEIKSLĖLIŲ NUORODOS */
    --left-bg-image: url('Techno-min.jpg'); 
    --right-bg-image: url('right_background.jpg'); 
}

body {
    margin: 0; padding: 0; font-family: var(--font-stack);
    background-color: var(--primary-black); color: var(--primary-white);
    overflow-x: hidden; 
}


/* ---------------------------------- */
/* I. DESKTOP VERSIJA (ĮSK. MAŽUS DESKTOP) */
/* ---------------------------------- */

.fixed-top-bar { position: fixed; top: 0; left: 0; width: 100%; height: var(--top-bar-height); background-color: var(--primary-black); z-index: 1000; display: flex; border-bottom: none; }
.top-nav-left { width: 45%; display: flex; align-items: center; padding: 0; box-sizing: border-box; }
.top-nav-left ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; width: 70%; margin-left: 190px; }
.top-nav-left li a { color: var(--primary-white); text-decoration: none; font-size: 1.4em; font-weight: bold; text-transform: uppercase; }
.top-social-right { width: 50%; position: absolute; right: 0; display: flex; justify-content: flex-end; align-items: center; padding: 0 20px; box-sizing: border-box; height: var(--top-bar-height); display: flex; }
.top-social-right a { color: var(--primary-white); margin-left: 15px; text-decoration: none; font-weight: bold; font-size: 20px; }
.newsletter-signup-fullwidth { position: fixed; bottom: var(--newsletter-bottom-offset); left: 51%; transform: translateX(-50%); width: 20%; height: var(--bottom-bar-height); background-color: var(--primary-black); z-index: 1000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.newsletter-signup-fullwidth p { font-size: 1.1em; margin: 0 0 5px; text-align: center; }
.newsletter-form { display: flex; max-width: 600px; margin: 0; border-bottom: none; align-items: center; }
.newsletter-form input { background: var(--primary-white); border: none; color: var(--primary-black); padding: 10px 10px; flex-grow: 1; font-size: 1.1em; outline: none; width: 400px; }
.newsletter-form button { background: none; border: none; color: var(--primary-white); font-size: 1.2em; cursor: pointer; text-transform: uppercase; font-weight: bold; padding: 0 10px; margin-left: 0px; }
.bottom-social-bar { display: none; }

.split-content-container { display: flex; width: 100vw; height: calc(100vh - var(--top-bar-height)); margin-top: var(--top-bar-height); }
.content-left { flex: 1; position: relative; overflow: hidden; }
.image-area { width: 100%; height: 100%; position: relative; background-image: var(--left-bg-image); background-size: cover; background-position: center; }
.foreground-left-image { position: absolute; top: 100px; left:300px; width: 500px; height: auto; z-index: 50; display: block; }
.logo-on-image { display: none; }
.content-right { flex: 1; background-color: var(--primary-black); display: flex; justify-content: center; align-items: center; text-align: center; background-image: var(--right-bg-image); background-size: cover; background-position: center; position: relative; display: flex; }
.foreground-right-image { position: absolute; top: 350px; right: 230px; width: 600px; height: auto; z-index: 50; display: block; }
.logo-center { position: relative; z-index: 10; } 
.logo-symbol { width: 110px; height: 550px; margin: 0 auto 10px; position: relative; }
.logo-symbol .circle { width: 100%; height: 100%; border: 7px solid var(--primary-white); border-radius: 50%; box-sizing: border-box; }
.logo-symbol .dot { width: 20px; height: 20px; background-color: var(--primary-white); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.logo-tresor { font-size: 4em; margin: 100px 0 0; letter-spacing: 0.15em; line-height: 1; font-weight: 900; }
.logo-berlin { font-size: 1.2em; margin: 200px 0 0; letter-spacing: 0.5em; border-top: 0.1px solid var(--primary-white); padding-top: 3px; padding-left: 13px; padding-right: 0px; }
.logo-est { font-size: 0.8em; margin-top: 10px; letter-spacing: 0.2em; }


/* ---------------------------------- */
/* II. MOBILIOJI VERSIJA (< 768px) - FINALINIS AGRESYVUS KODAS */
/* ---------------------------------- */

@media (max-width: 768px) {
    
    body { overflow-y: auto !important; } 
    
    /* Navigacija */
    .fixed-top-bar { position: static; width: 100%; height: auto; display: block; border-bottom: none; }
    .top-nav-left { width: 100%; padding: 10px 0; border-bottom: none; }
    .top-nav-left ul { justify-content: space-around; padding: 0 10px; width: 100%; margin-left: 0; }
    .top-nav-left li a { margin: 0; font-size: 1.2em; }
    .top-social-right { display: none; } 

    /* Išdėstymas: Visi elementai eina vienas po kito */
    .split-content-container { display: block; height: auto; margin-top: 0; }
    
    /* ---------- KAIRIOJI SEKCIJA (VIRŠUTINĖ) ---------- */
    .content-left { width: 100%; } 
    .image-area { 
        min-height: 80vh; 
        width: 100% !important; 
        background-image: var(--left-bg-image);
        background-position: center;
        background-size: cover;
        position: relative; 
        display: flex; 
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 0; 
        text-align: center; 
    }
    
    /* 1. Kairysis paveikslėlis: Priverstinai rodomas be jokio pozicionavimo */
    .foreground-left-image {
        display: block !important; 
        position: relative !important; /* Naudojame relative */
        width: 90% !important; 
        max-width: 400px;
        height: auto !important; 
        margin: 20px auto !important; 
        
        /* VISŲ DARBALAUKIO POZICIJŲ IŠJUNGIMAS */
        top: auto !important; 
        left: auto !important;
        right: auto !important; 
        bottom: auto !important;
        transform: none !important; 
        order: 2; 
    }

    /* 2. Rodyti mobilųjį logotipą */
    .logo-on-image {
        display: block !important; 
        position: static !important; 
        transform: none !important; 
        margin-top: 10px;
        order: 1; 
    }
    .logo-symbol-mobile { width: 50px; height: 50px; margin: 0 auto; position: relative; } 
    
    /* ---------- DEŠINIOJI SEKCIJA (APATINĖ) ---------- */
    .content-right { 
        width: 100%; 
        min-height: 80vh; 
        display: flex !important; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: var(--right-bg-image); 
        background-color: var(--primary-black);
        background-position: center;
        background-size: cover;
        padding: 40px 0;
    }
    
    /* 3. Dešinysis paveikslėlis: Priverstinai rodomas be jokio pozicionavimo */
    .foreground-right-image {
        display: block !important; 
        position: relative !important; 
        width: 90% !important; 
        max-width: 450px;
        height: auto !important;
        margin: 20px auto !important; 
        
        /* VISŲ DARBALAUKIO POZICIJŲ IŠJUNGIMAS */
        top: auto !important; 
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important; 
        order: 1; 
    }

    /* 4. Logotipą centruojame ir pritaikome dydį */
    .logo-center { 
        position: static !important; 
        transform: none !important; 
        margin-top: 20px; 
        margin-bottom: 40px; 
        order: 2; 
    }
    .logo-symbol { width: 80px; height: 300px; margin-bottom: 5px; }
    .logo-tresor { font-size: 2.5em; margin-top: 40px; }
    .logo-berlin { font-size: 1em; margin-top: 50px; }
    .logo-est { font-size: 0.7em; margin-top: 5px; }

    /* ---------- APAČIOS JUOSTOS ---------- */
    
    /* 5. Naujienlaiškis */
    .newsletter-signup-fullwidth { 
        position: static !important; 
        width: 100%; 
        transform: none !important; 
        height: auto; 
        padding: 15px 0; 
        border-top: 1px solid var(--primary-white); 
    }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { width: 90%; max-width: 300px; margin-bottom: 10px; }
    .newsletter-form button { font-size: 1.1em; padding: 8px 20px; margin-left: 0px; border: 2px solid var(--primary-white); }
    
    /* 6. Socialinių tinklų juosta */
    .bottom-social-bar { display: block !important; }
}