/* =========================================================
   ZRNCE TAXI — zajednicki temelj (css/base.css)

   Paleta boja, reset, dugmad, topbar, header, navigacija, footer.
   OVO JE JEDINO MESTO gde se menjaju boje i osnovne komponente.

   Stranica ucitava ovaj fajl PRE svog <style> bloka, pa moze da
   pregazi bilo koje pravilo — nekoliko stranica to i radi, npr.
   uze stranice imaju svoj --container.
   ========================================================= */

:root{
  --red: #E31E24;
  --red-dark: #8E1014;
  --red-darker: #4A0709;
  --gold: #F0BE00;
  --gold-light: #FFDE6E;
  --gold-dark: #B88900;
  --black: #121212;
  --charcoal: #1B1B1B;
  --charcoal-2: #262626;
  --charcoal-3: #34322D;
  --cream: #FBF8F2;
  --cream-2: #F2ECDD;
  --white: #FFFFFF;
  --ink: #1E1B14;
  --gray: #6B6558;
  --gray-light: #9A9284;
  --line: #E4E0D4;
  --line-dark: rgba(255,255,255,.12);
  --success: #1E8E3E;
  --shadow-sm: 0 1px 3px rgba(20,16,8,.08), 0 1px 2px rgba(20,16,8,.06);
  --shadow-md: 0 10px 24px rgba(20,16,8,.10);
  --shadow-lg: 0 24px 56px rgba(20,16,8,.18);
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1180px;
  --info-bg: #FFF7E0;
  --success-bg: #EAF6EC;
  --warn: #B88900;
  --warn-bg: #FFF7E0;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Poppins', 'Segoe UI', Arial, sans-serif; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; line-height:1.55; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; line-height:1.16; letter-spacing:-.01em; }
em{ font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:600; color:var(--gold-dark); }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.container.narrow{ max-width:800px; }
.hidden{ display:none !important; }
.icon{ width:1em; height:1em; flex:none; }

/* šara "taksi kockice" — jedini direktan citat loga, korišćena škrto kao akcent linija */
.checker-strip{ height:8px; background-image: linear-gradient(45deg, var(--black) 25%, transparent 25%), linear-gradient(-45deg, var(--black) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--black) 75%), linear-gradient(-45deg, transparent 75%, var(--black) 75%); background-size:8px 8px; background-position:0 0, 0 4px, 4px -4px, -4px 0px; background-color:var(--gold); }

/* =========================== BUTTONS =========================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--radius-sm); font-weight:600; font-size:.95rem; letter-spacing:.1px; padding:13px 22px; transition:transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--gold); color:var(--black); box-shadow:var(--shadow-sm); }
.btn-gold:hover{ background:var(--gold-light); }
.btn-red{ background:var(--red); color:var(--white); box-shadow:0 8px 20px rgba(227,30,36,.28); }
.btn-red:hover{ background:#c81118; }
.btn-outline{ background:transparent; color:var(--cream); border:1.5px solid rgba(255,255,255,.28); }
.btn-outline:hover{ border-color:rgba(255,255,255,.5); }

/* =========================== TOPBAR =========================== */
.topbar{ background:var(--red-dark); color:var(--white); font-size:.8rem; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:7px; padding-bottom:7px; gap:12px; }
.topbar-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.topbar-left span{ display:inline-flex; align-items:center; gap:6px; opacity:.92; }
.topbar-left .icon{ width:13px; height:13px; }

/* Na desktopu broj već stoji u navigaciji — u topbaru je suvišan.
   Ispod 860px se .nav-phone u headeru sakriva, pa topbar preuzima ulogu. */
.topbar-right{ display:flex; align-items:center; gap:14px; flex:none; }
.topbar-right a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap; }
.topbar-right .icon{ width:13px; height:13px; }

/* =========================== HEADER =========================== */
.site-header{ position:sticky; top:0; z-index:100; background:var(--charcoal); border-bottom:1px solid rgba(255,255,255,.08); }
.main-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-end; padding:8px 24px; gap:12px; }

/* Logo je eksplicitno u srednjoj koloni — ostaje centriran čak i kad se
   leva/desna kolona isprazne (npr. na mobilnom kad se nav-links sakrije),
   jer grid kolone (1fr/auto/1fr) ostaju simetrične bez obzira na sadržaj. */
.brand{ display:flex; align-items:center; gap:10px; grid-column:2; grid-row:1; justify-self:center; }
.brand img{ height:100px; width:auto; }
.nav-links{ grid-column:1; grid-row:1; justify-self:start; display:flex; align-items:center; gap:2px; }
.nav-links a{ color:rgba(251,248,242,.82); font-weight:500; font-size:.92rem; padding:10px 14px; border-radius:8px; transition:background .15s ease, color .15s ease; white-space:nowrap; }
.nav-links a:hover{ background:rgba(255,255,255,.06); color:var(--cream); }
.nav-links a.active{ color:var(--gold); font-weight:600; }
.nav-cta{ grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:18px; }
.nav-phone{ display:flex; align-items:center; gap:8px; color:var(--cream); font-weight:600; font-size:.92rem; }
.nav-phone .icon{ width:16px; height:16px; color:var(--gold); }
.nav-login{ display:flex; align-items:center; gap:7px; color:rgba(251,248,242,.82); font-weight:600; font-size:.88rem; border:1.5px solid rgba(255,255,255,.25); border-radius:8px; padding:8px 14px; transition:border-color .15s ease, color .15s ease; }
.nav-login:hover{ border-color:var(--gold); color:var(--cream); }
.nav-login .icon{ width:15px; height:15px; }
.nav-toggle{ display:none; background:transparent; border:1.5px solid rgba(255,255,255,.25); border-radius:8px; padding:8px; color:var(--cream); }
.nav-toggle .icon{ width:20px; height:20px; }
.mobile-nav{ display:none; flex-direction:column; background:var(--charcoal-2); padding:8px 18px 16px; }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ color:var(--cream); font-weight:500; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav a.active{ color:var(--gold); font-weight:600; }
.mobile-nav .nav-phone{ padding:14px 6px 4px; }

/* =========================== CTA STRIP =========================== */
.cta-strip{ background:linear-gradient(120deg, var(--red-darker), var(--red-dark) 60%, var(--red)); color:var(--white); padding:38px 0; }
.cta-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cta-strip h2{ font-size:1.4rem; margin-bottom:4px; }
.cta-strip p{ margin:0; color:rgba(255,255,255,.82); font-size:.9rem; }
.cta-strip .btn{ flex:none; }

/* =========================== FOOTER =========================== */
.site-footer{ background:var(--black); color:var(--gray-light); padding-top:52px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand img{ height:48px; width:auto; margin-bottom:14px; }
.footer-brand p{ font-size:.85rem; line-height:1.65; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; background:var(--charcoal-2); display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.footer-social a:hover{ background:var(--gold); color:var(--black); }
.footer-social .icon{ width:15px; height:15px; }
.footer-col h4{ color:var(--white); font-size:.88rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ font-size:.86rem; transition:color .15s ease; }
.footer-col ul li a:hover{ color:var(--gold-light); }
.footer-col .contact-item{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; margin-bottom:12px; }
.footer-col .contact-item .icon{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--gold); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 0; font-size:.78rem; }
.footer-col .contact-item a{ color:inherit; }
.footer-col .contact-item a:hover{ color:var(--gold); text-decoration:underline; }

/* =========================== PAGE HERO =========================== */
.page-hero{ position:relative; overflow:hidden; background: radial-gradient(760px 420px at 88% -8%, rgba(240,190,0,.16), transparent 62%), radial-gradient(680px 420px at 4% 108%, rgba(227,30,36,.20), transparent 60%), linear-gradient(180deg, var(--black) 0%, var(--charcoal) 100%); padding:56px 0; }
.page-hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.page-hero-text .badge-mini{ display:inline-flex; align-items:center; gap:7px; background:rgba(240,190,0,.12); border:1px solid rgba(240,190,0,.35); color:var(--gold-light); padding:7px 14px; border-radius:30px; font-size:.8rem; font-weight:600; margin-bottom:18px; }
.page-hero-text .badge-mini .icon{ width:14px; height:14px; }
.page-hero-text p{ color:rgba(251,248,242,.72); font-size:1.02rem; max-width:46ch; margin-bottom:26px; }
.page-hero-photo{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.1); }

/* Ovo nije hero na vrhu strane nego prateća sekcija na dnu — uspravna
   slika 4:5 bi je razvukla i ostavila veliku prazninu pored teksta. */
.page-hero-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }


/* =========================================================
   RESPONZIVNI PRELOMI ZAJEDNICKIH DELOVA
   Navigacija i footer su isti na svim stranicama, pa i njihovi
   prelomi pripadaju ovde. Ranije su stajali u <style> bloku svake
   stranice — nova stranica ih zbog toga ne bi nasledila i meni bi
   se na telefonu prelivao van ekrana.
   ========================================================= */
@media (max-width: 1020px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-phone{ display:none; }
  .nav-login{ display:none; }
  .brand img{ height:78px; }
  .topbar-left span:nth-child(2){ display:none; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .topbar{ font-size:.7rem; }
  .topbar .container{ padding:0 14px; }
}
/* Na desktopu broj vec stoji u navigaciji — u topbaru je suvisan */
.topbar-right{ display:none; }
@media (max-width: 860px){
  .topbar-right{ display:flex; }
}