/* ============================================================
   FAKTO — javni sajt
   Isti tokeni, drugačija upotreba: veći tekst, više vazduha, mekši radijusi.
   ============================================================ */

.sajt { font-size: var(--t-lg); line-height: var(--t-lg-h); background: var(--n-0); }
.sajt h1, .sajt h2, .sajt h3 { font-family: var(--font-naslov); font-weight: 700; letter-spacing: -.02em; }

.omot { max-width: var(--sajt-max); margin: 0 auto; padding: 0 var(--r6); }

/* ---------------- zaglavlje ---------------- */

.sajt-glava {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--n-100);
}
.sajt-glava .omot { display: flex; align-items: center; gap: var(--r6); height: 68px; }

.sajt-logo {
    font-family: var(--font-naslov);
    font-size: var(--t-2xl); font-weight: 800;
    color: var(--n-900);
    letter-spacing: -.03em;
}
.sajt-logo:hover { text-decoration: none; color: var(--n-900); }
.sajt-logo .tacka { color: var(--brend-600); }

.sajt-nav { display: flex; align-items: center; gap: var(--r5); margin-left: var(--r6); }
.sajt-nav a { font-size: var(--t-md); font-weight: 500; color: var(--n-700); }
.sajt-nav a:hover { color: var(--brend-600); text-decoration: none; }
.sajt-akcije { margin-left: auto; display: flex; align-items: center; gap: var(--r3); }

@media (max-width: 900px) {
    .sajt-nav { display: none; }
    .sajt-glava .omot { gap: var(--r3); }
}

/* ---------------- sekcije ---------------- */

.sekcija { padding: var(--r16) 0; }
.sekcija.tesna { padding: var(--r12) 0; }
.sekcija.siva { background: var(--n-25); }
.sekcija.tamna { background: var(--brend-900); color: rgba(255, 255, 255, .85); }
.sekcija.tamna h2, .sekcija.tamna h3 { color: var(--n-0); }

.sekcija-glava { max-width: 680px; margin: 0 auto var(--r10); text-align: center; }
.sekcija-oznaka {
    display: inline-block;
    font-size: var(--t-sm); font-weight: 600;
    color: var(--brend-600);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: var(--r3);
}
.sekcija-naslov { font-size: var(--t-3xl); line-height: var(--t-3xl-h); margin-bottom: var(--r3); }
.sekcija-opis { color: var(--n-500); font-size: var(--t-lg); line-height: var(--t-lg-h); }

@media (min-width: 900px) {
    .sekcija-naslov { font-size: var(--t-4xl); line-height: var(--t-4xl-h); }
}

/* ---------------- hero ---------------- */

.hero { padding: var(--r16) 0 var(--r12); }
.hero-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r12); align-items: center; }

.hero h1 {
    font-size: var(--t-4xl);
    line-height: var(--t-4xl-h);
    margin-bottom: var(--r5);
}
@media (min-width: 1000px) {
    .hero h1 { font-size: var(--t-5xl); line-height: var(--t-5xl-h); }
}
.hero-tekst { font-size: var(--t-lg); line-height: 26px; color: var(--n-500); margin-bottom: var(--r6); max-width: 520px; }
.hero-dugmad { display: flex; gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r3); }
.hero-napomena { font-size: var(--t-sm); color: var(--n-400); }

.hero-slika {
    background: linear-gradient(160deg, var(--brend-50), var(--n-0));
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r5);
    box-shadow: var(--senka-4);
}

@media (max-width: 900px) {
    .hero-mreza { grid-template-columns: 1fr; gap: var(--r8); }
    .hero { padding: var(--r10) 0; }
}

/* ---------------- kartice na sajtu ---------------- */

.sajt-mreza { display: grid; gap: var(--r5); }
.sajt-mreza.k2 { grid-template-columns: repeat(2, 1fr); }
.sajt-mreza.k3 { grid-template-columns: repeat(3, 1fr); }
.sajt-mreza.k4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) { .sajt-mreza.k4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .sajt-mreza.k3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sajt-mreza.k2, .sajt-mreza.k4 { grid-template-columns: 1fr; } }

.sajt-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r6);
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
a.sajt-kartica:hover {
    border-color: var(--brend-300);
    box-shadow: var(--senka-3);
    text-decoration: none;
}
.sajt-kartica .ikona-krug {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: var(--rad);
    margin-bottom: var(--r4);
}
.sajt-kartica h3 { font-size: var(--t-xl); margin-bottom: 8px; }
.sajt-kartica p { color: var(--n-500); font-size: var(--t-md); line-height: 22px; }

/* pločice delatnosti */
.delatnost-plocica {
    display: flex; align-items: center; gap: 10px;
    padding: var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    font-weight: 500;
    color: var(--n-700);
    font-size: var(--t-md);
    transition: all var(--brzo);
}
.delatnost-plocica:hover {
    border-color: var(--brend-600);
    background: var(--brend-50);
    color: var(--brend-700);
    text-decoration: none;
}
.delatnost-plocica .ikona { color: var(--n-400); }
.delatnost-plocica:hover .ikona { color: var(--brend-600); }

/* Cenovnik (.cene, .cena-*, .prekidac-ciklusa) stoji u 2-komponente.css —
   isti blok koristi i čarobnjak pretplate u panelu, koji ne učitava ovaj fajl. */

/* ---------------- FAQ ---------------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid var(--n-200);
    padding: var(--r5) 0;
}
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r4);
    font-size: var(--t-lg); font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: var(--t-2xl); font-weight: 400; color: var(--n-400);
    line-height: 1;
    flex: none;
}
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--n-500); font-size: var(--t-md); line-height: 24px; margin-top: var(--r3); }

/* ---------------- utisci ---------------- */

.utisak { display: flex; flex-direction: column; gap: var(--r4); }
.utisak-tekst { font-size: var(--t-lg); line-height: 26px; }
.utisak-autor { display: flex; align-items: center; gap: 10px; }
.utisak-autor .ime { font-weight: 600; font-size: var(--t-md); }
.utisak-autor .posao { font-size: var(--t-sm); color: var(--n-500); }

/* ---------------- podnožje ---------------- */

.sajt-noga { background: var(--brend-900); color: rgba(255, 255, 255, .7); padding: var(--r16) 0 var(--r8); font-size: var(--t-md); }
.noga-mreza { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r8); margin-bottom: var(--r10); }
.sajt-noga h4 { color: var(--n-0); font-size: var(--t-md); margin-bottom: var(--r4); }
.sajt-noga ul { list-style: none; display: grid; gap: 10px; }
.sajt-noga a { color: rgba(255, 255, 255, .7); font-size: var(--t-sm); }
.sajt-noga a:hover { color: var(--n-0); }
.noga-dno {
    display: flex; justify-content: space-between; gap: var(--r5); flex-wrap: wrap;
    padding-top: var(--r6);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-sm);
}

@media (max-width: 900px) {
    .noga-mreza { grid-template-columns: 1fr 1fr; gap: var(--r6); }
}
@media (max-width: 560px) {
    .noga-mreza { grid-template-columns: 1fr; }
}

/* ---------------- članak (vodič) ---------------- */

.clanak { max-width: 720px; margin: 0 auto; }
.clanak h2 { font-size: var(--t-2xl); margin: var(--r8) 0 var(--r3); }
.clanak h3 { font-size: var(--t-xl); margin: var(--r6) 0 var(--r2); }
.clanak p { margin-bottom: var(--r4); color: var(--n-700); }
.clanak ul, .clanak ol { margin: 0 0 var(--r4) var(--r5); display: grid; gap: 8px; }
.clanak li { color: var(--n-700); }
.clanak blockquote {
    border-left: 3px solid var(--brend-600);
    background: var(--brend-50);
    padding: var(--r4) var(--r5);
    border-radius: 0 var(--rad) var(--rad) 0;
    margin: var(--r5) 0;
}
.clanak img { border-radius: var(--rad); margin: var(--r5) 0; }

.kljucno {
    background: var(--akcenat-50);
    border: 1px solid var(--akcenat-400);
    border-radius: var(--rad);
    padding: var(--r5);
    margin-bottom: var(--r8);
}
.kljucno h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--akcenat-700); margin-bottom: 8px; }

/* .napomena-odgovornost je u 2-komponente.css — koristi je i aplikacija */

/* ---------------- vodiči ---------------- */

.mreza-vodici { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); }

@media (max-width: 900px) { .mreza-vodici { grid-template-columns: 1fr; } }

.vodic-kartica {
    display: flex; flex-direction: column;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r5);
    color: inherit;
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
.vodic-kartica:hover {
    text-decoration: none;
    border-color: var(--brend-600);
    box-shadow: var(--senka-3);
    transform: translateY(-2px);
}
.vodic-kategorija {
    align-self: flex-start;
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--brend-700);
    background: var(--brend-50);
    padding: 3px 10px;
    border-radius: var(--rad-pun);
    margin-bottom: var(--r3);
}
.vodic-naslov { font-size: var(--t-lg); font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.vodic-uvod { font-size: var(--t-sm); color: var(--n-500); line-height: 1.6; flex: 1; }
.vodic-noga { font-size: var(--t-xs); color: var(--n-400); margin-top: var(--r4); }

/* Ključno u tri rečenice — ono što pročita i onaj ko ne pročita ceo tekst. */
.vodic-kljucno {
    max-width: 760px; margin: 0 auto var(--r8);
    background: var(--brend-50);
    border-left: 3px solid var(--brend-600);
    border-radius: 0 var(--rad) var(--rad) 0;
    padding: var(--r5);
}
.vodic-kljucno-naslov {
    font-size: var(--t-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--brend-700);
    margin-bottom: 6px;
}
.vodic-kljucno p { margin: 0; font-size: var(--t-lg); line-height: 1.6; }

/* Tekst vodiča i prilagođenih stranica — jedina mesta gde ide slobodan HTML. */
.vodic-sadrzaj { max-width: 760px; margin: 0 auto; font-size: var(--t-lg); line-height: 1.75; color: var(--n-800); }
.vodic-sadrzaj > * + * { margin-top: var(--r5); }
.vodic-sadrzaj h2 { font-size: var(--t-2xl); font-weight: 700; margin-top: var(--r8); line-height: 1.3; }
.vodic-sadrzaj h3 { font-size: var(--t-xl); font-weight: 600; margin-top: var(--r6); }
.vodic-sadrzaj ul, .vodic-sadrzaj ol { padding-left: var(--r6); display: grid; gap: 8px; }
.vodic-sadrzaj li { line-height: 1.7; }
.vodic-sadrzaj a { color: var(--brend-600); text-decoration: underline; }
.vodic-sadrzaj blockquote {
    border-left: 3px solid var(--n-300);
    padding-left: var(--r5);
    color: var(--n-500);
    font-style: italic;
}
.vodic-sadrzaj code {
    font-family: var(--pismo-mono); font-size: .9em;
    background: var(--n-100); padding: 2px 6px; border-radius: var(--rad-sm);
}
.vodic-sadrzaj pre {
    background: var(--n-900); color: var(--n-50);
    padding: var(--r4); border-radius: var(--rad);
    overflow-x: auto; font-size: var(--t-sm);
}
.vodic-sadrzaj pre code { background: none; padding: 0; color: inherit; }
.vodic-sadrzaj table { width: 100%; border-collapse: collapse; font-size: var(--t-md); display: block; overflow-x: auto; }
.vodic-sadrzaj th, .vodic-sadrzaj td { padding: 10px var(--r3); border-bottom: 1px solid var(--n-200); text-align: left; }
.vodic-sadrzaj th { background: var(--n-25); font-weight: 600; white-space: nowrap; }
.vodic-sadrzaj hr { border: 0; border-top: 1px solid var(--n-200); margin: var(--r8) 0; }