/*
================================================================
RESPONSIVE.CSS - GeekBit sajt
Verzija: 4.0 (Brute-force ispravka za utiske)
Autor: Gemini
Opis: Responzivni stilovi za tablete i mobilne uređaje.
================================================================
*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================================
1. Stilovi za manje laptopove (do 1400px)
================================================================
*/
@media (max-width: 1400px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 14px;
        padding: 10px 15px;
    }
}

@media (max-width: 1280px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 13px;
        padding: 10px 12px;
    }
}

/* ================================================================
2. Stilovi za tablete (do 991px)
================================================================
*/
@media (max-width: 991px) {
    /* --- Opšte --- */
    .layout_padding {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    /* --- Navigacija --- */
    .navbar-toggler { background-color: #912b69; border-radius: 5px; padding: 8px 10px; }
    .navbar-toggler-icon { padding: 0; margin: 0; width: 28px; height: 28px; }
    .header_section .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.95);
        padding: 20px;
        margin-top: 15px;
        border-radius: 10px;
        border: 1px solid #333;
        text-align: center;
    }
    .navbar-expand-lg .navbar-nav .nav-link { font-size: 16px; padding: 12px 10px; }
    #my_slider a.carousel-control-prev,
    #my_slider a.carousel-control-next { display: none; }

    /* --- Prelamanje svih sekcija u 1 kolonu --- */
    .banner_section .col-md-6,
    .about_section .col-md-6,
    .video_section .col-md-6,
    .product_section_2 .col-lg-4,
    .konfiguracije-card {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .product_section_2 > .row > div,
    .row > .konfiguracija-card { margin-bottom: 30px; }

    .banner_section .row,
    .about_section .row,
    .video_section .row {
        flex-direction: column-reverse;
        align-items: center;
    }
    .banner_section .image_1 { margin-bottom: 40px; }
    .banner_section .image_1,
    .banner_section .image_11,
    .about_section .image_22,
    .video_section .image_4 {
        margin: 0 auto 40px auto;
        padding-top: 75px;
        max-width: 60%;
    }

    /* --- Fontovi --- */
    .video_text, .video_text_2, .about_text, .product_text { font-size: 38px; }
    .controller_text, .controller_text_2 { font-size: 50px; line-height: 1.1;  }
    .lorem_text { text-align: center; }
    .shop_bt, .shop_bt_2 { float: none; margin: 30px auto; display: table; }
    
    body.homepage .banner_section { padding-top: 120px; }

    /* --- Kontakt Forma --- */
    .contact_section { margin-left: 0 !important; }
    .contact_section .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contact_section .col-md-6 {
        float: none !important;
        width: 100% !important;
        max-width: 550px !important;
        margin: 0 auto 60px auto !important;
    }
    .contact_section .image_6 { margin: 0 auto; }
    .contact_section h2 { text-align: center; }
    .contact_section .button1 { display: block; margin-left: auto; margin-right: auto; }
    
    /* === FINALNA BRUTE-FORCE ISPRAVKA ZA UTISKE === */
    .testimonial_section_2 {
        position: relative;
        min-height: auto;
        padding: 20px 0;
    }
    .testimonial-item {
    position: relative !important;
    display: none !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    visibility: visible !important;
    /* Linija "opacity: 1 !important;" je obrisana */
    width: 100%;
}
    .testimonial-item.active {
        display: block !important;
        animation: fadeIn 0.8s ease-in-out;
    }
    /* =============================================== */
    
    .box_main { width: 100%; padding: 30px; }
    .client_main { justify-content: center; }


    /* ================================================================
   BANNER RESPONSIVE FIX
================================================================
*/

/* 1. Remove the large top padding from the main headline */
.video_text {
    padding-top: 20px; /* Drastically reduced from 150px */
}

/* 2. Remove the top padding from the banner image/icon */
/* (Since the layout is reversed, this image is now at the top) */
.banner_section .image_1,
.banner_section .image_11 {
    padding-top: 0; /* Reduced from 75px */
    margin-top: 40px; /* Add some margin for spacing */
    margin-bottom: 30px; /* Reduce space below the image */
}

/* 3. Reduce the large bottom margin from the button */
.shop_bt {
    margin-bottom: 40px; /* Reduced from 100px */
}

/* 4. Adjust the overall banner padding for a tighter fit */
body.homepage .banner_section {
    padding-top: 100px; /* Reduced from 120px */
    padding-bottom: 40px;
    min-height: auto; /* Allow the banner to shrink vertically */
}
}

/* ================================================================
3. Stilovi za mobilne telefone (do 767px)
================================================================
*/
@media (max-width: 767px) {
    h1, .testimonial_text, .product_text, .about_text,
    .video_text, .video_text_2 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .controller_text, .controller_text_2 { font-size: 40px; }
    
    .about_section .container { box-shadow: none; padding: 20px; }

    .flip-card { height: 400px; }
    
    .client_main {
        width: 90%; 
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    .client_left { margin-right: 0; margin-bottom: 15px; }

    .banner_section .image_1, .banner_section .image_11, .about_section .image_22, .contact_section .image_6 {
        max-width: 70%;
        
    }
    
    .footer { padding: 100px 20px 20px 20px; }

 /* === FINALNA PODEŠAVANJA ZA DISCORD STRANICU (MOBILNI) === */
.video_section {
    padding-top: 60px;
    padding-bottom: 150px; /* POVEĆANO: Stvara prostor na dnu za talase */
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    z-index: 2;
}

.video_section .col-md-6 {
    text-align: center;
}

.video_section .image_4 {
    margin: 0 auto 30px auto;
}

.video_section .image_4 img {
    width: 180px;
}

.video_text_2 {
    font-size: 28px !important;
}

.controller_text_2 {
    font-size: 38px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px; /* Smanjen razmak ispod naslova */
}

.banner_text_2 {
    font-size: 16px;
    padding-top: 0; /* Uklonjen padding da bi se tekst približio naslovu */
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
}

.video_section .shop_bt {
    float: none;
    margin: 25px auto 0 auto; /* Smanjen razmak iznad dugmeta (podignuto je) */
    display: table;
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
}
/* ======================================================== */
}

/* ================================================================
4. Flip Card interakcija za touch uređaje
================================================================
*/
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}


/* === KONAČNO REŠENJE ZA MOBILNI PRIKAZ (SA ISPRAVLJENIM RAZMAKOM) === */
@media (max-width: 767px) {
    
    .kp-badge-section-final {
        flex-direction: column;
        gap: 15px; /* Smanjen glavni razmak između elemenata */
        max-width: 90%;
        padding: 25px 15px;
    }

    .kp-badge-logo-final {
        width: 140px;
        margin: 0 auto;
        order: 2;
    }

    .kp-badge-logo-final img {
        width: 100%;
        height: auto;
    }

    /* Ovde je ključna izmena */
    .kp-badge-stats-final {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        order: 1;
        margin-bottom: 0; /* UKLONILI SMO DODATNI RAZMAK SA DNA TEKSTA */
    }
    
    .kp-badge-stats-final .kp-badge-broj {
        font-size: 48px;
    }

    .kp-badge-stats-final .kp-badge-opis {
        font-size: 14px;
        text-align: left;
    }

    .kp-badge-button-final {
        order: 3;
    }
}