/* =========================
   RESET & OSNOVE
========================= */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family: Arial, Helvetica, sans-serif;
    background:#0b0b0b;
    color:#eee;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* =========================
   HEADER
========================= */
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#000;
    border-bottom:2px solid darkred;
    padding:10px 20px;
    position:relative;
    z-index:10;
}
.logo img {
    height:60px;
    width:auto;
    transition: transform 0.3s ease;
}
.logo img:hover { transform: scale(1.1) rotate(-2deg); }

/* TIMER CENTAR */
.header-center {
    flex:1;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:18px;
}

/* MENU DESNO / HAMBURGER WRAPPER */
.nav-wrapper { display:flex; align-items:center; gap:15px; }
.menu {
    display:flex;
    gap:0;
}
.menu a {
    position: relative;
    text-decoration:none;
    color:red;
    font-weight:bold;
    padding:0 20px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s ease;
}
.menu a:hover { background:red; color:#fff; }
.menu a:hover::after,
.menu a.active::after {
    content:"";
    position:absolute;
    left:0; bottom:0; width:100%; height:2px; background:#fff;
}

/* HAMBURGER */
.hamburger { display:none; font-size:32px; color:red; cursor:pointer; }

/* =========================
   KOLONE LEVO/DESNO 48% + 1% gap
========================= */
.container { flex:1; display:flex; gap:2%; padding:40px 20px; }
.column { width:48%; display:flex; flex-direction:column; gap:20px; }
.column.animacija {
    opacity:0;
    transform:translateY(20px);
    animation:slideUp 0.8s forwards;
}
@keyframes slideUp {
    0% { opacity:0; transform:translateY(80px);}
    100% { opacity:1; transform:translateY(0);}
}
.column h2 { color:red; }
.column p { color:#eee; line-height:1.6; }
.column img {
    width:100%;
    height:auto;
    border:2px solid darkred;
    transition: transform 0.3s, box-shadow 0.3s;
}
.column img:hover {
    transform:scale(1.03);
    box-shadow:0 5px 15px rgba(255,0,0,0.6);
}

/* FOOTER */
footer {
    background:#000;
    border-top:2px solid darkred;
    color:#777;
    text-align:center;
    padding:15px;
    font-size:14px;
    margin-top:auto;
}


/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){
    .hamburger { display:block; }
    .menu {
        display:none;
        flex-direction:column;
        position:absolute;
        top:60px;
        right:0;
        background:#000;
        border:1px solid darkred;
        padding:15px;
        width:220px;
        z-index:100;
    }
    .menu.active { display:flex; }
    .menu a { justify-content:flex-start; padding:10px 15px; height:45px; }
    .container { flex-direction:column; }
    .column { width:100%; }
}