@charset "UTF-8";
/* CSS Document */

         /* Globalni reset */
        * { box-sizing: border-box; }

        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background-color: #000000;
            color: #e4ca9e;
            overflow-x: hidden;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .logo { font-size: clamp(24px, 5vw, 48px); font-weight: bold; }

        .btn-kontakt {
            border: 1px solid #e4ca9e;
            padding: 10px 20px;
            text-decoration: none;
            color: #e4ca9e;
            font-size: 14px;
            transition: 0.3s;
            display: inline-block;
        }

        .btn-kontakt:hover { background-color: #e4ca9e; color: #000; }

        .main-content {
            background-color: #e4ca9e;
            color: #000;
            display: flex;
            padding: 50px;
            gap: 40px;
            align-items: center;
        }

        .text-section { flex: 2; }
        .text-section h2 { margin-top: 0; font-size: clamp(28px, 4vw, 36px); }
        .text-section p { line-height: 1.5; text-align: justify; font-size: clamp(18px, 3vw, 22px); }

        .image-box {
            flex: 1;
            background-color: #fff;
            border: 3px solid #000;
            aspect-ratio: 1 / 1;
            min-width: 280px;
        }

        .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* GALERIJA */
        .galerija {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 20px;
            flex-wrap: wrap;
        }

        .okvir-slike {
            width: calc(20% - 15px); 
            min-width: 150px;
            aspect-ratio: 1 / 1;
            border: 2px solid #e4ca9e;
            overflow: hidden;
        }

        .okvir-slike img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .okvir-slike img:hover { transform: scale(1.1); }

        /* FOOTER */
        footer {
            padding: 50px 20px;
            border-top: 1px solid #333;
        }

        .footer-container {
            display: flex;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-section { flex: 1; }
        .footer-section.right { text-align: right; }

        .social-links { display: flex; gap: 20px; margin-top: 15px; }
        .social-links a { color: #e4ca9e; font-size: 30px; text-decoration: none; transition: 0.3s; }
        .social-links a:hover { color: #fff; transform: translateY(-3px); }

        html { scroll-behavior: smooth; }

        /* FAQ */
        .faq-container { max-width: 800px; margin: 50px auto; padding: 20px; }
        .faq-item { border: 1px solid #e4ca9e; margin-bottom: 10px; background-color: #111; }
        .faq-question { width: 100%; padding: 20px; background: none; border: none; color: #e4ca9e; font-size: 18px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
        .faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: #000; color: #fff; }
        .faq-answer p { padding-bottom: 20px; margin: 0; line-height: 1.6; }
        .faq-item.active .faq-answer { max-height: 200px; }
        .faq-item.active i { transform: rotate(180deg); }

        .skriveno { display: none; }
        
        .btn-vise-stil {
            background-color: #000000; 
            color: #e4ca9e;            
            border: 1px solid #e4ca9e; 
            padding: 10px 20px;
            font-size: 14px;
            transition: 0.3s;          
            display: inline-block;
            cursor: pointer;
        }

        .btn-vise-stil:hover { background-color: #e4ca9e; color: #000000; }

        /* INTERAKTIVNA SEKCIJA (Monitor stil) */
        .interaktivna-sekcija {
            display: flex;
            max-width: 1000px;
            margin: 50px auto;
            background-color: #e4ca9e;
            padding: 30px;
            border-radius: 20px;
            gap: 30px;
            align-items: center;
        }

        .izbornik-gumbi { display: flex; flex-direction: column; gap: 15px; flex: 1; }

        .izbornik-gumbi button {
            background-color: #000;
            color: #e4ca9e;
            border: 2px solid #000;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .izbornik-gumbi button:hover { background-color: #e4ca9e; color: #000000; transform: translateX(10px); }

        .ekran-prikaz {
            flex: 2;
            background-color: #000;
            min-height: 400px;
            border-radius: 40px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            border: 10px solid #222;
            overflow: hidden;
        }

        #glavni-prikaz-slika { max-width: 100%; max-height: 580px; object-fit: contain; border-radius: 10px; margin-bottom: 20px; }
        #glavni-prikaz-tekst { color: #e4ca9e; font-size: 18px; line-height: 1.6; margin: 0; }

      @media only screen and (max-width: 768px) {
    /* Smanjujemo razmake i centriramo zaglavlje */
    header {
        padding: 15px 20px;
        flex-direction: column;
        text-align: center;
    }

    /* Glavni tekst i slika idu jedno ispod drugog */
    .main-content {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .text-section, .image-box {
        width: 100%;
        flex: none;
    }

    /* Galerija: 2 slike u redu umjesto 5 */
    .okvir-slike {
        width: calc(50% - 10px); 
    }

    /* INTERAKTIVNA SEKCIJA - Ključno za telefon */
    .interaktivna-sekcija {
        flex-direction: column; /* Gumbi idu iznad ekrana */
        padding: 15px;
        gap: 15px;
    }

    .izbornik-gumbi {
        width: 100%;
        flex-direction: row; /* Gumbi su vodoravni */
        overflow-x: auto;    /* Omogućuje listanje gumba prstom (swipe) */
        padding-bottom: 10px;
        justify-content: flex-start;
    }

    .izbornik-gumbi button {
        white-space: nowrap; /* Tekst u gumbu se ne lomi */
        padding: 10px 15px;
        font-size: 14px;
        flex-shrink: 0;      /* Gumbi se ne stišću */
    }

    /* Prilagodba ekrana na mobitelu */
    .ekran-prikaz {
        width: 100%;
        min-height: 350px;
        padding: 15px;
        border-width: 5px; /* Tanji rub monitora */
    }

    #glavni-prikaz-slika {
        max-height: 180px; /* Manja slika da stane tekst ispod */
    }

    #glavni-prikaz-tekst {
        font-size: 15px;
    }

    /* Footer prilagodba */
    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-section.right {
        text-align: center;
    }
.footer-section {
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    }

    .social-links {
        justify-content: center; 
        width: 100%;
        margin-top: 15px;
    }
}
}

#zasto-odabrati {
    flex-direction: column; 
    align-items: center;   
}

.interaktivna-sekcija {
    width: 100%;           
    margin-top: 30px;     
}
.izbornik-gumbi button.aktivni-gumb {
    background-color: #e4ca9e; 
    color: #000000;          
    border-color: #000000;
    transform: translateX(10px); 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    background-color: #000000;
    padding: 0 15px; 
}


.faq-item.active .faq-answer {
    max-height: 200px; /* Dovoljno velika vrijednost da stane tekst */
    padding: 15px;
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}