/* =========================================================
   Hodža Rešid · "Noć i lampa"
   ========================================================= */
:root{
  --noc:#0a0f1e;
  --noc-2:#0e1630;
  --noc-3:#16213f;
  --povrs:rgba(255,255,255,.035);
  --povrs-2:rgba(255,255,255,.06);
  --linija:rgba(217,179,106,.2);
  --linija-jaka:rgba(217,179,106,.45);
  --zlato:#d9b36a;
  --zlato-svetlo:#f3d99b;
  --zlato-tamno:#9c7a3c;
  --tirkiz:#2f8ea3;
  --tirkiz-svetlo:#7cc9d6;
  --krem:#f3ead7;
  --tekst-2:#bdb5a4;
  --tekst-3:#8d8676;
  --wa:#1faa59;
  --viber:#7360f2;
  --naslovni:'El Messiri','Alegreya',Georgia,serif;
  --telo:'Alegreya',Georgia,'Times New Roman',serif;
  --arapski:'Amiri','El Messiri',serif;
  --sirina:1120px;
  --r:18px;
  --senka:0 18px 50px -18px rgba(0,0,0,.65);
  --uzorak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23d9b36a' stroke-width='.7'%3E%3Crect x='24' y='24' width='40' height='40'/%3E%3Crect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='9'/%3E%3Cpath d='M0 0l15.7 15.7M88 0L72.3 15.7M0 88l15.7-15.7M88 88L72.3 72.3M44 0v15.7M44 88V72.3M0 44h15.7M88 44H72.3'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;background:var(--noc)}
body{margin:0;background:var(--noc);color:var(--krem);font:400 18px/1.62 var(--telo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--naslovni);font-weight:500;line-height:1.18;margin:0;letter-spacing:.005em}
p{margin:0}
[lang=ar]{font-family:var(--arapski);direction:rtl;unicode-bidi:isolate}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--zlato-svetlo);outline-offset:3px;border-radius:6px}
::selection{background:rgba(217,179,106,.35);color:#fff}

.omot{width:100%;max-width:var(--sirina);margin:0 auto;padding-inline:20px}
.uzi{max-width:760px}
.preskoci{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--zlato);color:var(--noc);padding:8px 14px;border-radius:99px}
.preskoci:focus{left:12px}

.nadnaslov{font:500 13px/1.2 var(--naslovni);letter-spacing:.32em;text-transform:uppercase;color:var(--zlato);display:flex;align-items:center;gap:12px}
.nadnaslov::before,.nadnaslov::after{content:"";height:1px;flex:0 0 26px;background:linear-gradient(90deg,transparent,var(--zlato))}
.nadnaslov::after{background:linear-gradient(90deg,var(--zlato),transparent)}
.naslov-sekcije{font-size:clamp(32px,8.6vw,52px);color:var(--krem);margin-top:14px}
.naslov-sekcije span[lang=ar]{color:var(--zlato);font-size:.62em;margin-inline-start:.25em;vertical-align:middle}
.podnaslov{font-size:clamp(20px,5.4vw,24px);line-height:1.45;color:var(--tekst-2);margin-top:14px;font-style:italic}

/* ---------- dugmad ---------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:999px;border:0;font:500 17px/1.2 var(--naslovni);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;text-align:center}
.dugme svg{width:22px;height:22px;flex:none}
.dugme:active{transform:scale(.97)}
.dugme-wa{background:var(--wa);color:#fff;box-shadow:0 10px 26px -10px rgba(31,170,89,.7)}
.dugme-viber{background:var(--viber);color:#fff;box-shadow:0 10px 26px -10px rgba(115,96,242,.7)}
.dugme-zlato{background:linear-gradient(180deg,#f4dca3,#d4a85a 55%,#b88a3e);color:#1d1404;box-shadow:0 12px 30px -12px rgba(217,179,106,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.dugme-zlato svg{width:22px;height:22px;color:#5a3d0f}
.dugme-veliko{min-height:58px;font-size:18px;padding:14px 26px}
.dugme-malo{min-height:42px;padding:8px 18px;font-size:15px}
@media (hover:hover){
  .dugme:hover{transform:translateY(-2px)}
  .dugme-zlato:hover{box-shadow:0 16px 36px -12px rgba(217,179,106,.9),inset 0 1px 0 rgba(255,255,255,.55)}
}

/* ---------- gornja traka i meni ---------- */
.traka{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:10px;height:60px;padding:0 10px 0 16px;padding-top:env(safe-area-inset-top);box-sizing:content-box;background:linear-gradient(180deg,rgba(10,15,30,.9),rgba(10,15,30,.55));-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.traka.skrol{border-bottom-color:var(--linija);background:rgba(10,15,30,.9)}
.znak{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0}
.znak-zvezda{width:30px;height:30px;color:var(--zlato);flex:none}
.znak-tekst{font:500 19px/1.45 var(--naslovni);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.znak-ar{color:var(--zlato);font-size:18px;line-height:1;opacity:.9}
.traka-javi{font:500 15px/1 var(--naslovni);color:var(--noc);background:var(--zlato);text-decoration:none;padding:10px 16px;border-radius:99px;white-space:nowrap}
.meni-dugme{width:46px;height:46px;border:0;background:transparent;display:grid;place-content:center;gap:7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.meni-dugme span{display:block;width:24px;height:1.6px;background:var(--krem);border-radius:2px;transition:transform .35s ease,opacity .3s}
.meni-dugme[aria-expanded=true] span:first-child{transform:translateY(4.3px) rotate(45deg)}
.meni-dugme[aria-expanded=true] span:last-child{transform:translateY(-4.3px) rotate(-45deg)}
.meni{position:fixed;inset:0;z-index:45;background:rgba(8,12,24,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:flex-end;opacity:0;transition:opacity .3s}
.meni.otvoren{opacity:1}
.meni::before{content:"";position:absolute;inset:0;background:var(--uzorak);opacity:.05;pointer-events:none}
.meni-unutra{position:relative;width:100%;padding:90px 24px calc(30px + env(safe-area-inset-bottom))}
.meni-linkovi{list-style:none;margin:0 0 28px;padding:0}
.meni-linkovi a{display:flex;align-items:baseline;gap:16px;padding:12px 0;font:500 clamp(30px,8vw,40px)/1.15 var(--naslovni);text-decoration:none;border-bottom:1px solid rgba(217,179,106,.12);transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.meni.otvoren .meni-linkovi a{transform:none;opacity:1}
.meni-linkovi li:nth-child(2) a{transition-delay:.04s}.meni-linkovi li:nth-child(3) a{transition-delay:.08s}.meni-linkovi li:nth-child(4) a{transition-delay:.12s}.meni-linkovi li:nth-child(5) a{transition-delay:.16s}
.meni-linkovi span{color:var(--zlato);font-size:.6em;width:1.2em}
.meni-kontakt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meni-tel{grid-column:1/-1;text-align:center;color:var(--zlato-svetlo);font:500 20px var(--naslovni);padding:10px;text-decoration:none;letter-spacing:.04em}
body.meni-otvoren{overflow:hidden}

/* ---------- uvod ---------- */
.uvod{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 46px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 70% at 50% 0%,#1b2a52 0%,#111b38 38%,var(--noc) 78%)}
.nebo{position:absolute;inset:0;z-index:-2;opacity:.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 78% 14%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 30%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 66% 6%,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 42%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 94% 52%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 52% 24%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 40% 12%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 38%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 4% 8%,#fff 50%,transparent 51%);
  animation:treperi 6s ease-in-out infinite alternate}
.nebo::after{content:"";position:absolute;inset:0;background:var(--uzorak);opacity:.045;-webkit-mask:linear-gradient(180deg,transparent,#000 40%,transparent);mask:linear-gradient(180deg,transparent,#000 40%,transparent)}
@keyframes treperi{from{opacity:.55}to{opacity:1}}
.lampa{position:absolute;top:0;left:50%;width:min(34vw,150px);transform:translateX(-50%);z-index:-1;transform-origin:50% 0;animation:njisanje 7s ease-in-out infinite}
.lampa-svg{width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(255,200,110,.55))}
.lampa-sjaj{position:absolute;left:50%;top:62%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,206,120,.33) 0%,rgba(255,190,100,.12) 30%,transparent 62%);pointer-events:none;animation:plamen 3.2s ease-in-out infinite alternate}
@keyframes njisanje{0%,100%{transform:translateX(-50%) rotate(-1.4deg)}50%{transform:translateX(-50%) rotate(1.4deg)}}
@keyframes plamen{from{opacity:.8}to{opacity:1}}
.uvod-sadrzaj{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:calc(min(34vw,150px) * 2.1 + 40px)}
.uvod .nadnaslov{justify-content:center}
.uvod-ajet{color:var(--zlato);font-size:24px;margin-top:14px;opacity:.85}
.uvod-naslov{font-size:clamp(40px,11.4vw,76px);line-height:1.08;margin-top:14px;max-width:12.5em;text-wrap:balance}
.uvod-naslov em{font-style:normal;background:linear-gradient(180deg,#fbe7b6,#d9b36a 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.uvod-tekst{font-size:clamp(19px,5.2vw,23px);color:var(--tekst-2);margin-top:18px;max-width:30em;line-height:1.5}
.uvod-dugmad{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px;margin-top:28px}
.uvod-tel{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--tekst-2);text-decoration:none;font-size:17px}
.uvod-tel b{color:var(--krem);font-weight:500;letter-spacing:.03em}
.uvod-tel svg{width:16px;height:16px;color:var(--zlato)}
.uvod-info{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0}
.uvod-info li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--krem);padding:7px 14px;border:1px solid var(--linija);border-radius:99px;background:rgba(255,255,255,.03)}
.uvod-info svg{width:16px;height:16px;color:var(--zlato)}
.uvod-dalje{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--zlato-svetlo);text-decoration:none;font:500 15px var(--naslovni);letter-spacing:.08em}
.uvod-dalje i{width:1px;height:38px;background:linear-gradient(var(--zlato),transparent);position:relative;overflow:hidden}
.uvod-dalje i::after{content:"";position:absolute;left:-1px;top:-12px;width:3px;height:12px;border-radius:2px;background:var(--zlato-svetlo);animation:kap 2s ease-in infinite}
@keyframes kap{to{transform:translateY(54px)}}

/* ---------- sekcije ---------- */
.sekcija{position:relative;padding:84px 0}
.sekcija .nadnaslov{justify-content:flex-start}
.sekcija::before{content:"";position:absolute;left:50%;top:0;width:min(560px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--linija-jaka),transparent)}

/* ---------- zapis (knjiga) ---------- */
.zapis{padding-bottom:70px;background:
  radial-gradient(90% 55% at 50% 52%,rgba(240,190,110,.16) 0%,rgba(240,190,110,.05) 40%,transparent 70%),
  linear-gradient(180deg,var(--noc) 0%,#0d1428 50%,var(--noc) 100%)}
.zapis-glava{text-align:center}
.zapis .nadnaslov{justify-content:center}
.zapis .podnaslov{max-width:22em;margin-inline:auto}
.pozornica{position:relative;width:100%;max-width:980px;margin:18px auto 0;height:min(132vw,80vh);min-height:420px;max-height:760px;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#knjiga-platno{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;outline:none}
.pozornica.otvorena #knjiga-platno{cursor:default}
.pozornica-hud{position:absolute;top:8px;left:50%;white-space:nowrap;transform:translate(-50%,-6px);display:flex;align-items:baseline;gap:8px;padding:8px 16px;border-radius:99px;background:rgba(10,15,30,.7);border:1px solid var(--linija);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;font-family:var(--naslovni)}
.pozornica-hud b{font-size:22px;font-weight:700;color:var(--zlato-svetlo);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:center}
.hud-oznaka,.hud-od{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-2)}
.pozornica.lista .pozornica-hud{opacity:1;transform:translate(-50%,0)}
.pozornica-cip{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);max-width:calc(100% - 24px);white-space:nowrap;padding:8px 16px;border-radius:99px;background:rgba(10,15,30,.78);border:1px solid var(--linija-jaka);color:var(--krem);font:500 14px/1.3 var(--naslovni);letter-spacing:.02em;text-align:center;opacity:0;transition:opacity .6s,transform .6s;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pozornica-cip b{color:var(--zlato-svetlo);font-weight:500}
.pozornica.gotova .pozornica-cip{opacity:1;transform:translate(-50%,0)}
.pozornica-ucitavanje{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--tekst-2);font:500 14px var(--naslovni);letter-spacing:.12em;text-transform:uppercase;transition:opacity .5s;pointer-events:none}
.pozornica-ucitavanje span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(217,179,106,.2);border-top-color:var(--zlato);animation:vrti 1s linear infinite}
.pozornica.spremna .pozornica-ucitavanje{opacity:0}
@keyframes vrti{to{transform:rotate(360deg)}}
.pozornica-rezerva{position:absolute;inset:0;display:grid;place-items:center;perspective:1200px}
.pozornica-rezerva img{width:min(62vw,300px);height:auto;border-radius:4px 10px 10px 4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(217,179,106,.3);animation:lebdi 5s ease-in-out infinite;transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.6,0,.2,1),opacity 1.2s}
.pozornica-rezerva.otvara img{transform:rotateY(-160deg);opacity:0}
@keyframes lebdi{0%,100%{translate:0 0}50%{translate:0 -10px}}

.zapis-dno{display:flex;flex-direction:column;align-items:center;text-align:center}
#otvori-knjigu{margin-top:8px;transition:opacity .45s,transform .45s}
#otvori-knjigu.nestaje{opacity:0;transform:scale(.94) translateY(6px);pointer-events:none}
.savet{margin-top:10px;font-size:16px;color:var(--tekst-3);font-style:italic;transition:opacity .4s}
.savet.nestaje{opacity:0}

.rezultat{width:100%;margin-top:6px;animation:pojava .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pojava{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rezultat-okvir{position:relative;padding:34px 22px 26px;border-radius:22px;background:
  radial-gradient(120% 80% at 50% 0%,rgba(217,179,106,.12),transparent 60%),
  linear-gradient(180deg,#141e3b,#0e1630);border:1px solid var(--linija-jaka);box-shadow:var(--senka),inset 0 0 0 6px rgba(10,15,30,.6),inset 0 0 0 7px rgba(217,179,106,.18)}
.rezultat-okvir::before{content:"";position:absolute;left:50%;top:-17px;width:34px;height:34px;transform:translateX(-50%) rotate(45deg);background:var(--noc-2);border:1px solid var(--linija-jaka);box-shadow:0 0 0 5px var(--noc)}
.rezultat-okvir::after{content:"✦";position:absolute;left:50%;top:-12px;transform:translateX(-50%);color:var(--zlato);font-size:16px;line-height:24px}
.rezultat-nadnaslov{font:500 14px var(--naslovni);letter-spacing:.3em;text-transform:uppercase;color:var(--zlato)}
.rezultat-tekst{margin:16px 0 0;font:italic 400 clamp(23px,6.2vw,30px)/1.45 var(--telo);color:#fff8e8;text-wrap:pretty}
.rezultat-tekst::before{content:"\201E";color:var(--zlato)}
.rezultat-tekst::after{content:"\201C";color:var(--zlato)}
.rezultat-podaci{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:24px 0 0}
.rezultat-podaci div{padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(217,179,106,.16)}
.rezultat-podaci dt{font:500 12px var(--naslovni);letter-spacing:.2em;text-transform:uppercase;color:var(--tekst-3)}
.rezultat-podaci dd{margin:4px 0 0;font:500 19px/1.25 var(--naslovni);color:var(--krem)}
.rezultat-podaci dd small{display:block;font:italic 15px var(--telo);color:var(--tekst-2)}
.rezultat-objava{margin-top:12px;font-size:16px;color:var(--tekst-2)}
.rezultat-dugmad{display:grid;gap:10px;margin-top:22px}
.rezultat-dugmad .dugme{width:100%}
.rezultat-napomena{margin-top:16px;font-size:14px;color:var(--tekst-3)}

/* ---------- o njemu ---------- */
.o-njemu{background:linear-gradient(180deg,var(--noc),var(--noc-2) 60%,var(--noc))}
.o-njemu .omot{display:grid;gap:40px;align-items:center}
.mihrab{--luk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 28 28 12 50 0c22 12 50 28 50 58v82z'/%3E%3C/svg%3E");
  position:relative;width:min(78vw,380px);aspect-ratio:5/7;margin:0 auto;padding:3px;background:linear-gradient(160deg,#f6dda2,#a7813f 45%,#f1d597 70%,#8c6a30);
  -webkit-mask:var(--luk) center/100% 100% no-repeat;mask:var(--luk) center/100% 100% no-repeat;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.mihrab-luk{width:100%;height:100%;-webkit-mask:var(--luk) center/100% 100% no-repeat;mask:var(--luk) center/100% 100% no-repeat;background:radial-gradient(90% 70% at 50% 35%,#1f6a7c 0%,#123e4f 45%,#0b1a2c 100%);position:relative;overflow:hidden}
.portret-slika{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.portret-prazno{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--zlato)}
.portret-prazno::before{content:"";position:absolute;inset:0;background:var(--uzorak);background-size:60px;opacity:.12}
.portret-prazno svg{width:62%;height:auto;animation:okret 60s linear infinite;opacity:.9}
.portret-prazno span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(34px,10vw,52px);color:var(--zlato-svetlo);text-shadow:0 0 22px rgba(243,217,155,.45)}
@keyframes okret{to{transform:rotate(360deg)}}
.tacke{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.tacke li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--povrs);border:1px solid rgba(217,179,106,.12);font-size:18px}
.broj-ar{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;color:var(--zlato);font-size:20px;line-height:1}
.broj-ar::before{content:"";position:absolute;inset:3px;border:1px solid var(--linija-jaka);transform:rotate(45deg);border-radius:5px}
.pasusi{margin-top:26px;display:grid;gap:16px;color:var(--tekst-2);font-size:19px}
.pasusi p:first-child{color:var(--krem);font-size:21px;font-style:italic}

/* ---------- šta radi ---------- */
.usluge{display:grid;gap:14px;margin-top:34px}
.usluga{position:relative;padding:26px 22px 24px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(217,179,106,.14);overflow:hidden}
.usluga::after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;background:var(--uzorak);background-size:52px;opacity:.09;border-radius:50%}
.usluga-ar{font-size:44px;line-height:1.1;color:var(--zlato);text-align:start;direction:rtl;margin-bottom:10px}
.usluga h3{font-size:24px;color:var(--krem)}
.usluga p:last-child{margin-top:8px;color:var(--tekst-2)}

/* ---------- koraci ---------- */
.koraci{list-style:none;margin:34px 0 0;padding:0;counter-reset:k;position:relative}
.koraci::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:1px;background:linear-gradient(var(--zlato),rgba(217,179,106,.1))}
.koraci li{counter-increment:k;position:relative;padding:4px 0 28px 64px}
.koraci li::before{content:counter(k);position:absolute;left:4px;top:2px;width:34px;height:34px;display:grid;place-items:center;font:700 16px var(--naslovni);color:var(--noc);background:var(--zlato);transform:rotate(45deg);border-radius:6px}
.koraci li::after{content:counter(k);position:absolute;left:4px;top:2px;width:34px;height:34px;display:grid;place-items:center;font:700 16px var(--naslovni);color:var(--noc)}
.koraci li::before{color:transparent}
.koraci h3{font-size:23px}
.koraci p{margin-top:6px;color:var(--tekst-2)}

/* ---------- citat ---------- */
.citat{position:relative;padding:80px 0;text-align:center;overflow:hidden;background:radial-gradient(70% 90% at 50% 50%,#13324a,var(--noc) 75%)}
.citat::before{content:"";position:absolute;inset:0;background:var(--uzorak);opacity:.06}
.citat-ar{position:relative;font-size:clamp(34px,9vw,54px);line-height:1.7;color:var(--zlato-svetlo);text-shadow:0 0 30px rgba(243,217,155,.25)}
.citat-prevod{position:relative;font-size:clamp(22px,6vw,28px);font-style:italic;margin-top:12px}
.citat-izvor{position:relative;margin-top:12px;font:500 14px var(--naslovni);letter-spacing:.25em;text-transform:uppercase;color:var(--zlato)}

/* ---------- galerija ---------- */
.galerija-mreza{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}
.galerija-stavka{display:block;border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--noc-3);border:1px solid rgba(217,179,106,.12)}
.galerija-stavka:first-child{grid-column:1/-1;aspect-ratio:4/3}
.galerija-stavka img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
@media (hover:hover){.galerija-stavka:hover img{transform:scale(1.04)}}

/* ---------- utisci ---------- */
.utisci-zbir.prazno{display:none}
.utisci-zbir{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding:16px 18px;border-radius:16px;background:var(--povrs);border:1px solid rgba(217,179,106,.14)}
.zbir-broj{font:700 40px/1 var(--naslovni);color:var(--zlato-svetlo)}
.zbir-zvezde,.utisak-zvezde{color:var(--zlato);letter-spacing:2px;font-size:18px}
.zbir-zvezde .prazna,.utisak-zvezde .prazna{color:rgba(217,179,106,.25)}
.zbir-opis{color:var(--tekst-2);font-size:16px}
.utisci-lista{display:grid;gap:12px;margin-top:18px}
.utisak-primer{position:relative}
.oznaka-primer{display:inline-block;margin-top:10px;font:500 11px/1 var(--naslovni);letter-spacing:.18em;text-transform:uppercase;color:var(--zlato);border:1px solid var(--linija-jaka);border-radius:99px;padding:5px 10px}
.utisci-napomena{font-size:14px;color:var(--tekst-3);font-style:italic;text-align:center;margin:6px 0 2px}
.utisci-prazno{padding:22px 18px;border-radius:16px;border:1px dashed var(--linija-jaka);color:var(--tekst-2);font-style:italic;text-align:center}
.utisak{padding:18px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(217,179,106,.12)}
.utisak-glava{display:flex;align-items:center;gap:12px}
.utisak-glava>div{flex:1;min-width:0;display:flex;flex-direction:column}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--naslovni);color:var(--noc);background:linear-gradient(140deg,#f3d99b,#b88a3e)}
.utisak-ime{font:500 18px var(--naslovni)}
.utisak-datum{font-size:14px;color:var(--tekst-3)}
.utisak-tekst{margin-top:12px;white-space:pre-line;color:#e9e0cc}
.utisak-akcije{display:flex;gap:6px;margin-top:12px}
.utisak-akcije button{border:1px solid rgba(217,179,106,.18);background:transparent;border-radius:99px;padding:6px 14px;font-size:15px;color:var(--tekst-2);cursor:pointer}
.akcija-lajk.lajkovano{color:#f08a8a;border-color:rgba(240,138,138,.4)}
.odgovori:not(:empty){margin-top:12px;display:grid;gap:10px}
.odgovor{padding:10px 0 0 14px;border-left:2px solid rgba(217,179,106,.2)}
.odgovor-sejh{border-left-color:var(--zlato)}
.odgovor-glava{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.odgovor-ime{font:500 16px var(--naslovni)}
.odgovor-ime em{font-style:normal;color:var(--zlato);font-size:13px}
.odgovor-datum{font-size:13px;color:var(--tekst-3)}
.odgovor p{margin-top:4px;font-size:17px;color:var(--tekst-2);white-space:pre-line}
.odgovor-forma{display:grid;gap:8px;margin-top:12px}
input,textarea{width:100%;font:inherit;font-size:17px;color:var(--krem);background:rgba(255,255,255,.05);border:1px solid rgba(217,179,106,.22);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus{border-color:var(--zlato);background:rgba(255,255,255,.07)}
textarea{resize:vertical;min-height:52px}
::placeholder{color:var(--tekst-3)}
.utisak-forma{margin-top:28px;padding:22px 18px;border-radius:22px;background:linear-gradient(180deg,#121b36,#0e1630);border:1px solid var(--linija);display:grid;gap:14px}
.utisak-forma h3{font-size:26px}
.forma-opis{color:var(--tekst-2);font-size:16px;margin-top:-6px}
.polje{display:grid;gap:6px;border:0;margin:0;padding:0}
.polje>span,.polje legend{font:500 14px var(--naslovni);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);padding:0}
.ocena-zvezde{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin-top:6px}
.ocena-zvezde input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ocena-zvezde label{font-size:36px;line-height:1;color:rgba(217,179,106,.25);cursor:pointer;padding:2px;transition:color .15s,transform .15s}
.ocena-zvezde input:checked~label,.ocena-zvezde label:hover,.ocena-zvezde label:hover~label{color:var(--zlato)}
.ocena-zvezde input:focus-visible+label{outline:2px solid var(--zlato-svetlo);border-radius:6px}
.zamka{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.forma-poruka{min-height:1.2em;font-size:16px;color:var(--zlato-svetlo)}
.forma-poruka.greska{color:#f0a39a}

/* ---------- kontakt ---------- */
.kontakt{background:linear-gradient(180deg,var(--noc),#0c1a2c)}
.kontakt-kartice{display:grid;gap:10px;margin-top:28px}
.kontakt-kartica{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);text-decoration:none;color:#fff;transition:transform .2s}
.kontakt-kartica:active{transform:scale(.98)}
.kontakt-kartica svg{width:34px;height:34px;flex:none}
.kontakt-kartica b{display:block;font:500 21px/1.2 var(--naslovni);letter-spacing:.02em}
.kontakt-kartica small{display:block;font-size:15px;opacity:.85}
.k-wa{background:linear-gradient(135deg,#1fae5b,#128c4a)}
.k-viber{background:linear-gradient(135deg,#7d6bf5,#5b48d6)}
.k-tel{background:var(--povrs-2);border:1px solid var(--linija-jaka);color:var(--krem)}
.k-tel svg{color:var(--zlato)}
.kontakt-info{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.kontakt-info li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--povrs);border:1px solid rgba(217,179,106,.12)}
.kontakt-info svg{width:24px;height:24px;color:var(--zlato);flex:none}
.kontakt-info span{display:flex;flex-direction:column;font-size:19px}
.kontakt-info small{font:500 12px var(--naslovni);letter-spacing:.2em;text-transform:uppercase;color:var(--tekst-3)}

/* ---------- podnožje ---------- */
.podnozje{padding:56px 0 calc(110px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--linija);background:#080c18}
.podnozje-zvezda{width:52px;height:52px;margin:0 auto;color:var(--zlato)}
.podnozje-ime{margin-top:14px;font:500 24px var(--naslovni)}
.podnozje-ime span{color:var(--zlato);margin-inline-start:6px}
.podnozje-info{margin-top:6px;color:var(--tekst-2);font-size:16px}
.podnozje-tel a{color:var(--zlato-svetlo);text-decoration:none;font:500 18px var(--naslovni);letter-spacing:.04em}
.podnozje-tel{margin-top:6px}
.podnozje-prava{margin-top:16px;color:var(--tekst-3);font-size:14px}

/* ---------- plutajuća dugmad ---------- */
.plutajuca{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:10px;transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.plutajuca.vidljiva{transform:none;opacity:1}
.plut{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 26px -8px rgba(0,0,0,.6)}
.plut svg{width:28px;height:28px}
.plut-wa{background:var(--wa)}
.plut-viber{background:var(--viber)}
.plut-wa::after{content:"";position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid var(--wa);animation:talas 2.6s ease-out infinite;pointer-events:none}
@keyframes talas{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}

.tost{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,30px);opacity:0;max-width:calc(100% - 40px);background:var(--zlato);color:var(--noc);padding:12px 20px;border-radius:16px;font:500 16px/1.35 var(--naslovni);text-align:center;transition:.35s;pointer-events:none;box-shadow:var(--senka)}
.tost.vidljiv{opacity:1;transform:translate(-50%,0)}

/* ---------- pojavljivanje na skrol (samo gde browser podržava) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .usluga,.koraci li,.tacke li,.utisak,.kontakt-kartica,.mihrab,.naslov-sekcije{animation:iz-dna linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes iz-dna{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- veći ekrani ---------- */
@media (min-width:720px){
  .omot{padding-inline:32px}
  .usluge{grid-template-columns:1fr 1fr}
  .kontakt-kartice{grid-template-columns:1fr 1fr}
  .k-tel{grid-column:1/-1}
  .rezultat-podaci{grid-template-columns:repeat(4,1fr)}
  .rezultat-dugmad{grid-template-columns:1.4fr 1fr}
  .galerija-mreza{grid-template-columns:repeat(3,1fr)}
  .galerija-stavka:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .rezultat-okvir{padding:40px 40px 30px}
}
@media (min-width:960px){
  .traka{padding:0 28px}
  .o-njemu .omot{grid-template-columns:380px 1fr;gap:70px}
  .pozornica{height:640px}
  .sekcija{padding:110px 0}
  .usluge{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}