/* =========================================================
   Hodža Jusuf · dodaci za Node verziju
   nova 3D knjiga, tumačenje snova, poruke formi, tost
   (boje i fontovi su isti kao na ostatku sajta)
   ========================================================= */

/* ---------- 3D knjiga: sekcija ---------- */
#zapis-section{
  --zlato:#c9a24b; --zlato-svetlo:#e8cd8a; --krem:#f2e8d2;
  --tekst-2:#cfe0d6; --tekst-3:#8ba79a; --noc:#0a1f18;
  --linija:rgba(201,162,75,.2); --linija-jaka:rgba(201,162,75,.45);
  --naslovni:'Inter',sans-serif;
  position:relative; padding:64px 0 70px;
  background:radial-gradient(90% 55% at 50% 55%,rgba(240,190,110,.13) 0%,rgba(240,190,110,.04) 40%,transparent 70%);
}
#zapis-section .wrap{width:100%;max-width:800px;margin:0 auto;padding:0 16px;text-align:center}
#zapis-section .eyebrow{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.75; margin-bottom:14px;
}
#zapis-section h1{
  font-family:'EB Garamond',serif; font-weight:500;
  font-size:clamp(27px,5.2vw,42px); line-height:1.15;
  margin:0 0 12px; color:#f7edd7; letter-spacing:.01em;
}
#zapis-section .sub{
  font-family:'EB Garamond',serif; font-style:normal; font-weight:500;
  font-size:clamp(22px,4.6vw,32px); color:#cfe0d6;
  margin:0 auto 6px; max-width:620px; line-height:1.45;
}

/* ---------- 3D knjiga: scena ---------- */
.pozornica{position:relative;width:100%;max-width:980px;margin:10px 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(8,26,20,.75);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:20px;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:11.5px;letter-spacing:.16em;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(8,26,20,.82);border:1px solid var(--linija-jaka);color:var(--krem);font:500 13px/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:600}
.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-3);font:600 11.5px var(--naslovni);letter-spacing:.16em;text-transform:uppercase;transition:opacity .5s;pointer-events:none}
.pozornica-ucitavanje span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(201,162,75,.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[hidden]{display:none}
.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(201,162,75,.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}}

/* ---------- 3D knjiga: dugme i savet (isti izgled kao staro dugme) ---------- */
.zapis-dno{display:flex;flex-direction:column;align-items:center}
#zapis-section .cta{
  margin-top:6px;
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:.04em; color:#241a0c;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border:none; border-radius:6px; padding:15px 32px; cursor:pointer;
  box-shadow:0 12px 28px rgba(201,162,75,.22), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s ease, opacity .45s ease;
}
#zapis-section .cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(201,162,75,.32), inset 0 1px 0 rgba(255,255,255,.5); }
#zapis-section .cta:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }
#otvori-knjigu.nestaje{opacity:0;transform:scale(.94) translateY(6px);pointer-events:none}
.savet{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8ba79a;margin:14px 0 0;transition:opacity .4s}
.savet.nestaje{opacity:0}

/* ---------- 3D knjiga: kartica sa zapisom (papir, kao na starom sajtu) ---------- */
.rezultat{width:100%;animation:pojava .9s cubic-bezier(.2,.8,.2,1) both}
.rezultat[hidden]{display:none}
@keyframes pojava{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rezultat-okvir{
  max-width:520px; margin:26px auto 0;
  background:linear-gradient(178deg,#f6eddb,#ece0c4);
  color:var(--ink); border-radius:8px;
  padding:30px 26px 24px; text-align:left; position:relative;
  border:1px solid #dccfae; box-shadow:0 24px 55px rgba(0,0,0,.45);
}
.rezultat-okvir::before{content:"";position:absolute;inset:9px;border:1px solid rgba(138,109,60,.3);border-radius:4px;pointer-events:none}
.rezultat-nadnaslov{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 12px}
.rezultat-tekst{font-family:'EB Garamond',serif;font-size:19px;line-height:1.6;margin:0 0 20px;padding-left:14px;border-left:2px solid rgba(138,109,60,.4);color:var(--ink)}
.rezultat-tekst::before{content:"\201E";color:var(--brass)}
.rezultat-tekst::after{content:"\201C";color:var(--brass)}
.rezultat-podaci{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
.rezultat-podaci div{padding:9px 11px;border-radius:6px;background:rgba(138,109,60,.07);border:1px solid rgba(138,109,60,.22)}
.rezultat-podaci dt{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.rezultat-podaci dd{margin:3px 0 0;font-family:'EB Garamond',serif;font-size:19px;font-weight:600;line-height:1.25;color:#3a2a12}
.rezultat-podaci dd small{display:block;font-weight:400;font-style:italic;font-size:15px;color:#6b5434}
.rezultat-objava{margin:12px 0 0;font-family:'EB Garamond',serif;font-style:italic;font-size:16px;color:#6b5434}
.rezultat-objava:empty{display:none}
.rezultat-dugmad{display:grid;gap:10px;margin-top:20px}
.rezultat-dugmad .btn{justify-content:center;width:100%;text-align:center}
.rezultat-napomena{margin:14px 0 0;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.04em;color:var(--brass)}
@media (min-width:560px){.rezultat-podaci{grid-template-columns:repeat(4,1fr)}}

/* ---------- tumačenje snova ---------- */
.snovi{padding:30px 0 90px}
.forma-san{
  max-width:560px; margin:34px auto 0; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid rgba(201,162,75,.16);
  border-radius:16px; padding:30px 22px 24px;
}
.san-oznaka{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.forma-san textarea,.forma-san input{
  width:100%; padding:13px 16px; margin-bottom:20px; border-radius:10px;
  border:1px solid rgba(232,201,138,.3); background:rgba(255,255,255,.05);
  color:#eef3ea; font-family:inherit; font-size:15px;
}
.forma-san textarea{min-height:120px;resize:vertical;font-family:'EB Garamond',serif;font-size:17px;line-height:1.5}
.forma-san textarea:focus,.forma-san input:focus{outline:none;border-color:var(--gold)}
.cipovi{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cipovi button{font-family:'Inter',sans-serif;font-size:14px;padding:9px 15px;border-radius:99px;border:1px solid rgba(232,201,138,.3);background:rgba(255,255,255,.04);color:#d7e2da;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cipovi button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#1b1408}
.san-dugmad{display:grid;gap:10px;margin-top:4px}
.san-dugmad .btn{justify-content:center;width:100%;text-align:center}
.svc-link{display:inline-block;margin-top:14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(232,205,138,.4);padding-bottom:2px}

/* ---------- poruke formi, zamka za botove ---------- */
.forma-poruka{min-height:1.2em;margin:12px 0 0;font-family:'EB Garamond',serif;font-size:16.5px;line-height:1.45;color:var(--gold-lt);text-align:center}
.forma-poruka:empty{margin:0;min-height:0}
.forma-poruka.greska{color:#f0a39a}
.reply-forma .forma-poruka{text-align:left}
.zamka{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- tost (kratka poruka na dnu ekrana) ---------- */
.tost{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:300;transform:translate(-50%,30px);opacity:0;max-width:calc(100% - 40px);background:var(--gold);color:#1b1408;padding:12px 20px;border-radius:14px;font:500 15px/1.35 'Inter',sans-serif;text-align:center;transition:.35s;pointer-events:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.tost.vidljiv{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .rezultat,.pozornica-rezerva img{animation:none}
}

/* sidra iz menija ne ulaze ispod gornje trake */
#zapis-section,#san{scroll-margin-top:70px}