:root{ --max:1280px; --text:#111; --muted:#6b7280; --border:#e5e7eb; --chip:#f8fafc; --accent:#e11d48; }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin:0 auto;padding:20px}

    header{border-bottom:1px solid var(--border);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
    .brand{font-weight:800;font-size:26px}
    nav.menu{display:flex;gap:20px;font-weight:600}

    h1{font-size:32px;font-weight:800;margin:12px 0 20px}

    .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
    @media (max-width:900px){.grid{grid-template-columns:1fr}}

    .card,.info{border:1px solid var(--border);border-radius:14px;background:#fff}
    .card-body{padding:24px}
    .lead{font-size:18px;margin:0 0 14px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
    .btn-primary{background:var(--accent);color:#fff}

    /* Mapa */
    .map-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .map-links{display:flex;gap:10px;align-items:center;margin-top:10px}
    .open-map{font-weight:700;border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:#f3f4f6}

    .pill{display:inline-block;background:var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px}
    footer{margin-top:50px;border-top:1px solid var(--border);padding:14px 20px;color:#6b7280;font-size:14px}
    
    .username {
      position: absolute;
      top: 10px;
      left: 20px;
      color: var(--top-text);
      font-weight: 600;
      background: var(--top);
      padding: 6px 12px;
      border-radius: 8px;
    }

    /* MODAL STYLES */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .modal-content {
      background: white;
      padding: 40px;
      border-radius: 16px;
      max-width: 500px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      animation: modalAppear 0.3s ease-out;
    }

    @keyframes modalAppear {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .btn-confirm {
      padding: 14px 32px;
      border: none;
      border-radius: 10px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .btn-yes {
      background: #e11d48;
      color: white;
    }

    .btn-yes:hover {
      background: #be123c;
    }

    .btn-no {
      background: #6b7280;
      color: white;
    }

    .btn-no:hover {
      background: #4b5563;
    }

    /* HAMBURGER I MOBILNI MENI */
    .hamburger {
      display: none;
      font-size: 28px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
    }

    .right {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .right a {
      padding: 6px 12px;
      border-radius: 6px;
      transition: background-color 0.3s;
    }

    .right a:hover {
      background-color: #f3f4f6;
    }

    /* MOBILE STYLES */
    @media (max-width: 768px) {
      /* Header i meni */
      .hamburger {
        display: block;
      }
      
      nav.menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 80px 20px 30px;
        z-index: 1000;
        overflow-y: auto;
        gap: 0;
      }
      
      nav.menu.active {
        display: flex;
      }
      
      nav.menu a {
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
        width: 100%;
        font-size: 18px;
      }
      
      .right {
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        gap: 12px;
      }
      
      .right a {
        width: 100%;
        text-align: center;
        padding: 12px;
      }
      
      /* Forma za mobilne */
      label {
        display: block;
        margin-top: 12px;
        font-weight: 600;
      }
      
      input[type="email"],
      input[type="text"],
      input[type="file"],
      textarea {
        width: 100%;
        padding: 12px;
        margin: 8px 0 16px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 16px;
        font-family: inherit;
      }
      
      textarea {
        min-height: 120px;
      }
      
      .btn {
        width: 100%;
        justify-content: center;
      }
      
      /* Modal za mobilne */
      .modal-content {
        margin: 20px;
        padding: 30px 20px;
        width: calc(100% - 40px);
      }
      
      .btn-confirm {
        width: 100%;
        margin-bottom: 10px;
      }
      
      /* Footer za mobilne */
      footer > div {
        grid-template-columns: 1fr !important;
        gap: 20px;
        text-align: center;
      }
      
      /* Opšti stilovi za mobilne */
      h1 {
        font-size: 24px;
        text-align: center;
      }
      
      .container {
        padding: 15px;
      }
      
      .card-body {
        padding: 20px;
      }
      
      .pill {
        display: block;
        text-align: center;
        margin-top: 20px;
      }
    }
    /* Dodajte u CSS deo za hamburger */
.hamburger.active {
  color: var(--accent);
}

/* I u JavaScript promenite: */

.hamburger {
  position: relative;
  z-index: 2001;
}
nav.menu {
  z-index: 2000;
}
@media (max-width: 768px) {
  .hamburger {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 2001;
  }
}